Web HTML Course

HTML Course Overview

Table of Contents

• Content
• Standards
• Aspects
  • 👶 Introduction
  • 💪 Workout
  • 🦑 Deep
  • ✨ New
  • 🔮 Obscura

Content

Below you can find the ordered content of the topic, in a linear progression

The linear progression of content aims to cover all content, course by course, workout by workout as follows:

• first course is the only core one, denoted by its manifest
• the next course is denoted by the first item of the next array in each course manifest
• each course has its order of workouts designated by the sections field in the same aforementioned manifest

1. web-introduction

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	html-css-intro	✅	👶 introduction	❌	✅	✅	✅	❌
2	html-defined	✅	👶 introduction	❌	✅	✅	✅	❌
3	css-defined	✅	👶 introduction	❌	✅	✅	✅	❌
4	html-css-code	✅	👶 introduction	❌	✅	✅	✅	❌
5	html-css-browser	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

2. html-basics

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	hypertext-markup-language	✅	👶 introduction	❌	✅	✅	❌	❌
2	headings-and-paragraphs	✅	👶 introduction	❌	✅	✅	❌	❌
3	hyperlinks	✅	👶 introduction	❌	✅	✅	❌	❌
4	images	✅	👶 introduction	❌	❌	✅	❌	❌
5	divisions-and-spans	✅	👶 introduction	❌	❌	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

3. html-structure

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	html-structure-define	✅	👶 introduction	❌	✅	✅	✅	❌
2	elements	✅	👶 introduction	❌	✅	✅	✅	❌
3	html-tags	✅	👶 introduction	❌	✅	✅	✅	❌
4	attributes	✅	👶 introduction	❌	✅	✅	✅	❌
5	comments	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-comment-codepen-exercise	codepen	👶 introduction	syntax-html.0: 10	✅
2	html-element-attribute-codepen-exercise	codepen	👶 introduction	syntax-html.0: 10 syntax-html.1: 10 syntax-html.2: 10	✅

Game:

⚠️ There is no game in this workout.

4. core-html-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	paragraphs	✅	👶 introduction	❌	✅	✅	✅	❌
2	headings-h1-h6	✅	👶 introduction	❌	✅	✅	✅	❌
3	update-images	✅	👶 introduction	❌	✅	✅	✅	❌
4	update-hyperlinks	✅	👶 introduction	❌	✅	✅	✅	❌
5	style-element	✅	👶 introduction	❌	✅	✅	❌	❌

Exercises:

no	name	type	aspects	standards	done
1	html-headings-and-paragraphs-codepen-exercise	codepen	👶 introduction	syntax-html.0: 10 markup-text.0: 10 markup-text.2: 10	✅
2	html-create-link-codepen-exercise	codepen	👶 introduction	syntax-html.0: 10 markup-text.0: 10 markup-text.2: 10	✅
3	html-add-image-codepen-exercise	codepen	👶 introduction	syntax-html.0: 10 syntax-html.1: 10 embed-media.0: 10	✅

Game:

⚠️ There is no game in this workout.

5. web-page-structure

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	doctype	✅	👶 introduction	❌	✅	✅	✅	❌
2	html-element	✅	👶 introduction	❌	✅	✅	✅	❌
3	head-element	✅	👶 introduction	❌	✅	✅	✅	❌
4	optional-elements	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

6. images

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	image-types	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	image-alt	✅	👶 introduction 💪 workout 🔮 obscura	❌	✅	✅	✅	❌
3	image-title	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
4	image-height-width	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
5	image-map	✅	👶 introduction 💪 workout 🔮 obscura	❌	✅	✅	✅	❌
6	image-base	✅	👶 introduction 💪 workout 🔮 obscura	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-image-1-codepen-exercise	codepen	👶 introduction	embed-media.0: 10	✅
2	html-image-2-codepen-exercise	codepen	👶 introduction	embed-media.0: 10	✅
3	html-image-3-codepen-exercise	codepen	👶 introduction	embed-media.0: 10	✅
4	html-image-map-codepen-exercise	codepen	👶 introduction	embed-media.0: 10	✅

