If you are looking for a quick and fun introduction to the exciting world of programming, this course is for you. Learn fundamental HTML skills and build your first webpage in less than an hour.
Tags: GitHub Pages
If you are an aspiring developer, creating a simple webpage is a great way to take your first steps into the exciting world of programming. The first skill you should learn is HTML.
HTML is the markup language that forms the backbone of the internet. In this course, you will build a clean, stunning webpage using HTML. As you build your page, we will show you how you can use GitHub Pages to host your website free of charge. Your new HTML skills will form an important foundation in your journey as a new developer.
We'll answer common questions like:
- What is HTML?
- What are tags & headers?
- How do you add lists, images, and links to your HTML page?
- What is a Pull Request?
- How do you use GitHub Pages?
And when you're done you'll be able to:
- Make a simple HTML website
- Use foundational HTML concepts, like tags, headers, lists, images, and links
- Introduce changes with Pull Requests
- Deploy a web page to GitHub pages
- Completed source repository
- Live web page deployed to GitHub Pages.
None. This course is a great introduction to HTML.
This makes use of the following open source projects. Consider exploring these repos and maybe even making contributions!
- Jekyll: a simple, blog-aware, static site generator.
New developers, new GitHub users, students, managers, teams
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.
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.
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.
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 publish the HTML to any static host.
- Under your repository name, click [Settings]({{ repoUrl }}/settings).
- In the GitHub Pages section, use the Select source drop-down menu to select
main
as your GitHub Pages publishing source. - Return to this issue.
I may take up to a minute to respond as I wait for GitHub Pages to create a deployment of your repository. If you don't see anything after a minute, refresh this page.
For more information, see Configuring a publishing source for GitHub Pages in the GitHub Help.
GitHub Pages is now serving your web page at: {{ pagesUrl }}
It's not very special looking yet, is it? Web hosts (and GitHub Pages) look for a file titled index.html
and serve that up. Since there's no index.html
file in our repository, GitHub Pages displays the contents of the README by default. Let's change this by adding the index.html
file to our repository.
To help you get started, I have already created an index.html
file for you on a branch called: add-index
. All you need to do is create the pull request. Don't worry, I'll help you!
- Create a pull request. You can either [use this direct link]({{ repoUrl }}/compare/main...add-index?expand=1), or go to the Code tab, click on New Pull Request, select base: main, and compare: add-index.
- Add a descriptive title to your pull request, something like "Add the index.html file".
- Add a descriptive body to your pull request.
- Click Create pull request.
Great job opening a pull request @{{ user.username }}! I've gone ahead and closed your [previous issue]({{ welcomeLink }}).
This pull request contains some content, but it doesn't have any of the HTML structure that tells a browser how to structure the content. All pages created with HTML must contain tags that identify it as such. The tags look like this:
<html>
<body>
The HTML content goes here.
</body>
</html>
You may notice two copies of the HTML tag, and two copies of the body tag. We call these the opening and closing tags. Let's look at the same code, but include a little explanation.
<html>
is the opening HTML tag<body>
is the opening body tag</body>
is the closing body tag</html>
is the closing HTML tag
In HTML, spacing doesn't really matter. We've added some tabs to make the code easier to see, but the web browser will ignore the extra spacing. Now that you understand the building blocks of HTML, let's add HTML to the index.html
file in your project.
Apply this suggested change, or follow the instructions below if you'd like to type out the code manually.
<html>
<body>
Hello there, awesome person!
</body>
</html>
- Click on Files Changed to see the newly added
index.html
file. - Click on the ellipsis (...) and select Edit file.
- Before the existing content, add an opening
<html>
tag, and an opening<body>
tag. - After the existing content, add a closing
</body>
tag, and a closing</html>
tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Commit directly to the
add-index
branch. - Click on Commit changes.
Uh oh, I didn't detect <html>
and <body>
tags. Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the tags:
<html>
,<body>
,</body>
, and</html>
. - Check the order of your tags. The opening
<html>
tag should appear first, followed by the opening<body>
tag, then the content, the closing<body>
tag, and the closing<html>
tag. - Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Click on Files Changed to see the newly added
index.html
file. - Click on the ellipsis (...) and select Edit file.
- Before the existing content, add an opening
<html>
tag, and an opeining<body>
tag. - After the existing content, add a closing
</body>
tag, and a closing</html>
tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Commit directly to the
add-index
branch. - Click on Commit changes.
Your web page is beginning to take shape! HTML and body tags are important, but their effect isn't too visible. Next, we'll make a visible change, by giving your page a title. Your page's title will show up on the title bar in your web browser, or as the title of any tabs you've got open. The title is used in all sorts of other places!
The title tag looks like this:
<title>I am a title!</title>
But the title tag must be inside of a head tag. By now, you've noticed that tags have a hierarchical structure. In our prior example, the html
tag was the parent of the body
tag. In a similar fashion, the head
tag will be the parent of the title
tag, like so:
<head>
<title>I am a title!</title>
</head>
Finally, the head
and title
tags, will be children of the html
tag, but siblings of the body
tag.
<html>
<head>
<title>I am a title!</title>
</head>
<body>
Some content.
</body>
</html>
Apply this suggested change, or follow the instructions below if you'd like to type out the code manually.
<head>
<title>My awesome web page</title>
</head>
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Place an opening
<head>
tag and an opening<title>
tag after the first openinghtml
tag, but before thebody
tag. - Write out a title after the opening
title
tag. - Place a closing
</title>
tag and a closing</head>
tag after your new title, but before thebody
tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Commit directly to the
add-index
branch. - Click on Commit changes.
I didn't detect opening and closing head
and title
tags. Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the tags:
<head>
,<title>
,</title>
, and</head>
. - Check the order of your tags. The opening
<head>
tag should appear first, followed by the opening<title>
tag, then the title itself, the closing</title>
tag, and the closing</head>
tag. - Make sure you placed the head and title tags after the
<html>
tag, but before the<body>
tag. - Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Place an opening
<head>
tag and an opening<title>
tag after the first opening HTML tag, but before the body tag. - Write out a title after the opening title tag.
- Place a closing
</title>
tag and a closing</head>
tag after your new title, but before the body tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Commit directly to the
add-index
branch. - Click on Commit changes.
🎉 Everything's going so well @{{ user.username }}! Now that you've got all the bits for a proper HTML page, let's merge it in and see how the browser interprets it.
- Click on Merge pull request below.
- Click on Confirm merge.
- Click on Delete branch.
Take a peek at your shiny new web page! It can be found at: {{ pagesUrl }}
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>
- Edit the
index.html
file in your main branch by [using this direct link]({{ repoUrl }}/edit/main/index.html) or going to the Code tab, clicking on theindex.html
file, clicking the pencil 📝 to edit the HTML. - Between the body tags, add an opening
<h1>
tag, some content for the header, and a closing</h1>
tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Create a new branch for this commit and start a pull request.
- Give your branch a descriptive name, like
add-headers-and-images
. - Click on Propose file change.
- Give your pull request a title, and a comment.
- Click on Create pull request.
Great! I've opened a [new issue]({{ issueURL }}) for you.
Go to the next issue here.
I didn't detect an <h1>
tag. Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the h1 tag:
<h1>
- Check the order of your tags. The opening
<h1>
tag should appear first, followed by your content, and then the closing</h1>
tag. - Make sure you placed the header inside the
<body>
tags. - Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Click on the Code tab.
- Click on the
index.html
file. - Click the pencil 📝 to edit the HTML.
- Inside the body tag, add an opening
<h1>
tag, some content for the header, and a closing</h1>
tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Create a new branch for this commit and start a pull request.
- Give your branch a descriptive name, like
add-headers-and-images
. - Click on Commit changes.
- Give your pull request a title, and a comment.
- Click on Create pull request.
Fantastico! Headers will help you highlight segments of your web page.
So far, we've used tags that stand on their own. However, we sometimes need to specify an attribute, which is information that the tag needs to do its work. For example, to display an image, we need an <img>
tag, but we also need a source attribute so the browser knows the location of the image. We can add an attribute as follows:
<img src="https://octodex.github.com/images/vinyltocat.png">
You'll also notice that the image tag doesn't need to close since it is considered to be an empty tag.
Follow the instructions below to add an image. You can use your GitHub avatar image (suggested below) or link to your image of choice.
<img src="{{ user.avatarUrl }}">
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Place an opening
<img>
tag between the body tags. Reminder: you don't need to close an<img>
tag! - Set the
src
attribute to the image you would like to display. You can use your GitHub profile picture:{{ user.avatarUrl }}
- In the Commit changes section, enter a commit message that describes what you've done.
- Click on Commit changes.
I didn't find the image! Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the image,
<img>
, tag with a source attribute:<img src="
{{ user.avatarUrl }}">
- Make sure you placed the image tag inside the body tags.
- Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Place an opening
<img>
tag inside the body tag. - Set the
src
attribute to your GitHub profile picture:{{ user.avatarUrl }}
- In the Commit changes section, enter a commit message that describes what you've done.
- Click on Commit changes.
What a spiffy photo, @{{ user.username }}!
You can now merge in your pull request. Don't forget to delete your branch!
- Click on Merge pull request below.
- Click on Confirm merge.
- Click on Delete branch.
Your site with your new photo can be seen at: {{ pagesUrl }}
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.
Lists are used all over the internet. They come in two flavors: ordered and unordered.
- This
- Is an
- 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.
- Edit the
index.html
file in your main branch by [using this direct link]({{ repoUrl }}/edit/main/index.html) or going to the Code tab, clicking on theindex.html
file, clicking the pencil 📝 to edit the HTML. - Inside the body tag, create a list, either ordered or unordered, of your favorite sites on the internet.
- In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Create a new branch for this commit and start a pull request.
- Give your branch a descriptive name, like
add-links-and-lists
. - Click on Commit changes.
- Give your pull request a title, and a comment.
- Click on Create pull request.
Great! I've opened a [new issue]({{ issueURL }}) for you.
Go to the next issue here.
Uh oh, I didn't detect a list! Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the tags:
<ul>
or<ol>
,<li>
, and</ul>
or</ol>
. - Check the order of your tags. The opening
<ul>
or<ol>
tag should appear first, followed<li>
and</li>
tags, and then</ul>
or</ol>
. - Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Edit the
index.html
file in your main branch by [using this direct link](https://github.com/{{ user.username }}/{{ repo }}/edit/main/index.html) or going to the Code tab, clicking on theindex.html
file, clicking the pencil 📝 to edit the HTML. - Inside the body tag, create a list, either ordered or unordered, of your favorite sites on the interwebs.
- In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Create a new branch for this commit and start a pull request.
- Give your branch a descriptive name, like
add-links-and-lists
. - Click on Commit changes.
- Give your pull request a title, and a comment.
- Click on Create pull request.
Uh oh, I didn't detect a list! Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the tags:
<ul>
or<ol>
,<li>
, and</ul>
or</ol>
. - Check the order of your tags. The opening
<ul>
or<ol>
tag should appear first, followed<li>
and</li>
tags, and then</ul>
or</ol>
. - Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Edit the
index.html
file in your main branch by [using this direct link](https://github.com/{{ user.username }}/{{ repo }}/edit/main/index.html) or going to the Code tab, clicking on theindex.html
file, clicking the pencil 📝 to edit the HTML. - Inside the body tag, create a list, either ordered or unordered, of your favorite sites on the interwebs.
- In the Commit changes section, enter a commit message that describes what you've done.
- Ensure you've selected Create a new branch for this commit and start a pull request.
- Give your branch a descriptive name, like
add-links-and-lists
. - Click on Commit changes.
- Give your pull request a title, and a comment.
- Click on Create pull request.
✅ Check ✅ That ✅ Off your list!
Great job with lists. Let's try adding some links, shall we?
Hyperlinks allow people to navigate through pages on the web. Links are achieved with the anchor tag, <a>
, and have two major components: the location they link to, and the content that should be linked. The location of the link is specified as a href
attribute, and the content that should be linked can be specified between the opening and closing tags, like this:
{% if GHE_HOST %}
https://pages.{{ GHE_HOST }}/{{ user.login }}/{{ repo }}
<li><a href="https://{{ GHE_HOST }}">This is a link to GitHub!</a></li>
{% else %}
<li><a href="https://github.com">This is a link to GitHub!</a></li>
{% endif %}
Apply this suggested change, or follow the instructions below if you'd like to type out the code manually. Please note that the suggested change may not be in the proper place for your list, so make sure it is inside of a set of <ol>
or <ul>
tags.
<li>My favorite site is <a href="https://github.com">GitHub</a>!</li>
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- In the list you just created, add a link to each of your favorite sites to their respective URLs. You can do this by adding an opening anchor tag
<a>
tag withhref
attribute with your favorite site's URL, the name of the site inside the anchor tag, and a closing anchor</a>
tag. Here is an example of a list item with a link:
{% if GHE_HOST %}
<li><a href="https://{{ GHE_HOST }}">This is a link to GitHub!</a></li>
{% else %}
<li><a href="https://github.com">This is a link to GitHub!</a></li>
{% endif %}
- In the Commit changes section, enter a commit message that describes what you've done.
- Click on Commit changes.
Uh oh, I didn't find any links! Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the tags:
<a href="SOME-SITE>
and</a>
. - Check the order of your tags. The opening anchor tag with an
href
attribute, some content, and a closing anchor tag.d - Ensure you modified the
index.html
file, and not some other file.
Let's try again!
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Link each of your favorite sites to their respective URLs. You can do this by adding an opening anchor tag
<a>
tag withhref
attribute with your favorite site's URL, the name of the site inside the anchor tag, and a closing anchor</a>
tag. - In the Commit changes section, enter a commit message that describes what you've done.
- Click on Commit changes.
- Give your pull request a title, and a comment.
- Click on Create pull request.
Those links are looking great, @{{ user.username }}.
Go ahead and merge this pull request. Don't forget to delete your branch!
- Click on Merge pull request below.
- Click on Confirm merge.
- Click on Delete branch.
You may be wondering why your page hasn't looked exactly the same as the sample I showed in the beginning. That's because HTML gives your webpage structure, but the simple tags you have learned so far don't tell the web browser how you want each page element to appear.
The appearance of each page element is defined through styles and is the subject of another course. For now, I have added [a stylesheet]({{ repoUrl }}/blob/add-style/style.css) for you.
For your webpage to use your new stylesheet, you just need to link it within the <head>
of your index.html
file. If you include the following link in your index.html
file, your webpage will begin using the css file to make your website look awesome!
<link rel="stylesheet" href="style.css">
As an example, your index.html
file might look like this:
<head>
<title>I am a title!</title>
<link rel="stylesheet" href="style.css">
</head>
- Edit the
index.html
file in theadd-style
branch by [using this direct link]({{ repoUrl }}/edit/add-style/index.html) or going to the Code tab, selecting theadd-style
branch, clicking on theindex.html
file, and clicking the pencil 📝 to edit. - Between the
<head>
tags, add the following<link rel="stylesheet" href="style.css">
. - In the Commit changes section, enter a commit message that describes what you've done.
- Click on Commit changes.
Great! I've opened a [new issue]({{ issueURL }}) for you.
Go to the next issue here.
Uh oh, I didn't find the tag inside the ! Here are some troubleshooting steps:
- Check your spelling. We're checking specifically for the following:
<link rel="stylesheet" href="style.css">
. - This must be after the opening
<head>
tag, and before the closing</head>
tag.
Let's try again!
- Click on Files Changed.
- Click on the ellipsis (...) and select Edit file.
- Add the link tag inside the
<head>
section of the index:<link rel="stylesheet" href="style.css">
- In the Commit changes section, enter a commit message that describes what you've done.
- Click on Commit changes.
Your styles look great, @{{ user.username }}.
Go ahead and merge this pull request so we can all see the final result. Don't forget to delete your branch!
- Click on Merge pull request below.
- Click on Confirm merge.
- Click on Delete branch.
Well done @{{ user.username }}, here is the finished result: {{ pagesUrl }}
You've learned the basics of HTML, and used it to build a simple webpage.
Though this works, there's still more you can do to make sure you're up to date with standard conventions, like using an HTML validator.
{% if GHE_HOST %}
{% else %} {% endif %}If you'd like, you can make your fancy new page the default start page for your web browser. Just follow the links below for more information: