All the reading

HTML & CSS

8 lessons, about 37 minutes. The check's questions come from these.

Meaningful HTML and forms

1. Choose elements for meaning

5 min

Key point

One rule

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.

Meaning beats looks

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.

Your to-do

Choose the tag

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.

Use header for intro content such as a logo, title, or top actions.
Use nav for links that move around the site or page.
Use main for the unique content of the page. Use it once.
Use section for a themed part of the page with a useful heading.
Use article for content that can stand alone, like a project card or blog post.
Use aside for extra content, like notes, filters, or related links.

0 of 6 done

Example

Before and after

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>

6. Write accessible forms

4 min

Key point

One rule

Use real form elements first. A label, input, fieldset, legend, and button already carry meaning that browsers, keyboards, and assistive tech understand.

Labels are not placeholders

A placeholder disappears when someone starts typing. It is a hint, not a label. Your repo should show labels that stay visible, especially for forms like contact, registration, feedback, or payment interest.

Connect a label to one control with for and id. This also makes the label clickable, which helps on phone screens.

Example

Good form markup

This is enough for a clean project form. Notice the label connections, grouped radio buttons, and a real submit button.

<form class="contact-form" action="#" method="post">
  <div class="form-row">
    <label for="name">Full name</label>
    <input id="name" name="name" type="text" autocomplete="name" required>
  </div>

  <div class="form-row">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="email" required>
  </div>

  <fieldset>
    <legend>Project type</legend>

    <label>
      <input type="radio" name="projectType" value="web">
      Web app
    </label>

    <label>
      <input type="radio" name="projectType" value="mobile">
      Mobile app
    </label>
  </fieldset>

  <button type="submit">Send interest</button>
</form>

7. Keep CSS readable

4 min

Key point

One rule

Readable CSS is not about clever selectors. It is about predictable order.

Put broad styles first, components next, and small utilities last. When two rules conflict, you should know which one wins before opening DevTools.

Why CSS gets messy

A college project often starts with one page and one style.css. Then you add a navbar, cards, a form, a footer, and a last-minute sponsor section before submission.

Mess starts when every new fix becomes a stronger selector. You see .page .card form input.primary and stop knowing what is safe to change.

Example

Use layers

Cascade layers give your CSS named priority levels. A selector in a later layer can beat a more specific selector in an earlier layer.

Put the layer order at the top of your CSS so the file explains itself.

@layer reset, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }
}

@layer base {
  body {
    font-family: system-ui, sans-serif;
    line-height: 1.5;
    color: #172033;
    background: #f7f8fb;
  }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 3px solid #2457d6;
    outline-offset: 3px;
  }
}

@layer layout {
  .page {
    width: min(100% - 2rem, 960px);
    margin-inline: auto;
  }

  .card-grid {
    display: grid;
    gap: 1rem;
  }
}

@layer components {
  .project-card {
    padding: 1rem;
    border: 1px solid #d9deea;
    border-radius: 0.75rem;
    background: white;
  }
}

@layer utilities {
  .text-center {
    text-align: center;
  }
}

8. Ship your public repo

5 min

Key point

Proof beats screenshots

Your public repo is not only a folder of files. It is proof that you can make a page that still works when someone reads the code, resizes the screen, and uses the keyboard.

Ship the same things you learned in this track: meaningful HTML, layout CSS, readable styles, accessible forms, and visible focus states.

Your to-do

Final repo checklist

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.

Use semantic landmarks such as header, main, nav, section, article, aside, and footer where they match the content.
Keep real form elements: form, label, input, fieldset, and button before styling them.
Test the page at mobile, tablet, and laptop widths. Fix layout breaks with flexible CSS, not fixed pixel hacks.
Tab through the whole page. Every link, input, and button must show a clear focus state.
Open DevTools and inspect any spacing bug before guessing. Check margin, padding, border, and content size.

0 of 5 done

Box model and responsive sizing

2. Control the box model

4 min

Key point

One idea

Every element is a box. The box has content, padding, border, and margin.

Use box-sizing: border-box for predictable sizing. Then the width you set is the visible box width, not just the content width.

What width means

In the standard CSS box model, width and height apply only to the content area. Padding and border are added after that.

So a card with width: 300px, padding: 20px, and a 2px border becomes wider than 300px. This is a common reason pages overflow on phones.

