HTML & CSS: The Fundamentals

HTML says what things are (a heading, a paragraph, a list, a button). CSS says what they look like (colors, spacing, layout). Confusing the two is the source of most beginner struggles.

It's the foundation for JavaScript and all of front-end development.

01 — Two distinct roles

Structure, then presentation

You write clean, readable HTML without any style first, then dress it up with CSS. Well-structured HTML is easier to style, easier to make accessible, and easier to index for search.

02 — Semantics

Choosing the right tag

• Headers, navigation, main content and footer identified by dedicated tags.
• Hierarchical headings (a single H1, then H2, H3…).
• Lists for lists, buttons for actions, links for navigation.
• Alt attribute on meaningful images.

03 — The box model

Understanding spacing

Every element is a box: content, inner spacing (padding), border, outer spacing (margin). Most layout "bugs" come from misunderstanding this model.

04 — Modern layout

Flexbox and Grid

Flexbox aligns elements along a single row or column; Grid handles two-dimensional layouts. Together, they replace the old hacks (floats, absolute positioning everywhere).

05 — Responsive design and accessibility

For every screen, for everyone

• Relative units, fluid images, breakpoints (media queries) driven by the content.
• Sufficient contrast, readable text size.
• Keyboard navigation possible, visible focus states.

06 — Frequently asked questions

Frequently Asked Questions

Should I learn a preprocessor (Sass)?

Not at first. Modern CSS (variables, nesting) covers a lot of ground. Sass becomes worth adding once stylesheets grow large.

Bootstrap or plain CSS?

Learn CSS first. A framework saves time later, but without the fundamentals you won't know how to troubleshoot it.

How long until I feel comfortable?

A few weeks to recreate simple mockups, a few months for complex, accessible layouts.

07 — Resources & links

Where to go, concretely