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>
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;
}
Seeing four perfectly aligned cards snap into place was the most satisfying moment of my journey so far.
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.
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 🚀
SOCIAL SHARE CARD GENERATOR