Do you have web hosting, a text editor, and an FTP client?

In the first lesson, "Make a Website", we covered all the tools you need to get started. If you've got a text editor, an FTP client, and web hosting - you're ready to start with this lesson!

Learn HTML in 45 minutes!

This lesson is going to teach you the fundamentals of HTML (HyperText Markup Language), which is the building block for all future lessons.

Think of HTML like a blueprint for where the pragraphs, headings, and other sections of a website go.

HTML is really ugly, and in future lessons I'll be teaching you about CSS (Cascading Style Scheets) which you can use to make it pretty. But for now, let's keep things simple.

At the end of Lesson 0 - Make a Website you created you first page in HTML and uploaded it to your server. Because it was called index.html, your server makes it the default page when someone visits your domain (or if you put it in a subfolder, that directory). Here's the code you used:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My First Website</title>
  </head>
  <body>
    <h1>My First Website :)</h1>
    <p>Hello world! This is my first website.</p>
  </body>
</html>

As a review, I want you to make a new file and call it about.html and upload it to your server. Change the <title>, the main heading <h1> and the paragraph <p> to something about you. Did you notice that <title>My First Website</title> did not appear on the page when you loaded it? That's because it's a special piece of code that tells the browser what to put in tab (and Search engines what to put in your listing), but it doesn't appear on the page itself. It's best to keep title tags under 60 characters

Psssst! Here's the secret ingredient to your successful coding career:

There's a website called Stack Overflow where you can ask questions to a community of programmers and web developers. The site has been around for years, which is great because most questions you have are already answered there!

In Google "stackoverflow.com YOUR QUESTION HERE" (without quotes) to find what you are looking for


Now that you know about Stack Overflow, try to find out "how to make text bold in HTML". Seriously, Google it, and make your paragraph bold.

You are not going to learn to code unless you spend a lot of time searching for answers to your questions and actually typing things out into your code, saving it, and loading it in a browser.

***

I hope you didn't cheat!

So the tag for italic text is <i>. Make a new paragraph that is italic, and then try to make one that is bold and italic.

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>My First Website</title>
 </head>
 <body>
  <h1>My First Website :)</h1>
  <p>Hello world! This is my first website.</p>
  <p><b>This paragraph is bold</b></p>
  <p><i>This paragraph is italic<i></p>
  <p><b><i>This paragraph is bold and italic...</i></b></p>
  <p><em><strong>... and so is this one!</strong></em></p>
 </body>
</html>

Note: you can also type <em>instead of <i> (em is for emphasis) and <strong>instead of <b>.

Now, try to find out how to make an "ordered list" in html. I know it's kind of weird getting you to Google things, but I promise you this is 10x better than just telling you the answer. You'll get in the habit of searching for things and will learn MUCH faster.

***

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>My First Website</title>
 </head>
 <body>
  <h1>My First Website :)</h1>
  <ol>
   <li>List item one</li>
   <li>List item two</li>
   <li>List item three</li>
  </ol>
 </body>
</html>

Load this page in your browser and see what the list looks like. Can you guess the code for an unordered list? Try it :)

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>My First Website</title>
 </head>
 <body>
  <h1>My First Website :)</h1>
  <ul>
   <li>List item one</li>
   <li>List item two</li>
   <li>List item three</li>
  </ul>
 </body>
</html>

All these things you have been typing in are called elements and they are contained within tags. So, <p>Hello world! This is my first website.</p> is a "paragraph element" and the <p> and </p> are the paragraph tags.

An "attribute" modifies an HTML element. So in the <html lang="en"> element, the language attribute is "English". This code tells the browser that the page is in English.

So you've had some practice adding HTML elements to a page, so let's explore some of the other code on the page.

Excercise 1:

  1. Load up your index.html or about.html page on your phone (if you can)
  2. Then, add in a <meta name="viewport" content="width=device-width, initial-scale=1"> element to your header
  3. Refresh the page, and look at the difference. This tag tells the browser to make the page responsive on mobile devices

Excercise 2:

  1. Create a new page, lesson1a.html, and do as much as you can from memory!

You're cooking with gas now! Now I'm going to teach you how to link your content together, using the anchor element.

<a href="http://www.example.com/about.html">Link to your about page</a>

<a href="/about.html">Link to your about page</a>

The first example is called an absolute link, and it tells the browser the exact URL to go to. This is necessary when pointing to an external domain, like google.com. The second example is called a relative link. Everything before the / is taken from the current page. So "/test.html" will take you to https://www.populearn.com/test.html.

Generally, I prefer to use relative URLs for internal links... which is great if you ever change your URL structure (or if you switch from http to https).

Excercise 3:

  1. Make a new folder on your server called about
  2. Create a new index.html there, from memory :)
  3. Create a link on your "root" index.html (the main one in your default directory) to the index.html file in your about folder. Hint: you can link to "/about/index.html" or just "/about/"

That's it for today! Keep making files and linking to eachother until you really understand all of the elements you have learned so far.

Get new lessons delivered right to your inbox! No spam, I promise.

* indicates required