How to Choose an HTML/CSS Practice Site

Three axes for choosing

When picking a practice site, evaluate it on three axes: "① is it available in your language?", "② does it let you type code and see results immediately (interactive) vs just watch videos?", and "③ is the goal of each lesson clear?" For teens in particular, "interactive" sites that run in the browser and show results instantly as you type are especially effective.

The most important thing about a first resource is that it's not too hard. HTML/CSS is satisfying because you see visual changes immediately — but the fine-grained rules can be exhausting if you start with professional documentation. Look for a site where you can repeat the loop "type → see → adjust" many times before moving on.

6 recommended sites

Fig 1: Japanese + beginner-friendly = Progate and Dot Install. Free and serious? freeCodeCamp.

Recommended learning path by level

Complete beginner: Progate (Japanese, all basics) → Dot Install (applied patterns) → MDN (look things up as questions arise). These three cover everything you need to build a solid foundation.

Intermediate: freeCodeCamp's "Responsive Web Design" course is the standard. It's project-based — you build 5 sites — and your skills grow significantly. It's in English, but it has plenty of diagrams and sample code, and is manageable.

Reference use: MDN Web Docs (from Mozilla) is the most reliable reference. It covers every HTML element and CSS property according to spec — the dictionary that working engineers use every day.

If you're unsure which path to take, the rule is: finish one site completely before moving to the next. Switching back and forth means you keep repeating the beginner sections. After finishing one course, build a self-introduction page or club page from scratch — that's what locks the knowledge in.

What to look for when choosing

Fig 2: 8 criteria for choosing a learning site

Common pitfalls

3 things beginners often get stuck on

Becoming a "transcription machine" — copying code until it runs, then feeling satisfied without ever building anything independently.
Buying a paid course and stopping. Without the will to finish, ¥3,000 will disappear many times over.
Trusting old articles. HTML/CSS evolves constantly, and articles from 5 years ago often contain deprecated patterns.

How will this help you in the future?

Learning HTML/CSS is the entry point for web development — without it, frontend engineering doesn't start. On the flip side, someone who can "self-direct through a practice site" transfers that skill to any field: web, mobile, design, or AI. The experience of mastering a learning site is itself a transferable independence skill.

HTML/CSS also shows results quickly, which connects naturally to building a portfolio. Take the buttons, cards, headings, and spacing you learned on a practice site and move them into your own site. That's how coursework knowledge turns into your own work.

What you can do today

Get started in 3 steps

Complete Progate's "HTML/CSS Beginner" (free) all the way to the end (about 2–3 hours).
Then watch 3 lessons on Dot Install's "HTML/CSS with real examples" series.
Use what you've learned to build a self-introduction page from scratch on your own.

Summary

Choose HTML/CSS practice sites by three criteria: "in your language," "hands-on," and "free." The trio of Progate → Dot Install → MDN covers the fundamentals. The key is not to tour multiple sites — it's to finish one completely. Completing one site beats three in parallel, every time when it comes to actually building skill.

Check The axis for a practice site is?