WHAT IS SOURCE CODE?

How Does It All Work?

Although websites are everywhere around us, and seemingly everyone has one, there are many parts that need to work together in order for them to work properly. If you want to learn more about websites and how they work behind the scenes, you came to the right place! This series will break down what happens when you use a website, as well as what goes into building one.

This page is part of a series created as an introduction to web development concepts for people without any prior knowledge of the subject. Many technical details have been left out to keep it interesting!

What is Source Code?

A website is made up of many files written in special languages that can be understood by computers and web browsers. The collection of files that make up a website are referred to as that website's source code. It is the developer's job to understand how to write and maintain code in these languages and create the correct combination of files so that the website looks and works as expected. There are a number of different languages used, and each one is responsible for a different part of the website.

To get an idea of what this looks like, check out the following block of code and it's result:

Source Code

<style>
    /* this is CSS code */
    .thick-blue-border {
        border: 4px solid #565699;
        border-radius: 4px;
        padding: 20px;
    }
    .black-button {
        background-color: #090909;
        border-radius: 10px;
        padding: 10px;
        color:white;
    }
</style>

<!-- This is HTML code -->
<div class="thick-blue-border">
    <h2>This is a Title</h2>
    <p>This is some text. Click the button to run the Javascript code.</p>
    <button class="black-button" onclick="showMessage()">
        <i class="fa fa-smile-o"></i>
        This is a Button
    </button>
</div>

<script>
<!-- This is Javascript code -->
function showMessage() {
    let message = 'Hello world!';
    alert(message);
}
</script>

Result

This is a Title

This is some text. Click the button to run the Javascript code.

As you can see, even in this very simple example, there is a lot of code responsible for making it look good and work correctly. A lot more code could be added to make it look even better, not to mention making the button do something more interesting!

The source code for most projects can be broken into two parts, the front end and the back end the two sides work together to display each page of your website.

Front End

The front end (also known as the "client side") of the website is responsible for how the pages look. This means, the layout of the page, the colours and fonts used, as well as spacing and sizing are all controlled on the front end. The block of source code shown above is an example of front end code.

At their core, every web page is composed of at least HTML and CSS, which are responsible for the layout and style of a page respectively. Most websites also rely on JavaScript to add interactive elements to the page. These three languages are the backbone of all websites and we use web browsers to convert this code into a viewable web page.

Try It Out!

If you are on a desktop computer, you can right-click on a website and select "View Page Source" to view the front end source code that was used to build the page you are on.

There are various tools that make it easier to create the front end of a website. There are many CSS frameworks available such as Bootstrap or Tailwind. These frameworks make it faster to create styles for commonly used components so developers don't have to design everything from the ground up when making websites with similar needs.

Recently, the popularity of JavaScript frameworks, such as React, Angular and Vue has been growing quickly. Similarily, these are tools that make it easier for developers to quickly create JavaScript code, hiding away some of the more difficult parts, and providing quick access to the most useful parts of the Javascript language.

Back End

Not all websites require a back end. If your site is simple, you may only need to create a set of front end files that will rarely ever change. Simple websites like these are called static websites. For more complex sites, however, a back end is required.

The back end (also known as the "server side") of a website is required when the content on the website changes frequently. These are called dynamic websites. A few examples of dynamic websites are blogs, where posts are added regularly, or social media websites where users can upload their own pictures. The main job of the back end code is to access data in a database. This includes saving new data, retrieving and displaying specific data, and updating or deleting existing data. Once the database has been accessed, the back end code will return a page that is viewable in the web browser.

Common backend programming languages include PHP, Python, and Ruby. Unlike front end code, this code is executed on the web server, and not the web browser. This means, the work done on the back end will happen quickly for everyone, no matter if you are using a state-of-the-art gaming PC, or a 6 year old mobile phone. It is the developer's job to make sure that the back end code runs efficiently, so the users do not have to wait long for the next page to load.

Take a look at the example below, which could be used on a blog website, to see how the backend code is different from the front end code:

PHP Example Code

public function showTodaysPosts() {

    $title = 'Blog Posts from ' . date('F jS, Y');
    $allPosts = BlogPost::where('active', true)->get();

    $todaysPosts = $allPosts->filter(function (Post $post) {
        return $post->created_date->isToday();
    });

    $content = View::create('posts.index')->with([
        'title' => $title,
        'posts' => $todaysPosts,
    ]);

    return $content;
}

What it does:

Create a title based on today's date formated like "April 18th, 2024"
Retreive all the active blog posts from the database
Filter through all the blog posts and only keep the ones that were created today
Create a front end page, that will show the title and the blog posts
Finally, return the page content to the web browser.

Again, this is a very basic example. What isn't shown is all the code reponsible for seeing older blog posts, creating new ones, deleting old ones, updating their content, setting them to active, and many more actions like this. As the complexity of the website increases so does the amount of code needed. There could be thousands of lines of code needed to create a blog like the one I just described.

Just like front end languages, a number of back end frameworks exists to help developers write code for a website quickly without having to worry about setting up the common parts that many websites share. Laravel is a popular PHP framework, and my go-to choice when building websites. Other popular back end frameworks are Django (for Python developers) and Ruby on Rails.

What's Next?

You just read a page from a series explaining how web development works. If you are following along in order, click the button below for the next step in the process.

What is a Web Server?

If this page left you wondering about other parts of web development, check out the answers to some other common questions below!