Cours disponibles
- Enseignant: Reda DERRAZ
Présentation du module
- Comprendre ce qu’est un éditeur de code et son rôle en développement web
- Découvrir les principaux éditeurs adaptés à la programmation web (VS Code, WebStorm, Sublime Text…)
- Installer et configurer un éditeur de code sur son ordinateur
- Choisir l’éditeur le plus adapté à ses besoins, à son niveau et à son projet
Contenu du cours
- Ressources explicatives
- Tutoriels vidéo
- Activité pratique : installation et capture d’écran
- Quiz de validation
Bloc de compétences du titre RNCP DWWM couvert :
Bloc 1, compétence « Installer et configurer son environnement de travail ».
- Enseignant: Reda DERRAZ
Ce cours permet à l’apprenant de découvrir, installer et configurer les outils essentiels du développement Front-end moderne : Node.js et son gestionnaire de paquets (npm ou yarn). Il présente le rôle de Node.js dans l’écosystème web, explique les différences entre npm et yarn, puis guide pas à pas l’apprenant dans l’installation et la vérification de ces outils, quelle que soit sa plateforme (Windows, macOS, Linux). À l’issue de ce cours, l’apprenant sera capable de préparer un environnement prêt à accueillir des projets Front-end, et saura gérer les dépendances de ses applications.
Contenu du cours
- Introduction à Node.js : définition, utilité en Front-end
- npm et yarn : rôles, différences, choix d’un gestionnaire de paquets
- Installation de Node.js et de npm (tutoriels vidéo et guides pas à pas pour chaque système d’exploitation)
- Installation de yarn (méthode classique et via npm)
- Vérification de l’installation en ligne de commande
- Premières commandes de base (init, install, update, remove…)
- Conseils de configuration (gestion des versions, nvm, bonnes pratiques)
- Activité pratique : installer Node.js et npm/yarn, puis envoyer une capture d’écran prouvant l’installation
- Quiz de validation des acquis
Format du cours
- Ressources explicatives écrites
- Tutoriels vidéo pas à pas
- Guides PDF pour chaque OS
- Activité pratique à réaliser et à soumettre
- Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique à l’apprenant pourquoi il est essentiel d’utiliser un navigateur web moderne (comme Google Chrome ou Mozilla Firefox) dans le cadre du développement Front-end. Il présente les avantages de ces navigateurs, guide l’utilisateur dans leur installation et leur configuration, et introduit les outils de développement intégrés indispensables pour tester, déboguer et optimiser ses projets web.
Contenu du cours
- Différence entre navigateur moderne et navigateur obsolète
- Présentation des navigateurs recommandés (Chrome, Firefox, Edge, etc.)
- Téléchargement et installation d’un navigateur moderne
- Configuration de base pour le développement
- Introduction aux outils de développement intégrés
- Activité pratique : installer un navigateur, prendre une capture d’écran, explorer les DevTools
- Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours initie l’apprenant à l’utilisation du terminal (aussi appelé console ou invite de commandes) pour le développement web.
Il explique l’utilité du terminal, présente les principales différences selon le système d’exploitation (Windows, macOS, Linux), et propose une première prise en main à travers les commandes essentielles.
L’objectif est de rendre l’apprenant autonome pour naviguer dans les dossiers, lancer des programmes, installer des outils ou exécuter des commandes liées au développement Front-end.
Contenu du cours
- Qu’est-ce qu’un terminal ? À quoi sert-il ?
- Présentation des principaux terminaux (cmd, PowerShell, Terminal macOS/Linux, Windows Terminal)
- Ouvrir un terminal sur chaque système d’exploitation
- Commandes de base : navigation, création/suppression de fichiers et dossiers, exécution de programmes
- Exercices pratiques sur les commandes essentielles
- Activité pratique (exécution et capture d’écran)
- Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique à l’apprenant pourquoi et comment utiliser un gestionnaire de versions comme Git dans le développement web.
Il présente les concepts de base, détaille les étapes d’installation de Git sur les principaux systèmes d’exploitation, puis guide l’apprenant dans la première configuration et la vérification de l’installation.
À la fin du cours, l’apprenant saura installer Git, effectuer une configuration minimale, et vérifier le bon fonctionnement sur sa machine.
Contenu du cours
- Pourquoi utiliser un gestionnaire de versions ?
- Présentation rapide de Git
- Installation de Git (Windows, macOS, Linux)
- Configuration de base (nom, email, options)
- Vérification de l’installation
- Exemple concret : initialiser un dépôt local, premiers commits
- Activité pratique (installation, configuration, capture d’écran)
- Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours guide l’apprenant dans la configuration avancée de Git pour un usage professionnel : création d’un compte sur une plateforme (GitHub, GitLab, Bitbucket…), génération et ajout de clés SSH, connexion sécurisée à un dépôt distant, et bonnes pratiques de gestion des dépôts locaux et distants.
À la fin, l’apprenant saura lier son environnement local à un service distant pour collaborer efficacement.
Contenu du cours
- Créer un compte sur une plateforme Git (GitHub, GitLab, etc.)
- Générer une clé SSH et l’ajouter à son compte
- Configurer Git pour utiliser la clé SSH
- Créer un dépôt distant (sur la plateforme)
- Lier un dépôt local à un dépôt distant (init, remote add, push)
- Cloner un dépôt distant
- Résumé des commandes essentielles
- Activité pratique (connexion SSH, push/pull, capture d’écran)
- Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique à l’apprenant pourquoi et comment installer les principaux outils de débogage pour le développement web côté front-end.
Il détaille l’utilisation des outils intégrés à chaque navigateur (DevTools), ainsi que l’installation et l’usage d’extensions spécifiques pour inspecter, modifier et tester le code HTML, CSS et JavaScript d’une page web.
À l’issue du cours, l’apprenant saura ouvrir, configurer et exploiter les outils de debug front sur Chrome, Firefox et d’autres navigateurs modernes.
Contenu du cours
-
Qu’est-ce qu’un outil de debug front ?
-
Présentation des DevTools (outils intégrés à Chrome, Firefox…)
-
Fonctions principales des DevTools : inspection, console, sources, réseaux, performance
-
Installation d’extensions de debug front (React Developer Tools, Vue.js Devtools, etc.)
-
Exemples concrets d’utilisation (déboguer du HTML/CSS/JS, simuler un mobile…)
-
Activité pratique (ouvrir, utiliser, illustrer les outils de debug)
-
Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique à l’apprenant comment organiser proprement les fichiers et dossiers d’un projet web front-end. Il détaille les conventions utilisées dans le monde professionnel, propose plusieurs exemples adaptés à la taille et à la complexité du projet, et donne les bonnes pratiques pour garder un code clair et maintenable.
À la fin, l’apprenant saura concevoir, créer et adapter la structure de dossiers de n’importe quel projet web.
Contenu du cours
-
Pourquoi organiser ses fichiers ?
-
Structure minimale d’un projet web
-
Exemple de structure pour un projet simple
-
Exemple de structure pour un projet plus avancé (avec frameworks, gestionnaire de paquets, tests…)
-
Bonnes pratiques d’organisation
-
Activité pratique (création d’une structure de projet, justification des choix)
-
Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique ce qu’est un framework CSS, à quoi il sert et pourquoi il accélère la création d’interfaces web. L’apprenant découvre comment installer les frameworks les plus courants (Bootstrap, Tailwind CSS…), les configurer dans un projet, puis les utiliser pour styliser rapidement des pages web. À la fin du cours, l’apprenant saura intégrer et exploiter un framework CSS de façon autonome.
Contenu du cours
-
Qu’est-ce qu’un framework CSS ?
-
Présentation des frameworks les plus utilisés (Bootstrap, Tailwind CSS…)
-
Installer un framework CSS dans un projet (CDN, npm/yarn, téléchargement)
-
Configurer le framework (structure, fichiers, personnalisation)
-
Exemples d’utilisation basiques
-
Activité pratique (intégration d’un framework dans un mini-projet)
-
Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique à l’apprenant le rôle d’un gestionnaire de paquets dans le développement web (npm, yarn…), ce qu’est une dépendance, et comment les installer, les mettre à jour et les supprimer dans un projet.
L’objectif est d’apprendre à gérer facilement les bibliothèques tierces et à maintenir un projet moderne, modulaire et à jour.
Contenu du cours
-
Qu’est-ce qu’un gestionnaire de paquets ?
-
Présentation de npm et yarn
-
Initialiser un projet avec npm/yarn
-
Installer, mettre à jour et supprimer des dépendances
-
Exemple concret : installation de Bootstrap, Tailwind ou d’une librairie JS populaire
-
Activité pratique
-
Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique à l’apprenant ce qu’est un outil de build (compilateur, bundler, etc.), pourquoi il est devenu indispensable dans les projets web modernes, et comment en installer un (Webpack, Vite, Parcel…).
L’objectif est d’apprendre à automatiser l’assemblage, l’optimisation et le lancement d’un projet front-end grâce à ces outils. L’apprenant saura ainsi préparer son projet pour la production ou le développement avancé.
Contenu du cours
-
Qu’est-ce qu’un outil de build et à quoi ça sert ?
-
Présentation des outils les plus courants (Webpack, Vite, Parcel)
-
Installation d’un outil de build (exemples avec npm)
-
Configuration minimale et démarrage d’un projet avec un outil de build
-
Exemple concret (créer un projet, lancer le serveur de dev)
-
Activité pratique (mise en place d’un outil de build sur mini-projet)
-
Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours explique ce qu’est un serveur local de développement, à quoi il sert et comment l’installer/utiliser dans un projet web.
L’apprenant découvre plusieurs solutions simples (Live Server, Vite, http-server, etc.), apprend à lancer et configurer un serveur local, et comprend ses avantages pour le développement, les tests et la collaboration.
Contenu du cours
-
Qu’est-ce qu’un serveur local de développement ?
-
Pourquoi l’utiliser et quels sont ses avantages ?
-
Présentation des outils principaux (Live Server, Vite, http-server…)
-
Installation et démarrage d’un serveur local
-
Exemple d’utilisation concrète
-
Activité pratique (mise en place et test d’un serveur local)
-
Quiz de validation
- Enseignant: Reda DERRAZ
Description du cours
Ce cours apprend à l’apprenant ce qu’est une charte graphique et un cahier des charges dans le cadre du développement web, et comment les appliquer lors de la création d’interfaces utilisateur.
Il explique leur rôle, leurs contenus typiques (couleurs, typographies, logos, règles de mise en page…), ainsi que l’importance de leur respect pour garantir la cohérence visuelle et fonctionnelle d’un projet.
À travers des exemples concrets, l’apprenant découvre comment traduire des directives de conception en éléments visuels (maquettes, intégration front-end) et comment travailler efficacement avec ces documents pour répondre aux attentes d’un client ou d’une équipe.
- Enseignant: Reda DERRAZ
Ce cours permet à l’apprenant de comprendre ce qu’est une maquette et un wireframe dans le contexte du développement web.
Il explique à quoi servent ces documents, leurs différences, et comment ils sont utilisés dans un projet pour concevoir efficacement des interfaces utilisateur. L’apprenant découvre les outils courants, les bonnes pratiques et l’importance de la phase de maquettage avant de coder une interface.
Contenu du cours
-
Qu’est-ce qu’un wireframe ?
-
Qu’est-ce qu’une maquette ?
-
Différences et complémentarité entre wireframe et maquette
-
Pourquoi et quand utiliser chaque outil ?
-
Outils et exemples courants
-
Activité pratique (analyse ou création d’un wireframe simple)
-
Quiz de validation
- Enseignant: Reda DERRAZ
Ce cours apprend à l’apprenant à utiliser un outil de maquettage numérique pour concevoir des wireframes et des maquettes d’interfaces web. Il présente les fonctionnalités principales des outils comme Figma, Adobe XD, Balsamiq, etc., et propose une prise en main étape par étape pour réaliser un wireframe ou une maquette simple.
L’objectif est de donner les bases pour communiquer efficacement un design avant le développement.
Contenu du cours
-
Pourquoi utiliser un outil de maquettage numérique ?
-
Présentation rapide de Figma, Adobe XD, Balsamiq (forces, spécificités)
-
Découverte de l’interface et des fonctions de base (exemple Figma)
-
Exemple guidé : créer un wireframe ou une maquette simple
-
Activité pratique (réalisation et export d’un wireframe ou maquette avec un outil numérique)
-
Quiz de validation
- Enseignant: Reda DERRAZ
- Enseignant: Reda DERRAZ