This post is a breakdown from a series I made some months back, it is aimed at teaching you all you need to know about how to create a website using HTML and CSS. Read the series
An Introduction to HTML and CSS
Before we dive any deeper, you (if you are a beginner) need to know what HTML and CSS stand for. Many interviewers would love to prick your brain by asking you the full meaning of these terms.
HTML – Hypertext Markup Language.
CSS – Cascading Style Sheet.
Now that we have that out the way, let us begin our journey into the promised land of web design and development sponsored by HTML and CSS, let us learn how to build a simple website with HTML and CSS!
Speaking lightly, a human is made up of a skeletal system, covered by some pretty skin right? we all know that skeletons can be ugly and frightening.
The skeleton of the web is HTML, and the pretty skin covering it is CSS.
Setting up your machine
If you are still relatively new to HTML and CSS, there are a few things you need to do before you start coding.
Types of Coding Editors
There are many more Coding(Text) Editors, but I personally use VSCode and Webstorm.
I personally love to create a folder first in a chosen directory, name it appropriately and open it directly from my text editor. I was actually taught this way.
Create a new folder in your chosen directory, name it
simple_website. Open up the text editor of your choice and open the folder you have created.
In your text editor, create a file and name it
index.html. Please note that HTML files end with a .html extension, while CSS files end with a .css extension.
index.html file you created, type in the following code! DO NOT COPY AND PASTE.
Working With Live Server
Live-server ensures your work auto-refreshes each time you make a change in your code. It gives you a localhost server and a port to work on. It’s pretty cool to use.
If you are coding with Webstorm IDE, follow this link to set up Live server for Webstorm
Vscode live server setup is pretty straight-forward. Follow this link to use Live server in VSCode
It is even more straight-forward in Brackets, just click on the Thunder sign on the top right corner of your screen.
If you did everything correctly, you should see a website like this opened in your browser.
Now, you have successfully created your first website!.
Now, this is plain HTML, remember that joke I made about ugly skeletons? well, this is what I was talking about. But before we talk about styling this page, let me explain the code we have written so far.
On the first line, we wrote
<!DOCTYPE html> . Now, our code will still work if we leave out this code, but it is best practice to write this. This is telling the browser what type of content the file contains. In this case, the document content type is HTML.
Next, we wrote the main HTML tag. This tag will house all other tags in our project. Note that this tag is very important.
Each webpage has a head section and a body section.
What is the HTML head section/tag used for?
The HTML tag is used to hold every single element in the head section.
The head section can be used for housing tags/elements that are responsible for:
- Holding metadata – Data about your site, SEO Optimization.
- Naming your website – Using the
- Styling your website – Using
linktag or the
- I will write a post to explain the use of HTML meta tags in an upcoming post.
Note: Any tag/element your put in the HEAD section will not display on the webpage directly.
What is the HTML body section/tag used for?
The body section holds all tags/elements that will display on the web browser. For instance, the h1 tag we used to display ‘Hello Simple Website’.
Types of Header(h) tags.
before we continue, Edit the tag we used to display ‘Hello Simple Website’, change the h1 tag to h2, h3 till h6.
Ensure u change both opening and closing tags.
<h1>Hello Simple Website</h1> becomes <h2>Hello Simple Website</h2>
Opening tags start with
Closing tags start with
There are many tags/elements in HTML, and I can’t pretend to know all of them. But I will teach you all the tags you need to know to have a working website.
Thank you for reading this post on how to create a website using HTML and CSS.
Look out for my next post. How to link HTML with CSS