Séminaire

Objectifs

Estimer son travail
Utiliser Bootstrap
Utiliser les outils de développement pour tester le responsive design

Rendu

GitHub Classroom : https://classroom.github.com/a/sxjT8sGX
Délai : 1 semaine

Mise en place

Cloner le dépôt GitHub Classroom de cette semaine à côté de celui des semaines précédentes.
- git clone {url_du_depot} depuis le répertoire du cours.
- ```
inf5/
├── .../
└── sem04-framework-{pseudo}/
```
Ouvrir le dossier du dépôt dans Visual Studio Code.
Créer un fichier .gitignore à la racine du dépôt avec le contenu suivant :

./.gitignore
# macOS
.DS_Store

# Node.js
node_modules/

Estimation

Créer un ficher report.md dans le dossier du dépôt.
Estimer le temps nécessaire pour réaliser ce travail dans le rapport.
- 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	...

Outils de développement

Ouvrir les outils de développement.
Utiliser les outils de développement pour :
- 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 ?

Aventure

Copier les fichiers html du dossier sem02-html-{pseudo}/ vers le dossier sem04-framework-{pseudo}/.
- Maintenir Ctrl en cliquant sur les fichiers pour en sélectionner plusieurs à la fois.
- Sélectionner un fichier et cliquer sur un autre en maintenant Shift pour sélectionner tous les fichiers entre les deux.
Renommer index.html en aventure.html.

Créer une nouvelle page d'accueil index.html avec le contenu suivant :

index.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure Bootstrap</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <h1>Bienvenue dans l'aventure Bootstrap !</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.
      Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies
      sed, dolor.
    </p>
    <a href="aventure.html">Commencer l'aventure</a>
    <a href="contact.html">Nous contacter</a>
  </body>
</html>

Elle contient un titre, un lorem ipsum et deux liens.

Page d'accueil

Suivre les étapes ci-dessous afin d'ajouter Bootstrap à la page d'accueil en suivant la documentation en parallèle.

Ajouter un Container pour englober tout le contenu.

Ajouter une div avec la classe container qui englobe tout le contenu.

index.html
<body>
  <div class="container">
    <h1>Bienvenue dans l'aventure Bootstrap !</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
      risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec,
      ultricies sed, dolor.
    </p>
    <a href="aventure.html">Commencer l'aventure</a>
    <a href="contact.html">Nous contacter</a>
  </div>
</body>

Quel est l'effet du container sur le contenu de la page ?
Voir la différence avec un container fluide en utilisant la classe container-fluid à la place de container.
Continuer avec le container classique.

Mettre le contenu dans une Card.

Utiliser une carte avec un titre, du texte et des liens.

index.html
<body>
  <div class="container">
    <div class="card">
      <div class="card-body">
        <h1 class="card-title">Bienvenue dans l'aventure Bootstrap !</h1>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
          risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
          nec, ultricies sed, dolor.
        </p>
        <a href="aventure.html" class="card-link">Commencer l'aventure</a>
        <a href="contact.html" class="card-link">Nous contacter</a>
      </div>
    </div>
  </div>
</body>

Utiliser le Spacing pour ajouter une marge en haut de la carte.

Ajouter la classe mt-4 (margin top 4) à la div de la carte.

index.html
<body>
  <div class="container">
    <div class="card mt-4">
      <div class="card-body">...</div>
    </div>
  </div>
</body>

Utiliser le Text pour aligner le titre au centre.
- Ajouter la classe text-center à l'élément du titre.
  index.html
```
<h1 class="card-title text-center">
  Bienvenue dans l'aventure Bootstrap !
</h1>
```

Utiliser les Buttons pour les liens.

Ajouter les classes btn, btn-primary et btn-secondary aux liens.

index.html
<a href="aventure.html" class="btn btn-primary">Commencer l'aventure</a>
<a href="contact.html" class="btn btn-secondary">Nous contacter</a>

Utiliser les Flex pour aligner les boutons au centre.

Regrouper les liens dans une div et ajouter les classes d-flex et justify-content-evenly à la div.

index.html
<div class="d-flex justify-content-evenly">
  <a href="aventure.html" class="btn btn-primary">Commencer l'aventure</a>
  <a href="contact.html" class="btn btn-secondary">Nous contacter</a>
</div>

Ajouter une Navbar.

Ajouter une nav au début du body.

index.html
<body>
  <nav class="navbar navbar-expand-lg bg-body-primary">
    <div class="container">
      <a class="navbar-brand" href="#">Aventure Bootstrap</a>
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <div class="navbar-nav">
          <a class="nav-link active" href="index.html">Accueil</a>
          <a class="nav-link" href="aventure.html">Aventure</a>
          <a class="nav-link" href="contact.html">Contact</a>
        </div>
      </div>
    </div>
  </nav>
  <div class="container">...</div>
