2.2 – Styliser avec CSS

🏆 Compétence cible

C2 – Interface utilisateur web statique et adaptable (27h – Niveau 1)
L’apprenant doit être capable de styliser des pages web en utilisant efficacement les propriétés CSS, de créer des mises en page modernes et de développer une interface responsive et animée.

🧩 Micro-compétence

2.2 – Styliser avec CSS (16h)
Acquérir les bases du CSS, apprendre à utiliser les sélecteurs et propriétés essentielles, maîtriser les mises en page modernes (Flexbox, Grid), les techniques avancées (variables, media queries) et intégrer des transitions simples pour améliorer l’expérience utilisateur.

📝 Description de l’autoformation

Cette autoformation permet aux apprenants de se familiariser avec les styles CSS, de la mise en forme basique des éléments HTML jusqu’à la création de layouts modernes et responsives. L’accent est mis sur les bonnes pratiques d’organisation du code CSS, la compréhension de la cascade et des unités, et l’utilisation d’outils contemporains comme Bootstrap.

UA 2.2.1 – Fondamentaux de la mise en forme

  1. 🎯 Objectif global

    • Comprendre les notions de base du CSS (sélecteurs, cascade, typographie, couleurs) et savoir appliquer des styles simples aux éléments HTML.

  2. 📚 Liste des chapitres

    • Chapitre 1 : Sélecteurs, cascade, unités (2h).
    • Chapitre 2 : Typographie, couleurs, bordures, modèle de boîte (2h).

  3. 📄 Livrable attendu

    • Créer une page HTML avec des styles de base pour le texte, les couleurs et les bordures, en appliquant les bonnes pratiques d’organisation CSS.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Identifier les propriétés CSS de base et les appliquer.
    • Niveau 2 : Organiser et structurer un fichier CSS fonctionnel.
    • Niveau 3 : Produire une mise en forme cohérente et soignée.

UA 2.2.2 – Mises en page modernes avec CSS

  1. 🎯 Objectif global

    • Maîtriser les mises en page modernes avec Flexbox et Grid Layout pour concevoir des interfaces adaptatives.

  2. 📚 Liste des chapitres

    • Chapitre 3 : Flexbox (3h).
    • Chapitre 4 : Grid Layout (3h).

  3. 📄 Livrable attendu

    • Construire une page web multi-sections (header, sidebar, contenu, footer) en utilisant Flexbox ou Grid, avec un agencement responsive.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Créer des alignements simples avec Flexbox ou Grid.
    • Niveau 2 : Concevoir une structure de page cohérente avec ces technologies.
    • Niveau 3 : Produire un layout complet et responsive.

UA 2.2.3 – Techniques CSS avancées

  1. 🎯 Objectif global

    • Découvrir des techniques CSS avancées comme l’utilisation des variables CSS et des media queries.

  2. 📚 Liste des chapitres

    • Chapitre 5 : Variables CSS (1h).
    • Chapitre 6 : Media Queries (2h).

  3. 📄 Livrable attendu

    • Adapter une page web pour différentes résolutions (mobile, tablette, desktop) en utilisant des media queries et variables CSS.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Comprendre l’usage des variables CSS.
    • Niveau 2 : Mettre en place des media queries pour adapter le contenu.
    • Niveau 3 : Optimiser une page web pour un rendu multi-support.

UA 2.2.4 – Animation et transition

  1. 🎯 Objectif global

    • Mettre en place des effets d’animation et de transition pour enrichir l’expérience utilisateur.

  2. 📚 Liste des chapitres

    • Chapitre 7 : Transitions et animations simples (1h).

  3. 📄 Livrable attendu

    • Ajouter des effets de survol et des transitions fluides (par exemple, sur des boutons ou des images) dans une page web.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Créer des transitions simples.
    • Niveau 2 : Ajouter des animations cohérentes et utiles.
    • Niveau 3 : Combiner animations et transitions pour un rendu professionnel.

UA 2.2.5 – Outils CSS modernes

  1. 🎯 Objectif global

    • Découvrir les outils modernes comme les préprocesseurs et Bootstrap pour accélérer la conception.

  2. 📚 Liste des chapitres

    • Chapitre 8 : Introduction aux préprocesseurs CSS (1h).
    • Chapitre 9 : Découverte de Bootstrap (1h).

  3. 📄 Livrable attendu

    • Reproduire une page HTML en utilisant uniquement Bootstrap ou un préprocesseur CSS.

  4. 🧪 Grilles d’évaluation

    • Niveau 1 : Comprendre le rôle des outils CSS modernes.
    • Niveau 2 : Intégrer Bootstrap pour un layout de base.
    • Niveau 3 : Adapter et personnaliser les composants Bootstrap.