P1.2a - Échafaudage

Squelette de la page HTML

Requis à réaliser individuellement

Chaque membre de l'équipe doit créer sa propre page HTML nommé dans les 2 cas : index.html. Le fichier index.html de la langing page sera placé à la racine du dossier du projet 📁 alors que le fichier index.html de l'appli sera placé dans un sous-dossier 📁 /app. Créez la structure de base de votre page HTML (head, body etc). Dans chacune de votre page HTML, copiez-collez les balises link et script de Bootstrap disponible dans la section CDN via jsDelivr. Ceci permettra d'inclure les fonctionnalités de Bootstrap dans votre projet via ce qui s'appel un CDN (Content Delivery Network), soit des fichiers hébergés en ligne afin de permettre de les inclure rapidement et facilement dans un projet et de maximiser la cache des navigateurs. Attention, dans le fichier HTML, rappelez-vous à quel endroit je vous conseille d'inscrire ces liens externes vers un fichier CSS et vers un fichier JavaScript. Assurez-vous d'avoir les balises HTML nécessaires au bon fonctionnement de Bootstrap, tel que présenté dans l'introduction de Bootstrap. N’oubliez pas la balise meta qui vous permet d’utiliser l’encodage utf-8 afin que vos accents soient pris en compte. Indentez toujours votre code correctement (HTML ET CSS). Raccourcis VS Code sur Windows : Maj+Alt+F, sur Mac : Maj+Option+F Échafaudage du projet

L’échafaudage, plus connu sous son nom anglophone “scaffolding”, consiste à créer une arborescence de dossiers et de fichiers qui seront utilisés afin de créer un site web. Le terme a été emprunté au domaine de la construction, où avant même de poser la première brique, un échafaudage est monté afin de simplifier la tâche à accomplir.

Requis à réaliser en équipe

D'abord lisez ces précisions concernant l'étape #13 et l'étape #14.

Concernant l'étape #13 - Les styles de headings (h1 à h6)

Règle HTML et SEO: Une balise <h(n)> ne peut être suivie que par une balise <h(n+1)> dans l'ordre du code source : on ne saute pas de niveau.

Par exemple, après une balise <h1>, il ne peu y avoir qu'une balise <h2>, pas autre chose.
Après une balise <h3>, il ne peut y avoir qu'une <h4>.

Mais parfois on veut visuellement donner le style de h5 à un h3. Donc ça nous permet d’utiliser la bonne balise mais avec le style d’une autre, donc on aurait par exemple:

<h3 class="h5">Titre de section</h3> Notez aussi, toujours selon les règles SEO, qu'il ne devrait y avoir qu'un seul titre de niveau <h1> par page, c'est à dire le titre de la dite page. Ensutie, si vous avez plusieurs sections dans la page, avec des titres de section, il conviendrait d'utiliser la balise <h2>, etc.

Concernant l'étape #14 - Les commentaires

/*--------------------------------------------------------- # Styles Généraux ---------------------------------------------------------*/ header{ ... } h1{ ... } footer{ ... } /*---------------------------------------------------------- # Section Hero ----------------------------------------------------------*/ section.hero{ ... }

Requis

Créez un dossier de projet commun (ce dossier sera poussé sur github au prochain cours). Ajoutez un sous-dossier nommé app. À la racine du dossier de projet, ajoutez le fichier index.html qui correspond à la landing page. Dans le sous-dossier app, ajoutez le fichier index.html qui correspond à l'appli. Créez à la racine du dossier de votre projet les sous-dossiers suivant 📁: assets, css, js, scss, vendors À l'intérieur de votre dossier css, ajoutez un fichier nommé main.css. Importez cette feuille de style sur chacune des pages HTML, après celle de Bootstrap. À l'intérieur de votre dossier js, ajoutez un fichier nommé script.js. Importez ce fichier JavaScript sur chacune des pages HTML, après celle de Bootstrap. À l'intérieur de votre dossier assets, créez un sous-dossier artists et un autre nommé artworks. Ces sous-dossiers contiendront les photos des artistes et les photos des œuvres de votre site web. Toutes les autres images seront logées directement dans assets. C'est une bonne pratique de classer les images par catégorie lorsqu'on fait un site web et qu'on a des centaines d'images à gérer. Ouvrez votre fichier main.css, ce sera le fichier qui contiendra tous les styles communs au 2 pages (landing page et app). Créez des variables css qui représentent chacune des couleurs de votre palette. Liez vos fichiers de polices de caractère (fontes) via la balise link dans le head du fichier HTML ou via @import dans le fichier CSS. Créez des variables pour le nom de vos différentes fontes. Stylisez vos 6 niveaux de titre (headings) en utilisant le sélecteur de la balise et en créant aussi une classe avec le nom de la balise, par exemple :
h1, .h1{ font-size: 40px; font-weight: 900; color: var(--ma-couleur-primaire); }
h2, .h2{ font-size: 34px; font-weight: 700; color: var(--ma-couleur-primaire); } Préparez des groupes de commentaires CSS qui vont séparer les sections de vos styles. Par exemple, tous les styles généraux vont se trouver sous le commentaire
/*----- Styles Généraux -----*/
et les styles de la section Hero, se retrouveront sous le commentaire
/*----- Section Hero -----*/ Copiez-collez le fichier main.css 2 fois et renommez ces nouveaux fichiers styles-app.css et styles-lp.css. Ces fichiers contiendront les styles spécifiques à chacune des pages. Allez enlever tous les styles déjà écrits dans ces deux nouvelles feuilles de style pour partir de zéro (vous pouvez conserver les bloc de commentaires, ils vous serviront). Importez ces feuilles de styles dans les pages HTML respectives, après main.css.