Example

See the difference

These two cards both say width: 300px. Only the second one stays visually 300px wide because it uses border-box.

Flexbox and Grid layout

3. Lay out with Flexbox

5 min

Key point

One main idea

Flexbox lays out the direct children of a flex container along a main axis and a cross axis. Set display: flex on the parent, then control how its children share space.

Use it for one-dimensional layout: a row of nav links, buttons in a card, a profile header, or cards that wrap. Use Grid later when you need rows and columns together.

Axes matter

The main axis is the direction items flow. With flex-direction: row, the main axis runs left to right in English pages. With column, it runs top to bottom.

justify-content works on the main axis. align-items works on the cross axis. Do not memorise recipes. First ask: what is my main axis?

Example

Navbar example

10 questions, 7 to pass.

Common mistake

Wrong clickable tags

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>

Tip

Make controls readable

Form text should scale when a user changes text size. Use rem or em for font-size. Use unitless line-height so spacing follows the text size.

Use margin and padding to separate groups. A hostel complaint form, a UPI payment request form, and a college event signup all become easier when fields are clearly grouped.

input,
textarea,
select,
button {
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.form-row {
  display: grid;
  gap: 0.4rem;
  margin-block-end: 1rem;
}

fieldset {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid #c7c7c7;
}

Common mistake

Do not hide focus

Many old snippets use outline: none. Do not copy that unless you replace it with a visible focus style. Keyboard users need to see where they are.

Use :focus-visible for a clear focus ring when someone tabs through the form. Check it yourself with the Tab key.

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

button {
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: #111827;
  color: white;
  cursor: pointer;
}

Example

Before and after

This kind of selector is hard to reuse. It depends on too much page structure.

A class on the actual component is easier to read and move.

/* Hard to maintain */
main section div form input[type="email"] {
  padding: 12px;
}

/* Easier to maintain */
.form-field {
  padding: 0.75rem;
}

Example

README starter

Your README should help a reviewer understand your choices fast. Keep it short, but make it specific to your project.

Replace the sample text with your own page name and decisions.

# Campus Event Signup Page

## What I built
A responsive front-end page for students to view an event and submit a signup form.

## Layout choices
- Used header, main, section, and footer to describe the page structure.
- Used CSS Grid for the main page layout.
- Used Flexbox for card and form spacing.
- Used relative units so text and spacing scale better.

## Accessibility choices
- Every input has a visible label.
- Related form controls are grouped with fieldset.
- Buttons use the native button element.
- Keyboard focus is visible with :focus-visible.
- The DOM order matches the visual reading order.

## How to run
Open index.html in a browser.

Example

Final CSS check

Your CSS does not need to be long. It needs to be clear and safe to change.

A small focus rule is better than removing outlines completely.

html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

button,
input,
textarea,
select {
  font: inherit;
}

<article class="card content-box">
  <h2>Content box</h2>
  <p>Width grows after padding and border.</p>
</article>

<article class="card border-box">
  <h2>Border box</h2>
  <p>Width includes padding and border.</p>
</article>

<style>
  .card {
    width: 300px;
    padding: 20px;
    border: 2px solid #222;
    margin-bottom: 16px;
  }

  .content-box {
    box-sizing: content-box;
  }

  .border-box {
    box-sizing: border-box;
  }
</style>

Your to-do

Use it globally

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.

Add the global border-box pattern near the top of your CSS.
Let every element and pseudo-element inherit it.
Use max-width for containers that should shrink on smaller screens.
Use margin for space outside a box.
Use padding for space inside a box.

0 of 5 done

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px;
}

Example

Project card pattern

This is a simple card style you can reuse in your front-end project. It avoids fixed page width and keeps spacing clear.

<article class="project-card">
  <h2>Campus Canteen Queue Tracker</h2>
  <p>Shows estimated waiting time for each counter.</p>
  <a href="/demo.html">View demo</a>
</article>

<style>
  .project-card {
    box-sizing: border-box;
    max-width: 420px;
    padding: 1rem;
    border: 1px solid #d0d0d0;
    margin: 1rem 0;
    border-radius: 12px;
  }
</style>

5. Make layout responsive

5 min

Key point

One idea

Responsive layout is not a set of famous screen sizes. Start with flexible layout, readable spacing, and content that can wrap.

