Want to learn how to build websites? Here’s our free, full-length HTML5 course.
HTML is one of the core building blocks of the web, as it encapsulates the content on the websites you visit. However, despite its huge influence, very few people are actually aware of how it works.
Throughout the course, Eric will take you from beginner to proficient in HTML while showing you how to build a website. And the best part is: it’ll take you less than an hour to complete the course!
Now let’s have a look at how it’s built up.
The course contains 14 interactive screencasts. Each cast handles a core concept of HTML, and most are between three and six minutes. In some of them, you’ll be encouraged to jump into the code and experiment for yourself, as that’s possible with the Scrimba platform.
Lesson #1: Intro to the web
This gives you a good foundation for the next lessons, as you’ll better grasp HTML’s overall role on the world wide web.
Lesson #2: Creating an HTML document
The next step is to create your first HTML document. This lecture will explain how HTML files work, and it’ll also give you a quick primer on the URL bar in the browser.
Lesson #3: Nesting elements
Nesting is a critical concept in HTML, so it’ll be covered in the third lesson. Nesting basically means that you can nest tags inside of each other. To nest an HTML element, simply add it in-between the opening and closing tags of another HTML element.
Lesson #4: Head elements and scripts
<meta name="desctiption" content="My first HTML website">
<meta name="viewport" content="width=device-width, intial-scale=1.0">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.6/css/all.css">
document.getElementById("h1").innerHTML = "Hello Universe!";
The head element is the first HTML tag after the
<html> tag itself. It’s a container for metadata and often defines the title, character set, styles, links, scripts, and other meta information.
So in this lecture, you’ll learn how to populate the meta tag with a bunch of different content types, as you can see in the snippet above.
Lesson #5: Layout elements
HTML5 introduced a bunch of layout elements that make HTML more semantic. These new tags now reinforce meaning to the most commonly used layout elements, like
<footer> , while in times past we only had a meaningless element like
<div> to use. In this screencast, you’ll learn the most useful and important ones.
Lesson #6: Figure and image elements
Images are a core part of almost all websites. In this lecture, you’ll learn how to add images to the site, and also how to add captions to them.
Lesson #7: Embedding videos
You might have noticed that YouTube videos are all over the web, right? Not just on youtube.com. That’s possible thanks to one of the HTML features for embedding media into a page from elsewhere on the web. In this lesson, we cover the methods for embedding videos from sites like YouTube and also directly from a video file.
Lesson #8: Navbar and list items
In this lecture, you’ll learn how to build the navigation bar using an unordered list and list items. This involves both a horizontal and a vertical navigation bar, for use in the header and in the sidebar of our site.
Lesson #9: Headings
Headings are created using the
<h*> tag, where the * sign is to be replaced with numbers from 1 to 6. The importance of the header drops as the number increases, meaning
<h1> is the one you’d normally use for your most important title or text on your page.
Lesson #10: Paragraph and text formatting (part 1 )
Formatting text is also important to know in order to build websites, and in this lecture you’ll learn the basics of it. You’ll probably recognize a lot of the concepts here from text processors like Word and Pages.
Lesson #11: Text formatting (part 2)
In this lesson, you’ll learn more about formatting, but with tags that affect large blocks of text. Examples of this are the
<code> element and the
Lesson #12: Tables (part 1)
Tables can be a bit complicated, but this lecture tries to explain it as simply as possible. Secondly, two lectures will be dedicated to this subject so that you’ll properly understand it.
Lesson #13: Tables (part 2)
In this lesson you’ll learn more advanced elements in tables, like
<tbody> , and
<tfoot>. These allow you to control the elements inside the head, body, and footer separately.
You’ll also be exposed to the
<colgroup>, which allows you to add styles to specific columns.
Lesson #14: Page linking and final touches
In the final screencast, we’ll wrap it all up and finish the website. We’ll add a link from the navigation to various sections on the page, and also introduce another page, so that you understand how links between pages work.
By this point, you should have a solid understanding of HTML, and the most important tags of the language.
Note: Eric will also be launching a follow-up course in April, which will tackle CSS for beginners. Leave your email here if you want early access.
The Scrimba format
Finally, let’s also have a look at the technology behind the course, as it’s pretty slick. The course is built using Scrimba, an interactive coding screencast tool. Scrimba looks like normal videos, but they’re fully interactive. You can edit the code inside the casts!
Here’s a gif which explains the concept:
This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.
So what are you waiting for? Head over to the course page and get started today!