</body>

Rétrécir la fenêtre pour voir le menu hamburger et cliquer dessus pour voir les liens.

Personnaliser la page d'accueil avec Bootstrap pour la rendre plus attrayante. Voici quelques idées :
- Ajouter un Accordion pour afficher des informations supplémentaires.
- Ajouter un Carousel pour faire défiler des images.
- Ajouter des Alert pour afficher des messages importants.
- Ajouter des Badge pour afficher des notifications.

Code d'exemple

index.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure Bootstrap</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-body-primary">
      <div class="container">
        <a class="navbar-brand" href="#">Aventure Bootstrap</a>
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <div class="navbar-nav">
            <a class="nav-link active" href="index.html">Accueil</a>
            <a class="nav-link" href="aventure.html">Aventure</a>
            <a class="nav-link" href="contact.html">Contact</a>
          </div>
        </div>
      </div>
    </nav>
    <div class="container">
      <div class="card mt-4">
        <div class="card-body">
          <h1 class="card-title text-center">
            Bienvenue dans l'aventure Bootstrap !
          </h1>
          <p class="card-text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non
            risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing
            nec, ultricies sed, dolor.
          </p>
          <div class="d-flex justify-content-evenly">
            <a href="aventure.html" class="btn btn-primary">
              Commencer l'aventure
            </a>
            <a href="contact.html" class="btn btn-secondary">Nous contacter</a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Formulaire de contact

Créer une page de contact contact.html avec le contenu suivant :

contact.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Contact</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <h1>Contact</h1>
      <form>
        <label for="request">Demande</label>
        <select id="request">
          <option value="issue" selected>Problème</option>
          <option value="suggestion">Suggestion</option>
          <option value="information">Information</option>
        </select>
        <label for="email">Email</label>
        <input
          id="email"
          type="email"
          placeholder="example@domaine.com"
          required
        />
        <label for="message">Message</label>
        <textarea id="message"></textarea>
        <button type="submit">Envoyer</button>
      </form>
    </div>
  </body>
</html>

Mettre le contenu dans un Grid system pour organiser le contenu en lignes et colonnes.

contact.html
<body>
  <div class="container">
    <h1>Contact</h1>
    <form class="row">
      <div class="col">
        <label for="request">Demande</label>
        <select id="request">
          <option value="issue" selected>Problème</option>
          <option value="suggestion">Suggestion</option>
          <option value="information">Information</option>
        </select>
      </div>
      <div class="col">
        <label for="email">Email</label>
        <input
          id="email"
          type="email"
          placeholder="example@domaine.com"
          required
        />
      </div>
      <div class="col">
        <label for="message">Message</label>
        <textarea id="message"></textarea>
      </div>
      <div class="col">
        <button type="submit">Envoyer</button>
      </div>
    </form>
  </div>
</body>

Ajouter les classes pour les formulaires.

Ajouter la classe form-control aux éléments de formulaire et form-label aux labels.

contact.html
<body>
  <div class="container">
    <h1>Contact</h1>
    <form class="row">
      <div class="col">
        <label for="request" class="form-label">Demande</label>
        <select id="request" class="form-control">
          <option value="issue" selected>Problème</option>
          <option value="suggestion">Suggestion</option>
          <option value="information">Information</option>
        </select>
      </div>
      <div class="col">
        <label for="email" class="form-label">Email</label>
        <input
          id="email"
          type="email"
          class="form-control"
          placeholder="example@domaine.com"
          required
        />
      </div>
      <div class="col">
        <label for="message" class="form-label">Message</label>
        <textarea id="message" class="form-control"></textarea>
      </div>
      <div class="col">
        <button type="submit">Envoyer</button>
      </div>
    </form>
  </div>
</body>

Ajouter les classes pour le bouton.

contact.html
<button type="submit" class="btn btn-primary">Envoyer</button>

Adapter les colonnes.

Remplacer les classes col par col-6 pour que les éléments prennent la moitié de la largeur de l'écran.
Ajouter des espaces entre les .col (Gutter) en ajoutant la classe g-3 à la row.
contact.html
```
<form class="row g-3">...</form>
```

Rendre la page responsive :

col-12 col-md-6 pour que les éléments prennent toute la largeur de l'écran sur les petits écrans et la moitié de la largeur sur les écrans moyens et plus grands.
col-8 col-md-6 col-lg-4 pour que les éléments prennent les deux tiers de la largeur de l'écran sur les petits écrans, la moitié de la largeur sur les écrans moyens et un tiers de la largeur sur les écrans grands.

