HTML and CSS are the two languages every front-end developer starts with. HTML defines the structure of a page; CSS controls how it looks. You can build a working website with nothing but these two — no frameworks, no build tools, no JavaScript. That makes them the right place to start, and the right place to come back to when newer tools start feeling like overkill.
Here’s how I’d approach learning them today.
Start With HTML, Not CSS
Resist the urge to make things pretty before you understand structure. A page built on bad markup will fight you forever — broken layouts, accessibility problems, weird CSS specificity bugs. Spend a week writing plain, unstyled HTML before you touch a single style rule.
Focus on:
- Semantic tags:
<header>,<nav>,<main>,<article>,<section>,<footer>. Use them for what they mean, not how they look. - Headings in order. One
<h1>per page, then<h2>for sections,<h3>for subsections. Don’t skip levels to get a font size. - Links, images, forms. Get
alttext right from day one — it’s not optional.
Then Move to CSS
Once your markup is solid, CSS becomes much easier. Learn it in roughly this order:
- The box model. Content, padding, border, margin. If you don’t understand how these stack, every layout you write will surprise you.
- Selectors and specificity. Element, class, ID — and why you should mostly use classes. Specificity is the single most common source of “why isn’t my style applying” frustration.
- Flexbox. The default tool for one-dimensional layouts: navbars, button rows, centered content. Learn
justify-content,align-items, andgapfirst. - Grid. For two-dimensional layouts: page templates, card grids, dashboards. Don’t reach for Grid when Flexbox would do, and vice versa.
- Media queries and responsive design. Mobile-first. Start with the small screen and add complexity as the viewport grows.
Tools You Actually Need
VS Code. It’s the standard for a reason. Install the Live Server extension so your browser reloads on save.
Chrome or Firefox DevTools. Right-click anything on any website and choose Inspect. This is how you learn CSS faster than any tutorial — you see real code on real sites, edit it live, and watch what happens. I still use DevTools every single day, 20 years in.
Git. Not strictly required to learn HTML, but you’ll want it the moment you have a project worth keeping. Make a GitHub account and commit early.
Resources Worth Your Time
- MDN Web Docs (developer.mozilla.org) — the reference. When you want to know what a property actually does, this is the answer. Bookmark it.
- freeCodeCamp — the best free interactive curriculum. Their Responsive Web Design certification is a solid start-to-finish path.
- CSS-Tricks — practical articles and the Complete Guide to Flexbox and Grid. Two of the most useful pages on the internet for layout work.
- W3Schools — fine for a quick syntax check, but don’t treat it as a primary source. Cross-reference with MDN.
Practice on Something Real
Tutorials get you to about 30%. The other 70% comes from building. Suggestions, in order of difficulty:
- A personal portfolio page. One HTML file, one CSS file. Header, about section, project list, contact. You’ll touch every fundamental.
- Recreate a site you like. Pick something simple — a landing page, a blog homepage — and rebuild it from scratch without looking at the source. When you get stuck, then look.
- A multi-page landing site. Now you’re dealing with shared navigation, consistent styling across files, and the basics of information architecture.
The Honest Part
CSS will frustrate you. Layouts that look correct on your screen will break on someone else’s. A margin will collapse where you didn’t expect it. A flex item will refuse to shrink. This is normal, and it never fully goes away — you just get faster at diagnosing it.
The skill you’re actually building isn’t memorizing properties. It’s learning to open DevTools, read the computed styles, and figure out why the browser is doing what it’s doing. Get good at that and the rest follows.
