La formation “Utilisation du framework w3.css”, nommée en abrégé “W3CSS”, permet à tout utilisateur confirmé d'un poste informatique de personnaliser un site Web multipage “responsive”, en utilisant une boîte à outils nommée w3.css. Il s'agit d'une feuille de style CSS comprenant des classes prédéfinies.
Cette boîte à outils (framework, en anglais) est disponible gratuitement sur le site w3shools.com. Il s'agit analogiquement d'un jeu de construction dont les briques sont disponibles individuellement ou assemblées en modules de différentes tailles.
La formation “W3CSS”, dispensée dans le cadre de la préparation à la validation du Titre Professionnel “Concepteur Designer UI”, est un tremplin vers l'apprentissage de l'utilisation du framework Bootstrap. Dans le programme de la préparation au Titre Pro “Concepteur Designer UI”, la formation “W3CSS” précède toujours la formation “Bootstrap”.
Programme de la formation
La formation “W3CSS” est découpée en 2 modules de 2 séquences de 4 heures chacune (4 demi‑journées). L'ordre dans lequel le programme des séquences est abordé peut varier légèrement d'une session à l'autre.
Module 1 → 8 heures (1 journée)
Prendre en main le framework w3.css
- Séquence 1-m1 → 4 heures (1 demi‑journée)
- Répérer le rôle et l'utilisation faite du framework w3.css ainsi que son origine et la documentation qui lui est associée.
- Séance 1-s1m1
- Définir un framework CSS
- Caractériser le framework w3.css
- Identifier des sites réalisés avec w3.css
→ 2 heures - Séance 2-s1m1
- Inventorier les ressources mises à disposition sur w3schools.com
- Utiliser les exemples du site w3schools.com comme “bac à sable”
→ 2 heures
- Séance 1-s1m1
- Séquence 2-m1 → 4 heures (1 demi‑journée)
- Utiliser quelques ressources en ligne du site w3schools.com pour styliser une page Web élémentaire avec w3.css
- Séance 1-s2m1
- Distinguer composants d'interface, modèles et gabarits de site Web sur w3schools.com
- Utiliser les ressources mises à disposition sur le site w3schools.com, ainsi que les tutoriels “How to”
→ 2 heures - Séance 2-s2m1
- Gérer les couleurs d'une page Web avec le framework w3.css et utiliser les thèmes chromatiques disponibles le site w3schools.com
- Utiliser la grille intégrée dans le framework w3.css et personnaliser une page Web simple en s'appuyant sur cette grille
→ 2 heures
- Séance 1-s2m1
Module 2 → 8 heures (1 journée)
Personnaliser un site Web en utilisant le framework w3.css
- Séquence 1-m2 → 4 heures (1 demi‑journée)
- Utiliser des ressources plus complexes du framework w3.css pour personnaliser un gabarit de page Web simple.
- Séance 1-s1m2
- Utiliser des gabarits de pages Web simples stylisées avec w3.css
- Personnaliser un Curriculum Vitae stylisé avec w3.css
→ 2 heures - Séance 2-s1m2
- Utiliser plusieurs fonctionnalités utiles proposées par w3schools.com lors de la personnalisation d'une page Web stylisée avec w3.css
→ 2 heures
- Séance 1-s1m2
- Séquence 2-m2 → 4 heures (1 demi‑journée)
- Utiliser le framework w3.css pour personnaliser un gabarit de sites complexes et identifier d'autres frameworks permettant d'effectuer le même type de mise en page.
- Séance 1-s2m2
- Repérer et personnaliser les gabarits de sites one-page ou multi-page utilisant le framework w3.css
- Personnaliser un portfolio multipage à partir d'un gabarit utilisant le framework w3.css
→ 2 heures - Séance 2-s2m2
- Formuler les avantages et les inconvénients du framework w3.css et imaginer quel pourrait être son usage
- Se repérer sur le Web pour rechercher et tester d'autres frameworks CSS simples à utiliser
→ 2 heures
- Séance 1-s2m2
.
Titre Pro Concepteur Designer UI
Les compétences acquises et validées au cours de la formation W3CSS s'inscrivent dans le programme de la préparation à la validation du Titre Professionnel Concepteur Designer UI.
Les compétences acquises au cours de la formation “W3CSS” permettent d'envisager la validation d'une partie seulement des compétences visées pour le titre. Pour envisager la validation de toutes les compétences du Titre Pro Concepteur Designer UI, d'autres formations doivent nécessairement compléter la formation “W3CSS”.
▶ Public concerné • Formation “W3CSS”
La formation “Utilisation du framework w3.css” s'adresse à toute personne souhaitant :
- acquérir les compétences fondamentales pour utiliser un framework CSS et possédant toutefois les compétences requises en informatique (voir plus bas) ;
- préparer la validation de la compétence professionnelle CP7 intitulée “Intégrer des pages Web”. Cette compétence fait partie du 3e CCP du Titre Professionnel “Concepteur Designer UI”
▶ Prérequis • Formation “W3CSS”
Être capable de créer, à partir de zéro, une page HTML stylisée en CSS avec header, menu, colonne latérale, zone de contenus et footer, en utilisant les langages HTML5 et CSS3.
Être capable d'utiliser à bon escient, dans une feuille de style CSS, les attributs class et id.
Être capable d'intégrer dans une page Web un script JS déjà codé
▶ Outils utilisés • Formation “W3CSS”
- Un éditeur de code en local (Brackets ou Visual Studio Code) ou en ligne (Repl.it)
- Un navigateur Web (Chrome ou Firefox)
▶ Durée et lieu de formation • Formation “W3CSS”
4 séances d'une demi‑journée (16 heures), au Pôle Plurimédia du lycée La Fayette, à Clermont‑Ferrand, 21 boulevard Robert Schuman.
Objectifs • Formation “W3CSS”
| 2 objectifs généraux | Registres de savoir |
|---|---|
| Utiliser les ressources du site w3shools.com concernant le framework w3.css | Savoir faire |
| Personnaliser un modèle ou un gabarit construit avec le framework w3.css | Savoir faire |
À la fin de la formation “W3CSS”,
l'apprenant sera capable de :
Évaluation des acquis • Formation “W3CSS”
Une évaluation des acquis en cours de formation s'effectue de manière formative, permettant une remédiation individualisée quand cela est nécessaire.
Des travaux pratiques permettent à chaque apprenant, au cours de chaque module, de se situer par rapport à des critères d'exigence communiqués à tous.