HTML & CSS Crash Course

Learn to build your very first web pages with this four hour course on HTML and CSS. Created by one of the most popular coding instructors on YouTube.

    <h1>Hello my name is </h1>
Kevin Powell7:102 months ago
    <html>
        <head></head>
        <body>
            
        </body>
    </html>
    <html>
        <head>
            <link rel="stylesheet" href="index.css">
        </head>
        <body>
            <h1>index.html</h1>
            <script src="index.pack.js"></script>
        </body>
    </html>
    <html>
        <head></head>
        <body>
            
        </body>
    </html>
    <!DOCTYPE html>
    <html>
        <head>
            <title>Strong and emphasis!</title>
        </head>
        <body>
            <h1>Strong and emphasis</h1>
            <p>Strong and emphasis elements help put important on our text</p>
            
            <h2>The strong tag</h2>
            <p>We use the strong tag to put strong importance on text</p>
            
            <h3>An example</h3>
            <p><strong>Warning:</strong> Watch out for the guard dog</p>
    <html>
        <head></head>
        <body>
            
        </body>
    </html>
    <html>
        <head>
            <title>Anchors and Attributes</title>
        </head>
        <body>
            <h1>Linking between pages</h1>
            <p>Adding links is very easy to do! We use <a href="anchors.htm
            
        </body>
    </html>
    <html>
        <head>
            <title>Introduction to CSS</title>
        </head>
        <body>
            <h1 style="font-size: 70px; color: red;">Cascading Style Sheets</h1>
            <p>We use CSS to add style to our HTML documents.</p>
            <p style="color: blue">There are a few different ways to add CSS to a document, but for time being we'll be using <em>inline</em> CSS.</p>
            <h2 style="background-color: purple; color: white;">Inline CSS</h2>
            <p>Inline CSS is written directly in our HTML using a style attribute.</p>
            <p>We can style any element using inline styles, from the body to 
        </body>
    </html>
Kevin Powell6:453 months ago
    <html>
        <head>
            <title>Introduction to CSS</title>
        </head>
        <body>
            <!-- 
                #42f4df
                #f77002
                #13a351
                rgb(206, 105, 72)
                rgb(229, 0, 255)
                hsl(264, 100%, 30%)
             -->
            
Kevin Powell6:013 months ago
    <!-- 
    HTML
      - h1 (the title of the page)
      - An introductory paragraph
      - Two h2s, each followed by a few paragraphs
      - Inside the paragraphs, use strong and emphasis tags
      - If you are feeling adventorus add a second page and link to it
      
    CSS
      - Change the color of the h1
      - Change the text alignment of the h1
      - Change the color of the h2s
      - Change the font-size of the paragraphs
      - If you added a link, change the color of it
    <html>
        <head></head>
        <body>
            <h1>Lists are really useful</h1>
            <p>Below are the two different types of lists I can create with HT
            <ol>
                <li>List item one</li>
                <li>a second list item</li>
                <li>a third item here</li>
                <li>yet another list item</li>
            </ol>
            
            <ul>
                <li>bullet point 01</li>
Kevin Powell4:302 months ago
    <html>
        <head>
            <title>Images</title>
        </head>
        <body>
            <h1>Images on the web</h1>
            <img src="images/dog-in-blanket.jpg" alt="">
        </body>
    </html>
Kevin Powell7:302 months ago
    <!DOCTYPE html>
    <html>
        <head>
            <title>All about Earth</title>
        </head>
        <body>
            <h1 style="font-size: 60px; color: #2a8442">Earth</h1>
            <p>Earth is <strong>the third planet from the Sun</strong
            
            <img src="images/earth.jpg" alt="the planet earth from space">
            
            <h2 style="color: #2a8442">Orbit and rotation</h2>
            
            <h3>Rotation</h3>
    <!DOCTYPE html>
    <html>
        <head>
            <title>All about Earth</title>
            <style>
                h2 {
                    color: green;
                }
                
                h3 {
                    co
                }
            </style>
        </head>
Kevin Powell9:462 months ago
    body {
        background-color: #333; 
        color: #f4f4f4;
    }
    
    a {
        color: darksalmon;
    }
    
    h1 {
        color: darkkhaki; 
    }
