pour concevoir un site web créatif : concevez des sites web créatifs étonnants grâce à l’IA Claude | Engr. Hussein Attié | Skillshare

Vitesse de lecture


1.0x


  • 0.5x
  • 0.75x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

pour concevoir un site web créatif : concevez des sites web créatifs étonnants grâce à l’IA Claude

teacher avatar Engr. Hussein Attié, Entrepreneur I Engineer I Educator

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Introduction

      1:22

    • 2.

      Votre projet

      0:11

    • 3.

      Poser les bases

      12:32

    • 4.

      Ajouter l'inspiration au design

      3:55

    • 5.

      Créer un site Web à page unique

      16:06

    • 6.

      Design Customization

      4:16

    • 7.

      Ajouter des animations pour le site Web à page unique

      6:20

    • 8.

      Ajout de graphiques pour le site à page unique

      7:41

    • 9.

      Déployez votre site Web à page unique

      4:22

    • 10.

      Créer votre site Web multi-pages

      14:25

    • 11.

      Presenting the Website For Design Applications

      10:24

    • 12.

      Navigation et édition sur le site web

      14:10

    • 13.

      Ajouter des animations pour le site Web multi-pages

      13:20

    • 14.

      Ajouter des graphiques pour le site Web multi-pages

      7:22

    • 15.

      Nettoyage des polices à l'échelle du site

      6:42

    • 16.

      Ajouter des images

      12:41

    • 17.

      Changing Website Design Themes

      9:21

    • 18.

      Deploying The Website Design Through Claude

      3:53

    • 19.

      D'autres options pour le déploiement d'un site web

      10:15

    • 20.

      Conclusion

      0:16

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

28

apprenants

--

À propos de ce cours

Apprenez à utiliser l'IA de Claude pour concevoir et créer des sites Web étonnants et modernes sans écrire une seule ligne de code.

Dans ce cours pratique, vous découvrirez comment Claude peut servir de partenaire de conception Web avec l'IA, ce qui vous aidera à transformer vos idées en expériences de site Web front-end complètes de manière rapide et créative.

Plutôt que de passer des heures à écrire manuellement du code à partir de zéro, vous apprendrez à guider Claude avec des invites efficaces, générer des structures et des mises en page de site Web, affiner les conceptions, améliorer le style visuel et créer des pages Web soignées grâce à un flux de travail assisté par l'IA.

Ce cours est idéal pour les débutants, les créateurs, les travailleurs indépendants, les entrepreneurs, les designers et toute personne qui souhaite créer des sites web plus rapidement avec l’IA.

Vous apprendrez à :

  • Utiliser l'IA de Claude pour des conceptions Web créatives
  • ! Transformez une simple idée de site Web en une conception front-end complète
  • Créer des pages d'atterrissage et des sections de site web modernes
  • Améliorer les couleurs, la typographie, l'espacement, la structure et la hiérarchie visuelle.
  • et refonte les éléments du site Web à l'aide d'instructions exprimées en langage naturel.
  • Créez des expériences de sites Web réactives avec Claude
  • Personnaliser des conceptions frontales générées par l'IA
  • Dépanner et améliorer les conceptions à l'aide de Claude
  • Vous pourrez ainsi passer rapidement d'un concept initial à un site web final soigné.
  • Créer des sites Web complets sans avoir à tout coder manuellement vous-même

Une approche sans code de la création et de la conception de sites web.

Tout au long du cours, vous suivrez un flux de travail pratique pour créer un véritable site web avec Claude, du concept initial et de la mise en page au style, en passant par la mise en page et la finalisation de la façade.

À la fin du cours, vous saurez comment utiliser Claude non seulement comme un chatbot, mais aussi comme un puissant assistant de conception Web par IA qui peut vous aider à donner vie à vos idées de sites Web créatifs.

Rencontrez votre enseignant·e

Teacher Profile Image

Engr. Hussein Attié

Entrepreneur I Engineer I Educator

