Code with Malie

Follow my journey in learning how to code and become a front end developer

CS50 Week 8: Building the Web with HTML, CSS, and JavaScript


“The internet is where the future lives, and today, I’m building it!”

This was the thought that fueled my excitement as I dove into CS50 Week 8: HTML, CSS, and JavaScript—a milestone moment in my coding journey. This week marked the beginning of my exploration into web development, the cornerstone of creating immersive user experiences. From understanding webpage structures to building my first website, this journey is one I’ll never forget.

If you’ve ever wondered how websites come alive with visuals and interactivity, CS50 Week 8 is the gateway to understanding. Here’s how it unfolded for me and how you can learn from my experience.


Understanding Web Development: HTML, CSS, and JavaScript

Web development is like constructing a house. HTML lays the foundation and frames the walls. CSS decorates the interiors, adding colors, styles, and finesse. JavaScript is the electrical wiring—powering interactivity and dynamic behavior.

HTML: The Structure of the Web

HTML (HyperText Markup Language) serves as the skeleton of a webpage. During Week 8, I learned how to structure webpages with:

  • Headings (h1-h6): For titles and subtitles.
  • Paragraphs (p): For content blocks.
  • Links (a): For navigation links between pages.
  • Images (img): To add visuals.

Quick Tip for Beginners

Don’t underestimate the power of semantic tags like <header>, <main>, and <footer>! They improve SEO and accessibility.

CSS: Bringing Design to Life

CSS (Cascading Style Sheets) transforms the skeletal HTML into an artistic masterpiece. I experimented with:

  • Selectors and Properties: Styling text, backgrounds, and borders.
  • Flexbox and Grid: Aligning content with precision.
  • Media Queries: Making websites responsive.

My Favorite CSS Resource

For extra guidance, I used MDN Web Docs on CSS (highly recommend!).

JavaScript: The Engine Behind the Web

JavaScript gave my pages a pulse, allowing me to manipulate the DOM (Document Object Model). Some highlights included:

  • Event Listeners: Creating interactive buttons.
  • Functions: Writing reusable blocks of code.
  • Loops and Conditionals: Making dynamic decisions.

First Project: Building a Simple Website

With the basics under my belt, I embarked on building my first website. My project was a personal portfolio showcasing my coding journey, including links to blog posts like “Why I Chose Front-End Development”.

The Process

  1. Planning: I sketched a wireframe to outline the layout.
  2. Structuring: Using HTML to create sections like “About Me” and “Projects.”
  3. Styling: Adding personality with CSS.
  4. Adding Interactivity: Including a JavaScript-powered contact form.

Challenges Faced

The toughest part was debugging JavaScript. I relied on browser developer tools to identify errors, a skill that will undoubtedly help me in future projects.


FAQs: Your Web Development Questions Answered

Q: Can I learn HTML, CSS, and JavaScript without prior experience?
A: Absolutely! CS50 Week 8 starts from the basics, and resources like freeCodeCamp can supplement your learning.

Q: How long does it take to build a website as a beginner?
A: It depends on the complexity, but my first project took around two days, thanks to a clear plan and guidance from CS50.


My “Aha!” Moment

While building my site, I struggled with aligning images using CSS Flexbox. After hours of trial and error, I finally cracked it by experimenting with the justify-content and align-items properties. Seeing everything fall into place was a proud moment—it was a testament to the power of perseverance and curiosity.


Top Lessons from CS50 Week 8

  1. Plan Before Coding: Sketch your layout to save time.
  2. Start Simple: Focus on functionality before adding fancy styles or interactivity.
  3. Practice Debugging: Learn to use browser tools effectively.

Resources


Let’s connect!

Have you ever built a website before? Share your experience in the comments below! For more updates on my coding journey, follow Code with Malie and subscribe to my newsletter.


Discover more from Code with Malie

Subscribe to get the latest posts sent to your email.

Leave a Reply

Verified by MonsterInsights