CSS HOW TO HTML SOFTWARE

How to create a website using HTML and CSS

how-to-build-a-simple-website-with-html-css
Written by encodedBicoding

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.

Read this to get started.

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.

In the 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.

how-to-build-a-website-with-html-css

Image: Plain simple website – HTML only

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.

Read this for more information on doctype

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 titletag
    • Styling your website – Using linktag or the style tag
  • 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.

– h1,h2,h3,h4,h5,h6

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

About the author

encodedBicoding

Software Engineer || Tech Enthusiast.
Ex @andela
Github: https://github.com/encodedBicoding
Geek Name: EncodedBicoding
Real Name: Dominic Isioma Olije

1 Comment

Leave a Comment