- 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 :Donc on commence à avoir quelque chose de pas mal au niveau de la page d'accueil et les pages des articles.Maintenant on va s'attaquer aux formulaires puisque si on va voir les formulaires ici c'est vraiment assez peu esthétique.
00:00:10 :On a tout qui est sur la même ligne, on n'a aucune marge, donc on a tout qui est collé directement aux bordures.Donc on va modifier tout ça dans cette partie.
00:00:18 :Donc je n'ai pas besoin d'ajouter la moindre classe ici puisqu'on va cibler directement les tags HTML,donc les balises, à savoir la balise label, la balise input et la balise textarea.
00:00:28 :Donc le label c'est ce qu'on a ici pour le titre, le contenu.Le input c'est ce qu'on a ici pour le titre et le textarea c'est ce qu'on a ici pour la boîte de texte.
00:00:37 :Donc je vais déjà modifier les input et les textarea et on va mettre les deux à la suitepuisqu'on va modifier les mêmes choses sur ces deux éléments.
00:00:45 :Donc je les sépare par une virgule ici pour appliquer les mêmes règles à ces deux éléments.On va déjà les mettre en display block, ça ça va nous permettre d'avoir tout qui est comme ça.
00:00:54 :Chaque élément ici seront sur une ligne.Donc on a bien ici le titre, ensuite la boîte de texte, le contenu, l'autre titre ici,donc l'autre label et la checkbox pour spécifier si on souhaite publier ou non l'article.
00:01:06 :On va ensuite rajouter un petit peu de padding.Donc je vais mettre un padding de .75rem, je valide donc je sauvegardeet là ça nous permet de faire respirer un petit peu ces boîtes de texte.
00:01:16 :On va également changer le line height.Donc ça, ça nous permet d'avoir une hauteur entre chaque ligne qui est un petit peu différentepuisque là vous voyez que tout est complètement serré.
00:01:25 :Donc je le change en le mettant à 1.5.Ici on n'a pas besoin de mettre d'unité donc je sauvegardeet vous voyez qu'on a un petit espace supplémentaire ici dans notre boîte de texte.
00:01:35 :On va également changer le font size.Donc je vais mettre un font size à 1rem et vous voyez que ça élargit un petit peu le texte.
00:01:43 :On va ensuite changer le border puisque actuellement on a quelque chose qui fait assez année 2000 je dirais.Donc on va le changer pour mettre quelque chose d'un peu plus sympathique.
00:01:51 :Donc je vais faire un border qui va être de 1 pixel solide et en couleur.Donc j'ai trouvé ce code hex qui est assez intéressant,qui va faire quelque chose d'assez subtil, un peu dans les tons de gris.
00:02:02 :Donc comme ça vous voyez que c'est déjà beaucoup plus esthétique.On va également changer le border radius qui va nous permettre d'avoir des bords un peu arrondis.
00:02:09 :Donc je vais mettre un border radius qui va être à 0.25rem.Je sauvegarde et là vous voyez que ça nous permet d'avoir des bords un peu arrondis.
00:02:16 :Donc ce n'est peut-être pas très visible, je vais zoomer un petit peu sur la page.Donc on va enlever les deux borders ici, le border de 1 pixel et le border radius,pour que vous voyez bien ce qu'on avait avant.
00:02:25 :Donc ça c'était avant, vous voyez comme je vous disais le style un peu année 2000.Et maintenant on a ça ici qui est beaucoup plus esthétique.
00:02:32 :Et pour finir on va setter une min-width.Donc on va faire un min-width de 600 pixels pour que tout ça soit un peu plus aligné.
00:02:40 :Donc là je suis zoomé actuellement, donc je vais revenir à ma taille d'originepour qu'on n'ait plus les bords qui dépassent ici.Et vous voyez qu'on garde quelque chose d'assez esthétique,puisque maintenant les deux boîtes ici vont prendre une largeur minimale de 600 pixels.
00:02:52 :On va ensuite modifier légèrement les labels ici,puisque pour l'instant ils sont bien collés à la boîte de texteet à la boîte ici pour le contenu de l'article.
00:03:01 :Donc pour ça on va cibler les labels.Et alors là il y a quelques petites choses à faire,puisqu'on va vouloir en fait mettre une marge en haut et en bas de 1rem,et sur la gauche et la droite on va garder 0.
00:03:11 :Sauf que si je fais ça actuellement, vous voyez que ça ne change rien ici.Donc il y a quelque chose qu'il faut rajouter sur les labels.
00:03:16 :Il faut dire qu'on va avoir un style inline blocket que pour le box sizing on va être en border box.Donc comme ça en fait on va pouvoir inclure les marges sur nos labels.
00:03:26 :Et là si je sauvegarde vous voyez qu'on a bien une marge cette fois-ci sur nos labels,ce qui permet là encore de faire un petit peu plus respirer ce formulaire.
00:03:33 :Donc ça c'est ce que ça donne sur la vue d'édition.Je vais aller sur la vue pour ajouter un article.Vous voyez que là aussi c'est très sympa,donc on a notre titre, on a notre contenu, on peut créer notre article.
00:03:43 :Et pour le supprimer, je reviens ici, je clique sur supprimer.Tout fonctionne correctement, heureusement,puisque là on fait juste changer le style de notre application,mais je voulais quand même m'en assurer et vous montrer que cette fois-ci,tous les formulaires sont un peu plus agréables à l'oeil que ce qu'on avait auparavant.
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.