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	❌	✅	✅	✅	❌
5	image-link	✅	👶 introduction	❌	✅	✅	✅	❌
6	link-mailto	✅	👶 introduction	❌	✅	✅	✅	❌
7	image-mailto	✅	👶 introduction	❌	✅	✅	✅	❌
8	link-download	✅	👶 introduction	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

8. 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.

9. 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.

10. 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.

11. 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	html-select	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
5	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.

12. 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	❌	❌

13. 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	❌	✅	✅	✅	❌
5	author	✅	👶 introduction 💪 workout	❌	✅	✅	✅	❌
6	http-equiv	✅	🔮 obscura 🦑 deep	❌	✅	✅	✅	❌
7	robots	✅	💪 workout 🦑 deep	❌	✅	✅	✅	❌

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

14. 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.

15. 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	❌	✅	✅	❌	❌
5	meter	✅	🦑 deep 💪 workout	❌	✅	✅	✅	❌
6	meter-attributes	✅	🦑 deep 💪 workout	❌	✅	❌	✅	❌
7	meter-attributes-ii	✅	🦑 deep 💪 workout	❌	✅	✅	✅	❌
8	progress	✅	🦑 deep 💪 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	✅
3	html-create-meter-codepen-exercise	codepen	👶 introduction 💪 workout	layout-html.3: 1000	✅
4	html-create-progress-bar-codepen-exercise	codepen	👶 introduction 💪 workout	layout-html.3: 1000	✅

Game:

⚠️ There is no game in this workout.

16. 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	❌	✅	✅	❌	❌
7	intro-abbr	✅	👶 introduction	❌	✅	✅	✅	❌
8	intro-dfn	✅	👶 introduction	❌	✅	✅	✅	❌
9	small	✅	👶 introduction	❌	✅	✅	✅	❌
10	intro-time	✅	👶 introduction	❌	✅	✅	✅	❌
11	intro-wbr	✅	👶 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	❌	❌
7	html-dfn-abbr-codepen-exercise	codepen	👶 introduction	❌	❌
8	html-multi-element-3-codepen-exercise	codepen	👶 introduction	❌	❌

Game:

⚠️ There is no game in this workout.

17. 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.

18. 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.

19. 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.

20. 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.

21. 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.

22. 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.

23. 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.

24. 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.

25. html-versions

Insights:

no	name	content	aspects	standards	PQ	RQ	Quiz	done
1	html4-xhtml-and-html5	✅	👶 introduction 💪 workout 🦑 deep	metadata.4: 10	✅	✅	✅	✅

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. link-mailto
37. image-mailto
38. link-download
39. ordered-lists
40. unordered-lists
41. nested-lists
42. list-orders
43. description-lists
44. audio
45. audio-files
46. video
47. video-formats
48. video-subtitles
49. embed
50. intro-form
51. input-element
52. text-field
53. text-area
54. submit-and-reset
55. check-boxes
56. checkbox-groups
57. radio-buttons
58. html-select
59. dropdown-list
60. table-tr-and-td
61. intro-th
62. caption
63. colgroup-and-col
64. thead-tbody-and-tfoot
65. meta-intro
66. charset
67. description
68. keywords
69. author
70. div
71. header
72. main
73. nav
74. footer
75. intro-span
76. intro-hr
77. button
78. button-attributes
79. intro-br
80. emphasis-i-and-em
81. important-b-and-strong
82. sub-and-superscript-sub-and-sup
83. editing-s-del-ins
84. editing-u-mark
85. intro-abbr
86. intro-dfn
87. small
88. intro-time
89. intro-wbr
90. placeholder
91. range
92. intro-step
93. min-and-max
94. type-password
95. pattern-regexp
96. image-button
97. autocomplete
98. autofocus
99. multiple
100. oninput
101. output
102. semantic-containers
103. section
104. article
105. aside
106. figure-and-figcaption
107. intro-cite
108. intro-q
109. blockquotes
110. address
111. intro-bdo
112. intro-bdi
113. intro-code
114. intro-kbd
115. intro-samp
116. intro-pre
117. intro-var
118. doctype-always-first
119. html-vs-htm
120. lowercase-element-names
121. close-all-html-elements
122. quote-attribute-values
123. alt-with-images
124. conditional-comments-ie9
125. non-breaking-space
126. greater-and-less-than
127. copyright
128. ampersand
129. html4-xhtml-and-html5

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. html-select
22. dropdown-list
23. table-tr-and-td
24. intro-th
25. caption
26. colgroup-and-col
27. thead-tbody-and-tfoot
28. meta-intro
29. charset
30. description
31. keywords
32. author
33. robots
34. div
35. header
36. main
37. nav
38. footer
39. intro-span
40. intro-hr
41. button
42. button-attributes
43. meter
44. meter-attributes
45. meter-attributes-ii
46. progress
47. placeholder
48. range
49. intro-step
50. min-and-max
51. type-password
52. pattern-regexp
53. image-button
54. formaction
55. formenctype
56. formmethod
57. formnovalidate-and-novalidate
58. formtarget
59. autocomplete
60. autofocus
61. multiple
62. oninput
63. output
64. semantic-containers
65. section
66. article
67. aside
68. figure-and-figcaption
69. intro-cite
70. intro-q
71. blockquotes
72. address
73. intro-bdo
74. intro-bdi
75. intro-code
76. intro-kbd
77. intro-samp
78. intro-pre
79. intro-var
80. close-all-html-elements
81. alt-with-images
82. conditional-comments-ie9
83. non-breaking-space
84. greater-and-less-than
85. copyright
86. ampersand
87. html4-xhtml-and-html5

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

⚠️ 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.