Want to learn HTML? Start here!

Jessica Chan

21 min readJan 8, 2018

Are you curious about learning to code, but don’t know where to start?

Get your feet wet and make your first basic website in HTML with this tutorial!

We’ll be going over 3 things:

what HTML is
some basic HTML syntax,
and how to make a local website on your computer.

Just a note, this post is geared toward complete beginners who have never worked with HTML before.

There won’t be any CSS or JavaScript involved, so keep in mind that this webpage we’ll be making won’t be all that pretty. It’s just focused on showing you HTML and its basic functionality.

Sounds good? Let’s get started!

What is HTML?

Now, what is HTML? HTML stands for HyperText Markup Language.

It’s a way of displaying information on web pages in your browser.

One thing to remember is that HTML isn’t itself a programming language. It’s a markup language. Programming languages like PHP or Java use things like logic and conditions to control the content.

HTML doesn’t do those things, but it’s still extremely important. It makes up every single website in existence, after all!

Load HTML straight from your computer

You can actually create an HTML file on your computer, and load it in your browser. It won’t be on the internet, so only your local computer can view it.

For real websites that anyone can access on the internet, the HTML files are stored on computers called servers. But the basic process is pretty similar.

To create your HTML file:

Go to your desktop or wherever you want to put the file.
Then right click and select “New” and “Text Document.” Make sure that the filename reads “index.html” and doesn’t end in “.txt.”
(If for some reason you can’t see the file extension, click on the “View” tab and make sure that the “File name extensions” checkbox is checked.)
When you have your file all set, you’ll want to open it in your browser.
If it has a Chrome or other browser icon on the left, that means you can double click to automatically open it. If it doesn’t, right-click and then select “Open with” and choose your favorite browser.
In the browser, everything will look blank, which is fine because the file doesn’t have anything in it yet.

Start writing HTML with a code editor

Now that you have your file set up, you’re ready to start coding!

To edit your HTML file you’ll want to open it in a code editor. Right click the file, and either select “Open with” and the editor, or some editors will have a quick link from the menu.

I’m using Visual Studio Code, but you can use other programs like:

Now that you have the index file open in both your browser and your editor, we’ll start writing some code!

HTML tags: the basic building blocks of a website

Let’s look at some of the basic features of HTML.

HTML is made up of tags.

Tags are special text that you use to mark up, or distinguish, parts of your web page. Hence the hypertext “markup” language.

These tags tell the browser to display whatever is inside the tag in a specific way.

Here’s one example of a tag in action:

This is my very first website and I’m <b>extremely excited!!!!!</b>

You can see that the words “extremely excited” are in these <b> tags– “b” is for bold.

Now let’s save the file, and reload your browser. The text should look like this:

All right! You just wrote some HTML. Feel excited yet? 🙂

Anatomy of an HTML tag

Let’s look at the tag again.

The tag before the phrase is called the opening tag — <b>

And the tag after the phrase is the closing tag — </b>. You can see that the closing tag has a forward slash before the “b.”

Together, these two tags tell the browser to make whatever text is between them bold. And that’s exactly what’s happened.

Now maybe this is obvious, but when the browser loads the HTML, the tags themselves are invisible– they don’t show up on the page.

Pretty cool, eh? One reason I love making websites so much is that it’s almost like magic, being able to make things appear in your browser.

Basic structure of an HTML document

Now, that line of text that we wrote is working because we saved the file as an HTML file that your browser can recognize.

But for real HTML on the internet, we need properly format the file. To do this we will add some more tags:

Doctype and HTML tags

The very first tag you need is the doctype tag. It’s not exactly an HTML tag, but it tells the browser that this is an HTML5 document.

Here’s what it looks like: <!DOCTYPE html>

This tag doesn’t require a closing tag because it’s not surrounding any text, it’s just declaring that this is HTML.

Other doctypes that were used in the past are HTML 4 or XHTML. But right now HTML 5 is really the only doctype used.

After the doctype, you have an HTML tag. This one tells the web browser that everything inside it is HTML:

<!DOCTYPE html> 
<html> </html>

I know, it seems a bit redundant since you already used the HTML doctype tag. But this tag ensures that everything inside it will inherit some necessary characteristics of HTML.

Head and Body sections

