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.

So in order to improve the technological literacy of the world, we’ve teamed up with developer, designer, and teacher Eric Tirado and created a free course on HTML5.

Click the image to get to the course page
Click the here to get to the course page

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.

Course content

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

1*uY2K9BXnJ-uP4X9vAPvfDg

It starts off by teaching you a little bit about the web in general, looking at clients, servers, and the three languages browsers speak: HTML, CSS, and JavaScript.

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

1*O0F7kNLF412jOLz6dP3XkQ

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

1*84ti63CghL17e22bu_7mIg

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

<head>  
  <title>Learning HTML</title>  
  <meta charset="UTF-8">  
  <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">  
  <style>  
    h1 {  
      text-align: center;  
    }  
  </style>  
  <script>  
    document.getElementById("h1").innerHTML = "Hello Universe!";  
  </script>  
</head>

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

1*F39HrDLec0NvKoaMK3lZDg

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 <header> <article> <aside> and <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

1*5TENKIfD5Q3klY2skLS14Q

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

1*N45m6ef7HyUyDEM4oTJ-qw

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

1*sGbn8eMzacjpzJQoO8UaFw

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

1*Xh0zp6eosxQsCp9C3s8s5Q

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 )

1*aydm1Ni1yLwAQn3xn8HxpA

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)

1*SZ3DuSMio-lNb1EQ5vHf-g

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 <blockquote> element.

Lesson #12: Tables (part 1)

1*AGQ66VeOeDOJzO1qK-KLig

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)

1*9KLwnPQq2FDXhEgnB5ulAQ

In this lesson, you’ll learn more advanced elements in tables, like <thead>, <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

1*Fj7VP0FXfgB7KExjKwhMgw

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:

Pause the screencast → Edit the code → Run it! → See your changes

Pause the screencast → Edit the code → Run it! → See your changes

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!


Thanks for reading! My name is Per Borgen, I'm the co-founder of Scrimba – the easiest way to learn to code. You should check out our responsive web design bootcamp if want to learn to build modern website on a professional level.

bootcamp-banner
Click here to get to the advanced bootcamp.