How to Code a Website from Scratch! 5 Simple Steps

What are the different types of programming languages?

Programming languages for websites fall into two major categories, namely Frontend and backend. The language use for program a webpage for the Frontend are HTML, CSS, and JavaScript.

Frontend Languages include

HyperText Markup Language (HTML) – This language is used to format web pages and organize elements on a web page. It is made up of opening and closing tags that each has a specific task. For example, the title tag is used to write the web page’s title in the address bar.
Cascading Style Sheets (CSS) – As the name suggests, CSS is used to style web pages. For example, you can use CSS to define the website font, font size, colors, etc. CSS can be written in one file and reused over and over on numerous elements on a webpage.
JavaScript (JS) – JavaScript is used to make websites more interactive. Let us say you have created a button, and you want it to display a message when it is clicked. You can use JavaScript to write that functionality.

Backend languages

The backend can be coded in any language that supports web development. You can use JavaScript on the server-side using NodeJS, Python, Ruby, or PHP. One of the most commonly used program for web site development is PHP. In this guide, we will focus on PHP as the scripting language.

PHP:

PHP stands for Hypertext Preprocessor. Unlike frontend technologies which execute in the web browser, PHP is executed on the webserver. It is commonly used to perform activities such as register users, authenticate users, send emails, etc.

How to Code a Website – Complete Beginner’s Guide

In this comprehensive guide, we will teach you how to make a website from scratch and write all the code yourself, or you can use an existing platform such as WordPress or Joomla, etc.

We will cover the following topics in this complete guide.

Creating from scratch Vs. using a Content Management System
Creating a website from scratch using a framework (PHP MVC Framework)
Creating a website using a Content Management System (WordPress)

The basic concept of HTML

An HTML document is a text file that contains HTML tags and elements and usually ends with a .html file extension.

HTML can also be embedded in other scripting language file extensions such as *.php, *.jsp or *.asp.

Web browsers parse HTML documents to display Web pages. You can view the HTML that makes up the webpage in the web browser.

Here, are steps helps you create a website:

Step 1) Right-click on the web page to display the pop-up menu.

Step 2) Select View page source.

Step 3) The HTML code will be displayed in plain text, and you can see the HTML tags and elements that make up the page.

You may also see some CSS and JavaScript either embedded or included as separate external files.

The function of the web browser is to translate the HTML document into a human-readable format. The browser also processes the JavaScript that is included within the web page.

Understand HTML Document Structure

Suppose you have created a word document before. In that case, understanding the structure of an HTML document will be quite easy for you. In a word document, you will have the document title, clickable table of contents, the content sections formatted differently, and the footer. An HTML document’s structure is more or less the same as the word document that we just described.

All HTML documents are enclosed in the HTML tag. Within the HTML tag, you will have other tags such as head and body. The header tag contains other tags, such as the title for displaying the page title. It also includes links to external files for CSS styles, JavaScript, and metadata. The body tag contains the elements that make up the webpage. The elements within the body tag can be div, tables, lists, etc.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>How to create a website for beginners</title>
    <meta name="description" content="My First Webpage created using HTML, CSS, JavaScript, and PHP">
    <meta name="author" content="Guru99">
    <link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<body>
    <h3>Welcome to my first webpage</h3>
</body>
</html>

Explanation:

<!doctype html> defines the document type which is HTML
<html lang=”en”>… </html> defines the HTML tag with a language attribute which specifies the website language.
In this simple example, the website language is English. Within the open and closing HTML tag, we will have tags such as head and body, which in turn enclose other tags and elements.
<head>… </head> defines the head tag that contains metadata within it.
<body>…</body> defines the body which contains the content of the website.

Get to Know CSS Selectors

CSS Selectors select elements on the webpage that you want to format based on the defined CSS rules.

CSS Selectors are categorized into five major categories, namely:

Simple selectors: These selectorsare used to select elements based on attributes such as id, name, or class.
CSS Combinator: Just like the name suggests, this type of selector selects an element based on a combination of related elements. For example, you can use this method to select only paragraph elements that are within div elements.
CSS Pseudo-classes: These selectors work based on the state of an element. For example, hover over a hyperlink. You can change its background color to show the user where they are currently pointed. So when the user moves the mouse away from the hyperlink, the formatting is automatically removed.
CSS Pseudo-elements: This selector is used to select specific parts from an element. For example, you can use a pseudo-element selector to enlarge the first letter of the first word in each paragraph and leave the other letters untouched.
CSS Attribute: This selector works based on the attributes applied to the elements or specific attribute values.For example, you can use a CSS attribute selector to format all HTML buttons to the green background color that contains the attribute value “submit.”This will apply a green background color to the buttons that have the attribute value set to submit.

