Site Structure
Lesson 1 of 1
  1. 1
    What are HTML and CSS?
    All websites use HTML and CSS. After learning both of these languages, you will be ready to build your own website! * HTML stands for Hyper Text Markup Language. It is used to give websites stru…
    Start
  2. 2
    Anatomy of an HTML Element
    Let’s explore the basic anatomy of an HTML element. Line 9 of index.html contains a heading element: You’re Building a Website! 1. All HTML elements begin with an opening tag. In this…
    Start
  3. 3
    Add a Heading
    Now, let’s learn more about the heading element. Headings are a frequently used HTML element. You can think of them like headlines in a newspaper. Your eyes may notice headings first because the …
    Start
  4. 4
    Add a Paragraph
    The webpage now has a heading and a tagline. Next, we will add a description of the company. The HTML paragraph element, p, is used to hold one or more sentences, just like paragraphs in an ess…
    Start
  5. 5
    Anchor Elements
    Nice work! The webpage is starting to come together. What if you wanted to link users to a different webpage? The HTML anchor element makes it possible to do this with a single click. Click …
    Start
  6. 6
    A Closer Look
    Good job! Creating links with the anchor element is a fundamental web development skill. The diagram to the right illustrates the different parts of the anchor element syntax. In the diagram, not…
    Start
  7. 7
    Adding Images
    To add images to a webpage, use the HTML image element: Just like websites have URLs, images on the web also have URLs. Image URLs typically end with the .jpg or .png file extension. The s…
    Start
  8. 8
    Add a Video
    Awesome! The photo makes the webpage much cooler. What’s cooler than a photo? A video! The HTML video element can add video to a webpage. The video element uses a number of attribut…
    Start
  9. 9
    Create an Unordered List
    Impressive! With just five page elements, you’ve already created an interesting website! Another essential HTML element is the unordered list. Items in an unordered list are referred to as _list…
    Start
  10. 10
    Parent and Child Elements
    With the video and unordered list elements, you may have noticed something interesting: these HTML elements had other HTML elements nested inside of them. For example, in unordered lists, li el…
    Start
  11. 11
    Add a Div
    Now that we know about HTML element nesting and parent/child relationships, let’s see another way these concepts are applied on a real-life webpage. Div elements divide your page by enclosing…
    Start
  12. 12
    Metadata: The Brains
    The last HTML elements we will explore are involved in metadata processes. You can think of these elements as the “brains” of a webpage because they communicate vital information to the web brows…
    Start
  13. 13
    HTML Review
    Congratulations! You’ve learned enough HTML to create a great website! Before we move on to styling with CSS, let’s review what we learned in this lesson. #### Languages * html: stands for…
    Start

What you'll create

Portfolio projects that showcase your new skills

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory