- 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 maintenant modifier les articles. Donc on va modifier un petit peu toutce qu'on a ici, à savoir le titre, les boutons et également on va modifier la vue qu'on a ici dansl'article puisque pour l'instant le titre n'est pas très visible, il est tout collé au contenu de
00:00:14 :l'article donc on va modifier ça également. Avant ça on va rajouter quelques classes àl'intérieur de notre fichier HTML, donc pas dans le base HTML ici mais on va aller directement dansnotre projet dans le dossier templates et on va utiliser donc ce template, donc le template quiest celui qu'on utilise dans notre listview, donc c'est le template qui va afficher tous les articles.
00:00:33 :Donc ce template HTML il étend le base HTML et on rajoute le contenu ici, donc on a le fameuxh1 qui représente ce h1 ici et ensuite on a tous les articles. Donc déjà sur le titre on va rajouter
00:00:45 :un div qui va englober tout ça ici, donc à la fois le titre et les deux liens qu'on a, donc le lienpour éditer et le lien pour supprimer un article. Donc je vais mettre un div, entourer tout ça de
00:00:57 :mon div ici, je vais faire un option commande L sur macOS pour reformater automatiquement le fichierdonc comme ça on aura bien tout ça qui sera indenté à l'intérieur de mon div et je vaisfaire une classe qui va être égale dans ce cas ci à post-title. Donc on va tout préfixer de
00:01:12 :post ici pour que ce soit assez évident dans le style.css à quoi on fait référence et on vadonc également modifier quelques éléments ici, donc notamment le h5 qu'on a, donc là on vamodifier en mettant une classe et on va mettre post author parce qu'on va modifier également cette
00:01:29 :ligne ici. Donc on met une classe pour cibler tout ça et on va faire pareil avec le contenu ici,on va mettre classe égale post et là dans ce cas ci je vais mettre excerpt qui veut dire extraiten fait, donc l'extrait du post que l'on affiche ici sur notre page d'accueil. Je vais revenir
00:01:43 :donc dans le fichier style.css et on va rajouter un peu de style pour tout ça. Alors la premièrechose qu'on va faire c'est déjà modifier tout ce qu'on a ici, donc notre bloc ici qui correspondau post title pour avoir tout ça qui soit sur la même ligne. Donc on va faire un display flex
00:01:58 :encore une fois, donc je cible le post title, donc je fais un display en flex, je sauvegarde lefichier et comme ça on va avoir donc tout ici qui est sur la même ligne. Je vais aligner tout ça
00:02:10 :au centre puisque pour l'instant vous voyez que les boutons éditer et supprimer sont alignés avecle haut de mon titre, donc ici je vais rajouter un align items que je vais mettre à center, jesauvegarde et là vous allez voir que si je reviens ici sur ma page, cette fois-ci on a bien tous les
00:02:24 :éléments ici qui sont correctement alignés les uns par rapport aux autres. On va ensuite modifierlégèrement les liens qui sont à l'intérieur de tout ce bloc pour enlever la ligne en dessous etégalement rajouter un peu d'espace entre ces différents liens. Donc je vais cibler les liens
00:02:38 :avec post title et je vais cibler tous les liens qui sont à l'intérieur avec la balise A ici. Onva changer donc la couleur des liens, on va mettre une couleur de style blue, on va enlever ladécoration, donc text decoration qu'on va mettre à none et on va mettre un margin left de .5rem.
00:02:55 :Donc je sauvegarde et là vous voyez qu'on n'a donc plus cette décoration, on a un petit peud'espace entre les deux éléments ici et on a la couleur qui a été également légèrement modifiée.
00:03:05 :Pour le bouton supprimer ici j'aimerais bien le mettre en rouge puisque actuellement ce n'est pastrès évident que c'est un bouton qui va nous permettre de supprimer, on le voit avec le textemais avec la couleur ce serait encore mieux. Donc ici je vais cibler le dernier lien à l'intérieur
00:03:18 :du post title. Donc ce que je vais faire c'est cibler cette classe post title, le lien et jevais utiliser last child. Donc last comme ceci tiré child et ça va récupérer le dernier élément donc
00:03:29 :le dernier lien à l'intérieur de ce bloc. Donc dans le bloc post title ici on va récupérer ledernier lien ici qui est le lien supprimé. Donc qu'est ce que je vais faire avec ça ? Et bien tout
00:03:38 :simplement changer la couleur, je vais mettre une couleur red qui va donc me permettre de changer lacouleur de ce lien précisément. On va ensuite rajouter une marge à ces liens, donc on va mettre
00:03:49 :une marge left à ces deux liens pour qu'ils soient alignés vers la droite. Donc pour ça je vaisdevoir cibler les liens qui sont ici, donc le lien édité et supprimé. Donc on a un div ici qui est à
00:04:00 :l'intérieur de post title donc je vais pouvoir cibler directement ce div, donc le div qui estdirectement en fond de mon div avec la classe post title. Donc pour ça je reprends post title et
00:04:10 :cette fois ci je vais mettre un symbole plus grand qu'eux et je vais cibler le div. Donc ça m'assureen fait que je ne cible que le div qui est un enfant direct de ce div, donc c'est à dire quesi on avait d'autres divs ici eux ne seraient pas affectés par cette règle CSS. Donc qu'est ce qu'on
00:04:24 :va faire ici ? On va tout simplement mettre un margin left en automatique et comme ça en faiton aura une marge qui va être automatiquement calculée à la gauche de ces deux éléments. Donc
00:04:32 :même si je change la taille de la fenêtre ici vous voyez ce que ça fait, on a donc toujours lesliens édité et supprimé qui se trouvent complètement à droite et le titre lui qui restecomplètement à gauche. Donc ça ça fonctionne très bien, on va ensuite rajouter une marge pour le
00:04:45 :publier par le nom de l'auteur et la date puisque là c'est un petit peu collé au titre et aucontenu. Donc pour ça on va cibler le post author et on va rajouter une marge au dessus et en dessous
00:04:56 :donc on va faire un margin, on va mettre .5rem et 0. Donc .5 ça va être en haut et en dessous et 0à gauche et à droite. Donc là si on revient sur notre site on a bien une petite marge qui
00:05:06 :apparaît en haut et en bas de cet élément ici. Et pour finir sur cette page on va rajouter unepetite marge également après l'extrait donc je vais cibler dans ce cas ci mon post excerpt eton va rajouter un margin bottom qu'on va mettre à 1rem. Donc comme ça on aura un petit peu d'espace
00:05:23 :entre le bouton et l'extrait de l'article ici. Maintenant on va s'intéresser aux articles entant que tels. Donc si je clique sur lire l'article comme je vous disais au tout début de
00:05:32 :cette vidéo le titre est un petit peu collé et n'est pas très visible. Donc pour ça on va serendre cette fois ci non pas dans blog post list mais dans blog post detail. Donc je peux cliquer
00:05:40 :ici dans la barre de navigation pour voir automatiquement tous les fichiers qui sontcontenus à l'intérieur de ce dossier donc on va aller dans blog post detail. Donc je vais rajouter
00:05:48 :une classe ici et on va mettre une classe qui va s'appeler post detail cette fois ci puisqu'onest dans la vue de détails. Donc je reviens dans mon fichier css on va rajouter un peu de css sur
00:05:59 :ce post detail. Déjà on va faire un display flex ensuite on va changer la direction donc flexdirection qu'on va mettre en colonne puisque si je ne fais pas ça donc je vais l'enlever pour vousmontrer ce que ça donne. Si je sauvegarde et que je reviens ici on a les deux éléments qui sont à la
00:06:13 :suite sur une rangée donc moi je veux retrouver la colonne comme ceci pour les avoir les uns audessus des autres. On va ensuite changer le align items qu'on va mettre à center ce qui va me
00:06:22 :permettre de centrer le titre sur la page. Finalement on va modifier le titre donc leh1 ici donc je vais le cibler en faisant post detail h1 on pourrait mettre ici le symboleplus grand que pour cibler directement le h1 qui est en dessous donc ça ne change pas grand chose
00:06:37 :dans ce cas ci puisqu'on a un seul titre à l'intérieur mais vu qu'on pourrait avoir d'autrestitres à l'intérieur de l'article je préfère ici rajouter le symbole plus grand que pour qu'onaille cibler dans ce fichier html que le titre qui est directement en dessous de mon post detail et
00:06:50 :non pas les titres potentiels qui seraient à l'intérieur du contenu de mon article. Doncqu'est ce que je vais faire avec ce titre je vais déjà changer la case donc avec texte transformon va mettre upper case comme ça le titre sera un peu plus visible donc là vous voyez qu'on a
00:07:05 :le titre qui est tout en majuscule avec cette règle ici et on va également rajouter un peud'espace donc avec un margin bottom qu'on va mettre à 1rem donc je sauvegarde et comme çaça permet de faire respirer un petit peu le titre donc comme ça c'est beaucoup plus visible que ce
00:07:19 :qu'on avait avant. Donc voilà pour la mise en forme des articles donc là on a quelque chosed'entièrement responsive avec l'article qui prend plus de place si je suis sur un écran qui est pluspetit donc ça c'est grâce aux media queries qu'on avait fait précédemment qui ciblait à
00:07:32 :l'intérieur de notre blog tous les articles et on changeait la taille ici pour 85%. Si je viens surune page un peu plus grande on a quelque chose qui respire un peu plus. Si je reviens sur la
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.