Learning HTML and CSS: The Foundation

After seeing my friend build my first site, I was hooked. I needed to understand how it all worked. So I started with the basics: HTML and CSS.

Starting from Scratch

I began with free online resources—tutorials, documentation, and lots of experimentation. The first time I wrote HTML and saw it render in a browser, I was amazed. It felt like magic.

The Struggles

Learning wasn't always smooth:

1. Semantic HTML: Understanding when to use <div> vs <section> vs <article>
2. CSS Layout: Flexbox and Grid seemed impossible at first
3. Responsive Design: Making things work on mobile felt like solving a puzzle

But each struggle taught me something valuable.

Breakthrough Moments

There were moments when things clicked:

• Understanding the box model
• Getting Flexbox to work for the first time
• Creating a responsive layout that actually worked

These small wins kept me going.

Code Example

Here's a simple example of what I was learning:

<div class="container">
  <header>
    <h1>My First Site</h1>
  </header>
  <main>
    <p>This is where the magic happens!</p>
  </main>
</div>

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

header {
  margin-bottom: 2rem;
}

Moving Forward

HTML and CSS gave me the foundation I needed. Next, I wanted to make things interactive. That's when JavaScript entered the picture.