← Tous les modules

Appearance

Développement Web Côté Client ​

Bienvenue dans le cours de développement web côté client.

Modules Disponibles ​

Module 1 : Retour sur HTML et CSS ​

  • Structures HTML5 et balises sémantiques (<header>, <nav>, <main>, <section>)
  • Propriétés CSS essentielles (sélecteurs, box model, display block/inline)
  • Techniques de mise en page avancées (Flexbox, Grid, positionnement)
  • Formulaires HTML accessibles avec validation et types de champs appropriés
  • Optimisation des images et bonnes pratiques de design web
  • Commencer le Module 1

Module 2 : SCSS - Préprocesseur CSS ​

  • Comprendre le rôle et les avantages d'un préprocesseur CSS
  • Compiler du SCSS en CSS avec l'extension Watch Sass
  • Utilisation des variables pour une maintenance facilitée
  • Imbrication de règles pour une meilleure organisation
  • Réutilisation de règles avec @extend
  • Outils et exercices pratiques pour maîtriser SCSS

Module 3 : Transition, Transformation et Animations par keyframes en CSS ​

  • Comprendre et appliquer les transitions CSS pour des animations fluides
  • Maîtriser les transformations 2D pour modifier l'apparence des éléments
  • Créer des animations complexes avec les keyframes
  • Intégrer des librairies d'animation CSS dans les projets

Module 4 : Accessibilité Web ​

  • Comprendre les principes fondamentaux de l'accessibilité web
  • Connaître la norme WCAG 2.1 et ses niveaux de conformité
  • Appliquer les critères de programmation HTML/CSS pour l'accessibilité
  • Créer des liens de navigation cachés pour les lecteurs d'écran
  • Utiliser les attributs ARIA pour améliorer l'accessibilité
  • Utiliser des outils de test d'accessibilité comme Silktide de Chrome

Module 5 : Sélecteurs Avancés CSS ​

  • Comprendre et utiliser les sélecteurs de combinaison (> et +)
  • Maîtriser les sélecteurs d'attributs [attribut]
  • Appliquer les pseudo-classes :first-child et :last-child
  • Créer du contenu généré avec ::before et ::after

Module 6 : Git ​

  • Comprendre le contrôle de version et l'importance de Git
  • Installer et configurer Git sur votre machine
  • Utiliser les commandes Git de base (clone, add, commit, push, pull etc.)
  • Cloner un dépôt distant depuis Gitlab et effectuer une boucle de travail complète.

Module 6.1 : Workflow Git - Interface VS Code ​

  • Maîtriser l'interface Contrôle de source de VS Code
  • Effectuer les opérations Git via l'interface graphique
  • Résoudre les conflits de fusion dans l'éditeur
  • Utiliser un fichier .gitignore pour exclure des fichiers du suivi

Module 7 : Bootstrap - Framework CSS ​

  • Comprendre ce qu'est un framework front-end et les avantages de Bootstrap
  • Intégrer Bootstrap via CDN ou en local
  • Maîtriser le système de grille et les points de rupture (breakpoints)
  • Utiliser les composants Bootstrap courants (Navbar, Card, Carousel, etc.)
  • Appliquer les classes utilitaires de mise en forme
  • Mettre en forme des formulaires avec Bootstrap
  • Intégrer des icônes Bootstrap Icons
  • Personnaliser Bootstrap avec les variables root CSS

Module 8 : Introduction à JavaScript - Les bases du langage ​

  • Comprendre le rôle de JavaScript dans le développement web
  • Savoir inclure un fichier JavaScript dans une page HTML
  • Utiliser la console et le débogueur du navigateur pour déboguer le code
  • Maîtriser les commentaires et activer le mode strict
  • Connaître les types de données natifs (Number, String, Boolean, Null, Array, Object)
  • Déclarer et utiliser des variables et des constantes (let, const, var)
  • Appliquer les opérateurs de comparaison stricts et non stricts
  • Utiliser les structures de contrôle et de répétition (if/else, for, for...of, for...in, while, switch)

Module 9 : JavaScript - Structures de données, fonctions et DOM ​

  • Comprendre les tableaux linéaires et associatifs (objets)
  • Maîtriser les fonctions nommées et leur documentation JSDoc
  • Interagir avec le DOM pour modifier dynamiquement le contenu HTML
  • Gérer les événements utilisateur avec addEventListener
  • Structurer le code JavaScript de manière organisée et maintenable

