Travail pratique #2 - Partie 2¶

Travail pratique à remettre

Ce travail pratique est à remettre et compte dans le cumul de la note finale du cours.

Pondération :

Travail pratique : 5% session
Questionnaire de la semaine 7 : 2% session

Détails :
- Ce travail peut être fait en équipe de 2
- Bien lire les instructions
- Valider le code avec le validateur avant la remise
- La date limite de remise est disponible sur LÉA
- Deux périodes de laboratoire sont allouées pour ce travail

Préparation¶

Info

La partie 2 du TP consiste à :

Créer une deuxième page du site
Appliquer les styles CSS généraux (faits dans la partie 1)
Appliquer les styles CSS spécifiques (à faire avec cet énoncé)

Télécharger les images de la partie 2

Extraire les images et les déposer dans le dossier img du projet

Créer une nouvelle page HTML et la nommer realisations.html
Créer une nouvelle feuille de styles CSS pour cette nouvelle page
Assurez-vous que votre barre de navigation de la page index mène à la realisations page dans l'item "Réalisations"
Copier-coller le code de la page index vers la page réalisations
Dans la page Réalisations :
- Conserver le lien vers les styles CSS généraux
- Supprimer le lien vers les styles CSS de la page index
- Ajouter un lien vers les styles CSS spécifiques de la nouvelle page réalisations
- Supprimer le contenu du <main>, mais conserver la balise <main>

Dans la balise <main> maintenant vide, copier-coller le code HTML suivant :

 <section id="projets">
  <h2>Projets</h2>
  <ul>
    <li>
      Maison sur le lac
      <img src="img/lac.jpg" alt="Maison sur le lac">
    </li>
    <li>
      Le repos du guerrier
      <img src="img/repos.jpg" alt="Statue de buddha">
    </li>
    <li>
      Dubai en couleurs
      <img src="img/dubai.jpg" alt="Coucher de soleil sur Dubai">
    </li>
    <li>
      Québec en feux
      <img src="img/feux.jpg" alt="Feux d'artifices">
    </li>
  </ul>
</section>

<section id="realisations">
  <h2>Réalisations</h2>
  <div id="grille_realisations">
    <img id="paddle" src="img/paddle.jpg" alt="Groupe en paddle">
    <img id="dj" src="img/DJ.jpg" alt="DJ avec masque">
    <img id="groupe" src="img/group.jpg" alt="Groupe au coucher du soleil">
    <img id="couleurs" src="img/colors.jpg" alt="Guerre de couleurs">
    <img id="conference" src="img/talk.jpg" alt="Conférencier">
    <img id="arche" src="img/arch.jpg" alt="Arche architechturale">
  </div>
</section>

<section id="categories">
  <h2>Catégories</h2>
  <div id="blocs-categories">
    <div id="retraites">
      <h5>Retraites</h5>
      <img src="img/meditate.jpg" alt="Méditation en forêt">
    </div>
    <div id="evenements">
      <h5>Événements</h5>
      <img src="img/event.jpg" alt="Événement festif">
    </div>
    <div id="groupes">
      <h5>Groupes privés</h5>
      <img src="img/group.jpg" alt="Groupe privé">
    </div>
    <div id="voyages">
      <h5>Voyages</h5>
      <img src="img/travel.jpg" alt="Paysage de Tunisie">
    </div>
  </div>
</section>

Vous avez donc maintenant une page HTML complète, avec les styles généraux du site web.

Il faut maintenant écrire le CSS spécifique à cette page.

Modification aux styles généraux¶

Dans la nouvelle page, on veut que les sections du main s'affichent plein écran et non centrées.

Dans la requête média des écrans larges des styles généraux :
couper les styles appliqués à main section
coller ces styles dans la requête média de 900px des styles spécifiques à index.html

!!!note "Bug" Plusieurs d'entre vous aviez des bugs d'affichage causés par ces styles. En les déplaçant, on règle le bug de largeur limitée à 50% des sections de la page réalisations

Les styles spécifiques¶

Pour les prochaines étapes, on n'a besoin que de la nouvelle feuille CSS créée pour la page realisations.html.

📱 Les styles Mobile first¶

Important

On se rappelle que les styles de base, SANS requête média, sont les styles pour mobile d'abord.

Ces styles sont la base du site web et s'appliquent à toutes les tailles d'écrans, à moins d'être modifiés dans les requêtes média.

Pour toutes les images, donner une largeur à 100%
Sur les sections du main, modifier les marges et le padding initial comme suit :
- Marge du haut et du bas à 2rem
- padding tout le tour à 2rem
Organiser le main en grille :
- Transformez le main en grille
- Faites en sorte que la grille affiche la section des réalisations d'abord, puis la section des projets en-dessous.
  
  Ne pas modifier le HTML ! C'est la grille qui gère l'ordre des sections !
