Avant de démarrer cette étape, je dois avoir :
● Réalisé le découpage de la maquette.
Une fois cette étape terminée, je devrais avoir :
● Le code de l’en-tête de la page.
Recommandations :
● Concentrez vous sur la version desktop du site afin que celle-ci soit pleinement fonctionnelle. Vous travaillerez sur les versions tablette / mobile et aborderez la notion "media queries" plus tard (Étape numéro 11).
● Pour réaliser le positionnement entre le logo Booki et les parties Hébergements/Activités, vous pouvez utiliser Flexbox (ou Grid).
Points de vigilance :
● Attention à ne pas oublier la bordure bleue qui s’affiche au survol.
● Attention, la bordure bleue s’affiche au-dessus en version desktop, et en
dessous en version mobile.
● Distinguez les moments où il faut utiliser une propriété margin plutôt
que padding.
● Il est préférable d’utiliser des pixels plutôt que des pourcentages pour les
valeurs des marges et des paddings.
● Les balises HTML ont des propriétés CSS par défaut (par exemple, un titre
“h1” est affiché en gras par défaut).
● Il faut savoir que par défaut, la balise “body” comporte des marges.
Ressources :
● Le chapitre “Faites votre mise en page avec Flexbox” du cours Apprenez à créer votre site web avec HTML5 et CSS3 ;
● Le petit jeu Flexbox Froggy pour vous entraîner à écrire du code CSS.
Avant de démarrer cette étape, je dois avoir : ● Réalisé le découpage de la maquette. Une fois cette étape terminée, je devrais avoir : ● Le code de l’en-tête de la page. Recommandations : ● Concentrez vous sur la version desktop du site afin que celle-ci soit pleinement fonctionnelle. Vous travaillerez sur les versions tablette / mobile et aborderez la notion "media queries" plus tard (Étape numéro 11).
● Pour réaliser le positionnement entre le logo Booki et les parties Hébergements/Activités, vous pouvez utiliser Flexbox (ou Grid). Points de vigilance : ● Attention à ne pas oublier la bordure bleue qui s’affiche au survol. ● Attention, la bordure bleue s’affiche au-dessus en version desktop, et en dessous en version mobile. ● Distinguez les moments où il faut utiliser une propriété margin plutôt que padding. ● Il est préférable d’utiliser des pixels plutôt que des pourcentages pour les valeurs des marges et des paddings. ● Les balises HTML ont des propriétés CSS par défaut (par exemple, un titre “h1” est affiché en gras par défaut). ● Il faut savoir que par défaut, la balise “body” comporte des marges. Ressources : ● Le chapitre “Faites votre mise en page avec Flexbox” du cours Apprenez à créer votre site web avec HTML5 et CSS3 ; ● Le petit jeu Flexbox Froggy pour vous entraîner à écrire du code CSS.
BookiGuide.pdf