Skip to content

Web HTML Course

enki-hq edited this page Jul 3, 2018 · 17 revisions

HTML Course Overview

Table of Contents

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

Insights:

no name content aspects standards PQ RQ Quiz done
1 hypertext-markup-language 👶 introduction syntax-html.0: 10
syntax-html.4: 10
2 headings-and-paragraphs 👶 introduction syntax-html.0: 10
markup-text.0: 10
markup-text.2: 10
3 hyperlinks 👶 introduction syntax-html.0: 10
markup-text.0: 10
markup-text.2: 10
4 images 👶 introduction syntax-html.0: 10
syntax-html.1: 10
embed-media.0: 10
5 divisions-and-spans 👶 introduction syntax-html.0: 10
layout-html.0: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 html-structure-define 👶 introduction syntax-html.0: 10
syntax-html.2: 10
2 elements 👶 introduction syntax-html.0: 10
syntax-html.2: 10
3 html-tags 👶 introduction syntax-html.0: 10
syntax-html.2: 10
4 attributes 👶 introduction syntax-html.0: 10
syntax-html.1: 10
5 comments 👶 introduction syntax-html.0: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 paragraphs 👶 introduction syntax-html.0: 10
markup-text.2: 10
2 headings-h1-h6 👶 introduction syntax-html.0: 10
markup-text.0: 10
markup-text.2: 10
3 update-images 👶 introduction syntax-html.0: 10
syntax-html.1: 10
embed-media.0: 10
4 update-hyperlinks 👶 introduction syntax-html.0: 10
markup-text.0: 10
markup-text.2: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 doctype 👶 introduction syntax-html.3: 10
syntax-html.4: 10
syntax-html.5: 10
metadata.4: 10
2 html-element 👶 introduction syntax-html.3: 10
syntax-html.4: 10
syntax-html.5: 10
3 head-element 👶 introduction syntax-html.3: 10
syntax-html.4: 10
syntax-html.5: 10
metadata.0: 10
metadata.1: 10
metadata.2: 10
metadata.4: 10
4 optional-elements 👶 introduction syntax-html.3: 10
syntax-html.4: 10
syntax-html.5: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

5. images

Insights:

no name content aspects standards PQ RQ Quiz done
1 image-types 👶 introduction
💪 workout
embed-media.0: 10
2 image-alt 👶 introduction
💪 workout
🔮 obscura
embed-media.0: 10
3 image-title 👶 introduction
💪 workout
embed-media.0: 10
4 image-height-width 👶 introduction
💪 workout
embed-media.0: 10
5 image-map 👶 introduction
💪 workout
🔮 obscura
embed-media.0: 10
6 image-base 👶 introduction
💪 workout
🔮 obscura
embed-media.0: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

6. media

Insights:

no name content aspects standards PQ RQ Quiz done
1 video 👶 introduction
💪 workout
🦑 deep
embed-media.1: 10
2 audio 👶 introduction
💪 workout
🦑 deep
embed-media.2: 10
3 embed 👶 introduction
💪 workout
🦑 deep
embed-media.3: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

7. forms

Insights:

no name content aspects standards PQ RQ Quiz done
1 intro-form 👶 introduction
💪 workout
html-forms.0: 10
html-forms.1: 10
2 input-element 👶 introduction
💪 workout
html-forms.0: 10
3 text-field 👶 introduction
💪 workout
html-forms.0: 10
4 text-area 👶 introduction
💪 workout
html-forms.0: 10
layout-html.2: 10
5 submit-and-reset 👶 introduction
💪 workout
html-forms.2: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 check-boxes 👶 introduction
💪 workout
html-forms.4: 10
2 checkbox-groups 👶 introduction
💪 workout
html-forms.4: 10
3 radio-buttons 👶 introduction
💪 workout
html-forms.5: 10
4 html-select 👶 introduction
💪 workout
html-forms.6: 10
5 dropdown-list 👶 introduction
💪 workout
html-forms.6: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 meta-intro 👶 introduction
💪 workout
metadata.0: 10
2 charset 👶 introduction
💪 workout
metadata.0: 10
metadata.4: 10
3 description 👶 introduction
💪 workout
metadata.0: 10
metadata.1: 10
metadata.3: 10
4 keywords 👶 introduction
💪 workout
metadata.0: 10
metadata.3: 10
5 author 👶 introduction
💪 workout
metadata.0: 10
metadata.2: 10
6 http-equiv 🔮 obscura
🦑 deep
metadata.0: 10
metadata.1: 10
metadata.3: 10
7 robots 💪 workout
🦑 deep
metadata.0: 10
metadata.3: 10
metadata.4: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 div 👶 introduction
💪 workout
layout-html.0: 10
2 header 👶 introduction
💪 workout
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
3 main 👶 introduction
💪 workout
🦑 deep
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
4 nav 👶 introduction
💪 workout
🦑 deep
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
5 footer 👶 introduction
💪 workout
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 placeholder 👶 introduction
💪 workout
🦑 deep
html-forms.0: 10
html-forms.3: 10
2 range 👶 introduction
💪 workout
🦑 deep
html-forms.0: 10
html-forms.7: 10
3 intro-step 👶 introduction
💪 workout
🦑 deep
html-forms.0: 10
html-forms.7: 10
4 min-and-max 👶 introduction
💪 workout
🦑 deep
html-forms.0: 10
html-forms.7: 10
5 type-password 👶 introduction
💪 workout
🦑 deep
html-forms.0: 10
html-forms.7: 10
6 pattern-regexp 👶 introduction
💪 workout
🦑 deep
html-forms.0: 10
html-forms.8: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 image-button 👶 introduction
💪 workout
🔮 obscura
html-forms.2: 10
embed-media.0: 10
2 height-and-width 👶 introduction
💪 workout
🔮 obscura
html-forms.2: 10
embed-media.0: 10
3 formaction 💪 workout
🦑 deep
🔮 obscura
html-forms.2: 10
4 formenctype 💪 workout
🦑 deep
🔮 obscura
html-forms.2: 10
5 formmethod 💪 workout
🦑 deep
🔮 obscura
html-forms.2: 10
6 formnovalidate-and-novalidate 💪 workout
🦑 deep
🔮 obscura
html-forms.2: 10
7 formtarget 💪 workout
🦑 deep
🔮 obscura
html-forms.2: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

13. forms-v

Insights:

no name content aspects standards PQ RQ Quiz done
1 autocomplete 👶 introduction
💪 workout
🦑 deep
html-forms.9: 10
2 autofocus 👶 introduction
💪 workout
🦑 deep
html-forms.9: 10
dom.3: 10
3 multiple 👶 introduction
💪 workout
🦑 deep
html-forms.7: 10
html-forms.8: 10
4 oninput 👶 introduction
💪 workout
🦑 deep
dom.3: 10
5 output 👶 introduction
💪 workout
🦑 deep
dom.3: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 semantic-containers 👶 introduction
💪 workout
🦑 deep
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
2 section 👶 introduction
💪 workout
🦑 deep
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
3 article 👶 introduction
💪 workout
🦑 deep
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
4 aside 👶 introduction
💪 workout
🦑 deep
layout-html.0: 10
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
5 figure-and-figcaption 🦑 deep

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 intro-cite 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
2 intro-q 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
3 blockquotes 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
4 address 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
5 intro-bdo 👶 introduction
💪 workout
🦑 deep
🔮 obscura
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
markup-text.2: 10
layout-html.3: 10
6 intro-bdi 👶 introduction
💪 workout
🦑 deep
🔮 obscura
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
markup-text.2: 10
layout-html.3: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

no name content aspects standards PQ RQ Quiz done
1 intro-code 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
markup-text.2: 10
layout-html.4: 10
2 intro-kbd 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
markup-text.2: 10
layout-html.3: 10
3 intro-samp 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
markup-text.2: 10
layout-html.3: 10
4 intro-pre 👶 introduction
💪 workout
🦑 deep
markup-text.2: 10
layout-html.4: 10
5 intro-var 👶 introduction
💪 workout
🦑 deep
semantic-html.0: 10
semantic-html.1: 10
semantic-html.3: 10
markup-text.2: 10
layout-html.3: 10

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

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

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

Insights:

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

Exercises:

⚠️ There are no insights in this workout.

Game:

⚠️ There is no game in this workout.

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

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

❌ Markup Text with HTML

  1. ✅ Use HTML to add emphasis, bold, or other decoration to text
  2. ❌ Use HTML to add indentation or spacing to text
  3. ✅ Use HTML to create headings or other special text elements

❌ Lay out text and other elements with HTML

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

✅ Embed media with HTML elements

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

✅ Use HTML forms to collect user input

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

✅ Add metadata to HTML Documents

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

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

  1. ✅ Recognize semantic HTML tags
  2. ✅ Choose the correct HTML tag to communicate about the content of text
  3. ❌ Choose the correct HTML tag to communicate about the content of embedded media
  4. ✅ 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. hypertext-markup-language
  2. headings-and-paragraphs
  3. hyperlinks
  4. images
  5. divisions-and-spans
  6. html-structure-define
  7. elements
  8. html-tags
  9. attributes
  10. comments
  11. paragraphs
  12. headings-h1-h6
  13. update-images
  14. update-hyperlinks
  15. doctype
  16. html-element
  17. head-element
  18. optional-elements
  19. image-types
  20. image-alt
  21. image-title
  22. image-height-width
  23. image-map
  24. image-base
  25. video
  26. audio
  27. embed
  28. intro-form
  29. input-element
  30. text-field
  31. text-area
  32. submit-and-reset
  33. check-boxes
  34. checkbox-groups
  35. radio-buttons
  36. html-select
  37. dropdown-list
  38. meta-intro
  39. charset
  40. description
  41. keywords
  42. author
  43. div
  44. header
  45. main
  46. nav
  47. footer
  48. placeholder
  49. range
  50. intro-step
  51. min-and-max
  52. type-password
  53. pattern-regexp
  54. image-button
  55. height-and-width
  56. autocomplete
  57. autofocus
  58. multiple
  59. oninput
  60. output
  61. semantic-containers
  62. section
  63. article
  64. aside
  65. intro-cite
  66. intro-q
  67. blockquotes
  68. address
  69. intro-bdo
  70. intro-bdi
  71. intro-code
  72. intro-kbd
  73. intro-samp
  74. intro-pre
  75. intro-var
  76. doctype-always-first
  77. html-vs-htm
  78. lowercase-element-names
  79. close-all-html-elements
  80. quote-attribute-values
  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

⚠️ There are no exercises tagged with this aspect in html. :warning: 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. video
  8. audio
  9. embed
  10. intro-form
  11. input-element
  12. text-field
  13. text-area
  14. submit-and-reset
  15. check-boxes
  16. checkbox-groups
  17. radio-buttons
  18. html-select
  19. dropdown-list
  20. meta-intro
  21. charset
  22. description
  23. keywords
  24. author
  25. robots
  26. div
  27. header
  28. main
  29. nav
  30. footer
  31. placeholder
  32. range
  33. intro-step
  34. min-and-max
  35. type-password
  36. pattern-regexp
  37. image-button
  38. height-and-width
  39. formaction
  40. formenctype
  41. formmethod
  42. formnovalidate-and-novalidate
  43. formtarget
  44. autocomplete
  45. autofocus
  46. multiple
  47. oninput
  48. output
  49. semantic-containers
  50. section
  51. article
  52. aside
  53. intro-cite
  54. intro-q
  55. blockquotes
  56. address
  57. intro-bdo
  58. intro-bdi
  59. intro-code
  60. intro-kbd
  61. intro-samp
  62. intro-pre
  63. intro-var
  64. close-all-html-elements
  65. alt-with-images
  66. conditional-comments-ie9
  67. non-breaking-space
  68. greater-and-less-than
  69. copyright
  70. ampersand
  71. html4-xhtml-and-html5

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

🦑 Deep

Prerequisite knowledge consisting of 2 or more 👶/💪 workouts

Insights:

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

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

✨ 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. height-and-width
  7. formaction
  8. formenctype
  9. formmethod
  10. formnovalidate-and-novalidate
  11. formtarget
  12. intro-bdo
  13. intro-bdi
  14. doctype-always-first
  15. html-vs-htm
  16. lowercase-element-names
  17. quote-attribute-values
  18. 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.

Clone this wiki locally