CSS

Se connecter pour s'inscrire

Votre progression

Continuez pour débloquer la suite !
0 / 0 étapes complétées 0
%

L'Architecte de la Beauté Web

  1. Description

    La touche esthétique qui sculpte l'apparence du web avec élégance et précision.

  2. Objectifs

    • Maîtriser les fondamentaux du CSS et ses propriétés essentielles
    • Comprendre le modèle de boîte et le positionnement des éléments
    • Apprendre à créer des mises en page flexibles et responsives
    • Découvrir les animations et les transitions CSS
    • Mettre en pratique les bonnes pratiques de développement CSS

  3. Validations de compétences

    • QCM
      QCM comprenant des questions sur les principes fondamentaux étudiés. Les étudiants devront sélectionner la réponse correcte parmi les options proposées.
    • Étude de cas
      Proposer une étude de cas dans laquelle les étudiants doivent analyser une situation spécifique liée aux concepts étudiés. Inviter les étudiants à repérer les principes applicables, à recommander des outils et des technologies appropriés, et à expliquer les bénéfices escomptés de l'adoption dans cette situation spécifique.
    • Exercices pratiques
      Organisation d’exercices pratiques où les étudiants peuvent mettre en œuvre les concepts étudiés. Évaluation de la capacité des étudiants à mettre en place les solutions proposées.
    • Présentation orale
      Demander aux étudiants de préparer une courte présentation orale sur un sujet lié au contenu du cours. Ils devront expliquer le concept, les principes clés, les outils pertinents et les avantages de l'adoption des solutions proposées. Évaluer leur compréhension du sujet, leur capacité à communiquer efficacement et à présenter des informations de manière claire et concise.
    • Projet
      La validation des compétences s'effectue à travers un projet professionnel simulé. Les apprenants, répartis en équipes, devront mener à bien une mission data complète incluant :

      • Une répartition des rôles (architecte, data engineer, analyste...)
      • Des livrables techniques avec stack imposée
      • Des deadlines serrées
      • Une soutenance professionnelle (20 min max)

      La présentation devra :

      1. Couvrir l'ensemble des concepts clés du module
      2. Démontrer la maîtrise technique via une démo opérationnelle
      3. Communiquer de manière claire et convaincante

  4. Public cible

    • Débutants: Personnes découvrant le domaine ou ayant peu d'expérience.
    • Intermédiaires: Personnes ayant déjà une expérience de base dans le domaine.
    • Experts: Personnes expérimentées cherchant à approfondir leurs connaissances.
    • Étudiants: Étudiants en formation initiale.
    • Professionnels: Professionnels en activité cherchant à se former.
    • En reconversion: Personnes en reconversion professionnelle.

  5. Besoins techniques

    • Ordinateur fonctionnel
      Un ordinateur en bon état de fonctionnement, capable d’exécuter les logiciels nécessaires au cours.
    • Accès à Internet
      Connexion Internet stable pour accéder aux ressources en ligne, visioconférences et plateformes pédagogiques.
    • Ordinateur avec 8 Go de RAM
      Ordinateur équipé d’au moins 8 Go de mémoire vive pour un usage bureautique avancé ou développement léger.
    • Navigateur web moderne
      Google Chrome, Mozilla Firefox, Microsoft Edge, Safari ou autre navigateur à jour.
    • Environnement de développement
      IDE ou éditeur de texte adapté (Visual Studio Code, PyCharm, Eclipse, etc.), selon le langage étudié.

  6. Prérequis

    • Aucun prérequis

  7. Niveau

    Tous niveaux

  8. Historique du module

    Aucune action enregistrée

  1. Informations Générales

    1. Durée

      ~ 45h

    2. Format

      Cours en présentiel / En ligne

    3. Objectifs

      1. Maîtriser les fondamentaux du CSS et ses propriétés essentielles
      2. Comprendre le modèle de boîte et le positionnement des éléments
      3. Apprendre à créer des mises en page flexibles et responsives
      4. Découvrir les animations et les transitions CSS
      5. Mettre en pratique les bonnes pratiques de développement CSS

    4. Prérequis

      Connaissances de base en HTML recommandées.

    5. Public cible

      1. Débutants souhaitant apprendre à styliser des sites web
      2. Développeurs web cherchant à perfectionner leurs compétences en CSS
      3. Designers web voulant comprendre l'implémentation de leurs maquettes
      4. Étudiants en développement web ou design numérique
      5. Autodidactes souhaitant structurer leur apprentissage du CSS

    6. Méthode d'enseignement

      1. Théorie et exemples concrets
      2. Exercices pratiques pas à pas
      3. Mini-projets de mise en page
      4. Projet final intégrateur

    7. Besoins techniques

      1. Matériel requis
        1. Ordinateur portable ou de bureau (Windows, macOS ou Linux)
        2. Connexion internet stable
        3. Casque audio avec micro (pour les sessions en ligne)
        4. Écran large recommandé (pour visualiser le code et le rendu côte à côte)
      2. Logiciels à installer
        1. Navigateur web moderne (Chrome ou Firefox recommandé)
        2. Éditeur de code (VS Code avec extensions CSS recommandé)
      3. Comptes recommandés
        1. Compte sur CodePen ou CodeSandbox
        2. Compte sur GitHub pour le versioning

  2. Modules du Cours

    1. Les Fondamentaux du CSS

      1. Introduction au CSS
        1. Syntaxe et structure de base
        2. Sélecteurs CSS (éléments, classes, IDs, attributs)
        3. La cascade et l'héritage
      2. Le modèle de boîte
        1. Margin, border, padding, content
        2. box-sizing : border-box vs content-box
        3. Les différents types de boîtes (block, inline, inline-block)
      3. Propriétés de texte et de couleurs
        1. Typographie (font-family, size, weight, etc.)
        2. Couleurs (noms, hexadécimal, RGB, HSL, variables CSS)
        3. Effets de texte (ombre, décoration, transformation)
      4. Exercice pratique : Mise en forme d'une page d'article

    2. Mise en page avancée avec Flexbox et Grid

      1. Flexbox
        1. Concepts de base (conteneur et éléments flexibles)
        2. Alignement et distribution (justify-content, align-items)
        3. Gestion de l'ordre et de la taille des éléments
      2. CSS Grid
        1. Création d'une grille (grid-template-columns/rows)
        2. Positionnement des éléments (grid-column, grid-row)
        3. Zones de grille et responsivité
      3. Méthodologies et bonnes pratiques
        1. Quand utiliser Flexbox vs Grid
        2. Approche mobile-first
        3. Optimisation des performances
      4. Exercice pratique : Créer un portfolio responsive

    3. Responsive Design et Media Queries

      1. Principes du Responsive Design
        1. Mobile-first vs Desktop-first
        2. Viewport et unités relatives (%, vh, vw, rem, em)
        3. Images responsives (srcset, picture, sizes)
      2. Media Queries avancées
        1. Syntaxe et opérateurs logiques
        2. Points de rupture (breakpoints) standards
        3. Fonctionnalités médias (orientation, résolution, etc.)
      3. Techniques avancées
        1. Conteneurs fluides et images flexibles
        2. Grilles responsives
        3. CSS Container Queries
      4. Exercice pratique : Adapter un site pour mobile, tablette et desktop

    4. Animations et effets visuels

      1. Transitions CSS
        1. Propriétés transition-*
        2. Timing functions (ease, linear, cubic-bezier)
        3. Exemples pratiques d'utilisation
      2. Animations CSS
        1. @keyframes et propriétés d'animation
        2. Contrôle des animations (play-state, iteration-count)
        3. Performances et bonnes pratiques
      3. Effets avancés
        1. Transformations 2D/3D (transform)
        2. Filtres et effets visuels
        3. Masques et découpes (clip-path, mask)
      4. Exercice pratique : Créer une galerie d'images interactive

    5. CSS Moderne et Bonnes Pratiques

      1. Variables CSS (Custom Properties)
        1. Déclaration et utilisation
        2. Portée et héritage
        3. Utilisation avec JavaScript
      2. Méthodologies CSS
        1. BEM (Block Element Modifier)
        2. SMACSS et OOCSS
        3. CSS-in-JS (introduction)
      3. Outils et préprocesseurs
        1. SASS/SCSS (variables, mixins, fonctions)
        2. PostCSS et autoprefixer
        3. Outils de build (Webpack, Parcel, Vite)

    6. Sémantique et accessibilité

      1. Les balises sémantiques
        1. Utilisation des balises <header>, <footer>, <nav>, <section>, <article>, <aside>
        2. Importance de la sémantique pour le SEO et l’accessibilité
      2. Accessibilité des contenus HTML
        1. L’importance des attributs alt, aria, role
        2. Bonnes pratiques pour rendre les pages web accessibles à tous
      3. Exercice pratique : Structurer une page sémantiquement correcte et accessible

    7. Accessibilité et Performance

      1. CSS et accessibilité
        1. Contraste des couleurs et lisibilité
        2. Navigation au clavier
        3. Médias alternatifs (impression, lecteurs d'écran)
      2. Optimisation des performances
        1. Chargement critique du CSS
        2. Optimisation des sélecteurs
        3. Utilisation de will-change et contain
      3. Outils d'analyse
        1. Lighthouse et Web Vitals
        2. Outils de débogage des navigateurs
        3. Tests multi-navigateurs

    8. Projet final

      1. Projet pratique : Créer un site web moderne et responsive
        1. Conception d'une maquette préalable
        2. Implémentation en HTML/CSS pur
        3. Adaptation pour différents appareils et tailles d'écran
        4. Optimisation des performances
      2. Critères d'évaluation :
        1. Respect de la maquette
        2. Code propre et bien structuré
        3. Accessibilité et sémantique
        4. Performance et temps de chargement
        5. Documentation et bonnes pratiques

  3. Ressources Supplémentaires

Atelier guidé

Composer une mise en page flexible, accessible et compatible avec plusieurs tailles d’écran.

  1. Flexbox : réaliser une navigation et une carte qui se réorganisent sans position absolute.
  2. Grid : construire une galerie responsive avec des zones stables stables et un ordre de lecture cohérent.
  3. Accessibilité : contrôler le contraste, le focus, la réduction de mouvement et le zoom à 200 %.

Restitution de l’atelier

  • Une maquette desktop, tablette et mobile.
  • Une feuille de styles sans valeurs magiques inutiles.
  • Un rapport de contraste et de comportement au clavier.
Validation : La mise en page conserve son ordre et son action principale sur toutes les tailles testées.

Exercices, examens et projets

Exercice

Exercice d'application

Réaliser une mise en pratique contrôlée des notions du module.

Obligatoire Consulter
Examen

Examen de fin de module

Vérifier la maîtrise des notions essentielles du module.

Obligatoire Consulter
Projet

Projet de synthèse

Produire une solution complète et la présenter avec ses choix techniques.

Livrables :

  • Code source
  • README
  • Démonstration
Obligatoire Consulter