One project, everything you learned
You've learned HTML and CSS separately. In this combined project you build one complete, real website for the café — structure first, then a design system, layout, responsiveness and polish — using everything from both courses in one place.
- Day 1: semantic structure
- Day 2: forms and accessibility
- Day 3: a small design system with CSS variables
- Day 4: Flexbox and Grid layout, responsive
- Day 5: the finished single-file site
From brief to outline
The brief: *a header with the café name and navigation, a welcome section with a call to action, a menu of dishes, opening hours with the address, a booking form, and a footer.* Each part maps to a landmark element, so screen readers and search engines understand the page.
<header>…logo + <nav>…</nav></header>
<main>
<section class="hero">…<h1>…</h1></section>
<section id="menu" aria-labelledby="menu-title">
<h2 id="menu-title">Menu</h2>
</section>
…
</main>
<footer>…</footer>