HTML Essentials

An Introduction to the HTML Essentials module.

Interested in this course? Email us at [email protected]

Course curriculum

1. Welcome
1. Introduction to the Playground
2. Introduction to repl.it
3. Hints and Tips for Completing Our Coding Challenges
1. World Wide Web
1. Anatomy of a Web Page
2. HTML Structure - First Look
3. Playground - First Look
4. Runnable Example - First Look
5. HTML First Look Challenge
6. DOCTYPE
7. Runnable Example - DOCTYPE
8. DOCTYPE Challenge
1. Common HTML Elements
2. The html Element
3. Runnable Example - The html Element
4. The html Element Challenge
5. The head Element
6. Playground - head
7. Coders Coffeehouse - head
8. The head Element Challenge
1. The body Element
2. Playground - body
3. Coders Coffeehouse - body
4. The body Element Challenge
5. Tag
6. Playground - Tag
7. Runnable Example - Tag
8. Tag Challenge
9. Elements
10. Playground - Elements
11. Coders Coffeehouse - Elements
12. Elements Challenge
1. HTML Text Elements
2. Headings
3. Playground - Headings
4. Coders Coffeehouse - Headings
5. Headings Challenge
6. Headings Bonus Challenge
7. Paragraphs
8. Playground - Paragraphs
9. Coders Coffeehouse - Paragraphs
10. Paragraphs Challenge
11. Paragraphs Bonus Challenge
1. Divs and Spans
2. The div Element
3. Playground - Div
4. Coders Coffeehouse - Div
5. Div Challenge
6. Block Level Element
7. The span Element
8. Playground - Span
9. Coders Coffeehouse - Span
10. Span Challenge
11. General Divs and Spans Challenge
12. General Divs and Spans Bonus Challenge
1. Comments
2. Playground - Comments
3. Runnable Example - Comments
4. Single Line Comments Challenge
5. Multi-Line Comments Challenge
1. Attributes
2. Playground - Attribute
3. Coders Coffeehouse - Attribute
4. Attribute Challenge
5. Classes
6. Playground - Classes
7. Coders Coffeehouse - Classes
8. Classes Challenge
9. ID
10. Playground - ID
11. Coders Coffeehouse - ID
12. ID Challenge
1. Anchor
2. External links
3. Playground - External links
4. Coders Coffeehouse - External links
5. External Links Challenge
6. Internal links
7. Playground - Internal links
8. Coders Coffeehouse - Internal links
9. Internal Links Challenge
1. Lists
2. Ordered List
3. Playground - Ordered List
4. Coders Coffeehouse - Ordered List
5. Ordered List Challenge
6. Unordered List
7. Playground - Unordered List
8. Coders Coffeehouse - Unordered List
9. Unordered List Challenge
10. Nested Lists
11. Playground - Nested Lists
12. Coders Coffeehouse - Nested List
13. Nested Lists Challenge
1. HTML Tables
2. Playground - HTML Tables
3. Coders Coffeehouse - HTML Tables
4. HTML Tables Challenge
1. Forms
2. The form Element
3. Playground - Form
4. Coders Coffeehouse - Form
5. The form Element Challenge
6. Form Attributes
7. Playground - Form Attributes
8. Coders Coffeehouse - Form Attributes
9. Form Attributes Challenge
10. HTTP
11. HTTP Challenge
1. Form Structure
2. Playground - Form Structure
3. Coders Coffeehouse - Form Structure
4. Form Structure Challenge
5. Form Label
6. Coders Coffeehouse - Form Label
7. Form Label Challenge
1. Input Field
2. Playground - Input Field
3. Coders Coffeehouse - Input Field
4. Input Field Challenge
5. More Input Types
6. More Input Types Challenge
7. The textarea Element
8. Playground - textarea
9. Coders Coffeehouse - textarea
10. The textarea Challenge
1. Checkbox
2. Playground - Checkbox
3. Coders Coffeehouse - Checkbox
4. Checkbox Challenge
5. Radio Button
6. Playground - Radio Button
7. Coders Coffeehouse - Radio Button
8. Radio Button Challenge
1. The select Element
2. Playground - select
3. Coders Coffeehouse - select
4. The select Element Challenge
5. The datalist Element
6. Playground - datalist
7. Coders Coffeehouse - datalist
8. The datalist Element Challenge
1. Form Button
2. Playground - Form Button
3. Coders Coffeehouse - Form Button
4. The Form Button Challenge
1. Semantic Form Elements
2. Playground - Semantic Form
3. Coders Coffeehouse - Semantic Form
4. Semantic Form Elements Challenge
1. Form Validation
2. Playground - Form Validation
3. Coders Coffeehouse - Form Validation
4. Form Validation Challenge
1. The img Element
2. Playground - img
3. Coders Coffeehouse - img
4. The img Element Challenge
5. The picture Element
6. Playground - picture
7. Runnable Example - picture
8. The picture Element Challenge
1. IFrames
2. Playground - IFrame
3. Coders Coffeehouse - IFrames
4. IFrames Challenge
1. The audio Element
2. Playground - audio
3. Runnable Example - audio
4. Audio Challenge
5. The video Element
6. Playground - video
7. Runnable Example - video
8. Video Challenge
1. HTML5 and The Semantic Web
2. The header Element
3. Playground - header
4. Coders Coffeehouse - header
5. Header Challenge
6. The nav Element
7. Playground - nav
8. Coders Coffeehouse - nav
9. Nav Challenge
10. The footer Element
11. Playground - footer
12. Coders Coffeehouse - footer
13. Footer Challenge
1. The section Element
2. Playground - section
3. Coders Coffeehouse - section
4. Section Challenge
5. The article Element
6. Playground - article
7. Runnable Example - article
8. Article Challenge
9. The aside Element
10. Playground - aside
11. Runnable Example - aside
12. Aside Challenge
1. The figure Element
2. Playground - figure
3. Runnable Example - figure
4. Figure Challenge
5. The caption Element
6. Playground - caption
7. Runnable Example - caption
8. Caption Challenge
1. The details and summary Elements
2. Playground - details and summary
3. Runnable Example - details and summary
4. Details and Summary Challenge
1. Accessibility in HTML
2. The aria-label Attribute
3. Playground - aria-label
4. Coders Coffeehouse - aria-label
5. The aria-label Challenge
6. The aria-labelledby Attribute
7. Playground - aria-labelledby
8. Runnable Example - aria-labelledby
9. The aria-labelledby Challenge
1. Metadata
2. The meta Element
3. Charset and Viewport
4. Coders Coffeehouse - charset and viewport
5. Charset and Viewport Challenge
6. Meta Content
7. Coders Coffeehouse - Meta Content
8. Meta Content Challenge
1. Conclusion
2. Congratulations! You have completed HTML Essentials