Game:

⚠️ There is no game in this workout.

7. links

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	anchor-links	✅	👶 introduction	❌	✅	✅	❌	❌
2	link-relative-paths	✅	👶 introduction	❌	✅	✅	✅	❌
3	link-absolute-paths	✅	👶 introduction	❌	✅	✅	✅	❌
4	link-target	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

8. links-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	image-link	✅	👶 introduction	❌	✅	✅	✅	❌
2	image-mailto	✅	👶 introduction	❌	✅	✅	✅	❌
3	link-download	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

9. lists

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	ordered-lists	✅	👶 introduction	❌	✅	✅	✅	❌
2	unordered-lists	✅	👶 introduction	❌	✅	✅	✅	❌
3	nested-lists	✅	👶 introduction	❌	✅	✅	✅	❌
4	list-orders	✅	👶 introduction	❌	✅	✅	✅	❌
5	description-lists	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-list-order-codepen-exercise	codepen	👶 introduction	markup-text.0: 1000 markup-text.1: 1000 markup-text.2: 1000	✅
2	html-nested-list-codepen-exercise	codepen	👶 introduction	markup-text.0: 1000 markup-text.1: 1000 markup-text.2: 1000	✅
3	html-unordered-list-codepen-exercise	codepen	👶 introduction	markup-text.0: 1000 markup-text.1: 1000 markup-text.2: 1000	✅
4	html-description-list-codepen-exercise	codepen	👶 introduction	markup-text.0: 1000 markup-text.1: 1000 markup-text.2: 1000	✅

Game:

⚠️ There is no game in this workout.

10. media

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	audio	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
2	audio-files	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	video	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	video-formats	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	❌	✅	❌
5	video-subtitles	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
6	embed	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-audio-codepen-exercise	codepen	👶 introduction	embed-media.2: 10	✅
2	html-video-codepen-exercise	codepen	👶 introduction	embed-media.1: 10	✅

Game:

⚠️ There is no game in this workout.

11. forms

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	intro-form	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	input-element	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
3	text-field	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
4	text-area	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
5	submit-and-reset	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-input-types-codepen-exercise	codepen	👶 introduction	html-forms.0: 10	✅
2	html-buttons-text-area-codepen-exercise	codepen	👶 introduction	html-forms.0: 10 html-forms.1: 10 html-forms.2: 10 layout-html.2: 10	✅

Game:

⚠️ There is no game in this workout.

12. forms-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	check-boxes	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌
2	checkbox-groups	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
3	radio-buttons	✅	👶 introduction 💪 workout	❌	✅	❌	❌	❌
4	radio-buttons-ii	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
5	radio-buttons-iii	✅	👶 introduction 💪 workout	❌	✅	❌	❌	❌
6	html-select	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
7	dropdown-list	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-codepen-checkbox-exercise	codepen	👶 introduction	html-forms.4: 10	✅
2	html-codepen-radio-exercise	codepen	👶 introduction	html-forms.5: 10	✅
3	html-dropdown-list-codepen-exercise	codepen	👶 introduction	html-forms.6: 10	✅

Game:

⚠️ There is no game in this workout.

13. tables

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	table-tr-and-td	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	intro-th	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	caption	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	colgroup-and-col	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
5	thead-tbody-and-tfoot	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-table-1-codepen-exercise	codepen	👶 introduction	layout-html.1: 1000	✅
2	html-table-2-codepen-exercise	codepen	👶 introduction	layout-html.1: 1000	✅
3	html-table-3-codepen-exercise	codepen	👶 introduction	layout-html.1: 1000	✅
4	html-table-4-codepen-exercise	codepen	👶 introduction	layout-html.1: 1000	✅

Game:

name	type	aspects	standards	done
table-it	tetris	💪 workout 🦑 deep	❌	❌

14. meta-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	meta-intro	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	charset	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
3	description	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
4	keywords	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

15. meta-elements-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	author	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	http-equiv	✅	🔮 obscura 🦑 deep	❌	✅	✅	✅	❌
3	robots	✅	💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

