How to Code a Website From Scratch for Beginners - Owlcation - Education
Updated date:

How to Code a Website From Scratch for Beginners

I have five years of experience coding websites using the HTML and CSS coding languages.

Fear not if you have no prior experience using these coding languages. This is a beginner's guide, so everything will be presented for a novice to understand. All you will need is a text-editing software, most of which come standard on operating systems like Windows. You will also need a web browser so that you can see how your code looks after the coding process is complete.

Setting up the Framing Code of Your Website

To get started, first you will need to open up your text-editing software. Then, place the HTML code below in the text editor. The reason for this is because this code is the frame of your website that the rest of the codes will be held within.

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

What Does This Framing Code Mean?

Now I will explain what these codes do as they are rather important. The <!DOCTYPE html> code tells the browser what type of code is contained in the website. It also tells the browser where the HTML code begins while the </html> tag tells the browser where the HTML code ends. Take note of the forward slash mark that is just before the code. This is very important in web coding because it basically tells the browser that this is where the code ends.

Let's review the <head></head> code. Keep in mind that this code will not show up visually in the browser. Its purpose is to contain pieces of code like <title></title>. Whatever text you place between these two title codes will be the text that is displayed in the tab at the very top of the website. The head code is also for containing style sheets, but that is more advanced so that will be for another article. It is important to remember that the head code must always come after the start of the <!DOCTYPE html> code and must be before the <body> tag.

Finally, let's discuss the <body></body> tag. This is the code that will contain your websites main content that will display in the browser. For example, when you want a image to display in the browser, you will place the <img src=""> image tag in between the two body tags like this: <body><img src=""></body>. Now you know how to place a code between the body tags that will display in the browser.

The Coding Designing Process

Now that you have your frame for your code let's start adding elements to the page. For this example, I will start by giving a title to the page by placing a name in between the title tags. Take note that whatever text is in between these two tags <title>your text here</title> will be the text that displays in the top tab of the browser.

Next, I will add some text to the page using the code <p>here's some text</p> by placing this code somewhere between the two body tags. The <p> tag basically tells the browser that the content between these two tags should be displayed by the browser as regular text. So take a look at the code example below to see how these bits of code should look once they are added.

You don't have to pursue software engineering to be interested in coding. Coding is useful for disciplined, abstract thinking, and it turns your computer into a real power tool!

You don't have to pursue software engineering to be interested in coding. Coding is useful for disciplined, abstract thinking, and it turns your computer into a real power tool!

<!DOCTYPE html>
<html>
<head>
	<title>Your Text Here</title>
</head>
<body>
 <p>Here's some text.</p>
</body>
</html>

Here's What This Code Looks Like in a Browser

how-to-code-a-website-from-scratch-for-beginners

Adding Color to the Text

The text above is what that code looks like when it is ran in a browser, and yes, it does look rather primitive. Keep in mind that this is just the start, and we can make this look a lot better with some extra elements. So, first let us change the text color by adding the style code to the <p> tag.

It'll look like this: <p style="">. Then in between these two quote marks we will place what is called CSS code. To change the text color to red lets add this <p style="color: red;">. That's it. Now, let's take a look at what this looks like in code view below.

<!DOCTYPE html>
<html>
<head>
	<title>your text here</title>
</head>
<body>
 <p style="color: red;">Here's some text.</p>
</body>
</html>

Here's What It Looks Like in a Browser

how-to-code-a-website-from-scratch-for-beginners

Pretty cool right? Remember that you can make that text whatever color you want to. For starters, you could replace the text in the CSS code such as red with the word blue. Now I will add a new element to the page. I will call this one title.

This code is for adding titles to a page. Titles are normally at the top of the page. This is a title tag <h1></h1>, but this is not the only one as there are six title tags, and each one displays titles as different sized text. In the example below I will show you all six of the title tags in raw code format.

<h1>Here's h1</h1>
<h2>Here's h2</h2>
<h3>Here's h3</h3>
<h4>Here's h4</h4>
<h5>Here's h5</h5>
<h6>Here's h6</h6>

Here's How These Codes Display in the Browser

how-to-code-a-website-from-scratch-for-beginners

From this example you can now see that the title tag <h1> produces the largest text size, whereas the tag <h6> produces the smallest text size. An easy way to remember this is that the larger the number of the title code, the smaller the text will be.

Though it is important to remember that the title code does not go beyond six, so this is something to remember if you utilize this tag it only goes from 1 to 6. Now let's add a title to our website in progress by using the <h1> tag so that you can see how this will look in code format.

<!DOCTYPE html>
<html>
<head>
	<title>Your Text Here</title>
</head>
<body>
	<h1>Here's a Title Using the "h1" Tag</h1>
 <p style="color: red;">Here's some text using the "p" tag.</p>
</body>
</html>

This Is What It Looks Like in the Browser

how-to-code-a-website-from-scratch-for-beginners

Viewing Your Code in a Web Browser

Now I will explain how you can view your code in your web browser. Some of you may already know how to do this, but I will write this assuming you are completely new to the process.

  1. First, you need to have a text editor or notepad software opened up. Place your code in this editor.
  2. Next, click save, or save as, and navigate to wherever on your computer you would like to save your website code.
  3. While the pop-up is on your screen asking you where to save the file you should have an option for naming the file. This is very important.
  4. You need to name this file with an ending file name like "website.html" (without the quotation marks) so that the browser will recognize that the file contains website code, which is HTML code in this case.
  5. Once you have saved the file with the file name ending in ".html" you can now open this file in your browser.
  6. If done correctly your website should display in your browser, allowing you to see the results of your hard work.

There you have it. You have developed your very first basic website coded from HTML and CSS. Obviously it may not look like much, but this is the best way to start learning how to code. Now your task is to master these simpler codes before moving up to more complex ones.

Now that you know the basics it's time for you to venture off and explore more of the wonderful magic that the coding world has to offer!

Now that you know the basics it's time for you to venture off and explore more of the wonderful magic that the coding world has to offer!

What Comes Next?

As for what comes next is practice, once you've memorized and fully understood how to utilize these tags. I would recommend learning more complex codes and work your way up from there just like I did when I first started learning how to code. This about wraps up this tutorial, I hope you've enjoyed learning more about coding, and leave a comment if you want to share your thoughts.

Thanks for reading.

© 2018 Dalton Overlin

Related Articles