Put Together a CSS Stylesheet

This section will create a simple CSS style document that performs simple styling by defining the following styling rules.

Center text based on a class center: This rule will center the text and change the text color to red.
Format text based on element id: We will create a styling rule for the id title that will change the color to orange, make the font-weight bold and change the text case to uppercase.
Format text based on heading element number 2: This rule will set the text color of a heading to blue and set the font size of 60 pixels.

The following code defines a CSS document with the above rules.

.center {
    text-align: center;
    color: red;
}
#title {
    color: orange;
    text-transform: uppercase;
    font-weight: bold;
}
h2 {
    font-size: 60px;
    color: blue;
}

Explains:

.center {…} – defines a class rule center that aligns the text on the center and changes the font color.
#title {…} – defines a title rule that changes the font color, transforms all the letters to upper case, and changes the font-weight to bold.
h2 {…} – defines rules that will apply to all h3 elements. The font size will be set to 60 pixels, and the font color will be updated to blue.

Download/Install Bootstrap

Bootstrap is a CSS framework that comes with a good number of styles that you can start using right away. It contains styles for layouts and formatting elements.

You can write your CSS styles that customize the default settings of the bootstrap CSS framework. For that, you can either download Bootstrap directly from the official website, or you can include it in your HTML document from the content delivery network (CDN).

Alternatively, you can use a package management tool such as Node Package Manager (NPM) to install Bootstrap, but this is for advanced web developers. To download Bootstrap, you can click this link here and use it in your project just like any other CSS and JavaScript file.

We will learn how to use it in the section below when we look at creating your first web page.

The role of HTML and CSS

The role of HTML is to provide structure to WebPages. Web browsers use this structure to display presentable content to the users. Secondly, search engine spiders use HTML structure to navigate the webpage and index it.

The role of CSS is to provide styling to the content so that it is visually appealing to the users.

Understanding Common HTML Terms

Let us now look at some of the common HTML terms you should be familiar with as a web developer.

S/N	Term	Description
1	Element	Elements are keywords that are used to define specific structures and content of the web page. For example, the element H3 is used to define a heading structure. Other examples of elements include paragraphs (p), anchors (a), and containers (div), etc.
2	Tag	Tags are labels that mark the beginning and end of an element. Tags include element keywords in angle brackets. For example, <p>Paragraph</p> is a paragraph tag where <p> is the opening tag and </p> is the closing tag.
3	Attribute	Attributes are properties of elements that provide supplementary information. For example, we can use the id attribute to give a unique name to an element. The id can be used in CSS or JavaScript.
4	Hyperlink	A hyperlink is a clickable link that opens a new webpage. You can create it by using the anchor element.
5	Head	The head tag contains information hidden from the user but useful to the web browser and search engines.
6	Body	The body tag contains information that is visible to the user in the web browser.
7	Footer	The footer tag contains information that is displayed in the footer section of the webpage.
8	Comment	Comments are used to document and explain the HTML code, and they are ignored by the browser when parsing the HTML document.
9	Div	Div is a container element that is used to create layouts.
10	Heading	The heading tag is used to create HTML headings.
11	Line Break	This element is used to create a new line break.
12	Links	Links are used to including other files such as external CSS files in the HTML documents.
13	Metadata	The metadata tag provides supplementary information about the web page that is most useful to search engine bots.
14	List	The list tag is used to create a list. The list can either be ordered or unordered.
15	Paragraph	The paragraph element is used to display text data in paragraph format
16	Table	This element is used to create a table
17	Title	Just like the title suggests, it is used to set the title of the web page.
18	Form	The form tag is used to create forms that we can use to get input from the users.
19	Script	The script tag links to an external JavaScript or inline JavaScript code within the HTML document.
20	AJAX	AJAX stands for Asynchronous JavaScript and XML. It is a technology used to update certain parts of the web page without reloading the entire page.

Understanding Common CSS Terms

The following are some of the common CSS terms that you must be familiar with.

S/N	Term	Description
1	Selector	This refers to the CSS responsible for selecting the HTML document elements that we wish to format.
2	Properties	Properties refer to the attribute of the element that we wish to set a value for.
3	Values	Just like the name suggests, we assign the value to the property for styling purposes.
4	Comment	Comments are used to document and explain the CSS code
5	Rule Set	Refers to a complete section of CSS code made up of the selector, declaration bracket, properties, and respective values.
6	Declaration	This refers to a single line of code within the CSS document
7	Declaration Block	This refers to the section of the CSS that defines the styling rules. It is enclosed between the curly brackets.
8	Keyword	This is a reserved word that has a special meaning in CSS. For example, the word auto has a special meaning, therefore, is a keyword
9	Attribute Selector	The selector selects an element based on the attribute value.
10	Universal Selector	This selector is used to match any elements within the given context. The context is usually applied on a parent element like a list so that all items within the list can inherit the styling from the parent
11	Id Selector	This selector makes a selection based on the id of the element.
12	Class Selector	This selector makes a selection based on the class attribute value or values.
13	Element Type Selector	This selector is based on the type of element used in the HTML document.

HTML Editors

HTML editor is a program that is used to write and edit HTML code. You can use any text editor to write HTML code, but HTML editors come with many built-in features that make it easy to write code.

Let us look at some of the popular choices:

Visual Studio Code

Visual Studio Code is a cross-platform code editor developed by Microsoft. You can use Visual Studio Code to edit code for many languages, including HTML, CSS, JavaScript, and PHP. Visual Studio Code is free and runs on Windows, Mac, and Linux.

Sublime Text

Sublime Text is a cross-platform code editor that can also be used to write and edit HTML, CSS, JavaScript, and PHP code. It is a commercial product, and you need to purchase it. You can also use it for free in unregistered mode.

Notepad++

Notepad++ is a lightweight code editor that supports many languages too. Unlike Visual Studio Code and Sublime Text, Notepad++ is not cross-platform. It only works on the Microsoft Windows platform.

NetBeans IDE

NetBeans is an integrated development environment (IDE) that offers more features than a regular code editor. NetBeans is free and cross-platform.

Building Your First Web Page

Let us now create a simple web page. Here we have created a simple HTML document and apply some styling using Bootstrap CSS. We will also have a clickable button that will display a simple message using JavaScript.

Here, are steps helps you to learn how to make a website from scratch:

Step 1) Open your favorite text editor.

Here, we open notepad.

Step 2) Create a new file.

named index.html.

Step 3) Add the following code,

into the file index.html.

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>My First Web Page</title>
    <script>
    function displayMessage() {
        document.getElementById("message").innerHTML = "Greetings from JavaScript!";
    }
    </script>
</head>
<body>
    <div class="container">
        <h1>My Web App!</h1>
        <p id="message">Your message will appear here.</p>
        <button type="button" class="btn btn-primary" onclick="displayMessage()">Click Me!</button>
    </div>
</body>

</html>

Explanation:

<!doctype html> defines the document type.
<head>… </head> defines the head tag that contains the metadata that is invisible to the users.
The head also contains a script tag that contains JavaScript code that displays a greeting message.
We are also loading Bootstrap CSS from a CDN network.
<body>… </body> defines our page’s content: a heading, paragraph, and a button that applies some styling from Bootstrap CSS.

Creating from Scratch Vs. using a Content Management System

Creating a website from scratch requires skills and appropriate knowledge. It also takes up more time and can also cost a lot of money.

On the other hand, you do not need to be a skilled programmer to create your website using a Content Management System such as WordPress. Content Management Systems are similar to applications like Microsoft Word.

With a Content Management System, you focus on creating pages, writing content, and publishing the content, just like creating documents in words and printing them to a printer.

The following table compares the two popular methods of creating websites.

S/N	Pro/Con	Creating from Scratch	Using a Content Management System
1	Time	Requires a lot of time.	Takes little time. It can be created in less than 24 hours.
2	Cost	It can be expensive to hire a skilled programmer.	You can do it yourself or hire someone to create it for you.
4	Skills	Requires an experienced and skilled programmer	Requires fewer skills. You need to be computer literate to do it.
5	Security	Hackers cannot easily find weaknesses in the code to exploit.	Hackers can easily find the weakness in the code and exploit them. Regular updates are important for security reasons.
6	Speed	Tend to be faster because only the features that are needed are loaded at runtime.	Tend to be slower because the Content Management System comes as a general-purpose solution that may load features that you do not necessarily need.
7	Maintenance	Easy to maintain because updates are only done when needed	Require more work as you have to make regular updates to the CMS because of security reasons.
8	Search Engine Optimization (S.E.O)	Requires more work, and the programmer needs to be reminded because most programmers are not S.E.O experts	Most Content Management Systems come with S.E.O tools out of the box. Extra features can easily be added using plugins.

Using a Framework (PHP MVC Framework)

In this section, we will look at how we can create our website from scratch. Every website must use frontend technologies such as HyperText Markup Language (HTML), JavaScript, and Cascading Style Sheets (CSS).

The backend has more options for programming languages. You can use PHP, Python, Ruby, JavaScript, etc. PHP is one of the most common ones. We will talk about PHP technologies in this section.

