Full Stack Web Developer

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...

THEORETICAL RECAP In JavaScript ES6+, arrays offer powerful methods to process collections of data without manually writing loops. The three core methods are: 'filter', which returns a NEW array containing only the elements that pass a test (a callba...

In your previous activities you learned how to loop over arrays with 'for', 'for... of' and 'while'. These classic loops work perfectly, but modern JavaScript offers dedicated array methods that make your code shorter, more readable and easier to rea...

In JavaScript, arrays are one of the most common data structures you will manipulate. An array is an ordered list of values, each stored at a numbered position called an index. The first element is always at index 0, the second at index 1, and so on....

THEORETICAL RECAP In JavaScript ES6+, an array is an ordered collection of values that you can traverse and transform. To compute statistics, you rely on a small set of core tools. A variable declared with 'const' or 'let' holds your data; a function...