Use media queries when the design needs a real change, like moving from one column to two columns.

Think content first

Your HackIndia project may be opened on a hostel phone, a lab desktop, or a tablet. The same HTML should work in all places.

Do not create a separate mobile page. Keep one semantic page. Let CSS adapt the layout.

Your to-do

Build mobile first

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.

Write the base CSS for a narrow phone screen.
Use normal document flow before adding layout rules.
Use Grid or Flexbox so items can share space and wrap.
Add a media query when the content feels cramped or stretched.
Test at many widths, not only one phone and one laptop size.

0 of 5 done

Example

Responsive project grid

This pattern gives you one column on small screens. It becomes two columns when there is enough viewport width.

The card width is not fixed. The grid fills the available space.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.page {
  width: min(100% - 2rem, 1100px);
  margin-inline: auto;
}

.project-grid {
  display: grid;
  gap: 1rem;
}

.card {
  padding: 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 0.75rem;
}

@media (min-width: 700px) {
  .project-grid {
    grid-template-columns: 1fr 1fr;
  }
}

Common mistake

Avoid fixed pages

Beginners often set a wrapper to width: 1200px and then wonder why the page scrolls sideways on a phone.

Prefer max-width with a flexible width. Avoid fixed heights for cards unless you really need them. Let text grow, especially when users zoom or use larger font settings.

Tip

Use DevTools slowly

Open your page in the browser, then resize the viewport. Watch where the layout breaks. That width is a useful place for a media query.

Do not copy random breakpoints from a tutorial. Your content decides the breakpoint.

Example

Responsive nav

Flexbox is good when items sit in a row but should wrap on small screens.

This keeps links usable without hiding them behind a complex menu.

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.site-nav a {
  padding: 0.5rem 0.75rem;
}

Example

When the parent decides

A media query asks how wide the window is. Sometimes that is the wrong question: the same project card might sit in a wide main column on one page and a narrow sidebar on another, and the window is the same width in both.

A container query asks the parent instead. Mark the parent as a container, then lay the card out against the space it was given. Keep media queries for whole-page changes like the navigation.

/* The slot offers its width for children to ask about */
.card-slot {
  container-type: inline-size;
}

/* Stacked by default */
.card {
  display: grid;
  gap: 12px;
}

/* Side by side only when the SLOT is wide enough,
   whatever the window happens to be doing */
@container (min-width: 28rem) {
  .card {
    grid-template-columns: 120px 1fr;
  }
}

Your to-do

Do this now

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.

Open your project CSS file.
Find any fixed page widths like 1000px or 1200px.
Replace them with width: min(100% - 2rem, 1100px) or a similar flexible wrapper.
Resize your page from phone width to laptop width in the browser.
Add one media query only where the content actually needs a layout change.

0 of 5 done

<header class="site-header">
  <a class="brand" href="/">Campus Bazaar</a>

  <nav aria-label="Main navigation">
    <ul class="nav-list">
      <li><a href="#features">Features</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<style>
  .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
</style>

Example

Cards that wrap

Flex items can grow and shrink to use available space. This makes a simple card row adapt before you add media queries in a later lesson.

Here, each card tries to be around 16rem wide, can grow to fill space, and can shrink when needed.

<section class="card-row" aria-label="Project features">
  <article class="card">
    <h2>UPI payments</h2>
    <p>Record payment status for each order.</p>
  </article>
  <article class="card">
    <h2>Hostel delivery</h2>
    <p>Show pickup points inside campus.</p>
  </article>
  <article class="card">
    <h2>Seller dashboard</h2>
    <p>List items and track requests.</p>
  </article>
</section>

<style>
  .card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .card {
    flex: 1 1 16rem;
    padding: 1rem;
    border: 1px solid #d0d0d0;
    border-radius: 0.75rem;
  }
</style>

4. Build pages with Grid

5 min

Key point

Grid is for areas

Use Grid when the page needs rows and columns at the same time. A dashboard, portfolio home page, event page, or project landing page usually fits this.

Keep HTML semantic first. Your header, main, aside, section, and footer should mean something before CSS places them.

Grid versus Flexbox

Flexbox is best for one direction at a time. A navbar, button row, or card actions row is usually Flexbox.

Grid is best for the page skeleton. It lets you define columns, rows, gaps, and named areas, then place direct children into them.

