Apprendre le développement Web réactif

1. Intro: Bienvenue aujourd'hui. Nous allons créer ce composant de grille de conception réactif. Si tu es nouvelle ici, bonjour, je m'appelle Zoé. Je suis ingénieur logiciel et ancien professeur d' université qui aime enseigner aux gens comment 2. Projet de classe: D'accord, donc oui, comme vous pouvez le voir, c'est un composant assez simple que nous allons créer ici, mais nous allons le faire de manière Il existe donc une version de bureau et une version mobile, et nous allons utiliser le grade CSS si possible. Donc, en regardant notre composant ici, nous n'avons pas vraiment besoin d'utiliser la grille. Nous pourrions également utiliser Flex. Voyons donc comment ça se passe. Il serait peut-être plus facile pour nous d'utiliser Flexbox. Mais nous voyons comment nous avons notre propre type de première section en haut ici, puis nos deux plus petites sections en bas. Et puis, en ce qui concerne le design mobile, il tombe tout simplement dans une colonne. C'est donc assez direct, assez simple, mais juste un peu différent parce que cette section inférieure change en fonction de l'endroit où elle est placée. Allons-y donc et développons cela. 3. Tutoriel: J'ai donc déjà développé l'application de démarrage. Encore une fois, ce n'est rien que j'ai fait comme il y a des mois en termes de configuration. Vous pouvez simplement utiliser ce kit de démarrage. C'est le matériau que j'ai ensuite configuré dans la combinaison dactylographiée Et vous pouvez simplement cloner et l'utiliser comme point de départ. Vous pouvez l'utiliser sans nécessairement utiliser l'élément Typescript Vous pouvez utiliser JavaScript si vous préférez. C'est donc à vous de décider si vous souhaitez l'utiliser, mais le lien est indiqué dans la description ci-dessous. Et aussi, si vous voulez suivre, comme toujours, je vais créer un lien vers le design. C'est l'un des designs gratuits de Front End Mentor. Je vais également ajouter un lien à cela dans la description ci-dessous. Nous avons donc notre application de base créée ici. Je vais juste supprimer tous les types de styles de réinitialisation existants, et les supprimer là Ensuite, je vais aller de l'avant et ajouter la couleur de fond de ce dessin ici si je peux m'en emparer. Ordinateur de bureau. Voyons de quelle couleur il s'agit ici. Je pense que c'est une sorte de couleur bleu clair. Je vais donc dire que pour le corps et le code HTML, la couleur d'arrière-plan sera la suivante et, oui, ça a l'air correct. Nous avons donc défini notre couleur de fond. Allons-y et développons cette page. Donc, sur la page, nous allons avoir trois cartes, une carte avec environ trois sections, je dois dire. Donc, je suppose que pour cette section plus large, comment devons-nous procéder ? Faisons trois petites boîtes. Je vais donc créer un dossier de composants. Et nous dirons que le nouveau fichier sera, euh, l'en-tête de la carte. Je vais l'appeler. Nouveau dossier. En-tête de carte. Oups. En-tête TSX Et encore une fois, vous pouvez utiliser JSX si vous préférez. Ensuite, je vais créer un nouveau fichier appelé card container point TSX Et ça va juste contenir toutes nos cartes. Nous allons donc utiliser box pour créer du style en utilisant XX Prop pour Material UI, puis je vais importer le conteneur de cartes sur notre page d'accueil Donc, conteneur à cartes. Gardez-le là. Génial. Ensuite, le contenant de la carte va maintenant prendre l'en-tête de notre carte, puis les deux autres composants plus petits de la carte également. En-tête. Génial. Cool. Jusqu'ici, tout va bien. Travaillons donc maintenant sur l'en-tête de la carte. Encore une fois, je vais en faire une boîte. Hum, garde ça. Et cool. Nous le voyons sur la page. Hum, centrons le contenant de la carte sur la page. Donc oui, le conteneur de la carte est que je vais régler l'affichage de la page pour qu'il soit flexible. Et nous allons dire flex say justify content, sorry, center et line items Center. Sauvegardez ça. Et je pense que je dois définir une hauteur. Hum, une hauteur pour cela doit être de 98 points de vue. Je pense que je devrais probablement finir par le faire en CSS, mais nous traverserons ce pont un peu plus tard. D'accord. Donc, la prochaine chose que nous voulons faire ici, c'est oui, construire ces petites pièces ici. Donc, dans l'en-tête de la carte, il semble que nous ayons rejoint notre communauté. Nous avons donc besoin d' une sorte de typographie. Nous avons probablement besoin de trois éléments de typographie différents, alors ajoutons-les. Nous dirons typographie Euh. Cool. Et ce sera notre premier. Joignez-vous à notre communauté. Génial. Deuxième garantie de remboursement sans tracas Et puis la description de ce qu'ils essaient réellement de nous vendre. Hum, cool. C'est donc assez simple. Maintenant, faisons un peu de silence. On dirait qu'il y a environ 40 pixels de M ou un rembourrage, devrais-je dire, un rembourrage, euh, autour des éléments Nous dirons 40 pixels, 2,5 RAM. Euh, et de quoi d'autre avons-nous besoin ici ? Je pense que nous devrions peut-être faire notre taille de police et d' autres choses de ce genre. Donc ça va faire 24 pixels. Taille de police. Ça va être 1,5 jante. Hum, celui-ci va avoir 18 ans. Ensuite, celui-ci sera régulier , donc nous allons laisser ça de côté. Ensuite, nous allons définir notre couleur. Donc, celui-ci sera de cette couleur. Affectueux. Ou simplement de la couleur. Euh, bien. Euh ça va être comme du vert fluo. Faisons-le là-bas. Et puis celui-ci va être truc du genre bleuté. Nous allons le dire. Mais. Cool. Nous allons enregistrer cela ici. Génial. Jusqu'ici tout va bien, nous y avons notre petite boîte. L'autre chose que nous devons faire est de définir la couleur d'arrière-plan. Nous allons donc définir la couleur de fond de la boîte comme étant blanche. Sauvegardez ça. Et ça a l' air plutôt bien. Jusqu'ici, tout va bien. L'autre chose que je veux faire est de définir la largeur maximale de cette boîte ici. Il semble donc que la largeur soit de 635. Ce sera pour ce conteneur de cartes. Je vais dire que la largeur maximale sera de 635. Oups, des pixels. Et la hauteur maximale. Parce que c'est juste censé être un composant. Ce n'est pas comme une page entière. Ça va être 475. Nous allons le définir là. Génial. Cool. Jusqu'ici, tout va bien. Oh, autre chose. En fait, une autre chose que nous allons vouloir faire est de définir le rayon d'angle. On dirait qu'il fait environ huit pixels. Nous allons donc dire que le rayon de la bordure sera de 0,5 ram. Et cela ne fera que courber tous les bords. Oh, non, ça ne l'a pas fait. OK, nous devons donc le mettre sur la carte. Très bien, nous allons donc le configurer. Nous allons plutôt placer les pièces de la carte sur la carte. Nous allons donc définir le rayon de la frontière. Et cela devrait être la même chose que lorsque vous faites en haut à droite, en bas à gauche. Donc ça va être en haut, euh, qu'est-ce que c'est en haut à gauche ? Disons 0,5 RAM, 0,5 RAM et zéro et zéro, puis nous pouvons le modifier si ce n'est pas correct. Non. OK, oui, c'est exact. Alors voyez comment il se courbe simplement en haut à gauche et à droite. Donc c'est juste pour nous offrir cette petite lunette. Nous allons donc laisser les choses telles quelles. Et je pense que nous pouvons peut-être ajouter un peu de poids de police, juste un peu de poids à celui-ci ici, pas beaucoup, peut-être 600 de poids de police. Et oui, peut-être aussi pour celui-ci. Nous ferons de même. Gardons-le. Oui, ça a l'air plutôt bien. Hum, faites un peu d' espacement, peut-être 24 pixels. Très bien, disons, euh, Margin. Marge. Le top est 1,5. Oups. 1,5 Rm. Euh, c'est vrai. Et puis c'était comment, 0,75 m, puis zéro ? Oui, et ça nous donne juste une petite marge de manœuvre. Et je pense que c'est plutôt bien pour le moment. Allons-y, et allons-y et construisons les deux prochaines petites boîtes ici. Donc, c'est la première boîte. Le prochain sera notre CTA, je l'appellerai notre appel à l'action du CTA Donc, quoi que nous finissions par changer de produit, nous pouvons toujours simplement réutiliser ce composant Nous dirons donc boîte. Euh, boîte. Cool. Jusqu'ici, tout va bien. Ensuite, nous l'importerons dans une carte, notre conteneur de cartes. Maintenant, c'est là que ça devient intéressant. C'est donc là que je me suis nous pourrions utiliser Griter. Nous pouvons utiliser Flex. Ce que je pense que nous faisons ici, c'est que nous utilisons une boîte, puis dans cette boîte, nous avons nos deux composants suivants. Nous aurons donc le CTA et nous aurons tout autre composant YS, vous savez Ensuite, nous allons inverser leur position en fonction de l'orientation. Pour ce faire, nous utiliserons la requête multimédia. Essayons donc, voyons si cela fonctionne. Donc, avec notre CTA, nous voyons maintenant que nous avons tout ce qu'il faut. Allons-y et faisons de même. Nous allons donc ajouter des styles similaires. Et honnêtement, nous pourrions simplement utiliser une voiture, une force de composants et tout ça, mais ce n'est pas comme si nous pouvions créer une carte avec un rembourrage automatique de 2,5, puis prendre une couleur d'arrière-plan comme propriété et un rayon de bordure comme propriété Je pense que nous construisons quelque chose de plus grand, ce serait certainement utile, d' autant plus que nous maintenons notre langage de conception. Mais je pense que comme il ne s'agit que d'un composant unique , nous pouvons pour le moment copier quelques styles. Nous allons donc y ajouter du rembourrage. Nous allons définir la couleur d' arrière-plan sur. Voyons ce que c' est. Euh, rectangle. Ce rectangle. Mmm mm. OK, voyons voir. Je pense que c'est de cette couleur. Si ce n'est pas le cas, nous pouvons le modifier . Nous allons donc commencer par cette couleur. Cool. Ensuite, nous avons besoin de la même chose , essentiellement de trois CTA différents ou de trois éléments typographiques différents, désolé Nous allons donc commencer par la typographie. Et le premier sera un abonnement mensuel. Gardez ça cool. Encore une fois, s'ils étaient plus similaires en termes de style réel, il serait tout à fait logique de le séparer en un seul composant réutilisable. Nous avons donc ceci, et je vais vous donner une période par mois, simplement parce que le style est un peu différent, mais nous voulons que ce soit sur la même ligne. Et puis il s'agit davantage d' un choix de conception que d'une séparation informationnelle. Ensuite, nous l'avons, puis nous aurons un bouton en dessous de tout cela. Oups. Je vais enregistrer ça. Très bien, cool. Donc oui, en gros, cette section du CTA La prochaine chose que nous voulons faire est de définir la largeur maximale. Alors, hum, c'est quoi ? La hauteur sera de 259. La largeur maximale sera de 318, donc nous dirons que la largeur maximale sera de 318 pixels. De cette façon, il ne prend pas trop de place. Hum, cool. Je pense que c'est exact. Hum, je pense qu'une fois que nous aurons ajouté l'autre, il occupera en quelque sorte cet autre espace. Allons-y maintenant, et nous voulons définir la couleur. Nous allons donc dire des couleurs pour cela. La couleur est blanche. Et nous l' emprunterons également pour le prochain. Je pense qu'ils sont tous blancs ? Oui, ils sont tous blancs. À part cette petite vrille. Je n'en suis pas tout à fait sûr. Jetons un coup d'œil et voyons de quelle couleur il s'agit. OK, c'est toujours blanc. Seule l'opacité est moindre Nous allons donc le styliser. Nous allons dire, euh, qu'est-ce que c'est ? Euh, la couleur est RGBA. Oups. Je l'ai mis entre guillemets. Euh oh, il manque. Nous y voilà. Hum, et je pense que c'est 100, 100, 100. Puis 0,5. Oui, en gros, oui. Donc je le veux, je le veux vraiment, désolé, 255, 255. Ouais. OK. C'est ce que je veux. Je le veux blanc, mais un peu transparent. Cela semble correct. Et puis définissons la taille maintenant Donc ça va faire 18 heures. Nous dirons une taille de police de 18 pixels. Ça va faire 32 pixels. Et aussi un poids de police, on peut probablement dire aussi, poids de police de 600. Nous dirons la taille de police 2 REM et le poids de la police, probablement 800. Et puis, mais chaque mois, c'est différent. Nous ne voulons pas avoir tout cela par mois. Nous allons donc dire que le poids police est de 400 et que la taille de la police sera de 16, soit une RAM. Cool. Et je pense que nous devons aussi probablement faire une sorte de flexibilité d'affichage, euh, aligner les éléments au centre. Oui, comme ça, il y a un peu d'espace. OK. Intéressant Ensuite, nous ferons aussi la marge gauche. Juste pour leur laisser un peu d'espace , environ 0,5. Génial. Ça a l'air plutôt bien. Et puis pour ce qui est du dernier point, je ne pense pas que nous ayons encore besoin de changer. C'est juste une taille 16 normale. Euh, autre chose, nous allons en ajouter encore, il suffit d'ajouter du rembourrage, de la marge Hum, entre les deux, je pense qu'il y a environ un RM, disons, la marge supérieure. Un bélier. Et oui, plutôt bien. Ensuite, nous ajouterons ce bouton en bas. Donc le bouton, probablement un rembourrage d'environ 1,5 Rm sur le dessus. OK. Et puis il sera écrit « inscrivez-vous ». Et la couleur de fond sera la suivante. Nous allons donc parler de contexte. C'est la couleur. Et la couleur réelle du texte sera le blanc. Cool. Euh, et oui, ça devrait être ça. Je pense que oui, nous allons le faire sur toute la largeur. C'est Width Whoops. Est égal à 100 %. La transformation du texte n'en est pas elle le force en fait à en majuscules, ce que nous ne voulons pas Ensuite, nous allons probablement le rendre, par exemple, poids de la police, peut-être 600, rendre un peu plus gras. Hum, en termes de taille. Oui, c'est juste normal. Peut-être même que nous en faisons 800. Cool. Et je pense qu' il y a peut-être un peu plus de rembourrage sur le dessus Oignon. Ça a l'air plutôt bien. Voilà donc la deuxième carte, juste là. Allons-y et créons cette troisième, la troisième pièce de la carte, devrais-je dire. Et ce sera notre Y. Et encore une fois, vous pouvez probablement trouver un meilleur nom que Y, mais nous allons utiliser Y pour sortir Donc, encore une fois, cela commence par la boîte pour le matériel que vous avez. En utilisant cela comme base. Nous allons maintenant l'importer dans notre conteneur de cartes . Nous allons donc expliquer pourquoi. Cool. Maintenant, vous pouvez voir comment les choses s' empilent vers le bas. Nous voulions vraiment passer sur le côté. C'est donc là que nous allons commencer à jouer avec notre écran. Nous allons donc dire Display Flex, et cela devrait simplement apparaître sur le côté Vous voyez comment cela occupe une quantité égale sur les côtés. Cela compense donc en quelque sorte le fait que c'est là L'autre chose que nous voulons vraiment faire, j'ai complètement oubliée, est définir ce rayon de bordure en bas. Faisons-le donc très rapidement avant de passer complètement à autre chose. Donc, en nous reportant à l'en-tête de la carte, nous allons modifier le rayon de la bordure Nous voulons en fait que ce soit le bas de page. Nous allons donc changer cela. Ou, non, en fait, probablement juste celui du bas. Ce sera donc trois zéros et 0,5. Nous voulons donc simplement que ce maïs soit courbé. Donc, euh, oui, nous l' avons là. Passons ensuite à Y. Maintenant, pour Y, nous voulons faire un style similaire à celui-ci Donc, une copie, nous pouvons emprunter ceci et l'utiliser comme base, puis simplement changer la direction du zéro. Donc le zéro que nous voulons de ce côté. Donc oui, vous verrez que le bord extérieur est incurvé. Nous devons également saisir cette couleur, qui est Oh. C'est quelle couleur ? Mm, je pense que c'était l'autre couleur. Je ne pense pas que oui. Euh, un autre moyen rapide moi de saisir souvent les couleurs est d'utiliser ce sélecteur de couleurs Ouais. Génial. Super rapide. Euh, la couleur de fond sera celle-ci. Parfait. Parfait. Très bien, cool. Nous l'avons donc. Maintenant, ajoutons notre texte, et cela devrait être beaucoup plus simple. Nous l'avons donc par nous. Um, ajoutez un élément de typographie. Pourquoi la typographie américaine. Cool. Et ce sera, encore une fois, une taille 18. Et puis le poids de la police sera de 600, je pense qu'il serait de 600 pour l'autre. Euh, donc ça devrait correspondre. Ensuite, la couleur sera blanche. Cool. Génial. Hum, Max Width, nous avons ce set. Alors nous avons besoin de cette liste ici. Maintenant, nous pouvons le faire de deux manières. Nous pourrions le faire, comme une sorte de pause en utilisant des pauses, mais je pense que la meilleure façon de le faire est d'utiliser une véritable liste non ordonnée Nous dirons donc liste non ordonnée. Ont-ils un composant de liste ? Oh, ils le font. Je ne l'ai jamais utilisé auparavant. Essayons-le et voyons comment ça se passe. Euh, nous allons donc dire liste. Et puis c'est quoi ? Liste ? Un article de liste, peut-être ? Oui, élément de liste. OK. Ensuite, laissez-moi mettre le premier et voir si cela vous convient Tutoriels réalisés par des experts du secteur. Voyons voir, type d'élément, I look bad, type d'élément Lazy. Oh, euh, article. OK. Mm. Il le met en retrait Je ne l' aime pas vraiment, mettez-le en retrait. Euh, je pense qu'il existe une propriété qui ressemble au style Listyle List ? Aucune ? Non. Euh, Listyle CSS. Mm. Intérieur carré. Aucune. À l'intérieur. Oh, intéressant. OK. Je n'aime pas vraiment ça. Comment supprimer l' indentation de liste, CSS. Marge extérieure gauche. Marge gauche. Zéro. Voyons si cela a fonctionné. Non. Essayons-le ici. Non. OK. Je n'aime pas vraiment la liste simplement parce qu'elle ne fait pas ce que nous devions faire. Utilisons donc une boîte, et utilisons des éléments de typographie juste en bas. Permettez-moi donc de copier tout ce texte. Déposez-le là. Mmm , d'accord. Et nous allons simplement les intégrer aux éléments de typographie. Alors, bon sang. D'accord. Euh , OK. Ouaip. Et Waouh, en fait le bon numéro. Fantastique Euh, oups. OK, cool. Nous allons nous débarrasser de ce petit espace supplémentaire. Très bien, cool. Alors maintenant , nous avons tout prévu. Hum, une autre chose que je voudrais faire. J'aurais pu simplement créer un composant de style pour ceux-ci, mais je ne l'ai pas fait. Encore une fois, il existe des moyens de le rendre beaucoup plus propre, vous savez, si vous l'utilisez pour votre portfolio. Et ça a l'air bien. La seule chose que je veux faire est de définir, exemple, une largeur minimale. Alors c'est quoi ? 318 ? Je pense que je vais définir la largeur maximale, mais la largeur minimale. Ou est-ce que c'est pareil ? Cela devrait être pareil, en fait. Oh, non, c'est faux. Hum, je pense que c'est pour cela qu'il est dit d'utiliser une grille. Euh. Passons donc au guide de mise en page de la grille CSS Trix. Nous parlons donc de grille d'affichage. Essayons ça. Euh, il en serait de même pour ce conteneur. Donc, si nous disons une grille d'affichage , des colonnes de modèle de grille, un FR, un FR, elles devraient simplement occuper le même espace. Cool. Cela a résolu notre problème. Nous allons opter pour ça. Cela fonctionne donc pour cela. Pour le design de bureau. La conception de notre bureau est donc pratiquement terminée. Nous sommes prêts à partir. La prochaine chose que nous voulons examiner est notre design mobile. Je l'ai donc ouvert dans un deuxième onglet juste pour pouvoir basculer entre les deux ce qui concerne le design mobile, nous voulons en fait que ce ne soit qu'une option. Donc, si je dis un FR, oui, c'est ce que nous voulons. Très bien, alors mettons notre requête mobile ici. Nous allons donc utiliser notre hook de requête multimédia depuis Material UI, l'importer d'ici. Je pense que nous pourrions avoir besoin de l'utiliser. Eh bien, tu vois. Nous l'avons peut-être utilisé à quelques endroits, et je vais juste le retourner un peu. Je vais dire que CS mobile est égal à min ou sorry, Max Width, 600 pixels. Je vais donc vous demander si c'est mobile, faites-le, sinon, faites autre chose. Donc, s'il est mobile, nous voulons que les colonnes du modèle de grille ne soient qu'une fraction. Sinon, nous voulons que ce soit une fraction et une fraction. En gros, on dit que c'est soit configuré comme un et un, soit comme un et deux. C'est donc ce que nous allons faire là-bas. Oh, et il n'aime pas ça parce que cela doit être un composant client. Nous allons enregistrer cela. OK. Génial. Cool. Donc ça a l'air bien. Et puis, oui, il le fait correctement ici. La seule autre chose que je veux changer, ce sont ces petits trucs embêtants concernant le rayon des frontières Et j'ai l'impression que cela fait partie de l'astuce du design. Oh, en fait, ici, ils ne l'ont tout simplement pas incurvé en bas. Intéressant Je suppose donc qu'il suffit de supprimer le rayon de la bordure s' il est droit vers le bas. Hum, je ne sais pas si c'est idéal ou si c' était juste un accident, mais nous suivrons le design tel qu'il est décrit. Hum, donc rayon de la frontière. Oui, nous allons devoir faire deux autres, euh, deux requêtes mobiles supplémentaires. Nous allons donc copier cette requête multimédia dans le CTA. Et encore une fois, ce n'est pas strictement nécessaire, mais ça n'a pas l'air gris. Il n'a pas l'air poli. Nous voulons donc nous assurer de faire de notre mieux avec ce avec quoi nous travaillons. Nous allons donc en faire un composant client, puis nous dirons, si mobile, le rayon de bordure est nul, sinon c'est le rayon de bordure. Ensuite, nous ferons la même chose dans notre Y. supprimerons également certaines de ces importations qui ne sont pas utilisées uniquement pour garder les choses propres Nous dirons que s'il s'agit d'un appareil mobile, le rayon de commande mobile sera nul. Sinon, ce sera le cas et, oui, ça a l'air plutôt bien. C'est exactement ce que nous voulons là-bas. Donc je pense que oui, je pense que c'est plutôt bien d'y aller. Donc oui, c'était une façon très rapide d'utiliser la grille CSS, une combinaison de grille et de boîte flexible, afin de créer un design réactif Comme je l'ai dit, il existe des moyens d' optimiser cela et de le rendre en quelque sorte beaucoup plus propre. Et si c' est l'un des éléments de votre portfolio, je vous recommande est l'un des éléments de votre portfolio, de prendre quelques minutes pour le nettoyer. Vous savez, utilisez des composants beaucoup plus raisonnables. Ne vous répétez pas autant et oui, faites-en un article de portfolio vraiment très solide.