Donnez vie à votre design UI : code avec l'IA Cursor pour les débutants (1 heure)

1. 00 Introduction du cours: Si vous avez toujours eu envie de sortir de votre dossier de design et de voir votre création prendre vie sur le Web, c'est pour vous. Au cours de ce cours, je vais vous montrer comment transformer un simple design Figma en un site Web en ligne à l'aide de Cursor, un assistant de codage gratuit alimenté par l'IA L'avantage de Cursor est que vous êtes train d'avoir une conversation avec votre éditeur de code. Vous pouvez demander n'importe quoi, et le curseur vous aidera non seulement mais vous expliquera également comment le construire. C'est comme avoir un développeur super patient assis juste à côté de vous. Nous allons créer notre premier site Web en utilisant CSS HGML et un peu de JavaScript, apprenant les bases, en modifiant votre design et enfin en publiant un véritable site Web avec Netlify Nous passerons votre design d'un fichier à un site en ligne en moins d'une heure. Ce cours s'adresse à vous si vous êtes concepteur d'interface utilisateur souhaitez briser les barrières du codage et commencer à développer vos propres idées. Aucune expérience de codage n' est requise, juste une volonté d' essayer quelque chose de nouveau. Il s'agit d'un cours proposé par moonlearning point IO. 2. 01 Qu'est-ce que le curseur: Cursor est un assistant de codage alimenté par l'IA qui vous aide à créer rapidement des projets incroyables, un peu comme si vous aviez une conversation avec votre éditeur de code. Que vous soyez débutant ou expérimenté, le curseur rend le codage plus rapide et plus intuitif, vous permettant de créer des choses incroyables en un rien de temps. Alors pourquoi le curseur est-il si intéressant pour vous, les concepteurs ? Cela vous permet d'aller au-delà de la simple conception et fabrication de produits complets. Comment fonctionne-t-il ? Vous pouvez décrire ce que vous voulez dans un langage courant, et la malédiction, je vais créer le code pour vous et vous suggérer où le placer. Vous pouvez me demander n'importe quoi , qu'il s'agisse de savoir comment commencer à créer un site Web, d'ajouter une section de signes et de formulaires ou simplement d'ajuster le design pendant le projet. Par exemple, ajustons la couleur du bouton du bleu au noir variable. Mais Cursor va au-delà de l'éditeur de code. Vous pouvez donc vous demander, par exemple, comment puis-je en faire une base de données ? Ou comment puis-je même commencer à utiliser des bases de données ? Qu'est-ce qu'il y a ? Que dois-je regarder ? Et comment puis-je connecter ces éléments ? Il vous guidera étape par étape. Comme Cursor l'explique plutôt que de prendre le relais, vous gardez le contrôle et la courbe d'apprentissage est incroyable. Une fois que vous êtes prêt à écrire votre propre code, Cursor AI peut vous aider à détecter et à corriger les erreurs ou à mettre de l'ordre dans vos fichiers selon les meilleures pratiques Cursor n'est pas simplement un autre outil d'IA. C'est l'un des outils les plus utiles et les plus stimulants du marché à l'heure actuelle, qui vous permet d'aller au-delà des fichiers de conception et de véritablement créer vos produits en tant que designer. 3. 02 Ce que nous allons créer: Au cours de ce cours, nous allons créer un site Web d'une page entièrement réactif à partir de zéro avec du code Comme base, j'utilise un design Figma que j'ai configuré précédemment Mais attention, pour utiliser Kersey, vous n'avez pas besoin de connaissances sur Figma Vous n'avez pas besoin d'un fichier Figma. Vous pouvez également simplement travailler à partir d'un croquis ou d'une idée en tête. Personnellement, j'aime vraiment configurer préalable mon design dans un logiciel de conception d'interface utilisateur. Je peux déplacer des objets librement. Je peux réfléchir aux composants et à la hiérarchie, puis passer au codage. Cependant, cela dépend entièrement de vous. 4. 03 Matériel de travail: Accédez aux téléchargements et vous trouverez ici des fichiers pour chacun des cours d'apprentissage Mu, et vous trouverez également un téléchargement pour ce cours. Assurez-vous de télécharger le matériel de cours. À l'intérieur, vous trouverez différents fichiers de curseurs pour les différentes étapes sur lesquelles nous allons travailler. Pendant le cours, je veux vous montrer comment les ouvrir, et vous trouverez également le design ici. Si vous cliquez sur le dessin, vous obtiendrez un aperçu PDF de notre design, qui vous donne juste une idée du code hexadécimal des couleurs Vous pouvez recopier le texte et simplement suivre et voir ce que nous allons créer. Si vous n'avez pas Figma, c' est tout à fait une bonne référence Si vous avez un compte Figma et préférez avoir le fichier FGMA original, il vous suffit de copier ce lien et de le coller dans votre navigateur pour créer une copie du fichier Figma original S'il vous plaît, ne cliquez pas vraiment dessus, copiez-collez. 5. 04 HTML de base et css: Un guide super rapide et facile pour les débutants sur les bases du HTML et du CSS et sur la façon dont ils travaillent ensemble pour créer un site Web. Un site Web est principalement composé de HTML. Si vous cliquez avec le bouton droit sur une page Web dans votre navigateur, par exemple dans Chrome, et que vous sélectionnez Inspecter, vous ouvrez les outils du développeur. Cela vous permet de voir la structure HTML de la page que vous êtes en train de consulter, et vous pouvez même la modifier temporairement à des fins d'expérimentation. Ne t'inquiète pas. Ces modifications se trouvent uniquement dans votre navigateur et elles disparaîtront une fois que vous l'aurez actualisé. Le code HTML est composé de caractères placés entre crochets, appelés éléments HTML. La plupart des éléments sont composés de deux balises, une balise d'ouverture et une balise de fermeture. La balise de fermeture est similaire à la balise d'ouverture, mais inclut une barre oblique supplémentaire avant le nom de l'élément La balise définit un type de contenu. Par exemple, la balise P indique au navigateur d'afficher le contenu inclus sous forme de paragraphe. Les tags eux-mêmes ne sont pas affichés. Les balises H un à H six, par exemple, proposent différentes rubriques selon différents niveaux d' importance, l'âge un étant le plus élevé et H six le plus bas Nous pouvons également ajouter des attributs à une technologie qui fournissent des informations supplémentaires, comme l'utilisation d'un attribut de classe pour appliquer des styles. Je vous en dirai plus à ce sujet dans une minute. Il existe également des éléments à fermeture automatique tels que la balise image, qui extrait le contenu, dans notre cas, l'image via l' attribut appelé source. Mais comment créer une page entière avec ces éléments ? Eh bien, la structure la plus élémentaire d' une page HMR consiste en un élément HML, qui contient la tête et la section corps L'en-tête contient des informations pour le navigateur, qui ne sont pas visibles, comme le titre de la page. C'est donc le petit nom que vous voyez dans l'onglet de votre navigateur, une méta-description pour les moteurs de recherche, et vous pouvez également lier des feuilles de style et des polices, etc. La section du corps contient tout ce qui apparaît sur la page. Donc, votre texte, vos images, vos boutons, tout ce que vous concevez. Voici une liste des tags les plus courants qui pourraient vous être utiles. Vous pouvez faire une capture d'écran. Habituellement, la page d'accueil d'un site Web est nommée Index HTML par convention. Vous pouvez également créer des sous-pages telles qu'une page À propos ou des projets. Pour créer un lien vers ces sous-pages, vous pouvez utiliser la balise d'ancrage A. Cela crée un lien cliquable que vous pouvez placer n'importe où sur votre page Vous pouvez également créer des liens vers des sites Web externes en dehors de votre page. Cependant, si vous ouvrez une page purement HTML, vous remarquerez que tant que le contenu est là, il n'est pas très beau. C'est là qu'intervient le CSS. Alors que le HGML contrôle le contenu de votre page, CSS contrôle l'apparence de vos éléments HTML tels que les couleurs, les polices, l'espacement et Pour connecter votre fichier CSS à votre fichier HTML, vous devez ajouter un lien vers celui-ci dans la section d'en-tête. Maintenant, imaginez vos éléments HTML comme des boîtes invisibles. Le CSS vous permet de créer des règles qui contrôlent apparence et le comportement de chaque boîte et de son contenu. Une règle CSS se compose de deux parties principales : un sélecteur, qui cible un ou plusieurs éléments en HTML, et une déclaration qui définit le style de ces éléments La déclaration elle-même est composée d'une propriété telle que la couleur et d'une valeur correspondante telle qu'un code hexadécimal pour la couleur Vous pouvez ajouter plusieurs déclarations entre crochets, et vous pouvez également combiner plusieurs sélecteurs pour appliquer le même style à plusieurs éléments En CSS, les sélecteurs peuvent cibler des balises simples, mais vous verrez souvent des classes utilisées à leur place Les classes sont attribuées dans la balise HTML, puis référencées en CSS en ajoutant simplement un point avant le nom. Les classes sont plus flexibles et réutilisables car elles peuvent être appliquées à différents éléments pour un style cohérent. Il existe d'autres manières d'utiliser les lets en CSS. Il vaut la peine de connaître le sélecteur universel, qui est un signe astrologique et cible la page entière Nous avons également des identifiants, et ils sont attribués à peu près comme des classes en HTML, puis appelés en CSS en plaçant une balise de hachage avant le Toutefois, les identifiants ne doivent être utilisés que pour mettre en forme un élément spécifique, et non plusieurs. Bien que vous puissiez les utiliser en CSS, ils sont généralement utilisés en JavaScript pour un comportement dynamique. Vous pouvez également voir des sélecteurs qui ciblent des éléments imbriqués dans d'autres Par exemple, celui-ci cible uniquement un élément de paragraphe au sein de la classe appelée sale. Une chose importante à savoir à propos CSS est qu'il fonctionne en cascade Cela signifie que si vous appliquez plusieurs styles au même élément, le dernier sera prioritaire. Par exemple, si vous définissez la couleur sur le bleu, puis sur le rouge, le texte sera affiché en rouge car la dernière règle est prioritaire. Voici une liste des sélecteurs CSS les plus courants. Vous souhaiterez peut-être en faire une capture d'écran. 6. 05 Mettre en place une structure de fichiers: Pour commencer, rendez-vous cursor.com, puis connectez-vous pour un compte gratuit et assurez-vous télécharger la version de bureau de Lorsque vous ouvrez Cursor pour la première fois, vous verrez probablement quelque chose comme ça, ou on vous demandera si vous souhaitez utiliser un terminal. Nous allons rester à l' écart du terminal. Nous allons faire en sorte que les choses restent très simples pour les débutants absolus, et nous allons simplement travailler avec des dossiers. Il suffit donc d'ouvrir un dossier comme vous le feriez toujours. Dans mon cas, je vais en créer un, et je vais l' appeler Cliche Cafe Cliquez sur Créer, puis cliquez simplement sur Ouvrir. Vous verrez alors l'espace de travail, et c'est là que tout notre code sera affiché plus tard. Donc, sur le côté gauche, vous voyez le dossier que nous venons de créer. Si vous voyez autre chose, cliquez un peu ici. Vous pouvez également essayer d'ouvrir un dossier depuis le menu. Vous pouvez faire basculer ce menu par Commande et B au cas où vous ne le verriez pas Et nous voulons également un autre menu très important car nous voulons que notre chatbot soit là, sur le côté droit Je vais donc le faire avec le menu. Je vais voir. Et puis ici, je peux voir l'apparence, et ici vous voyez que c'est votre barre latérale principale, celle de gauche, puis je veux celle de droite, donc la barre secondaire, nous pouvons également utiliser le raccourci qui nous est donné ici. Vous pouvez donc également activer cette option avec Option Command et B, dans mon cas, sur un Mac Si vous souhaitez raccourcir quatre fenêtres, il vous suffit de cliquer ici et le système s'affichera. Vous pouvez à peu près commencer maintenant et vous pouvez simplement dire à l'IA ce que vous voulez créer et elle le configurera pour vous. Mais je préfère d'abord configurer ma propre structure de fichiers, puis je vais parler à l'IA et ajouter tout mon contenu et tout mon design. Je vais donc cliquer sur mon dossier, puis vous pouvez voir que je peux ajouter un fichier ou un nouveau dossier. Je vais ajouter trois fichiers. Le premier s'appelle index HTML, et il est très important que vous le nommiez exactement comme ceci. Ensuite, le second, je vais appeler Styles CSS, puis je vais en avoir un troisième pour plus tard peut-être, que je vais appeler script JS. Pour votre compréhension, le fichier HTML endroit où se trouve le contenu de la page, et il fournit une structure et un sens. En outre, un fichier HTML répond à une page que vous voyez lorsque vous ouvrez une fenêtre de navigateur. Le fichier CSS, c'est là que la conception de la page est contrôlée. Le CSS gère tous les styles et arrangements. Dans le fichier JavaScript, c'est ici que le comportement de la page est défini, qu'elle réponde à ce que font les utilisateurs. Donc, des choses comme un clic ou une saisie. Ce qui va rester très simple. Utilisez un HTML, un CSS et un JavaScript, mais vous pouvez évidemment avoir plusieurs de ces fichiers. La seule chose que vous devez prendre en compte est que le HTML doit toujours commencer par un index HTML, puis vous pouvez avoir des sous-pages nommées différemment. Ce qui est génial, c'est que si vous ne savez rien, vous allez simplement demander à votre petit ami ici, notre chatbot basé sur l'IA Par exemple, disons, quoi sert l'index HTML ? Et considérez donc vraiment cela comme votre assistant à qui vous parlez constamment. C'est comme un développeur super sympa qui va s'asseoir à côté de vous, et si vous avez des questions, vous pouvez les poser. Et au fait, si tu ne comprends rien, fais-le savoir. Donc, par exemple, je ne comprends pas. Je suis un débutant total, et il vous donnera alors une version appropriée que vous pourrez comprendre. Et il en va de même si quelque chose tombe en panne il y a une erreur ou si quelque chose ne fonctionne pas. Parlez-lui, comme vous parleriez à une personne, comme s' il y avait une erreur. Je ne savais pas pourquoi c'était arrivé. Je vais ajouter une dernière chose. Donc, dans mon dossier principal, je vais ajouter un autre sous-dossier, donc nous ne voulons pas créer de fichier Nous voulons un nouveau dossier et je vais l'appeler images. Et celui-ci est actuellement vide. 7. 06 Utiliser les dossiers et le thème existants: Vous pouvez soit simplement travailler à mes côtés et configurer votre propre structure et votre propre code, soit vous pouvez également, surtout si vous vous perdez, ouvrir des dossiers prédéfinis que j'ai créés pour vous. Assurez-vous donc de télécharger le matériel de cours, puis dans le matériel de cours, vous trouverez des dossiers prêts à l'emploi. D'ailleurs, le nom et le nombre de dossiers peuvent changer ici. Mais disons simplement que vous voulez passer à la structure de fichier que j'ai créée, puis prendre la première ici et l'ouvrir. Et vous pourrez ensuite voir mes précédents travaux ici. Une fois que nous aurons commencé à ajouter du code dans une minute, vous verrez que le mien ressemble plus ou moins à ceci. Vous pouvez donc voir qu'il y a de très belles couleurs ici. Il se peut que vous voyiez initialement une configuration différente, et il s'agit du thème de couleur de votre éditeur. Si vous souhaitez changer cela, cliquez simplement sur le curseur ici dans le menu, puis cliquez sur Paramètres et recherchez le thème. Et ici, dans le thème, vous pouvez choisir n'importe quel thème. J'utilise Monochai qui est une façon assez populaire de voir les choses, mais toute autre méthode que vous pouvez également utiliser change simplement la couleur Permettez-moi donc de vous donner un exemple ce à quoi cela ressemblerait autrement. Cliquez donc sur les paramètres du curseur, le thème et choisissez simplement celui avec lequel vous vous sentez à l'aise. Une petite note avant de se lancer. Nous travaillons avec l'IA, alors nous discutons avec elle, et même si nous disons des choses identiques ou similaires, nous n'obtiendrons probablement pas exactement le même code et le même libellé. C'est tout à fait normal. L'important est que vous commenciez à comprendre comment utiliser le curseur et comment créer vos propres produits. Il ne s'agit pas d'imiter à 100 % ce que je fais à l'écran Et c'est très important, les choses vont se casser, les choses vont mal tourner. Fais-moi confiance. Il ne s'agit pas de le rendre parfait. Il s'agit de comprendre comment le réparer et aussi comment utiliser le curseur pour vous aider à le réparer. 8. 07 Mettre en place notre contenu avec HTML et le curseur: Ajoutons donc du contenu. Assurons-nous d'abord d' avoir notre discussion ici. N'oubliez donc pas que nous allons dans Afficher l'apparence, puis dans la barre latérale secondaire ou que nous utilisons un raccourci. Maintenant, ce que nous voulons créer, c'est une page de café d'une page J'ai donc créé une mise en page très rapide ici, assez approximative avec Figma Et surtout, vous n'avez pas besoin d'utiliser Figma. Vous pourriez simplement parler à Cursor et le créer à partir de votre tête. vous pourriez avoir un petit griffonnage sur un papier En gros, vous pourriez avoir un petit griffonnage sur un papier ou utiliser n'importe quel autre logiciel Donc, je ne l'utilise vraiment que comme exemple. Vous n'avez pas du tout besoin de le configurer comme ça. Jetons un coup d'œil car nous allons y aller étape par étape. Nous avons donc ici différentes sections, comme un héros, un menu, ici, le Futa Et vous pouvez voir que ce que j'ai fait, c'est que j'ai une certaine hiérarchie ici. Encore une fois, vous n'en avez pas vraiment besoin. Je viens juste de le modifier. Vous pouvez donc voir que dans le héros, nous avons un H. Il s'agit d'une balise HGML. Si vous ne le connaissez pas, ne vous inquiétez pas. Dans la vraie vie, cela reviendrait probablement aussi à utiliser une dénomination plus sémantique comme celle-ci, mais nous voulons que cela reste très simple Et puis j'ai une hiérarchie différente, g un, g quatre, et quelques copies de texte pour le héros, une image et le menu. Commençons par cela. Ce que nous allons essentiellement faire, c'est dire à Cursor exactement ce que nous voulons construire et comment nous le voyons. D'ailleurs, vous pouvez parfois trouver un petit fichier joint ici par défaut. Pour l'instant, retirez-le parce que ce que nous voulons que le curseur fasse, c'est qu'il utilise la structure que nous avons déjà configurée et je vais vous le dire. Je vais vous dire d'utiliser ma structure de fichier dans Next HGML et de styliser CSS Je souhaite créer un site Web d' une page pour un café appelé Cliche Cafe Je vais donc juste vous donner un exemple de ce que j'ai tapé. Je vais accélérer le processus et vous le lire, alors ne vous attendez pas à ce que vous puissiez taper. Ce que vous pouvez faire, c'est simplement arrêter la vidéo, puis taper la même chose ou simplement créer votre propre texte. Cela ne veut pas dire que le mien est meilleur, et nous n'allons probablement pas obtenir le même résultat de toute façon Je vais vous lire le texte, et d'ailleurs, peu importe que vous ayez des fautes de frappe fantastiques Créez donc une première section intitulée héros. Il s'agit d'une moitié de texte sur la gauche et d'une moitié d'image sur la droite. Le texte est sous la forme H one, Cliche Cafe, puis en dessous du nom de la rue La ville âgée de quatre ans et moins que dans le texte à copier, utilisez P. C'est un tag pour le texte à copier, les heures d'ouverture. Créez une deuxième section intitulée menu, et ici je voudrais ajouter le menu, qui comprend quatre boissons et quatre plats contenant tous un nom, qui est copié en gras, puis en dessous de la description du plat en copie, et juste un P normal, et en dessous le prix. À la fin, ajoutez un pied de page avec les coordonnées. Appuyons sur Entrée. OK, super, voyons ce que nous avons. Encore une fois, ce sera probablement très différent pour votre génération de celle que j'ai rencontrée ici. Comme vous pouvez le voir, voici une structure simple de votre téléavertisseur chaud Et tout d'abord, nous avons l'index HTML, puis plus bas, il nous donne du CSS. Donc, si vous souhaitez ajouter le code HTML de l'index, assurez-vous que vous êtes dans le fichier HTML de l'index Et puis si vous passez la souris dessus, vous verrez un petit bouton Appliquer, cliquez sur Continuer, et tout ce code sera généré pour vous Pour l'instant, nous allons simplement cliquer sur Accepter. Vous pouvez voir ici qu'il y a une tête. Cela ne va pas s'afficher. Ce n'est qu'une information générale sur cette page et elle est déjà là et intègre déjà notre style CSS. Il fait référence à ce fichier CSS ici. Voici le corps, tout ce qu'il contient dans la technologie corporelle, vous pouvez voir que c'est ce que nous verrons plus tard affiché. Maintenant, assurez-vous de l'enregistrer. Si vous voyez cette petite bulle ici et qu'elle n'est pas enregistrée, appuyez simplement sur Commande et S, et dès que vous voyez à nouveau la croix, elle est enregistrée. Passons maintenant aux styles, et ajoutons également nos styles. Alors postulez, continuez, et il va maintenant ajouter les styles ici pour nous. Acceptons cela. Et vous pouvez voir ici que nous avons quelques styles pour le héros, pour les différentes sections et pour le Putter OK, alors maintenant nous voulons voir à quoi cela ressemble. Donc, la façon de voir les choses est que vous devez trouver votre fichier HTML d'index. Vous pouvez l'utiliser directement à partir du curseur, ou vous pouvez accéder au fichier où vous l'avez enregistré, puis l' ouvrir avec le navigateur. Le moyen le plus simple est de simplement le déposer sur votre navigateur. Icône ou cliquez simplement avec le bouton droit de la souris pour l' ouvrir. Et c'est parti. Voici notre petit site web, évidemment pas encore très joli, mais nous y avons tout le contenu dont nous avons parlé à Cursor. OK, affinons-le un peu. Et tout d'abord, commençons par l'image. Nous voulons donc utiliser cette image ici. Donc, soit vous avez cette image dans votre fichier Figma, vous pouvez simplement l'exporter et l' enregistrer dans vos fichiers de curseurs Rappelons-nous donc où nous voulons cela. Notre fichier est configuré ici et souvenez-vous que nous avons créé un petit dossier appelé images. Nous voulons donc que ce soit juste là. Si vous n'utilisez pas Figma, utilisez simplement n'importe quelle image et faites-la glisser dans ce fichier Encore une fois, n'oubliez pas qu'il s'agit du même fichier sur votre ordinateur que celui que vous voyez reflété dans le curseur Dans mon cas, je vais l'exporter ici, je vais l'exporter ici, puis vous pourrez voir sur ma machine, je vois ces fichiers, et maintenant je vais simplement l'appeler hero Image et l'enregistrer. Passons maintenant par-dessus et vous pouvez voir maintenant que si j'ouvre le dossier d'images, il se trouve juste là. Ce que je vais faire maintenant, c'est parler à nouveau au curseur et je vais indiquer au curseur l'image du héros, au niveau du fichier, son point d'image JPEG dans le dossier Images. Appuyez sur Entrée pour générer du code supplémentaire. Voyons maintenant ce qu'il fait. Cela nous indique de passer dans le fichier d'index. Nous sommes déjà là et nous remarquons quel point cela vous explique bien tout. Si nous cliquons maintenant sur Appliquer et continuer, cela nous indiquera exactement où il va l'ajouter. C'est également une excellente façon d' apprendre et de comprendre cela. Vous pouvez voir ici avant qu'il ne soit écrit image et l'image n'était qu'une image de café, et maintenant il est écrit «   images en barre oblique Cela signifie qu'il faut aller dans ce dossier et récupérer l'image du héros. Ensuite, il suffit de cliquer sur Accepter. Assurez-vous de ne pas oublier de le sauvegarder. Et maintenant, jetons un coup d'œil à notre site Web. Nous avons besoin de nous rafraîchir. Vous pouvez soit faire ici même dans le navigateur, soit simplement appuyer sur Commande et vous pouvez voir que nous avons maintenant notre image ici. OK, alors ajoutons juste quelques derniers petits détails. Je vais donc recopier l'adresse ici. Maintenant, je vais juste revenir à mon fichier de curseur, et nous pouvons l'ajouter à la main. Je pourrais simplement l'ajouter ici aussi, ou je peux indiquer le curseur pour que je puisse dire, pour l'adresse, utilisez-le. Ensuite, je copie simplement le texte que j'ai copié depuis mon fichier de conception et j'appuie sur Entrée. Je vais aussi lui dire de le placer l'un en dessous de l' autre , puis d' appuyer sur Entrée et vous pouvez maintenant voir le code. Alors postulez, continuez. Fantastique Encore une fois, il vous l' explique bien. Connaissons également nos heures d'ouverture. Je vais donc simplement les copier, les coller ici et demander au curseur de les ajouter. Et encore une fois, passons à l'index, appliquons, et nous verrons bien où il a été édité. Et il comporte également deux lignes maintenant. Sauvegardons-le, passons ici et actualisons-le. Ça a l'air vraiment sympa. Et encore une fois, c'est probablement là, je vais le ranger plus tard lorsque je travaillerai sur mon design Maintenant, regardons le menu et le menu, ce que j'ai fait ici. Ce sont comme des composants avec lesquels travailler. Mais ici, j'ai juste des textes volants. Je vais lui dire d'utiliser ce texte pour le menu. De plus, je pourrais simplement utiliser ce qu'il a généré ici. Je vais donc juste lui dire de l'utiliser pour le menu, puis je vais ajouter le texte que je viens de copier à partir de mon design. Appliquons donc ceci, continuons. Et ça a l'air un peu bizarre. C'est comme un gros groupe maintenant, mais allons-y et voyons à quoi cela ressemblerait. Il a donc perdu l'audace et il n'est pas très structuré. Mais ce que nous pouvons faire, c'est arrière et en parler à Cursor. Donc, ce que je vais faire, c'est dire dans le menu. Chaque boisson ou aliment est un article dont le nom est en gras, puis dessous de la description et du prix. Et je vais juste lui demander s'il peut configurer cela avec une bonne sémantique pour moi, car je ne sais pas quelles balises j'utiliserais Maintenant, cliquons sur Appliquer car celui-ci est déjà bien meilleur. Il utilise un article ici. Appliquons cela. Poursuivre. Fantastique sauf que... Passons par-dessus et actualisons notre page pour qu'elle soit plus belle. Les distances sont correctes, mais la configuration générale est correcte. Je vais juste faire une dernière petite chose. Je vais lui dire de nettoyer. Je vais juste dire de mettre de l'ordre dans le code HTML et tout ce qui suit pour le fichier CSS pour une sémantique super sympa et une configuration parfaite, et il me donnera ensuite ces modifications 9. 08 Ajouter des styles avec le curseur et le CSS: C'est donc un design que nous avons maintenant, et vous pouvez voir ici dans notre fichier Figma que nous voulons changer votre typographie, ajouter de la couleur, de l' espacement, Alors allons-y petit à petit. Et d'ailleurs, c'est vraiment le moment où tu dois commencer à jouer avec ça parce que tu vas obtenir résultats vraiment différents. Les choses vont mal tourner. Vous devez résoudre ce problème, vraiment le prendre comme un terrain de jeu pour explorer cet outil. Je vais commencer par prendre cette couleur. Il s'agit d'une variable dans Figma. Je vais juste récupérer le code hexadécimal pour le moment. Cela va bien fonctionner. Ensuite, pour la typographie de tout le texte, j'utilise Railway et c'est une police Google Réduisons-le et expliquons tout cela à Cursor. Alors, jetons-y un coup d'œil. Nous avons donc ici notre en-tête par lequel nous commençons. Vous pouvez donc voir qu'il s'agit d'une classe de héros, d' texte de classe, d'une image de classe. Donc, si nous sautons dans ce CSS, vous pouvez trouver la classe de héros. Point signifie toujours classe, puis héros. Et donc ici, vous pouvez voir ici le texte, l'image du héros, toutes les différentes choses. Et vous pouvez aussi simplement sauter dedans et jouer avec ça. Donc, ce que nous voulons faire, je vais le faire à la main. Je vais juste copier le code hexadécimal avec la couleur de fond car c'est assez évident Jetons donc un coup d'œil à ce que j'ai découvert. Rafraîchir Parfait. Maintenant, ce que nous voulons faire, c' est ajouter le texte. Donc, pour le texte, je vais parler à Cursor, et je vais le raconter. Je dis donc que je veux utiliser Google Font Railway pour tout le texte de la page entière. Cela me dit d'abord d'entrer dans le code HTML, appliquer, de continuer, puis de voir ce que cela fait. Cela va donc s' ajouter à la tête. Encore une fois, la tête est ce que vous ne voyez pas. Il va ajouter un lien vers cette police, donc il va insérer cette police Google pour moi. a l'air génial. Acceptons cela et enregistrons ce fichier. Et maintenant, dans les styles, appliquez , continuez, et cela génère, et cela utilise les chemins de fer. Sauvegardons donc également ceci, revenons en arrière, actualisons et voyons si cela s'améliore. Fantastique Tout ça a l'air bien. Maintenant, je n'aime pas non plus ce rembourrage ici. Revenons en arrière, donc tout ce rembourrage. D'ailleurs, très pratique si vous êtes dans Chrome, le bouton droit de la souris, cliquez sur Inspecter, puis vous obtenez ce que l' on appelle le mode inspection. Vous pouvez donc voir le code HTML ici, puis vous pouvez voir tous les styles appliqués Et tu peux jouer avec elle ici. Cela n'a donc aucune influence sur votre code. Cela se passe vraiment ici même dans le navigateur. C'est très utile pour connaître et comprendre la structure. Vous pouvez donc voir qu' il y a un rembourrage général sur notre héros de classe, mais qu'il y en a aussi d'autres Si nous passons à l'image, nous avons également une certaine marge ici. Nous voulons donc éliminer tout cela , alors jetons-y un coup d'œil. Vous pouvez soit parler au curseur soit nous pouvons simplement l'enlever. Nous pouvons donc simplement retirer le rembourrage entier, ou une autre façon de le faire est de retirer le rembourrage supérieur, droit et inférieur Alors parlons-en, en fait. Je vous le dis, enlevez le rembourrage supérieur, droit et inférieur de 50 de la classe des héros Une autre chose que nous voulons faire, c'est l'image du héros Il y avait aussi une sorte de marge autour de l'image, mais je ne la trouve pas. Je vais donc simplement dire à Kursa que nous ne voulons pas de rembourrage ni de marge autour de l'image Générons-le, appliquons-le, acceptons-le, puis revenons arrière et regardons ce qu'il a fait. Et nous pouvons voir que c' est toujours dans le héros, donc ils en remboursent encore 20 C'est donc à gauche et à droite. Cursor ne nous a donc pas compris. Revenons en arrière. Donc, si vous avez ceci, c'est en haut, en bas, à gauche et à droite. Donc, ce que nous voulons faire, c'est le haut c'est zéro, le droit c'est zéro. Le bas est zéro, puis nous voulons juste que ce soit sur le dernier bout. Nous allons donc faire oui. Si vous ne comprenez pas cela, vous pouvez également parler à Cursor et lui dire simplement ce que vous voulez qu'il fasse. Alors revenons en arrière, mettons ceci à jour, et cela ressemble exactement à ce que nous recherchons. Génial. Maintenant, stylisons un peu ce texte. En fait, je l'ai déjà configuré dans Figma. Encore une fois, vous pouvez simplement le faire à la main au fur et à mesure, mais dans la mesure où je l'ai, je vais m'en servir. Ce que je vais faire, c'est juste copier tout ça. Laissez-moi le recopier , puis je le raconterai. En fait, je passe au CSS. Je sais que ce sera en CSS. Je le dis où je le veux. Dans mon cas, H un, et je vais juste le coller. Laisse-moi voir ce qui va se passer. Je pourrais aussi simplement le coller moi-même. Ça a l'air génial. Au fait, je ne pense même pas avoir besoin la famille de polices parce que je l'ai déjà mise. Je vais juste la laisser comme ça pour le moment, je peux toujours tout ranger D'accord, sauf que Et je vais faire de même pour les autres. Donc, j'ai deux ans. C'est ce que je fais pour toute mon échelle de caractères ici. Je le copie simplement depuis le mode profond de Figma où vous pouvez obtenir tous les paramètres. Tu n'es pas obligée de faire ça. Vous pouvez également simplement demander au curseur de le rattraper pour vous. Vous pouvez simplement écrire les valeurs que vous voulez ou utiliser certains paramètres par défaut. Donc, si vous travaillez avec Figma , c'est très pratique Sauvegardons ceci, puis voyons si nous obtenons une différence. Donc ça a déjà l'air plutôt sympa. En fait, cela le rend un peu plus grand. Donc ça a l'air génial. Et maintenant je vais juste lui demander de nettoyer. Je lui demande de nettoyer le CSS, répétitions et de créer des variables pour couleur et la famille de polices. Appliquons cela. Donc c'est super sympa. Il nettoie vraiment l' ensemble de votre fichier en un seul clic Sauvegardez-le, et ça a déjà l'air beaucoup plus propre. Vous pouvez voir ici que tout est réglé, et puis les variables ici sont fantastiques Alors, jetons-y un coup d'œil. Assurons-nous qu'il n'y a pas d'erreur, et ça a l'air pareil. Mais jetons un coup d'œil, car il y a étrange rembourrage qui se produit Allons inspecter et voyons d'où cela vient. Nous avons cette marge de 16, puis ici nous avons une marge et je ne vois pas vraiment d' où elle vient. Revenons en arrière et demandons à Cursor. Je demande qu'en mode inspection, une marge est appliquée aux héros H un, H quatre et P, mais je ne la vois pas. D'où vient-il ? Montrez-moi en CSS. Cela nous indique donc que la marge provient des paramètres par défaut du navigateur. Donc, une explication ici, nous avons compris. Ajoutez donc une marge zéro à tout cela. OK. Je vais juste te demander, peux-tu le faire pour moi ? Cliquez sur Appliquer , puis vous verrez ici la marge zéro, sauf que nous allons l'enregistrer, puis réduisons la marge et voyons si cela a fonctionné. Parfait. OK, maintenant nous pouvons simplement ajouter les marges que nous voulons réellement. Alors je le dis, OK, super. Il suffit maintenant d'ajouter un espace entre le nom H et l'adresse des heures d'ouverture. Donnez-moi une mise à jour du CSS. OK, il faut donc d'abord ajouter des classes dans le code HTML. C'est ce que nous allons faire. C'est un stylo. Ajout de certaines classes. Oui, je ne suis pas sûr que c'est ce que je veux, en fait. Et puis il en ajoute ici. Rejetons cela et parlons-en à nouveau. Je vais donc le raconter. Le H est donc une unité. Ensuite, la rue et la ville devraient être une unité, H quatre. Mais l'un en dessous de l'autre une distance d'environ 32 pixels par rapport à l'unité suivante, qui correspond aux temps d'ouverture. Pouvez-vous ajouter les trempettes ou la manière dont vous pourriez les disposer de la meilleure façon ? OK, ça a l'air sympa. Voyons ce qu'il fait. Ça a l'air génial. Créez donc un petit cluster ici, un petit cluster ici. Ça a l'air très beau. Demandez-lui toujours de le présenter de la meilleure façon possible, et cela vous donnera une assez bonne configuration. Passez ensuite au CSS. R Je ne le vois pas vraiment. Je l'édite ici. Demain, nous pourrons plus tard lui demander de faire le ménage. Revenons en arrière. Ça a l'air plutôt sympa. Maintenant, nous allons simplement organiser notre menu ici, alors revenons en arrière. Donc, si nous jetons un coup d'œil ici, nous pouvons voir que le menu était un peu foiré lorsque nous l'avons rangé. Donc, ce que je vais faire, c'est parfois plus facile. Nous le supprimons simplement , puis nous lui demanderons d'en ajouter un nouveau. Passons donc à notre fichier Figma. Et là, je me souviens que c'est la configuration. Tout cela est donc une composante, mais ici, j'ai juste un texte libre à copier, donc je vais juste le saisir, sauter par-dessus, lui dire quoi faire. Je vais donc le dire en dessous du héros d'en-tête, ajouter une nouvelle section intitulée menu des boissons. C'est le contenu, puis je copie simplement tout mon contenu. Le titre des boissons et de la nourriture date de trois ans, et le reste est simplement de copier le texte P, où le nom du produit est en gras, puis en dessous de la description, puis du prix Modifiez et mettez à jour le code HTML et le CSS. Encore une fois, cela ressemble un peu à ce que cela m'a apporté, alors disons-le pour que tout soit un peu plus ordonné Disons que cela a l'air bien, mais assurez-vous que chaque aliment et boisson est comme un produit à part entière et que la configuration sémantique est optimale en HTML Cela fait généralement toujours l'affaire si vous ne savez pas quoi dire. Ça a l'air bien mieux. il utilise un H quatre, Mais il utilise un H quatre, donc je vais juste le dire. Ça a l'air génial. Il suffit de ne pas utiliser un H four. Il suffit de mettre le P en fort pour le nom. Alors regardez si nous avons maintenant trouvé le bon. OK, ça a enfin l'air bien mieux. Disons donc appliquer. Poursuivre. Et en fait, il ne l'ajoute pas. Donc, copions-le. Ensuite, nous allons simplement le coller ci-dessous. Génial. Voyons la section. C'est ce qu'on appelle le menu des boissons. a l'air bien. Il nous a donné une carte d'identité. Encore une fois, je préfère avoir ce cours, mais n'hésitez pas à le faire comme vous le souhaitez. Et j'ai aussi besoin du CSS. Je lui dis que j'ai également besoin du CSS et note que j'ai changé l'ID en classe. Si c'est encore une fois trop avancé, demandez-lui ce qu'il faut faire. Jetez-y un coup d'œil, puis dites-lui ce qui fonctionne ou ne fonctionne pas, et cela vous aidera. Passons donc au CSS. Appliquez, continuez et acceptez. OK, voyons juste si ça a marché. Ça a l'air fantastique. Je veux juste le centrer maintenant et avoir un peu d'espace ici. Mais c'est moi qui le dis. Ça a l'air génial. Il suffit de centrer tous les textes et fautes d'orthographe n' ont pas d'importance. Donc, espace au-dessus du titre H trois dans cette section. Et d'ailleurs, il sait maintenant que je fais référence à la dernière chose que j'ai mise à jour. Parfois, vous devez indiquer à quelle classe vous faites référence. OK, appliquons ceci. Poursuivre. Vous pouvez voir qu'il a centré tout le texte et qu'il a ajouté un peu de marge. Acceptons cela. Sautez ici, rafraîchissez. Et ça a déjà l'air d'être un très bon site web. Je vais juste le dire pour tout ranger. Je conseille donc de mettre de l'ordre dans le HML et le CSS en utilisant les meilleures pratiques. Cela peut donc prendre un moment. Vous pouvez ensuite l'appliquer au HGML d'abord, puis vous pouvez appliquer l' autre au fichier CSS Et il y a une petite chose que je ne veux pas mettre en couleur d' arrière-plan ici, alors je vais juste la retirer à la main. OK, super. Allons y jeter un œil. Cela fonctionne toujours. Fantastique Donc, comme je l'ai déjà mentionné, ne considérez pas cela comme un didacticiel avec les étapes un, deux et trois. Il s'agit simplement de vous montrer comment je me suis comporté dans ce scénario. Si vous tapez la même chose, vous obtiendrez peut-être un résultat différent. Vous avez un autre projet. Il s'agit donc simplement de jouer avec cela, de comprendre et de trouver des solutions. Une petite remarque après l'enregistrement, j'ai remarqué que ce titre est en fait beaucoup plus gras que celui de mon album. Donc, si je regarde ici, il s'agit d'un poids de police de 900. Si je regarde mon CSS, il est également fixé à 900. Cependant, je demande au curseur pendant que cela se produit et il a fait remarquer que lorsque j'insère la police Google, vous pouvez voir ici que le nombre d' entrées par défaut est de 407 cents. Je vais juste le sélectionner ici, puis je pourrai juste lui demander d'intégrer le reste également. Au fur et à mesure que nous actualisons, vous pouvez constater que j'ai maintenant appliqué le bon poids. 10. 09 Rendre notre site web réactif avec le curseur: Voici donc notre page maintenant, et vous pouvez voir que nous avons notre introduction, notre menu, et j'ai ajouté une autre section sur cours de Brisa et j'ai nettoyé le Donc, ce que nous voulons faire maintenant, c'est que si nous le redimensionnons, nous voulons qu'il se comporte correctement. Nous voulons donc, par exemple, que cette image s'accumule juste en dessous. Voyons donc comment nous pouvons le faire. Demandons simplement au curseur. Lorsque vous lui dites comment vous souhaitez que toutes les sections se comportent, il est conseillé de regarder comment elles s'appellent. L'un d'eux s'appelle Hero Drinks Menu, et ici, notre section, donc le cours qui s'y rapporte s'appelle Barista Course Cela prendra également de l'ampleur plupart du temps si vous vous contentez de le décrire, mais il y a parfois une certaine mais il y a parfois une certaine confusion avec le libellé au fur et à mesure que vous approfondissez, c'est une bonne idée de le faire. Disons comment nous voulons qu'ils se comportent tous. Encore une fois, j'accélère un peu les choses, alors vous devriez peut-être aller jusqu' au bout, arrêter, et soit écrire ce que j'ai écrit soit simplement écrire votre propre texte Rendez donc la page réactive. Il est donc beau, du mobile au bureau. Héros sur grand écran, conservez les IA. Sur les petits écrans, empilez l'image sous le texte. Assurez-vous d'ajouter de l'espace entre le texte et l'image sur les petits écrans. Ensuite, la carte des boissons. Gardons-le tel quel. Brisa le cours et notez comment j'utilise le nom de la classe. Empilez ou non, sur les grands écrans, conservez l'AIS sur les petits écrans, empilez le texte sous l'image. Assurez-vous d'ajouter de l'espace sous l'image sur les petits écrans et également sous les boutons. Appuyez sur Enser. Alors, jetons un coup d'œil. Cela nous demande d' utiliser les requêtes des médias. Donc, pour des raisons de réactivité, nous utilisons des requêtes multimédia, ce qui signifie qu' à partir d' une largeur de cette largeur, elles nous indiqueront d'utiliser ces règles Et ici, par exemple, en dessous de cette largeur, utilisez les règles appliquées ici par les identifiants. Ensuite, nous utilisons Flexbox, la grille SS. Donc, si vous êtes au courant et que vous vous lancez et jouez avec, si ce n'est pas le cas, assurez-vous d'en informer Cursor. Appliquons donc cela et voyons ce qui se passe. Et vous pouvez voir qu'il vient ajouter les requêtes médias pour le héros, pour le texte du héros, pour l'image Barris de course, Bars de course En fait, je ne suis pas sûr que tout s'appelle comme ça. Allons y jeter un œil. Des barres indiquent l'image du cours, le texte, l'inscription, le bouton. Donc, parfois, cela se confond un peu avec les noms de classe. Donc tu voudras peut-être juste nettoyer ça plus tard. Voyons ce qui se passe, et ensuite nous pourrons toujours retoucher tout ça. C'est donc rafraîchir. Et ça se cumule bien. J'ai besoin de cet espace. Ici, je voulais que cela ne décroche pas et que nous ayons peut-être besoin d'un peu d'espace au-dessus du H, puis ici, cela s'empile bien, l'espacement ne décroît pas, probablement à cause de ce que nous avons vu que le nom se confond un peu avec Alors demandons peut-être à Cursor. Ayez donc vraiment une conversation comme vous le feriez avec vos collègues. C'est ce que je demande. L'espacement sous le texte du héros et le bouton Britta ne s'affichent pas . Peut-être utilisez-vous des noms de classe qui n'existent pas ? OK, alors maintenant j'y suis allée et on y jette à nouveau un coup d'œil. Alors maintenant, qu'est-ce que cela nous apprend ? Voici les modifications mises à jour. Voyons s'il les a réellement découverts par lui-même. Je ne sais pas si c'est si intelligent. Actualisons et redimensionnons. Et ça a l'air bien mieux. Génial. Donc, la seule chose que nous voulons maintenant, c'est un peu de rembourrage pour les enfants d'un an Disons-le simplement. Donc, dans le héros, ajoutez un peu de rembourrage au-dessus de l'âge d'un an sur les petits écrans et retirez également le rembourrage autour de l' Fournissons ceci sauf, sauvegardons , actualisons, et d'ailleurs, une bonne façon de le faire est également de passer à l'inspection, car ce que vous obtenez sur Inspecter, vous avez ce petit bouton ici, puis vous pouvez passer à différentes tailles de mobile. Alors maintenant, nous avons un bel espace là-haut qui a l'air vraiment bien. Nous avons toujours celui-ci. Nous pourrions donc voir d' où cela vient. Je pense que cela vient d'un rembourrage provenant d'un rembourrage ici et du héros Nous devons donc enlever celui-ci. Et puis voici notre menu, et puis voici celui-ci, qui fonctionne très bien. Trouvons donc simplement ce rembourrage et nous pouvons essayer de le faire à la main C'est donc vraiment le rembourrage Hero. Et ce que nous pouvons faire, c'est simplement copier cela parce que maintenant nous commençons à comprendre le CSS, puis placons-le ici et nous pouvons mettre tout cela à zéro. Et voyons ce qui va se passer. Il se peut que nous devions maintenant donner un peu plus de marge à ce texte . Jetons donc un coup d'œil et ajoutons le rembourrage ici Et puis souvenez-vous que c'est en haut, à droite, en bas et à gauche. Voyons donc si nous comprenons déjà suffisamment le CSS pour le faire. Parfait. Et c'est ainsi que vous pouvez réellement vous lancer dans l'apprentissage. Et au fait, un petit conseil. Si vous cliquez ici, vous avez le plus petit, qui est de 320 pixels. Le plus petit mobile du marché, vous pouvez donc vous assurer que tout est toujours lisible sur celui-ci. Et juste comme ça, vous avez un joli site web réactif. Ainsi, au fur et à mesure que vous continuerez à travailler, vous apprendrez de petites choses sur le CSS Il est très important que tu essayes de comprendre. Si vous ne comprenez pas, vous pouvez toujours demander au curseur. Alors demande-le. Alors, par exemple, demandez-vous : qu'est-ce que le flex ? Par exemple, à quoi ça sert ? Et il va vous expliquer comment ces choses fonctionnent. C'est donc vraiment, vraiment fantastique, et vous pouvez vraiment partir de là. Tout ce qui ne va pas, c'est pareil. Demandez-le. La seule chose dont vous devez être un peu conscient est la dénomination , car parfois elle ne correspond tout simplement pas à la bonne convention de dénomination. C'est donc quelque chose que vous pouvez simplement regarder comment s'appellent toutes ces différentes choses. Maintenant, la seule chose que nous voulons faire, c'est évidemment que tout soit bien rangé Je vais juste vous dire de le ranger en utilisant les meilleures pratiques. 11. 10 Lancez votre page en ligne avec Netlify: Donc, pour visualiser localement notre design, nous prenons l'index et nous l'ouvrons simplement dans notre navigateur. Cela nous donne une idée réaliste de ce à quoi ressemblera notre page, mais elle n'est visible que sur notre machine locale. Alors, comment le mettre en ligne ? Comment déployons-nous cette page ? Et c'est une bonne chose, vous pouvez simplement demander au curseur. Quel est donc le moyen le plus simple de déployer ma page ? Vous pouvez donc voir ici que cela nous donne plusieurs options. Vous pouvez utiliser Github, Netlify, et il y en a d'autres. Celui que je vais choisir et que j'aime plus pour les débutants est Netlify Et vous pouvez simplement aller plus loin à droite dans le curseur et simplement lui demander de vous donner des instructions claires sur la façon de procéder. Mais je vais juste vous montrer parce que c'est assez simple. Accédez à netlify.com et créez un compte gratuit. vais voir quelque chose comme ça , puis m'assurer que vous êtes sur les sites. Et ici, vous allez voir comment ajouter vos sites à Netlify. Nous avons donc Github Vous pouvez parcourir les modèles et le créer ici. Mais la partie la plus simple que nous allons utiliser pour le moment est le déploiement manuel. Donc c'est ici. Vous pouvez maintenant simplement naviguer pour télécharger, puis trouver votre fichier. Ainsi, le fichier dans lequel vous travaillez sur le curseur peut voir qu'il doit contenir tout, vos images, votre index, votre CSS, tout cela. Sélectionnez l'intégralité du fichier, puis cliquez sur Télécharger. Et c'est à peu près tout. Donc, ce que vous voyez ici, c'est votre URL pour le moment. Si nous cliquons sur Open Production, réduisons-le un peu afin de mieux le voir. Et nous avons maintenant notre page qui est en ligne. Et vous pouvez voir que c'est exactement la même chose que ce que nous avons vu auparavant. Voici donc notre URL. Nous voulons y remédier un peu. Cliquez donc sur Configuration du site, puis ici, vous verrez changer le nom du site, et nous pouvons maintenant simplement le supprimer et appeler « café cliché ». Sauvegardons-le. Et vous pouvez voir maintenant que notre URL est l' application cliche cafe point netlify Donc, si nous l'ouvrons à nouveau, vous pouvez le partager, et c' est ici que vous trouverez votre page. Si vous souhaitez mettre à jour votre page, revenez simplement à Deploy et vous pourrez simplement parcourir une nouvelle version. Il enregistrera également toutes les anciennes versions pour vous afin que vous puissiez toujours faire des allers-retours. Maintenant, vous voudrez probablement utiliser votre propre URL. Dans ce cas, cliquez simplement sur Aperçu du site, puis vous pourrez le voir ici. Vous avez donc déployé votre site. Vous pouvez maintenant cliquer sur configurer votre domaine personnalisé. Cela dépend de l'endroit d'où vous avez obtenu votre domaine. Vous pouvez l'obtenir directement avec Netlify, ce qui est probablement le plus simple, mais vous pouvez également ajouter n'importe quel domaine que vous avez acheté ailleurs, ajouter n'importe quel domaine que vous avez acheté ailleurs, et Netlify vous guidera, et vous allez également sécuriser votre site, c' est-à-dire qu'il est en HTTPS, ce qui Vous pouvez également continuer à utiliser votre nouvelle URL Netlify gratuitement 12. 11 Se brancher aux applications tierces: Voici donc ma page, et vous pouvez voir ici que le cours Brisa sera bientôt disponible Si vous cliquez sur S'inscrire, rien ne se passe pour l' instant Je veux donc que les gens puissent s'inscrire à une liste de diffusion pour obtenir plus d'informations ultérieurement. Maintenant, il existe de nombreux fournisseurs de listes de diffusion. Je vais juste utiliser Mailchim qui est très populaire Mais vous pouvez également accéder à Cursor et simplement lui demander celui qu'il recommande pour vos besoins. Pour commencer, je vais faire quelque chose de très simple. Sur mon site Web, si vous cliquez sur S'inscrire, vous serez simplement redirigé vers une page d'inscription séparée Dans Mailchimp, je vais accéder à l' audience puis aux formulaires d'inscription Et puis ici, vous pouvez voir différentes manières. Des fenêtres contextuelles, des intégrations, et je vais en choisir une qui soit une page de destination séparée Je vais donc cliquer sur Créer une nouvelle page de destination. Et ici, créez simplement une page de destination. Et je vais appeler cette page d'accueil cliché Café. Commençons. Et puis vous pouvez voir qu'il y a un très beau modèle, vous pouvez donc le rendre vraiment beau. Mais je vais juste opter pour celui-ci super simple ici pour la démo. Débarrassez-vous de celui-ci ici, et appelons-le un café cliché Ou appelons ça un cours de barista. Sauvegardez-le, sauvegardons-le et fermons-le. Ensuite, je vais cliquer sur Publier. Encore une fois, vous pouvez modifier éléments et vous pouvez simplement personnaliser un peu plus. Mais pour l'instant, je vais juste publier. Et maintenant, si je clique ici pour partager votre page, vous pouvez voir que j'ai créé juste ce petit panneau et ce petit formulaire ici. C'est donc l'URL que je vais copier, et je vais en parler au curseur. Petit conseil, vous pouvez simplement surligner le bouton parce que vous savez que c'est simplement surligner le bouton parce que vous sur ce bouton que vous voulez cliquer, puis cliquer sur Ajouter au chapeau, et il sait déjà à quoi vous faites référence Si vous cliquez dessus, ouvrez cette page dans une nouvelle fenêtre, puis je colle simplement le lien que j'ai reçu de Mail Jump Il nous dit donc ce qu'il fait. Il ajoute du JavaScript. Nous pouvons le faire plus tard, mais disons simplement de n' utiliser que du HTML pour le moment. Nous l'avons donc simplement transformé en lien. Appliquons-le et vous pouvez voir maintenant que si nous cliquons dessus, cible vide signifie ouvrir une nouvelle fenêtre, bouton d' inscription, puis il s'inscrit. Acceptons cela, sauvegardons-le. Passons ici et actualisons-nous. J'ai besoin de mettre un peu d'ordre dans le style plus tard. Ensuite, il ouvre cette nouvelle page, et nous pouvons nous inscrire. Alors essayons simplement ceci. Je vais juste appeler cette page de destination. OK. Donc, si nous intervenons ici , que nous nous et que nous examinons le contexte, adressons à notre public et que nous examinons le contexte, nous pouvons constater que cela a été ajouté. Tu peux vraiment commencer à jouer avec ça. Par exemple, nous pourrions ajouter un champ de saisie directement sur notre page, et vous pouvez ensuite parler au curseur pour lui demander comment vous pouvez configurer pour que s'il y a une entrée dans ce champ, elle soit transmise immédiatement à Mailchimp Parce que l' avantage du curseur est qu'il utilise ce que l'on appelle les LLM Ne vous inquiétez pas trop de celui que vous choisirez. Ils vont tous travailler pour ce que nous faisons. Et c'est quelque chose comme Che hiphi ou Claude. Cela signifie que dans ce cas, ils voient notre code et le comprennent, mais ils sont également connectés Internet en tant que tel et ils ne sont qu'un chat basé sur l'IA à qui vous pouvez également poser des questions sur des sujets extérieurs à votre éditeur de code Une autre bonne chose que vous pourriez faire est, par exemple, de regarder, d'ajouter une fenêtre contextuelle pour lui envoyer un e-mail, intégrer les formulaires ou d' utiliser d'autres outils Celui que j'aime vraiment, c'est m'acheter un café. a donc ces petits boutons d' assistance ici, et vous pouvez les ajouter sur votre page. Donc, si vous cliquez dessus, quelqu'un peut simplement vous donner un euro cinq euros ou quelques dollars et soutenir votre projet C'est donc vraiment une bonne chose, et vous pouvez simplement discuter avec Kerse de la façon de l' intégrer Il vous indiquera exactement où aller sur ces pages et quelles informations il a besoin pour vous aider à connecter tout cela. Une dernière petite chose que je tiens à souligner, cependant, beaucoup de ces choses nécessiteront un script Java. Nous avons donc un fichier JavaScript dans notre configuration. Cependant, il n'est actuellement pas connecté à notre index. Vous devez donc toujours le dire à Cursor, est super simple. Disons-le simplement. Je veux donc utiliser le fichier Script JS, comment le connecter. Et il vous indiquera de l'ajouter à votre code HTML, et de noter comment il l'ajoute au bas de votre code HTML. Donc dans la tête, nous avons le style CSS connecté puis le JavaScript juste avant la balise body. Le monde vous appartient donc vraiment, alors commencez simplement à jouer , à parler au curseur de ce que vous voulez faire et à vous connecter à votre page Il vous avertira des problèmes de sécurité la plupart du temps. Cependant, il s'agit toujours d'une IA. Donc, en tant que débutant, soyez prudent et n'utilisez aucune donnée sensible. 13. Merci: Bravo pour avoir terminé ce cours, n'hésitez pas à me contacter à MoLearningo Je suis toujours curieux de connaître vos commentaires. Vous me feriez également une grande faveur en laissant un commentaire ici. Ava a apprécié ce cours et assurez-vous également de consulter moonlearning point IO, où vous trouverez de nombreux documents supplémentaires, ainsi que des cours membre M, vous pouvez accéder à toutes mes vidéos, qu'il s'agisse des bases de l'interface utilisateur UX, nombreuses informations sur la FINMA, de nombreuses études approfondies, ou En tant que membre M, vous pouvez accéder à toutes mes vidéos, qu'il s'agisse des bases de l'interface utilisateur UX, de nombreuses informations sur la FINMA, de nombreuses études approfondies, ou encore d'une section sur les principes fondamentaux de CSSNUI Nous allons donc discuter de ce qui se passe lorsque conception de l' interface utilisateur rencontre le code concernant la mise en page, la typographie, la couleur et tout autre sujet pertinent Sur Moon Learning, vous pouvez également trouver un lien gratuit vers tous mes articles récents, ainsi qu'une page de ressources où j'essaie de vous tenir au courant des dernières nouveautés dans le monde de l'UX UI Design. Si vous préférez un événement réel, jetez un œil à l' atelier et à la section de discussion. Je prends fréquemment la parole lors de conférences et donne des ateliers en ligne sur les sujets de l' expérience utilisateur, de la conception d' interface utilisateur et du solopreneuriat Assurez-vous de vous abonner à ma newsletter pour rester à jour. Alors à bientôt sur moonlaring point IO.