16. sectioning-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	div	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	header	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
3	main	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	nav	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
5	footer	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-sectioning-elements-1-codepen-exercise	codepen	👶 introduction	layout-html.0: 10 semantic-html.0: 10 semantic-html.1: 10	✅
2	html-sectioning-elements-2-codepen-exercise	codepen	👶 introduction	layout-html.0: 10	✅
3	html-sectioning-elements-3-codepen-exercise	codepen	👶 introduction	layout-html.0: 10 semantic-html.0: 10 semantic-html.1: 10 semantic-html.3: 10	✅
4	html-sectioning-elements-4-codepen-exercise	codepen	👶 introduction	layout-html.0: 10 semantic-html.0: 10 semantic-html.1: 10 semantic-html.3: 10	✅

Game:

⚠️ There is no game in this workout.

17. formatting-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	intro-span	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
2	intro-hr	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
3	button	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
4	button-attributes	✅	👶 introduction 💪 workout	❌	✅	✅	❌	❌

Exercises:

no	name	type	aspects	standards	done
1	formatting-elements-codepen-exercise	codepen	👶 introduction 💪 workout	layout-html.3: 1000	✅
2	html-create-buttons-codepen-exercise	codepen	👶 introduction 💪 workout	layout-html.0: 1000 html-forms.2: 1000	✅

Game:

⚠️ There is no game in this workout.

18. meter-and-progress

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	meter	✅	🦑 deep 💪 workout	❌	✅	✅	✅	❌
2	meter-attributes	✅	🦑 deep 💪 workout	❌	✅	❌	✅	❌
3	meter-attributes-ii	✅	🦑 deep 💪 workout	❌	✅	✅	✅	❌
4	progress	✅	🦑 deep 💪 workout	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-create-meter-codepen-exercise	codepen	👶 introduction 💪 workout	layout-html.3: 1000	✅
2	html-create-progress-bar-codepen-exercise	codepen	👶 introduction 💪 workout	layout-html.3: 1000	✅

Game:

⚠️ There is no game in this workout.

19. formatting-text-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	intro-br	✅	👶 introduction	❌	✅	✅	✅	❌
2	emphasis-i-and-em	✅	👶 introduction	❌	✅	✅	✅	❌
3	important-b-and-strong	✅	👶 introduction	❌	✅	✅	❌	❌
4	sub-and-superscript-sub-and-sup	✅	👶 introduction	❌	✅	✅	✅	❌
5	editing-s-del-ins	✅	👶 introduction	❌	✅	✅	✅	❌
6	editing-u-mark	✅	👶 introduction	❌	✅	✅	❌	❌

Exercises:

no	name	type	aspects	standards	done
1	html-s-del-ins-codepen-exercise	codepen	👶 introduction	❌	❌
2	html-b-strong-codepen-exercise	codepen	👶 introduction	markup-text.0: 10	✅
3	html-multi-element-1-codepen-exercise	codepen	👶 introduction	❌	❌
4	html-multi-element-2-codepen-exercise	codepen	👶 introduction	❌	❌
5	html-sup-sub-codepen-exercise	codepen	👶 introduction	❌	❌
6	html-u-mark-codepen-exercise	codepen	👶 introduction	❌	❌

Game:

⚠️ There is no game in this workout.

20. formatting-text-elements-ii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	intro-abbr	✅	👶 introduction	❌	✅	✅	✅	❌
2	intro-dfn	✅	👶 introduction	❌	✅	✅	✅	❌
3	small	✅	👶 introduction	❌	✅	✅	✅	❌
4	intro-time	✅	👶 introduction	❌	✅	✅	✅	❌
5	intro-wbr	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-dfn-abbr-codepen-exercise	codepen	👶 introduction	❌	❌
2	html-multi-element-3-codepen-exercise	codepen	👶 introduction	❌	❌

Game:

⚠️ There is no game in this workout.

