Table of Contents

Fundamentals of Full-Stack Development: A Beginner’s Guide

Code Playground is only enabled on larger screen sizes.

Full-stack development is the process of creating and maintaining both the frontend and the backend part of an application.

It includes designing the web app's appearance, implementing the functionalities, deploying to the server, and optimizing and scaling the app to ensure optimal performance and reliability.

This roadmap walks you through the fundamentals of building web applications.

Together, we are going to cover everything you need to know to become a full-stack developer, including HTML, CSS, JavaScript, as well as frameworks such as Express.js, React.js, and Next.js.

What is 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 interface that you see is the frontend. It is usually built using HTML, CSS, and JavaScript.

HTML defines the structure and content of a webpage, which are made of HTML tags.

The name of the tag specifies its type, and you can add additional information by assigning extra attributes.

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

The example above selects all <p> elements, and apply the style rule color: red;.

Sometimes, you need to add interactivity for your webpage, such as an image that zooms in when clicked. That's where JavaScript shines.

As a demonstration, the example in the Code Playground creates a square that moves back and forth when the corresponding button is clicked.

html

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
 
  <style>
    #demo {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 5px;
      top: 40px;
      transition: all 0.5s linear;
    }
  </style>
</head>
 
<body>
  <button onclick="moveDiv()">Move</button>
  <button onclick="returnDiv()">Return</button>
  <div id="demo">
    <div>
      <script>
        function moveDiv() {
          document.getElementById("demo").style.left = "400px";
        }
 
        function returnDiv() {
          document.getElementById("demo").style.left = "5px";
        }
      </script>
</body>
 
</html>

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

What is the backend

The backend part of the app is all about data.

In practice, data is often stored inside a database, which can easily and safely store millions of records.

The backend app can then retrieve data from that database, process them, and then serve to the frontend to display to the user.

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 use JavaScript, as it is the only one that works in both the frontend and the backend.

In this roadmap, we are going to cover:

The fundamentals of HTML, CSS, and JavaScript
Backend development with JavaScript
Frontend development with React.js
Full-stack development with Next.js
Creating AI apps powered by OpenAI, or any other ML model providers

Practicing is always the best way of learning.

So, along the way, we are going to create real app, from calculators and todo lists, to SaaS platforms and AI chatbots.

Without further ado, let's get started!

Preparations>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>

  <style>
    #demo {
      width: 100px;
      height: 100px;
      background: red;
      position: absolute;
      left: 5px;
      top: 40px;
      transition: all 0.5s linear;
    }
  </style>
</head>

<body>
  <button onclick="moveDiv()">Move</button>
  <button onclick="returnDiv()">Return</button>
  <div id="demo">
    <div>
      <script>
        function moveDiv() {
          document.getElementById("demo").style.left = "400px";
        }

        function returnDiv() {
          document.getElementById("demo").style.left = "5px";
        }
      </script>

Open Sandbox

Loading course content...