Common mistake

Only direct children

Only direct children of a display: grid container become grid items. If you set .page to grid, then .page > header, main, aside, and footer are grid items.

A card inside main does not join the page grid automatically. Use another grid inside main if that card list needs columns.

Example

Page shell

This is a clean starter layout for a HackIndia project page. It uses semantic HTML and named grid areas, so the CSS is easy to read.

Do not use tables, floats, or absolute positioning for normal page layout. Older tutorials may show that, but Grid and Flexbox are the current everyday tools.

<body>
  <div class="page">
    <header class="site-header">
      <h1>Campus Budget Splitter</h1>
      <nav aria-label="Main navigation">
        <a href="#features">Features</a>
        <a href="#demo">Demo</a>
      </nav>
    </header>

    <main class="content" id="main">
      <section id="features">
        <h2>Split hostel and trip expenses</h2>
        <p>Track shared costs and settle using UPI.</p>
      </section>
    </main>

    <aside class="sidebar">
      <h2>Project details</h2>
      <p>Built for a college hackathon.</p>
    </aside>

    <footer class="site-footer">
      <p>Public repo linked in the README.</p>
    </footer>
  </div>
</body>

<style>
  .page {
    /* dvh, not vh: on a phone the browser bar makes 100vh taller than
       the screen, so the page scrolls when it should not */
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header header"
      "content sidebar"
      "footer footer";
    gap: 1rem;
    padding: 1rem;
  }

  .site-header { grid-area: header; }
  .content { grid-area: content; }
  .sidebar { grid-area: sidebar; }
  .site-footer { grid-area: footer; }

  .site-header,
  .content,
  .sidebar,
  .site-footer {
    padding: 1rem;
    border: 1px solid #d0d7de;
    border-radius: 0.75rem;
  }
</style>

Your to-do

Build the grid

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.

Choose the parent that owns the layout, such as .page or .dashboard.
Set display: grid on that parent.
Define columns with grid-template-columns.
Name the page zones with grid-template-areas.
Assign each direct child to an area with grid-area.
Use gap for spacing between grid items instead of margins everywhere.

0 of 6 done

Tip

Keep order logical

Grid can move things visually, but your HTML order still matters. Keyboard and screen reader users follow the document order, not your design screenshot.

Write the HTML in a sensible reading order first: header, main content, supporting aside, footer. Then use Grid to place it.

Example

Nested card grid

If your main section contains cards, make main or a card wrapper its own grid. This is separate from the page grid.

This works well for project features, team members, pricing cards, or event sessions.

.feature-list {
  display: grid;
  /* As many columns as fit, each at least 16rem wide: three on a
     laptop, one on a phone, and no media query needed */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 0.75rem;
}

Your to-do

Do this now

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.

Open your current front-end project or create a simple page shell.
Add semantic direct children: header, main, aside, and footer.
Turn their parent into a grid with named areas.
Add a nested grid for a list of three cards inside main.
Write one README note explaining why you used Grid for the page layout.

0 of 5 done

HTML & CSS

1. Choose elements for meaning

One rule

Meaning beats looks

Choose the tag

Before and after

6. Write accessible forms

One rule

Labels are not placeholders

Good form markup

7. Keep CSS readable

One rule

Why CSS gets messy

Use layers

8. Ship your public repo

Proof beats screenshots

Final repo checklist

2. Control the box model

One idea

What width means

See the difference

3. Lay out with Flexbox

One main idea

Axes matter

Navbar example

Headings create map

Wrong clickable tags

Forms need real controls

Do this now

Build the form

Make controls readable

Do not hide focus

Avoid visual reordering

Do this now

Structure your file

Name by job

Avoid selector wars

Before and after

Do this now

Common last-minute mistake

README starter

Use AI carefully

Final CSS check

Do this now

Use it globally

Margin is not width

Inspect before changing

Project card pattern

Do this now

5. Make layout responsive

One idea

Think content first

Build mobile first

Responsive project grid

Avoid fixed pages

Use DevTools slowly

Responsive nav

When the parent decides

Do this now

Build a flex row

Use gap first

Do not reorder content

Cards that wrap

Do this now

4. Build pages with Grid

Grid is for areas

Grid versus Flexbox

Only direct children

Page shell

Build the grid

Keep order logical

Nested card grid

Do this now