Pour ma page web, je voulais créer une page de conseils d'entretien pour plantes d'intérieur pour débutants.
Je voulais que ce soit organisé et clair, et que l'utilisateur puisse trouver les informations qu'il cherche facilement, sans avoir à passer plusieurs paragraphes avant de trouver celui qui l'intéresse.
Je souhaitais aussi avoir des repères visuels, grâce à des images des plantes pour lesquelles on peut trouver des conseils.
Dès le départ j'ai su que j'utiliserais grid pour organiser ma page, avec des cases carrées, afin d'avoir une image de plante par case, et que ce soit ordonné et lisible.
J'ai décidé de faire une grille fluide, afin que l'organisation de mes cases reste la même lorsqu'on modifie la taille de la fênetre, tout en adaptant sa taille.
Je voulais également faire apparaître les conseils sous les images de plantes en passant simplement la souris, j'ai donc utilisé l'animation hover.
Je souhaitais au départ que les conseils soient sous forme de texte, et utiliser la fonction scroll pour que l'entièreté du texte rentre dans mes cases, mais n'arrivant pas au résultat que j'attendais, j'ai décidé de mettre les conseils sous forme d'images également.
Après avoir créé ma grille et y avoir inséré mes images de plantes et de conseils dans les cases, j'ai souhaité complexifier ma page.
J'ai d'abord rajouté un lien vers une page externe, puis j'ai créé des pages internes, afin d'en avoir une pour chaque plante représentée sur ma page principale, et pouvoir détailler les conseils mis en image.
J'ai à nouveau utilisé grid pour mettre en page mes textes, en imposant une hauteur maximale et en utilisant scroll, afin de garder sur chaque page exactement la même disposition, peu importe la longueur du texte.