About this course

Free
231 lessons
1 hour of video content

Discover your potential, starting today

Enroll today

HTML Essentials

Course curriculum

Introduction - Module introduction

Introduction - Welcome To The Course

The Essentials - World Wide Web

The Essentials - HTML Document

The Essentials - HTML Structural Elements

The Essentials - HTML Content Elements

The Essentials - Text Elements

The Essentials - Divs and spans

The Essentials - Comments

The Essentials - Attributes

The Essentials - Links

The Essentials - Lists

The Essentials - Tables

The Essentials - Forms

The Essentials - Form Description

The Essentials - Form Inputs

The Essentials - Checkbox and Radio Inputs

The Essentials - Dropdown Menus

The Essentials - Form Button

The Essentials - Form Semantics

The Essentials - Form Validations

The Essentials - Media Elements - Images

The Essentials - More Media Elements - Iframes

The Essentials - More Media Elements - Audio and Video

The Essentials - Semantic Web - Header, nav & footer

The Essentials - Semantic Web - Section, Article & Aside

The Essentials - Semantic Web - figure and caption

The Essentials - Semantic Web - Details and summary

The Essentials - Accessibility in HTML

The Essentials - Metadata - charset and viewport

The Essentials - Congratulation on completing HTML Essentials!

About this course

Discover your potential, starting today