Kevin Powell11:272 months ago
    <!DOCTYPE html>
    <html>
        <head>
            <title>All about Earth</title>
            <link href="css/style.css" rel="stylesheet">
        </head>
        <body>
            <h1 class="earth-title">Earth</h1>
            <p class="intro">Earth is <strong>the third planet from the 
            
            <h2 class="earth-title">Orbit and rotation</h2>
            
            <h3>Rotation</h3>
            <p>Earth's rotation period relative to the Sun—its mean solar day—
    /* TODO: change the color of the text to white */
    
    body {
        background: #333;
        color: white;
    }
    
    h1 { color: red; }
    <html>
        <head>
            <title>The box model</title>
            <link href="css/style.css" rel="stylesheet">
        </head> 
        <body>
            <header>
                <h1>Intro to the box model</h1>
            </header>
            
            <main>
                <h2>Width and height</h2>
                <p>All elements have a width and a height.</p>
                <p>We can control the width and the height very easily, but be careful when setting heights on elements, it can get you in trouble!</p>
    body {
        background: #333;
        color: white;
    }
    
    header {
        color: #333;
        background: white;
        width: 100px;
        margin: 20px;
        padding: 30px;
    }
    
    main {
    body {
        background: #333;
        color: white;
    }
    
    header {
        width: 100px;
        
        border: 10px solid red;
        
        border-bottom-color: yellow; 
        border-left-style: dashed;   
        
        padding: 20px;
Kevin Powell8:282 months ago
    body {
        background: #333;
        color: white;
    }
    
    header {
        width: 100px;
        background: steelblue;
        margin: 20px;
        padding: 30px;
        border: 10px solid yellow;
    }
    header {
        background-color: #4a4a4a;
        color: blanchedalmond;
        text-align: center;
        padding: 25px 0;
        margin-bottom: 25px;
    }
    
    main {
        background-color: #e4e4e4;
        width: 600px;
        padding: 25px;
        border: solid 5px red;
    }
    body {
        margin: 0;
        font-size: 21px;
    }
    
    h1 {
        font-size: 48px;
        margin: 0;
    }
    
    h2 {
        font-size: 36px;
    }
    
    /*
    h1 - 48px
    h2 - 36px
    h3 - 28px
    all other text - 21px
    
    colors: 
       #588C94 
       #1D3C41
    */
    
    
    /*
    h1 - 48px
    h2 - 36px
    h3 - 28px
    all other text - 21px
    
    colors: 
       #588C94 
       #1D3C41
    */
    
    /* Global styles  */
    
    body {

Are you curious about web development but don't know where to start?

Would you like to be able to build your own websites?

Have you tried learning HTML and CSS, but found other courses too boring or difficult?

If your answer is YES to any of these questions, then this is the course for you!

Why is this course great?

This course features a one of YouTube's most popular instructors, Kevin Powell, along with Scrimba's unique and interactive code-learning experience. It's a magical combination that you won't find anywhere else. The lectures are built to both entertain and teach you, as we believe you learn faster if you aren't bored.

Why is it easier to learn here?

Unlike normal videos, Scrimba screencasts are interactive. This means that whenever you're confused, you can simply pause the screencasts and interact with the code yourself. This will help you sort out your confusions.

You'll also be given interactive challenges along the way, as this is critical for the knowledge to stick with you. Once you've tried solving the the challenge, your instructor Kevin will show you his solution. It's almost as if you're programming together with Kevin!

What you'll learn:

  • What is HTML and CSS?
  • Basic terminologi and syntax
  • HTML tags
  • File naming and project setup
  • Anchors and attributes
  • Lists and Images
  • Intro to CSS
  • Styling your page
  • Classes and Ids

So what are you waiting for? Claim your free spot today, and start your adventure as a web developer!

people love this course 😍

what you'll build 💪

Center the dinosaur

Dinosaurs are awesome, but so are centering things on the page. In this project, you'll learn about both.

Your first web page

A full web page with header, main content, footer, columns and more. It's a great start on your web development journey.

why you'll learn faster 🔥

Hi, I'm your teacher 👋

The course creator

Kevin Powell

Hi, I'm Kevin. I love to teach people how to make the web and how to make it look good while they're at it. Over 80.000 people follow my tutorials on YouTube, and I also work full-time at a college teaching web development.

Thank Kevin for the course

secure your free spot

100,000 people can't be wrong