Front-end
Reference Search

HTML, CSS & the everyday web

Learn the front-end.
Make it click.

Small, working examples. Clear explanations. A reference you can keep coming back to, from your first HTML tag to your next CSS layout.

Start learning Find an answer

Keep a good reference handy.

Look it up. Try it out.
01 / Style & layout

CSS

Spacing, type, color, and everything that makes a page feel right.

184 property references
02 / Structure & meaning

HTML

The building blocks of the web, from a simple link to an accessible form.

109 element references

Learn by doing

Make a change.
See what happens.

A layout in three lines. Grid creates columns; gap gives them breathing room.

Choose Edit code and change 1fr 1fr to 2fr 1fr. Then update the result to make the first column wider.

Explore CSS Grid
Two columns with GridLink

HTML and CSS

HTML

<div class="tiles">
  <p>First column</p>
  <p>Second column</p>
</div>

CSS

/* Teaching code */
.tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Optional presentation */
.tiles > p {
  margin: 0;
  padding: 1rem;
  background: #f8d8c3;
  color: #20211e;
  border: 1px solid #20211e;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Build something useful.

All learning paths
01

A form everyone can use

Labels, inputs, and keyboard-friendly controls.

 02

A layout for every screen

Flexible grids, media queries, and responsive thinking.

 03

Text that feels good to read

Font stacks, line height, and a little breathing room.

A little more understanding.

All lessons
The fundamentals

Why does that CSS rule win?

Get comfortable with the cascade, specificity, and inheritance.

Read lesson Everyday decisions

Flexbox or Grid?

Choose the layout tool that fits what you’re building.

Read lesson

Ready for utility classes? Explore the Tailwind CSS lessons