HTML & CSS
Choose the element that describes the job of the content. Style it later with CSS.
A page made only from div tags can look fine, but it gives browsers, search engines, and assistive tech less meaning.
HTML is the structure of your project. CSS is the look. Keep those jobs separate.
If something is the main content, use main. If it is site navigation, use nav. If it is a page footer, use footer. Do not pick tags because they are block or inline.
0 of 8 lessons done · proved by a submitted project with a public repository
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 6 done
Here is a common hackathon landing page pattern. The first version works visually, but the HTML says almost nothing.
The second version gives the same page a clear structure before any CSS is added.
<!-- Weak: everything is a div -->
<div class="top">
<div class="logo">Campus Events</div>
<div class="links">
<a href="#events">Events</a>
<a href="#submit">Submit</a>
</div>
</div>
<div class="content">
<div class="hero">Find tech events near your college</div>
<div class="card">Hackathon at Pune</div>
</div>
<div class="bottom">Made by Team Byte</div>
<!-- Better: elements describe meaning -->
<header>
<p>Campus Events</p>
<nav aria-label="Main navigation">
<a href="#events">Events</a>
<a href="#submit">Submit</a>
</nav>
</header>
<main>
<section aria-labelledby="hero-title">
<h1 id="hero-title">Find tech events near your college</h1>
<p>Track hackathons, meetups, and workshops in one place.</p>
</section>
<section id="events" aria-labelledby="events-title">
<h2 id="events-title">Upcoming events</h2>
<article>
<h3>Hackathon at Pune</h3>
<p>Open to student teams. Registration closes Friday.</p>
</article>
</section>
</main>
<footer>
<p>Made by Team Byte</p>
</footer>Use headings in order. Start with one h1 for the page topic, then h2 for major sections, then h3 inside those sections.
Do not choose h4 because it looks smaller. Use CSS for size. Use headings for the page outline.
If the user performs an action, use button. If the user goes to another URL or page section, use a link.
Do not make a div clickable when a button fits. A real button can be activated by mouse, keyboard, touch, voice command, and assistive technology.
<!-- Avoid -->
<div class="save" onclick="saveProject()">Save project</div>
<!-- Use -->
<button type="button">Save project</button>
<!-- Link is right when it navigates -->
<a href="/projects">View projects</a>You will build accessible forms later in this track. Start the habit now: use form, label, input, fieldset, and button before custom div-based controls.
A label is the caption for a control. A fieldset groups related controls, such as year of study or project category.
Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.
0 of 5 done
Answer the quick check to finish this lesson.