How to Learn HTML & CSS for Free in 2026 (A Simple 30-Day Roadmap)

Every few weeks someone asks me the same question: *'I want to learn web development — should I buy a course?'* My answer is always the same. For HTML and CSS specifically? No. The free resources in 2026 are outstanding, and the only real failure mode isn't bad material — it's quitting in week two because the plan was vague. So here's a concrete 30-day roadmap. It assumes one thing only: about 45 minutes a day, every day, in a free online code editor where you can practice as you read.

Week 1 — HTML: the skeleton of every page

Your only goal this week is comfort with the tags that appear on literally every page: headings (`h1`–`h6`), paragraphs, lists, links and images. That's five things. Learn one per day with a search plus one tutorial (MDN or freeCodeCamp are enough), then *type it yourself* — don't copy-paste, typing is where the learning sticks.

• Day 1–2: Headings, paragraphs and why one `h1` per page matters.
• Day 3: Links — internal, external, and opening in a new tab.
• Day 4: Images, alt text, and why alt text matters more than beginners think.
• Day 5: Ordered and unordered lists.
• Day 6: Containers — `div` and `section`, and the idea that you can group things.
• Day 7: Build the personal intro page project from our beginner projects list with no help.

Week 2 — CSS: making it not look like 1996

This is the week most people quit, because CSS feels chaotic at first. The trick is to limit yourself to the fundamentals that do 90% of the work: the box model, colors, fonts, and the cascade. Spend the week in a live CSS editor where changing a value visibly changes the page within a second — reading about CSS without instant feedback is like learning to cook from a phone call.

• Day 8: Selectors — element, class and id, and when to use each.
• Day 9: Colors and backgrounds (hex codes, `rgb`, gradients).
• Day 10: Fonts — `font-family`, sizes, weights, line height.
• Day 11–12: The box model — padding, border, margin. Draw it on paper once; it will save you months.
• Day 13: Flexbox basics — `display: flex`, `gap`, centering things.
• Day 14: Restyle your Week 1 intro page until it looks genuinely good.

Week 3 — Layout: the skill that separates beginners

Layout is where HTML and CSS stop being two subjects and become one skill. Your mission: build a page that looks intentional on a wide screen *and* on a phone. Flexbox handles rows; CSS Grid handles the bigger picture. Learn `repeat(auto-fit, minmax(...))` and enjoy the magic of responsive design without a single media query.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}

Also meet DevTools this week: right-click any website → *Inspect*. Looking at how real sites are built (including their mistakes) is a free masterclass that never runs out of material.

Week 4 — JavaScript: a first taste, then your portfolio

You're not becoming a JavaScript developer this week — you're learning enough to make pages *react*. Variables, `document.querySelector`, click events, and changing text. A JavaScript playground is ideal here because you can test snippets in isolation without breaking a page you're proud of. Then spend the final days building the pricing card and digital clock projects, and put both — plus your intro page — on one 'my work' page. That page is your first portfolio.

The rules that make this work

1. Type everything yourself. Copy-paste teaches your clipboard, not you.
2. Break things on purpose. Delete a closing tag, set padding to 100px, see what happens. Confusion you've resolved yourself is permanent knowledge.
3. Never study more than 20 minutes without typing. Watching tutorials feels productive; typing is what's productive.
4. Ship ugly. A finished mediocre page beats five abandoned beautiful ones.
5. Miss a day? Skip it and continue. The plan survives a missed day; it doesn't survive a guilt spiral.

After 30 days you won't be a professional — but you'll be past the hardest part: the beginning. Everything after this is just building more things.

When the month is over, keep the momentum with the ten builds in our beginner projects article, and bookmark the playground as your default place to test any idea that pops into your head — no setup, no cost, no excuses.