Learning HTML & CSS: My First Week

Published January 16, 2025

This past week, I dove headfirst into HTML and CSS—and I've got to say, I'm both excited and a little overwhelmed. Below, I'll share some highlights, a few struggles, and a handy table showing how I tackled each day.

Getting Started

I kicked things off by creating a super basic webpage. At first, my page was basically just a white screen with a heading and a sentence. Exciting, right? But the moment I linked my first CSS file and changed the background color... I felt like I unlocked a whole new universe.

Tip: If you're as new as I am, start small.

Even making a simple page look cool with basic styling can spark major motivation.

What Surprised Me

HTML isn't “hard,” but it's easy to get lost in the tags. You'll want to keep your structure organized from the start.
CSS is powerful, but learning about the box model made my head spin at first. Turns out, margins, borders, and padding can actually be fun once you get the hang of it.
Positioning elements is a bit like solving a puzzle. If your layout isn't cooperating, try stepping away for a bit and coming back with fresh eyes (or a coffee break).

A Little Table of My Progress

Below is a quick rundown of what I focused on each day of my first week. It's not super detailed, but it'll give you a sense of how I paced things out.

Day	HTML Topic	CSS Topic	Notes
Monday	Basic tags: `<html>`, `<head>`, `<body>`	Inline styles	Felt odd mixing styles with HTML, but it was good practice.
Tuesday	Headings & paragraphs	External CSS w/ `<link>`	Loved keeping my CSS separate. Much cleaner.
Wednesday	Links & images	Fonts & typography	Played with Google Fonts—so many options!
Thursday	Lists & tables	The box model	Understanding padding vs. margin was a game changer.
Friday	Divs & sections	Basic layout (float)	Floats can be tricky—definitely some trial and error here.
Saturday	Forms (text inputs, buttons)	Flexbox basics	Flexbox is so much easier to use than floats.
Sunday	Revision & mini-project	More practice on Flexbox	Built a small demo page to test everything I learned.

One Thing I'm Proud Of

I managed to build a tiny website for my personal notes. It only has a home page and a second page listing my to-do items, but it's fully styled! A small win, but it felt huge to me. Using <div>s and basic Flexbox properties, I was able to line up everything nicely.

Here's a snippet of code (it's simple, but it got me excited):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Mini Site</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header>
      <h1>Paulina's Notes</h1>
    </header>
    <main>
      <section class="notes">
        <h2>Today's Tasks</h2>
        <ul>
          <li>Finish reading CSS documentation</li>
          <li>Practice Flexbox</li>
          <li>Go hiking in the afternoon</li>
        </ul>
      </section>
    </main>
  </body>
</html>

And guess what? It actually looked decent once I threw in some CSS for spacing and colors!

What's Next?

In the coming days, I'm planning to dive deeper into responsive design. Making websites that look good on a phone, tablet, and desktop at the same time sounds like a challenge, but I'm ready for it.

If you're learning HTML & CSS too, keep experimenting! I discovered that the best way to learn is by building tiny projects—even if they're just for fun. You'll be amazed at how quickly you improve when you're actively creating something.

Alright, that's all for now. Thanks for reading, and I'll be back soon with more updates!