Enseignant·e
Level: Beginner

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Introduction: Lorsque vous essayez de concevoir votre propre site Web, vous commencez généralement par un grand nombre de ces griffonnages, croquis, idées, concepts pour vous retrouver avec un site Web défectueux qui ne fonctionne pas Eh bien, plus maintenant. Dans ce cours actuel, je vais vous montrer comment exploiter le pouvoir de l'intelligence artificielle, particulier Claude pour concevoir votre site Web, particulier le développement Web frontal Ainsi, vous n'avez pas à penser au codage, style, aux graphismes, aux animations, qui sont généralement fastidieux Ils prennent beaucoup de temps, beaucoup d'efforts et se cassent assez facilement. Je vais vous montrer comment contourner l'ensemble du processus. Aucun code n'est nécessaire, sorte que vous vous concentrez simplement sur une seule chose en tant que professionnel de la création, la conceptualisation, l'idéation, vos Et je vais vous montrer comment créer et concevoir le site Web, le développement Web frontal, spécifiquement pour donner vie à votre idée Qu'il s' agisse de navigation, de style, de graphisme, d'animation. Des concepts. Vous êtes en train de constituer votre portefeuille. Vous créez votre propre marque personnelle. Les applications sont infinies. Je vais vous montrer les tactiques, comment les utiliser de la meilleure façon possible pour intégrer Claude dans vos efforts de développement Web initial, sorte qu'à la fin du cours, vous aurez un site Web magnifiquement conçu pour présenter votre travail, votre parcours créatif et vos projets 2. Votre projet: Le projet s'articule autour de l'application des principales leçons apprises pour créer et créer votre propre site Web de plusieurs pages Ensuite, vous allez partager vos résultats avec la communauté pour obtenir des commentaires. 3. Poser les bases: Bon retour. Maintenant, il suffit naviguer vers Cloud et vous allez vous connecter, et vous arriverez sur la fenêtre de l'interface principale, la fenêtre d'invite ici. Maintenant que vous allez utiliser le Cloud dans le cadre de l' application actuelle pour le développement Web, particulier le développement Web frontal, nous devons établir des bases et des tactiques importantes pour garantir le succès de notre application. Tout d'abord, nous allons utiliser le modèle de base suivant, Sonic Five, qui est disponible pour tous les utilisateurs utilisant le cloud . Qu'il s'agisse de la version gratuite ou de la version pro, vous pouvez l' utiliser assez facilement. Si vous êtes à un niveau différent ou si vous souhaitez opter pour une version différente, cela dépend entièrement de vous. Vous pouvez opter pour Opus Five, Fable ou Fab Five. N'oubliez pas qu'au fur et à mesure que vous avancez dans le modèle, vous utiliserez plus de crédits, ce qui est très, très important à garder à l'esprit, en particulier pour les tâches complexes que la conception d'un site Web, édition d'un site Web, codes lors de la conception, de la personnalisation, de l'édition de divers éléments Il s'agit donc d'un processus de va-et-vient, peut être très exigeant de la part du modèle d'IA. Cela consommera donc beaucoup de crédits si vous êtes sur un modèle très avancé. Pour les modèles de base ou les modèles de moindre complexité, vous pourriez accomplir le travail sans surconsommation de crédits Donc, si vous utilisez la version gratuite et que vous optez pour les modèles avancés, vous pourriez être à court de crédits assez rapidement. Ensuite, vous devez attendre l'heure de réinitialisation, puis vous pouvez continuer. Si vous optez pour le modèle actuel ou un modèle inférieur, nous pourrions opter, par exemple, pour Sonic Five, qui est celui que nous allons utiliser, qui est le plus efficace pour les tâches quotidiennes. Cela fait le travail, mais cela ne pèse pas vraiment sur la consommation réelle de crédit De cette façon, vous pouvez effectuer plus de modifications, plus de commentaires, plus d'itérations grâce à la personnalisation du site Web De cette façon, vous gagnez du temps, vous économisez des efforts et vous obtenez toujours de bons résultats. Gardez donc cela à l'esprit. C'est donc un concept très important que nous devons comprendre. Comme nous nous occupons de la conception d'un site Web, particulier du développement Web frontal, nous allons tweeter ce projet, ce que nous faisons de manière récurrente, en particulier dans le contexte professionnel. Vous ne créez pas un design une seule fois, et c'est tout. Vous devez réellement modifier le site Web. Vous devez affiner la sortie. Vous devez vous assurer que vous êtes en mesure de toujours revenir sur votre travail précédent et de reprendre là où vous vous êtes arrêté. C'est pourquoi nous devons l' aborder en tant que projet. C'est très critique et très important. Ce que nous allons faire maintenant, c'est cliquer sur O plus, ce qui signifie ajouter un nouveau projet, et nous allons créer un nouveau projet pour notre application pratique. Appelons cela le développement frontal et web. OK. Nous pouvons donc l' utiliser en fonction de nos préférences. Vous pouvez l'appeler comme vous le souhaitez, cela dépend entièrement de vous, n'est-ce pas ? Qu'est-ce que nous essayons de réaliser ? cadre de la portée de l'application, nous sommes en mesure de décrire le projet, objectifs, le sujet, etc. Vous pouvez le modifier ou nous y reviendrons plus tard. Cela dépend entièrement de vous. Ce que nous allons faire, c'est simplement donner un thème de base. Nous allons concevoir le front-end d'un site Web pour un projet commercial, application créative , etc. C'est aussi simple que ça. C'est l'objectif principal. C'est le thème principal. Tu pourrais être précis. Cependant, dans l'état actuel des choses, ce n'est pas si nécessaire. Ainsi, une fois que vous avez créé le projet, étape fondamentale que nous devons aborder, car cela garantira qu'à un stade ultérieur, une fois que vous aurez votre site Web actuel et que vous souhaiterez modifier des éléments, peaufiner des choses, vous pourrez le revoir et sélectionner un certain segment du site Web, le modifier en quelques clics au lieu d' avoir à parcourir l'intégralité recommencez le processus. Ainsi, une fois que vous avez accédé à l'interface du produit, vous avez l' interface de chat ici. Vous avez la possibilité d' ajouter des fichiers, prendre une capture d'écran, des compétences, des connecteurs , des plugins, etc. Regardez le côté droit ici. Nous avons des instructions. Nous avons obtenu de la mémoire, puis nous avons obtenu le contexte et les tâches récurrentes planifiées. Ils sont très puissants si vous voulez faire passer votre application de développement Web frontale à un tout autre niveau. Laissez-moi vous montrer Tout d'abord, nous allons ajouter des instructions. Nous allons dire à Claude ce que nous essayons de faire. Cela fournira à Claude des instructions et des informations pertinentes pour les discussions basées sur ce projet spécifique. Alors soyez précis ici. Qu'est-ce que vous essayez de réaliser, n'est-ce pas ? Essayez-vous de concevoir un site Web pour votre entreprise, pour votre entreprise ? Projet sur lequel vous travaillez ou sur lequel vous essayez simplement de développer vos compétences en matière de développement Web frontal. N'hésitez pas à ajouter le plus de détails possible. Cependant, pour simplifier les choses, je vais vous montrer le niveau d'instructions de base que vous pouvez simplement injecter et vous pourriez obtenir des résultats vraiment puissants. Quelles sont donc les instructions de base ? Je vais dire à Cloud que nous allons travailler sur le développement Web. Ou disons une entreprise hypothétique, nous allons travailler sur un café et une boulangerie, n'est-ce pas Nous allons travailler sur le développement du site Web, le développement frontal une application hypothétique spécifique, et vous pourriez injecter et ajouter votre propre application unique en fonction de vos Nous allons donc travailler sur le développement Web d' une boulangerie Cafe Slash Pour créer un design de site Web d' apparence professionnelle, telle sorte que n'hésitez pas à inclure toutes les contraintes, toutes les préférences. Le design est professionnel et modifiable, ce qui est très important car nous aimerions le modifier facilement. Personnalisable. Les codes pertinents pour le site Web une fois créés, y compris le HTML, le CSS ou tout autre code pertinent, sont facilement extraits et modifiés pour une édition et une utilisation futures. Donc, ce que j' essaie de faire ici, jeter les bases en fonction de mes préférences. Comme je l'ai mentionné, dans le cadre de la démonstration, nous allons travailler sur un projet hypothétique, qui est essentiellement une entreprise C'est un café et une boulangerie, et nous allons travailler sur le design de développement web frontal pour c. N'hésitez pas à l'utiliser pour votre propre application unique, votre propre entreprise, votre propre projet, votre propre idée. Suivez la même structure. Donc, cette invite les instructions de base ou l' invite pour les instructions, nous indiquons à Cloud que le design doit être assez professionnel et modifiable Quelque chose n'est pas statique, quelque chose que nous pouvons corriger et avec lequel nous pouvons travailler. Facilement personnalisable pour référence future, si je souhaite personnaliser le site Web, je reviens au projet. Je suis capable de le personnaliser facilement. Les codes pertinents pour le site Web, une fois créés, y compris le HTML, le CSS ou tout autre code pertinent, sont facilement extraits et modifiés pour une édition et une utilisation futures. C'est très puissant car cela indiquera à Cloud lorsque vous concevez quelque chose, s' assurer que le code que vous créez est quelque chose que je pourrais utiliser, récupérer et personnaliser. Si vous le déplacez , par exemple, vers votre propre hébergement, par exemple, si vous avez une utilisation plus avancée, vous essayez de choisir un certain code le code que vous avez créé, comme un extrait de code pour le fichier HTML ou le fichier CSS, vous pouvez simplement accéder à votre projet, obtenir ce code et le placer directement sur votre site Web si vous vers votre propre hébergement, par exemple, si vous avez une utilisation plus avancée, si vous essayez de choisir un certain code dans le code que vous avez créé, comme un extrait de code pour le fichier HTML ou le fichier CSS, vous pouvez simplement accéder à votre projet, obtenir ce code et le placer directement sur votre site Web si vous en avez sorte de compétences avancées en matière de codage ou d'édition. Cela vous donne donc la flexibilité future dont vous aurez besoin ultérieurement. Ensuite, la mémoire pour le projet proprement dit. En gardant à l'esprit la fonction de mémoire, vous devez l'activer une fois que vous avez accédé aux paramètres. Ainsi, une fois que vous avez accédé aux paramètres, assurez-vous d'activer ou de désactiver la mémoire selon vos préférences. Cependant, si vous activez la mémoire, elle commencera à enseigner à Cloud en fonction des discussions ici. Donc, si nous avons une discussion, elle figurera sur la liste, mais une autre discussion figurera également dans la mémoire du projet. Cela est très important pour les futures applications de développement. Et c'est l'un de mes cas d'utilisation ou d'utilisation réels préférés pour le contexte du projet, l'application du projet, qui est le contexte. Nous pourrions donc ajouter des PDF, des documents, d'autres références textuelles à ce projet réel Je suis là en plus. J'ai la possibilité de télécharger les fichiers, ajouter certains contextes ou même de les connecter à codes externes si vous avez configuré le code dans le cadre de Github, par exemple Cependant, pour notre application, comme je l'ai mentionné, nous n' allons rien coder. Je vous montre comment effectuer le développement Web frontal à partir de zéro via le cloud sans écrire une seule ligne. Cela étant dit, nous avons établi les bases nécessaires pour poursuivre notre application de développement Web. Nous avons configuré notre projet, nous avons mis en place nos instructions, la mémoire est activée en fonction d'une préférence. Maintenant, pour ce qui est du contexte, je vais vous montrer ce que nous allons utiliser pour nous aider à passer à la vitesse supérieure et à courir. Cependant, à ce stade, nous ne faisons que jeter les bases d' une application de développement Web frontale réussie. fur et à mesure que vous progressez dans le projet, Au fur et à mesure que vous progressez dans le projet, gardez-le à l'esprit Vous avez la possibilité de créer . Vous avez la possibilité de créer une tâche de planification dans laquelle vous pouvez , par exemple, la nommer, donner des instructions, et si vous souhaitez, par exemple, Cloud scanne automatiquement un code spécifique, par exemple, pour le site Web que vous ajoutez, puis vous en donne sorte de feedback que vous approuvez manuellement ou que vous approuvez automatiquement dans le Cloud. C'est quelque chose d'un peu plus avancé pour une étape ultérieure une fois que vous aurez terminé le projet lui-même. Si vous ajoutez certains codes ou si vous connectez le Cloud à codes externes par le biais du contexte ou des connecteurs, par exemple, vous ajoutez un connecteur, vous ajoutez un plugin. cloud a la capacité d'accéder aux outils externes que vous lui avez connectés. Vous pouvez ensuite planifier des tâches pour lesquelles Cloud peut effectuer des actions spécifiques, et il les approuve automatiquement ou vous les transmet pour approbation manuelle. Il s'agit d'une tactique avancée, gardez à l'esprit qu'elle existe. Si vous êtes un développeur Web professionnel, vous aimeriez que Cloud passe par une série de codes de temps en temps. Il s'agit plutôt d'un outil avancé que vous pourriez utiliser pour vous aider à réaliser ces tâches répétitives sur une base planifiée. Cela étant dit, nous en sommes déjà à ce stade. Nous avons mis en place les bases pour démarrer notre application de développement Web frontale. 4. Ajouter l'inspiration au design: Et bon retour. J'ai donc établi notre projet, et nous avons jeté les bases de notre application. C'est à cette étape que nous allons ajouter de l'inspiration. Tu m'as bien entendu. Dans le cadre de votre développement Web frontal et de votre application sans code, nous allons trouver de l' inspiration Par exemple, avez-vous déjà consulté un certain site Web ou votre propre site Web, un certain papier sur lequel vous avez écrit votre design ou un schéma ou capture d'écran que vous avez obtenus des fins d' inspiration dans le cadre de votre conception ? C'est à cette étape que nous allons commencer à l'ajouter à notre contact. Nous allons maintenant ajouter quelques fichiers dans le cadre de notre démonstration. Nous allons travailler sur le développement Web frontal d'un site Web, pour un café et une boulangerie Par exemple, il s'agit de l'étape où vous ajoutez les éléments de marque. Vous pouvez ajouter un logo. Vous pouvez ajouter des palettes de couleurs si vous en avez une. Vous pouvez ajouter le message de marque. Vous pouvez ajouter une capture d'écran d' un certain design que vous avez vu quelque part à des fins d'inspiration, ou même faire référence à des sites Web que vous avez trouvés très inspirants pour vous aider à créer un design unique pour votre site Web, des images ou des photos que vous avez capturées avec votre site Web, des images ou des photos que vous votre appareil photo ou quelque chose que vous avez écrit sur une feuille de papier, littéralement Le contexte que vous pourriez ajouter pour vous aider à créer votre site Web est assez infini Voici quelques éléments que vous pourriez ajouter pour vous aider à créer le contexte du site Web. Vous pouvez ajouter le logo. Vous pouvez ajouter une image que vous avez capturée avec votre appareil photo. Vous allez dire que vous marchez dans la rue. Vous avez trouvé une belle plante, un arbre ou une fleur. Vous êtes inspiré pour ajouter ce design à votre site Web. Vous prenez une image, vous pouvez la télécharger dans le contexte. Vous pouvez également prendre une capture d'écran, par exemple, pour votre propre site Web actuel. Et ajoutez-le si vous essayez de modifier un site Web existant, ou mieux encore. Imaginons, par exemple, que vous êtes en train de prendre une tasse de café et que, sur une feuille de papier, vous esquissez le design d'un site Web. Prenez-en une photo et ajoutez-la ici, même sur une serviette Même une URL, par exemple, pour votre propre site Web que vous utilisez actuellement et que vous souhaitez modifier, vous pouvez l'ajouter ainsi qu'une partie d'un fichier PDF, ajouter tous ces détails ou images, captures d'écran. Je vous donne toutes ces idées inspirantes pour vous aider à voir que vous êtes capable d'ajouter de nombreux détails pour vous aider à démarrer À ce stade, l'objectif de cette conférence est vous inspirer, d' obtenir votre logo, vos images, vos captures d'écran, votre site Web, vos captures d'écran, le design sur lequel vous travaillez, le document Word, PowerPoint, PDF, El file, quelle que le document Word, PowerPoint, PDF, El file, soit la référence que vous avez, même la serviette que vous êtes en train de travailler sur le document que vous avez griffonné. N'hésitez pas à le scanner et à simplement commencer à ajouter tous ces éléments au contexte du projet, car cela aidera Claude à analyser comment avancer plus facilement et efficacement À ce stade, commencez donc à ajouter vos éléments de marque, vos logos, une capture d'écran de votre site Web actuel si vous souhaitez le modifier, quelques éléments d'inspiration que vous avez collectés, et nous sommes prêts à nous lancer dans le développement Web frontal de notre site Web 5. Créer un site Web à page unique: Et bon retour. Nous allons maintenant créer un site Web d'une page. C'est très important pour toute entreprise, tout professionnel de la création, tout professionnel en activité , agent de commercialisation, professionnel de la vente, et la liste est longue Généralement, lorsque vous essayez créer, par exemple, un lancement de produit, un nouveau déjeuner d'affaires un produit que vous aimeriez présenter ou une page de destination pour un événement que vous organisez, vous créez généralement un site Web d'une page, n'est-ce pas ? Supposons que, dans le cadre de notre application actuelle, nous ayons le lancement de l'entreprise, qui est une boulangerie et un café, appelés hypothétiquement mugs Il s'agit d'une activité hypothétique uniquement à des fins de démonstration Tous ces détails sont simplement hypothétiques pour que vous puissiez voir comment ils peuvent être facilement adaptés à votre situation unique. Nous allons donc créer un site Web d'une seule page manière très créative pour annoncer le lancement de l'entreprise. Alors, comment allons-nous créer un site Web d'une seule page ? Cela peut fonctionner pour tout, d'ailleurs, pour un déjeuner de produit, un déjeuner d'affaires, certains détails, une page de vente, peu importe ce que c'est, une page de détails sur un événement spécifique concernant votre entreprise, quel qu'il soit. C'est complètement réglé, donc ce que nous allons faire , c'est dire à Claude d'agir tant que développeur Web professionnel, en particulier. Développement frontal et Web dans lequel vous allez m'aider à créer un site Web d'une seule page, qui inclut les éléments suivants. Il s'agit d'une invite très puissante. Il fournit des contextes et des exigences clairs. Le logo figurant dans les fichiers du projet. Découvrez à quel point c' est puissant lorsque vous ajoutez un grand nombre de fichiers importants au contexte Claude est capable de sélectionner tous ces détails et de les associer à notre application Le logo des fichiers de projet, la palette de couleurs des différentes images ajouté un design élégant et professionnel. Ensuite, nous allons passer à Tell Claude entièrement personnalisable. Je vais donc utiliser Tag Cloud ici, agir en tant que développeur Web professionnel, particulier dans le cadre d'un développement Web dans lequel vous allez m'aider à créer un site Web d'une seule page. C'est à cette étape que vous allez ajouter votre propre application unique pour une entreprise, votre entreprise, votre site Web, où qu'il se trouve, quelque chose qui est lié à votre propre application pour laquelle vous appliquez ces tactiques. Aidez-moi à créer un site Web d'une seule page pour ma nouvelle entreprise appelée mugs, qui est un café et une boulangerie, qui comprend les éléments suivants Ensuite, je vais le dire à Claude, me poser toutes les questions pertinentes en cours de route. Il s'agit donc d'une structure rapide très puissante, car elle indiquera à Cloud d'agir en tant que développeur Web professionnel, particulier dans le domaine du développement Web frontal dans lequel vous allez m'aider à créer un site Web d'une seule page pour ma nouvelle entreprise J'ai ajouté le thème, les contacts, droite, y compris le logo des fichiers du projet, la palette de couleurs des différentes images ajoutées, design élégant et professionnel, un site entièrement personnalisable. Et du code. Et je vais ajouter qu'est-ce que j'essaie d'obtenir de ce site Web actuel, ou je pourrais simplement le garder tel quel. Donc, si vous souhaitez simplement opter pour un site Web d'une page, ce qui est suffisant pour votre entreprise, tant mieux. Si vous avez une tâche spécifique à accomplir, par exemple annoncer le lancement de l'entreprise, vous pouvez ajouter cette exigence spécifique. Je vais donc rester précis. Site Web d'une seule page pour ma nouvelle entreprise appelée UGS, qui est un café et une boulangerie Le site d'une seule page doit annoncer le jour et la date d'ouverture à venir. Allons-y. Je vais laisser la date et le jour vides car Claude me les demandera certainement si je souhaite modifier la date du déjeuner ou les dates d'ouverture ou des dates spécifiques à ma guise. Et si on y allait pour le jour et l'heure ? Pour y ajouter plus de variation. Comme vous pouvez le voir ici, j'ai commencé par une invite générique. J'ai ensuite personnalisé l'invite dans le cadre de pratiques d' ingénierie appropriées pour inclure un certain contexte, un thème, des références, des applications spécifiques afin que vous puissiez voir exactement comment je pourrais m'y prendre pour passer d'un site Web générique d'une seule page à un site Web spécifique d'une seule page. De cette façon, vous pouvez vous inspirer et vous frayer un chemin grâce à votre propre application unique Allons-y. Claude est donc actuellement en train de travailler sur le projet. Comme nous pouvons le voir ici, cadre du projet, nous avons entamé une nouvelle discussion. C'est très puissant car cela nous permettra de suivre le processus à plusieurs reprises sans avoir à réinitialiser les choses encore et encore Alors, quels champs de direction visuelle conviennent à Mug ? Pourquoi Claude m'a-t-il posé cette question ? Parce que cela fait partie de mon objectif stratégique. Posez-moi toutes les questions pertinentes en cours de route Il s'agit d'une tactique d'ingénierie rapide avancée qui permet au modèle d'IA de vous aider à améliorer le rendement Quelle est donc la direction visuelle ? Boulangerie chaleureuse et rustique avant-gardiste, textures douillettes, élégantes et minimalistes, audacieuses et modernes. Laissez-moi décider en fonction du logo. Donc, si vous avez votre propre logo spécifique pour votre entreprise, pour votre entreprise, et que vous souhaitez simplement le reprendre à partir de là, cela vous aidera à faire le travail. Cependant, à des fins de démonstration, je vous montre l'étendue de la flexibilité et les modifications que vous pouvez apporter et que vous pouvez apporter tout au long du processus de conception. Optez pour l'élégance et le minimalisme. Alors de quelles sections la prochaine page Zoom a-t-elle besoin ? C'est très, très puissant. Cela n'a pas été placé intentionnellement dans l'invite, car cela donnerait à Claude la marge de manœuvre ou la flexibilité suggérer des éléments à vérifier C'est très important si vous êtes un débutant complet le développement Web ou le développement Web frontal, ou si vous n'avez pas assez d'inspiration pour décomposer les sections de la page Vous avez déjà décomposé les sections de la page en fonction du contexte, vous pouvez simplement les ignorer complètement en cliquant sur Ignorer. Toutefois, si ces résultats vous inspirent, n'hésitez pas à les personnaliser , car tous ces résultats sont basés sur la solide tactique d'ingénierie rapide que sont basés sur je vous enseigne. Alors, de quelles sections la prochaine page Zoom a-t-elle besoin ? Juste le logo, les données d'ouverture et le compte à rebours, plus l'adresse, le texte d'un court article sur nous, inscription par e-mail pour les notifications de lancement, les réseaux sociaux Et si on les ajoutait tous ? Je vais le dire à Claude. Allons-y. Tout ce qui précède ou je peux simplement les sélectionner tous. Cela dépend entièrement de moi. Allons-y. Transmettez-le ensuite sur Cloud. Nous allons créer la page complète pour moi. En gardant à l'esprit, nous nous concentrons simplement sur le développement frontal et Web à ce stade. Pour les utilisateurs avancés, c' est quelque chose de très puissant pour rationaliser votre processus de développement Web. Cependant, dans le cadre de notre application, nous nous concentrons sur le développement web frontal Jetons un coup d' œil aux commentaires. J'ai compris, élégant et minimaliste avec tout le logo, adresse du compte à rebours, un texte de présentation, inscription par e-mail et des liens sociaux Avant de commencer à construire, j'ai besoin de quelques détails concrets. J'utiliserai des espaces réservés de bon goût pour tout ce que vous préférerez remplir C'est très puissant car cela me permettra de jeter un œil au design, de prendre le canevas et le personnaliser ultérieurement en fonction de mes préférences. Quelles sont la date et l' heure d'ouverture, l'adresse et le lieu, les identifiants sociaux, une ou deux lignes à propos de Mugs, e-mail de contact Cela apparaîtra en fonction de votre propre application unique. N'hésitez pas à ajouter vos propres informations si vous le souhaitez. N'hésitez pas à répondre à ce que vous avez et à ignorer l'espace réservé au reste pour indiquer clairement tout ce qui manque, afin de pouvoir le repérer et le remplacer plus tard Je vais donc dire à Claude de procéder à places pour chacun d'entre eux. Tu vois à quel point c'est puissant ? Maintenant, j'ai un canevas personnalisable complet prêt à l'emploi en fonction de la configuration de mon projet. C'est donc très puissant car si vous vous souvenez, le cadre de la base du projet d'installation, nous avons demandé que tout soit assez personnalisable, viable et professionnel. C'est donc la base de la base que vous voyez en ce moment. Si nous n'avons pas suivi les étapes que je vous ai enseignées et que nous les avons suivies dans l'ordre, la transition depuis Cloud sera très différente. C'est pourquoi de nombreux étudiants, de nombreux apprenants, de nombreux professionnels obtiennent des résultats grâce à l'utilisation de base du cloud, alors que des résultats complètement différents proviennent de l' utilisation professionnelle du cloud. C'est là que la distinction a lieu. Si vous utilisez Cloud avec désinvolture avec ces solides connaissances sur la façon de l'utiliser dans le cadre de la séquence que je vous enseigne, vous obtiendrez des résultats très différents Cependant, si vous suivez la méthode stratégique étape par étape que je vous montre, vous obtiendrez des résultats de qualité professionnelle, ce qui vous aidera à voir la différence, et vous serez ce qui vous aidera à voir la différence, en mesure de vous démarquer en fonction du résultat que vous générez, qui est tout à fait unique, professionnel au niveau par rapport à un apot de base générique qui n'est pas complètement quelque chose que vous pourriez utiliser dans le cadre de vos activités quotidiennes. Comme nous pouvons le voir ici, c'est parti. Claude fait tourner le moteur pour effectuer l'ensemble du processus. Jette un œil à ça. Comme nous pouvons le voir ici, voici le site à venir, un seul point d'index HTML, tout, HTML, CSS, JS, autonome, ainsi que votre logo enregistré dans les ressources Excellente. Qu'est-ce qu'il y a dedans, tic ? Regardez les détails où se trouvent les espaces réservés et sont tous marqués Excellente. Voyez à quel point c'est professionnel. Il s'agit de créer le code proprement dit pour moi en le référençant par le biais du logo Nous avons donc obtenu le logo. Et jetez un œil au fichier et au site Web lui-même, site Web une seule page ici. Nous avons donc des tasses, un café et une boulangerie. Quelque chose de chaud se prépare, un nouveau lieu de quartier pour les matinées calmes, jambon, l'espresso et le pain cuit de toutes pièces tous les jours Ensuite, nous avons obtenu l' espace réservé pour la date. Quand je dis simplement à Claude, vas-y, change la date. Nous allons régler ce problème automatiquement. Jetez ensuite un œil au petit extrait sur le thème du café Je peux le modifier comme je le souhaite. Jetez-y également un œil pour les détails. Restez au courant, soyez les premiers à franchir la porte. Vous pouvez simplement le connecter ultérieurement. Une fois que vous aurez terminé le développement Web frontal, nous aurons les réseaux sociaux ici Si nous souhaitons les connecter d'ailleurs, et une fois que vous aurez cliqué sur l'un d'entre eux, il vous indiquera simplement d'ouvrir le lien en externe, car ceux-ci sont considérés comme des espaces réservés aux liens eux-mêmes En gardant à l'esprit que nous sommes en train de créer un site Web d'une seule page, et notre application est entièrement exempte de code et spécifiquement destinée au développement Web frontal Comme vous pouvez le voir ici, en cas d'erreur, Claude les repérera en cours de route. Je vais donc dire à Claude de corriger les erreurs. C'est essentiellement quelque chose que vous pourriez faire avec Claude lorsqu'il y a des erreurs, suffit de dire à Claude de continuer, trouver une erreur et de corriger l'erreur. Il s'agit d'un site Web d'une seule page très professionnel et élégant. Comme vous pouvez le voir ici, nous avons obtenu les espaces réservés pour le logo lui-même dans le cadre du site Web d'une seule page Maintenant que Claude corrige les erreurs, j'ai la possibilité de le télécharger sous forme de fichier HTML ou de l'ajouter dans le cadre de mon projet Il suffit de dire à Cloud : allez-y, ajoutez-le au projet de développement Web frontal, qui est une autre application ou un autre niveau pour faire avancer votre application, où vous pourrez obtenir le résultat que vous générez pour affiner votre projet Ainsi, chaque sortie que vous obtenez du Cloud peut être ajoutée au projet pour obtenir meilleurs résultats au fil du temps. Et supposons que vous soyez un développeur Web professionnel, vous pouvez simplement parcourir le code ici. Vous pouvez cliquer sur les commentaires si vous souhaitez commenter ou modifier quelque chose. Comme je l'ai mentionné, notre application est exempte de code. Cependant, pour que vous puissiez voir exactement ce qui se passe si vous intéressé applications supplémentaires ou si vous êtes capable de coder, ou si vous souhaitez en savoir plus utilisation de ces codes et les appliquer à vos propres pratiques uniques, vous pouvez voir pratiquement toutes ces fonctionnalités et options devant vous pour que vous puissiez les obtenir inspiré et pour l'appliquer à votre situation unique. Nous pouvons donc cliquer sur l'icône Toggle ici. J'ai la possibilité de consulter le code dans son intégralité. Pour la conception du site Web. J'ai la possibilité de le copier. J'ai la possibilité de le télécharger pour le modifier ultérieurement ou de l'utiliser dans le cadre de mon hébergement actuel, par exemple, de site Web. Si vous utilisez un hébergement de site Web ou un créateur de site Web, comme Wordpress, par exemple, vous pouvez simplement prendre le fichier HTML et l'ajouter à votre page Wordpress, par exemple, à droite, dans le cadre d'une page nouvellement créée Ce sont donc des applications tout à fait uniques pour vous inspirer. Cependant, à ce stade, tout ce que nous faisons est toujours entièrement intégré à Claude et sans code. Nous avons donc notre site Web, un site Web d'une seule page entièrement conçu. Comme on peut le voir ici, Claude a ajouté une date hypothétique simplement pour corriger les erreurs, ce qui est assez Nous obtenons une date hypothétique, un compte à rebours, et je pourrais simplement modifier n'importe quelle partie du processus en fonction de mes préférences Il s'agit donc simplement du résultat initial que nous recevons de Claude. Il s'agit d'un site Web d'une seule page basé sur le contexte actuel. 6. Design Customization: Bon retour. Nous avons donc obtenu notre résultat initial grâce au Cloud, et en général, tout site Web nécessite une certaine personnalisation. cadre de la présente conférence, je vais vous montrer comment personnaliser le résultat de Cloud en fonction de vos préférences. Vous pouvez simplement changer les polices, les graphismes, les couleurs, ajouter certains éléments. Cela dépend entièrement de nous. Comme nous pouvons le voir ici, à partir de la sortie de base, nous avons obtenu des espaces réservés pour le logo lui-même Et selon mes préférences, je ne veux pas avoir à m'occuper de segments provenant des espaces réservés, et j'aimerais que tout soit simplement prêt à fonctionner Je vais donc à Ta Claude. L'image du logo est cassée sur le site. Assurez-vous que le logo est entièrement visible et modifiez ce qui est nécessaire pour que cela se produise. Cela prendra Cloud. Tu as une certaine flexibilité. Mon résultat final est assez simple. J'aimerais que mon logo soit présenté directement ici dans le cadre du design. Comme vous pouvez le constater, ici, il s'agit d'un processus de va-et-vient, typique de tout modèle d'IA, qui fait partie d'une interaction stratégique avec le modèle d'IA. Vous pouvez obtenir les résultats que vous préférez en de vos préférences à chaque fois. Claude est simplement en train de suivre le processus et de regarder les fichiers réels ici. Et comme vous pouvez le voir ici, le format du processus est différent et il trouve toujours une sorte d'erreur de formatage, car le logo semble correspondre à la palette de couleurs réelle à l'origine de l'erreur, ce qui est une bonne chose à gérer pour le moment. Pourquoi ? Parce que si vous le faisiez manuellement, vous régleriez vous-même l'erreur. Ainsi, une fois que nous rencontrons une erreur, il suffit de la renvoyer à Claude, afin que Claude soit en mesure de corriger l' erreur en notre nom. Maintenant, comme nous pouvons le voir ici, on y arrive presque. Je vais donc dire à Claude que le logo doit être exactement placé sur le site avec un cadre circulaire. Jusqu'à présent, le logo n'est pas affiché. Allons-y. Ainsi, tout eddor que nous rencontrons manuellement, apporte des éléments de marque, votre logo, un format différent ou des palettes de couleurs différentes, et que vous essayez de les afficher, sont des eddors typiques auxquels tout développeur, tout développeur Web frontal aura du mal à faire face dans le cadre de la Eh bien, nous n'avons pas à le faire. En suivant simplement les tactiques que je vous enseigne, nous pouvons simplement expliquer à Claude comment procéder au processus de personnalisation et laisser Claude faire le gros du travail pour nous en termes de modification du code, de personnalisation de la sortie jusqu'à ce que nous obtenions le design final que nous préférons Comme nous pouvons le constater, Claude a essayé d' intégrer quelques modifications au logo, mais il a quand même eu du mal à le faire correspondre exactement à nos préférences C'est donc très important. Comme nous pouvons le voir ici, nous pouvons effectuer diverses modifications afin d'obtenir les résultats que nous essayons d'obtenir Claude essaie donc de le réparer encore et encore, encore et encore jusqu'à ce que cela soit fait. Tu vois à quel point c'est puissant ? Allons-y. Nous avons donc pu voir directement devant nous toutes les itérations effectuées par Claude et que vous deviez généralement effectuer manuellement pour y parvenir, ce qui nous a généralement effectuer manuellement pour y parvenir, ce permis de gagner du temps et de nous éviter tous les tracas Et c'est parti. Nous pouvons voir le logo magnifiquement présenté devant nous. 7. Ajouter des animations pour le site Web à page unique: Bon retour. Nous avons donc ajouté avec succès un joli logo dans le cadre de notre site Web d'une seule page. Maintenant, ajoutons d'autres personnalisations, non ? Nous sommes en train de développer le site web frontal, et nous pourrions procéder à une série de personnalisations en fonction de nos préférences Et si je voulais le modifier, par exemple, pour y ajouter plus d'animation. Quelque chose de chaleureux se prépare, par exemple. Je pourrais simplement prendre une capture d'écran par ce biais, la glisser-déposer directement ici, ou simplement surligner l'élément, copier et le coller dans Cloud. Je vais le dire à Cloud. J'aimerais aussi ajouter de l'animation. Allons-y. Soulignez ceci. Quelque chose de chaud se prépare, tel qu'il se transforme en. Disons que quelque chose de chaud est en train de cuire. Nous y voilà dans un style animé. Suggérez plusieurs animations à sélectionner. C'est parti. Cela le dira donc à Cloud. Allez-y. J'aimerais animer ceci. Si vous avez une animation spécifique en tête, cela dépend entièrement de vous. Cependant, si vous souhaitez passer en revue différentes options, alors que vous essayez de trouver le design qui vous convient le mieux, la meilleure animation, ce message indiquera à Claude, allez-y, listez quelques animations pour moi, puis je trouverai celle que j'aime le plus. Quel style d'animation convient le mieux à Brewing to Cooking Swap ? Doux dégradé croisé, rouleau vertical, type précédent, transformation bleue ? Eh bien, je pourrais le dire à Claude. J'aimerais tous les tester. Alors affichez-les un par un manière interactive dans le chat jusqu'à ce que je confirme Alors, qu'est-ce que cela ferait ? En ajoutant le mot de manière interactive à l'invite ici, vous dites à Claude que j'aimerais voir les animations affichées une par une avant de confirmer celle que je dois choisir, ce qui est très important dans le cadre de vos personnalisations Vous aimeriez savoir quelles sont les meilleures options pour votre site Web, n'est-ce pas ? Surtout si vous essayez de vous inspirer pour un certain design ou si vous essayez de découvrir quelles sont les options qui s'offrent à vous. En ajoutant cette invite solide, vous pouvez le dire à Claude dans le chat. Montre-moi exactement à quoi ça ressemble. Je le confirme, alors vous pourrez cartographier. Quelque chose de chaud est en train de cuire. C'est la première option. C'est ce qu' on appelle le soft cross fade. OK, ce qui est bien. Jetons un coup d'œil à la suivante. Je vais cliquer sur Suivant. Allons-y. Nous pouvons donc voir l'animation directe et l' interaction directement dans l'interface Cloud avant de la migrer vers notre site Web Il y a quelque chose de chaud dans la cuisine, qui est le rôle vertical. J'aime encore celui-ci. Passons à la troisième option. Je vais également cliquer sur Suivant ici. Dans le cadre des fonctionnalités de personnalisation. Comme vous pouvez le voir, ici, vous pouvez ajouter des animations à votre design. Toute partie du site Web d' une seule page est entièrement personnalisable en fonction de vos préférences. Vous pouvez modifier la police, changer la couleur, ajouter une certaine section, par exemple, modifier le graphisme. Changeons le graphique ici. Si nous le voulons, cela dépend entièrement de nous. Donc, tout ce que vous considérez comme une application de Claude, vous avez la possibilité de le personnaliser en suivant simplement les tactiques que je vous apprends. Quelque chose de chaud se prépare. Je pense que celui-ci est bon. Je vais dire à Claude de continuer. Avec la troisième option, j'aime les deux, trois et deux. Ils sont très professionnels et correspondent au thème de l'activité actuelle. Donc, quelque chose de chaud prépare, nous allons le remplacer quelque chose de chaud, c'est de la cuisson, non ? Comme nous pouvons le voir ici, Cloud est en train de coder les fichiers afin d'échanger la sortie ici. Et chaque ligne de code, comme je l'ai mentionné, vous pouvez la trouver directement dans le menu à bascule si vous souhaitez l'afficher sur votre propre site Web pour y le menu à bascule si vous souhaitez l'afficher apporter des modifications ultérieures Jette un œil à ça. Quelque chose de chaud se prépare. Allons-y. Il exécute la commande, et nous pouvons voir les modifications commencer à apparaître ici Validons maintenant le résultat. Quelque chose de chaud se prépare, et les modifications sont toujours en cours Allons-y. C'est en train de le valider ici. Donc, une fois que c'est fait, cela nous montre que la compilation de la sortie est terminée Ensuite, nous avons la possibilité de voir enfin fonctionner dans le cadre d'un site Web d'une seule page. Allons-y. Quelque chose de chaud cuit, quelque chose de chaud prépare, et cela nous dira que tout va parfaitement bien lors de l' ajout des animations. Et la même tactique fonctionne pour n'importe quel segment que vous aimeriez voir ici pour vous aider à modifier ce segment spécifique, vous aimeriez y ajouter une certaine animation, pour ajouter un aspect et une ambiance professionnels supplémentaires à votre propre site Web d'une seule page Et le cloud ici vérifie simplement que tout fonctionne correctement et parfaitement. Donc tout se passe bien. Le fichier HTML est propre. Le pied de page, tout va bien, les lecteurs d'écran obtiennent une phrase stable, puis vacillante. Ainsi, Claude vous aide à contourner facilement tous les problèmes que vous pourriez habituellement rencontrer manuellement lors du développement Web frontal . Et le code est prêt. Je peux simplement cliquer sur Télécharger. Je pourrais l'apporter sur mon site Web pour une modification ultérieure. Pour créer une page U sur mon site Web. Si j'ai réellement un site Web complet dans le cadre de mon projet pour cette entreprise en cours, je peux ajouter une page U et simplement ouvrir une page Zoom. Les applications sont infinies. Il s'agit donc d'une tactique de personnalisation très puissante que vous pourriez ajouter dans le cadre de votre développement Web frontal via le cloud. 8. Ajout de graphiques pour le site à page unique: Bon retour. Maintenant, allons encore un niveau plus loin. Disons que j' aimerais ajouter une sorte d'attrait dynamique à la seule page latérale. J'aimerais ajouter des cartes, par exemple, dans une section qui présente nos produits dans le cadre d' un café ou d'une boulangerie. Nous avons des croissants, des expressos, des baguettes. Nous avons du pain, des lattes, et la liste est longue J'aimerais donc présenter ces produits ici sous forme de cartes. Hein ? Je vais donc dire à Claude d'ajouter une section. Juste en dessous de la date et de l'heure d'ouverture, la section comprendra des cartes à retourner présentant les produits suivants Par exemple, nous allons dire croissants ici, nous allons dire lattes ou latte Nous allons dire expresso. Ne gardons qu'un seul article. Allons-y. Ensuite, nous allons chercher du pain, et la liste est longue. Donc, vous avez compris l'idée. Cela indiquera donc à Claude, allons-y, créer une nouvelle section entre ces deux sections. Et ajoutez des cartes à retourner pour refléter ces produits. Tout développeur Web front-end devrait le faire s'il présente ses produits Ils présentent leurs services, leur portefeuille de projets Vous pouvez ajouter ces cartes retournables magnifiquement animées, ce qui vous prend généralement beaucoup de temps à essayer de le faire vous-même, ou vous essayez de trouver une version prête à l'emploi via les créateurs de sites Web Par exemple, je vous montre les tactiques, comment vous pouvez les utiliser facilement via Cloud directement dans l'interface C'est une application très puissante, tactique très puissante dont vous pouvez vous inspirer, n'est-ce pas ? Nous avons donc la possibilité d'animer. Nous avons eu la possibilité d'ajouter des logos certaines fonctionnalités et images en fonction de nos préférences, personnalisant élément par élément en fonction de nos besoins Ensuite, nous avons la possibilité d'ajouter des sections. Tout ce que vous pouvez généralement faire dans le cadre d'un créateur de site Web, je vous apprends à le faire via le cloud. ajoutant des animations via des cartes, en plus des sections, vous pouvez obtenir les codes exactement pour une édition et une personnalisation ultérieures. Si vous savez également comment utiliser ces codes, vous avez la flexibilité de le faire en suivant les leçons que je vous enseigne. Claude ici présent a compris le contexte réel que nous essayons d'atteindre, et il va commencer à développer la section ici. C'est en train de parcourir le code. Développons-le, d'ailleurs, si vous voulez voir ce qui se passe. Une fois que vous avez cliqué dessus , vous pouvez voir ce que Cloud essaie de réaliser à travers les fichiers. En général, une fois que vous avez cliqué dessus , il s'agrandit, mais comme il exécute beaucoup de codes, mais comme il exécute beaucoup de codes, il ne l' étendra directement au moment où nous cliquons dessus, il s'étend simplement ici. Donc oui, s'il exécute une série de codes dos à dos, il se peut qu'il y ait simplement un petit délai lorsque vous cliquez dessus pour vous montrer exactement ce qui se passe sous le capot de Cloud Et juste quelques secondes, vous cliquez à nouveau dessus et vous pouvez voir tout le code secret qui se déroule via Cloud jusqu'à ce que le travail soit terminé. Maintenant, nous pouvons voir le fichier. Il devrait être prêt. Nous avons agrandi en déplaçant le bouton vers la gauche. Et c'est parti. Juste en dessous de la date et de l'heure, un avant-goût de ce qui vous attend, des croissants fraîchement préparés tous les matins, voilà, HoverTypeK, laminés au beurre et pliés Il a même ajouté des éléments supplémentaires basés sur du texte pour compléter l' idée que j'ai. Découvrez à quel point il est puissant de le développer de la manière que je vous ai enseignée jusqu' à ce stade actuel où vous pouvez avoir un projet complet, où Claude vous donne un coup de pouce dans la bonne direction. J'ai un café au lait, un expresso à la main et du lait cuit à la vapeur, un excellent pain, un Comme vous pouvez le constater, notre site Web d'une seule page est en train de prendre forme. Nous allons modifier le graphique actuel dans le cadre de notre personnalisation. Je vais le dire à Claude. Allons-y. Copiez-collez ceci. En dessous, allons-y. Quelque chose de chaud se prépare. Il y a un graphique que j'ai besoin de changer. Transformez-le en tasse à café. Avec de la vapeur animée qui sort du mug. Vous pourriez ajouter votre propre point de vue et votre inspiration si vous avez quelque chose en tête, mais vous ne savez pas comment le coder. Suivez la tactique que je vous enseigne en ce moment, et vous pourrez l' intégrer à votre design. Cela va simplement au-delà des tactiques de développement Web frontales de base, en ajoutant des sections, des polices, des images, des animations Non, vous pouvez aller encore plus loin grâce à d'autres personnalisations En apportant votre propre vision et fusionnant avec l'invite à réellement la dire à Claude, allez-y et créez-la pour moi. Je vais donc modifier ce graphique actuel, qui ne semble pas correspondre au thème actuel que nous avons. Nous avons donc tout animé jusqu'à l'étape actuelle, tout corrigé jusqu'à cette étape actuelle. Tous les autres éléments sont facilement comestibles. Ils sont assez simples à modifier. Si vous avez suivi jusqu'à présent, je vais maintenant simplement améliorer le design pour en faire un résultat de développement Web frontal professionnel Comme nous pouvons le voir ici, Claude est en train de parcourir le design. Pour le finaliser en fonction ma vision et de mes préférences. Allons-y. Il parcourt le code, me fait gagner du temps, m' épargne des efforts. Notre site Web d' une seule page finalisé se présente donc à merveille. Nous avons obtenu le petit logo, le logo principal. Il y a quelque chose de chaud qui cuisine ici. Ensuite, nous avons trouvé un nouvel endroit dans le quartier pour les matinées calmes, et nous avons réduit les écarts, donc nous avons eu un compte à rebours Nous pouvons changer la date si nous le voulons. Ensuite, nous avons des cartes à retourner, une excellente déclaration, l' emplacement que nous pourrions modifier Ensuite, nous pourrions avoir un petit formulaire pour les e-mails. Si vous avez terminé la création du site Web, vous pourrez l'utiliser pour développement ultérieur si vous le souhaitez. Nous avons obtenu les espaces réservés pour les liens des réseaux sociaux, en gardant à l'esprit tout ce que nous faisons à ce stade, uniquement le développement Web frontal, et le code est parfaitement prêt Comme nous pouvons le voir ici, nous avons obtenu le Mug animé, et le site Web d'une seule page fonctionne parfaitement. À ce stade, nous avons donc créé un site Web personnalisé et créé un site Web d'une seule page pour une entreprise hypothétique, qui est mappable à toute application que vous avez en tête 9. Déployez votre site Web à page unique: Et bon retour. Nous avons créé avec succès notre site Web d'une seule page, qui est destiné à l'ouverture officielle d' une entreprise hypothétique, savoir un café et une boulangerie Nous avons créé le beau design. Je vous ai enseigné les tactiques de personnalisation en termes d'ajout d' animations, de graphismes, chaque élément ici Si vous souhaitez le modifier, suivez simplement les tactiques que nous avons décrites, et vous aurez la possibilité de le modifier. Vous pouvez simplement modifier les dates, les heures. Vous pouvez supprimer des sections si vous n'êtes pas encore prêt à les utiliser, par exemple, vous pouvez supprimer des sections. Vous pouvez éliminer, par exemple, les icônes des réseaux sociaux. Si vous ne voulez pas les connecter aux réseaux sociaux, c'est à vous de décider, n'est-ce pas ? Mais tu vois l'idée. Disons qu'après avoir suivi toutes les tactiques que je vous ai enseignées et que vous avez personnalisé votre site Web d' une page, vous êtes prêt à le publier et à le lancer. La meilleure façon de procéder pour les sites Web d'une page, généralement lorsque vous l'utilisez pour des annonces, des événements, des pages de destination, etc., vous pouvez le lancer en quelques secondes simplement via un caillot. Une fois que vous avez terminé, naviguez vers le haut ici, et une fois que vous avez cliqué sur publier l'artefact Avant de le publier, vous pouvez l'ajouter à un projet, qui est le projet que nous avons déjà créé. De cette façon, vous avez tout sous un même toit. Pour les développements futurs, vous pouvez simplement vous lancer dans le projet, personnaliser n'importe quoi, extraire le code que vous souhaitez en fonction de vos préférences. Ensuite, avancez facilement au lieu de simplement avoir à faire tout ce que nous avons fait à chaque fois à partir de zéro. Vous avez donc plusieurs options que vous pouvez utiliser. Vous pouvez le télécharger sous forme de fichier HTML pour une modification ultérieure ou si vous souhaitez l'ajouter à une certaine page cadre de votre hébergement, cela dépend entièrement de vous dans le cadre de votre créateur de site Web. Cela dépend entièrement de vous. Vous pouvez l' ajouter au projet pour développement futur si vous le faites un développement futur si vous le faites régulièrement pour votre entreprise. Enfin, si vous êtes prêt, vous êtes prêt à publier Artifact Cliquez sur Publier l'artefact et jetez-y un œil. La publication de cet artefact le rendra accessible à tous sur Internet et potentiellement visible dans les moteurs de recherche Il s'agit d'un site Web complet. Votre chat restera privé. Il s'agit du nom de l'artefact lui-même. C'est ce qu'on appelle index point HTML en fonction de la configuration réelle du fichier. Ensuite, une fois que vous avez cliqué sur Publier et copier le lien, c'est parti. Publiez et copiez le lien. Ceci est le lien réel, et il est entièrement publié. Je peux simplement le dépublier selon mes préférences ou simplement obtenir un code intégré. Si vous utilisez un créateur de site Web, n'importe quel constructeur de site Web, une fois que vous avez obtenu un code d'intégration, vous pouvez intégrer cette page directement dans le cadre de votre site Web existant actuel Ou s'il s'agit d'une page autonome, copiez le lien, vous pouvez le partager avec vos amis Vous pouvez le partager avec vos clients. Vous pourriez le partager avec vos collègues. Cela dépend entièrement de vous. Et une fois que vous avez cliqué dessus et que vous avez simplement accédé à la page finalisée voici le site Web magnifiquement conçu en quelques clics, n'est-ce pas, en quelques minutes sans avoir à tout parcourir à partir de zéro. Il s'agit d'une application très, très puissante pour vous inspirer, et elle fait partie des artefacts du Cloud. Vous pouvez donc simplement partager un lien ou celui-ci ou simplement revenir en arrière en fonction de vos préférences. Cela dépend entièrement de vous. Mais à ce stade, vous avez lancé avec succès votre site Web d'une seule page. Il vous suffit de retourner dans le cloud pour voir exactement ce que nous avons abordé jusqu'à présent dans le cadre de la mise en place. Vous revenez voir Claude après avoir lancé votre site Web, l'artefact est déjà lancé Il a déjà été publié. Je peux simplement le modifier et le publier à nouveau, ou simplement les modifications seront publiées à nouveau. Je peux le partager directement, le placer directement sur le site Web ou copier le code sur mon site Web. Ce sont toutes des options que vous pouvez utiliser facilement. 10. Créer votre site Web multi-pages: Et bon retour. Maintenant, pour commencer, nous allons créer un site Web de plusieurs pages Nous allons créer un site Web W composé d' une série de pages réelles, d' un site Web complet application de développement Web frontale De cette façon, vous pouvez porter vos compétences en termes de développement Web frontal à un tout autre niveau Nous avons déjà ajouté le logo de notre démonstration actuelle, le café et la boulangerie hypothétiques, ainsi que des images de référence dans le contexte Nous pourrions ajouter toute information supplémentaire que nous aimerions ajouter, une image inspirante supplémentaire et une capture d'écran inspirante contenant une note d'inspiration que nous avons rédigée quelque information supplémentaire que nous aimerions ajouter, une image inspirante supplémentaire et une capture d'écran inspirante contenant une note d'inspiration que nous avons part Les idées sont infinies. Vous pouvez donc ajouter tous ces éléments supplémentaires si vous le souhaitez dans le contexte du projet. C'est ce que vous faites, nous allons commencer à créer notre site Web de plusieurs pages, pas un site Web d' une seule page , mais une série de pages, un site Web complet , que de nombreuses entreprises , de nombreux professionnels, de nombreuses personnes , que de nombreuses entreprises, de nombreux professionnels, de nombreuses personnes utilisent soit au quotidien quotidien cadre de leur environnement professionnel. Donc, ce que nous allons faire, c'est dire à Claude d'agir en tant que développeur Web professionnel, en particulier développement web et de front. En gardant à l'esprit que toutes les applications que nous utilisons actuellement sont basées sur le front-end, frontal et le développement Web Développement frontal et Web dans lequel vous allez m'aider à créer un site Web complet pour ma nouvelle entreprise, café et la boulangerie Mugs Utilisation des fichiers joints dans le contexte à des fins de référence et d'inspiration. Le site Web doit inclure les éléments suivants. C'est la partie ou l'étape où vous allez faire preuve de créativité. Comment imaginez-vous votre site Web ? Par exemple, le site Web comporterait cinq pages uniques, une section « À propos de cinq pages uniques nous », page «   Contactez-nous », une galerie d'images et des suggestions de pages pertinentes fonction du contexte et du thème. Toutes les pages doivent être entièrement éditées et personnalisables afin d'éviter tout problème de codage que vous pourriez rencontrer lors de modifications futures Toute section ou segment du site Web peut être facilement récupéré sous forme de code pour un déploiement futur Si vous prévoyez de transférer votre site Web, par exemple, chez un certain fournisseur d'hébergement ou si vous essayez de le personnaliser à l'avenir, ces tactiques rapides vous permettront de poser les bonnes bases pour votre application afin d'éviter tout problème en termes de codage et manque de flexibilité avec la sortie. Alors je vais dire à Cloud, vas-y. Je vais le dire à Cloud, vas-y. Ajoutez toute contribution pertinente qui rendra la conception du site Web meilleure et plus efficace. Cela prépare donc le terrain pour notre site Web de plusieurs pages. Nous créons un site Web complet pour l'entreprise hypothétique, un site Web de plusieurs pages, n'est-ce pas ? Il s'agit essentiellement du contexte commercial actuel, que de nombreux apprenants et étudiants apprécieront en utilisant les fichiers joints comme source d'inspiration pour le projet Toute contrainte que vous souhaiteriez ajouter, n'hésitez pas à l'ajouter. Une exigence pour votre propre site Web unique, n'hésitez pas à l'ajouter. Le site Web, selon mes préférences, serait composé de cinq pages uniques, ce qui est généralement le cas sur de nombreux sites Web. Expliquez une section, une page de contact, galerie d'images et proposez des pages pertinentes en fonction du contexte et du thème. Si vous souhaitez que Claude suggère en fonction meilleures pratiques pour l'application spécifique en question, quelle pourrait être une autre solution appropriée. Toutes les pages doivent être entièrement modifiables et personnalisables pour votre future modification C'est très important si vous connaissez le HTML CSS et que vous essayez de coder vous-même Même si l'application actuelle est purement nulle, sans code, vous pouvez utiliser le code, l' extraire des sorties pour vos préférences et applications uniques. Toute section ou segment du site Web peut être facilement récupéré sous forme de code pour un déploiement futur. Si je souhaite extraire un extrait du site Web, ou si je souhaite migrer l' ou si je souhaite migrer intégralité du fichier du Web que j'ai créé via le cloud, chaque élément de contenu ou de code doit être facilement déplaçable, et il ne se casse pas simplement parce que j'ai quitté le cloud, c'est très important car cela vous aidera à tout le tracas d'essayer de retravailler les choses dès le départ Maintenant, Claude construit le site Web pour nous en fonction de l'invite actuelle et du contexte actuel. Maintenant, comme vous pouvez le voir ici, il passe en revue les détails du projet que nous avons mis en place, toutes les images pertinentes, tous les designs pertinents. En gardant à l'esprit, il existe un élément très critique pour un site Web de plusieurs pages , à savoir la navigation. Comment naviguer d' une page à l'autre. Et généralement, en tant qu'étape de développement Web frontal, cela peut être assez difficile à suivre manuellement , car vous êtes responsable de la Et je vais vous montrer stratégies très puissantes pour éliminer tous les tracas de telle sorte qu'à la fin de notre application, vous disposiez d'un package de développement Web frontal complet complètement prêt pour le Et c'est un cloud qui gère le design de base ici. Il utilise JavaScript, CSS, HTML, simplement pour créer tout ce que je lui ai demandé de faire. Et une fois que vous avez cliqué sur l'un d'entre eux, vous avez d'ailleurs la possibilité de voir à quel stade du processus de codage se trouve le code. Même si vous pouvez avoir quelques secondes de retard pour voir ce qui se passe, car code parcourt simplement la série de codes. Ici, par exemple, nous avons obtenu le JS, les fichiers JSON, puis les fichiers CSS, puis les fichiers HTML également, en cours puis les fichiers CSS, puis d'exécution. Il faut donc exécuter plusieurs codes en même temps pour créer le design. Maintenant, imaginez si vous deviez le faire vous-même. Manuellement, en codant chaque ligne pour que cela fonctionne. C'est que et cela vous demandera beaucoup de temps, beaucoup d'efforts pour le faire. Et en téléphonant simplement aux tactiques que je vous enseigne en ce moment, vous pouvez simplement suivre rapidement l'ensemble du processus Maintenant, comme nous pouvons le voir ici, Claude a presque terminé, et l'écran va simplement passer d'un écran à l'autre pour refléter la scène dans laquelle se trouve le cloud dans le cadre du processus de compilation. Il construit l'ensemble du site Web ici. Cela peut vous indiquer qu'il y a une erreur. Je pourrais montrer qu'il est toujours en cours de chargement. Cela pourrait vous montrer. Il est en train de compiler parce qu'il est encore en phase d'accumulation, la même manière que vous le feriez manuellement Vous le ferez par étapes. Et lorsque vous cliquez sur chaque étape, vous pouvez voir ce qui se passe et à quelle étape se trouve Cloud de vous aider à définir le rythme de votre flux unique. Où en êtes-vous actuellement au stade du développement du site Web, en gardant à l'esprit que tout ce sur quoi nous avons basé l'analyse est basé sur une activité hypothétique Cela pourrait fonctionner pour votre propre entreprise, pour votre propre projet unique. Tous les personnages, tous les éléments sont complètement hypothétiques des fins de démonstration, afin que vous puissiez voir qu'il est facilement transférable et mappable à votre propre carrière, à votre propre entreprise créative, à votre propre projet, à votre propre environnement d'entreprise, quel que soit le domaine dans lequel vous vous trouvez, vous pouvez en déduire quelque chose qui vous aidera à déduire quelque chose qui vous aidera améliorer vos compétences en matière de développement Web et à les faire passer à un tout autre niveau. niveau. Comme nous pouvons le voir ici, Claude construit simplement toutes ces pages une par une. Il exécute l' intégralité des codes pour cinq pages uniques avec toutes ces exigences en fonction de nos préférences. Nous pouvons voir la page d'accueil qui nous concerne, le menu, la galerie, le contact. Il a également été ajouté de réserver une table fonction de l'invite actuelle que j'ai transmise à Claude, suggérer quelque chose qui correspond à notre thème Et comme ce sera un café et une boulangerie, Claude a suggéré : « Vous savez quoi ? Que diriez-vous de réserver une table ? Page, ce qui est parfaitement logique. C'est donc très puissant, car laissez toujours de la place au modèle d'IA pour partager avec vous certains résultats qui pourraient vous être utiles. Et comme nous pouvons le voir ici, nous avons un fichier MD. Tout est construit à partir de zéro. Nous surveillons simplement le résultat au lieu de simplement tout construire à partir de zéro. C'est très, très puissant. La mise en place de votre site est créée. Cinq pages HTML, CSS, JS, utilisant des logos, des photos, ce qu'il y a dans la maison à propos de nous, un menu, une galerie, nous contacter, la direction du design, pourquoi c'est facile à modifier et à extraire. Un seul style CSS. Chaque section, chaque page comporte des pauses claires. Excellente. Aucune étape construite, aucun cadre, excellent. Les fichiers Lisez-moi traitent de la personnalisation des couleurs. Avant de vous lancer, il vaut connecter le formulaire de contact aux serveurs et de remplacer les vignettes par votre adresse et vos photos réelles Les deux sont marqués, excellents. Puisque nous nous concentrons sur le développement Web frontal, évidemment, pour les étapes ultérieures du développement Web, tout formulaire ou toute page externe, disons, qui nécessitent de remplir un formulaire pour collecter des données, par exemple, dans le cadre de l' inscription à un bulletin d'information Ceci est considéré comme quelque chose lié au développement du back-end. Et comme je l'ai mentionné, nous ne couvrons pas cela. Nous nous concentrons uniquement sur le développement Web frontal. Dans le cadre de notre candidature. Maintenant, jetons un coup d'œil à ça. Nous avons obtenu un fichier zip complet que nous pouvons simplement télécharger et qui inclut tout, toutes ces pages. Et cela est d'ailleurs très important dans le cadre de notre conception. Pourquoi ? Parce que nous avons créé chaque page elle-même sous forme de code unique plutôt que de simplement tout compiler et regrouper Chaque page peut être personnalisée par elle-même. Nous avons donc le code HTML de base pour notre site Web, n'est-ce pas ? C'est une sorte de colonne vertébrale pour. Cependant, nous aimerions y ajouter une sorte de graphisme de personnalisation, car il est évident que nous n'allons pas utiliser un simple canevas HTML pour notre site Web. Maintenant, je vais vous le montrer une fois que nous avons rassemblé la colonne vertébrale du site Web, qui est l'intégralité des fichiers HTML, et que nous avons obtenu le dossier zip du site Web, y compris tous les codes. Nous allons maintenant améliorer cela et transformer le site Web en quelque chose de présentable, y compris des graphismes et 11. Presenting the Website For Design Applications: Bon retour. Cloud a donc créé le package complet pour notre site Web. Il inclut tous les codes HTML. Et une fois que vous avez téléchargé le fichier zip du site Web, vous obtenez tous les codes que vous pouvez utiliser si vous essayez de le charger dans le cadre de votre créateur de site Web. Cependant, ce n'est pas l'objectif que nous essayons d'atteindre. Comme je l'ai mentionné, nous utilisons Claude pour le développement Web frontal complet Même s'il s'agit d'un site entièrement prêt à l'emploi, je vais vous montrer comment tout faire dans le cadre du Cloud de A à Z. Nous avons donc créé le site Web avec succès, n'est-ce pas ? Nous avons obtenu les codes HTML. Maintenant, disons à Claude que nous avons besoin du site Web, non pas qu'il soit conçu pour être utilisé à l'extérieur. Non, je veux que tout soit affiché, personnalisé, édité, entièrement visible dans le Cloud. Donc, à l'invite de Fong, je veux que le site Web créé soit entièrement affiché ici dans l'interface, y compris les couleurs, le logo, les designs, etc. Donc ça dira à Claude : super. Nous avons obtenu le résultat pour le site Web. Cependant, je ne veux pas l' utiliser en externe en téléchargeant tout pour travailler en externe. Non, j'aimerais que tout soit intégré en interne dans l'interface car dans le cadre de l' analyse de Claude, il essaiera de nous permettre de faire le travail le plus rapidement possible en téléchargeant simplement tous ces fichiers HTML distincts. Je pourrais les envoyer à un créateur de site Web et télécharger le fichier zip, qui inclut toutes les personnalisations requises, les fichiers CSS, qu' un développeur Web frontal avancé utiliserait dans le cadre de la création d'un Cependant, comme je l'ai mentionné, ce n'est pas ce que nous essayons de réaliser. Nous essayons de minimiser les interactions manuelles et d'augmenter l'automatisation via le cloud pour le développement Web frontal Donc, en ajoutant l'invite suivante, Cloud va créer à nouveau la solution, directement dans l'interface ici en me montrant toutes ces pages, tous ces différents designs, tous ces différents éléments basés sur l'analyse, le contexte du projet, le thème et l'invite que nous avons fournis à Claude. Comme nous pouvons le voir ici, extrayez le contenu principal de chaque page. Il parcourt le code qu'il nous a fourni précédemment, assemble la page, assemble tous les fichiers HTML et les fichiers CSS. Comme vous pouvez le constater, il fait le travail du développeur Web qui prend généralement tous ces fichiers et crée le site Web à l'aide de ces fichiers. Cela vous donne donc plutôt une idée intermédiaire de la puissance de votre application, n'est-ce pas ? Comme nous pouvons le constater, le site Web a été lancé avec succès sans que je n'aie besoin de commencer à télécharger tous les composants du fichier, puis de les transmettre à un créateur de site Web et de simplement lancer le site Web ou de créer le site Web. Non, en suivant cette tactique, je suis capable d'atteindre deux objectifs. Préparez tous les dossiers pour moi. Je pourrais tous les télécharger. Si, par exemple, vous avez un développeur Web, vous pouvez transmettre les fichiers au développeur Web pour qu'il les retouche ultérieurement ou si vous êtes en mesure de gérer vous-même l'application dans le cadre de l'hébergement et de la création de votre site Web, vous pouvez les utiliser. Ou pas si vous ne voulez pas vous lancer dans une application impliquant le déplacement externe d'un fichier contenant un code, c'est parfaitement normal. Je vous montre toutes les tactiques que vous pouvez suivre. En demandant simplement à Claude de le faire maintenant, vous avez un site Web complet prêt à l'emploi. Jetons un coup d'œil à ça. Voyez à quel point c'est professionnel. Nous nous sommes procuré un site Web complet qui est divisé en différents segments et composants. En gardant à l'esprit que dans le résultat initial de Claude, vous pourriez rencontrer des erreurs, ce qui est basique, ce qui est généralement parfaitement normal, n'y a pas de quoi s'inquiéter. Ce que j'essaie de faire en moment, c'est de confirmer que Cloud construit réellement le site Web en fonction de mes préférences. Nous avons donc mis l'en-tête ici, puis nous avons obtenu la navigation. Si vous cliquez sur la navigation, rien n'apparaîtra, n'est-ce pas, ce qui est assez évident car Cloud est en train d'assembler le site Web. Cependant, si vous avez des odeurs, ce sont des odeurs non détectées que vous rencontreriez manuellement Non, je vais dire à Claude, vas-y, corrige toutes ces erreurs. Mais avant de le faire, jetons un coup d'œil à tous ces éléments ici. Si je clique sur des éléments, qu'obtient-on ? Allons-y. Donc, si je clique, par exemple, sur le café et les boissons et sur le menu, nous obtenons des en-têtes de menu, mais nous n'avons pas de fonctionnalités Toggle . Nous pouvons régler ce problème. Ensuite, nous pourrions revenir à la page d'accueil actuelle. Et d'ailleurs, une fois que vous avez cliqué dessus parce qu'il contient un espace réservé pour un lien, si vous cliquez sur Ouvrir le lien, vous n'atteindrez nulle part car la page n'a pas encore été lancée Le site Web n'est pas actif. Je peux cliquer sur Réserver une table. D'accord ? Cela m'amène à cette page. Ensuite, je pourrais accéder à la page d'accueil. Nous avons donc une configuration solide ici, qui nécessite un ajustement précis, n'est-ce pas ? Cliquons sur le C pour accéder au menu complet. Ensuite, nous passons au menu, café et aux boissons, aux pâtisseries et au pain, petit-déjeuner et au déjeuner, selon les saisons, que nous pouvons modifier en fonction de nos préférences. Nous avons donc la configuration réelle en place. Et si vous remarquez, d'ailleurs, l'image d'accueil en arrière-plan, c'est l'image que nous avons ajoutée dans le contexte, qui est essentiellement la partie de la configuration du projet. Nous avons obtenu un titre clair , très professionnel Tout semble donc en ordre, mais cela nécessite quelques modifications supplémentaires, comme nous pouvons le constater dans le cas d' aujourd'hui, quelques favoris C'est pour la galerie, comme nous pouvons le voir, mais comme nous n' avons pas d'images, nous y voilà. Aucune image n'a été ajoutée à la galerie. C'est pourquoi nous ne pouvons voir aucune image, car nous sommes en train de créer le site Web lui-même pour l'intégrer à d' autres images. Maintenant, allons encore un niveau plus loin. Je vais chez Ta Claude, corriger les erreurs sur le site Web et m' assurer d'inclure les images fournies dans le contexte du projet et les endroits où les images peuvent être ajoutées, les étiquetant avec un espace réservé. C'est donc le premier résultat que nous obtenons pour le site Web de plusieurs pages, ce qui est excellent, d'ailleurs, parce que nous avons les fichiers complets et que Claude affiche directement les fichiers du site Web. Et dans le cadre du processus, une fois que vous rencontrez des erreurs d'intégration, nous n'avons pas à créer ce menu nous-mêmes. Dites simplement à Claude Allez-y, corrigez toutes ces erreurs et assurez-vous que le site est entièrement fonctionnel. cadre de la phase de conception, nous n'allons évidemment pas simplement avoir un résultat prêt à l'emploi dès le premier essai, surtout s'il s'agit de votre première interaction avec Claude. Non, nous allons avoir la sortie de base comme nous pouvons le voir ici. Nous sommes en train de corriger les erreurs, ce qui est très important pour nous assurer que tout fonctionne bien. Comme nous pouvons le constater, Claude a trouvé un bogue ici, il essaie de corriger toutes les erreurs du code, ce que vous devez faire. Manuellement pour s'assurer que le site Web est entièrement fonctionnel. En gardant à l'esprit les tactiques que je vous enseigne, vous pourrez personnaliser davantage le site Web. Supposons que vous souhaitiez ajouter une image , une icône à placer ou un élément de menu à remplacer, tout ce que vous pouvez faire directement dans Claude selon les tactiques que je vous enseigne en ce moment. Nous allons donc passer en revue cela par étapes. Nous supprimons maintenant toutes les erreurs de l'étape en cours pour confirmer que tout fonctionne parfaitement. Et je dis à Claude d'utiliser toutes les ressources que je lui ai fournies. Pour votre propre application, si vous souhaitez minimiser le temps d' interaction avec Claude, vous pouvez simplement le dire à Claude ou ajouter d'autres images, plus de fichiers, plus de détails contextuels au segment contextuel du projet Claude pourra alors simplement remplir tous ces détails assez rapidement et efficacement. Maintenant, jetons un coup d'œil à ça. Nous allons maintenant jeter un œil au site Web ici. Encore une fois, le fichier zip. Nous avons obtenu la page toute seule. Le live reflète tous les détails, même navigation, mêmes couleurs. Tout est parfaitement en place. OK, passons en revue menu complet des favoris depuis le boîtier d'aujourd'hui. Bien. Il s'agit de l'épine dorsale de base du site Web actuel. Cependant, il n'est pas complet car nous devons y ajouter la navigation. C'en est une. Ensuite, nous avons la possibilité de modifier les autres éléments ici, tels que la table de réservation, consulter notre menu, qui nécessitent une personnalisation supplémentaire. Maintenant, à ce stade, nous sommes prêts à passer à l' amélioration et à la personnalisation de notre site Web. 12. Navigation et édition sur le site web: Et bon retour. Nous avons donc lancé avec succès la fondation du site Web. Cependant, nous devons effectuer quelques modifications. Nous devons intégrer la navigation pour nous assurer qu'elle est pleinement fonctionnelle, n'est-ce pas ? Nous avons donc obtenu les codes. Nous avons dit à Claude, allez-y, exécutez les codes dans Claude pour voir le site Web. Passons maintenant à un niveau plus loin. Nous allons dire à Claude de nous assurer que la navigation fonctionne parfaitement. Ça en est un. Le menu affiche correctement toutes les pages et le menu renvoie correctement à la page concernée. C'est la première chose que nous devons faire. Voilà, juste pour nous assurer que nous avons mis en place la bonne navigation avant procéder à d'autres modifications afin assurer que le site Web est pleinement fonctionnel Alors, qu'est-ce que cela ferait ? Cela dira à Claude, vas-y. Bien sûr, sur la base du site Web actuel, nous avons constaté que chaque fois que je clique sur quelque chose, par exemple, je ne vois pas la navigation complète. J'aimerais que les choses soient entièrement présentables de cette façon, lorsque je clique sur un certain élément de menu ici, je puisse naviguer assez facilement d' une page à l' autre C'est donc très important. Et d'ailleurs, une fois que nous en aurons fini avec cela, je vais vous montrer que lorsque vous affichez le résultat de Cloud, il y a un domaine très important dont vous devez être très, très conscient, à savoir l'extension ici, car lorsque Cloud crée le site Web lui-même, il vous montre parfois des versions différentes en fonction du mobile ou de l'ordinateur de bureau. Donc, lorsque j'aurai besoin de voir que l'ensemble du site est fonctionnel, je vais l'étendre complètement pour confirmer que tout a été construit. Et une fois que j'aurai zoomé et que j'aurai remarqué, par exemple, que le menu ne fonctionne pas en fonction de la taille du mobile, je vais dire à Claude assurer que le site Web fonctionne également pour les mobiles, juste pour m'assurer que vous pouvez adapter le site Web en fonction juste pour m'assurer que vous pouvez adapter le site Web en fonction de l'appareil que vous utilisez. Il s'agit d'un conseil professionnel avancé. Gardez cela de cette façon Lorsque vous créez Cloud, essayez toujours, une fois que vous avez terminé le design, de l'étendre pour voir complètement la mise en page car lorsque vous modifiez les dimensions et la taille, comme vous pouvez le voir ici, la mise en page réelle commence à changer, n'est-ce pas ? Le menu commence à changer, la disposition du texte commence à changer. Gardez donc toujours à l' esprit que certaines fonctionnalités peuvent dépendre de certains appareils. Cela fait donc partie de votre processus de développement. C'est très simple. Simplement par une ligne de code, vous le dites à Cloud par un message. En fait, dites à Claude, allez-y et assurez-vous que l'appareil fonctionne sur mobile et sur ordinateur de bureau. C'est principalement ça. Il n'y a donc rien de complexe à cela, mais quelque chose à garder à l' esprit lorsque vous entamez le processus de création de votre site Web. Comme nous pouvons le voir ici, nous disons à Claude de confirmer la navigation. Il s'agit de regarder la navigation pour s' assurer que tout est silencieux, conformément à nos exigences. Il s'agit donc d' examiner les étapes à suivre pour s' assurer que toutes les pages précédentes que nous avons créées, environ cinq pages, sont correctement liées, et je vais vous montrer comment nous pouvons confirmer que tout va bien. Il est donc en train de suivre le processus. Il est possible qu'il y ait des erreurs. Et si vous pouvez voir ici, de vrais problèmes de basculement mobile. Il a identifié le problème mobile par lui-même. Simplement en lui disant, allez-y, assurez-vous que la navigation fonctionne correctement. Il passe en revue les codes. Il l'a découvert, tu sais quoi ? Selon le mobile, cela peut ne pas fonctionner correctement. Selon le bureau, il se peut que cela fonctionne correctement. C'est donc quelque chose dont je suis parfaitement conscient et, tout au long du processus, Claude a réussi à l' identifier par lui-même. Je vous ai donc donné un conseil, je vous ai donné des conseils professionnels, mais en même temps, gardez-le à l'esprit, car Claude vous aide simplement à éviter cet obstacle par défaut. Mais en tant que personne utilisant le cloud de façon professionnelle, une fois que vous avez terminé de créer votre site Web, étendez-le toujours à toutes les dimensions du site Web pour en voir toutes les fonctionnalités, puis vous dites à Cloud rendre compatible avec les appareils mobiles. Comme nous pouvons le voir ici, par défaut, Cloud essaie également de le rendre adapté aux mobiles. Il passe par la navigation, au lieu d'avoir à le faire manuellement. Nous confirmons les étapes de l'accumulation, un niveau à la fois. Nous avons donc obtenu le code de base initial. Nous avons demandé à Cloud de l'exécuter dans le Cloud sans aucune référence externe à un créateur de site Web ou sans utiliser de créateur ou d'hébergement de sites Web sous quelque forme Nous prenons alors en compte la navigation, assurant que la navigation fonctionne correctement tant que création complète sur le site. Nous progressons donc un niveau à la fois pour avoir un site Web complet et finalisé que nous pouvons utiliser, et en même temps, vous pouvez vous inspirer pour votre propre application unique. Maintenant, Claude est en train de finaliser l'application ici. Nous sommes en mesure de l'étendre pour voir exactement la configuration de la navigation, qui fait partie du processus, de la même manière que vous concevez un site Web, le front-end d'un site Web, vous le faites par étapes, n'est-ce Vous parcourez le montage, sections, les graphiques, la navigation, et cela prend du temps Il faut quelques semaines pour créer un site Web entièrement fonctionnel. Et grâce à l' intégration du cloud, vous pouvez le réduire 2 minutes à une heure maximum pendant que vous maîtrisez les tactiques que je vous enseigne. Maintenant, Cloud est en train de finaliser l'Appo ici. Et nous sommes presque prêts avec la navigation en place pour notre site Web. Gardez toujours à l'esprit que Claude finalise d'abord la tâche avant de passer au résultat Maintenant, il écrit les fonctions réelles. Il s'agit d'élaborer l'architecture de la navigation pour la valider. Vous pouvez voir les différentes étapes de l'accumulation Évidemment, dans le cadre du développement du site Web, du développement Web frontal, vous devez parfois ajouter des textes Vous devez ajouter quelques références pour la conception, pour le projet sur lequel vous travaillez Les tactiques que je vous enseigne vous donnent les compétences nécessaires pour vous les compétences nécessaires pour frayer un chemin dans n'importe quel projet que vous traitez et qui nécessite un développement Web frontal Donc, une fois la navigation terminée , nous passons à un autre niveau, ce qui confirme que nous avons la colonne vertébrale, la fonctionnalité du site Web. La navigation fonctionne. Cependant, nous devons le personnaliser davantage. Nous devons y ajouter des fonctionnalités , des animations, ce qui fait partie de tout développement web frontal Claude est donc en train compiler le résultat final et le résultat final et charger l'aperçu réel pour que nous puissions confirmer exactement que la navigation fonctionne Et comme je l'ai mentionné, gardez toujours à l'esprit qu'une fois que vous obtenez le résultat, toujours développé dans sa forme complète. Utilisez l'option de bascule ici pour voir le résultat final Ensuite, une fois que vous aurez ajusté la taille, et si vous remarquez que quelque chose ne fonctionne pas, par exemple, vous pouvez le dire à Claude Confirm. Est-ce que cela fonctionne sur mobile ou non ? Cela fonctionne-t-il sur ordinateur de bureau ou non ? Et si Claude vous donne la confirmation, alors oui, il se peut que votre interface soit limitée , mais c'est une mesure de précaution pour vous assurer que votre site Web fonctionne sur plusieurs appareils. Maintenant, le cloud ici confirme la logique de navigation. Tout fonctionne parfaitement bien. Ensuite, j'ai dû peser correctement, mais j'ai découvert qu' un véritable problème de durcissement peut se produire dans le cadre d'un bac à sable. Il passe donc par le processus d'itération qu'il effectue généralement dans le cadre de la recherche des erreurs, correction des erreurs si nécessaire Si un eddor a un impact sur le résultat, je le corrigerai Si cela n'a pas d'impact négatif, il le contournera simplement, ce que vous feriez également manuellement. Nous attendons donc le résultat final ici. Comme nous pouvons le constater, le résultat est inversé, et je m'attends à ce que le cloud confirme dès maintenant que c'est prêt. La navigation est confirmée et fonctionne. Mon test avait juste besoin de peser correctement. D'accord, nous avons déjà abordé ce problème. Jetons un coup d'œil à la commande en cours d'exécution dans l'aperçu. Maintenant, toutes les navigations sont vérifiées. Je préfère toujours m'étendre pour voir ce qui se passe sous le capot, ce qui se passe aux différentes étapes de l'analyse. C'est un conseil de pro. Je vous conseille de le parcourir car cela vous indiquera à quel stade se trouve Claude, et si vous trouvez ou repérez quelque chose que vous ne préférez pas, vous pourrez y répondre directement. Jetez un coup d'œil aux commentaires de Claude. Tout semble parfaitement aligné. Il a trouvé un bogue dans le processus et l'a corrigé. De plus, j'ai préparé le fichier zip, y compris tous les codes, c'est prêt. Il continuera à le fournir. Plus nous mettons à jour le fichier, plus nous le répétons, comme je l' ai mentionné, parce que vous traitez cela dans le cadre d'un projet Donc, pour toute modification, ajout, mise à jour ou modification future ajout, mise à jour ou de votre projet actuel, vous pouvez symplte Claude, allez-y, mettez à jour le zip complet du site Web et envoyez-le moi Je vais le prendre. Ensuite, vous pouvez le déplacer vers un créateur de site Web. Vous pouvez le déplacer vers votre propre hébergement au lieu d'avoir à le faire à partir de zéro à chaque fois. Jetons maintenant un coup d'œil à la sortie finalisée. Nous y voilà. Maintenant, je vais basculer dans le menu supérieur, étendre les fonctionnalités, et c'est parti. C'est beau, non ? Nous avons la page Abo. Excellente. Regardez l'image, qui fait partie du contexte du projet. Ajout d'une histoire. Voilà comment c'est fabriqué. Rencontrez l'équipe, des individus choisis au hasard, des noms hypothétiques, une situation hypothétique, un projet hypothétique Pourtant, il est magnifiquement conçu. Regardez la galerie, par exemple, regardez ceci. Ce sont les images, d'après ce que nous avons ajoutées dans le contexte. Si vous y jetez un œil, ajoutez une photo ici, ajoutez une photo ici. Cela nous donne des espaces réservés pour indiquer exactement quelles sont les bonnes suggestions Les titres marqués comme photo sont des espaces réservés, faites défiler vos images et vous pouvez les échanger. Puissant. Page « Contactez-nous ». Allons-y. Nous avons un formulaire. Que nous pourrions utiliser ultérieurement sur le contenu, par exemple, en gros, si vous obteniez un formulaire ou un espace réservé supplémentaire pour cela, nous pourrions y remédier. C'est parfaitement bien. Alors jetez également un œil à la galerie . Nous l'avons vu. C'est le café, la boulangerie, la vie de café. Si vous avez certaines vidéos du café à notre sujet. C'est l'une de mes pages préférées : mix, proof, shape, core, bake. Ce sont des ajouts suggérés par Claude en fonction de l'invite ajoutée, qui correspondent au thème, n'est-ce pas ? Tous ces détails sont donc importants. Comme nous pouvons le constater, il a simplement fourni quelques noms hypothétiques pour personnel hypothétique que nous pourrions simplement modifier et changer en fonction de nos préférences, de nos valeurs, venir dire bonjour, entrer en contact, ce qui fait partie de la page sans contact, la page sans contact Vérifions-le. Allons-y. Excellente. La navigation fonctionne parfaitement bien. À la maison, on rentre, on réserve une table. Avant de réserver une table, examinons cela. Quelques plats préférés, de la pâte acidulée, des croissont au beurre, des tasses à café maison, un excellent menu complet de Californie beau, non ? Nous avons pris le café. Nous avons reçu les pâtisseries. Si je fais défiler la page un peu vers le bas, si je clique ici, si vous remarquez, nous avons notre menu, non ? Nous avons présenté notre menu dans le cadre d'une vue mobile par rapport à une simple vue sur ordinateur, ce qui est un avantage considérable. C'est un excellent ajout pour s' assurer que tout est parfaitement aligné et en ordre. La page À propos de nous efface tout. Nous pouvons voir le logo du lieu réel, membres hypothétiques de l'équipe, du four à Il s'agit simplement d'un cas hypothétique fictif facilement adaptable à votre situation unique Ces images qui ont été fournies dans le cadre du projet ont été utilisées pour créer le site Web. La page d'accueil est superbe. Nous avons obtenu les cas préférés, les prix extraits du menu, notre histoire à l'aide des images fournies, les itinéraires. Si vous souhaitez ajouter une sorte de fonction cartographique, jetez un œil au pied de page. Tout va très bien. Expérimentons la navigation si je clique sur Contact. Et oui, allons-y. Nous allons sur la page de contact. Et puis, si je jette un œil à la page À propos de nous, oui, elle fonctionne également. Nous arrivons sur la page À propos de nous. Si je regarde le menu, les pâtisseries et le pain, oui, c'est parti. Claude en arrière-plan, comme je l'ai dit, arrange ça. Saisonnier. Allons-y. Planification d'une visite de groupe, réservation d'une table. Cliquez sur Réserver. Oui Retournez au menu. Allons-y. 13. Ajouter des animations pour le site Web multi-pages: Et bon retour. Et nous avons configuré avec succès, à ce stade, la navigation de notre site Web, et nous avons testé que tout fonctionne parfaitement bien. Et la configuration de la navigation, d'ailleurs, prend beaucoup de temps. Si vous avez essayé de le faire manuellement comme moi, lorsque vous développez le front-end d'un site Web, vous pourriez facilement rompre différents liens, différents segments, sans oublier de passer de l'affichage mobile à l'affichage sur ordinateur, et la liste est longue Et grâce à l' intégration du cloud, comme je le partage avec vous, nous avons pu éviter tous les tracas et obtenir ce magnifique design, entièrement fonctionnel, avec une navigation intacte Tout est parfaitement aligné. Maintenant, dans cette conférence, je vais vous apprendre à appliquer l'une de mes parties préférées pour le développement Web frontal de n'importe quel site Web, la personnalisation Nous sommes souvent limités par des thèmes. Nous ne savons pas comment coder, ou nous ne savons pas comment utiliser le CSS ou le HTML, sans parler de casser des choses. Je vais maintenant vous montrer comment nous pouvons simplement contourner l'ensemble du processus en intégrant le Cloud. Donc, si nous examinons le site Web que nous avons créé jusqu'à présent, les leçons que je vais partager avec vous et les tactiques vous aideront à vous inspirer et vous constaterez que vous avez la capacité d' intégrer diverses personnalisations fonction de vos préférences Ça donne le coup d'envoi. Supposons, par exemple, que dans le cadre de la page d'accueil ici, j'aimerais ajouter une sorte d'animation. Les animations sont considérées comme un ajout très puissant à tout site Web, n'est-ce pas ? Et si j'aimerais avoir le titre principal ici. Il y a toujours quelque chose qui mijote dans les tasses. Nous allons ajouter une sorte d' animation dynamique dans laquelle le mot mijotera Disons passer à la cuisson, au mijotage et à l'infusion. De cette façon, c'est quelque chose de plus interactif. Je vais donc dire à Claude que je veux ajouter une animation dynamique au titre. Et puis j'ai deux options, d'ailleurs. Soit je le copie, je le colle tel quel et je le mets entre guillemets, Claude comprendra, soit l'une de mes options alternatives préférées consiste simplement à prendre une capture d'écran de ce site Web ou de votre propre site Web. Si vous modifiez votre propre site Web, suffit de prendre une capture d'écran, il vous suffit de prendre une capture d'écran, de la glisser-déposer directement dans l'interface et d'ajouter la commande. C'est très puissant. Et un autre conseil de pro : lorsque vous faites glisser la capture d'écran, vous avez la possibilité de dire à Cloud me faire parvenir le code, le fichier HTML, qui se trouve derrière la capture d'écran. Ainsi, si vous souhaitez prendre un extrait, mettre sur votre site Web, par exemple, vous avez la possibilité de le faire C'est un conseil très puissant à garder à l'esprit. Je souhaite donc ajouter une animation dynamique au titre. Il y a toujours quelque chose qui mijote dans les tasses, comme les tongs qui mijotent La cuisson passe à l' infusion, par exemple. Et allons encore un niveau plus loin. Je vais le dire à Claude. Montrez-moi les différentes options d'animation de manière interactive. Ajoutez toujours ce mot lorsque vous avez affaire à Claude. Si vous souhaitez voir le résultat suivant, qui est le résultat directement dans le chat ici, alors que le résultat est simplement reflété sur le résultat. Une fois que vous aurez ajouté le mot de manière interactive, Claude comprendra que je dois montrer les résultats ici Et si l' option d'interactivité ne fonctionne pas pour vous, cela signifie que vous devez accéder aux paramètres, puis activer l' interactivité s'agit d'un protip très puissant dont beaucoup ignorent l'existence, et je vous l'enseigne pour vous aider à faire passer votre intégration de Claude à un tout autre niveau Montrez-moi les différentes options d'animation de manière interactive, que je puisse confirmer celle que je veux au cas où vous n'auriez aucune idée du type d'animation que vous souhaitez avoir Il s'agit d'une tactique professionnelle très puissante pour votre développement web frontal Vous pouvez l'utiliser, dans un premier temps, pour personnaliser certains éléments, ajouter des animations à certains éléments. Et surtout, si vous avez une certaine animation en tête, hésitez pas à l'injecter dans le cadre du bal de fin d'année. Cependant, si vous ne savez pas de quel type d' animation vous avez besoin ou quelles sont les différentes options qui s'offrent à vous ? Peut-être aimeriez-vous vous inspirer pour votre design, ou souhaitez-vous voir quelles sont les meilleures options dont vous disposez le cadre des options d'animations. En général, si cela ne vous est pas familier, l'objectif est qu'en tant que personne ne sachant pas comment coder, comment utiliser n'importe quel type de code, vous puissiez effectuer le développement Web frontal sans en avoir besoin Donc, cette tactique vous aidera simplement à vous inspirer, voir toutes les options sans pour autant casser le site Web. Si vous avez réalisé le développement Web frontal de votre propre projet, par exemple, vous avez peut-être remarqué que si vous essayez de modifier quelque chose, par exemple, ici, vous risquez d'interrompre la navigation Vous pourriez casser la configuration, vous pourriez casser le thème, et bonne chance à passer des heures à essayer de corriger les modifications que vous avez apportées. Donc, cette tactique, l'invite suivante vous aidera à tout garder dans l'environnement de chat cloud, l' interactivité ici Cela vous convient, vous le confirmez, puis vous pouvez le migrer directement via l'interface. Et surtout, Cloud, par défaut, lorsqu'il exécute la commande, examine les étapes qu'il effectue. Il crée les animations. Il s'agit de créer les options. Cependant, une fois que vous aurez fait votre sélection, elle rectifiera tout dans cadre de votre site Web pour s' assurer que rien ne se casse Et c'est l'une des puissantes intégrations de Claude car le Cloud est très puissant pour le codage Il a donc la capacité de parcourir les codes assez rapidement, les déboguer, de s'assurer que tout fonctionne bien. Jetons maintenant un coup d' œil à la sortie. Voyez à quel point c'est puissant. Il s'agit d'une tactique professionnelle très puissante qui vous fera gagner beaucoup de temps. Jetons un coup d' œil aux résultats. Il y a toujours quelque chose qui se prépare. Allons-y. Mugs mijotants, excellent toboggan pour compteur kilométrique. OK. Ensuite, il y a toujours quelque chose qui fait mijoter des tasses ou qui fait cuire, trois D flip Ensuite, nous avons eu CrossFade Plus Scale, puis Blur Focus, quelque chose est toujours une tasse, Steam Rise Excellente. Chaque carte est prévisualisée dans le style du héros Excellente. Arrière-plan foncé. Il s'agit donc de prendre les éléments exactement tels quels. À quoi cela ressemblerait-il, et vous pouvez voir les animations ici. Choisissons-en donc un à des fins de simple démonstration. Et si on allait faire un tour de vapeur ici ? Je vais cliquer sur Utiliser ceci et regarder le résultat. Simply Cloud confirmera les exigences de conception et d'animation, puis exécutera le code pour mettre à jour ce segment spécifique. L'objectif de cette conférence est donc tout d'abord d' apprendre cette nouvelle tactique, cette nouvelle astuce, mais en même temps, de comprendre que vous n'êtes pas limité à une telle modification uniquement. Non Vous pouvez l'utiliser pour animer le texte ici Nous pouvons l'utiliser pour animer certains boutons, par exemple pour animer certains éléments Vous pouvez donc vous inspirer pour apprendre cette tactique et l'appliquer à votre propre situation, qui vous aidera à ouvrir de nombreuses portes dans le cadre de votre développement Web frontal Et la tactique que je vous enseigne en ce moment, l' interactivité, passe souvent inaperçue, même par les utilisateurs professionnels du cloud C'est une tactique très puissante et spécifique. Gardez à l'esprit que vous devez accéder aux paramètres, l'activer. Et puis dans l' invite ici, mentionnez le mot de manière interactive C'est très important car cela indiquera à Cloud avant de migrer quoi que ce soit ici, j'aimerais que vous me montriez les résultats correctement devant moi dans le cadre de l'interface. Et une fois que j'ai fait une sélection, vous allez le migrer. Par défaut, Cloud implémentera le résultat de conception, puis s'assurera qu' il crée le fichier, exécutant des tests pour vérifier que rien ne casse. Tout est parfaitement fonctionnel. Alors n'hésitez pas, d'ailleurs. Simplement, si vous travaillez sur votre propre site Web ou sur votre propre design, prenez un moment et essayez de vous inspirer pour créer ou personnaliser votre propre site Web. Ou si vous créez un site Web à partir de zéro. Si vous essayez de personnaliser votre propre site Web, vous pouvez en fait prendre cette étape plutôt professionnelle. Vous pouvez reprendre votre design actuel. Par exemple, vous pouvez prendre une capture d'écran de votre site Web et l' ajouter à Claude et Claude de le créer pour vous et de le personnaliser pour vous, puis demander à Claude de récupérer votre fichier HTML, puis vous pourrez copier ce fichier HTML et le coller à nouveau dans l'éditeur de votre site Web, par exemple. C'est quelque chose pour les développeurs Web frontaux qui sont à l'aise avec le codage Comme je l'ai mentionné, la pratique actuelle , le cours en cours, les leçons sont conçus pour vous, pour quelqu'un qui ne sait pas comment coder, mais en même temps, si vous souhaitez expérimenter le codage, vous pouvez le faire de manière très rationalisée et systématique. C'est donc très important pour quiconque souhaite travailler sur son site Web ou créer un nouveau site Web, que ce soit pour votre propre projet personnel, pour votre propre entreprise ou pour votre propre client. Les tactiques que je vous enseigne vous permettront d'économiser beaucoup de temps et d'efforts. Regarde l'Apu Bado comme tu peux le voir, Claude, assure-toi que tout fonctionne bien Et au fur et à mesure que nous apportons des modifications, que remarqueriez-vous D' après la configuration que nous avons faite, Claude emballe à nouveau le site Web, y compris le fichier HTML et le package complet sur le site Web, y compris tous les derniers résultats C'est très important car dans le cadre de la configuration, comme je l'ai mentionné, vous aimeriez toujours revenir à ce que vous faites, n'est-ce pas Vous n'avez pas besoin de tout construire à partir de zéro. Et en suivant ces tactiques, disons, un mois plus tard, vous pourrez simplement revenir à votre projet et consulter la dernière édition, effectuer quelques modifications, affiner le résultat, l' exporter et le réutiliser Jetez un œil à l' application ici. Et c'est parti. Nous nous sommes procuré une superbe animation ajoutée spécifiquement en fonction de nos préférences, sans rien casser du site Web lui-même, ce qui est très important. Et disons que j'aimerais passer à un autre design, n'est-ce pas ? Je voudrais donc simplement monter, jeter un œil aux commentaires ici. Alors disons que j'ai changé d'avis. Je vais choisir ce design ici. Cliquez sur Utiliser ce modèle. Allons-y. Soyez prudent avant d'exécuter cette invite. Le contenu de conversation malveillant peut inciter le cloud à tenter une action nuisible. Eh bien, il s'agit d' une entrée automatique qui apparaît simplement par défaut si vous essayez de corriger quelque chose que vous avez déjà généré . Cela arrive de temps en temps. C'est parfaitement normal. Ce n'est pas un problème. Nous allons donc mentionner qu'il faut plutôt utiliser la diapositive du compteur kilométrique, animation pour le titre du héros Ajoutez simplement le mot à la place, et nous allons réexécuter le code. Cela vous montrera donc que j'ai la possibilité de faire une sélection, de mettre à jour le fichier. Et puis, en regardant le résultat ici, j'ai remarqué qu'il avait l'air bien, selon la marque. Cependant, j' aimerais voir si les différentes animations correspondent mieux à mes préférences. Et si je le faisais moi-même manuellement, je risquerais de casser le fichier. Il se peut que je doive passer beaucoup de temps à essayer de voir cela avant et après la comparaison, et je n'ai aucune référence à référer en cas de panne, par exemple. Beaucoup d'entre nous qui ont essayé de le faire manuellement ont rencontré de tels problèmes. Donc, si vous remarquez ici, Claude va exécuter à nouveau l'invite de base. Il corrigera l'animation, à jour l'intégralité du fichier sans aucune intervention. Gardez simplement à l'esprit que vous avez la possibilité et la capacité de continuer à courir en arrière-plan. Si vous effectuez une autre tâche, il vous suffit d'ajouter l'invite, laisser Claude faire le décodage et le montage Et une fois que c'est fait, vous pouvez y revenir pour examiner le résultat Et c'est parti. Jette un œil à ça. a mis quelques secondes Claude a mis quelques secondes à tout réparer. Et comme vous pouvez le constater, il s'agit de la dernière version. Allons-y. Nous avons donc pu simplement passer à cette animation actuelle, qui est la diapositive du compteur kilométrique Ainsi, en quelques clics, nous sommes en mesure de modifier l' ensemble de la structure de codage du site Web afin intégrer l' animation sans aucun codage. Et cette tactique s'applique à n'importe quel segment de votre site Web que vous essayez de créer si vous souhaitez animer quoi Disons que j'aimerais animer cette carte ici. J'aimerais animer ce texte ici. N'hésitez pas à vous inspirer pour faire passer votre candidature à un tout autre niveau. 14. Ajouter des graphiques pour le site Web multi-pages: Et bon retour. Nous avons donc créé avec succès les animations conformément à nos exigences, et nous avons pu les cartographier dans différentes parties du site Web. Dans cette conférence en cours, je vais vous montrer comment nous pourrions ajouter des graphiques. Supposons que vous souhaitiez ajouter des graphiques ici ou une autre partie du site Web, ici, par exemple, ou une autre section, il n'y a pas de limites. Vous pouvez trouver l'inspiration pour l'appliquer à votre propre situation. Maintenant, laissez-moi vous montrer quelques astuces pour ajouter des graphiques à votre site Web. Je vais dire à Claude que j'aimerais ajouter quelques graphismes animés à la section principale des héros. Et la section des héros, c'est essentiellement ce que nous appelons la section des héros ici, n'est-ce pas ? À côté du bouton pour réserver une table. Et d'ailleurs, vous n'avez pas besoin de lire la description complète. Comme je l'ai mentionné à nouveau, prenez une capture d'écran de l'emplacement exact ici, par exemple, puis étiquetez-la sur une feuille de papier, sur une serviette, sur le logiciel de votre Vous pouvez réellement écrire les modifications que vous souhaitez effectuer et simplement prendre cette capture d'écran, prendre cette feuille de papier, prendre cette serviette, peu importe ce sur quoi vous faites les modifications, puis l'associer à Claude Modifiez-le, glissez-déposez-le ici, mais je vous montre l'approche de base la plus simple grâce à une interaction basée sur du texte. Je dis donc à Claude que j'aimerais ajouter un graphique ici à côté pour réserver une table. Et j'aimerais avoir quelques options. Je vais donc demander à Claude d'ajouter quelques graphiques interactifs. Allons-y. Juste pour être sûr que Claude comprenne, j'aimerais d' abord les voir avant de les faire migrer. Ici, dans l'interface, c'est parti. C'est ainsi que vous pouvez élever votre invite, qui est animée jusqu'à la section principale des héros située à côté du bouton permettant de réserver une table Nous pourrions également le rendre plus spécifique pour l'ajouter. Allons-y. Les deux instructions vous donneront donc des résultats Cependant, si je voudrais que ce soit assez précis, là où je confirme l' interactivité ici, je peux voir les graphiques J'aimerais examiner quelques options avant de les migrer. Claude analysera donc le thème, le contexte, la préparation que nous avons accumulée jusqu'à ce stade, et il proposera quelques graphiques importants ou utiles qui correspondent au cas hypothétique auquel nous avons affaire, n' est-ce pas ? Nous avons ajouté un projet. Il s'agit d'une approche basée sur le contexte. Nous avons des fichiers, des éléments à ajouter. Claude a donc été suffisamment formé pour le moment pour être en mesure dire exactement ce que nous devions faire et de suggérer certains éléments importants. Jetez un coup d'œil à ces graphismes animés sur le thème de la boulangerie , qui sont très puissants car ils nous indiquent que Claude est sur la même longueur d'onde que nous en ce Claude est sur la même longueur d'onde concerne ce que nous essayons de faire Allons-y. Jetez-y un coup d'œil. table est maintenant ouverte. Nous avons un indicateur en temps réel. C'est très sympa. Nous avons une tasse, une tasse. Nous en avons un nouveau tous les jours. Nous avons réservé une table. Jetez un coup d'œil à ces ajouts puissants et puissants intégrés aux graphismes. Donc, selon mes préférences, disons que si nous voulons réserver une table, j'aimerais ajouter cette fonctionnalité ici. Je vais donc dire à Claude, allez-y, ajoutez cette fonctionnalité. Au clignotant, le badge d'état « open now » se trouve à côté du bouton de réservation de la table. C'est donc une très belle animation, et au cas où je le souhaiterais, c'est un très beau graphisme, qui est animé. Si je souhaite tester autre chose sans endommager le site lui-même, ce qui se fait normalement manuellement, il me suffit de revenir en arrière, de cliquer dessus, utiliser et de dire à Claude de l'utiliser à la place. Ou je pourrais simplement dire à Claude, eh bien, m' indiquer d'autres options si je souhaite avoir des options supplémentaires pour trouver convient le mieux à mon application. Mais ce sont de très jolis graphismes que vous devez généralement créer vous-même si vous écrivez le code pour les intégrer à votre site Web. Cloud est donc en train de corriger le code, le HTML, le CSS Tout devrait être en place pour intégrer ce graphique afin d'améliorer nos compétences en matière de développement Web frontal et de les porter à un tout Comme vous pouvez le voir ici, Claude passe simplement en revue les commandes, ce qui nous fait gagner du temps, nous épargne des efforts, et vous pouvez voir quelle étape du codage est en cours. Comme je l'ai mentionné, les applications que nous suivons n' ont pas besoin que vous sachiez coder quoi que ce soit. Suivez simplement les tactiques que je vous enseigne et vous serez en mesure de faire votre travail en tant que développeur Web frontal professionnel avec de nombreuses tactiques et compétences à votre disposition pour vous permettre de vous démarquer en matière de développement Web frontal Maintenant, jetons un coup d' œil à la sortie, et c'est parti. Les tables sont ouvertes maintenant. Voyez à quel point c'est puissant. Il complète le design de manière grise. À propos, ajoutons un autre graphique pour améliorer encore plus le design Je vais le dire à Claude. Pour réserver une table, je vais la placer à côté, par exemple, ou dans le bouton Afficher notre menu. Je vais donc le dire à Claude. Utilisons-le. Allons-y. Cependant, je vais être précis dans mon message. Ajoutez l'animation de l'icône du mug fumant, et non à côté du bouton de réservation de table. Non, mais je vais le corriger dans le bouton Afficher notre menu. Cela fait partie de votre parcours créatif, n'est-ce pas ? Lorsque vous effectuez le développement Web frontal, vous êtes censé faire preuve de créativité au cours du processus Et je vous montre les tactiques, la même manière que je les ferais normalement, comment je vais manœuvrer le cadre de mon interaction avec Claude J'ai trouvé cela très utile. Puis j'ai réalisé, eh bien, que j'aimais bien ce graphique. Je ne veux pas simplement l'ignorer, et il convient parfaitement, non pas à côté de la table de réservation, mais à une partie de notre menu, n'est-ce pas ? C'est quelque chose que vous feriez normalement manuellement. Ou si vous travaillez au sein d'une entreprise, par exemple, vous avez une réunion pour discuter la mise en page, de la présentation, et nous sommes en mesure d' intégrer tout cela de la manière la plus rapide et la plus efficace possible grâce aux tactiques que je vous enseigne. Maintenant, selon mes attentes, Claude va placer ce mug dans le bouton qui consulter notre menu, et c'est parti. Découvrez à quel point le design est puissant. Entièrement dynamique, totalement professionnel, et c'est un produit de premier ordre, conforme à nos exigences. Donc, à ce stade, vous avez appris à ajouter des graphiques dans le cadre de votre conception, et cela fonctionne à n'importe quel niveau importe quelle page ou étape de votre site Web actuel, n'est-ce pas ? Vous pouvez simplement accéder à la page Nous contacter, à propos de nous. Galerie, quelle qu'elle soit, et vous pouvez appliquer ces tactiques pour vous aider à intégrer des graphismes à votre conception. Comme je l'ai mentionné, Claude nous a confirmé que le site Web est prêt, et le design a été finalisé Nous avons ajouté les graphismes des tables déjà ouvertes, et nous avons ajouté un mug animé pour améliorer encore la présence visuelle de notre site Web. 15. Nettoyage des polices à l'échelle du site: Bon retour. Supposons maintenant que je souhaite changer et modifier les polices de l'ensemble du site Web. Disons que je suis en train de passer par le processus de conception et que je me suis rendu compte j'aimerais avoir différentes polices en fonction de mes besoins. Maintenant, même si la police semble parfaitement adaptée à la marque, j'aimerais tester différentes polices pour voir laquelle reflète le mieux l' essence du projet en cours, que ce soit à des fins de marketing, pour la création de votre propre contenu, et la liste est longue. Je vais donc voir Claude. J'aimerais tester différentes polices pour l'ensemble du site Web. Affichez des exemples interactifs dans le chat ici afin que je puisse confirmer le balayage complet des polices du site Alors, à quoi servirait cette invite ? Tout d'abord, nous expliquons à Claude quel est mon objectif dans le cadre de tactiques d' ingénierie efficaces et rapides. Et puis une fois que vous avez ajouté le mot interactivité, gardez toujours à l'esprit que vous avez mis le mot interactif, cela dira à Claude : «   Tu sais quoi ? Affichez d'abord les résultats ici. C'est une tactique professionnelle avancée très puissante. Pour t'aider à tirer le meilleur parti de Claude. Dans le chat , je peux confirmer le balayage complet des polices Et j'ai mentionné le nettoyage complet des polices du site car cela indiquera à Claude quel est l'objectif final Une fois que j'aurai tout confirmé, vous mettrez tout à jour dans le cadre du site Web. L'intégralité du site sera entièrement modifiée et mise à jour au lieu de simplement me demander de le faire manuellement. Jette un œil à ça. Regardez le résultat. Allons-y. Nous avons reçu les étiquettes des polices, la police actuelle est la police actuelle. Ensuite, nous avons les différentes options. Allons-y. Vous pouvez d'ailleurs voir le nom de la police. Si vous êtes un professionnel du marketing, vous êtes un spécialiste de l'image de marque, vous êtes capable de comprendre les noms de police réels , les paires de polices et, d'ailleurs, Claude saura quelles sont les polices qui conviennent le mieux l'équipe actuelle avec laquelle nous travaillons Chaque carte applique le jumelage au contenu réel de votre site Web. Voyez à quel point c'est puissant. Je peux voir les polices exactes que je pourrais utiliser, et Claude comprend que ces polices vont de pair, et qu'indiquent-elles ? Vous pouvez donc parcourir n'importe lequel de ces droits. Ensuite, vous pouvez faire une sélection. Ensuite, nous allons appuyer sur Utiliser ceci ou sur Gardez-le pour rester en place et je l' appliquerai latéralement. Je vais donc choisir la police qui correspond à mes préférences Choisissons l'un d'entre eux pour nous assurer que tout est bien aligné. Sur la base de la marque actuelle, je trouve celle-ci plutôt sympa. Je vais donc utiliser celui d'ici. Allons-y. Celui-ci. Cliquez sur US Does, passez les polices du site à Lib puis à Nunito Je vais donc avoir cette combinaison entre Liber et Nonito Et c'est exactement la conception d'un panneau de commande unique qui porte ses fruits. J'ai juste besoin de me changer. Allons-y. Un seul élément et Cloud est capable de balayer l' ensemble du site Ainsi, si vous appliquez les tactiques jusqu'à ce stade actuel, n'importe quelle modification, que ce soit à ce stade ou dans le futur, chaque fois que vous revenez à votre projet parallèle en cours, vous pouvez simplement vous lancer dans le projet et effectuer une modification en quelques minutes, voire quelques secondes, au lieu de suivre l'ensemble du processus à partir de zéro Donc, au début, il vous faudra peut-être un certain temps pour atteindre le stade actuel. Cependant, une fois que votre projet est lancé et qu'il ne vous reste plus qu'à effectuer d'autres modifications, il ne vous reste quelques secondes avant d'obtenir une sortie finalisée Maintenant, Cloud passe simplement en revue toutes les polices du site Web et échange tous les codes requis sous le capot de Claude afin de modifier le design et l' affichage des polices du site Web Et vous pouvez utiliser la police que vous avez en tête. D'ailleurs, vous n'avez pas besoin de simplement vous fier aux suggestions de Claude. Maintenant, si vous avez vos propres polices ou si vous utilisez des polices spécifiques dans le cadre de votre propre site Web actuel, vous pouvez simplement les ajouter à l'invite et Claude pourra les mapper directement à la sortie. Claude exécute la commande ici, et nous pouvons voir qu'elle a tout mis à jour avec succès de manière assez systématique. Nous attendons la confirmation, et c'est parti. Nous avons reçu la dernière édition de notre site Web et, comme vous pouvez le constater, les polices ont été mises à jour. C'est très professionnel. C'est très élégant, et Claude a pu simplement cartographier tous ces résultats assez facilement, n'est-ce pas ? Et nous sommes en mesure de faire la distinction claire entre l'avant et l'après. Dans la section principale des héros ici, nous pouvons voir directement que la police a été complètement modifiée. Et simplement, je pourrais demander à Claude de confirmer que l'ensemble du site a changé de police. Tout simplement. C'est un message très basique. Le site a complètement changé de police. Cela confirmera donc que Claude n'a rien oublié dans le cadre d'une vérification de confirmation. Confirmez donc que l'ensemble du site a changé de police. C'est un message très basique, très direct. De cette façon, Claude Claude dira exactement ce que nous recherchons. Cependant, si vous le remarquez ici, le cadre de la vérification, faites-le toujours, d'ailleurs. Lorsque vous exécutez quelque chose dans le cadre d'un outil d'IA, y compris Claude, confirmez toujours le résultat final, car au bout du compte, devinez quoi. Un outil d'IA commet des erreurs en cours de route. Donc, une fois que vous aurez ajouté cette invite de précaution supplémentaire, confirmez que l'ensemble du site a changé ses polices, jetez-y un œil. ai trouvé un petit détail pour le fichier lui-même Sur la base des anciennes polices, j'ai trouvé un commentaire quelque part. C'est purement descriptif. Permettez-moi de vérifier l'aperçu pour ensuite vérifier le style calculé. Il faudra donc prendre une mesure de précaution supplémentaire au cas où il manquerait quelque chose ici ou là . Si nous y jetons un coup d'œil, c' confirmé, l'ensemble du site utilise désormais est confirmé, l'ensemble du site utilise désormais la même police que celle que j'ai sélectionnée. Voici comment le modèle d'IA a vérifié, et pas seulement le globe oculaire. Génial. Je vous ai montré les étapes à suivre pour la confirmation. Cela vous donne un niveau de fiabilité supplémentaire au lieu d'avoir à simplement examiner chaque ligne de police par elle-même, vous pouvez appliquer la tactique et au modèle d'IA de confirmer exactement le résultat en cas d'erreur Votre tâche serait simplement de vérifier et confirmer de manière très systématique. 16. Ajouter des images: Et bon retour. Maintenant, nous allons porter nos compétences en développement Web, nos compétences en développement Web frontal, à un tout autre niveau grâce à l'utilisation de tissus. Généralement, lorsque vous avez affaire à un site Web, en particulier d'un point de vue commercial ou créatif, nous devons y ajouter des fichiers, n' est-ce pas ? De temps en temps. Par exemple, si vous vous souvenez, dans le cadre de notre création, nous avons créé une galerie C'est donc quelque chose de typique pour toute personne créative. Vous travaillez sur votre portefeuille, vous présentez votre entreprise ou vous travaillez au sein d'une entreprise Vous souhaitez mettre en valeur vos produits. Cette conférence en cours vous donnera inspiration et vous montrera à quel point il est facile d'ajouter votre propre contribution unique et de mettre à jour le site Web en quelques clics. cadre de la préparation du projet, nous avons initialement ajouté quelques entrées contextuelles dans le cadre de la mise en place initiale Cependant, si vous remarquez, par exemple, que nous avons créé certains espaces réservés ici pour les ajouts futurs dans le cadre de la création du site Web. Je pourrais ajouter une photo, par exemple, une table à manger ou une salle à manger, ajouter une autre photo suggérée par Claude, des croissants frais, ajouter une photo à verser sur un bar, des marques de pâte acidulée. Au comptoir à l'ouverture, habitués de la communauté C'est très puissant, et ils s'harmonisent tous parfaitement avec une boulangerie et un café, non ? Vous pouvez donc voir tous ces éléments, généralement dans n'importe quel café ou boulangerie, où vous avez des croissants frais une pâte aigre. Vous avez un café à servir au bar. Tu t'es procuré un comptoir à l'ouverture. C'est donc très, très réaliste dans le sens où nous obtenons le résultat. Cependant, si je souhaite ajouter des informations de mon côté, n'est-ce pas le cadre de ajout que j'ajoute à Claude, je vais , par exemple, ajouter quelques images basées sur cette boulangerie hypothétique Donc, à ce stade, je vais dire à Claude d'ajouter les images suivantes à la galerie. En termes simples, et n'hésitez pas à l'appliquer à votre propre situation. Je vais ajouter, par exemple, une image d'une tasse à café, une image de pain, une image supplémentaire ou une autre image de pain, et vous pourriez ajouter n'importe quel élément contextuel avec lequel vous souhaitez mettre à jour votre site Cela peut être votre propre œuvre d'art unique, projets de votre entreprise, l'inspiration et les idées sont infinies à ce sujet. Je vais donc chez Claude, ajouter les images suivantes à la galerie assurer qu'elles sont organisées de façon professionnelle et supprimer les espaces réservés vides Disons que je suis satisfait de ces images. Je n'ai pas besoin d'espaces réservés supplémentaires. Je vais simplement dire à Claude, allez-y, chargez ces images ma galerie et ajoutez tout espace réservé vide dans ma galerie et ajoutez tout espace réservé vide pour le moment, je ne pense pas qu' elles soient nécessaires. D'ailleurs, si vous l'avez remarqué, Claude a modifié la mise en page et la personnalisation fonction de l'image réelle, tailles, des polices, la structure afin d'ajouter l'attrait du développement Web frontal au résultat réel ou au résultat réel que vous obtenez Vous pouvez voir ici, vérifier les images téléchargées, vérifier quel fichier téléchargé correspond aux emplacements réels que nous avons ou aux espaces réservés, et Claude commencera à compiler les images dans le cadre de la galerie, et il devra supprimer tout élément supplémentaire N'oubliez pas que, étant donné que nous sommes en train de créer le site Web, vous verrez peut-être certaines remarques de Claude. Cependant, une fois le design finalisé, vous pouvez simplement, Claude, supprimer toutes ces remarques. Les vignettes marquées sur Photo sont donc des espaces réservés. Alors je vais le dire à Claude, tu sais quoi ? Je ne veux plus avoir ces espaces réservés. J'ai presque terminé avec ma galerie, donc je n'ai pas besoin ces instructions ou de ces espaces réservés. est très important si vous travaillez en équipe, n'est-ce pas ? Si vous avez une équipe de concepteurs ou développeurs Web frontaux, vous pouvez leur laisser ces remarques, ajouter une photo dans les espaces réservés, déposer vos propres images, déposer vos propres images, puis les échanger en tant que partie intégrante ici Consultez le Read Me pour obtenir des instructions précises C'est très utile dans le cadre d'agences de design ou équipes plus importantes où quelqu'un reprend là où vous vous êtes arrêté. Donc, comme nous pouvons le voir ici, Claude est en train de construire la galerie finalisée, et la même tactique pourrait fonctionner dans n'importe quel secteur d'activité, et la même tactique pourrait que vous travailliez dans une industrie de l'art, dans le secteur de la construction, dans le développement, peu importe ce que c'est, vous pouvez utiliser cette tactique de galerie pour ajouter et mettre votre travail de manière très systématique, et vous pouvez toujours y revenir puis le mettre à jour La galerie elle-même, en ajoutant des entrées, la même manière que je la partage avec vous en ce moment, vous pouvez avoir Claude, prendre ces entrées et les organiser de manière systématique. Et vous avez également la possibilité d'y ajouter des animations. Au lieu de simplement survoler les images, je peux dire à Claude que lorsque je clique sur une image, vous pouvez la transformer en carte à feuilleter et écrire une note dessus en vous basant sur les tactiques que nous avons abordées jusqu'à ce stade, qui vous aidera à vous inspirer en même temps vous donnera les compétences nécessaires pour vous frayer un chemin dans votre propre interface développement Web. Comme je l'ai mentionné, je vous enseigne ces tactiques, ces compétences, et vous pouvez vous inspirer pour les appliquer à votre propre situation, que ce soit à un niveau individuel spécifique ou à une combinaison des deux. Vous pouvez ajouter des graphiques ici. Vous pouvez ajouter des animations. Vous pouvez ajouter des images, puis vous pouvez tout combiner. Donc, comme vous pouvez le voir, Claude fait clignoter la sortie, ce qui indique que les résultats sont presque terminés Comme vous pouvez le constater, d'ailleurs, si nous devions le faire manuellement, considérez les efforts que nous devons investir pour y parvenir, redimensionner, ajuster, emballer, encadrer, encadrer, etc. Donc, si vous avez lu ce manuel, ce n'est pas une tâche facile. Même si cela semble facile, ce n'est pas le cas. Je vais vous prendre beaucoup de temps pour le faire. Claude arrive donc à l'étape finale, qui consiste à valider l' aperçu, comme je l'ai mentionné, vous pouvez continuer à le faire fonctionner en arrière-plan si vous travaillez sur autre chose Cependant, nous en avons presque terminé avec le résultat, et Claude vérifie simplement que chaque élément est parfaitement aligné, ce qui est un excellent résultat et une étape importante dans le développement web frontal, car généralement, lorsque vous ajoutez des images ou des éléments externes, vous avez tendance à casser votre thème ou votre mise en page Et beaucoup d'entre nous en font l'expérience. Franchement, j'en ai fait l'expérience lors de la création manuelle d'un site Web. Si vous souhaitez ajouter une image, tout d'un coup, vous cassez la mise en page, puis vous essayez de comprendre ce qui s' est passé ou les dimensions, elles ont l'air assez solides sur le bureau. Cependant, ils se cassent sur mobile. Donc, tout cela, ou dans les coulisses, sous le capot, les vérifications d'erreurs, les confirmations, Claude les passe en revue pour éviter avoir à essayer de réparer les choses dans les deux sens Maintenant, examinons le résultat ici. Comme nous pouvons le constater, Claude fait un très bon travail en ajoutant les images que j'ai ajoutées pour les intégrer à ma galerie. Cependant, comme je l'ai mentionné, nous ne prenons pas le résultat directement avant d'avoir obtenu la confirmation que tout est réglé, puis nous nous lançons dans la vérification des résultats de Claude, ce qui est très important et très nécessaire pour éviter de traiter avec des résultats incomplets. Cependant, dès le premier coup d'œil, nous pouvons voir que nous avons ajouté les images ici, et Claude les a arrangées et structurées pour que tout soit élégant et professionnel. Et devinez quoi ? Tous les espaces réservés ont été supprimés. Les instructions d' utilisation des espaces réservés ont été supprimées. Il s'agit d'une étape avancée fur et à mesure que vous finalisez votre design Vous êtes en train de configurer l'ensemble du site Web. Une remarque est en cours de suppression. Et comme vous pouvez le voir ici, nous avons une très belle galerie, avec quelques images liées au contexte et au cas hypothétique auquel nous avons affaire, à savoir un café et une boulangerie Ensuite, nous pouvons accéder à l'écran d'accueil. Tout va bien. Nous avons ajouté quelques éléments graphiques. Nous avons ajouté une certaine intégration pour la navigation. Nous avons une sorte d'éléments de menu hypothétiques. Tout semble bien organisé et systématique. Et d'ailleurs, n'importe quel élément, en fonction des tactiques que je vous enseigne, vous pouvez le mettre à jour en fonction de vos préférences. Et c'est un site Web élégant et très puissant , d'ailleurs, dont vous pouvez vous inspirer. Nous avons créé un site Web de plusieurs pages. En général, cela vous prendra quelques semaines de travail si vous le créez à partir de zéro, en vous assurant que vous codez et que vous essayez de tout mettre en place et de le faire fonctionner, n'est-ce pas ? Sans parler des erreurs, des interruptions qui peuvent survenir lorsque vous essayez de mettre à jour les choses ici et là, non, en suivant les tactiques actuelles, nous sommes en mesure de tout compiler un seul projet auquel nous pouvons toujours nous référer. Il s'agit de l'une des leçons les plus importantes que vous devez comprendre dans le cadre du cours actuel. Il ne s'agit pas d' une simple interaction avec Claude en ce moment. Non, vous êtes en train de réaliser un projet complet construit avec Cloud. Il est très important de garder cela à l'esprit, car si vous le faites de manière professionnelle, vous devrez peut-être vous référer à votre conception précédente, effectuer des modifications Vous devez apporter des modifications, ou vous repérez une erreur quelque part, ou si vous le faites de manière professionnelle dans le cadre de votre entreprise ou d'un studio de design, par exemple, votre client indique que nous avons besoin d'une mise à jour. Vous n'avez pas besoin de recommencer à zéro à chaque fois. Non, vous pouvez simplement vous lancer dans le projet et personnaliser tout ce que vous souhaitez personnaliser en fonction tactiques que vous avez apprises jusqu'à ce stade, ce qui est très puissant et excellent complément à vos compétences en matière de développement Web frontal Nous pouvons voir ici que Claude est en finaliser l'ensemble de la sortie Cependant, dès le premier coup d'œil, vous pouvez voir que Claude a compris l'objectif final que nous essayons d'atteindre. Nous avons mis les images en place, et il ne reste plus que quelques secondes avant que Claude finalise les résultats et confirme que tout est parfaitement aligné Nous sommes donc en mesure de voir exactement où Claude se dirige. Cela complète donc le résultat réel de la leçon en cours, et vous êtes tout à fait capable d' appliquer simplement ces tactiques. Nous avons mis les images en place, les espaces réservés ont disparu, et ma galerie est intacte, et j'ai simplement la possibilité, pour l' avenir, de continuer à ajouter des images, supprimer des images selon mes préférences Vous pouvez donc utiliser les tactiques, ces tactiques pour vous aider à intégrer éléments externes dans le cadre de votre site Web, vous ajoutiez un certain projet une certaine image un certain Yo ou une certaine œuvre d'art sur laquelle vous travaillez. Vous n'avez pas besoin de simplement accéder au créateur de site Web et de continuer à les charger un par un. Non, vous pouvez le faire en quelques clics. Et c'est parti. Il s'agit de la reconstruction finale, et Claude confirme simplement que le site Web est prêt. Même s'il a fallu quelques secondes de plus pour finaliser le résultat, par rapport à quelques jours de travail d'ailleurs, quelques jours de travail d'ailleurs, car ce qui se passe sous le capot de Claude, vous remarquerez que de nombreuses modifications sont effectuées pour confirmer, sur la base de la structure que nous avons suivie, que le design est prêt car à la fin de chaque itération, une partie de de plus pour finaliser le résultat, par rapport à quelques jours de travail d'ailleurs, car ce qui se passe sous le capot de Claude, vous remarquerez que de nombreuses modifications sont effectuées pour confirmer, sur la base de la structure que nous avons suivie, que le design est prêt car à la fin de chaque itération, une partie de solide tactiques d'ingénierie rapides, vous obtenez le code du site Web mis à jour et le package complet du site Web, ce qui est très essentiel Donc, tous ces ajouts en coulisse concernant le code HTML, le CSS, la mise en page, la structure, le dimensionnement et bien d' autres choses encore sont gérés par Cloud. À ce stade, nous sommes donc en mesure d'intégrer des images et des éléments externes supplémentaires à intégrer à notre site Web via le cloud. 17. Changing Website Design Themes: Et bon retour. Tu crois que c'est fini ? Bien sûr que non. Nous allons améliorer vos compétences en matière de développement Web frontal et d' intelligence artificielle et les faire passer à un tout autre niveau. Maintenant, dans cette conférence, je vais vous montrer une étape très puissante mais souvent considérée comme puissante mais souvent considérée comme problématique dans le développement web frontal, qui est en train de changer de thème Lorsqu'il s'agit développement Web frontal, généralement, si je devais changer le thème du site Web actuel, c'est souvent quelque chose que de nombreux développeurs Web frontaux oublieront lorsqu'ils auront affaire à cela, c'est souvent quelque chose que de nombreux développeurs Web frontaux oublieront lorsqu'ils auront car c'est une recette pour détruire l'ensemble du Cependant, je vais vous montrer la tactique dès maintenant. Comme nous allons avoir Claude, allez-y et modifiez le thème de l'ensemble du site Web manière très stratégique. Je vais dire à Claude que j'aimerais changer le thème complet du site Web. Suggérez différentes options de thème, y compris des couleurs et des mises en page manière interactive, pour que je puisse choisir celle qui convient avant la migration et m' assurer qu'il est très important de conserver une copie du site Web actuel, créer pour y revenir Alors, qu'est-ce que cela ferait ? Tout d'abord, je crée une sauvegarde via Claude pour mon site Web actuel au cas où je souhaiterais l'extraire à nouveau. Il s'agit d'une tactique très avancée que beaucoup ne connaissent pas. J'utilise Claude, plutôt un moteur de secours pour moi. Et je dis à Claude, tu sais quoi ? Je vais explorer plusieurs thèmes du site Web. Allez-y, montrez-moi ces options, mais en même temps, assurez-vous de préserver le travail que nous avons accompli. Examinez le résultat pour que Claude passe en revue le processus en envisageant de présenter différentes options de site Web interactives à des fins de comparaison. Il est en train de créer cette fonctionnalité interactive ici. Ensuite, il enregistrera l'intégralité, tout d' abord, il enregistrera l'intégralité du fichier en tant que sauvegarde, puis me montrera ces thèmes. Commençons donc par sauvegarder la version actuelle afin que vous puissiez toujours revenir en arrière Ensuite, je vais rassembler des options de thème interactives que vous pourrez comparer. Maintenant, il s'agit généralement d'une tâche assez complexe. Si vous y réfléchissez d' un point de vue manuel, c'est assez exigeant. Donc, une fois que nous avons affaire à un modèle d'IA, ce n'est pas grave si cela prend plus de temps que d'habitude, car la tâche est plus exigeante que d'habitude. Donc, en gros, Claude, en fonction de la tâche, la durée de la sortie peut varier. Cela peut vous prendre quelques secondes, parfois quelques minutes, ce qui est parfaitement bien, selon le build et la tâche. Jetons un coup d'œil à ça. Tout d'abord, sauvegardez, confirmez et sauvegardez. Nous sommes donc prêts à essayer d'expérimenter différents thèmes. Créons une comparaison de thèmes interactive. C'est celui qui est en cours ici. OK. Ensuite, nous en avons eu un autre. Minimaliste moderne. J'aime bien celui-ci. Que diriez-vous de celui-ci ici ? Haut de gamme maussade, pastel doux, contemporain audacieux. Chaque carte affiche un aperçu de la même structure. Cependant, nous avons des thèmes différents. Votre sauvegarde est donc déjà enregistrée. La boulangerie chaude actuelle construit les cinq pages. Tout est parfaitement aligné et zippé, prêt à être utilisé. Disons que, tout d'abord, je peux dire à Claude que je n'aime aucun d'entre eux. Allez-y, proposez d'autres options. Cependant, j'aime bien ce thème actuel ici. Donc je vais dire à Claude, vas-y, utilise ça. Allons-y. C' est donc très important parce que cela dira à Claude, tu sais quoi ? J' aime bien ce thème. Allez-y et rénovez complètement l' ensemble du site Web. Si vous le faisiez, soit dit en passant, manuellement, vous courez le risque de casser le site Web. Comme je l'ai fait manuellement à plusieurs reprises, il suffit de passer d'un thème à l'autre pour détruire l'ensemble du travail que vous avez Bonne chance pour trouver les eddors ici et là Nous contournons donc toute l'option. Nous avons choisi un très beau thème, et je dis simplement à Claude, vas-y. Modifiez l' arrangement complet du site Web actuel en fonction du thème que j'ai en tête, et n'hésitez pas à intégrer à façon des éléments de marque, fonction du thème que vous avez Si vous travaillez sur un certain site Web, votre site Web actuel, vous pouvez ajouter vos propres palettes de couleurs, vos propres préférences de thème. De cette façon, vous pouvez apporter des modifications qui imitent complètement votre site Web actuel Jetons un coup d' œil aux commentaires de Claude. Faisons-le correctement. abord, un audit complet de chaque feuille de style de référence couleur, exactement ce que vous devez faire manuellement. Claude le fait automatiquement. Il est donc en train de procéder à toutes ces modifications pour s' assurer qu'il ne manque rien. Tout sera mis à jour pour refléter votre propre thème unique et personnalisé, soit dit en passant. Et une fois que vous avez changé de thème, vous pouvez suivre les tactiques que nous avons décrites en ajoutant des graphismes, des animations et des images. Cela dépend entièrement de vous. Il s'agit donc d'un ajout très puissant à garder à l'esprit pour vous aider à vos compétences en matière de développement Web frontal car je vous apprends comment utiliser l'IA pour le faire en votre nom pour tout ce que , car je vous apprends comment utiliser l'IA pour le faire en votre nom pour tout ce que vous devez généralement faire manuellement vous devez généralement faire manuellement Donc, si vous ne savez pas comment coder, c'est parfaitement bien. Vous êtes nouveau dans le domaine du développement Web frontal. C'est parfaitement normal. Vous travaillez au sein d'une entreprise. Vous travaillez sur un projet, vous travaillez sur une entreprise. Quoi qu'il en soit, les tactiques que je vous enseigne vous aideront à améliorer vos compétences en matière de création de sites Web, en particulier les compétences en développement Web frontal, car c'est le cœur de ce que nous faisons dans le cadre de la leçon Comme vous pouvez le voir ici, Claude a identifié toutes les palettes de couleurs et il les corrige ou les remplace par des palettes de couleurs alternatives fonction de mes préférences, en gardant à l'esprit. C'est simplement à des fins de démonstration. Je préfère le thème actuel, les couleurs correspondent parfaitement à l'activité hypothétique actuelle Cependant, pour que vous compreniez les différentes options en termes de sortie que vous obtenez, car vous n'êtes pas simplement limité à la sortie que vous obtenez de Claude, car ce n'est pas vraiment le cas. Vous avez la possibilité d'ajouter vos propres préférences, de les modifier, modifier jusqu'à ce que vous obteniez le résultat que vous préférez et que vous êtes assez à l'aise avec. L'objectif est que vous obteniez le résultat qui reflète votre véritable vision la manière la plus systématique possible. Maintenant que Claude est en train de finaliser le résultat, jetons un coup d'œil à la page d'accueil elle-même, car c'est généralement là vous observez le plus grand nombre de modifications Et si je voudrais changer une image, disons l'image du héros en arrière-plan, je pourrais simplement dire à Cloud, tu sais quoi ? Changez cette image. Je pourrais télécharger quelque chose si je le souhaite. Ou si j'ai un graphique en tête, je peux le dessiner sur une feuille de papier. Prenez une capture d'écran de mon site Web actuel, puis j'ai la possibilité de la télécharger et de dire à Cloud, vous savez quoi, de l'ajouter également à la version actuelle. Ce sont donc des tactiques très puissantes que vous pouvez intégrer dans le cadre de vos activités. Examinons maintenant le stade où en est le cloud. Comme vous pouvez le constater, il s'agit certainement d'une grosse version, car nous mettons à jour un thème entier, un thème entier. C'est pourquoi, au début du cours actuel, je vous l' ai dit, c'est quelque chose que de nombreux développeurs web frontaux ignorent lorsqu'ils essaient de le faire parce que vous n'avez aucune idée si le thème risque de casser votre Cependant, nous contournons tous ces problèmes de manière stratégique Comme nous pouvons le constater, nous en sommes à la phase finale de validation, et franchement, j'aime encore plus le nouveau thème par rapport au thème précédent. C'est très élégant, très professionnel. Nous pouvons voir que tout est parfaitement aligné, et nous avons le package finalisé ici, qui est le dossier zip prêt à être utilisé. Et n'hésitez pas à faire une pause à tout moment. Supposons que vous soyez développeur web front-end professionnel, pour voir exactement ce que fait Claude, pour en tirer le résultat, ce que vous devez faire de temps en temps pour vous assurer que vous lui accordez une supervision humaine suffisante C'est très important car en fin de compte, c' vous qui êtes responsable des résultats que vous obtenez de n'importe quel outil d'IA. Maintenant, comme vous pouvez le voir ici, jetez un œil au design, très moderne, très élégant. Tout a été très bien mis à jour. Laissez-moi examiner les menus. La navigation fonctionne. Et généralement, lorsque vous traitez du thème, c'est la première chose qui risque se casser dans le cadre du processus. Tout semble assez systématique. Je vais jeter un coup d' œil à la galerie, par exemple. Que diriez-vous de ça ? Allons-y. Excellente. Tout est parfaitement aligné. Nous avons intégré de belles fonctionnalités. À ce stade, nous avons une version très puissante de notre site Web, et nous pouvons simplement nous inspirer pour mettre à jour les couleurs, les thèmes, ajouter des graphiques, ajouter des images, en ce qui concerne vos propres compétences en développement Web frontal Si vous avez poursuivi jusqu'au stade actuel, sur la base de ce que je vous ai enseigné, vous êtes en mesure de porter l'ensemble de vos compétences à un tout autre niveau. 18. Deploying The Website Design Through Claude: Et bon retour. Une fois que nous avons finalisé notre site Web, il est temps de le déployer et de le lancer C'est très pratique si vous essayez de présenter votre travail, si vous travaillez en équipe ou si vous essayez de le montrer à votre client, il est très pratique de le lancer directement dans le Cloud. Oui, tu m'as bien entendu. Vous pouvez déployer le site Web de votre site, votre site Web directement sur Internet, directement depuis le Cloud. Comme je l'ai mentionné, nous nous occupons actuellement du développement Web frontal Donc, si vous le faites dans le cadre de votre travail créatif, vous essayez de finaliser le design frontal avant poursuivre le travail sur votre Gardez toujours à l'esprit que vous avez la possibilité de le lancer directement dans Claude pour voir comment il fonctionne également. Alors, comment vous y prenez-vous ? Naviguez simplement vers le coin supérieur ici. Cliquez sur le menu déroulant. Vous avez la possibilité de le télécharger sous forme de fichier HTML. Vous pouvez également l' ajouter au projet. C'est l'une de mes préférences et tactiques préférées. Une fois que vous avez terminé cette version, ajoutez-la à votre projet sur lequel vous avez travaillé. Pourquoi ? Parce que cela formera Claude pour les prochaines modifications Ainsi, vous n'avez pas à repartir de zéro. Non, Claude a un projet complet qu'il construit avec vous sur lequel vous pourrez vous référer pour de futurs ajouts Il s'agit d'une tactique très puissante qui vous permettra d'économiser du temps, d'économiser des efforts, d'améliorer vos compétences et d'obtenir des résultats chaque fois que vous utiliserez le projet encore et encore Et puis vous avez la fonctionnalité, dont je vous parle, qui consiste à publier le site Web sous forme d'artefact Une fois que vous aurez cliqué dessus, vous aurez l' URL réelle du site Web. Et une fois que vous avez cliqué sur Publier et Copyink par défaut, votre site Web sera en ligne sur Internet Vous pouvez le partager avec vos collègues, partager si vous affichez votre propre portfolio sur votre site Web, par exemple, si vous l'ajoutez en tant que page supplémentaire sur votre site Web, ou si vous essayez de présenter cette activité dans le cadre de votre client, les applications sont infinies. Cliquons dessus, publions et copions le lien. Maintenant, le chargement prendra quelques secondes. J'ai la possibilité d'intégrer l'intégralité de ce site Web quelque part. C'est très pratique si vous créez, par exemple, un petit écran sur le site Web, ou si vous avez une page dédiée sur votre propre site Web actuel et que vous souhaitez l'ajouter en complément. Comme je l'ai mentionné, les applications sont infinies. J'ai la possibilité de le dépublier si je souhaite y apporter un travail supplémentaire Regardons maintenant le résultat final, et c'est parti. Ce site Web est maintenant en ligne sur Internet. Voyez à quel point c'est puissant. Nous avons obtenu la page À propos de nous. Allons-y. Nous avons reçu le menu. Excellente. Tout est là. Nous avons la galerie. Tout fonctionne parfaitement bien. Comme vous pouvez le constater, il s'agit d'un site Web complet et fonctionnel que nous avons pu créer directement. Et Mi a remarqué qu' une fois que vous avez cliqué sur l'une de ces icônes de navigation ici, vous avez ce message. Pourquoi ? Parce que nous lançons cela sur Internet au sein de Claude. Cela ne cessera donc de nous le rappeler, vous savez quoi ? Vous êtes sur le point de quitter Claude pour y accéder. C'est donc quelque chose à garder à l'esprit, car comme je l'ai mentionné, nous le construisons dans le cadre de Claude, n'est-ce pas ? Donc, une fois que vous l'avez fait et que vous avez à différentes parties du site Web, puisqu'il est en ligne sur Internet , il nous dit : « Vous savez quoi ? C'est externe maintenant. Ce n'est plus chez Claude. Gardez cela à l'esprit si vous souhaitez naviguer sur ce site Web. Eh bien, ça ne change rien. Franchement, vous obtenez toujours un site Web complet et fonctionnel entièrement déployé sur Internet. Vous avez la possibilité de partager le lien, copier ce code et de l' intégrer sur votre site Web, et les applications, comme je l' ai mentionné, sont infinies 19. D'autres options pour le déploiement d'un site web: Bon retour. Maintenant, je vais vous montrer une autre option très puissante pour déployer et lancer votre site Web. Si vous vous souvenez, nous avons simplement lancé notre site Web en tant qu' artefact au sein de Claude Il est entièrement en ligne sur Internet, puis nous pouvons partager le lien, intégrer le code Les applications, comme je l'ai mentionné, sont infinies. Supposons, par exemple, que vous essayez d'obtenir ce site Web et de le transférer vers votre propre hébergement actuel ou que vous essayez de le transférer vers votre propre créateur de site Web actuel pour le déployer là-bas. Alors, comment vous y prendriez-vous ? C'est le principal résultat de la conférence actuelle. Je vais vous montrer comment il suffit demander à Claude de vous fournir un package complet prêt à l'emploi afin le télécharger et de le déployer le plus rapidement possible sans intervention supplémentaire Je vais donc le dire à Claude. J'aimerais que le site Web soit disponible sous forme de package complet prêt à l'emploi, y compris les images, les graphiques et les fonctionnalités que nous avons créées. Pourquoi ? Parce que vous ne voulez pas que Claude, ce qui peut arriver, par exemple, aux images de la galerie ou aux images d'arrière-plan les abandonne. Cela peut vous donner un espace réservé si vous êtes, disons, un développeur web front-end professionnel, si vous savez coder, cela un développeur web front-end professionnel, vous convient Vous pouvez simplement prendre le code, déployer sur votre site Web et votre hébergement Web. Ou votre créateur de site Web, puis vous ajoutez manuellement les images. C'est une option. Cependant, je ne préfère pas cette option. J'aimerais en avoir une version complète sur le cloud. Je prends simplement la sortie dans son intégralité, puis je la déploie entièrement sans aucune action intermédiaire entre les deux. J'aimerais donc que le site Web soit disponible sous la forme d'un package complet et prêt à l'emploi, y compris toutes les images, les graphiques et fonctionnalités que nous avons créés de telle sorte que le fichier soit complet et qu' aucune action supplémentaire ne soit nécessaire. Et assurez-vous que le fichier est compatible avec les créateurs et les hébergeurs de sites Web externes. Cela va donc étiqueter Cloud. Tu sais quoi ? Compilez le tout dans un package complet et confirmez que tout ce que nous avons créé et ajouté, y compris les images et les graphiques de la liste, fait partie du fichier prêt à être utilisé. Et surtout, vous devez vous assurer que le fichier que nous allons obtenir du Cloud est compatible avec les créateurs et hébergeurs de sites Web externes, car si vous l'utilisez, il fait partie de votre hébergement Web actuel ou de votre créateur de site Web actuel. Il existe de nombreux constructeurs. Il existe de nombreux hébergeurs. Toutefois, cela peut varier d'un apprenant à l'autre, professionnel à l'autre, étudiant à l' Nous devons nous assurer que Claude est en mesure de nous donner le résultat, qui soit facilement adaptable à n'importe quelle situation à laquelle vous êtes confronté Donc, en ajoutant cette invite actuelle, n'importe quelle version que vous avez ici, vous le dites simplement à Claude dans le cadre de l'application de développement Web frontale Donnez-moi le résultat complet tel quel, car j'aimerais prendre le site Web actuel que nous avons créé et le déployer dans le cadre de mon fournisseur d'hébergement, de mon créateur de site Web ou de tout autre type de service supplémentaire qui pourrait prendre votre code actuel et le déployer en tant que site Web en ligne. Il y en a beaucoup là-bas. La liste est longue. D' ailleurs, n'hésitez pas à faire vos propres recherches. Vous pouvez repérer bon nombre de ces options qui sont entièrement accessibles, où vous pouvez accéder à l'intégralité du fichier HTML que vous avez créé. Littéralement, vous le glissez et déposez et vous obtenez l'URL de votre propre site Web, et vous pouvez ajouter votre propre domaine unique. Il s'agit donc d'une sorte d'activité que vous pouvez faire vous-même, mais je vous montre comment y arriver. En téléchargeant simplement le fichier prêt à l'emploi, vous pouvez l'utiliser en fonction de votre situation. Que vous l' appliquiez à votre propre hébergement Web, c'est en partie une option pour votre propre créateur de site Web votre propre créateur de site Web. C'est une autre option. Vous allez trouver l'un de ces services où vous pouvez simplement glisser-déposer votre fichier HTML, par exemple le fichier que nous avons reçu ici, ce qui est largement suffisant. Je vais vous montrer le fichier que vous pourriez utiliser. Supposons le fichier actuel, le code HTML, ou vous pouvez simplement décompresser le fichier, prendre également le code HTML, et vous pouvez simplement déployer le site littéralement en faisant glisser le Vous prenez le code, vous le glissez et déposez de ces services de restauration directe, vous obtenez votre propre URL et votre site Web est entièrement accessible en ligne. Cependant, comme je l'ai mentionné, nous nous occupons du développement Web frontal du site Web Et il existe évidemment d'autres composants qui vont de pair avec le développement Web complet. front-end est un segment, mais vous avez le backend pour un autre segment Et dans le cadre du cours actuel, nous ne traitons que du développement Web frontal Il est donc très important de garder cela à l'esprit, car les tactiques je vous enseigne peuvent vous aider à améliorer votre site Web actuel, concevoir un site Web complet à partir de zéro, à exporter tous les résultats pour les modifier ultérieurement, mais gardez toujours à l'esprit que lorsque vous traitez de ces résultats et des résultats du modèle d'IA, vous devez vous assurer que le résultat correspond à votre situation unique grâce à l'application des tactiques que je vous enseigne. Faisons donc en sorte que cette production soit véritablement prête. Je vais combler plusieurs lacunes réelles, notamment compatibilité du chargement frontal avec les créateurs de sites Web, fonctionnement du formulaire de contact sans aucune configuration requise. Comme vous pouvez le voir ici, par exemple, un formulaire de contact typique, vous pouvez le concevoir depuis le front-end, mais vous devez évidemment le connecter à une base de données depuis le back-end Il s'agit donc d'une question qui ne partie du champ d'application dont nous parlons ou que nous traitons. Comme je l'ai mentionné, nous nous concentrons uniquement sur le développement Web frontal Gardez donc cela à l'esprit lorsque vous vous lancez dans votre propre application unique. Cependant, Claude en est parfaitement conscient et essaie de minimiser les problèmes de compatibilité, les problèmes qui pourraient survenir au cours de cette et essaie de minimiser les problèmes de compatibilité, les problèmes qui pourraient survenir au cours de étape ou de cette intégration, ce qui est très important à garder à l'esprit dans le cadre de l'invite actuelle. Nous avons besoin que le package de conception de notre site Web frontal soit compatible, facilement personnalisable et transférable Ensuite, c'est à vous de décider comment vous allez procéder à partir de là votre propre hébergement, votre propre service de déjeuner direct, votre propre connexion dorsale, peu importe ce que c'est. Vous pouvez prendre la sortie, puis la modifier en fonction de votre propre situation. Et comme on peut le voir ici, Claude est en train de tout vérifier. Le code HTML, le fichier CSS, les en-têtes, les images, la navigation, les graphismes, les polices, tout était essentiellement une conception frontale prête à l' emploi, prête à exporter, prête à déployer pour le Maintenant, cela est très important dans le cadre de vos options lorsqu'il s'agit de déployer votre site Web. Et évidemment, cela varie en fonction de la nature du site Web. Donc, si vous avez un site Web qui n'exige aucune intégration de formulaires ou de back-end. Vous pouvez simplement le lancer où que vous soyez. Cependant, comme je l'ai mentionné, je partage avec vous les différentes options qui s'offrent à vous, y compris d'autres ajouts avancés. Vous pouvez utiliser le résultat pour faciliter ce processus. Toutefois, en fonction de votre situation, si vous n'avez besoin d'aucune de ces fonctionnalités supplémentaires, vous pouvez lancer votre site Web directement, soit comme je l'ai mentionné dans Cloud en tant qu'artefact, soit vous pouvez le prendre comme un fichier de sortie prêt à être expédié, vous pouvez le déployer directement cadre de votre créateur de site Web, de votre hébergement Web ou de l'un de ces codes HTML en code direct aux services de sites Web en direct disponibles sur le marché. Il vous suffit de quelques minutes de recherche pour être en mesure d'identifier ceux qui correspondent le mieux à votre application. Cependant, dans le cadre des résultats de la leçon en cours, nous vous donnons le produit final, le résultat final, le résultat final, qui est un site Web entièrement conçu. Et le résultat et les leçons que vous en avez tirées pour personnaliser le résultat fonction de votre situation unique, en fonction de vos circonstances uniques. De cette façon, vous avez acquis les compétences, l'expertise, et pas simplement pour rester coincé. En fonction de vos propres résultats. Non, vous avez les outils, vous avez acquis le savoir-faire, et vous avez les démonstrations pour vous montrer exactement, étape par étape, comment procéder. Cela étant dit, Claude est en train de tout finaliser. Il parcourt toutes les pages, comme nous pouvons le voir. Il s'agit de tout personnaliser, et cela pourrait atteindre une limite car c'est très exigeant pour Claude Il vous suffit de cliquer sur Continuer. Et si vous n'avez plus de crédits, vous suffira d'attendre l'heure de réinitialisation et de poursuivre votre demande. Cependant, cela n'est pas nécessaire à ce stade, et c'est parti. Notre site Web est entièrement prêt. J'ai le code HTML que je pourrais télécharger et je peux déployer dans le cadre du code HTML pour les services de sites Web en direct. N'hésitez pas à explorer les différentes options. N'hésitez pas à rechercher différentes options si cela correspond aux exigences Ou je peux simplement cliquer sur Télécharger le fichier complet sur le fichier zip. Cela inclut tout ce que je vois et tout ce que nous avons construit à partir d'ATZ Je peux l'utiliser dans le cadre de mon hébergement Web en tant que site Web actuel pour une modification ultérieure, ou je peux simplement le confier à un créateur de site Web et le charger directement. Les applications sont infinies et vous pouvez simplement avoir ces résultats prêts à l'emploi en fonction de vos préférences. 20. Conclusion: Alors, qu'en penses-tu ? Impressionnant ? J' espère sincèrement que vous avez trouvé ce cours très utile, vous a inspiré et que vous avez même amélioré vos connaissances d'au moins 1 %. C'est un travail bien fait. J'ai hâte de recevoir vos commentaires sur le cours de cartes et de m'assurer que vous suivez mon profil pour les dernières versions et mises à jour, et je vous verrai lors du prochain cours.