Par exemple :

contact.html
<body>
  <div class="container">
    <h1>Contact</h1>
    <form class="row g-3">
      <div class="col-12 col-md-6">
        <label for="request" class="form-label">Demande</label>
        <select id="request" class="form-control">
          <option value="issue" selected>Problème</option>
          <option value="suggestion">Suggestion</option>
          <option value="information">Information</option>
        </select>
      </div>
      <div class="col-12 col-md-6">
        <label for="email" class="form-label">Email</label>
        <input
          id="email"
          type="email"
          class="form-control"
          placeholder="example@domaine.com"
          required
        />
      </div>
      <div class="col-12">
        <label for="message" class="form-label">Message</label>
        <textarea id="message" class="form-control"></textarea>
      </div>
      <div class="col-12">
        <button type="submit" class="btn btn-primary">Envoyer</button>
      </div>
    </form>
  </div>
</body>

Personnaliser le formulaire en ajoutant des champs (par exemple prénom, nom, téléphone, etc.) et en adaptant les classes pour que le formulaire soit responsive.
Avancé :
- Adapter en Floating labels.
- Ajouter des types d'input différents (par exemple Checkbox, Radio, Range et/ou Input group)
- Ajouter des Validation.

Code d'exemple

contact.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure Bootstrap</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <h1>Contact</h1>
      <form class="row g-3">
        <div class="col-12 col-md-6">
          <label for="request" class="form-label">Demande</label>
          <select id="request" class="form-control">
            <option value="issue" selected>Problème</option>
            <option value="suggestion">Suggestion</option>
            <option value="information">Information</option>
          </select>
        </div>
        <div class="col-12 col-md-6">
          <label for="email" class="form-label">Email</label>
          <input
            id="email"
            type="email"
            class="form-control"
            placeholder="example@domaine.com"
            required
          />
        </div>
        <div class="col-12">
          <label for="message" class="form-label">Message</label>
          <textarea id="message" class="form-control"></textarea>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-primary">Envoyer</button>
        </div>
      </form>
    </div>
  </body>
</html>

Aventure Bootstrap

Suivre les étapes ci-dessous afin d'ajouter Bootstrap à l'aventure en suivant la documentation en parallèle.

Commencer par adapter complètement la page aventure.html puis faire de même pour les autres pages.

Ajouter les lignes suivantes dans le head du fichier HTML :

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
  crossorigin="anonymous"
></script>

Mettre le contenu dans un Container.

aventure.html
<body>
  <div class="container">
    <h1>Rangement</h1>
    <p>
      Vous décidez de faire du rangement dans votre maison. Par où commencer
      ?
    </p>
    <ul>
      <li>
        <a href="cave.html">Descendre à la cave.</a>
      </li>
      <li>
        <a href="grenier.html">Monter au grenier.</a>
      </li>
    </ul>
  </div>
</body>

Mettre le contenu dans une Card.

aventure.html
<body>
  <div class="container">
    <div class="card mt-4">
      <div class="card-body">
        <h4 class="card-title">Le rangement</h4>
        <p class="card-text">
          Vous décidez de faire du rangement dans votre maison. Par où
          commencer ?
        </p>
        <ul>
          <li>
            <a href="cave.html">Descendre à la cave.</a>
          </li>
          <li>
            <a href="grenier.html">Monter au grenier.</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

Mettre les choix dans un Button group

aventure.html
<body>
  <div class="container">
    <div class="card mt-4">
      <div class="card-body">
        <h4 class="card-title">Le rangement</h4>
        <p class="card-text">
          Vous décidez de faire du rangement dans votre maison. Par où
          commencer ?
        </p>
        <div class="btn-group">
          <a href="cave.html" class="btn btn-outline-primary">
            Descendre à la cave.
          </a>
          <a href="grenier.html" class="btn btn-outline-primary">
            Monter au grenier.
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

Voici un résultat possible (code).

info

Adapter complètement au moins deux pages avec Bootstrap.

Code d'exemple

aventure.html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Aventure Bootstrap</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <div class="container">
      <div class="card mt-4">
        <div class="card-body">
          <h4 class="card-title">Le rangement</h4>
          <p class="card-text">
            Vous décidez de faire du rangement dans votre maison. Par où
            commencer ?
          </p>
          <div class="btn-group">
            <a href="cave.html" class="btn btn-outline-primary">
              Descendre à la cave.
            </a>
            <a href="grenier.html" class="btn btn-outline-primary">
              Monter au grenier.
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Personnalisation