21. forms-iii

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	placeholder	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
2	range	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
3	intro-step	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	min-and-max	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
5	type-password	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
6	pattern-regexp	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-create-password-pattern-codepen-exercise	codepen	👶 introduction	html-forms.0: 10 html-forms.7: 10 html-forms.8: 10	✅
2	html-create-new-account-codepen-exercise	codepen	👶 introduction	html-forms.0: 10 html-forms.7: 10 html-forms.8: 10	✅
3	html-create-account-codepen-exercise	codepen	👶 introduction	html-forms.0: 10 html-forms.7: 10 html-forms.8: 10	✅

Game:

⚠️ There is no game in this workout.

22. forms-iv

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	image-button	✅	👶 introduction 💪 workout 🔮 obscura	❌	✅	✅	✅	❌
2	formaction	✅	💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	✅	❌
3	formenctype	✅	💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	✅	❌
4	formmethod	✅	💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	✅	❌
5	formnovalidate-and-novalidate	✅	💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	✅	❌
6	formtarget	✅	💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	❌	❌

Exercises:

no	name	type	aspects	standards	done
1	html-image-button-codepen-exercise	codepen	👶 introduction	html-forms.2: 10 embed-media.0: 10	✅

Game:

⚠️ There is no game in this workout.

23. forms-v

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	autocomplete	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
2	autofocus	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	multiple	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	oninput	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
5	output	✅	👶 introduction 💪 workout 🦑 deep	dom.3: 10	✅	✅	✅	✅

Exercises:

no	name	type	aspects	standards	done
1	html-form-attributes-exercise	codepen	👶 introduction	html-forms.7: 10 html-forms.8: 10 html-forms.9: 10 dom.3: 10	✅

Game:

⚠️ There is no game in this workout.

24. semantic-sections

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	semantic-containers	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
2	section	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	article	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	aside	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
5	figure-and-figcaption	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-semantics-1-codepen-exercise	codepen	👶 introduction	❌	❌
2	html-semantics-2-codepen-exercise	codepen	👶 introduction	layout-html.0: 10 semantic-html.0: 10 semantic-html.1: 10 semantic-html.3: 10	✅
3	html-semantics-3-codepen-exercise	codepen	👶 introduction	layout-html.0: 10 semantic-html.0: 10 semantic-html.1: 10 semantic-html.3: 10	✅

Game:

⚠️ There is no game in this workout.

25. citation-elements

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	intro-cite	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
2	intro-q	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	blockquotes	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	address	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
5	intro-bdo	✅	👶 introduction 💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	✅	❌
6	intro-bdi	✅	👶 introduction 💪 workout 🦑 deep 🔮 obscura	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

26. computer-code

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	intro-code	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
2	intro-kbd	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	intro-samp	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	intro-pre	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
5	intro-var	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

no	name	type	aspects	standards	done
1	html-computer-code-codepen-exercise	codepen	👶 introduction	semantic-html.0: 10 semantic-html.1: 10 semantic-html.3: 10 markup-text.2: 10 layout-html.3: 10 layout-html.4: 10	✅

Game:

⚠️ There is no game in this workout.

27. best-practices

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	doctype-always-first	✅	👶 introduction 🔮 obscura	❌	✅	❌	❌	❌
2	html-vs-htm	✅	👶 introduction 🔮 obscura	❌	✅	✅	❌	❌
3	lowercase-element-names	✅	👶 introduction 🔮 obscura	❌	✅	❌	❌	❌
4	close-all-html-elements	✅	👶 introduction 💪 workout	❌	✅	❌	❌	❌
5	quote-attribute-values	✅	👶 introduction 🔮 obscura	❌	✅	✅	✅	❌
6	alt-with-images	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	❌	❌
7	conditional-comments-ie9	✅	👶 introduction 💪 workout 🔮 obscura 🦑 deep	❌	✅	✅	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

28. html-entities

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	non-breaking-space	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
2	greater-and-less-than	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
3	copyright	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌
4	ampersand	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

29. html-versions

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	html4-xhtml-and-html5	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	❌	✅	❌
2	html4-xhtml-and-html5-continued	✅	👶 introduction 💪 workout 🦑 deep	❌	✅	❌	❌	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Standards

