10:03:09

What Is A Website Built With? How Does A Website Work?

DAte

Apr 26, 2023

Category

Development

Reading Time

7 min

In 2021 there is a maze of technologies that exist to create both great and not so great websites. There are distinct differences between how these platforms approach the challenge of creating websites and each method comes with its own distinct pros and cons. However, all these technologies use the same foundations to present you with content, these are:

  • HTML

  • CSS

  • JavaScript

  • PHP

HTML can be found on every website, at its foundation a website is created from this programming language, it provides the information you see including the text and images. CSS is a programming language that is used to style the information you see on a website, whilst there is a lot you can do with HTML alone, CSS allows an extra level of customisation allowing you to display information in different ways. JavaScript is a little closer to what we would think of as a traditional programming language, for websites it allows users to perform a certain action on a website and interact with its content. Finally, PHP is a server-side language. It helps create slightly faster websites and is by no way essential for a website. Hence, creating a website using PHP will result in a web page that is processed by the server before being presented to the end-user.

So in summary there are 3 main programming languages that are used on most websites which each serve a different function: HTML - Content & Structure, CSS - Styling, JavaScript - Interactivity. PHP can be implemented on websites to create dynamic information and add additional functionality to your website. With the combination of these four ever-evolving languages, almost anything is possible on websites today.

For the past two decades, WordPress has dominated the web as the most used CMS, however, in 2021 there are exciting new technologies that allow for functionality, speed and security that has previously been impossible. Hence, we will start by discussing WordPress as this is the simplest way for a beginner to create a website, we will then discuss our favourite new technology Gatsby JS as an incredible alternative for those who would like a website that will last longer, and provide a better user experience.

How does a traditional WordPress website work?

There are two broad categories of websites: Static websites and dynamic websites. WordPress websites fall into the dynamic category meaning pages are dynamically generated as users load different pages, this allows them to continually pull the most relevant data to present. WordPress is one of the most widely used CMS's around the world and hosts an estimated 445 million websites.

The core components:

  • WordPress Core: this refers to the core files that make your WordPress foundation. You will need to have the WordPress core files before you can do anything, they are essentially what makes WordPress work.

  • Database: the database is the area where all the content and settings are stored. Depending on how you go about installing WordPress you may or may not need to create the database manually.

  • Extra files: your themes, plugins and content make up the extra files, these are what make your website unique.

  • Admin Panel: this is the area where you can interact with your website to change content and update settings.

The WordPress Core

The WordPress core files are the files that make up the foundation of your WordPress website. When you go through the WordPress installation process you are adding these files to your website, these files contain all the code necessary for your WordPress website to run. This process can be performed in one of two ways: using an auto-installer provided by your hosting company (this will be the easiest way for beginners), the second is downloading the files directly from wordpress.org and uploading them manually to your website.

The Database

Your website will need a database to work, essentially this is where all your settings and content is stored. The database is split into 12 sections for a different type of information that is needed to make your website work. However, aside from having these databases installed, you won't need to do much more to use your WordPress website.

Additional Files

Whilst the WordPress core includes a set of files that contain the foundational code that allows your website to run, you may wish to install any number of plugins to your website to give it extra functionality. Here are just some of the features you can add to your WordPress website with a plugin:

Many of these plugins are also free to use which saves time and money by allowing you to add functionality with just a fraction of the work. Other additional files include those that you upload such as content and the theme you use.

Admin Panel

Finally, we come to the admin panel which is where the real magic happens. In theory, you can have a website without an admin panel, however, it will be more challenging to update and requires expertise. Hence why WordPress has been relied upon as the most popular CMS in the world.

The WordPress admin screen displays a range of options by default that allows you to manage your site including installing different themes, adding plugins and configuring the way everything looks and feels. These default areas include:

  • Dashboard - this can be thought of as the home screen, you can see the most important things at a glance.

  • Posts - you can use this section to create new blogs or news posts.

  • Media - every image you upload will be stored in the media library.

  • Pages - Here you can access all the pages that make up your website.

  • Comments - this option allows you to moderate and reply to comments left on your posts.

  • Appearance - here you can manage your theme, customise the appearance of your website, add widgets, edit your header and footer and update your menus.

  • Plugins - Here you can manage your plugins.

  • Users - manage who can access your website.

  • Tools - this tab provides tools for importing and exporting data.

  • Settings - here you can configure your site including its name, the homepage you would like to use and numerous other options.

When you begin using WordPress it will likely take you some time to get familiar with all of these options, however, after a few weeks of using WordPress, you will have learned everything you need to learn.

Who uses WordPress?

Some notable companies that are still using WordPress and haven't yet switched to newer technologies include:

Should you use WordPress?

There are a couple of considerations that need to be made before you can come to a conclusion about whether or not you should use WordPress. Will WordPress create you the best website that will stand the test of time? No... However, WordPress remains a great option for those who are looking to build their own website or looking to have a novice developer create an affordable website.

If you are in eCommerce, we strongly recommend steering clear of WordPress unless you have a comprehensive understanding of WordPress, this is for a number of reasons with the largest concern being security which becomes important when you begin to manage payment details. Instead, we recommend either headless e-commerce with Shopify as the CMS or simply vanilla Shopify.

If you are planning on creating a static website then we would recommend using newer web technologies for two reasons, today you will stand out from other websites and hence, gain a competitive edge when it comes to metrics that help determine your search engine ranking. Secondly, you will not need to update your website in a few years time to remain competitive.

Gatsby JS

Whilst Gatsby JS websites and WordPress websites can look the same, do most of the same things and can be edited in similar ways, Gatsby JS has progressed in a way that WordPress has not. Gatsby JS helps you create fast, secure and attractive static websites. Let me clarify what I mean by static, static does not mean that your website becomes a picture, instead, when content is updated on your website and you press to publish the entire website is created ready to be sent to an end-user. In comparison, when you publish content on a dynamic website, the content remains in a soup with all the other content across the other pages of your website, when a user loads a page, the server looks through this soup to find the relevant content, it then will construct the website on the fly, before finally presenting it to the end-user. In essence, by performing this work at the point of publishing, you can save a lot of load time for the end-user, these time savings and perceived speed increases will become blatantly clear for users who have a slow internet connection, hence, the slower an internet connection, the larger the speed difference between these two technologies.

How does Gatsby JS work?

Gatsby JS redefines how a website should work, instead of functioning like a usual website, Gatsby JS allows you to create websites that function more like an app. This creates a smooth experience that will be sure to help you stand out.

Who uses Gatsby JS?

Here are a few notable companies currently using Gatsby JS, we encourage you to explore these websites, click on different pages and take note of how seamless everything is. Compare this to the websites listed above to understand the power of Gatsby JS. Here are some large companies who are leveraging this power:

After browsing through a few of these websites, you will likely notice that when you click a link to a new page on the website it loads almost instantly, you will likely have also noticed it as you have been browsing through our website.

Do you think it is time for your business to switch to these next-generation website technologies? If so, don't be shy, let's talk!

Author

Team 10SQ

Related News

Related News

Newsletter

Get the latest news into your inbox

Stay informed and up-to-date with the latest news delivered straight to your inbox for a seamless and convenient experience.

Newsletter

Get the latest news into your inbox

Stay informed and up-to-date with the latest news delivered straight to your inbox for a seamless and convenient experience.

Newsletter

Get the latest news into your inbox

Stay informed and up-to-date with the latest news delivered straight to your inbox for a seamless and convenient experience.