Full Stack Web Developer

Why Git saves in two steps In the previous activity, you installed Git and ran git init in your working folder. That command created a hidden folder called .git, which is your local repository. For now this repository is empty: Git watches your folde...

Why a history of your work matters You now know how to move around, create and reorganise files from the terminal. The next problem every developer faces is this: you change your code, something breaks, and you no longer remember what it looked like ...

What your browser really does You now know how to move around your computer from the terminal and how to work from your editor's integrated terminal. The next tool in your developer environment is one you already use every day: the web browser. Until...

Why use a terminal inside your editor In the previous activities, you learned to use the terminal of your operating system. You found your location with pwd, listed files with ls and changed directory with cd. You also created, copied, moved and dele...

Before you start: paths and your practice folder You already know how to find your bearings in the terminal. pwd (print working directory) shows where you are, ls lists the contents of a folder, and cd changes directory. In this lesson you go one ste...

Where you are: the current directory and pwd In the previous activity you opened a terminal and saw that it waits for typed commands. Every terminal session is always located in exactly one folder, called the current directory or working directory. A...

What the terminal is and why you need it Until now, you have controlled your computer through windows, icons and menus. This is called a Graphical User Interface (GUI). The terminal offers another way: you type text commands and the computer answers ...

What an extension is and why to be careful You have installed Visual Studio Code (VS Code), opened your working folder and learned to create and organise files from the editor. Now you will make the editor more useful for your work. An extension is a...

The five zones of the interface You have installed Visual Studio Code (VS Code) and opened your working folder. Before writing any code, you need to recognise the zones of the window. Every developer uses them dozens of times a day. Learning their na...

Code is plain text In the previous activities, you learned that a program is a set of instructions written for a computer. You also learned that your work is stored in files and folders, identified by names, extensions and paths. Now you need the rig...

Theoretical Recap on Organization and Structure A program is a set of instructions a computer follows, but it lives within a system of files and folders, which is how your computer organizes and stores data. Think of a well-organized physical filing ...

File extensions: what a file name tells you In the previous lesson, you saw that your computer stores your work in files, and that files are organised in folders. Now you will learn to read file names precisely, because a developer spends the whole d...

Why storage matters to a developer In the previous activity, you learned that a program is a set of instructions written for a computer. Those instructions must be saved somewhere so they still exist when you close your editor or turn off your machin...

A program is a list of precise instructions In the welcome activity, you saw what a web developer does day to day. Behind every site, app or online shop there is the same basic object: the program. A program is an ordered sequence of instructions, wr...

Welcome to the Full-Stack Developer programme. In this first lesson, you will learn what a web developer actually does, how a website or web application works behind the scenes, and what equipment, software and habits you need to get started. You do ...

In the previous chapters, you learned how to select elements in the Document Object Model, create and delete nodes, and generate HTML dynamically. Now it is time to understand how a web page reacts to user actions. Every time a user clicks, moves the...

THEORETICAL RECAP Dynamically generating HTML means creating page elements with JavaScript instead of writing them by hand in your HTML file. This is the core of any modern web interface: you receive data (often an array of objects) and you transform...

Until now, you have learned to select elements already present in the HTML page and to modify their text or their classes. This chapter goes one step further: you will learn to create brand-new elements from JavaScript, to insert them exactly where y...

THEORETICAL RECAP The DOM lets you select and manipulate HTML elements from JavaScript. In the previous chapters you learned to select elements with document.querySelector and document.querySelectorAll, and to change their content. Now we focus on st...

THEORETICAL RECAP The DOM (Document Object Model) is the tree-like representation of your HTML page that the browser builds in memory. JavaScript can read and modify this tree in real time. To act on a specific element, you first need to select it, t...

Until now, you have manipulated data structures such as arrays, objects, and functions inside JavaScript. But a web page is more than pure data: it is a visible, structured document displayed in the browser. To make a page interactive, JavaScript nee...

Destructuring, the spread operator and the rest parameter are three features introduced with the modern version of JavaScript known as ES6 (ECMAScript 2015). They were designed to write shorter, clearer and more expressive code, especially when worki...

THEORETICAL RECAP An array of objects is simply an array whose elements are literal objects. It is the fundamental structure used to represent a collection of records: a list of products, users, orders, and so on. Each object holds properties (key/va...

THEORETICAL RECAP A literal object in JavaScript groups related data (properties) and behaviors (methods) inside a single structure delimited by curly braces. A property associates a key with a value (string, number, boolean, array, or even another o...

In JavaScript, an object is a data structure that groups together related values and behaviors under a single entity. Until now you have worked mainly with arrays, which store ordered lists of values accessed by numeric indexes. Objects are different...