What technology stack does a website use?

A website is a piece of software that runs on a computer. It is connected 24/7 to the internet, and other users can access it by typing a specific URL in their browser. For instance, when you type google.com, you are connecting yourself with another computer and interacting with it. You can see information, input data, and retrieve particular materials.

You don’t need a technical understanding of how websites work to use them. But if you ever wondered about the behind-the-scenes that make them work, you better keep reading 🙂
Different types of websites

The internet is crowded with millions of websites serving different needs. The front end runs on your local browser. It is everything that you see on a website: all the stuff that shows up on your screen.

The most basic type of front-end you can have is a plain HTML file. This file defines the structure of the website; it determines what a title is, what is a paragraph, and what is an image. Through different tags, you can dictate how each piece of content is categorized, and it is via these tags that search engines such as Google read the website’s content to understand and prioritize it correctly.

Different types of websites

The internet is crowded with millions of websites serving different needs.

Static Websites

The most basic ones are informational websites with static content.
These are websites that you can’t interact with; you only read information and navigate through different pages.

Interactive websites

An interactive website, on the other hand, are websites where the user can input and retrieve data dynamically. For example, Facebook, Amazon, Twitter, and most social media sites. You can create an account, input your “posts,” and interact with other users.

Anatomy of a website

Front-End: client-side programming

The front end runs on your local browser. It is everything that you see on a website: all the stuff that shows up on your screen.
The most basic type of front-end you can have is a plain HTML file. This file defines the structure of the website; it determines what a title is, what is a paragraph, and what is an image. Through different tags, you can dictate how each piece of content is categorized, and it is via these tags that search engines such as Google read the website’s content to understand and prioritize it correctly.

A plain HTML website would look awful, It would be just text with no styles. That’s where CSS (Cascade Style Sheet) comes into play. CSS It’s what we use to add styles to the HTML: it determines the font and size of the titles and texts, it defines the background color, and orders the content around the page to make it look aesthetic. 

Using HTML and CSS you can create a static website with fixed content. But most websites nowadays are dynamic and for that they need an aditional programming language: JavaScript.

If you want to go a step further and create a dynamic website, you can use JavaScript (not to be confused with JAVA) to add extra functionalities and allow visitors to engage with the website. With JavaScript, a site can be enhanced with some micro-animations when a button is clicked, but it also allows users to submit a form or create profiles and chat with others (with the help of the backend or an API, more detail about this later on).

Right now, there are plenty of JavaScript libraries and frameworks: ReactJS, Angular, VueJS, and many more. All these are based on JavaScript and make developers’ lives easier when creating front-end apps and websites.

Back-end: server-side programming

The back end, on the contrary, is the piece of software that runs on the server (a computer that is permanently connected to the internet). Combined with the front end, they collectively make up the website.

For example, whenever a user creates a new post, the back-end programs receive this petition from the front-end and execute a function to connect to the database and save this new post on it. 

Without the back end to execute this function, the post will only live on the user’s local browser and would be lost whenever the page is refreshed. 

All this happens on a program that runs on the server. It could be JavaScript -Node JS is particularly trendy right now- but there are plenty of other languages, like PHB, C#, Python, or Ruby.

Database: data storage

The back end can execute functions and do a lot of stuff, but without a database to store the information, it will fall short. 

The database is where all the information is stored. To make an analogy, you can think of a database as a huge spreadsheet where you store different types of information: log-in information, users and passwords, blog posts, or products from a marketplace.

So when you log in or retrieve information about a user or product, the back end gets that data from the database and retrieves it to the front end, which shows that information to the user.

Some of the most common databases are MySQL, MongoDB, and SQL, and there are also massive databases run by Oracle and Microsoft.

Hosting: where the website lives

As mentioned above, a website is a piece of software that lives on a computer that is permanently connected to the internet. If the server is turned off or loses its internet connection, the website will be down. 

In theory, you can run a website using your home computer. You’ll need to set up different services and make sure that it is uninterruptedly connected to the internet and is never turned off or frozen.

This is a complicated and time-consuming task, so luckily, hosting providers offer services that make this process easier. Hosting services providers have enormous warehouses (data centers) with tons of racks of computers that are invariably and permanently connected to the internet. They rent these computers to their clients, saving them the troubles of power issues, updates, internet connections, and the like.

You can rent a part of a computer for as little as USD 3/month and run a static website with not too much trouble. For interactive websites with millions of users, however, this price can scale pretty quickly and get to the thousands of dollars in no time – but if you need to pay a lot for the hosting you probably are getting a lot of traffic, and you should have no trouble finding a way to monetize that ;).

Depending on your need you have different hosting providers. They vary from the easiest to set up and use (GoDaddy, BlueHost, HostGator) to the more flexible but harder to use, like Amazon Web Services (AWS), Google Cloud, and Microsoft Azure.

What other technology stacks have you heard of?

We hope this beginner’s guide helps you begin to understand how websites work. So the next time that you search for a friend on Facebook or search for a music video on YouTube, you remember the different parts that make your request magically render your friend’s profile or that amazing music video.

There are many other components that explain the functioning of websites. Let us know if you have heard of other technology stacks that you would like us to explain in our next blog post!

This blog post is about our latest podcast – What is a website and how it works – Episode #4. We invite you to follow us to learn more about this and other topics 🙂