Where to Go Next

You've built something real with HTML and CSS. So what now? Below are the resources I keep recommending to people who've just finished a workshop like this one. You don't need to bookmark all of them. Pick a couple and ignore the rest until you've actually used those.

Keep building things

The honest answer to "how do I get better?" is: keep making things. Finish small projects, and post them somewhere your future self can find them later.

  • Frontend Mentor — free design challenges. You're given a Figma file of the finished site and you have to build it in HTML and CSS. Closest thing to a real client brief without the client.
  • CodePen challenges — a weekly prompt on a theme. The Challenges page has its own submissions gallery worth scrolling through for inspiration.
  • 100 Days of CSS — a single tiny CSS puzzle every day. Good for animation reflexes.

Learn the fundamentals properly

A workshop only teaches you the shape of the thing. For everything underneath, you'll want a longer curriculum.

  • freeCodeCamp — free and runs in your browser. Their "Responsive Web Design" track is roughly 300 hours covering HTML and CSS from the ground up. The certification at the end is one of the few that hiring managers will actually recognize.
  • The Odin Project — also free, more opinionated than freeCodeCamp, and tougher. You finish it having built real projects instead of toy exercises. If you get stuck, their discussion forum is well moderated and questions there usually get a real answer.
  • Scrimba — interactive video tutorials where you can pause the instructor mid-sentence and edit the code right in the video. The free HTML/CSS track is probably the gentlest first step on this page.

References to bookmark forever

  • MDN Web Docs — the docs every working developer has open in another tab. Look up any HTML tag or CSS property here first.
  • CSS Tricks — practical articles on real problems. Their Complete Guide to Flexbox and Complete Guide to Grid are the two pages you'll keep returning to.
  • Can I Use — tells you which browsers support a given CSS feature. Worth checking before you ship anything fancy.

YouTube channels worth subscribing to

  • Kevin Powell — the CSS guy. Calm, clear, and his videos actually teach you something instead of performing for the algorithm. If you only subscribe to one channel, make it this one.
  • Web Dev Simplified — broader coverage. Good for the day you decide to add JavaScript.

When you outgrow CodePen

CodePen is great for sketches, but eventually you'll want to keep real files on your own computer.

  • VS Code — free, and what most developers use. Install the Live Server extension to get the same auto-refresh behaviour you've been using in CodePen.
  • Browser DevTools — right-click any page on the internet and click Inspect. You're already carrying around a free design tool that every site on the internet has to share with you. Spend an hour live-editing real websites in the Styles panel and you'll learn things no course teaches.