HTML Essential Training

HTML Essential Training

3h 56mBeginner2025-03-21

Authors

Christina Truong

Christina Truong

Educator, Front-End Developer

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.

Skills covered

Web StandardsWeb DesignWeb Development ToolsFront-End Web DevelopmentEssential TrainingWeb DevelopmentProgramming LanguagesSoftware Development

Concepts

Introduction

  • Why should I learn HTML
  • How to use the exercise files

The Web

  • Languages of the web
  • Anatomy of a website
  • The rules of the web
  • Terminology and syntax
  • Exercise - The development environment
  • Exercise - Customizing your text editor
  • Exercise - Setting up your dev environment

Formatting Text

  • Paragraphs and headings
  • Ordered, unordered, and description lists
  • Quotations
  • Exercise - Formatting text, part 1
  • Date and time
  • Bold and italics
  • Character entity reference
  • Exercise - Formatting text, part 2
  • Code and line breaks
  • HTML and typography
  • Challenge - Write text-based HTML markup for course project
  • Solution - Demo

The HTML Document and Page Structure

  • The basic HTML document
  • Structuring content, part 1
  • Structuring content, part 2
  • Exercise - Structuring content
  • HTML tables
  • Exercise - Create an HTML table
  • The Document Object Model
  • Challenge - Add structural elements to project
  • Solution - Demo

Links and Navigation

  • The hyperlink
  • Relative and absolute URLs
  • Types of links
  • Navigation
  • Challenge - Add links and navigation
  • Solution - Demo

Images

  • Image formats
  • Embedding images
  • Width and height attributes
  • Optimizing images
  • Developer tools and resizing images
  • Responsive images, part 1
  • Responsive images, part 2
  • Responsive images with picture
  • Challenge - Add responsive images
  • Solution - Demo

More Media Elements

  • Video
  • Adding captions and subtitles
  • Audio
  • Embedding media with iframes
  • Challenge - Add media to project
  • Solution - Demo

Web Forms

  • What are web forms
  • HTML form basics
  • Input types
  • Form validation
  • Checkbox and radio inputs
  • Additional form elements
  • Challenge - Add a contact form
  • Solution - Demo

Accessibility and Internationalization

  • What is accessibility
  • Accessible Rich Internet Applications (ARIA) basics
  • Supporting languages

Conclusion

  • Next steps
100,000 Toman