Initiation aux frameworks CSS

Cette formation en 2 modules de 8 heures chacun est incluse dans la formation “Initiation au codage Web”. Elle est précédée par la formation “Initiation aux langages HTML et CSS” et suivie de la formation “Initiation à CSS Grid et à Flexbox par la BD numérique”.

Présentation

Prérequis :

• Maîtriser la gestion de fichiers et dossiers sur un poste informatique
• Savoir installer un logiciel sur un poste informatique
• Disposer d'un périphérique de sauvegarde (clé USB ou disque dur externe) ou d'un espace de sauvegarde dans le Cloud (DropBox, PCloud ou autre)

Pour participer à la formation ”Initiation aux frameworks CSS”, il est nécessaire d'voir suivi la formation “Initiation aux langages HTML et CSS” ou être capable de personnaliser les contenus et le style d'un gabarit de page Web et de mettre la page personnalisée en ligne, sur les serveurs d'un hébergeur.

Durée : 4 demi-journées (16h)

Objectifs :

• Éditer un site simple en utilisant le framework W3-CSS
• Personnaliser un gabarit de site multipage construit à l'aide d'un framework CSS

Les sites réalisés en formation seront mis en ligne, en utilisant le client FTP Filezilla, sur les serveurs d'un hébergeur offrant un compte gratuit.

Outils utilisés :

• Un navigateur Web (Chrome)
• Un éditeur de code (Brackets ou Phoenix)
• Un éditeur Markdown (StackEdit)
• Un logiciel client FTP (Filezilla)

Programme

L'ordre dans lequel le programme des séquences est abordé peut varier légèrement d'une session à l'autre.

Module 1 : Prendre en main le framework w3.css

Séquence 1-m1 : Repé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.

Séance 2-s1m1

• Inventorier les ressources mises à disposition sur le site w3schools.
• Utiliser les exemples du site w3schools.com comme “bac à sable”.

Séquence 2-m1 : Utiliser quelques ressources en ligne 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 disponibles sur le site w3schools
• Utiliser les ressources mises à disposition sur le site w3schools.com, ainsi que les tutoriels “How to”.

Séance 2-s2m1

• Gérer les couleurs d'une page Web avec le framework w3.css et utiliser les thèmes chromatiques disponibles sur 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.

Module 2 : Personnaliser un site Web en utilisant le framework w3.css

Séquence 1-m2 : Utiliser des ressources plus complexes du framework w3.css pour personnaliser un gabarit de site one-page

Séance 1-s1m2

• Utiliser des gabarits de pages Web simples stylisées avec w3.css.
• Personnaliser un gabarit de site one-page en modifiant les classes proposées.

Séance 2-s1m2

• Utiliser des fonctionnalités proposées par le site w3schools pour personnaliser une page Web.
• Personnaliser un gabarit simple de site multi-pages, stylisé avec w3.css.

Séquence 2-m2 : Utiliser le framework w3.css pour personnaliser un gabarit de site complexe et identifier d'autres frameworks similaires

Séance 1-s2m2

• Collecter et personnaliser des gabarits de sites one-page ou multi-pages utilisant le framework w3.css.
• Personnaliser un gabarit complexe de portfolio multi-pages stylisé avec w3.css.

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 catégoriser des frameworks CSS..

Module 3 : Personnaliser des gabarits construits avec d'autres frameworks CSS

Séquence 1-m3 : Comparer des frameworks CSS minimalistes et simples

Séance 1-s1m3 : Comparer des frameworks CSS minimalistes

• Établir les points de comparaisons entre les frameworks concernés
• Identifier quelques frameworks minimalistes à tester (Miligram, Spectre, Skeleton).
• Tester et comparer entre eux les frameworks minimalistes identifiés puis les comparer avec w3.css. Synthétiser les résultats.

Séance 2-s1m3 : Comparer des framework CSS simples

• Identifier quelques frameworks simples à tester (Basscss, Pure.css, Butter Cake v3, Bootstrap, Foundation).
• Tester et comparer entre eux les frameworks simples identifiés puis les comparer avec w3.css. Synthétiser les résultats.

Séquence 2-m3 : Utiliser les alternatives à w3.css pour personnaliser des gabarits ou créer des sites Web

Séance 1-s2m3 : Personnaliser des gabarits de pages Web stylisées avec des alternatives simples à w3.css

• Repérer les frameworks proposant des layouts (ou maquettes) de pages à personnaliser.
• Personnaliser quelques layouts en vue de publier des pages web utilisant les frameworks css concernés.

Séance 2-s2m3 : Créer des sites Web stylisées avec des alternatives simples à w3.css

• Architecturer un site multi-pages en utilisant les layouts personnalisables repérés lors de la séance précédente.
• Finaliser un site multi-pages stylisé avec un framework CSS simple.