✅ - At least one insight covers this

❌ - Nothing covers this

🛠️ - This standard has no objectives yet

❌ Identify and evaluate the syntax of HTML

0. ❌ Identify an HTML element
1. ❌ Identify HTML attributes
2. ❌ Distinguish opening and closing HTML elements
3. ❌ Distinguish valid HTML from invalid HTML
4. ❌ Identify the structure of a valid HTML document
5. ❌ Distinguish valid from invalid HTML documents based on their structure
6. ❌ Identify and use commonly-held industry best practices
7. ❌ Identify and use valid global attributes

❌ Markup Text with HTML

0. ❌ Use HTML to add emphasis, bold, or other decoration to text
1. ❌ Use HTML to add indentation or spacing to text
2. ❌ Use HTML to create headings or other special text elements
3. ❌ Use HTML to link two hypertext documents together

❌ Lay out text and other elements with HTML

0. ❌ Use sectioning elements to arrange elements vertically
1. ❌ Use tables to arrange text fields and other elements vertically and horizontally
2. ❌ Use semantic elements to arrange and visually distinguish elements
3. ❌ Use inline elements to affect the presentation of text
4. ❌ Use block elements to affect the presentation of text

❌ Embed media with HTML elements

0. ❌ Embed images into an HTML document
1. ❌ Embed video into an HTML document
2. ❌ Embed audio into an HTML document
3. ❌ Embed arbitrary external content
4. ❌ Use attributes to configure embedded media

❌ Use HTML forms to collect user input

0. ❌ Use input tags to collect text input from the user
1. ❌ Use form tags to direct the output of a form
2. ❌ Use button elements to create actions for the user
3. ❌ Use label elements and placeholder attributes to label input fields
4. ❌ Use checkboxes and checkbox groups to collect input from the user
5. ❌ Use radio buttons and radio button groups to collect input from the user
6. ❌ Use select and option elements to create dropdown controls and multi-select elements
7. ❌ Use input element types to collect dates, numbers, or other formatted-text inputs from the user
8. ❌ Use input patterns to validate user input
9. ❌ Use autocomplete to improve the user experience

❌ Add metadata to HTML Documents

0. ❌ Add metadata to the relevant area of an HTML document
1. ❌ Add metadata that improves the user interface
2. ❌ Add metadata about the authorship of the document
3. ❌ Add metadata about the content of the document
4. ❌ Add metadata about the encoding and version of the document

❌ Use Semantic HTML to communicate about the structure of a document

0. ❌ Recognize semantic HTML tags
1. ❌ Choose the correct HTML tag to communicate about the content of text
2. ❌ Choose the correct HTML tag to communicate about the content of embedded media
3. ❌ Structure an HTML document using the most relevant semantic HTML tags

Aspects

Given the insights are tagged with aspects, we can filter over the linear content progression and create learning sub-paths.

These sub-path progressions will most likely not cover all content, but they will ensure and enforce an unified learning experience, tailor for the user wish.

For example, a user might be interested in new additions and updates of a language, rather than introduction lessions. Note that these sub-paths don't take games into consideration

👶 Introduction

If you are being introduced to the topic for the first time

Insights:

