How to Code a Website From Scratch for Beginners

Updated on November 13, 2018
DaltonOverlin profile image

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

Source

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! | Source
<!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

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

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

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

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! | Source

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

Share Your Thoughts

Submit a Comment

No comments yet.

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, owlcation.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://owlcation.com/privacy-policy#gdpr

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)