HTML Essential Training

Course details

Looking to get up to speed with HTML (Hypertext Markup Language), the foundation for all websites and web applications? In this course, instructor Christina Truong covers the fundamental concepts and skills you need to know to start writing HTML, including terminology, syntax, how to create a document structure, and more. Along the way, learn how to define the semantic meaning of content to communicate between the web browser and the user. Additionally, explore how to embed various types of media, such as images, videos, and audio, and learn how to create a basic form to capture user input. By the end of this course, you’ll be prepared to start leveraging the power of HTML.

Learning objectives
Summarize the role and importance of HTML when creating websites.
Define the syntax and terminology of HTML.
Build the document structure of a webpage using semantic HTML elements and attributes.
List ways to create media and format content to optimize for different screen sizes and devices.
Create a basic webform for functionality and accessibility.

Concepts

0. Introduction

01 - Why should I learn HTML
02 - How to use the exercise files

1. The Web

03 - Languages of the web
04 - Anatomy of a website
05 - The rules of the web
06 - Terminology and syntax
07 - Exercise - The development environment
08 - Exercise - Customizing your text editor
09 - Exercise - Setting up your dev environment

2. Formatting Text

10 - Paragraphs and headings
11 - Ordered, unordered, and description lists
12 - Quotations
13 - Exercise - Formatting text, part 1
14 - Date and time
15 - Bold and italics
16 - Character entity reference
17 - Exercise - Formatting text, part 2
18 - Code and line breaks
19 - HTML and typography
20 - Challenge - Write text-based HTML markup for course project
21 - Solution - Demo

3. The HTML Document and Page Structure

22 - The basic HTML document
23 - Structuring content, part 1
24 - Structuring content, part 2
25 - Exercise - Structuring content
26 - HTML tables
27 - Exercise - Create an HTML table
28 - The Document Object Model
29 - Challenge - Add structural elements to project
30 - Solution - Demo

4. Links and Navigation

31 - The hyperlink
32 - Relative and absolute URLs
33 - Types of links
34 - Navigation
35 - Challenge - Add links and navigation
36 - Solution - Demo

5. Images

37 - Image formats
38 - Embedding images
39 - Width and height attributes
40 - Optimizing images
41 - Developer tools and resizing images
42 - Responsive images, part 1
43 - Responsive images, part 2
44 - Responsive images with picture
45 - Challenge - Add responsive images
46 - Solution - Demo

6. More Media Elements

47 - Video
48 - Adding captions and subtitles
49 - Audio
50 - Embedding media with iframes
51 - Challenge - Add media to project
52 - Solution - Demo

7. Web Forms

53 - What are web forms
54 - HTML form basics
55 - Input types
56 - Form validation
57 - Checkbox and radio inputs
58 - Additional form elements
59 - Challenge - Add a contact form
60 - Solution - Demo

8. Accessibility and Internationalization

61 - What is accessibility
62 - Accessible Rich Internet Applications (ARIA) basics
63 - Supporting languages

Conclusion

64 - Next steps