Introduction to HTML

The video below discusses what HTML is and what HTML "markup" looks like.

HTML Intro

More About HTML Files

The video below discusses some details about HTML files. However, if you're following along on this website - you won't need to worry too much about the details in this video! The CodePen editor makes our lives easier, so we can first focus just on creating HTML elements.

More about HTML

Introducing CodePen

Once we start creating real websites, we'll need to do a bunch of extra work to get things working. But that can be distracting when you're starting to learn about web development, so we recommend you use the site CodePen to follow along with these tutorials. In the video below, we'll explore CodePen and how to get started with it.

Using CodePen

Activity: Playing Around with HTML

In the code editor below, try adding some HTML markup to the "HTML" tab. For example, you might try entering <p>This is some text.</p>.

Basic Elements

On this page we will look at some very foundational elements in HTML, including headings, paragraphs, divs, and formatting elements.

Headings

In the video below we'll look at "heading" elements in HTML.

Headings

Paragraphs and Divs

In the video below we'll look at "paragraph" and "div" elements - perhaps the two most important elements in HTML.

P and Div

Formatting and Spans

In the video below we'll look at some formatting elements, as well as "spans".

Formatting and Spans

Links and Images

On this page, we'll take a look at links and images - parts of HTML that make the internet fun to use!

Links

In the video below we'll look at links, which are referred to as "anchor" elements.

Links

Images

In the video below we'll look at adding images to our web pages using the image element.

Images

Lists and Tables

On this page, we'll take a look at lists and tables - two great ways to organize data on a web page.

Unordered and Ordered Lists

In the video below we'll look at unordered and ordered lists.

Lists

Tables

In the video below we'll look at creating tables in HTML.

Tables

Forms

On this page, we'll take a look at forms - the elements in HTML that allow users to input data, and for the web page to react accordingly.

Forms and Submissions

In the video below we'll explore how to set up a form, and how one might submit a form.

Forms Intro

Input Types: Text, Textarea, Password, and Number

In the video below we'll look at some text-based input types.

Text Inputs

Input Types: Select, Radio Buttons, Checkboxes, and Buttons

In the video below we'll look at some selection-based input types.

Selection Inputs

Input Types: Even More!

In the video below we'll look at a few more input types.

More Inputs