Web development is the process of creating web applications, which involves designing the website's appearance, implementing the functionalities, deploying to the server, and optimizing and scaling the app to ensure optimal performance and reliability.
This course walks you through the fundamentals of building web applications. Together, we are going to cover everything you need to know to become a web developer, including HTML, CSS, JavaScript, as well as frameworks such as Express.js, React.js, and Next.js.
Is web development dying with AI?
But, before getting into the technical details, we must address a very important question: With all the hype surrounding AI, is web development dying?
The short answer is no, and here's why:
AI is a tool, not a replacement. Web development remains one of the most in demand career paths, as every business and organizations nowadays needs a website to broaden their online presence. While AI enhances efficiency in creating websites by automating repetitive tasks, it does not eliminate the need for skilled developers to design, build, and maintain them.
AI tools such as website builders and code assistants helps developers automate repetitive tasks, suggest code, or even generate simple code snippets. However, they lack the creativity, problem-solving skills required to develop complex, scalable, and user-centric applications.
Also, coding is a huge part of web development, but web development isn't just about coding. A huge part of web development is about involves understanding user needs, creating designs with good user experience, ensuring seamless functionality, and create applications that can scale when necessary. These are tasks that require human insight and expertise.
As developers, we should see AI as an opportunity, not a threat. It’s a powerful tool that can augment our capabilities, allowing us to focus more on innovation and problem-solving while leaving the repetitive tasks to automation.
What is a web application
A web application is an interactive software program that runs in a web browser, allowing users to perform tasks and interact with dynamic content over the internet.
Unlike traditional desktop or mobile applications, web apps do not need to be installed on a user's device and can be used across various platforms and devices.
The frontend
A web application can be split into two parts: the frontend and the backend.
The frontend is the part of a website that users can see and interact within their browser. When you enter a URL and press Enter, the displayed webpage is the frontend, built using HTML for structure, CSS for styling, and JavaScript for interactivity.
HTML elements are the building blocks of a webpage, consisting of an opening tag, content, and a closing tag. The name of the tag specifies the element type, and you can add additional information by assigning extra attributes.
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.
Open demo in new tabImplementing 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!