Learn HTML, CSS and JavaScript with code examples, an editor, quizzes and games.
Learn web development by changing code and seeing what it does. HTML Code Play combines HTML, CSS and JavaScript lessons with a mobile code editor, runnable examples, quizzes and coding games. Use it to study a concept, try it yourself and keep track of your learning on the same device.
READ, EDIT AND RUN
Explore the learning catalog, open a tutorial and read its explanation alongside a full code example. Send the example to the editor, run the original, then change a tag, style or expression and compare the output. This hands-on workflow connects the syntax you read with the page or behavior it creates.
The workspace supports HTML, CSS and JavaScript editing with syntax highlighting. Use undo and redo while experimenting, find text, jump to a line and adjust the editor font size. Start a new page or choose an available template when you want a starting point. Open HTML files, save your work, use Save As for another copy or share a code file through your device's sharing options.
GUIDED LEARNING AND PRACTICE
The catalog spans 11 web technology topics, from page structure and styling to scripting, vector graphics, responsive layouts and interactive examples. Search lessons by title or section to reach the material you need. Pin useful tutorials for focused review, add your own lesson notes and move between tutorials with Previous and Next controls.
Each tutorial brings together explanation, syntax and a working example. Follow up with a topic quiz or a practice challenge. Practice exercises ask you to complete missing code, with hints and answer feedback to help you inspect the detail you missed. Quiz results give you a way to check understanding before returning to the lesson.
SIX WAYS TO PRACTICE
Choose a coding game to work on a different skill:
- Code Builder: reorder blocks to rebuild working code.
- Output Detective: predict what a snippet produces.
- Bug Hunt: identify a faulty line.
- Fill the Gap: choose the missing code token.
- Match Lab: connect terms with their meanings.
- Rapid Fire: answer true-or-false questions against a timer.
Activity levels record results and unlock the next step. Replay available levels to improve your score, or use mixed practice playlists as they become available.
KEEP YOUR LEARNING ORGANIZED
The progress screen summarizes reviewed lessons, quizzes and practices by technology. Check your skill map and suggested next study plan, continue a lesson from Home and take a daily challenge. Streaks and challenge badges make your activity visible. Optional learning reminders require notification permission and can be switched off.
Your lesson progress, notes and game results are stored on the device. Learning screen controls include larger fonts, high contrast and reduced motion. Separate HTML, CSS and JavaScript assessments offer in-app achievement certificates; these are app learning records, not an accredited qualification.
Online community posts offer another source of code to explore when connected. Network-backed content and examples that load external resources need internet access; local progress storage does not provide cloud synchronization.
For beginners, students and learners revisiting front-end concepts, start with one example, make a small change and build understanding through practice.