Day 12 — Build a real page, and interview questions
One page that uses everything - structure, forms, layout, responsiveness and accessibility.
The brief
A landing page for a course. It needs a header with navigation, a hero, a card row of topics, a table of batches, an enquiry form and a footer. It has to work on a phone, and it has to pass the Check tab clean.
Try it yourself before you scroll. Then compare.
The finished page
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Advanced Excel Course in Noida - DAI ACADEMY</title>
<meta name="description" content="Six-week Advanced Excel training in Noida. Formulas, pivot tables and dashboards on real reports. Weekday and weekend batches.">
<style>
*, *::before, *::after { box-sizing: border-box; }
body {
margin:0; font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
line-height:1.6; color:#2B3A55; background:#fff;
}
.wrap { max-width:960px; margin:0 auto; padding:0 16px; }
a:focus-visible, button:focus-visible, input:focus-visible {
outline:3px solid #F0B429; outline-offset:2px;
}
.top {
display:flex; align-items:center; justify-content:space-between;
gap:16px; flex-wrap:wrap; background:#0A1A3D; color:#fff; padding:14px 0;
}
.top .wrap { display:flex; align-items:center;
justify-content:space-between; gap:16px; flex-wrap:wrap; width:100%; }
.top strong { letter-spacing:.5px; }
.top ul { display:flex; gap:16px; list-style:none; margin:0; padding:0; }
.top a { color:#E8EEF8; text-decoration:none; }
.top a:hover { color:#F0B429; }
.hero { background:#F6F8FC; padding:40px 0; }
.hero h1 { margin:0 0 8px; font-size:clamp(26px,5vw,40px);
line-height:1.15; color:#0A1A3D; }
.hero p { margin:0 0 18px; max-width:52ch; }
.btn {
display:inline-block; background:#F0B429; color:#0A1A3D;
padding:13px 22px; border-radius:9px; font-weight:700;
text-decoration:none; min-height:44px;
}
section { padding:34px 0; }
h2 { color:#0A1A3D; margin:0 0 16px; }
.cards { display:flex; flex-wrap:wrap; gap:14px; list-style:none;
margin:0; padding:0; }
.cards li {
flex:1 1 200px; border:1px solid #D3DDEC; border-radius:11px;
padding:16px; background:#fff;
}
.cards h3 { margin:0 0 6px; font-size:16px; color:#0A1A3D; }
.cards p { margin:0; font-size:14px; }
.scroller { overflow-x:auto; }
table { border-collapse:collapse; min-width:460px; width:100%; }
caption { text-align:left; font-weight:700; padding-bottom:8px; color:#0A1A3D; }
th, td { border:1px solid #D3DDEC; padding:9px 12px; text-align:left; }
thead th { background:#E8EEF8; }
form p { margin:0 0 14px; }
label { display:block; font-weight:600; margin-bottom:4px; font-size:14px; }
input, select {
width:100%; max-width:340px; padding:10px 12px;
border:1px solid #C7D3E6; border-radius:8px; font:inherit;
}
button {
background:#0A1A3D; color:#fff; border:0; padding:13px 24px;
border-radius:9px; font:inherit; font-weight:700; cursor:pointer;
min-height:44px;
}
footer { background:#0A1A3D; color:#C7D3E6; padding:22px 0; font-size:14px; }
@media (min-width:700px) {
.hero { padding:60px 0; }
}
</style>
</head>
<body>
<header class="top">
<div class="wrap">
<strong>DAI ACADEMY</strong>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/courses.html">Courses</a></li>
<li><a href="#enquire">Enquire</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="hero">
<div class="wrap">
<h1>Advanced Excel Course in Noida</h1>
<p>Six weeks of formulas, pivot tables and dashboards, taught on
the kind of reports you actually get handed at work.</p>
<a class="btn" href="#enquire">Book a free demo</a>
</div>
</div>
<section>
<div class="wrap">
<h2>What you will learn</h2>
<ul class="cards">
<li><h3>Formulas</h3><p>Lookups, logic and text functions.</p></li>
<li><h3>Pivot tables</h3><p>Summarise thousands of rows in seconds.</p></li>
<li><h3>Dashboards</h3><p>Charts and slicers that update themselves.</p></li>
<li><h3>Automation</h3><p>Where VBA saves you an afternoon a week.</p></li>
</ul>
</div>
</section>
<section>
<div class="wrap">
<h2>Upcoming batches</h2>
<div class="scroller">
<table>
<caption>Batches starting this quarter</caption>
<thead>
<tr>
<th scope="col">Starts</th>
<th scope="col">Days</th>
<th scope="col">Time</th>
<th scope="col">Mode</th>
</tr>
</thead>
<tbody>
<tr><th scope="row">4 April</th><td>Mon-Fri</td><td>7:00am</td><td>Classroom</td></tr>
<tr><th scope="row">9 April</th><td>Sat-Sun</td><td>10:00am</td><td>Classroom</td></tr>
<tr><th scope="row">18 April</th><td>Mon-Fri</td><td>8:00pm</td><td>Online</td></tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="enquire">
<div class="wrap">
<h2>Book a free demo</h2>
<form action="/api/enquiry" method="post">
<p>
<label for="name">Your name</label>
<input type="text" id="name" name="name" required minlength="2">
</p>
<p>
<label for="phone">Mobile</label>
<input type="tel" id="phone" name="phone" required pattern="[0-9]{10}">
</p>
<p>
<label for="batch">Preferred batch</label>
<select id="batch" name="batch">
<option value="weekday">Weekday</option>
<option value="weekend">Weekend</option>
<option value="online">Online</option>
</select>
</p>
<p><button type="submit">Request a call back</button></p>
</form>
</div>
</section>
</main>
<footer>
<div class="wrap">
<p>© 2026 DAI ACADEMY, Noida. Learn. Grow. Succeed.</p>
</div>
</footer>
</body>
</html>
Check the tabs. The Outline shows a proper document structure with header, main, sections and footer. The Check tab should be clean. Drag your browser narrower and the cards restack, the nav wraps and the table scrolls on its own.
The questions interviewers ask
What does semantic HTML mean and why does it matter?
Using elements for what they mean rather than how they look - <nav> instead of <div class="nav">. It matters because screen readers can navigate by landmark, search engines understand the structure, and the next developer can read it.
Difference between id and class?
An id is unique on the page and used for anchors and label-for. A class can repeat and is what you style with. Ids also beat classes in CSS specificity, which makes them awkward to override.
Explain the box model.
Content, then padding, then border, then margin. By default width sets the content only, so padding and border make the box bigger than the number you wrote. box-sizing: border-box makes width mean the visible width, which is why nearly every site sets it globally.
block vs inline vs inline-block?
Block takes its own line and accepts width and height. Inline flows in the text and ignores both. Inline-block flows in the text but accepts them.
How does CSS decide which rule wins?
Specificity first - inline beats id, id beats class, class beats element. Ties go to whichever is written later. !important overrides the lot and should be avoided.
What makes a site responsive?
The viewport meta tag, fluid widths with percentages or max-width instead of fixed pixels, max-width: 100% on images, and media queries written mobile-first.
Flexbox or Grid?
Flexbox for one dimension - a row of cards, a nav bar, a sidebar. Grid for two at once, when rows and columns both need to line up.
Name three things that make a page accessible.
Alt text on every image, a label for every form field, and a visible keyboard focus indicator. Add correct heading order and 4.5:1 contrast and you have covered most real-world failures.
What is the difference between <strong> and <b>?
They render the same. <strong> carries meaning - importance - and a screen reader can convey it. <b> is only a visual instruction. Same for <em> against <i>.
Why does the viewport meta tag matter?
Without it a mobile browser renders at about 980px wide and scales the result down, so everything is tiny and your media queries never fire.
Carry on with the free Python tutorial or the free SQL tutorial.
Try these yourself
- Build the landing page yourself from the brief before comparing with the solution.
- Add a fifth topic card and check it wraps correctly at narrow widths.
- Add a second table column and confirm the page still does not scroll sideways.
- Run the whole page through the Check tab and fix everything it reports.
- Answer all ten interview questions out loud, without looking.