Skip to content

HTML Crash Course

Summary

Below you will find a collection of tutorials on the basics of HTML, the markup language for the web.

In this course, we’ll cover the following basic concepts: elements, tags, attributes, and values.

We’ll also cover these other concepts: Emmet, Unsplash, the Mozilla Developer Network, and coding style guides.

Before You Start

These tutorials assume you have a basic understanding of using a text editor, like VS Code.

Getting Started

Lessons

What is HTML? Useful symbols Install Live Preview extension Advice: More than one way of doing things

Boilerplate Code

Lessons

Create homepage Add boilerplate code Live Preview alternative Elements and tags Attributes and values Title element Advice: Copy first then improvise

Paragraph Element

Lessons

Writing elements Emmet Lorem ipsum text HTML comments Whitespace in HTML Advice: Absolutes and exceptions

Heading Elements

Lessons

Heading elements Heading order Debugging HTML Strong and b Validate HTML

List Elements

Lessons

Ordered lists Unordered lists Nested lists

Links

Learn how to create links to other pages or other websites.

Lessons

Creating more files Internal links Link to home page External links Open link in new tab Link to top Link to page section Email link Download link View Page Source

Image Element

Lessons

Getting free images Image element Image formats SVG images Image links

Semantic Elements

Lessons

nav element main element section element footer element HTML entities

Forms

Lessons

Label and input Input attributes Password input Email input Radio inputs Checkbox inputs Textarea Select and option Button Form

Learning More

Lessons

Mozilla Developer Network Deprecated elements HTML style guides

Project

Lessons

Project setup Create nav element Create footer element Edit Home page Edit About page Edit FAQ page Make project look better Publish project online

Next Steps

After taking this course, you can take our CSS Crash Course.