1. html-css-intro
2. html-defined
3. css-defined
4. html-css-code
5. html-css-browser
6. hypertext-markup-language
7. headings-and-paragraphs
8. hyperlinks
9. images
10. divisions-and-spans
11. html-structure-define
12. elements
13. html-tags
14. attributes
15. comments
16. paragraphs
17. headings-h1-h6
18. update-images
19. update-hyperlinks
20. style-element
21. doctype
22. html-element
23. head-element
24. optional-elements
25. image-types
26. image-alt
27. image-title
28. image-height-width
29. image-map
30. image-base
31. anchor-links
32. link-relative-paths
33. link-absolute-paths
34. link-target
35. image-link
36. image-mailto
37. link-download
38. ordered-lists
39. unordered-lists
40. nested-lists
41. list-orders
42. description-lists
43. audio
44. audio-files
45. video
46. video-formats
47. video-subtitles
48. embed
49. intro-form
50. input-element
51. text-field
52. text-area
53. submit-and-reset
54. check-boxes
55. checkbox-groups
56. radio-buttons
57. radio-buttons-ii
58. radio-buttons-iii
59. html-select
60. dropdown-list
61. table-tr-and-td
62. intro-th
63. caption
64. colgroup-and-col
65. thead-tbody-and-tfoot
66. meta-intro
67. charset
68. description
69. keywords
70. author
71. div
72. header
73. main
74. nav
75. footer
76. intro-span
77. intro-hr
78. button
79. button-attributes
80. intro-br
81. emphasis-i-and-em
82. important-b-and-strong
83. sub-and-superscript-sub-and-sup
84. editing-s-del-ins
85. editing-u-mark
86. intro-abbr
87. intro-dfn
88. small
89. intro-time
90. intro-wbr
91. placeholder
92. range
93. intro-step
94. min-and-max
95. type-password
96. pattern-regexp
97. image-button
98. autocomplete
99. autofocus
100. multiple
101. oninput
102. output
103. semantic-containers
104. section
105. article
106. aside
107. figure-and-figcaption
108. intro-cite
109. intro-q
110. blockquotes
111. address
112. intro-bdo
113. intro-bdi
114. intro-code
115. intro-kbd
116. intro-samp
117. intro-pre
118. intro-var
119. doctype-always-first
120. html-vs-htm
121. lowercase-element-names
122. close-all-html-elements
123. quote-attribute-values
124. alt-with-images
125. conditional-comments-ie9
126. non-breaking-space
127. greater-and-less-than
128. copyright
129. ampersand
130. html4-xhtml-and-html5
131. html4-xhtml-and-html5-continued

Exercises:

1. html-comment-codepen-exercise
2. html-element-attribute-codepen-exercise
3. html-headings-and-paragraphs-codepen-exercise
4. html-create-link-codepen-exercise
5. html-add-image-codepen-exercise
6. html-image-1-codepen-exercise
7. html-image-2-codepen-exercise
8. html-image-3-codepen-exercise
9. html-image-map-codepen-exercise
10. html-list-order-codepen-exercise
11. html-nested-list-codepen-exercise
12. html-unordered-list-codepen-exercise
13. html-description-list-codepen-exercise
14. html-audio-codepen-exercise
15. html-video-codepen-exercise
16. html-input-types-codepen-exercise
17. html-buttons-text-area-codepen-exercise
18. html-codepen-checkbox-exercise
19. html-codepen-radio-exercise
20. html-dropdown-list-codepen-exercise
21. html-table-1-codepen-exercise
22. html-table-2-codepen-exercise
23. html-table-3-codepen-exercise
24. html-table-4-codepen-exercise
25. html-sectioning-elements-1-codepen-exercise
26. html-sectioning-elements-2-codepen-exercise
27. html-sectioning-elements-3-codepen-exercise
28. html-sectioning-elements-4-codepen-exercise
29. formatting-elements-codepen-exercise
30. html-create-buttons-codepen-exercise
31. html-create-meter-codepen-exercise
32. html-create-progress-bar-codepen-exercise
33. html-s-del-ins-codepen-exercise
34. html-b-strong-codepen-exercise
35. html-multi-element-1-codepen-exercise
36. html-multi-element-2-codepen-exercise
37. html-sup-sub-codepen-exercise
38. html-u-mark-codepen-exercise
39. html-dfn-abbr-codepen-exercise
40. html-multi-element-3-codepen-exercise
41. html-create-password-pattern-codepen-exercise
42. html-create-new-account-codepen-exercise
43. html-create-account-codepen-exercise
44. html-image-button-codepen-exercise
45. html-form-attributes-exercise
46. html-semantics-1-codepen-exercise
47. html-semantics-2-codepen-exercise
48. html-semantics-3-codepen-exercise
49. html-computer-code-codepen-exercise

⚠️ There are no games tagged with this aspect in html.

💪 Workout

Theory put into practice/that’s how you achieve X points

Insights:

