- 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 :La dernière chose qu'il nous reste à aborder c'est les boutons puisque là on a les boutons html classiques.Donc ce qu'on va faire c'est modifier ces boutons et pour ça on va devoir ajouter des classes.
00:00:09 :Donc ce que je vais faire vous allez voir c'est créer une classe boutonqui va mettre en forme de base les boutons. Donc je vais déjà la créer ici dans le css et on ira l'ajouter par la
00:00:18 :suite dans le html.Et je vais également créer une autre classe qui va s'appeler bouton submit qui va être pour les boutons par exemple pour lire l'article iciou les boutons quand on va ajouter un article ou modifier un article. Et on aura un autre bouton qui va être un bouton
00:00:31 :delete cette fois-ci qui va être d'une couleur différente et ça va être le bouton notamment quand on va cliquer sur supprimer icipour avoir ce bouton ici qui soit en rouge.
00:00:40 :Donc les principales règles de css vont se trouver dans cette classe et dans ces deux classes ici on va juste modifier la couleur.Donc je vais le mettre tout de suite. Je vais mettre un background comme ceci color ici de steel blue
00:00:51 :comme ceci. Et ici on va mettre un background color qui va êtreindian red. Donc là encore j'utilise le nom des couleurs. Il y en a beaucoup comme ça qui sont disponibles en css qui sont assez
00:01:03 :pratiques quand on n'a pas envie de s'embêter avec des codes hexadécimauxrgb ou hsl. Donc là on peut directement mettre des couleurs comme ça pour avoir quelque chose d'assez sympa rapidement.
00:01:12 :Donc ensuite on va rajouter déjà ces classes sur les boutons pour qu'on puisse voir ce que ça donne quand on va changer lecss. Donc je vais revenir
00:01:19 :non pas dans cette vue de détail. On va aller plutôt dans le fichier blog post list icipour rajouter ces classes sur notre bouton ici. Donc le bouton lire l'article.
00:01:27 :Donc je rajoute ici la classe btn et la classe btmsubmit. On va aller également donc sur les formulaires. Donc dans les formulairesde création on a un bouton ici. Donc on va faire pareil classe égale btn et btn submit.
00:01:41 :Je vais le copier comme ça on pourra le coller pour les autres formulaires.Donc l'autre formulaire c'est le formulaire d'édition. Donc on va rajouter ces classes ici. Toujours les mêmes boutons bouton submit.
00:01:50 :Sur le confirm delete ici on va changer la classe. On va mettre boutondelete cette fois ci. Et je crois que j'ai tout pris en compte. Donc on a l'édition,
00:01:59 :l'ajout d'un article, la suppression et le blog ici. Donc normalement ça devrait être suffisant. Donc je sauvegarde.Là vous voyez que la couleur a bien changé sur nos boutons mais c'est encore assez moche. Donc on va changer ici la classe btn.
00:02:13 :Donc déjà on va mettre un peu de padding. Donc on va mettre un padding de 1rem.Ça va donner un petit peu d'espace à notre bouton.
00:02:19 :On va enlever les bords. Donc je vais zoomer un petit peu pour que vous voyez un peu mieux ce qui se passe.Donc on va enlever ces bords ici qui là encore font un peu année 2000. Donc on va faire un border de none.
00:02:28 :On va changer le font weight. Donc je vais mettre un font weight de 600.Ça va me permettre d'avoir un texte un peu plus gras et un peu plus visible.
00:02:36 :On va changer également le font size qu'on va augmenter un petit peu en le mettant à 1.25rem.Comme ça le texte sera un peu plus visible encore une fois.
00:02:44 :On va mettre des bords arrondis avec un border radius que je vais mettre à 0.3rem.Donc comme ça on a un style un peu plus sympathique.
00:02:52 :On change la couleur des boutons. On va mettre du blanc tout simplement.On va mettre une taille de 100%. Comme ça les boutons vont prendre toute la largeur de leur conteneur.
00:03:01 :Donc comme ça on aura quelque chose qui va prendre toute la largeur de la ligne ici.Et pour finir on va changer le curseur. Donc on va mettre un curseur de pointeur.
00:03:09 :Comme ça quand on va passer la souris sur ces boutons, vous voyez que le curseur changeet que ça indique qu'on peut donc cliquer sur ces boutons.
00:03:15 :Donc je préfère avoir quelque chose comme ça. C'est un peu plus sympathique.Là encore, vous voyez que j'aime bien faire du CSS qui est sympathique comme je dis.
00:03:23 :C'est peut-être plus esthétique que je devrais dire comme mot.Donc là on a bien notre bouton lire l'article.On va aller voir sur les formulaires. Donc dans éditer par exemple, on a bien notre bouton également ici.
00:03:33 :On va aller voir sur la suppression cette fois-ci et on a bien également notre bouton iciavec le fond qui est différent puisqu'on a cette classe bouton delete ici qui change la couleur du fond.
00:03:42 :Donc je vais essayer de recréer un article. Voilà, on met un article ici.On pourrait mettre également une petite marge au-dessus puisque là les boutons sont vraiment collés au reste.
00:03:51 :Donc on pourrait mettre un margin top de 1rem ici comme ça, ça ferait respirer un petit peu tout ça.Donc là je peux créer un article. J'ai bien mon article ici.
00:03:58 :Je vais aller lire l'article. Il n'est pas très intéressant. Je vais aller donc le supprimer.On va déjà aller l'éditer pour voir si ça fonctionne.
00:04:04 :Donc je vais mettre un super article, trop bien.Je vais le publier. Donc je clique ici sur la checkbox pour publier l'article.Je vais maintenant le supprimer. Je valide la suppression. Donc là aussi ça fonctionne.
00:04:17 :On va juste aller déconnecter notre utilisateur dans admin.Donc je vais cliquer sur déconnexion ici et je vais revenir ici sur blog.Et on va voir ce que ça donne pour quelqu'un qui n'est pas connecté.
00:04:27 :Donc là on a quelque chose de beaucoup plus sobre puisqu'on n'a pas le lien ici en haut à droite.On n'a pas non plus les liens édités et supprimés.
00:04:33 :On a juste les articles publiés qui sont affichés et je peux aller lire les articles ici.Et une fois que j'ai fini de lire l'article, revenir à l'accueil pour lire un autre article.
00:04:41 :Donc tout fonctionne parfaitement. On a fini donc la partie sur le CSS.On a donc un site qui est un peu plus sympa que ce qu'on avait auparavant.
00:04:48 :Je vais revenir sur mon interface d'administration pour me logueret pour vous montrer le avant après.C'est quand même assez intéressant de voir ce que ça donne.
00:04:55 :Donc si je reviens sur mon blog ici, donc ça c'est notre interface avec l'utilisateur connecté.Et avec tout ce CSS. Donc on a une centaine de lignes ici.
00:05:03 :Et si je les supprime et que je reviens donc sur mon site, là vous voyez qu'on ale site sans le HTML, donc avec nos formulaires qui vont toujoursfonctionner comme auparavant, mais avec quelque chose de beaucoup moins esthétique.
00:05:14 :Donc là, si je vais éditer l'article, on retrouve ces mêmes formulaires.Lire l'article, tout est serré ici comme ça.Donc c'est vraiment assez peu esthétique et juste avec une centaine de lignes de CSS ici,on a quelque chose qui est déjà beaucoup plus agréable pour l'œil.
00:05:27 :Donc voilà pour cette partie sur le CSS.Donc c'est peut-être aller un petit peu vite.C'est pas une formation ici qui est censée vous montrer comment faire du CSS,mais je voulais quand même passer un petit peu de tempspour vous montrer comment avec une centaine de lignes ici et quelques classes,
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.