WebCodeFun

Beginner's HTML Course

Introduction to the HTML beginner's course and installing a code editor

Hello everyone, and welcome to the Web Code Fun beginner’s course in HTML. In this set of 7 bite-size tutorials, we will build our first web page using HTML. Not only are you going to learn the beginner’s basics of HTML, but you will also gain access to my super-secret tomato sauce for pizzas because we’re going to build a web page that tells people how to make the sauce.

In this tutorial we will briefly introduce the course and install a free code editor to use - Visual Studio Code.

YouTube Video

Written Guide

Contents

Our first web page project

We’re going to use headings, paragraphs, lists, hyperlinks, tables and an image to show how to make the pizza sauce. Of course, by doing this, we’ll also be building our first web page!

It isn’t going to be pretty and it looks quite simple. That is because we will not be applying any styling to it yet. We will do that in the beginner’s CSS tutorial series. Using CSS, we will transform this web page into a thing of beauty.

But first things first, in this beginner’s HTML tutorial series, we will create the fundamental structure of a web page.

All resources at webcodefun.com

All of the resources needed to make the web page are available on this website – www.webcodefun.com. On the website, you can access the image and text that we use to save you time. You can follow along with a written guide too. The code will be there in each section so that you can study it in more detail or check any errors you may have made.

Every tutorial from me at Web Code Fun comes as a video and a written guide. Having both helps cover all your learning needs and means that you should never get stuck and unable to continue.

If you do have any issues, though, please do get in touch, either within the YouTube comments or by contacting me.

Install code editor

Before we dive in and begin writing our first lines of code, we just need one piece of free software to start. If you already have a code editor, then you can skip to part 2 of the series. If not, let’s quickly install Visual Studio Code.

From Microsoft, Visual Studio Code is free, works on PC, Mac and Linux, and is a fantastic code editor used by millions of web developers. You can download it at https://code.visualstudio.com. Simply choose your version and install it.

Course overview

As I mentioned in the introduction, I have broken the course down into seven different sections. Next up in Part 2, we will learn the basics of HTML markup and write our first heading and paragraphs.

In Part 3, we will introduce the head element and add metadata. After that, we will add an image to the web page and take a deeper look at attributes.

In Part 5, we will add a table for our ingredients, and then in Part 6, we will create ordered and unordered lists. Finally, in Part 7, we will introduce hyperlinks to the page and create a contents section.

These seven sections will give us a great start in understanding HTML and enable us to move on to the next important part of building websites: styling the page.

Useful resources

Need help?

That gives us a quick overview of the course, and we now have a code editor to develop our websites. Next, we can move on to Part 2 and start learning to build websites, writing our first lines of HTML markup code. If anything is unclear, please do get in touch by contacting me. Thanks for reading.

Back to top