1. image-types
2. image-alt
3. image-title
4. image-height-width
5. image-map
6. image-base
7. audio
8. audio-files
9. video
10. video-formats
11. video-subtitles
12. embed
13. intro-form
14. input-element
15. text-field
16. text-area
17. submit-and-reset
18. check-boxes
19. checkbox-groups
20. radio-buttons
21. radio-buttons-ii
22. radio-buttons-iii
23. html-select
24. dropdown-list
25. table-tr-and-td
26. intro-th
27. caption
28. colgroup-and-col
29. thead-tbody-and-tfoot
30. meta-intro
31. charset
32. description
33. keywords
34. author
35. robots
36. div
37. header
38. main
39. nav
40. footer
41. intro-span
42. intro-hr
43. button
44. button-attributes
45. meter
46. meter-attributes
47. meter-attributes-ii
48. progress
49. placeholder
50. range
51. intro-step
52. min-and-max
53. type-password
54. pattern-regexp
55. image-button
56. formaction
57. formenctype
58. formmethod
59. formnovalidate-and-novalidate
60. formtarget
61. autocomplete
62. autofocus
63. multiple
64. oninput
65. output
66. semantic-containers
67. section
68. article
69. aside
70. figure-and-figcaption
71. intro-cite
72. intro-q
73. blockquotes
74. address
75. intro-bdo
76. intro-bdi
77. intro-code
78. intro-kbd
79. intro-samp
80. intro-pre
81. intro-var
82. close-all-html-elements
83. alt-with-images
84. conditional-comments-ie9
85. non-breaking-space
86. greater-and-less-than
87. copyright
88. ampersand
89. html4-xhtml-and-html5
90. html4-xhtml-and-html5-continued

Exercises:

1. formatting-elements-codepen-exercise
2. html-create-buttons-codepen-exercise
3. html-create-meter-codepen-exercise
4. html-create-progress-bar-codepen-exercise

Games:

1. table-it

🦑 Deep

Prerequisite knowledge consisting of 2 or more 👶/💪 workouts

Insights:

1. audio
2. audio-files
3. video
4. video-formats
5. video-subtitles
6. embed
7. intro-th
8. caption
9. colgroup-and-col
10. thead-tbody-and-tfoot
11. http-equiv
12. robots
13. main
14. nav
15. meter
16. meter-attributes
17. meter-attributes-ii
18. progress
19. placeholder
20. range
21. intro-step
22. min-and-max
23. type-password
24. pattern-regexp
25. formaction
26. formenctype
27. formmethod
28. formnovalidate-and-novalidate
29. formtarget
30. autocomplete
31. autofocus
32. multiple
33. oninput
34. output
35. semantic-containers
36. section
37. article
38. aside
39. figure-and-figcaption
40. intro-cite
41. intro-q
42. blockquotes
43. address
44. intro-bdo
45. intro-bdi
46. intro-code
47. intro-kbd
48. intro-samp
49. intro-pre
50. intro-var
51. alt-with-images
52. conditional-comments-ie9
53. non-breaking-space
54. greater-and-less-than
55. copyright
56. ampersand
57. html4-xhtml-and-html5
58. html4-xhtml-and-html5-continued

⚠️ There are no exercises tagged with this aspect in html. Games:

1. table-it

✨ New

Recently added/gained traction feature

⚠️ There are no insights tagged with this aspect in html. :warning: There are no exercises tagged with this aspect in html. :warning: There are no games tagged with this aspect in html.

🔮 Obscura

Stories, obscure details that don’t specifically relate to a learning objective

Insights:

1. image-alt
2. image-map
3. image-base
4. http-equiv
5. image-button
6. formaction
7. formenctype
8. formmethod
9. formnovalidate-and-novalidate
10. formtarget
11. intro-bdo
12. intro-bdi
13. doctype-always-first
14. html-vs-htm
15. lowercase-element-names
16. quote-attribute-values
17. conditional-comments-ie9

⚠️ There are no exercises tagged with this aspect in html. :warning: There are no games tagged with this aspect in html.

✅ All content has been tagged with aspects.