Inside the main HTML tag, your content will usually be separated into two sections: the Head and the Body.

Here’s what that will look like in the code:

<!DOCTYPE html> 
<html>    <head>    </head>    <body>    </body> </html>

The head tag contains information about the website and it’s also where you load CSS and JavaScript files. We won’t be covering those today, but just so you know.

The body tag is the main content in the web page. Everything that you see on the page will usually be in the body tag. So we need to move that sentence we made at the beginning into the body.

Here’s what that should look like:

<body> 
   This is my very first website and I'm <b>extremely excited!!!!!!</b> 
</body>

When you reload the page in your browser, everything should look exactly the same as before.

Now let’s go into some of the basic tags that are commonly used in the head and in the body.

I’m not going to go through every single possible tag in existence, because there are more than a hundred. And that would take forever.

We’ll just be looking at the ones used most often, so that you can get a better idea of how an HTML page is put together.

BASIC HEAD TAGS

Meta tags store important data

The first tag that should be in your head is this meta tag. This sets the character encoding.

<meta charset="utf-8">

UTF-8 is a type of Unicode encoding used in virtually all websites around the world. We need encoding because we need to translate the letters, numbers, and symbols that we use into bytes used by computers.

You can think of it as a sort of dictionary, translating human languages into computer-speak.

The next meta tag that should be on all websites is this viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

This one is important for responsive websites. Responsive means that the website can display properly on all devices– computers, tablets, and mobile phones.

The content in this tag is saying that it should make the width of the website the same width as whatever the device is that is viewing it.

For example, a mobile phone has a much smaller screen resolution, or size, as a laptop computer. This will let the website resize itself according to what the user is using.

The initial scale sets the zoom of the website. On browsers nowadays you can zoom in and out, making the website look bigger or smaller.

We want it to be set at 1 by default, meaning not zoomed in or out.

Title Tag

Aside from meta tags, one of the most important tags is the title tag:

<title>My First Website</title>

As you can probably guess, this sets the title of the web page. If a website has different pages, each page may have its own title.

Once you’ve added all these tags into your code, this what the head tag should look like:

<head> 
   <meta charset="utf-8"> 
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <title>My First Website</title> 
</head>

And you’ll see in your browser that the tab will have what you put in the title tag:

BASIC BODY TAGS

Let’s look at the fun stuff now– the body tags control the content that you actually get to see.

Most of the basic body tags are based on things you could do in Word documents. You can create headlines, bold text, make lists, and even tables.

In the days before CSS, using these tags helped to organize and stylize your content so that it would be more easily understood by your reader.

Not all of these tags are still used as much as they used to be. Some of them aren’t needed anymore because we can now use CSS to achieve the same style.

But I think it’s still helpful to at least know what these basic tags are.

Header Tags

Let’s look first at the headline or header tags, designated with the letter H. Each H tag also has a number after the H. They range from <h1> to <h6>.

The <h1> tag is the highest in priority. It’s generally used for the title of the page.

We’re going to add an <h1> tag to our web page. Inside the tag we will put the title of the webpage, My First Website.

We’ll also add a subtitle using the <h2> tag, with the content: “An HTML Playground.”

And just for kicks, let’s add in the rest of the H tags, up to <h6>.

So your body tag will look something like this:

<body> 
   <h1>My First Website</h1> 
   <h2>An HTML Playground</h2> 
   <h3>An HTML Playground</h3> 
   <h4>An HTML Playground</h4> 
   <h5>An HTML Playground</h5> 
   <h6>An HTML Playground</h6> 
</body>

If you save and reload your web page, it’ll look like this:

You can see how the font sizes get progressively smaller from <h1> to <h6>.

Most websites don’t use all the H tags. Usually they will use <h1> for the title, <h2> for subtitle, and <h3> sometimes for section titles. It’s pretty rare to use <h4> through <h6>.

Paragraph

The next tag we’re going to look at is the paragraph, or <p> tag. Just like in Word, you can use paragraphs to separate your content into blocks. You can create a paragraph by surrounding your content with the <p> tags.

We’re going to make a paragraph with some placeholder text.

One of the easiest ways to find placeholder text is to Google for “lorem ipsum.” This is one site that I use pretty often.

Lorem ipsum text is nonsense Latin words that are used in publishing and design to fill in text in order to work on the layout.

So we’ll copy this paragraph here and put it into our code, inside a <p> tag. Let’s make a second paragraph too. We’ll copy some more text and put it into a second <p> tag.

<p> 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis arcu vel mollis finibus. Nunc facilisis vel nisl lacinia cursus. Cras suscipit augue sed volutpat tincidunt. Aenean dictum tincidunt urna, quis eleifend quam mattis eu. Integer sollicitudin, nisl faucibus aliquam ullamcorper, metus sapien scelerisque lorem, at ornare dui orci non orci. Integer tempus consectetur metus, vitae blandit nibh aliquam nec. Pellentesque vestibulum arcu eget ante sollicitudin, id accumsan dui molestie. Suspendisse vehicula semper dui id congue. Suspendisse sed velit sit amet velit luctus varius. Ut condimentum tincidunt consequat. Sed eu ligula non magna scelerisque auctor. 
</p><p> 
   Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, sit amet semper tortor. Nunc rhoncus non arcu in scelerisque. Donec magna mauris, congue ac dignissim rutrum, tincidunt quis leo. Maecenas dictum orci in magna iaculis, in elementum felis viverra. Aenean sit amet sapien odio. Donec molestie est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt lorem et, facilisis enim. Praesent id felis sit amet quam dignissim volutpat. Nam nec cursus mi, quis tincidunt justo. 
</p>

In the browser, it will look like this:

And there we have it. The browser automatically adds some space between the paragraphs and other content:

Line Break

Now, if you want to separate your content onto multiple lines, but you don’t want that space that comes with a paragraph, you can use a line break, or a <br> tag.

Let’s get some more lorem ipsum text and put it into our editor.

Now one thing to note about HTML is that it won’t automatically break lines.

If you press enter a couple of times in your content, nothing different will happen on the page. The same goes for hitting spacebar a bunch of times.

The browser will just give one space and that’s it. In order to create a line break, You need to add a <br> tag.

You can even add multiple line breaks to add more space in your content.

Fusce sit amet rutrum lacus.
<br><br><br><br><br> 
Sed efficitur laoreet nisl,ac faucibus velit hendrerit sit amet. Phasellus ac orci eget nisi porta accumsan a eget ex. Nam lacinia dolor at mi tristique rhoncus.Maecenas nisl est, rhoncus id cursus non, tempor a neque.

Here’s what all those extra line breaks look like in the browser:

Void elements don’t require a closing tag

You’ll notice that there isn’t a closing <br> tag — it doesn’t need a closing tag because it isn’t used to surround text.

These types of tags that don’t have a closing tag are called void elements. Void meaning empty because they have no content.

One other note about this is that you might sometimes see the line break written as <br/> with the closing slash. This was a requirement for XHTML, but in HTML 5 it does not need a slash.

The browser will still read the tag correctly, but I’d still recommend writing void elements without that slash.

Style tags

The next set of tags we’re going to look at are style tags– these tags add styles to the text.

They can be bold, like we did in the very beginning, then there’s also italics, underline, emphasized and strong tags.

Like we said before, these style tags aren’t used as much because you can now use CSS to style everything.

Let’s go through each of the style tags:

The <b> tag makes text bold.
The <i> tag makes text italic.
The <u> tag makes text underlined.
The <em> (emphasized) tag is usually interpreted as italics in browsers.
And the <strong> tag will usually be bold text.

Here’s demo code for what each of those would look like:

<b>Sed efficitur laoreet nisl,</b><br> <i>ac faucibus velit hendrerit sit amet.</i><br> <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br><em>Nam lacinia dolor at mi tristique rhoncus.</em><br> <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

And here’s what that code would look like in the browser:

Horizontal Rule

The horizontal rule tag will create a horizontal line on your web page that goes all the way across.

You write it this way: <hr>

Like the line break tag, the horizontal rule is a void element, and just needs a single tag, without a closing tag.

<strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong> <hr> Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. Donec eget lacinia elit. Suspendisse commodo justo at lorem molestie, vitae tempus enim laoreet.

Content before the <hr> tag will be above the line, and content below it will be under the line like so:

Anchor Link

Links are one of the main ways that we get around the internet.

The link tag is written as an <a> tag. That A stands for “anchor,” because the link connects the two websites like a boat anchor connects the boat to whatever it’s anchoring to.

To create a link, first you put the <a> tag around the link text that you want to be clickable.

Aside from just the tag itself, the <a> tag requires an attribute, which means additional information inside the opening tag.

Anchor Link Attributes

The attribute it uses is the href attribute. This is is short for hypertext reference. And the value is the URL of the destination website.

For example, if you want to link to the Google homepage, you would use the URL, https://www.google.com/.

URL stands for Universal Resource Locator, and it acts as an address that will give you the location of the web page or file that you want to load.

Another often used attribute in the <a> tag is “target.” This controls if the link that you click will open in the same page, or open in a new page or tab in your browser.

By default it will open the link in the same page. If you want the link to open in a new page, set target to “_blank.”

Here’s a demo of an anchor link:

<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>

Images

The next thing we’ll look at is images. To put an image on your web page, you can use the image tag, written out as <img>.

The image tag is another void element that doesn’t require a closing tag.

Similar to the link tag, the image tag needs a URL. Instead of href like links use, the image tag has an attribute of src, meaning the “source” of the image.

Let’s find an image on the internet to use for this example– one really helpful place I go to for test images is https://placeholder.com/.

We’ll take the URL of an image from Placeholder.com and put it in the image source of the image we are creating:

<img src="https://via.placeholder.com/600x300.jpg">

Alternatively you can download the image itself and put it in the same folder as your index.html file, and reference it this way:

<img src="600x300.jpg">

One attribute that the <img> tag uses is border, which you can set to a number of pixels:

<img src="https://via.placeholder.com/600x300.jpg" border="10">

That would look like this:

Lists

The next thing we’re going to look at is lists. HTML can create bulleted or numbered lists pretty easily.

Bulleted lists are called unordered lists, as opposed to the ordered lists that use numbers.

To create a list you’ll use the list tag– either <ol> or <ul> depending on if you’re making an ordered or unordered list.

We’re going to make an unordered list, of different types of fruits.

We’ll make our <ul> tag for the list.

Inside the list tag you’ll put your list items. Each item will go inside its own list item tag, written as <li>.

We’ll add in apples, oranges, pineapples, mangoes, and dragonfruit:

<ul> 
   <li>apples</li> 
   <li>oranges</li> 
   <li>pineapples</li>   
   <li>mangoes</li> 
   <li>dragonfruit</li> 
</ul>

And here’s what that looks like.

Now, if we change our unordered list into an ordered list, using the <ol> tag, here’s what that would look like.

Nested lists

You can even nest lists inside one another!

Let’s say I want to add different types of apples under apples. We would create a new list tag inside the list item in question, with its own list items.

So within the apple <li> tag, I’ll add a new <ul> tag under the “apple” text.

Then we’ll put in some different types of apples– golden delicious, gala, granny smith.

<ul> 
   <li>apples 
      <ul> 
         <li>golden delicious</li> 
         <li>granny smith</li> 
         <li>gala</li> 
      </ul> 
   </li> 
   <li>oranges</li> 
   <li>pineapples</li> 
   <li>mangoes</li> 
   <li>dragonfruit</li> 
</ul>

When we reload our page, you can see that the nested list of apple types is indented even more than the main list.

Nesting and Indentation

This brings me to an important aspect of writing good HTML. If you put an HTML tag inside another one, that is called nesting.

Child and parent elements

An element inside another one is called a child element, and the outer element is called the parent element.

In order to organize parent and child elements, we indent the child element. This helps to distinguish it from the parent.

You can see with the list of fruits, I indented the main list items (apples, oranges, and mangoes). And then for the apple types I indented even more.

Indenting makes code readable for humans

This helps keep the code clean. You and other people can quickly understand what it’s doing.

If all the HTML elements weren’t indented at all, and were on the same level, things would look more confusing.

Just imagine having not just one element, but having lots and lots of different elements and tags, all nested in one another. It would take forever to parse out what the code is saying.

This practice of indenting is considered good practice not just for HTML, but for CSS, JavaScript, and basically programming language in existence.

It’s not necessary for the computers, but it is necessary for humans to read the code. At my first job, indenting was the first thing that I was taught during my training.

