Introduction to HTML

Learn the basics in less than an hour

    
Eric Tirado4:199 months ago
    Hello World!
    Atom
    Visual Studio Code
    Sublimce Text
    
    
    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <div class="white"> 
                <div class="green">
                    <div class="red">
                    </div> 
                </div> 
            </div>
            <div class="white">
                
    <!DOCTYPE html>
    <html>
        <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 {
    <!DOCTYPE html>
    <html>
        <head>
            <title>Learning HTML</title>
            <meta name="description" content="My first HTML page">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">        
        </head>
        
        <body>
            <header>
                <nav>
                    Navigation
                </nav>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <section class="center">
                <header>
                    <nav>
                        Navigation
                    </nav>
                </header>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <section class="center">
                <header>
                    <nav>
                        Navigation
                    </nav>
                </header>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>
Eric Tirado1:559 months ago
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#top"> Top </a></li>
                    <li><a href="#quote"> Quote </a></li>
                    <li><a href="#contact"> Contact Us </a></li>
                    <li><a href="next.html"> Next Page </a></li>
    <!DOCTYPE html>
    <html lang="en-US">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" type="text/css" href="index.css">
        </head>
        <body id="home" class="open-left">
            <div id="offcanvas-left" class="hide">
                <ul>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                    <li><a href="#" >Item 1 </a></li>
                </ul>

The quickest way to get started building websites


HTML is one of the core building blocks on the web, as it’s what holds the content on all the websites you visit. Thus, HTML is a must-have skill for all web developers.

While HTML is a huge subject, the basics can be learned quickly. This course aims at taking you from absolute beginner to proficient in HTML in less than an hour. Throughout the lectures, you'll be building a neat-looking website from scratch together with the brilliant instructor Eric Tirado.

What you'll learn:

  • Intro to web architecture
  • HTML documents
  • Nesting
  • Head elements and scripts
  • Layout elements
  • Images and videos
  • Embedding
  • Lists
  • Navbars
  • Headings
  • Text formatting
  • Tables
  • Links

So claim your free spot in this course today!

What people are saying about Scrimba: