skip to Main Content
Illustration Of A Person Coding A Website

How to create a website from scratch

Updated on June 25th, 2018

When you google “Create a website” these days, you’ll see a lot of guides telling you that WordPress, Wix, Squarespace or Weebly are the best way to do exactly that.

It almost seems like people have forgotten that it’s still possible to create a good-looking responsive website by writing code the old-fashion way. In fact, it is actually the preferred approach in some cases.

If you’re interested I’ll help you get started on your first website.

Creating a website from scratch doesn’t mean you have to write every single line of code by yourself. It’s still possible to use predefined templates and reuse code you’ve written before or code snippets you’ve found online.

Personally, I learned a lot by just looking at, and copying a bit of code from existing web frameworks.

Are there any benefits of creating a page from scratch?

  • When you write all the code yourself, you actually know what it does and you’re only adding what you need.
  • You get a better understanding of how the different languages actually work.
  • Your website will contain less code, be more lightweight and potentially faster (If you’ve written good code)

Are there any drawbacks?

  • You’ll probably spend more time overall on developing your site
  • It will require more research and testing in order to ensure that you’re doing things correctly

Typically things that can be a bit tricky:

  • Ensuring that you’re creating a responsive site
  • Ensuring that you’ve taken all necessary security considerations
  • Ensuring that you’ve covered all browser incompatibilities

For beginners that are considering to get into web development, I can tell you right away that creating a good-looking, functional and secure site is not easy.

It requires quite a bit of effort to learn the required languages. It requires quite a bit of effort to implement a nice design. As a result, a lot of people end up choosing a Content Management System or even a website builder.

That being said, if you truly want to become a web developer, it’s essential to understand and know how to use the different languages. The good news is that there are a lot of free resources out there that can help you on your path.

Where to start?

First, you need to get a grasp on the frontend languages HTML, CSS and JavaScript, three of the core languages of any website.

Before we get there, let’s just quickly define the difference between frontend and backend of a website.

The frontend of a website, also called client side, refers to everything a user can see and interact with. The frontend is built up by a combination of the three main languages HTML, CSS and JavaScript. So, everything you see on a website, from colors and fonts to buttons and drop-down menus is a result of HTML, CSS, and JavaScript being processed by your browser.

The backend of a website, also known as server side, is what makes the frontend work. The backend generally consists of a server, an application, and a database, where the server hosts the application which then communicates with a database. This is done to allow data to be passed from the database to the front-end where it is processed and presented to the user. The application is typically built with languages such as PHP, Python, Ruby, Node or Java.

Frontend

I’ll use the same example as I did in the frameworks section to give you an idea of what HTML, CSS, and JavaScript is.

HTML (Hypertext Markup Language) is a markup language that provides the website with structure. With HTML you can define the basic building blocks of a website, such as title, paragraphs, lists, text body and links.

Here’s one example

<strong>A HTML button</strong>
<button>Click Me!</button>

Which would turn out something like this, depending on your default styling.

A HTML button

As you notice, nothing happens when you click the button. But before make things happen, let’s adjust how the button appears by adding some CSS.

CSS (Cascading Style Sheets) is a design language that handles the look and feel of a website. With CSS you can control font styles, text and background colors, page layout and much more.

button{
 border-radius: 10%;
 background: black;
 color: white;
}
button:hover{
 background:orange;
 color:black;
}

By adding a few lines of CSS, I’m able to change the background color to black, making the button rounder, and make it orange on hover.

A HTML button

But still nothing happens when we click the button, that’s where we need JavaScript.

JavaScript is a programming language that allows you to create dynamic and interactive websites. JavaScript makes it possible to dynamically change the content of a website, like making a dialog box appear when a user clicks a button. Other examples of dynamic content could be animations, interactive maps, calculations and much more.

function update_text_function() {
var buttonElement = document.getElementById("button-demo");
var headerElement = document.getElementById("header-demo");
 buttonElement.textContent = 'You clicked me!'
 headerElement.textContent = 'JavaScript is fun!'
}

The JavaScript function above looks for the elements with id=button-demo and id=header-demo, and alters the text for those elements accordingly.

In order for this to work in our example, we will also have to update our HTML with those IDs.

<strong id="header-demo">A HTML button</strong>
<button id="button-demo" onclick="update_text_function()">Click Me!</button>

Try clicking the button now

A HTML button

Pretty cool, right?

Now you have an indication of what those languages do, but how do you go about learning them?

Luckily, I’ve been down this road myself, so I have a few free suggestions for you.

Frontend learning resources

W3schools

W3schools is a site for web developers, especially those who are eager to learn new languages. They have tutorials for languages such as HTML, CSS, JavaScript. One thing I really like is that they make it possible for you to test examples yourself and see the result right away.

Javascript Example From W3schools

Khan Academy

Khan Academy also has quite a lot of tutorials to get you started with HTML, CSS and JS. Similar to W3schools they have interactive steps where you get to test out your own code, but the difference is that they have instructors talking you through the lectures. Worth checking out.

 

Mozilla Developer Network

For those that learn best by reading and seeing examples, it might be worth checking out the Mozilla Developer Network. This goes for developers of all skill levels. They cover a wide range of topics within web development, and from my experience, they do a really good job of diving into the details.

The first steps

If you’ve already gone through some of the courses above, there’s a good chance you’ve made a simple test site already. I still want to give you a few things to keep in mind.

Integrated development environment (IDE)

The first thing you should do is to get yourself a proper IDE, which is an application that helps developers with different aspects of coding.  It’s also possible to edit your code in a plain text editor like notepad, but an IDE will typically provide you with benefits like

  • Syntax highlighting and code completion
  • Test and debugging assistance
  • Ease code navigation

My personal favorite is Visual Studio Code, but feel free to search the web for other options.

Creating your first HTML-file

Once you have a code editor in place, you can create your first html-file, e.g. index.html and store it in a new folder specifically for the website you’re creating.

A basic html layout looks like this:

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>My First Heading</h1>
        <p>My first paragraph</p>
    </body>
</html>
  • <!DOCTYPE html> defines the document type to be HTML5
  • <html> defines the boundaries of a HTML document
  • <head> contains metadata about the document, like title
  • <title> contains the title of document
  • <body> contains the visible content of the website
  • <h1> defines a large heading
  • <p> defines a paragraph

If you stored this in a file called index.html in a folder called MyNewWebsite on your C drive, you would be able to see your first html page by typing C:/MyNewWebsite/index.html into your browser.

Example Of A HTML Heading

The <head> section

Once the basic setup is in place, there’s a few additions I would recommend to add within the <head>.

Specify character encoding for the HTML document. UTF-8 is the character encoding for Unicode

<meta charset="utf-8">

Specify a description for the page by replacing text with a short page description. Will allow search engines to display a short description/summary of your site to potential visitors.

<meta name="description" content="text">

Specify a comma-separated list of keywords by replacing keyword1, keyword2 with keywords that tell what your site is about. These keywords will be used by search engines to evaluate if your page is relevant to a certain search.

<meta name="keywords" content="keyword1, keyword2, etc.">

Specify how the browser should handle page dimensions and scale. The width=device-width part sets the width of the page to follow the screen-width of the device, to ensure that the page appears correct on both mobile phones and computers. The initial-scale=1.0 part sets the initial zoom level when a page is loaded.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Add normalize.css as a stylesheet. Normalize.css aims to make built-in browser styling consistent across browsers. For more info check out GitHub.

Download normalize.css, save the file together with your index.html file, and link it in your <head>. Important! Remember to link it above any other stylesheets.

<link rel="stylesheet" type="text/css" href="normalize.css">

Add your own CSS style sheet(s) the same way.

<link rel="stylesheet" type="text/css" href="styles.css">

Once that’s in place you should be fairly well covered for the <head> part, and it should look something like this:

<head>
  <title>Page Title</title>
  <meta charset="utf-8">
  <meta name="description" content="text">
  <meta name="keywords" content="keyword1, keyword2, etc.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Let’s move on to the styles.css document you just linked in.

What to add in styles.css

The CSS-file will allow us to alter the look and feel of the website. One example could be to alter the color, font size and line spacing of the content within the <body> tag.

body {
    color: rgb(253, 11, 11);
    font-size: 1em;
    line-height: 1.4;
}

Which would give the following result:

Example Of A HTML Heading Modified With CSS

This and other examples of basic CSS are pretty well covered in the numerous tutorials linked further up.

Instead, I want to focus on the parts that are important to remember.

In terms of CSS, the parts I want to highlight are related to responsive web design. That is, the website’s ability to adjust to different screen sizes and conditions, and a lot of that is handled in CSS.

Size units

The first point is to be aware of which size units you are using and why. The units I’m referring to are:

px – px(pixel) is a fixed-size unit. As a result, it’s easier to understand the connection between the value you enter and what you see on the screen, 12px will be very close to 12 pixels on your screen.

The potential downside of px is that the unit does not scale, so a font size of 12px will be 12px regardless of screen size. The result might be that a font size that looks perfect on your laptop, might be too small to read on a mobile phone.

em – em is a scalable unit and the size will be relative to the font-size of the parent element. 1 em is equal to the font size of the parent, so if the parent element (e.g. <body>) has a font-size of 16px then 1 em = 16 px.

Due to the scalability, em is great for creating responsive websites, but it can easily get a bit confusing to keep track of the conversion from em to px for each element.

% – % is a scalable unit just like em, and will set a size relative to the font-size of the parent element. If the parent element has font-size 16px, then 100% = 16px.

Media queries

The second part is media queries.

Media query is a CSS technique that utilizes the @media rule to only include a set of CSS properties if a certain condition is true. Here’s one simple example

@media only screen and (min-width: 600px) {
    body {
        background-color: lightblue;
    }
}

And the result would be that the background color of my website would be light blue whenever my browser window is larger than 600px. You might be wondering what the different parts mean, so let’s try to break it down.

Media query structure

The general syntax of a media query is as follows

@media not|only mediatype and (media feature) {
    CSS-Code;
}

If you use the operators not or only, you have to specify a mediatype. Besides that, none of the elements within a media query are mandatory.

Let’s explain what the different operators do

not – The not keyword inverts the meaning of the media query it’s applied to. So, if I had changed out only with not in the example above, the background color would have turned light blue whenever my browser window is smaller than 600px

only – The only keyword has no real effect on modern browsers, it only serves the purpose of hiding media queries from older browsers that do not support media queries.

mediatype – The mediatype expression allows you to define the category of device the media query should apply to. It’s optional to set the mediatype (unless you’ve used the not or the only operators) and if nothing is set, the all type will be applied by default.

all – applies to all devices

screen – applies to devices with a screen like smartphones, computer screens, and tablets.

printapplies documents viewed in print preview mode and other paged material

speech – Intended for speech synthesizers

and – The and keyword is used to combine a media feature with a mediatype or other media features.

Media features The media features expression allows you to specify that a media query should only be applied when certain characteristics of the device, display area or environment is true. Adding media features is optional.

In the example further up, we used the feature min-width which allows us to define the minimum width of the display area/ browser window the CSS rule should be applied to.

Media features can among other things, be used to specify characteristics such as:

  • Width and height of the display area/viewport/browser
  • Width and height of the device
  • Device orientation (Portrait/landscape)
  • Resolution

For a more extensive list, check out the CSS @media rule article on w3schools.

When to use media queries?

With all this in mind, when do you use media queries?

Considering how many types of devices people browse the web with nowadays, it’s no surprise that one of the most common use cases of media queries is to ensure that a website looks good regardless of device.

In the illustration below, you can see one potential use case. By checking the width and height of the viewport/browser, media queries will allow me to alter how the content of the website is displayed depending on which device was being used.

Illustration Of Responsive Web Design

What's next?

I really hope some of these pointers will help you get started with developing the frontend of a website from scratch. If you want a more in-depth example of how to create a responsive website from scratch, have a look at this example.

If you’re creating a website that needs to interact with a database, you should continue reading the backend section.

Backend

As we saw in the previous section, frontend (client-side) code is mostly concerned with the appearance and behavior visible on the website. In contrast, the backend (Server-side) code is mostly concerned with serving the frontend with the correct content.

Typical application areas are:

Efficient storage and delivery of information

Using databases to store and retrieve data, processing the data if required, all in order to send correct data to the frontend as required. This could be anything from images and information about specific products to login information like username and encrypted passwords.

 Access control

Keep track of which users have access to which content and only serve content the users that are authorized to see that specific content.

Backend languages

For the backend, there’s wide variety of scripting languages to choose from, and they all defer in performance, programming style, and lines of code required. I won’t be doing a full language comparison in this article, but here’s a brief introduction to three popular backend languages:

  • PHP – Probably the most popular backend language on the web. It’s not the “best” or “fastest” language out there, but it’s stable, well documented, fairly easy to learn and it gets the job done.
  • Python – With its emphasis on simplicity and readability, Python is considered to be among the easiest languages to learn.
  • Ruby – Is a very flexible language, often with several ways of accomplishing the same thing. Some consider this a strength, whereas beginners have a tendency to find it confusing. Because of this, Ruby is considered to be a bit difficult to learn, especially for beginners.

With that short introduction in mind, I would recommend you to utilize some of the many great tutorials that have been made. Below are some of my favorite learning resources

Backend learning resources

Laracast

Although Laracast is based on the backend framework Laravel, it has some really great videos on PHP development. So, if you’re considering using PHP as your backend language, definitely checkout Laracast.

W3schools

In addition to providing good tutorials on frontend languages, w3schools also provide tutorials of a few server-side languages such as PHP. Worth checking out if you liked the frontend tutorials.

For the backend part, I won’t be taking you through any basic examples like I did for frontend, I’ll leave that to the great learning resources mentioned above. But I do want to mention one important thing you always should keep in the back of your head while doing backend development, and that is security.

Backend security

From time to time we hear about websites going down due to targeted attacks, or passwords and credit card information being stolen and exposed to the public. This and many other things is what might happen when hackers manage to find and utilize vulnerabilities in the code used by a given website or web application.

Needless to say, the result of such attacks can be devastating for the company and website suffering from the attack. It could have a huge economic impact, but maybe more importantly, your reputation and customer trust can take a severe hit. With that in mind, there’s no wonder why security always should be on our mind when developing websites.

The problem is that website security is a very big topic, and it’s continuously evolving. I have to be honest enough to say that I’m not a security expert, so I’m not going to pretend to be one either.

I still have a few tips:

  • If you want a brief but good introduction to website security, check out the Website Security article written by the Mozilla Developer Network.
  • If your website will be handling sensitive information such as passwords, credit cards etc., then consider using a framework to mitigate the risk of overlooking security pitfalls. Many backend frameworks will enable well-thought-out defense mechanisms for common attacks by default.
  • Test – then test again
  • Get an SSL-certificate

At the end of the day, if you’re not intending to hire an expert, the only thing that works is to study, do research, practice and learn from your mistakes. Good luck!

If you liked this post, please share or leave comments below.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back To Top
×Close search
Search