04 Framework CSS
Utiliser un framework CSS.
- Estimer son temps de travail
- Utiliser l'outil de développement de son navigateur
- Utiliser le framework CSS Bootstrap
Rendu
- GitHub Classroom : https://classroom.github.com/a/KYG0YLFX
./report.md
: Rapport individuel en Markdown.
- Délai : 1 semaine
Mise en place
- Cloner le nouveau dépôt Git dans le répertoire du cours.
- Ouvrir le répertoire du dépôt Git dans Visual Studio Code.
Estimation
- Estimer le temps nécessaire pour réaliser ce travail.
- Découper le travail en tâches pour faciliter l'estimation.
- Une fois terminé, comparer le temps estimé avec le temps réellement passé.
Tâche | Temps estimé | Temps passé | Commentaire |
---|---|---|---|
Estimation | 10m | 15m | ... |
... | ... | ... | ... |
Total | 2h | 1h30 | ... |
Visual Studio Code
- Installer l'extension Prettier - Code formatter :
-
Extensions
(dans la barre latérale) > RechercherPrettier
> Installer
-
- Configurer Prettier comme formateur par défaut :
- (en bas à gauche) >
Settings
> RechercherDefault Formatter
> ChoisirPrettier
- (en bas à gauche) >
Pour faciliter le développement :
- Sauvegarde automatique
- (en bas à gauche) >
Settings
> RechercherAuto Save
> ChoisirafterDelay
- (en bas à gauche) >
- Formatage automatique du code
- (en bas à gauche) >
Settings
> RechercherFormat On Save
> Activer
- (en bas à gauche) >
- Commenter/décommenter du code :
- Sélectionner le code à commenter
- Cmd + / (macOS) ou Ctrl + / (Windows)
- Répéter pour décommenter
- Sélectionner plusieurs occurrences d'un texte :
- Sélectionner du texte
- Cmd + D (macOS) ou Ctrl + D (Windows)
- Répéter pour sélectionner les occurrences suivantes
- Vous pouvez maintenant modifier toutes les occurrences en même temps
- Rechercher et remplacer :
- Cmd + F (macOS) ou Ctrl + F (Windows)
- Ajouter Shift pour rechercher dans tout le projet
- Cliquer sur pour remplacer
- Cmd + F (macOS) ou Ctrl + F (Windows)
Un raccourci pour les gouverner tous. Un raccourci pour les trouver.
- macOS : Cmd + Shift + P
- Windows : Ctrl + Shift + P
- Permet de rechercher des commandes (ouvrir le rendu Markdown, formater le document, ouvrir le terminal, etc.)
- Sans le Shift pour rechercher des fichiers (ou sans le
>
)
Outils de développement
- Découvrir les outils de développement. Plusieurs façons d'y accéder :
- Aller sur une page web.
- Clic-droit >
Inspecter
- F12
- Se documenter sur L'inspecteur : explorateur du DOM et éditeur de CSS
- Utiliser les outils de développement pour :
- Observer les styles appliqués à un élément
- Clic-droit sur un élément >
Inspecter
> Sous-ongletStyles
- Clic-droit sur un élément >
- Modifier le style d'un élément :
- Clic-droit sur un élément >
Inspecter
> Changer la couleur de fond en rouge par exemple
- Clic-droit sur un élément >
- Observer les éléments de la page :
- Survoler les éléments HTML dans le panneau
Inspecteur
/Éléments
pour les mettre en surbrillance
- Survoler les éléments HTML dans le panneau
- Modifier le contenu d'un élément :
- Supprimer un élément HTML de la page
- Tester le responsive design :
- (en haut à droite de la fenêtre des outils de développement) > Choisir un appareil ou personnaliser les dimensions
- Comment réagit la page sur un écran plus petit ?
- (en haut à droite de la fenêtre des outils de développement) > Choisir un appareil ou personnaliser les dimensions
- Observer les styles appliqués à un élément
Grille Bootstrap
- Lire la documentation de Bootstrap.
- Faire les exercices sur Grille Bootstrap.
- CodePen est un IDE en ligne pour écrire du code HTML, CSS et JavaScript.
- Faire au moins deux étapes.
Étape 1
Indice 1
Tout mettre dans un Utiliser des container
.Indice 2
row
et des col
.Solution
<div class="container">
<div class="row">
<div class="col">
<div class="block red"></div>
</div>
<div class="col">
<div class="block blue"></div>
</div>
<div class="col">
<div class="block green"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="block yellow"></div>
</div>
<div class="col">
<div class="block purple"></div>
</div>
<div class="col">
<div class="block teal"></div>
</div>
</div>
</div>
Étape 2
Indice 1
Utiliser les Utiliser qu'une seule Les breakpoints s'appliquent à partir (plus grand) de la largeur spécifiée.col-xl-*
avec les classes col-*
.Indice 2
row
.Indice 3
Solution
<div class="container">
<div class="row">
<div class="col-12">
<div class="block red"></div>
</div>
<div class="col-12 col-xl-4">
<div class="block blue"></div>
</div>
<div class="col-12 col-xl-4">
<div class="block green"></div>
</div>
<div class="col-12 col-xl-4">
<div class="block yellow"></div>
</div>
<div class="col-12 col-xl-6">
<div class="block purple"></div>
</div>
<div class="col-12 col-xl-6">
<div class="block teal"></div>
</div>
</div>
</div>
Étape 5
Utiliser Horizontal alignment
Aventure
- Copier votre aventure de la semaine passée dans le répertoire Git.
- Utiliser Bootstrap pour améliorer le style de votre aventure.
- Utiliser un CDN pour inclure Bootstrap dans votre projet.
- Un CDN est un réseau de serveurs qui stockent des fichiers (bibliothèques, frameworks, etc.) pour les rendre accessibles à tous. Votre page HTML va donc chercher ces fichiers sur un serveur distant.
- Ajouter les lignes suivantes dans le
head
de vos fichiers HTML :<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"
></script>
- Utiliser un CDN pour inclure Bootstrap dans votre projet.
- Le résultat final devrait ressembler à cette page (code).
- Renommer
index.html
enaventure.html
.- S'inspirer du CDN Starter dans les exemples.
- Regarder le code source de la page pour voir comment elle est construite : de manière statique sur GitHub ou interactive sur StackBlitz.
- Ajouter une NavBar qui contient :
- Un logo (par exemple Bootstrap)
- Le nom de votre aventure
- Un lien vers la page d'accueil
- Un lien vers votre aventure
- Un lien vers une page de contact (
contact.html
)
- Mettre le contenu dans un Container dans une Grid et dans une Card.
- Mettre les choix dans un Button group
- S'inspirer du CDN Starter dans les exemples.
- Créer un nouveau fichier
index.html
pour votre votre page d'accueil.- Contient un titre, un lorem ipsum et deux boutons.
- Utiliser Text pour aligner le titre au centre.
- Utiliser Flex pour aligner les boutons au centre.
- Créer le fichier
contact.html
pour la page de contact.- Contient un formulaire de contact.
- Utiliser Form.
- Contient au moins un Select, un Input, un Textarea, un Checkbox, un Input group et un Button.
- Configurer les colonnes pour adapter le formulaire selon la largeur de l'écran.
- Utiliser des Floating labels.
- Ajouter des Validation.
- Contient un formulaire de contact.
- Renommer
- Personnaliser les variables CSS
- Créer un fichier
custom.css
pour ajouter des règles CSS personnalisées.:root {
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-body-color: #212529;
} - Ajouter le fichier
custom.css
après le fichier Bootstrap dans lehead
de vos fichiers HTML.<link href="custom.css" rel="stylesheet" />
- Modifier les couleurs (avec
color picker
sur Google ou sur Codes Couleur HTML par exemple). - Liste complète des variables disponibles.
- Créer un fichier
- Publier votre aventure sur GitHub Pages.
- Configuration d’une source de publication pour votre site GitHub Pages
- Créer un fichier vide
.nojekyll
à la racine du dépôt pour désactiver Jekyll. - Le site devrait être accessible à l'adresse
https://hepl-bs21inf5.github.io/sem04-framework-css-{pseudo}/
. - Copier le lien de votre aventure dans le fichier
report.md
.
Adapter au moins complètement une page avec Bootstrap ainsi que les pages d'accueil et de contact.
Gitignore
Créer un fichier .gitignore
dans le dépôt Git pour ignorer les fichiers et dossiers inutiles :
__pycache__/
.pytest_cache/
.DS_Store
Test
Pour tester votre projet, ajouter un fichier test_web.py
contenant :
from glob import glob
from os import path
from subprocess import check_output
def test_index():
assert path.isfile("index.html"), "Il faut le fichier 'index.html'."
def test_html():
for file in glob("**/*.html", recursive=True):
output = check_output(
[
"curl",
"-s",
"-H",
"Content-Type: text/html",
"--data-binary",
f"@{file}",
"https://validator.w3.org/nu/?out=gnu&level=error",
],
).decode()
assert "" == output, f"{file} {output}"
def test_css():
count: int = 0
for file in glob("**/*.css", recursive=True):
count += 1
output = check_output(
[
"curl",
"-s",
"-H",
"Content-Type: text/css",
"--data-binary",
f"@{file}",
"https://validator.w3.org/nu/?out=gnu",
],
).decode()
assert "" == output, f"{file} {output}"
def test_filename():
for file in glob("**/*", recursive=True):
assert match(
"^[a-z0-9\\\.\-_/]+$", file
), f"{file} ne doit contenir que des lettres minuscules, chiffres, tirets ou underscores. "
Lancer les tests avec pytest --tb=no -vv
.