- 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 modifier notre page d'accueil pour que ce soit un peu plus jolique ce qu'on a actuellement.La première chose qu'on va faire, c'est modifier tout simplement le body.
00:00:09 :Donc ça, ça va modifier toutes les pages du site puisque le body se retrouve sur toutesles pages de notre site actuellement.On va changer la couleur d'arrière-plan avec background color et on va utiliser une couleuravec son nom.
00:00:22 :Donc il y a plusieurs couleurs comme ça qu'on peut utiliser.On peut mettre les couleurs par exemple red, blue et d'autres couleurs du genre.On peut également mettre des couleurs un peu plus intéressantes comme mint cream iciqui va en fait donner cet aspect un petit peu bleuté à notre arrière-plan.
00:00:36 :Donc ça donne quelque chose d'un peu plus sympa que juste du blanc pur.On va également changer le font family.Donc ça, c'est ce qui va nous permettre d'utiliser la police d'écriture que l'on a installéeici avec le import.
00:00:48 :Donc cette police d'écriture, elle s'appelle railway.Donc on va l'indiquer ici.On va la mettre entre guillemets et on va ensuite spécifier que si cette police n'estpas trouvée, on utilise tout simplement une police sans serif de base.
00:01:01 :Donc je sauvegarde le fichier et déjà vous voyez qu'on a un affichage un petit peu différentavec la police de caractère qui est donc bien utilisée.
00:01:08 :On va ensuite modifier la navigation.Donc là on a notre accueil et notre ajouté article tout en haut et on va donc les modifier.Si on va voir dans notre template de base, donc dans le dossier template ici dans base.html,
00:01:21 :on a notre navigation, donc notre barre de navigation ici, que l'on va pouvoir utiliserpour modifier les deux liens ici.Donc on va cibler les tags de navigation, on n'en a qu'un dans ce cas-ci, donc on peutcibler nav directement.
00:01:35 :On va rajouter déjà une marge, on va mettre 2rem et si je sauvegarde, vous voyez que déjàça ajoute un petit peu d'espace autour de ces deux liens.
00:01:43 :On va ensuite utiliser Flexbox, donc on va faire un display de flex, ce qui va nous permettreensuite d'utiliser justify content avec space between.Donc comme ça en fait vous allez voir les deux liens vont se retrouver à gauche età droite de ma page, puisqu'on va avoir un espace entre les deux, donc le accueil va
00:02:00 :se retrouver à gauche et le ajouté article se retrouvera tout à droite du site.Donc ça c'est grâce à Flexbox, donc à ce display flex ici qu'on peut utiliser le justifycontent.
00:02:10 :On a plein d'autres valeurs ici qui sont disponibles, on pourrait faire un space around par exempleet vous voyez que là les liens sont un peu plus rapprochés du centre, donc moi je préfèreutiliser le space between pour avoir les liens à gauche et à droite de ma page et
00:02:22 :bien entendu ça va être responsive, donc si j'éteins ma fenêtre ici, les liens restentbien à gauche et à droite respectivement.On va ensuite cibler notre section du blog, donc la section qu'on a ici qui contienttous les éléments qu'on a mis sur nos différentes pages.
00:02:37 :On a un ID ici, donc je vais pouvoir utiliser cet identifiant à l'intérieur du CSS pourmodifier cette section.Donc on va mettre le dièse ici, donc dièse blog et à l'intérieur ici on va égalementcréer un blog de type flex, donc je mets display avec un seul P, donc display flex
00:02:53 :ici et on va faire quelques modifications, donc déjà on va changer la direction puisqueactuellement on a une direction sur les rangées, donc on va mettre ça en colonne, donc jevais faire flex direction colonne, je sauvegarde et là j'ai bien cette fois-ci la directionqui se remet dans le bon sens.
00:03:10 :On va également centrer les items avec align items qu'on va mettre à center, comme çaon aura le titre ici qui va se retrouver centré dans ce bloc.
00:03:20 :On va pour finir rajouter une petite marge, donc un margin top de 5rem, ce qui va me permettrede décoller légèrement ici tout ce bloc pour qu'il ne soit pas trop collé à mabarre de navigation.
00:03:31 :On va ensuite modifier les articles qui sont contenus à l'intérieur de notre blog, donclà on a notre blog ici, actuellement j'utilise Firefox pour afficher le site, je trouve quevraiment les outils de Firefox sont les meilleurs dans tous les navigateurs qui existent pourmodifier le CSS, donc je vais faire un clic droit ici et on va faire inspect element et
00:03:52 :vous allez voir que ça nous permet d'inspecter les différents éléments qu'on a ici, ainsique de voir notre html ici.Donc on a bien notre section ici, donc la section blog qui est un flex, donc flexboxici c'est indiqué par Firefox et à l'intérieur de ce flexbox, donc à l'intérieur de cette
00:04:07 :section on a nos différents articles.Donc ce qu'on va pouvoir faire c'est cibler les tags articles ici pour changer la taillepuisque là pour l'instant on a une taille qui prend 100% de la largeur, donc ça faitquelque chose qui n'est pas très élégant, donc on va changer cette taille et on va la
00:04:21 :changer sur les articles, donc on va dire blog ici et on va cibler tous les articlesà l'intérieur de notre blog et on va changer la taille, on va faire un width de 50% iciet si je sauvegarde vous voyez qu'on a maintenant les articles ici qui ne prennent plus que
00:04:34 :50% de l'espace, donc ça nous fait des marges sur le côté ici qui laisse un petit peurespirer tout ça.On va également rajouter un margin top pour ne pas avoir tous les titres ici qui sontcollés les uns aux autres, donc je rajoute un margin top de 2rem, je sauvegarde et là
00:04:49 :vous voyez qu'on a encore un peu plus d'espace qui fait que notre page donc respire un peuplus.Pour finir on va rajouter un media query puisque pour l'instant vous allez voir que si on réduitla page, cette largeur ici de 50% fait qu'on a un blog qui est un peu petit, donc j'aimerais
00:05:04 :bien augmenter cette valeur mais seulement quand on a une fenêtre qui est un peu plusréduite, donc quand on a la fenêtre comme ça qui prend beaucoup de place on va restersur 50% mais quand on réduit la fenêtre ici on va augmenter un petit peu.
00:05:15 :Donc pour ça je vais faire un media query, donc je vais mettre un arrow base media eton va spécifier ici comme condition max width de 1024, donc tant qu'on sera en dessous de1024 on va utiliser tout ce qui est à l'intérieur de ce media query et qu'est-ce qu'on va cibler
00:05:30 :ici ? On va reprendre notre blog article, donc on va cibler tout ça, on va enleverle margin top puisque le margin top on ne veut pas y toucher on va juste garder le widthet dans le cas où on a donc une largeur ici qui est inférieure à 1024 pixels on va mettre
00:05:44 :une largeur de 85%, donc si je sauvegarde vous voyez que cette fois-ci on a quelquechose qui prend un peu plus de place et si je teste le responsive ici vous allez voirque dès qu'on dépasse 1024 pixels, donc à peu près ici, vous voyez que là la largeur
00:05:56 :devient de 50%, donc comme ça sur les écrans un peu plus larges on a quand même des bonnesmarges et dès qu'on réduit on a le texte qui prend un peu plus de place.
00:06:04 :Donc voilà pour la page d'accueil, on a déjà quelque chose qui est beaucoup plusagréable, vous allez voir si je supprime tout le CSS ici et que je sauvegarde mon fichier,donc ça c'est ce qu'on avait avant, donc un code HTML assez basique et avec juste tousces petits trucs ici, donc quelques display flex, on change la police d'écriture et un
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.