Module 10 : JavaScript - Formulaires et validation ​

  • Comprendre et utiliser les événements de formulaire en JavaScript
  • Maîtriser les méthodes preventDefault() et submit() pour contrôler la soumission de formulaires
  • Utiliser l'objet event et sa propriété target pour accéder aux éléments déclencheurs
  • Implémenter des techniques de validation de formulaires en JavaScript, y compris la validation en temps réel
  • Accéder et manipuler les éléments du DOM avec getElementById, getAttribute et setAttribute
  • Manipuler le contenu des éléments HTML avec textContent, value et innerHTML

Module 11 : JavaScript – Création et manipulation avancée du DOM, validation et objets ​

  • Créer et insérer dynamiquement des éléments dans le DOM avec JavaScript
  • Manipuler les classes CSS avec classList
  • Valider des champs de formulaire à l'aide d'expressions régulières
  • Générer dynamiquement du contenu HTML à partir de tableaux et objets
  • Pratiquer la manipulation avancée du DOM

Module 12 : JavaScript – Création dynamique avancée et gestion de la visibilité ​

  • Associer des id et des addEventListener à des éléments créés dynamiquement
  • Générer un catalogue de produits à partir d'un tableau d'objets avec createElement() et Flexbox
  • Afficher et masquer des éléments avec des animations CSS (@keyframes)
  • Distinguer visibility: hidden, display: none et remove() pour gérer la visibilité

Module 13 : JavaScript – Événements clavier et souris, sélecteurs multiples ​

  • Comprendre et utiliser les événements clavier : keydown, keyup et keypress
  • Détecter les touches pressées avec event.key
  • Réagir au survol de la souris avec mouseover et mouseout
  • Sélectionner plusieurs éléments du DOM avec getElementsByClassName(), getElementsByTagName() et querySelectorAll()
  • Parcourir et manipuler des collections d'éléments HTML

Module 14 : Minuterie et sons en JavaScript ​

  • Comprendre setInterval, setTimeout et clearInterval
  • Contrôler la lecture audio avec l'API Audio (play, pause, stop)
  • Exemples pratiques : minuterie, lecteur audio et synchronisation

Module 15 : Librairies JavaScript externes et Anime.js ​

  • Comprendre le rôle des librairies JavaScript externes et des CDN
  • Intégrer une librairie via CDN dans un projet HTML/CSS/JS
  • Découvrir Anime.js et ses propriétés d'animation essentielles
  • Créer des animations : déplacement, rebond, fondu, rotation, cascade
  • Utiliser Anime.js en parallèle d'autres fichiers JavaScript

Outils et Ressources ​

Assurez-vous d'avoir les outils suivants installés pour suivre le cours :

Extentions Vs Code ​

Live Server ​

Cette extension permet de lancer un serveur local avec rechargement automatique, donc de pouvoir prévisualiser vos pages web (.html) en temps réel.

Télécharger et installer.

W3C Web Validator ​

Cette extension permet de valider vos fichiers HTML et CSS directement dans VS Code selon les standards du W3C.

Télécharger et installer.

Live Sass Compiler ​

Cette extension permet de compiler automatiquement vos fichiers SCSS en CSS à chaque sauvegarde. Elle sera utilisée à partir du Module 2.

Télécharger et installer.

Afin de permettre à ce plugin de rouler "automatiquement" à chaque sauvegarde, une fois le plugin installé, aller dans les paramètres du plugin et activer l'option "watchOnLaunch"

alt textalt text

Désactiver Copilot et l'IA dans Vs Code ​

Dans notre cours, l'utilisation d'outils d'intelligence artificielle comme GitHub Copilot est interdite pour garantir l'acquisition des compétences et leur évaluation. Voici comment désactiver cette fonctionnalité dans Visual Studio Code :

Désactiver Copilot dans Vs Code

Installer ESlint pour le JavaScript (seulement à partir du Module sur le JavaScript) ​

Cette extension permet d'analyser votre code JavaScript à la recherche de problèmes de syntaxe et de style, en suivant les règles définies dans un fichier de configuration ESLint.

Installer ESLint pour JavaScript