- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie on va créer une barre de menu pour notre projet. Donc la barre de menu n'aurapas grand chose à part le titre de notre application. Alors ce que je vais faire déjà
00:00:08 :c'est enlever cette balise body pour ne pas se cramer les yeux avec un fond rouge. Donc on revientsur notre site, on actualise et là on est bien revenu avec quelque chose d'un peu plus sympathique.
00:00:18 :Donc ce que je vais faire c'est mettre mon carnet d'adresse ici qui pour l'instant est tout en hauttout collé. Et bien je vais mettre une petite barre bleutée avec le texte à l'intérieur pour le
00:00:27 :démarquer et pour faire en fait le titre de mon site. Donc dans mon html ici directement dans lebody je vais rajouter un élément. Donc on va faire un bloc div. Donc je tape div et je valide avec la
00:00:39 :touche tabulation et ça va me faire les balises automatiquement. Et on va rajouter une classe àl'intérieur de ce div. Donc on va faire classe navbar et ça va nous permettre de cibler cet
00:00:50 :élément dans mon fichier css. Je vais mettre la balise qui ferme ici après le titre h1 et je vaissimplement indenter visuellement le h1 à l'intérieur de ce div. On va également mettre une classe sur
00:01:02 :le h1. Donc là on va utiliser bootstrap et les classes pour le texte. Donc on va mettre textewhite et ça va me permettre de rendre automatiquement le texte en blanc puisqu'on va mettre un fond bleupour la navbar. Donc comme ça ça sera un peu plus facile à lire. Dans le fichier style.css je vais
00:01:17 :donc pouvoir cibler ma navbar en mettant .navbar. Donc le point c'est parce que c'est une classe.Quand on veut cibler une classe on met le point et le nom de la classe. Ensuite on va mettre une
00:01:27 :couleur de background. Donc on va utiliser la propriété background color et on va mettrecomme couleur une couleur bleutée. Donc on va mettre un code hexadécimal qui est ce bleuté
00:01:36 :ici et on va voir tout de suite ce que ça donne à l'intérieur de notre page. Donc je reviens sur lapage d'accueil, j'actualise et là vous voyez qu'on a bien donc ce fond bleu avec mon carnetd'adresse qui s'affiche ici. Donc pour l'instant c'est un petit peu tout collé sur les bords. Donc
00:01:49 :ce que je vais faire c'est rajouter un padding et également rajouter une marge à la suitepuisque là également le carnet d'adresse est complètement collé à notre barre. Donc ce
00:01:58 :qu'on va faire ici c'est rajouter déjà un padding. On va mettre un padding de 16 pixels et on vamettre un margin bottom. Donc margin bottom c'est pour séparer tout ce qui va être après la barre
00:02:09 :de navigation et on va mettre un margin bottom de 32 pixels. Je reviens ici, j'actualise pourvérifier et là vous voyez qu'on a un peu plus d'espace du coup autour du texte. Donc ça c'est
00:02:19 :le padding et on a le margin ici qui est de 32 pixels. Donc pour voir tout ça et pour jouer unpeu avec ces valeurs on peut faire un clic droit inspect et aller voir en fait les différentséléments qu'on a ici. Donc on retrouve notre nav bar, vous voyez que chrome va nous afficher les
00:02:34 :différents éléments. On voit avec les différentes couleurs le padding et également la marge. Doncsi je déplie un peu on voit le texte qu'on a ici et si on va voir tout en bas ici on a lepadding qui est affiché donc un padding de 16 et le margin donc un margin de 32. Et on peut voir
00:02:50 :visuellement à quoi ça correspond sur notre site. Et si on souhaite changer les valeurs pour voir sides valeurs différentes seraient un peu plus agréables par exemple sur le padding on pourraitici essayer de mettre 32 pixels à la place et voir ce que ça donne et vous voyez qu'automatiquement
00:03:03 :on a un retour visuel. Donc ça ça peut être une bonne façon de faire aussi de voir si çacorrespond un peu mieux à ce que vous souhaitez. Par contre si vous faites des changements bien
00:03:10 :sûr n'oubliez pas de les répercuter dans votre fichier puisque là si je reviens et quej'actualise et bien on perd tous les changements qu'on a fait. Donc si on souhaite augmenter et
00:03:18 :mettre par exemple 24 et bien on va le mettre ici et là ça va être bien pris en compte. Donc voilàpour la barre de navigation comme je vous disais rien de très compliqué on n'a pas de menu et onn'a rien pour naviguer puisqu'on n'a pas vraiment d'autres pages que la page d'accueil mais au moins
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.