DEV Community

Cover image for Stop Just Watching, Start Building: My Weekly Progress Report 🚀
Kenny
Kenny

Posted on

Stop Just Watching, Start Building: My Weekly Progress Report 🚀

#html #css #beginners #learning

They say the best way to learn is to do. While I'm halfway through my HTML & CSS course, I decided to stop just 'coding along' with the instructor and start building something that actually matters to me. Last week, I started building Kay Crochets, a landing page for my creative business, built entirely from scratch.

The Power of Semantic HTML
I didn't just use <div> for everything. I wanted this site to be accessible and SEO-friendly. I used:
<header> for my navigation.
<main> to wrap my core content.
<figure> and <figcaption> for my product cards.
The reason for this is that coding with meaning makes the CSS much easier to target later

<body>
    <div class="container">
      <header>
        <nav> ... </nav>
      </header>

      <main>
        <section class="main-article">
          <div class="hero-text">
            <h1>Kay Crochet</h1>
            <p> ... </p>
            <a href="#" class="btn hero-link">Customised Order</a>
          </div>
          <img src="images/img1-BR.png" />
        </section>

        <section class="tutorials">
          <div class="tutorial-container">
            <div class="tutorial-box">
              <figure>
                <img src="images/sunflower.png" alt="sunflower bouquet" />
                <figcaption>Sunflower Bouquet</figcaption>
                <a href="#" class="btn tutorial-link">youtube tutorial</a>
              </figure>
            </div>
            </div>
        </section>
      </main>
    </div>
</body>
Enter fullscreen mode Exit fullscreen mode

My "Aha!" Moment with CSS Grid
I used to fear layouts, but last week, CSS Grid became my best friend.
For my tutorials section, I used:

.tutorial-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 40px;
}
Enter fullscreen mode Exit fullscreen mode

Seeing four perfectly aligned cards snap into place was the most satisfying moment of my journey so far.
four perfectly aligned cards for tutorials

Styling for the right vibe
A good designer/developer knows that presentation matters. I chose a colour palette that feels warm and premium:
Background: #f3e8e9 (a soft, clean neutral).
Accents: #6f111b (a bold red).
Typography: A mix of Merriweather for headings (elegance) and Inter for UI (clarity). I even experimented with SVGs for custom icons to give the bestseller section that extra sparkle.

SVG Sparkle
The Struggle of the Week
I spent way too much time trying to keep my images from stretching. I finally discovered aspect-ratio: 1/1 and object-fit: cover. It’s a small CSS property, but it made my images look professional and consistent.

The Growth Mindset: I’m adding to this site every day as I learn new lectures. This week, my goal is to make this layout Responsive so it looks just as good on a phone as it does on my MacBook.

What project are you currently building to test your skills? Share your links below. Also, I’m very open to feedback; if you see anything in my snippets that could be optimized or handled better, I’d love to hear your critiques. Let’s grow together 🚀

Top comments (0)