You can use PHP as it is a slow process, so even programmers who create websites from scratch need to use a development framework. The most popular is Model-View-Controller (MVC) framework. Examples of PHP MVC frameworks include Laravel, CodeIgniter, Cake PHP, Symfony, etc.

MVC frameworks provide the following features:

Built-in database connectivity with libraries: This saves you the time to write code to connect to the database securely to write and retrieve data.
Built-in authentication modules: This saves you the time to write the code that will require the users to log in and out of the site if needed.
Structured code: MVC design pattern separates the business logic from the presentation. This makes it easy to have a programmer who can work on the back end and a web designer who works on the Front end development.
Packages: These are collections of libraries that perform awfully specific tasks. For example, you can use or download a package to add features such as;
- Adding Disqus commenting feature to your site
- Calling an API
- Integrating a payment gateway.

You can use MVC frameworks to speed up development time. You can also use HTML templates to speed up the Frontend’s development by using open-source HTML templates. You can also buy a commercial HTML template then customize it according to your requirements. Some HTML template makers even create specific MVC framework HTML templates.

For example, you can purchase an HTML template that uses a blade template, a template engine built-in into the Laravel MVC framework.

Creating a website using a Content Management System (WordPress)

In this section, we will look at how you can create a website using WordPress:

Downloading WordPress

You can download WordPress from the official website and run it on your local computer if you have a web server and PHP installed. However, if you already have a hosting account, you can install WordPress directly from your cPanel.

Getting Started with WordPress

Once you have installed WordPress, you can start creating your website.

Web hosting:

Before you get started, you need to have a domain name and web hosting account. The web hosting account should have PHP installed and MySQL as the database engine. You can take the service of Bluehost, Godaddy, or you can host with WP Engine, which specializes in providing managed WordPress hosting.

Installing:

Most web hosting providers have special scripts in the administrative panel that allow you to install WordPress. If your hosting provider uses cPanel, then you should be able to install WordPress by clicking on the WordPress icon like shown in the image below:

Once you select the above option, you will be presented with Window’s following to complete the installation.

Settings:

The settings section allows you to configure things like site name, URL permanent links, time zone, if anyone can register on your site, etc.

Template:

Templates allow us to see how our website looks like. WordPress comes with free built-in templates that you can use right away. You can also download templates created by others. Apart from free templates, you can also purchase premium templates from marketplaces such as ThemeForest.

Plug-ins:

Plugins allow you to extend the functionality of WordPress. For example, you can use a plugin to enable your clients to pay you via PayPal from your website. You can also use plugins to force users to use secure connections (HTTPS) or generate site maps.

Website builders:

Website builders come with many features that make it easy to create websites using drag and drop methods. Website builders are usually installed as plugins and come with templates that you can use.

Let’s look at some of the most popular web builders:

Astra

Astra is a fast, lightweight, and highly customizable WordPress theme. It comes with starter templates that you can use to quickly create your sites. It has both free and premium starter templates.

Elementor:

Elementor is drag and drop website builder for WordPress that over 5 million users use. Elementor offers both free and premium features.

Beaver Builder:

Beaver Builder is an easy-to-use drag-and-drop website builder for WordPress that allows you to create professional-looking websites rapidly.

WordPress Alternatives

WordPress is not the only Content Management System that you can use to build your website. You can also look at alternatives such as

Joomla: Joomla is an open-source content management system that can be used to publish content, discussion forums, e-commerce applications, etc. It uses PHP as the programming language and MySQL as the database engine.
Drupal: It is a web content management system that can create personal blogs, corporate websites, or knowledge management for business collaboration. Drupal is written in PHP and JavaScript.
MODX: It is an open-source content management system that is written in PHP. And uses MySQL as the database engine. It can be used on the web as well as the intranet.
Constant Contact: This is a website builder that provides drag and drop features. It can be used to create basic websites and e-commerce stores.

Summary

Websites are created using computer code.
Computer code is human-readable instructions that tell the computer to perform a specific task.
Websites can be created either from scratch or using an existing platform such as WordPress.
Creating a website from scratch takes more time compared to creating using a platform.
Creating a website from scratch is more flexible compared to using an existing platform.
The programming languages used to create websites are HTML, CSS, JavaScript, and scripting languages for the backend, such as PHP, Python, Ruby, etc.
WordPress is a content management system that can be used to create websites very quickly.
WordPress supports plugins such as Astra, Elementor or, Beaver Builder, etc., to provide drag and drop website design features.
MVC frameworks such as Laravel or CodeIgniter can be used to speed up developing websites from scratch.

You Might Like: