Web Building Lessons

What is the internet?

The internet is a network of computers which spans the entire world. The internet is a decentralized network – in other words, every computer connected to it is treated the same. There are no special internet servers which control the whole internet, but some servers have a special role which we will discuss in later…

Read More

How do web browsers work?

When you navigate to a website, your browser makes a request to the server that hosts the website. Depending on what is contained in that request the server sends back different content in the response. This request/response cycle is the basis of all websites. Use the buttons below to navigate through the lesson You can…

Read More

What is HTTP?

So far we have learned that when we navigate the internet, browsers make requests to a web server and the servers send back a response. Today we are going to learn how these requests and responses are transmitted. Have you noticed that web addresses (also called URLs) often begin with “http://” or “https://”? Use the…

Read More

Web Server Responses

We have learned that web servers respond to our requests by sending back various types of data. HTML One of the most important types of data returned by web servers is called HTML. Use the buttons below to navigate through the lesson HTML stands for HyperText Markup Language. We can think of HTML as the…

Read More

Introduction to HTML

In this lesson we learn about one of the main types of data websites send to our computers over the internet: HTML. If you haven’t completed the first part of our Website Design course “What is the internet” make sure you read those first to get a good understanding of how websites are sent to…

Read More

Viewing Website HTML in our browsers

In this lesson we learn how to view HTML using the free Developer Tools in our browser. Before we begin building our own websites let’s look at the HTML that websites are already sending us. Doing this helps us to ‘demystify’ HTML and to realise that websites aren’t magic – we can understand them and…

Read More

Creating our first HTML document

In this lesson we will walk through creating an empty HTML document and learn about HTML document structure and some simple HTML tags. Use the buttons below to navigate through the lesson   First, create a place to put our simple website on your computer. Right-click your desktop and select New -> Folder, like this:…

Read More

Understanding Basic HTML

In this lesson we’ll learn about some of the simplest HTML tags and how they function. So far we have a very simple index.html: <!DOCTYPE html> <html> <head> <title>FOTC First Website</title> </head> <body> This is our first FOTC web page. </body> </html> Let’s look in more detail at this HTML. Use the buttons below to…

Read More

Adding Text to our HTML page

In this lesson we’ll learn about some HTML tags that help us structure text in our web pages. If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we…

Read More

Adding Links and Images in HTML

In this lesson we’ll learn some HTML tags that allow us to add links and images to our web pages. If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser…

Read More

How to add navigation to a simple HTML page

In this lesson we’ll add navigation between our two simple HTML web pages. If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we can make changes to it…

Read More

Class, ID and < div > and < span > in HTML

In this lesson we’ll learn about class and ID attributes, and two tags that are useful for structuring our HTML.  If you haven’t followed the lessons up to now then you should start from the beginning of the course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser…

Read More

How are complex HTML websites created?

In this lesson we’ll understand how more complex modern websites are created. Now we have created our first website, with two basic pages and a navigation bar that lets us move between them. We understand how to add images, and how to structure our HTML documents. And the importance of keeping our HTML neat and…

Read More

What Is CSS?

This is the third part of a series in which we learn how to make websites. If you haven’t completed Part Two then you should do that first. In Part Two we made a very simple website consisting of a couple of HTML files on our own computers – you’ll need that website to continue,…

Read More

Understanding CSS Selectors

We have seen that CSS is a list of rules that tell our browser how to display the HTML, and we have looked at how rules are formed. Let’s look in more detail now at selectors. In this lesson we learn about one of the main parts of a CSS rule: CSS selectors. Use the…

Read More

Using Simple CSS Styles for text

In this lesson we learn some styles we can apply with CSS to make text on our websites more visually attractive. Let’s make some changes to the CSS in our sample website so we can learn some new CSS styles. Use the buttons below to navigate through the lesson (If you don’t have a sample…

Read More

Padding, Border and Margin in CSS

In this lesson we learn about three of the most important CSS styles for positioning on our web pages: Padding, Border and Margin.In the last lesson we first learned about ‘padding’ and saw how it adds extra space to the inside of a HTML element. Let’s look at this now in more detail. This may…

Read More

Loading External CSS Files using the tag

In this lesson we will learn how to separate our CSS into separate files and load it using the <link> tag. So far we have been putting CSS straight into our HTML files using the <style> tag. However, we have seen that this has many disadvantages. If we have many pages on our site we…

Read More

More advanced CSS

In this lesson we will learn some more CSS styles we can use to develop the look of our pages. By now we’re used to applying styles, and we have our own separate CSS file to add them to. I hope you’re beginning to have ideas of how you could make your personal webpages look…

Read More

What is Web Hosting

In this lesson we will learn what is meant by the term ‘web hosting’, and we will understand more deeply how web servers create the responses to the requests from our browser. Web Hosting is the name commonly given to the service which makes our websites available over the internet. Use the buttons below to…

Read More

How to Choose a Web Host

In this lesson we will look at the considerations that go into choosing the correct web host for our needs. Now you understand what web hosting is, you may be wondering how to choose a web host. Use the buttons below to navigate through the lesson If you search for web hosting you will see…

Read More

DNS and Domain Names

In this lesson we will look at understanding the DNS “Domain Name System” and how web addresses work on the internet. Have you ever wondered how your computer knows how to find the correct web server when you type in a web address? Use the buttons below to navigate through the lesson When you type…

Read More