This is a course on building web applications. Whether you are a complete beginner or someone with programming foundations, you've come to the right place.
Together, we are going to cover everything you need to know to become a web developer, including HTML, CSS, JavaScript, databases such as SQLite and PostgreSQL, frameworks such as Express.js and React.js, and so on.
But, before getting into the technical details, we need to discuss exactly what a web application is.
What is a web application
A web application consists of the frontend and the backend.
The frontend is the part of the application that the users can see through their browser. For example, when you type a URL in your browser and hit Enter, you will receive a webpage. That webpage is the frontend, created with HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet).
HTML defines the content and information displayed on the webpage, and CSS controls the appearance and layout of the HTML components.
If a web application is only made of HTML and CSS, it is called a static web application. However, imagine you are building an app with hundreds or even thousands of pages. Making so many static pages would be tedious, and your app would be impossible to maintain in the future.
Instead, you can store the data 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, generating static pages based on the retrieved data, and finally serving the generated pages to the user. Such applications are referred to as dynamic web applications.
Technologies used in the frontend
The technologies commonly used in the frontend are HTML, CSS, and JavaScript. An HTML file has the extension .html, and it is made of tags in a nested structure.
Most HTML elements have an opening tag and a closing tag. The name of the tag specifies the element type, and you can add additional information by assigning extra attributes.
CSS is used to define the appearance of HTML elements. It is made of a selector and a set of style rules in key/value pairs. In the above example, CSS will select all <p> elements, and apply the style rule color: red;.
Sometimes, you might want to add more interactivity to 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.
Technologies used in the backend
The backend part of the application usually consists of a database, which stores information. Relational databases are the most common type of database. Inside the database, you can create tables with predefined schemas.
Different tables can have different relations between each other. For example, a user could own multiple records in the article table, and each article could have multiple tags. We will discuss more about this in future chapters.
Besides a database, you also need a program that can retrieve the correct data from the database based on the user request, compile the data into a proper webpage based on a template, and then transfer the webpage to the end user.
The program can be written in many different languages, such as JavaScript, Python, PHP, Java, and more. For this course, we are going 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.
The architecture we demonstrated above isn't without its issues. For instance, because 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!
Currently, our course is still under development. So far, we have finished the HTML & CSS chapter and most of the JavaScript chapter. In the next few months, we are also going to publish the React.js & Next.js and Vue.js & Nuxt.js chapters.
Until that happens, our course is 70% off, including the permanent plan. Get them before the price change!