HTML & CSS - lesson 8 | HackIndia Skills

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

Common mistake

Common last-minute mistake

Many builders submit a page that looks fine in a screenshot but fails when reviewed in code. A div used as a button, a missing label, or outline: none can cost trust.

If an element is clickable, ask: is this a real link or a real button? If it submits a form or opens an action, use button.

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.

Tip

Use AI carefully

You can ask an AI tool to review your repo before you submit. Paste your HTML and CSS, then ask it to find missing labels, non-semantic elements, weak focus states, and fixed-width layout issues.

Do not accept every rewrite. Check that it keeps native controls, keeps DOM order logical, and does not replace good HTML with extra divs.

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;
}