- Appliquer un espace entre les cellules de 2rem (gap)
Cacher la section des catégories

Section Projets sur mobile¶

Sur la liste ul de la section projets
- Utiliser un affichage en flex
- centrer le contenu sur l'axe du flex
- permettre au éléments de se placer sur plus d'une ligne quand l'espace est restreint (flex-wrap)
- retirer les puces de liste
- appliquer un espace (gap) entre les enfants de 0.5rem
- retirer toute marge intérieure (padding)
Sur les items de liste
- largeur de 45%
- alignement du texte centré

Résultat

TP2

Section Réalisations sur mobile¶

Sur la div nommée #grille_realisations
- Affichage en grille
- Créer une grille qui affiche l'arche sur une ligne, puis l'image des couleurs et l'image de groupe sur une deuxième ligne
- Aligner les items pour qu'ils s'étirent (stretch)
- Appliquer un espace entre les cellules de 0.2rem
Cacher les images qui ne doivent pas s'afficher

Résultat

TP2

💻 Écrans Médium¶

Passons maintenant aux écrans de taille médium : tablettes et petits portables.

Créer une requête média pour détecter les écrans d'au moins 600px
Modifier les zones de la grille du main
- projets à gauche à 2 fragments d'écran de large
- realisations à droite à 5 fragments d'écran de large
- catégories sur une ligne en-dessous en pleine largeur

Section projets¶

Dans la section projets, redimentionner les items de liste à 100%

TP2

Section réalisations¶

Afficher les images conférence et DJ en inline
Modifier les zones de la grille des réalisations pour
- Ligne 1 : conférence et DJ
- Ligne 2 : arche
- Ligne 3 : couleurs et groupe

TP2

Section Catégories¶

Afficher en bloc la section des catégories
Sur la div blocs-categories :
- Affichage en flex
- enfants espacés avec marges égales (space-evenly)
- espace entre les enfants de 0.5rem (gap)
Sur les div dans blocs-catégories
- coins arrondis à 2rem
- largeur de 20%
Sur les titres
- couleur de fond
- texte centré
Cacher les images des 4 div enfants
Sur chaque div enfant, appliquer une image de fond :
- retraites : meditate.jpg
- événements : event.jpg
- groupes : group.jpg
- voyages : travel.jpg
Avec l'attribut background-position, positionner les images de fond pour mieux voir un bout d'image

TP2

🖥️ Écrans larges¶

Passons maintenant aux écrans de taille large : grandes tablettes et ordinateurs.

Créer une requête média pour détecter les écrans d'au moins 1000px
Modifier les zones de la grille du main
- projets à gauche à 1 fragment d'écran
- realisations au centre à 4 fragments d'écran
- catégories à droite à 1 fragment d'écran

Section Réalisations¶

Afficher l'image paddle en inline
Modifier les zones de la grille des réalisations pour obtenir la grille suivante :

TP2

Section Catégories¶

Changer la direction du flex pour un affichage en colonnes
Afficher les images (inline) de cette section
Sur les div enfant :
- retirer l'image de fond (none)
- largeur de 100%
Sur les titres
- retirer les marges
- padding de 1rem
- coins du haut arrondis - mais pas ceux du bas!

lorsque la souris passe sur une des div enfant, appliquer la transformation suivante :

transform: translateY(-0.5rem); /*translation vers le haut*/
transition: transform 0.3s; /*transformation douce en transition*/

TP2

Page finale¶

Sur mobile

TP2

Sur écrans médium

TP2

Sur écrans larges

TP2

✅ Validation¶

Assurez-vous qu'il n'y a plus d'erreur dans le code.

Validateur

❓ Questionnaire ❓¶

Questionnaire qui compte pour 2% de la note.

À remplir avant le 19 octobre 2025.

Se connecter à Forms

📝 Grille de correction¶

Élément	Points
Header + Footer	3pts
Nav	2pts
CSS index	4pts
CSS realisations	4pts
Règles de programmation	1pt
Aucune erreur dans le code	1pt
TOTAL	15pts

Compte pour 5% de la session

Vérifications principales :

Utilisation des flex aux bons endroits
Utilisation des grilles aux bons endroits
Bonnes requêtes média
Affichages respectés
Présentation finale telle que le site de référence

✅ Remise¶

Remettre sur LÉA d'ici au 19 octobre 2025.

Compresser le projet en totalité
Remettre sur LÉA dans Travaux -> TP2