HTML practice

Filter by difficulty, use hints, reveal solutions and save attempts locally.

1. Practice HTML Introduction by building one step of an accessible product checkout page and checking the result.

code-writing

beginnerHTML Introduction

1. Start from the HTML Introduction lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

2. Practice Document Structure by building one step of an accessible product checkout page and checking the result.

code-fix

beginnerDocument Structure

1. Start from the Document Structure lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

3. Practice Elements by building one step of an accessible product checkout page and checking the result.

output

beginnerElements

1. Start from the Elements lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

4. Practice Attributes by building one step of an accessible product checkout page and checking the result.

fill-blank

beginnerAttributes

1. Start from the Attributes lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

5. Practice Headings by building one step of an accessible product checkout page and checking the result.

true-false

beginnerHeadings

1. Start from the Headings lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

6. Practice Paragraphs by building one step of an accessible product checkout page and checking the result.

mini-project

beginnerParagraphs

1. Start from the Paragraphs lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

7. Practice Links by building one step of an accessible product checkout page and checking the result.

mcq

beginnerLinks

1. Start from the Links lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

8. Practice Images by building one step of an accessible product checkout page and checking the result.

code-writing

beginnerImages

1. Start from the Images lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

9. Practice Lists by building one step of an accessible product checkout page and checking the result.

code-fix

beginnerLists

1. Start from the Lists lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

10. Practice Tables by building one step of an accessible product checkout page and checking the result.

output

beginnerTables

1. Start from the Tables lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

11. Practice Forms by building one step of an accessible product checkout page and checking the result.

fill-blank

intermediateForms

1. Start from the Forms lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

12. Practice Input Types by building one step of an accessible product checkout page and checking the result.

true-false

intermediateInput Types

1. Start from the Input Types lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

13. Practice Semantic HTML by building one step of an accessible product checkout page and checking the result.

mini-project

intermediateSemantic HTML

1. Start from the Semantic HTML lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

14. Practice Audio and Video by building one step of an accessible product checkout page and checking the result.

mcq

intermediateAudio and Video

1. Start from the Audio and Video lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

15. Practice Iframe by building one step of an accessible product checkout page and checking the result.

code-writing

intermediateIframe

1. Start from the Iframe lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

16. Practice Meta Tags by building one step of an accessible product checkout page and checking the result.

code-fix

intermediateMeta Tags

1. Start from the Meta Tags lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

17. Practice HTML Entities by building one step of an accessible product checkout page and checking the result.

output

intermediateHTML Entities

1. Start from the HTML Entities lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

18. Practice SVG Basics by building one step of an accessible product checkout page and checking the result.

fill-blank

intermediateSVG Basics

1. Start from the SVG Basics lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

19. Practice Canvas Basics by building one step of an accessible product checkout page and checking the result.

true-false

intermediateCanvas Basics

1. Start from the Canvas Basics lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

20. Practice Accessibility by building one step of an accessible product checkout page and checking the result.

mini-project

intermediateAccessibility

1. Start from the Accessibility lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

21. Practice SEO-friendly HTML by building one step of an accessible product checkout page and checking the result.

mcq

advancedSEO-friendly HTML

1. Start from the SEO-friendly HTML lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

22. Practice Form Validation by building one step of an accessible product checkout page and checking the result.

code-writing

advancedForm Validation

1. Start from the Form Validation lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

23. Practice Structured Data Basics by building one step of an accessible product checkout page and checking the result.

code-fix

advancedStructured Data Basics

1. Start from the Structured Data Basics lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

24. Practice Performance-friendly HTML by building one step of an accessible product checkout page and checking the result.

output

advancedPerformance-friendly HTML

1. Start from the Performance-friendly HTML lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

25. Practice Best Practices by building one step of an accessible product checkout page and checking the result.

fill-blank

advancedBest Practices

1. Start from the Best Practices lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

26. Practice Portfolio Page Project by building one step of an accessible product checkout page and checking the result.

true-false

advancedPortfolio Page Project

1. Start from the Portfolio Page Project lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

27. Practice Blog Layout by building one step of an accessible product checkout page and checking the result.

mini-project

advancedBlog Layout

1. Start from the Blog Layout lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

28. Practice Resume Page by building one step of an accessible product checkout page and checking the result.

mcq

advancedResume Page

1. Start from the Resume Page lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

29. Practice Landing Page by building one step of an accessible product checkout page and checking the result.

code-writing

advancedLanding Page

1. Start from the Landing Page lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.

30. Practice HTML Review by building one step of an accessible product checkout page and checking the result.

code-fix

advancedHTML Review

1. Start from the HTML Review lesson example.

2. Use labels, fields and helper text instead of placeholder text.

3. Run the example and compare output before polishing.