Full Stack Web Developer

Deux outils, deux logiques Vous savez maintenant construire une barre de navigation avec Flexbox et organiser une page d'accueil avec Grid. La question suivante se pose donc : lequel choisir face à une maquette ? Les deux modules des feuilles de styl...

Pourquoi Grid après Flexbox Vous savez maintenant aligner des éléments avec Flexbox : une barre de navigation, une rangée de cartes, des boutons répartis sur une ligne. Flexbox raisonne sur un seul axe à la fois, ligne ou colonne. Dès que vous voulez...

Rappel des axes et retour à la ligne Dans l'activité précédente, vous avez construit une barre de navigation avec Flexbox, le module de mise en page des Cascading Style Sheets (CSS). Vous savez qu'un conteneur déclaré avec display: flex; aligne ses e...

Le principe : un conteneur et ses éléments Vous savez déjà qu'en Cascading Style Sheets (CSS), les éléments en bloc s'empilent verticalement et que les éléments en ligne se suivent comme des mots dans une phrase. Ce comportement par défaut, appelé fl...

Pourquoi découper un problème Vous avez préparé votre poste de travail : éditeur, terminal, navigateur et Git. Il vous manque encore l'outil principal du développeur, qui ne s'installe pas : la façon de raisonner. Avant d'écrire la moindre ligne de c...

Les trois zones de Git Dans l'activité précédente, vous avez installé Git et créé un dépôt dans votre dossier de travail avec la commande git init. Ce dépôt est vide pour l'instant : Git surveille le dossier mais n'a encore rien enregistré. Ce cours ...

Pourquoi utiliser un système de contrôle de version Vous savez désormais créer, copier, déplacer et supprimer des fichiers depuis le terminal. Une question se pose vite : que faire si vous cassez un fichier qui fonctionnait hier ? Copier son dossier ...

Le navigateur vu par un développeur Jusqu'ici, vous avez organisé vos fichiers avec l'éditeur et le terminal. Vous allez maintenant utiliser un troisième outil incontournable : le navigateur web. Pour un utilisateur ordinaire, Chrome, Firefox, Edge o...

Pourquoi un terminal dans l'éditeur Vous savez maintenant utiliser le terminal de votre système et votre éditeur de code. Jusqu'ici, vous avez probablement travaillé avec deux fenêtres séparées : l'éditeur d'un côté pour écrire, le terminal de l'autr...

Pourquoi manipuler des fichiers dans le terminal Vous savez maintenant vous repérer dans le terminal avec « pwd », lister le contenu d'un dossier avec « ls » et vous déplacer avec « cd ». L'étape suivante consiste à agir sur les fichiers et les dossi...

Le terminal, un explorateur sans souris Dans l'activité précédente, vous avez découvert le terminal sur Windows, macOS et Linux. Vous savez qu'il permet de piloter l'ordinateur en tapant des commandes plutôt qu'en cliquant. Ce mode de travail s'appel...

Le terminal, le shell et la ligne de commande Jusqu'ici, vous avez manipulé vos fichiers et dossiers avec la souris : dans l'explorateur de votre système, puis dans l'explorateur de Visual Studio Code (VS Code). Cette manière de travailler passe par ...

Ce qu'est une extension et pourquoi s'en méfier Vous avez installé Visual Studio Code (VS Code), ouvert votre dossier de travail et appris à créer et organiser vos fichiers. VS Code est volontairement léger à l'installation : il sait éditer du texte,...

Les grandes zones de l'interface Vous avez installé Visual Studio Code (VS Code) et ouvert votre dossier de travail. Vous allez maintenant apprendre à vous repérer dans son interface. VS Code est l'éditeur de code le plus utilisé par les développeurs...

Texte brut et texte mis en forme Vous savez maintenant qu'un programme est une suite d'instructions écrites pour un ordinateur. Vous savez aussi que ces instructions sont enregistrées dans des fichiers, rangés dans des dossiers et identifiés par une ...

Les extensions de fichiers Dans l'activité précédente, vous avez vu que l'ordinateur range votre travail dans des fichiers, eux-mêmes placés dans des dossiers. Il vous faut maintenant trois notions pour vous repérer : l'extension, qui indique le type...

Le fichier, unité de base de votre travail Dans l'activité précédente, vous avez vu qu'un programme est une suite d'instructions écrites pour un ordinateur. Ces instructions doivent être enregistrées quelque part pour ne pas disparaître. Cet endroit,...

Une définition simple Un programme est une suite d'instructions écrites par un être humain pour qu'un ordinateur les exécute. Chaque instruction décrit une action précise : additionner deux nombres, afficher un texte, enregistrer une donnée, comparer...

Bienvenue dans le cursus Développeur Full-Stack. Avant d'écrire votre première ligne de code, vous devez comprendre ce que fait concrètement un développeur web, comment fonctionne une application web et de quel matériel vous avez besoin pour travaill...

## Présentation du projet Vous allez démarrer la construction d'une application To-Do List (liste de tâches) en JavaScript ES6+. Ce mini-projet se déroule en deux parties : cette première partie est entièrement centrée sur la **structure HTML**, la *...

Dans les chapitres précédents, vous avez appris à sélectionner des éléments du Document Object Model (le DOM, c'est-à-dire la représentation en mémoire de votre page HTML), à en modifier le contenu, et à créer ou supprimer des nœuds dynamiquement. No...

RAPPEL THÉORIQUE Dans les chapitres précédents, tu as appris à sélectionner des éléments du DOM, à modifier leur contenu, à jouer avec classList, et surtout à créer, insérer et supprimer des nœuds. Tu as aussi manipulé des tableaux d'objets et découv...

Jusqu'ici, vous avez appris à sélectionner des éléments existants dans une page web et à modifier leur contenu ou leurs classes. Nous franchissons maintenant une étape essentielle : apprendre à créer de nouveaux éléments, à les insérer dans la page, ...

RAPPEL THÉORIQUE Dans le chapitre précédent, tu as appris à sélectionner des éléments du DOM avec des méthodes comme document.querySelector et document.querySelectorAll, puis à modifier leur contenu textuel. Nous allons maintenant nous concentrer sur...

RAPPEL THÉORIQUE Le DOM (Document Object Model) est la représentation en mémoire de ta page HTML sous forme d'arbre de nœuds. JavaScript peut lire et modifier cet arbre grâce à l'objet global 'document'. Pour agir sur un élément, tu dois d'abord le s...