⚡ 0 XP
Step 1 of 2
Plan your page
Time to build a complete page by yourself! Choose one:
- A shop page — like "Meera’s Mithai Shop", a kirana store, a tailor or a tiffin service
- A portfolio — about you: your hobbies, projects and how to contact you
Plan on paper first: what goes in the header, which 3 links go in the nav, which 3 or more cards (products or projects) you will show.
Your page will be checked for:
- a
<header> with an <h1> - a
<nav> with at least 3 links - a section with 3 or more cards laid out with flex or grid
- a picture — emoji, inline SVG or an
<img> with alt (no images from other websites) - a
<footer> - a
@media rule so it works on phones
<section class="cards">
<article class="card">
<span role="img" aria-label="Laddoo">🟠</span>
<h3>Motichoor laddoo</h3>
<p>₹480 per kg</p>
</article>
<!-- two more cards… -->
</section>
An emoji inside `<span role="img" aria-label="…">` gets a proper description, like alt text.
Console
Output from console.log appears here.
Lesson notes (text version)
1. Plan your page
Time to build a complete page by yourself! Choose one:
- A shop page — like "Meera’s Mithai Shop", a kirana store, a tailor or a tiffin service
- A portfolio — about you: your hobbies, projects and how to contact you
Plan on paper first: what goes in the header, which 3 links go in the nav, which 3 or more cards (products or projects) you will show.
Your page will be checked for:
- a
<header> with an <h1> - a
<nav> with at least 3 links - a section with 3 or more cards laid out with flex or grid
- a picture — emoji, inline SVG or an
<img> with alt (no images from other websites) - a
<footer> - a
@media rule so it works on phones
<section class="cards">
<article class="card">
<span role="img" aria-label="Laddoo">🟠</span>
<h3>Motichoor laddoo</h3>
<p>₹480 per kg</p>
</article>
<!-- two more cards… -->
</section>
2. Build and submit
Build your page in the editor. Use everything you have learnt: headings, links, lists, colours, the box model, flexbox or grid, and a media query.
Work in small steps and press Run often. When all the checks are green, you have finished the course project — well done! 🎉
Challenge: Your own shop or portfolio page
Build a complete page (shop or portfolio). It needs:
- a
<header> with an <h1> - a
<nav> with 3+ links - a container with 3+ cards using
display: flex or display: grid (not inside the header or nav) - at least one picture with a description: emoji in
<span role="img" aria-label="…">, an <svg aria-label="…">, or an <img alt="…"> with a data: source - a
<footer> with text - a
@media rule for phones