So you want to learn how to build your own website. Movies and tv shows make programming look way harder and more complex than it really is. This website will walk you step though step on how to build your first very basic but functional website. Now some things you're gonna need in order for you to build your website is a computer, a text editor, and some patience. Now for text editors, most systems have their own versions of them or you can download your own. Some examples of some are Sublime Text, Visual Studio Code, ...ect. So my advice would be to download one of these free text editors. It will make coding for you a lot easier. The next few sections of this website I'll be taking you through the HTML and CSS that will make up your page.

HTML Layout

So I'm going to be taking you through the steps on how to build a website by only using HTML and CSS. Both are very easy to learn as long as you practice as much as you can. First I'll walk you through HTML and how I structured it and work my way through the CSS part. HTML stands for Hyper Text Markup Language. HTML Is made up these things called tags. Tags are key words nested in the less than(<) and greater than(>) signs along with a less than sign with a forwatd slash(</) and a greater than (>). So the point of the forward slash is to close off the tags. Now the basic tags you'll need to know are <!DOCTYPE>,<html>, <head>,<title>, <body>,<header>,<nav>,<main>,<h1>,<p>, and <footer> tags. The example below will show an example of a basic html layout.

HTML Layout

When you save your file. Save it as "Index.html " saving it with ".html " will allow you to open the file onto your browser. The doctype tag will tell the browser it's and html file.


The title tag in the head element is meant to tell the browser the name of the page. So whatever name you put in the title element the tab of the browser Should change to that.

Title html

Headers and List Items

This is the main content of the page. Here you should be writting the details of what ever your website is about. In this website I've divided it up into three seperate parts. One is the header section. which has the Name of the page along with the navigation. to do that In html the tags that were used were <header> </header>, in between those two tags I wrote the <h1>, <nav> and </nav>. Inside the nav tags I then used the unorderd list tags( <ul> </ul>) and inside those tags I used the li tags( <li> </li>). The h1 tags are the header texts. It labels the content in that section of the page. The ul are the unordered lists. It makes a list. The li tags are the list items in the ul tags. So so far the header section should look something like this.

Html with h1 and ul elements

Now go to your file "Index.html and double click it. Your browser should show something like this.

Website with header and ul elements

In your h1 tags you can write what ever you'd like. For your first header you should write "Hello World!" It's tradition in programing to write Hello World as your first out in any programming language. But that's all up to you. The ul tags will be used to make a navigation later on in this tutorial.

Main Content

Now since we talked about our h1 tags now we can start using our p tags to start making paragraphs. Under your header you should have the main content of your page. Your main content should be nested in between your main tag(< main> </main>). You should write your main tags, then in between your main tags write an h1 tag, under your main tag you should write your p tags(< p > </p >). In your p tags you should be writing your main content.

P tag h1 html

Your page should look like this if you save your work and refresh the browser.

Webpage with p tags

Learn More HTML!

There are so many resources out there to learn and expand your knowlege of html. Some websites you can get a broader and more indepth knowlege in HTML and other languages are Treehouse.com , Codeacademy.com, W3schools.com, and Youtube.com! Next Lesson In this website is going to be on basic CSS.