It’s pretty important. There’s nothing worse than having to work on someone else’s code and having it be a complete mess.

So indenting is an easy way to make sure that you’re writing code that other people (and yourself) can go back and read.

Tables

And speaking of indenting and nested elements, the last HTML tag that we’re going to go through uses a lot of that. It’s the table.

Tables were originally used as an efficient way to organize data into rows and columns. If you’ve used Excel, its columns and rows follow the same format.

To demonstrate, let’s make a table for a hypothetical monthly budget of a household.

Building the table

To start, we’ll first need a <table> tag. Everything else in the table will be inside this tag.

Inside the table we’ll have:

table rows,
table cells,
and table headers for the column headers.

Let’s add in the first table row, using the <tr> tag.

<table> 
   <tr></tr> 
</table>

Inside this row we’ll want to put the column headers. We can do this by using the <th> — table header — tags. By default the table headers are bold text and also centered within the cell.

Then we’ll just add in some budget categories here to build out this table.

We’ll start with the month, and then have rent, utilities, groceries, eating out, and entertainment. I’m sure there are other categories that I’m forgetting, but we’re just keeping it simple here.

<table> 
   <tr> 
      <th>Month</th> 
      <th>Rent</th> 
      <th>Utilities</th> 
      <th>Groceries</th> 
      <th>Eating Out</th> 
      <th>Entertainment</th> 
   </tr> 
</table>

Then in the next row, we’ll add some data for the month of August. Since these are not headers, we will use the <td> tag, for table data.

All right. Let’s say our rent each month is about, say $1500? Then we got $150 for utilities, $350 for groceries, $100 for eating out, and $50 for entertainment.

<table> 
   <tr> 
      <th>Month</th> 
      <th>Rent</th> 
      <th>Utilities</th> 
      <th>Groceries</th> 
      <th>Eating Out</th> 
      <th>Entertainment</th> 
   </tr>
   <tr> 
      <td>August</td> 
      <td>$1500</td> 
      <td>$150</td> 
      <td>$350</td> 
      <td>$100</td> 
      <td>$50</td> 
   </tr> 
</table>

Let’s see how this looks. And here’s our table:

Styling the table

It’s pretty basic looking, right? Well not to worry. We can style the table a little bit with some of the built-in table attributes.

First we can add lines to the table by setting the border attribute to the table tag. We’ll set the border to 1 pixel thickness. If you use a bigger number, the border around the table will get wider. However the borders between the table cells are by default always 1 pixel wide.

You can also use cellpadding, which controls the amount of extra space inside each cell, from the text to the border. So let’s try a cellpadding of 10. And that gives just a bit more breathing room so it doesn’t seem as cramped.

The other attribute you can change is cellspacing. This controls the amount of space between cells. Personally I like no space between the cells so we’ll keep it at 0.

<table border="1" cellpadding="10" cellspacing="0">

Here’s what the table looks like with those style attributes. Much better, right?

Best practices for tables

When you’re building an HTML table, one thing you need to make sure of is to have the same number of columns in every row in the table.

Otherwise things will get kinda messed up. I can show you what this looks like if I delete the Groceries cell.

(Note: the  tag I’m using below is an HTML comment tag. It will be invisible in the browser, but visible in the code itself. This allows you to make notes in your code.)

<table border="1" cellpadding="10" cellspacing="0"> 
   <tr> 
      <th></th>
      <th>Month</th>
      <th>Rent</th> 
      <th>Utilities</th> 
      <!-- Groceries removed--> 
      <th>Eating Out</th> 
      <th>Entertainment</th> 
   </tr> 
   <tr> 
      <td>August</td> 
      <td>$1500</td> 
      <td>$150</td> 
      <td>$350</td> 
      <td>$100</td> 
      <td>$50</td> 
   </tr> 
</table>

If you look at the table in the browser, you can see how the headers now have shifted over one and there’s a weird blank space at the end because there isn’t a table cell there.

So let’s put that back.

Table cells can span multiple columns/rows

However, you can make a table cell span multiple columns. Let’s say we wanted to break out the Utilities to have two types of data, one for water and one for electricity. So we’ll say the electricity is $100 and water is $50.