Bootstrap vient avec un thème par défaut, mais il est possible de le personnaliser.

Les couleurs sont définies par des variables CSS qui peuvent être surchargées pour changer les valeurs.

Créer un fichier custom.css pour ajouter des règles CSS personnalisées.

custom.css
:root {
  --bs-body-color: #839496;
  --bs-body-bg: #002b36;
}
.btn {
  --bs-btn-color: #cb4b16;
  --bs-btn-border-color: #cb4b16;
}

Ajouter le fichier custom.css après le fichier Bootstrap dans le head des fichiers HTML.
```
<link rel="stylesheet" href="custom.css" />
```
Modifier les couleurs avec un sélecteur de couleurs (sur Google ou HTML Color Codes par exemple).
Utiliser les outils de développement pour voir les variables CSS utilisées par Bootstrap et les surcharger pour personnaliser le thème.
- Clic droit sur un élément de la page > Inspecter > Styles > Regarder les variables CSS utilisées (par exemple --bs-primary) et les surcharger dans votre fichier custom.css pour changer les couleurs.
- Documentations pour Firefox et Chrome.
Voir la liste complète des variables disponibles.

Hébergement

Créer un fichier vide .nojekyll à la racine du dépôt.
Publier le site sur GitHub Pages.
Ajouter le lien du site dans le rapport.

Test

Créer un fichier package.json à la racine du dépôt avec le contenu suivant :

package.json
{
  "type": "module",
  "devDependencies": {
    "@eslint/css": "^1.0.0",
    "@html-eslint/eslint-plugin": "^0.58.1",
    "eslint": "^10.0.3"
  }
}

Exécuter la commande npm install pour installer les dépendances, cela va créer un dossier node_modules et un fichier package-lock.json.

Créer un fichier eslint.config.js à la racine du dépôt avec le contenu suivant :

eslint.config.js
import { defineConfig } from "eslint/config";
import html from "@html-eslint/eslint-plugin";
import css from "@eslint/css";

export default defineConfig([
  {
    files: ["**/*.html"],
    plugins: {
      html,
    },
    language: "html/html",
    extends: ["html/recommended"],
    rules: {
      "html/indent": ["error", 2],
      "html/no-extra-spacing-attrs": [
        "error",
        {
          enforceBeforeSelfClose: true,
        },
      ],
      "html/require-closing-tags": [
        "error",
        {
          selfClosing: "always",
        },
      ],
    },
  },
  {
    files: ["**/*.css"],
    plugins: {
      css,
    },
    language: "css/css",
    extends: ["css/recommended"],
  },
]);

Créer un fichier test.js à la racine du dépôt avec le contenu suivant :

test.js
import test from "node:test";
import assert from "node:assert/strict";
import fs from "node:fs";
import { execSync } from "child_process";

test("présence des fichiers et dossiers", () => {
  // Liste des chemins attendus dans le projet.
  const expectedPaths = [
    ".git",
    ".gitignore",
    ".nojekyll",
    "contact.html",
    "custom.css",
    "eslint.config.js",
    "index.html",
    "package.json",
    "report.md",
    "test.js",
  ];
  // Vérifie que chaque chemin existe dans le projet.
  expectedPaths.forEach((path) => {
    assert.ok(
      fs.existsSync(path),
      `Le fichier ou dossier ${path} doit exister.`,
    );
  });
});

test("validation des fichiers html et css", () => {
  // Exécute la validation en utilisant https://eslint.org/
  try {
    const output = execSync("npx eslint").toString();
    console.log(output);
  } catch (error) {
    assert.fail(error.output);
  }
});

Vérifier que les tests passent avec la commande node --test et corriger le code si cela n'est pas le cas.

Pour exécuter la validation HTML et CSS manuellement en ligne de commande :

npx eslint

Rapport

Expliquer brièvement les principales difficultés rencontrées et comment les résoudre.
Compléter les estimations.
Pousser tous les changements sur GitHub.

Exercices supplémentaires

Références

https://web.dev/learn/design

Objectifs​

Rendu​

Mise en place​

Estimation​

Outils de développement​

Aventure​

Page d'accueil​

Formulaire de contact​

Aventure Bootstrap​

Personnalisation​

Hébergement​

Test​

Rapport​

Exercices supplémentaires​

Références​

Objectifs

Rendu

Mise en place

Estimation

Outils de développement

Aventure

Page d'accueil

Formulaire de contact

Aventure Bootstrap

Personnalisation

Hébergement

Test

Rapport

Exercices supplémentaires

Références