La maquette HTML

1. Création de la grille Bootstrap

Avant de se lancer dans le code, il faut créer le squelette du site dans un fichier index.html. Créez la structure HTML suivante, en utilisant la grille Bootstrap :

Pour les téléphones portables

Pour les tablettes et écrans de téléphone en mode paysage

Pour les laptops et grands écrans

Ajoutez ensuite à la structure HTML le fichier bootstrap.min.css et un fichier style.css, dans un dossier nommé css pour styliser la page. Sans oublier de faire appel à la balise meta viewport, pour le responsive.

Puis, ajoutez dans le body un <div> avec une classe container-fluid qui va englober l’intégralité du contenu.

Ce site est relativement simple à baliser en HTML5 pour la structure du contenu, car chaque partie est représentée par une couleur différente.

Nous avons donc le header, puis plusieurs sections, et le footer. Ajoutez alors à ces balises la classe row.

À l’intérieur des row, créez les différentes colonnes selon le type d’écran. Ajoutez des <div> avec les classes Bootstrap pour les colonnes selon le type d’écran. Il faut tester au fur et à...