To do this we will actually create an extra cell in the data and adjust the amounts of the Utilities. We have electricity first for $100 and water second for $50.

<table border="1" cellpadding="10" cellspacing="0">
   <tr>
      <th>Month</th> 
      <th>Rent</th>  
      <th>Utilities</th> 
      <th>Groceries</th> 
      <th>Eating Out</th> 
      <th>Entertainment</th> 
   </tr> 
   <tr> 
      <td>August</td> 
      <td>$1500</td> 
      <td>$100</td><!-- $150 changed to $100--> 
      <td>$50</td><!-- extra cell added for $50 --> 
      <td>$350</td> 
      <td>$100</td> 
      <td>$50</td> 
   </tr> 
</table>

If we just load the table at this point you’ll see that it looks messed up again because of that extra cell in the second row. This next attribute will fix that.

Colspan attribute

We want the Utilities header cell to be above both the $100 and the $50 cell.

To do this, we will add an attribute called colspan, i.e. column span, to the Utilities header cell. And set it to 2.

<th colspan="2">Utilities</th>

This will make the Utilities cell span over 2 columns instead of just one. Looks very organized, doesn’t it?

You can see that the Utilities column now contains both the $100 and $50 cells.

Rowspan attribute

In addition to colspan you can also use the rowspan attribute to make a cell span multiple rows.

Let’s say we had data for June, July and August, and we wanted to designate them as “Fall.”

I’m just going to copy and paste again, and use the August data to create June and July data too.

To create the cell for Fall, I want it to be to the left of the months, starting with June.

So in the June row, I will create a new cell before June, and put “Fall” in it. Then I’ll set the rowspan of that cell to 3, so that it will span June, July and August.

And we need to add a spacer cell in the first row so that a total of 4 rows are spanned with that first column.

<table border="1" cellpadding="10" cellspacing="0">
    <tr>
        <th></th>
        <th>Month</th>
        <th>Rent</th>
        <th colspan="2">Utilities</th>
        <th>Groceries</th>
        <th>Eating Out</th>
        <th>Entertainment</th>
    </tr>
    <tr>
        <td rowspan="3">Fall</td>
        <td>June</td>
        <td>$1500</td>
        <td>$100</td>
        <td>$50</td>
        <td>$350</td>
        <td>$100</td>
        <td>$50</td>
    </tr>
    <tr>
        <td>July</td>
        <td>$1500</td>
        <td>$100</td>
        <td>$50</td>
        <td>$350</td>
        <td>$100</td>
        <td>$50</td>
    </tr>
    <tr>
        <td>August</td>
        <td>$1500</td>
        <td>$100</td>
        <td>$50</td>
        <td>$350</td>
        <td>$100</td>
        <td>$50</td>
    </tr>
</table>

Here’s what the final table looks like!

Tables were used for website layouts

A bit of historical context about tables. Aside from containing data, web developers also used to use tables to layout web designs.

So for example if you have a website design with a header, main content, and a footer, you can create one big table with three rows. And you can then put all your content in those table cells. Table cells can contain any kind of HTML– images, links, text, you name it.

It was very handy back in the day. Nowadays tables aren’t really used very often. The only common exception that I can think of is for HTML emails, because some older email systems can’t use a lot of CSS, so coding like it’s 1999 is unfortunately the only option.

Further resources to learn HTML

So there you have it– you’ve made a basic website in HTML.

If you’re interested in learning HTML and web development, I’d recommend using some of the following resources to get started:

Getting Started with HTML — Mozilla has a wealth of information about HTML, websites, and how the internet works. Great reference source.
freeCodeCamp — a free online coding bootcamp run by a non-profit. Many graduates have gone on to land full-time web development jobs.
Colt Steele’s Web Developer Bootcamp — complete front and back-end online bootcamp on Udemy, taught by a former coding bootcamp instructor.
Jon Duckett’s books — the go-to books for learning HTML, CSS, jQuery, and JavaScript if you’re just starting out. Beautifully designed and very informative.

Lastly, I also made a video version of this article, for those of you who prefer video:

If you enjoyed this post, please leave a comment below, or share it with your friends!

Are you interested in learning to code? I write about coding and productivity on my site, coder-coder.com.

Sign up here to get emails about new articles.