Learn how to make your own website! This is the first in a series of FREE tutorials on web development, helping you to get started with learning HTML and other relevant web technologies. You will l
This tutorial series is completely FREE, so follow along and learn how to make your own website! Learning web technologies is also a great for beginners because there are virtually no tools required, just a text editor and a browser to get something simple up and running.
Benefits Of Learning To Make Your Own Website
1. Work on something you are passionate about
2. It’s a hugely rewarding experience
3. Build an online business and start generating income
4. One of the best ways for beginners to learn to code!
Making your own website does not have to be complicated. In fact, there are many software tools that can help you design and publish your own website without any programming experience at all.
However, such tools often have limitations or require at least a basic understanding of the relevant technologies in order to customise your website and get the functionality you need. So it really pays off to learn at least the basics of web programming.
Whether you plan to create a website from scratch or use one of the many tools available to help you, or best of all, a combination of the two, this tutorial should provide you with a good introduction to web programming! And allow you to make informed choices about which web technologies to use.
This tutorial is loosely based on the “Creating Websites With HTML and CSS” course that I teach to my private one-to-one students and has helped many get the introduction they need to start building their online business. So let’s begin!
A Quick Note On Terminology
Technology is full of new and sometimes confusing terms and it’s important to get up-to-speed on the buzzwords and what they actually mean. This will make learning much easier if you are clear on what these terms mean.
To add further confusion, sometimes buzzwords are defined using other buzzwords! Sometimes there are even multiple buzzwords that mean the same thing and are interchangeable!
I will introduce new terminology inline in this tutorial, with a full definition at the end of each module. If there is anything unclear, feel free to use the comment section below to ask any questions.
Really, What is a Browser?
Let’s start with the basics, after all this tutorial series is aimed at complete beginners. If you feel you know the basics, feel free to jump on ahead!
You are looking at this website through a browser, probably using Internet Explorer, Chrome, Safari or Firefox.
But what exactly is a browser? A browser is a computer program that understands how to request web pages, images and other content stored (hosted) on a server (a computer connected to the Internet) and display them for you to consume. The web pages, images and other files are collectively known as resources. A browser is software that has been developed by teams of programmers and takes many man hours to create and maintain.
This website is hosted on a server in the EU. When you navigate to a web address either by typing it directly into the search bar or clicking on a link, the browser will discover what server to go to in order to get the files it needs, fetch them and display them for you.
Levels Of Abstraction
Exactly how a browser gets your web page is fairly complex and should not concern you at this stage. All we need to understand is the high-level concept of what is happening in generic terms. In fact, this principle applies to many concepts concerning software. We don’t care how certain things work, just the results, leaving those concerns to other programmers! This confuses a lot of beginners because the more they learn, the more questions seem to come up. The key to this is to start with the big picture, understand that first and then drill-down into the lower level details if they are of particular interest to us. This is often referred to in software as levels of abstraction.
The main point to grasp right now, is that each page on the web has a unique web address. The file for that web page is held on a server somewhere. When we ask the browser to get that page for us, we are making a request to see that page. The browser goes away gets the file it needs and shows us the result. A website is simply a collection of such web pages. Pretty simple right? It is once you get your head around it.
For example, the web address of this page (or its Uniform Resource Locator or URL) is:
What Language Do We Need To Learn?
When the browser gets a web page (also called a document) it needs to be able to understand what the data that it holds means, so that it can process it properly and display it correctly for you.
How is this achieved? It is achieved by having a standard document type that all browsers can understand. The creator of the website codes the document, adhering to that standard, uploads it to a web server and the magic of the web does the rest – the browser can get the document and show it on the screen!
What is this standard? It is called HTML – Hypertext Markup Language. A language that all browsers understand. A language that we need to learn in order to code up websites!
Think of it like Word in Microsoft Office, it knows how to display word documents which have the file extension .docx. So too, a browser knows how to process web documents written in HTML and with the file extension .html. Moreover while Word loads files from your computer, a browser loads files held on a remote computer.
So in order to learn how to make your own website, you need to learn HTML!
New Terminology You Learnt In This Module!
A computer program for displaying HTML documents, used to navigate the web.
Resources are web pages, images and other files.
A store for a website on a server, so that it can be accessed over the Internet.
A computer which manages access to a resource on the Internet.
The location on the Internet of a certain resource. Also known as a Uniform Resource Locator or URL for short.
Whenever your browser fetches a resource from a web server, it does so using HTTP – that’s “Hypertext Transfer Protocol”. HTTP is a request/response protocol, which means your browser sends a request for the resource it needs. Note how the URL begins with http!
Hypertext Markup Language, a standardised language for creating World Wide Web pages.
A collection of web pages.
A document written in HTML language – like this page you are reading.
Levels of Abstraction
The complexity by which a system is viewed or programmed. The higher levels have less detail. The lower levels have more complexity and detail. Always start high and work down to the level you need to in order to get the job done.
Internet or Web?
People often use Internet and Web interchangeably.
However, they actually mean slightly different things! The Internet is a massive collection of globally connected computers. Any computer can communicate with any other as long as they are both connected to the Internet. Computers connected to the Internet talk to each other using protocols.
The Web (also called World Wide Web) is a way of accessing information over the Internet. In this sense, it is the information-sharing part of the Internet.
The Web uses the HTTP protocol, only one of the protocols of the Internet. The Web uses browsers to access web pages.
Getting Thrown In The Deep End
That may have felt like an assault on your brain! If you made it this far then well done! It may take time for all of these concepts to sink in but they will with practice and perseverance. It is important to build a strong foundation from the ground up to become a good coder. However, once the big picture clicks in your mind, the rest becomes easy! That’s the secret to coding.
That is the end of the “Introduction” module in the “How To Make Your Own Website” free tutorial. We covered what a browser is, how it works on a high-level and some key terminology. We also learnt why we need to learn HTML and the benefits of learning HTML. Over the coming weeks I will be publishing several more modules so you can continue learning how to make your own website!