So You Want To Make A Website

by

Over the course of my career as a website developer, I have had many people interested in wanting to learn the basics of making a website. I always advise them to getting to learn two basic entry-level skills necessary to understand and build the foundation of any website – HTML and CSS.

The world of website development is both exciting and fast paced, however in this fast-paced industry, one thing remains true and tested – two skills every aspiring website developer should know – a basic understanding of both HTML and CSS.

This easy guide serves as a basic introduction to getting you started with learning the basics. It serves to point you in the right direction to making your own basic website using both HTML and CSS.

What is HTML?

HTML is a 23 year old (at the time of writing) scripting language developed in 1993 by Tim Berners-Lee. It stands for HyperText Markup Language and is the standard markup language used to create web pages all across the internet.

What is CSS?

Cascading Style Sheets is a 19 year old style sheet language released in 1996. It is widely-used for describing the presentation of a document written in a markup language such as HTML.

Step 1: understanding The fundamentals

Being able to make a basic website doesn’t require fancy tools or software – in fact, everything you need to create a fancy website is already on your computer.

All you need is a text-editor (such as Notepad) and a web browser (such as Microsoft Edge or Google Chrome) – that’s it!

Scripting (or coding, if you wish) your website is done in your text-editor (saved as a .html file) and previewed in your web browser.

Step 2: Learning the Basics

All HTML follows a basic structure – a skeleton if you will. This is pretty much standard across every website that exists; a <head> and a <body> – all enclosed within <html> tags.

<!DOCTYPE html>

 <html>
 <head>
 <title>Page Title</title>
 </head>

 <body>
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
 </html>

The basic structure above serves as a basis for every website you’ve ever visited. Copy it, manipulate it and try it out for yourself. Just be sure to call your file index.html

It should display something like this in your web browser:

An example of a basic HTML document
An example of a basic HTML document

Fortunately HTML is an extremely easy scripting language to understand and use. It works on the principles of wrapping what you want to display in a starting tag and a closing tag. ie, <body> </body>,  <title>  </title> – just remember this rule of thumb; whatever is opened, must be closed.

STEP 3: Introducing CSS (Cascading style sheets)

Learning CSS is a necessity when it comes to styling and changing the look of your website. CSS has the ability to pretty much change everything you see while still keeping itself separate as the code itself looks quite different from HTML.

Below is a basic CSS example of how we could manipulate the look of the HTML above:

body {
 background-color: #d0e4fe;
}

h1 {
 color: orange;
 text-align: center;
}

p {
 font-family: "Times New Roman";
 font-size: 20px;
}

You will see that with CSS, you can reference a HTML tag and give it a few properties to manipulate such as the font colour or it’s alignment.

CSS has a long list of predefined properties that would require you to look up and play with. But once you get the hang of it, the knowledge of these properties will come naturally.

STEP 4: GETTING COMFORTABLE WITH HTML & CSS

HTML and CSS naturally play together quite nicely. You can include them in one single .html file or separate them keeping the CSS code separate in a .css document and just referencing it. This is referred to as an internal stylesheet and external stylesheet respectively.

Here is an example of a more complete HTML document (using the code of both the examples above) with the CSS included internally:

<!DOCTYPE html>

 <html>
 <head>
 <title>Page Title</title>
 
 <style>
body {
 background-color: #d0e4fe;
}

h1 {
 color: orange;
 text-align: center;
}

p {
 font-family: "Times New Roman";
 font-size: 20px;
}
</style>

 </head>

 <body>
<h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
</body>
 </html>

The above code should output something like this:

An example of a basic HTML + CSS document
An example of a basic HTML + CSS document

Once again, this is another reminder of just how basic the above example is. You would naturally need to manipulate the content and the CSS to make it just the way you would like it.

Essential Further Reading

I have only covered a ridiculously tiny fragment of website development, but hopefully the above article did at least one of three things; 1) give you a basic understanding of what HTML and CSS is, 2) Intrigue or interest you enough to actually want to learn more or 3) Point you in the right direction for further intermediate HTML and CSS learning.

Below are some valuable learning resources to get you quickly started into learning and finding out more about the wonderful world of creating websites with HTML and CSS:

 

Leave a comment