Dans le cadre du cours d’ustensiles numérique, je suis partie sur un site web faisant office de portfolio. N’ayant pas de connaissance en HTML/CSS en amont, la première étape a été de regarder des vidéos YouTube pour en savoir plus et surtout avoir une piste pour commencer.
Après m’être entrainée avec des exercices tels qu’ajouter des boutons, du texte et des images, j’ai commencé par dessiner mon logo et ma bannière sur tablette.
Après les avoir placés, j’ai voulu faire un menu qui se situe à côté du logo, pour cela, j’ai dû comprendre comment créer une grille et surtout comment faire en sorte que tout soit placé correctement. J’ai trouvé beaucoup de réponses à des questions précises sur le site : « https://www.w3schools.com/css/ ». C’est à cette étape que j’ai commencé à séparer mes documents HTML et CSS.
Avec ces nouvelles connaissances, j’ai pu ajouter un texte d’introduction et mes informations de contacts sans problèmes.
Une fois cela fait, j’ai commencé la mise en page des pages liées aux boutons du menu. Au-delà du logo, de la bannière, du titre et d’un court texte, la nouveauté était de réussir à placer les images les unes à côtés des autres.
J’ai de nouveau utilisé une grille pour placer les images et d’autres propriétés CSS pour que la mise en page me plaise. Il y’a trois types de grille :
- Une de 3 colonnes avec un format d’images carré - Une de 3 colonnes avec un format d’images en portrait - Une de 2 colonnes avec un format d’images en paysage
PS : L’opacité des images augmente quand on passe dessus avec la souris.
Une fois cela fait, je me suis attaquée à la mise en page des autres onglets, ce qui consistait surtout à faire des copiés collés et à changer les images et les textes.
À ce stade il ne me restait plus qu’à lier les documents HTML de ces nouvelles pages à leurs boutons respectifs et c’était terminé.
