Let's build your first webpage

HTML is the markup language that forms the backbone of the internet. In this course, you will learn how to build a clean, stunning webpage using HTML which you can set as your browser's default start page. This is only the first step in your journey, but it will form an important foundation in your journey as a new developer.

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is not a programming language. It is simply a way to describe the structure of your website. Your web browser reads the HTML document and displays it in the window.

Where does your website begin?

When someone enters your web address, the web standards will automatically look for a file called index.html and display it in your browser. Most people call this your home page.

Step 1: Hosting your webpage

It isn't enough to simply create a webpage on GitHub. You must deploy your webpage to a web host that is connected to the internet. For this course we will use GitHub Pages, but you could deploy a web page to a simple host, or as your web pages become more dynamic, you can use services like Heroku.

⌨️ Activity: Turn on GitHub Pages

1. Under your repository name, click Settings.
2. In the GitHub Pages section, use the Select source drop-down menu to select master as your GitHub Pages publishing source.
3. Click Save.

I may take up to a minute to respond as I wait for GitHub Pages to create a deployment of your repository.

For more information, see Configuring a publishing source for GitHub Pages in the GitHub Help.

Return to this issue for next steps

Step 9: Create a list

Your site with your new photo can be seen at: https://3swordman.github.io/intro-html/

Note: Sometimes it takes a few minutes for a GitHub Pages site to reload. If your changes still don't appear after a few minutes, you might try clearing the cache in your browser and refreshing the page.

Ordered and unordered lists

Lists are used all over the internet. They come in two flavors: ordered and unordered.

1. This
2. Is an
3. Ordered list

And...

• This
• Is an
• Unordered list

You can create a list using the <ol> tag for ordered lists, and the <ul> tag for unordered lists. Then, each item must be wrapped in an <li>, or list item, tag. Here's the code that generates the list I showed you above:

<ol>
    <li>This</li>
    <li>Is an</li>
    <li>Ordered list</li>
</ol>

And...

<ul>
    <li>This</li>
    <li>Is an</li>
    <li>Unordered list</li>
</ul>

For the next exercise, you are going to create a list of your favorite websites. Later, we will add links so you can access those links quickly. For now, focus on creating the individual list items.

⌨️ Activity: Create a list of your favorite sites

1. Edit the index.html file in your master branch by using this direct link or going to the Code tab, clicking on the index.html file, clicking the pencil 📝 to edit the HTML.
2. Inside the body tag, create a list, either ordered or unordered, of your favorite sites on the internet.
3. In the Commit changes section, enter a commit message that describes what you've done.
4. Ensure you've selected Create a new branch for this commit and start a pull request.
5. Give your branch a descriptive name, like add-links-and-lists.
6. Click on Commit changes.
7. Give your pull request a title, and a comment.
8. Click on Create pull request.

Look for my response in your new pull request

Step 6: Add a header

Take a peek at your shiny new web page! It can be found at: https://3swordman.github.io/intro-html/

Headers create prominent text in the body of your web page. Headers come in different levels. For example, a header 1, or h1, is the largest, while a header 3, or h3, is smaller, and a header 6, or h6, smaller still. You can create headers in html using the h1, h2, h3, h4, h5, and h6 tags. Here's an example:

<h1>I'm a header 1!</h1>

⌨️ Create a header for your web page

1. Edit the index.html file in your master branch by using this direct link or going to the Code tab, clicking on the index.html file, clicking the pencil 📝 to edit the HTML.
2. Between the body tags, add an opening <h1> tag, some content for the header, and a closing </h1> tag.
3. In the Commit changes section, enter a commit message that describes what you've done.
4. Ensure you've selected Create a new branch for this commit and start a pull request.
5. Give your branch a descriptive name, like add-headers-and-images.
6. Click on Propose file change.
7. Give your pull request a title, and a comment.
8. Click on Create pull request.

Look for my next response in your pull request