Fundamentals of Web Development: A Beginner’s Guide

CSS defines the appearance of HTML elements. It consists of a selector and a set of style rules in key/value pairs.

In the example below, click on the CSS tab to view the source code. This example selects all <p> elements, and apply the style rule color: red;.

Sometimes, you might need more interactivity for your webpage, such as a pop-up menu or an image that zooms in when clicked. That's where JavaScript shines. As a demonstration, the following example is a square that moves back and forth when the corresponding button is clicked.

Implementing something like this does require decent programming skills, we are going to come back to this topic after covering JavaScript first.

The backend

If a web application only delivers fixed webpages defined by HTML, CSS, and JavaScript, it is called a static web application.

However, imagine you are building a blog app with hundreds of articles. Making so many static pages would be tedious, and when you need to make a design change on the website, you'll have to apply the same changes to hundreds of document, making your app impossible to maintain in the future.

Instead, it is better store the articles inside a database, which can easily and safely store millions of records, and then create a backend application in charge of retrieving information from the database

The backend app then uses the retrieved data to generate static pages, and finally serves to the user. Such applications are referred to as dynamic web applications.

The backend program can be written in many different languages, such as JavaScript, Python, PHP, Java, and more. For this course, we are going to start with JavaScript, as it is the only one that works in both the frontend and the backend.

In the future, we will add more chapters on other programming languages and frameworks, such as PHP (Laravel) and Python (Django). Make sure to subscribe to our newsletter so you don't miss any future updates.

Traditional architecture vs. SPA

The architecture we discussed above isn't without its issues. For instance, since compiling the webpage will consume a lot of server resources, if your web application receives a large number of requests in a very short period of time, it might put too much pressure on the server.

In recent years, a new type of web application has gained more popularity. It is called a single-page application (SPA).

Instead of compiling the webpage, the server will transfer the data directly, usually in JSON format. Then, a separate frontend application will receive the data and render the webpage on the client side, which generally has more excessive computing power.

You should know that SPA is not a replacement for the traditional architecture, sometimes a webpage should be rendered on the server side to avoid leaking sensitive information.

We are running a discount! Everything is 50% off!

Currently, our course is under rapid development.

So far, we have published the HTML & CSS, JavaScript, Express.js, React.js and the Next.js chapters. In the next few months, we are also going to publish Vue.js and Nuxt.js tutorials, as well as a dedicated chapter on how to implement AI features in your web applications.

We are running a discount until that happens. Get them before the price changes!