HTML & CSS
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.
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 5 done
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.
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.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.
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;
}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.