Claude AI für kreatives Webdesign: Gestalten Sie beeindruckende kreative Websites mit Claude AI

1. Einführung: Wenn Sie versuchen, Ihre eigene Website zu entwerfen, beginnen Sie in der Regel mit vielen dieser Kritzeleien, Skizzen, Ideen und Konzepten, um am Ende eine kaputte Website zu haben , die nicht funktioniert Nun, nicht mehr. In diesem aktuellen Kurs werde ich Ihnen zeigen, wie Sie die Macht der künstlichen Intelligenz nutzen können, insbesondere Claude, um die Macht der künstlichen Intelligenz nutzen können, insbesondere Claude, Ihre Website zu gestalten, insbesondere die Frontend-Webentwicklung Damit Sie nicht über Codierung, Styling, Grafiken und Animationen nachdenken müssen , über die es normalerweise mühsam ist, nachzudenken Sie verbrauchen viel Zeit, viel Mühe und brechen ziemlich leicht Ich werde Ihnen zeigen, wie Sie den gesamten Prozess umgehen können. überhaupt kein Code erforderlich, sodass Sie sich als kreativer Profi einfach auf eine Sache konzentrieren können: die Konzeptualisierung, die Ideenfindung, Und ich werde Ihnen zeigen, wie Sie Website erstellen und gestalten, Frontend-Webentwicklung speziell, um Ihre Idee zum Leben zu erwecken Egal, ob wir über Navigation, Styling, Grafik oder Animation sprechen Styling, Grafik oder Animation Konzepte. Sie bauen Ihr Portfolio auf. Sie bauen Ihre eigene persönliche Marke auf. Die Anwendungen sind ziemlich endlos. Ich werde Ihnen die Taktiken zeigen, wie Sie sie bestmöglich einsetzen können, um Claude in Ihre Frontend-Webentwicklung zu integrieren , sodass Sie am Ende des Kurses eine wunderschön gestaltete Website haben, Sie am Ende des Kurses eine wunderschön gestaltete Website haben auf der Sie Ihre Arbeit, Ihre kreative Reise und Ihre Projekte präsentieren können 2. Dein Projekt: Projekt geht es darum, die wichtigsten Erkenntnisse anzuwenden , um Ihre eigene mehrseitige Website zu erstellen und Danach werden Sie Ihre Ergebnisse mit der Community teilen, um Feedback zu erhalten 3. Grundzüge einrichten: Willkommen zurück. Jetzt müssen wir einfach zu Cloud navigieren und Sie melden sich an und Sie landen im Hauptfenster der Benutzeroberfläche, dem Eingabeaufforderungsfenster hier. Da Sie sich nun mit der Cloud als Teil der aktuellen Anwendung für Webentwicklung, insbesondere Frontend-Webentwicklung, befassen werden als Teil der aktuellen Anwendung für Webentwicklung, insbesondere Frontend-Webentwicklung, , müssen wir einige wichtige Grundlagen und Taktiken schaffen einige wichtige Grundlagen und , um den Erfolg unserer Anwendung sicherzustellen. Zuallererst werden wir das folgende Basismodell verwenden , Sonic Five, das für jeden Benutzer verfügbar ist, der die Cloud nutzt, unabhängig davon, ob es sich um die kostenlose Version oder die Pro-Version handelt, Sie können es ganz einfach verwenden. Wenn Sie auf einer anderen Stufe sind oder sich für eine andere Version entscheiden möchten , liegt es ganz bei Ihnen. Sie können sich für Opus Five, Fable oder Fab Five entscheiden. daran, dass Sie, je weiter Sie mit dem Modell vorankommen, mehr Credits verbrauchen werden , was sehr, sehr wichtig ist, im Hinterkopf zu behalten, insbesondere bei komplexen Aufgaben wie wir eine Website entwerfen, wir bearbeiten eine Website, wir arbeiten mit Codes, um Designs, Anpassungen und Bearbeitung verschiedener Elemente zu durchlaufen , Anpassungen und Bearbeitung verschiedener Es ist also ein Hin- und Her-Prozess, das KI-Modell ziemlich anspruchsvoll sein könnte Es wird also eine Menge Credits verbrauchen , wenn Sie ein sehr fortschrittliches Modell verwenden. Bei Basismodellen oder Modellen mit geringerer Komplexität könnten Sie die Arbeit erledigen, ohne die Credits zu stark zu verbrauchen Wenn Sie also die kostenlose Version verwenden und für die fortgeschrittenen Modelle entscheiden, könnten Ihnen schnell die Credits ausgehen Dann müssen Sie auf eine Reset-Zeit warten, und dann können Sie weitermachen. Wenn Sie sich für das aktuelle Modell oder ein niedrigeres Modell entscheiden, könnten wir uns zum Beispiel für Sonic Five entscheiden, das wir verwenden werden das für alltägliche Aufgaben am effizientesten ist. Es erledigt die Arbeit, belastet aber nicht wirklich den tatsächlichen Kreditverbrauch Auf diese Weise können Sie mehr Änderungen, mehr Feedback und mehr Wiederholungen bei der Anpassung der Website vornehmen Auf diese Weise sparen Sie Zeit und Mühe und erzielen trotzdem solide Ergebnisse. Behalten Sie das also im Hinterkopf. Dann ist es ein sehr wichtiges Konzept , das wir verstehen müssen. Da wir uns mit dem Design für eine Website befassen, insbesondere mit der Frontend-Webentwicklung, werden wir das Projekt twittern, was wir regelmäßig tun, insbesondere für den professionellen Kontext. Sie erstellen nicht einfach einmal ein Design und das war's. Sie müssen die Website tatsächlich bearbeiten. Sie müssen die Ausgabe fein abstimmen. Sie müssen sicherstellen, dass Sie in der Lage sind, Ihre vorherige Arbeit immer wieder aufzugreifen und dort weiterzumachen, wo Sie aufgehört haben Und deshalb müssen wir es als Projekt angehen. Das ist sehr wichtig und sehr wichtig. Was wir jetzt tun werden, ist, wir auf O plus klicken, was bedeutet, ein neues Projekt hinzufügen, und wir werden ein neues Projekt für unsere praktische Anwendung erstellen . Nennen wir es Front - und Webentwicklung. Okay. Wir können dies also nach unseren Wünschen nutzen. Sie können es nennen, wie auch immer Sie es nennen möchten, es liegt ganz bei Ihnen, oder? Was versuchen wir zu erreichen? Im Rahmen des Antragsumfangs können wir das Projekt, die Ziele, das Thema usw. beschreiben . Sie können dies bearbeiten oder wir werden uns später noch einmal damit befassen. Es liegt ganz bei dir. Was wir tun werden, ist einfach ein grundlegendes Thema vorzugeben. Wir werden das Frontend einer Website für ein Geschäftsprojekt, eine kreative Anwendung usw. entwerfen einer Website für ein Geschäftsprojekt, . So einfach ist das Das ist das Hauptziel. Dies ist das Hauptthema. Sie könnten spezifisch sein. Zum jetzigen Zeitpunkt ist es jedoch nicht so notwendig. Sobald Sie also das Projekt erstellt haben, was ein zentraler grundlegender Schritt ist, den wir behandeln müssen, weil dadurch sichergestellt wird, dass Sie zu einem späteren Zeitpunkt, sobald Sie Ihre eigentliche Website haben und Dinge bearbeiten und verfeinern möchten, diese erneut aufrufen und ein bestimmtes Segment der Website aufrufen und es mit ein paar Klicks bearbeiten können , anstatt das gesamte Projekt durchgehen zu müssen Vorgang noch einmal von vorne. Sobald Sie also auf der Produktoberfläche gelandet sind, haben Sie hier die Chat-Oberfläche. Sie haben die Möglichkeit, tatsächlich Dateien hinzuzufügen, einen Screenshot, Fähigkeiten, Konnektoren, Plugins zu machen und die Liste geht weiter. Schauen Sie sich hier die rechte Seite an. Wir haben Anweisungen. Wir haben Speicher, dann den Kontext und geplante wiederkehrende Aufgaben. Diese sind sehr leistungsfähig, wenn Sie Ihre Frontend-Webentwicklungsanwendung auf ein ganz neues Niveau bringen wollen Ihre Frontend-Webentwicklungsanwendung . Lassen Sie mich es Ihnen zeigen. Zunächst werden wir Anweisungen hinzufügen. Wir werden Claude sagen, was wir versuchen zu tun. Auf diese Weise erhält Claude relevante Anweisungen und Informationen für Chats, die auf diesem speziellen Projekt basieren. Also werde hier konkret. Was versuchst du zu erreichen, oder? Versuchen Sie, eine Website für Ihr Unternehmen, für Ihr Unternehmen zu entwerfen ? Projekt, an dem Sie gerade arbeiten, oder versuchen Sie einfach , an Ihren Frontend-Webentwicklungsfähigkeiten zu arbeiten. Fühlen Sie sich frei, so viele Details wie möglich hinzuzufügen. Um die Dinge jedoch recht einfach zu halten, werde ich Ihnen die grundlegenden Anweisungen zeigen , die Sie einfach injizieren könnten um wirklich aussagekräftige Ergebnisse Was sind also die grundlegenden Anweisungen? Ich werde Cloud sagen, dass wir an der Webentwicklung arbeiten werden. Oder sagen wir, ein hypothetisches Geschäft, wir werden an einem Café und einer Bäckerei arbeiten, Wir werden an einem Aufbau für die Website arbeiten, an der Frontend-Entwicklung für eine bestimmte hypothetische Anwendung, und Sie können Ihre eigene, einzigartige Anwendung nach Ihren Wünschen einfügen und hinzufügen einzigartige Anwendung nach Ihren Also werden wir an der Webentwicklung für ein Café Slash Bakery arbeiten ein Um ein professionell aussehendes Website-Design zu erstellen, bei dem Sie alle Einschränkungen und Präferenzen berücksichtigen können Das Design ist professionell und editierbar, was sehr wichtig ist, da wir es einfach bearbeiten möchten es einfach bearbeiten möchten Individuell anpassbar. Die relevanten Codes für die Website, sobald sie erstellt wurden, einschließlich HTML, CSS oder anderer relevanter Codes, können einfach extrahiert und für die zukünftige Bearbeitung und Verwendung geändert werden . Also, was ich hier versuche, ich lege die Grundlage auf der Grundlage meiner Präferenz. Wie ich bereits erwähnt habe, werden wir im Rahmen der Demonstration an einem hypothetischen Projekt arbeiten, bei dem im Grunde um ein Geschäft Es ist ein Café und eine Bäckerei, und wir werden am Frontend-Webentwicklungsdesign für c arbeiten . können es gerne für Ihre eigene einzigartige Anwendung, Ihr eigenes Unternehmen, Ihr eigenes Projekt, Ihre eigene Idee verwenden Unternehmen, Ihr eigenes Projekt, Ihre eigene . Folgen Sie derselben Struktur. Also diese Aufforderung oder die grundlegenden Anweisungen oder die Aufforderung zur Eingabe der Anweisungen, wir teilen Cloud mit, dass das Design sehr professionell und editierbar sein muss sehr professionell und editierbar sein Etwas ist nicht statisch, etwas, das wir reparieren und mit dem wir arbeiten können Leicht anpassbar zum späteren Nachschlagen Wenn ich die Website anpassen möchte, kehre ich zum Projekt zurück. Ich kann es einfach anpassen. Die relevanten Codes für die Website, sobald sie erstellt wurden, einschließlich HTML, CSS oder anderer relevanter Codes, können einfach extrahiert und für die zukünftige Bearbeitung und Verwendung geändert werden . Das ist sehr leistungsfähig, weil es Cloud beim Entwerfen mitteilt, dass der Code, den Sie erstellen, etwas ist, das ich verwenden, aufgreifen und anpassen kann . Wenn Sie dies zum Beispiel auf Ihr eigenes Hosting verschieben , wenn Sie eine fortgeschrittenere Nutzung haben, versuchen Sie, einen bestimmten Code aus dem von Ihnen erstellten Code auszuwählen , z. B. ein Snippet für die HTML-Datei oder die CSS-Datei, können Sie einfach auf Ihr Projekt springen, diesen Code abrufen und ihn direkt auf Ihrer Website platzieren , falls Sie welche haben gewissermaßen fortgeschrittene Kodierungs- oder Bearbeitungsfähigkeiten Dies gibt Ihnen also die zukünftige Flexibilität, die Sie zu einem späteren Zeitpunkt benötigen werden. Dann der Speicher für das eigentliche Projekt. Beachten Sie, dass Sie die Speicherfunktion aktivieren müssen, sobald Sie zu den Einstellungen wechseln. Wenn Sie also zu den Einstellungen navigieren, stellen Sie sicher, dass Sie den Speicher je nach Ihren Wünschen entweder aktivieren oder deaktivieren. Wenn Sie jedoch den Speicher aktivieren, wird Cloud anhand der Chats hier angezeigt. Wenn wir also einen Chat haben, wird er auf die Liste gesetzt, aber auch ein anderer Chat auf der Liste, der Teil des Projektspeichers sein wird. Dies ist sehr wichtig für zukünftige Entwicklungsanwendungen. Und das ist einer meiner liebsten tatsächlichen Nutzungs - oder Anwendungsfälle für den Projektkontext, die Projektanwendung , also den Kontext. So könnten wir PDFs, Dokumente und andere Textverweise zu diesem eigentlichen Projekt hinzufügen andere Textverweise zu diesem eigentlichen Projekt Ich bin außerdem hier drüben. Ich habe die Möglichkeit, entweder die Dateien hochzuladen, bestimmte Kontexte hinzuzufügen oder sie sogar mit externen Codes zu verbinden , wenn Sie den Code beispielsweise als Teil von Github eingerichtet haben . Für unsere Anwendung werden wir jedoch, wie ich bereits erwähnt habe, nichts programmieren. Ich zeige Ihnen, wie Sie die Frontend-Webentwicklung über die Cloud komplett von Grund auf neu durchgehen die Frontend-Webentwicklung über die Cloud komplett von können, ohne eine einzige Zeile zu schreiben , nachdem wir die erforderliche Grundlage geschaffen haben um mit unserer Webentwicklungsanwendung fortzufahren. Wir haben unser Projekt eingerichtet, wir haben unsere Anweisungen, Speicher wird nach einer Präferenz aktiviert. Nun zum Kontext: Ich werde Ihnen zeigen, was wir verwenden werden, um uns auf den neuesten Stand zu bringen und loszulegen. In der aktuellen Phase schaffen wir jedoch lediglich die Grundlage für eine erfolgreiche Frontend-Webentwicklungsanwendung. Sie das Projekt bearbeiten, behalten Sie es im Hinterkopf. Sie haben die Möglichkeit, eine Zeitplanaufgabe zu erstellen , in der Sie sie beispielsweise benennen, Anweisungen geben und wenn Sie möchten, dass Cloud beispielsweise automatisch einen bestimmten Code durchsucht , z. B. für Ihre Website, die Sie hinzufügen, und Ihnen dann einige Art von Feedback, bei dem Sie entweder manuell oder Cloud automatisch genehmigen. Dies ist etwas fortgeschrittener für eine spätere Phase, sobald Sie mit dem eigentlichen Projekt fertig sind Wenn Sie bestimmte Codes hinzufügen oder Cloud über den Kontext oder über die Konnektoren mit externen Codes verbinden über den Kontext oder über die Konnektoren mit externen Codes , fügen Sie beispielsweise einen Konnektor hinzu, Sie fügen ein Plugin hinzu. Cloud kann auf externe Tools zugreifen, mit denen Sie eine Verbindung hergestellt haben. Dann könnten Sie Aufgaben planen, bei denen Cloud bestimmte Aktionen ausführen kann, und die Cloud genehmigt diese automatisch oder leitet sie zur manuellen Genehmigung an Sie Dies ist eine fortgeschrittene Taktik, denken Sie daran, dass sie da ist. Wenn Sie ein professioneller Webentwickler sind, möchten Sie, dass Cloud ab und zu eine Reihe von Codes durchläuft ab und zu eine Reihe von Codes Dies ist eher ein fortschrittliches Tool , mit dem Sie diese sich wiederholenden Aufgaben planmäßig erledigen können Sie diese sich wiederholenden Aufgaben planmäßig Davon abgesehen befinden wir uns bereits in diesem Stadium Wir haben die Grundlage für den Start unserer Frontend-Webentwicklungsanwendung geschaffen. 4. Hinzufügen von Design-Inspiration: Und willkommen zurück. Also habe ich unser Projekt ins Leben gerufen und wir haben die Grundlage für unsere Bewerbung geschaffen. Dies ist die Phase , in der wir Inspiration hinzufügen werden . Du hast mich richtig verstanden. Im Rahmen Ihrer Frontend-Webentwicklung und ohne Code-Anwendung werden wir uns inspirieren lassen Haben Sie sich zum Beispiel jemals eine bestimmte Website oder Ihre eigene Website oder ein bestimmtes Papier angesehen eine bestimmte Website oder Ihre eigene Website oder , auf dem Sie Ihr Design geschrieben haben, oder einen bestimmten Schaltplan oder Screenshot, den Sie als Teil Ihres Designs als Inspiration erhalten haben als Teil Ihres Designs als Inspiration In dieser Phase werden wir damit beginnen, es zu unserem Kontakt hinzuzufügen. Jetzt werden wir im Rahmen unserer Demonstration einige Dateien hinzufügen . Wir werden an der Frontend-Webentwicklung für eine Website, für ein Café und eine Bäckerei arbeiten der Frontend-Webentwicklung für eine Website, für ein Café und eine Bäckerei Dies ist beispielsweise die Phase, in der Sie die Branding-Elemente hinzufügen Sie können ein Logo hinzufügen. Sie könnten Farbpaletten hinzufügen, wenn Sie eine haben. Sie können die Markenbotschaft hinzufügen. Sie können zu Inspirationszwecken einen Screenshot eines bestimmten Designs hinzufügen , das Sie irgendwo gesehen haben , oder sogar auf Websites verweisen , die Sie sehr inspirierend fanden, um ein einzigartiges Design für Ihre Website oder Bilder oder Fotos zu entwickeln, die Sie mit Ihre Website oder Bilder oder Fotos zu entwickeln, die Sie Ihrer Kamera aufgenommen haben, oder etwas , das Sie buchstäblich auf ein Blatt Papier geschrieben haben Der Kontext, den Sie hinzufügen könnten, um Ihnen beim Aufbau Ihrer Website zu helfen , ist ziemlich endlos Hier sind ein paar Dinge , die Sie hinzufügen könnten, um den Kontext für die Website zu erstellen Sie könnten das Logo hinzufügen. Sie könnten ein Bild hinzufügen, das Sie mit Ihrer Kamera aufgenommen haben. Du wirst sagen, du gehst die Straße entlang. Du hast eine tolle Pflanze, einen Baum oder eine Blume gefunden. Sie werden inspiriert, dieses Design zu Ihrer Website hinzuzufügen. Sie nehmen ein Bild auf, Sie können es in den Kontext hochladen. Oder Sie könnten zum Beispiel einen Screenshot für Ihre eigene aktuelle Website machen. Und fügen Sie es dann hinzu, wenn Sie versuchen, eine bestehende Website zu bearbeiten, oder noch besser. Nehmen wir zum Beispiel an, Sie trinken eine Tasse Kaffee und skizzieren auf einem Blatt Papier ein Website-Design. Machen Sie ein Bild davon und fügen Sie es hier hinzu, sogar auf einer Serviette Sogar eine URL, zum Beispiel für Ihre eigene Website, die Sie gerade verwenden und die Sie ändern möchten, können Sie ebenso wie einen Teil einer PDF-Datei hinzufügen, all diese Details oder Bilder, Screenshots Ich gebe Ihnen all diese inspirierenden Ideen , damit Sie sehen, dass Sie viele Details hinzufügen können damit Sie sofort loslegen können dieser aktuellen Phase besteht das Ziel dieser aktuellen Vorlesung darin , besteht das Ziel dieser aktuellen Vorlesung darin Sie Ihre Inspiration mitbringen, Ihr Logo, Ihre Bilder, Ihre Screenshots, für Ihre Website, Ihre Screenshots, für das Design, dass Sie Ihre Inspiration mitbringen, Ihr Logo, Ihre Bilder, Ihre Screenshots, für Ihre Website, Ihre Screenshots, für das Design, an dem Sie gerade arbeiten, das eigentliche Word-Dokument, PowerPoint, PDF, El-Datei, welche Referenz Sie auch haben, selbst die Serviette, die Sie haben, bekommen El-Datei, welche Referenz Sie auch haben, selbst die Serviette, wenn Sie an oder an dem Papier arbeiten, auf das Sie gekritzelt haben . Scannen es einfach und fügen Sie all diese Elemente dem Kontext des Projekts hinzu , da dies Claude helfen wird zu analysieren, wie er einfach und effektiv vorankommen kann. also in dieser aktuellen Phase damit, Beginnen Sie also in dieser aktuellen Phase damit, Ihre Branding-Elemente, Ihre Logos, einen Screenshot Ihrer aktuellen Website, falls Sie sie bearbeiten möchten, einige inspirierende Elemente, die Sie gesammelt haben, hinzuzufügen Ihre Logos, einen Screenshot Ihrer aktuellen Website, falls Sie sie bearbeiten möchten, einige inspirierende Elemente, , und wir sind bereit, uns mit der Frontend-Webentwicklung unserer Website zu befassen . 5. Erstellen einer Single-Page-Website: Und willkommen zurück. Jetzt werden wir eine einseitige Website erstellen. Dies ist sehr wichtig für jedes Unternehmen, jeden kreativen Profi, jeden Berufstätigen, Vermarkter, Vertriebsprofi, und die Liste geht weiter Wenn Sie versuchen, beispielsweise eine Produkteinführung, ein neues Geschäftsessen oder ein bestimmtes Produkt, das Sie präsentieren möchten, oder eine bestimmte Landingpage für eine Veranstaltung, die Sie durchführen, zu entwickeln eine Produkteinführung, ein neues Geschäftsessen oder ein bestimmtes Produkt, das Sie präsentieren möchten, oder eine bestimmte Landingpage für eine Veranstaltung, die Sie durchführen, zu , würden Sie normalerweise eine einseitige Website erstellen, oder , ? Nehmen wir an, wir haben im Rahmen unseres aktuellen Antrags den Start des Unternehmens, das aus einer Bäckerei und einem Café besteht, das hypothetisch Mugs genannt wird Dies ist ein hypothetisches Geschäft , das lediglich zu Demonstrationszwecken dient. All diese Details sind rein hypothetisch, damit Sie sehen können, wie sie leicht Ihrer individuellen Situation zugeordnet werden können zugeordnet Deshalb werden wir auf sehr kreative Weise eine einseitige Website erstellen , um den Start des Unternehmens anzukündigen Wie werden wir also eine einseitige Website erstellen? Dies kann übrigens für alles funktionieren, für ein Produktessen, ein Geschäftsessen, bestimmte Details, eine Verkaufsseite, was auch immer es ist, eine Detailseite zu einem bestimmten Ereignis über Ihr Unternehmen, was auch immer es ist. Es ist völlig aus, also was wir tun werden, ist, Claude zu sagen, dass er speziell als professioneller Webentwickler auftritt. Front- und Webentwicklung , bei der Sie mir helfen werden, eine einseitige Website zu erstellen, die Folgendes umfasst. Dies ist eine sehr mächtige Aufforderung. Es gibt klare Kontexte und Anforderungen. Das Logo aus den Projektdateien. Sehen Sie, wie mächtig es ist, wenn Sie viele wichtige Dateien zum Kontext hinzufügen , wenn Sie viele wichtige Dateien zum Kontext Claude kann all diese Details auswählen und sie unserer Anwendung zuordnen, das Logo aus den Projektdateien, die Farbpalette aus den verschiedenen Bildern und ein professionelles, schlankes Design. Und dann werden wir Tell Claude vollständig anpassbar machen. Also werde ich hier zu Tag Cloud gehen und als professioneller Webentwickler auftreten, als professioneller Webentwickler auftreten, speziell aus einer Webentwicklung, bei der Sie mir helfen werden , eine einseitige Website zu erstellen. Dies ist die Phase, in der Sie Ihre eigene einzigartige Anwendung für ein Unternehmen, Ihr Unternehmen, Ihre Website hinzufügen Ihre eigene einzigartige Anwendung für ein Unternehmen, Ihr Unternehmen, , wo auch immer sie sich befindet, etwas, das mit Ihrer eigenen Anwendung zusammenhängt Ihrer eigenen Anwendung für die Sie diese Taktiken anwenden. Helfen Sie mir, eine einseitige Website für mein neues Unternehmen namens Mugs zu erstellen , bei dem es sich um ein Café und eine Bäckerei handelt, die Folgendes umfasst Dann werde ich es Claude sagen und mir unterwegs alle relevanten Fragen stellen Das ist also eine sehr leistungsstarke Eingabeaufforderungsstruktur, denn dadurch wird Cloud als professioneller Webentwickler agieren, insbesondere als Frontend-Webentwicklung, bei der Sie mir helfen werden , eine einseitige Website für mein neues Unternehmen zu erstellen eine einseitige Website für mein neues Unternehmen Ich habe das Thema, die Kontakte, richtig hinzugefügt, einschließlich des Logos aus den Projektdateien, die Farbpalette aus den verschiedenen hinzugefügten Bildern, ein professionelles, schlankes Design und eine vollständig anpassbare Website. Und Code. Und ich werde hinzufügen, was versuche ich von dieser eigentlichen Website zu bekommen, oder ich könnte es einfach so lassen, wie es ist. Wenn Sie sich also einfach für eine einseitige Website entscheiden möchten, die für Ihr Unternehmen ausreichend ist, ist das großartig. Wenn Sie eine bestimmte Aufgabe dafür haben, z. B. die Ankündigung des Geschäftsbetriebs, können Sie die spezifische Anforderung hinzufügen Also werde ich es spezifisch halten. Einseitige Website für mein neues Unternehmen namens UGS , ein Café und eine Bäckerei Die einseitige Website soll den bevorstehenden Eröffnungstag und das bevorstehende Datum bekannt geben . Los geht's. Ich werde das Datum und den Tag leer lassen, weil Claude mich auf jeden Fall danach fragen wird ob ich das Datum des Mittagessens oder die Eröffnung oder bestimmte Daten ganz nach meinem Ermessen ändern möchte. Wie wäre es, wenn wir uns für Tag und Uhrzeit entscheiden? Um dem Ganzen mehr Abwechslung zu verleihen. Wie Sie hier sehen können, habe ich mit einer generischen Aufforderung begonnen. Dann habe ich die Eingabeaufforderung im Rahmen der richtigen Prompt-Engineering-Praktiken so angepasst richtigen Prompt-Engineering-Praktiken , dass sie einen gewissen Kontext, ein Thema, einige Referenzen und einige spezifische Anwendungen enthält , damit Sie genau sehen können, wie ich von einer generischen einseitigen Website zu einer bestimmten einseitigen Website vorgehen würde genau sehen können, wie ich von einer generischen einseitigen Website . Auf diese Weise können Sie sich inspirieren lassen und sich Ihren Weg durch Ihre eigene einzigartige App bahnen Los geht's. Claude durchläuft gerade das Projekt. Wie wir hier sehen können, haben wir im Rahmen des Projekts einen neuen Chat gestartet. Dies ist sehr leistungsfähig da wir den Prozess in mehreren Zeiträumen durchführen können ohne die Dinge immer wieder neu einstellen zu müssen Dinge immer wieder neu einstellen Welche visuellen Richtungsfelder sind also die richtigen für Mug? Warum hat Claude mir diese Frage gestellt? Weil es Teil meiner strategischen Aufforderung ist. Stellen Sie mir unterwegs alle relevanten Fragen. Dabei handelt es sich um eine fortschrittliche Taktik der Prompt-Engineering-Taktik , mit der das KI-Modell Ihnen helfen kann, den Output zu steigern Was ist also die visuelle Richtung? Warme und rustikale Backstube, gemütliche Texturen, elegant und minimalistisch, mutig und modern. Lassen Sie mich anhand des Logos entscheiden. Wenn Sie also Ihr eigenes Logo für Ihr Unternehmen, für Ihr Unternehmen haben für Ihr Unternehmen, für Ihr Unternehmen und es einfach von dort übernehmen möchten, hilft Ihnen das, die Arbeit zu erledigen. Zu Demonstrationszwecken zeige ich Ihnen jedoch den Umfang der Flexibilität und die Änderungen , die Sie während des Entwurfsprozesses vornehmen können und die Sie im Laufe des Designprozesses Entscheiden wir uns für elegant und minimalistisch. Welche Abschnitte benötigt die kommende Zoom-Seite dann? Das ist sehr, sehr mächtig. Das wurde bewusst nicht in die Eingabeaufforderung aufgenommen, weil es Claude den Spielraum oder die Flexibilität gibt , Punkte vorzuschlagen, die wir überprüfen sollten Dies ist sehr wichtig, wenn Sie ein absoluter Anfänger in der Webentwicklung oder Frontend-Webentwicklung sind oder wenn Sie nicht genügend Inspiration haben, um die eigentlichen Bereiche der Seite aufzuschlüsseln Sie haben die Abschnitte der Seite bereits als Teil des Kontextes aufgeschlüsselt , dann können Sie dies einfach komplett überspringen , indem Sie auf Überspringen klicken Wenn Sie diese Ausgaben jedoch inspirieren, können Sie jederzeit anpassen die Ausgabe jederzeit anpassen, da all diese Ergebnisse auf der soliden Prompt-Engineering-Taktik basieren , die ich Ihnen beibringe Welche Abschnitte benötigt die kommende Zoom-Seite also? Nur Logo, Öffnungsdaten und Countdown, plus Adresse , dazu ein kurzer Kurztext über uns, dazu E-Mail-Anmeldung für Startbenachrichtigungen, das plus Links zu sozialen Netzwerken Wie wäre es, wenn wir sie alle hinzufügen? Ich werde es Claude sagen. Los geht's. Alle oben genannten oder ich kann einfach alle auswählen. Es liegt ganz bei mir. Los geht's. Dann gib das an Cloud weiter. Wir werden die komplette On-Page für mich erstellen. Denken Sie daran, dass wir uns derzeit einfach auf die Front- und Webentwicklung konzentrieren . Für fortgeschrittene Benutzer ist dies sehr leistungsfähig, um Ihren Webentwicklungsprozess zu rationalisieren Im Rahmen unserer Anwendung konzentrieren wir uns jedoch auf die Front-End-Webentwicklung Schauen wir uns das Feedback an. Verstanden, elegant und minimalistisch mit allem Logo, Countdown-Adresse, einem Klappentext, E-Mail-Anmeldung und sozialen Links Bevor ich mit dem Bauen beginne, benötige ich ein paar konkrete Details. Ich verwende geschmackvolle Platzhalter für alles, was Sie lieber später ausfüllen Das ist sehr leistungsstark, denn so kann ich mir das Design ansehen, die Leinwand nehmen und sie später an meine Vorlieben anpassen Was ist das Eröffnungsdatum und die Uhrzeit, Adresse und Ort, soziale Kontakte, ein oder zwei Zeilen über Tassen, Kontakt-E-Mail Dies wird auf der Grundlage Ihrer eigenen, einzigartigen Anwendung angezeigt. Sie können gerne Ihre eigenen Daten hinzufügen, wenn Sie möchten. gerne beantworten, was Sie haben, und den restlichen Platzhalter für alles, was eindeutig fehlt, überspringen , damit Sie es leicht finden und später austauschen Also werde ich Claude sagen, mit Platzhaltern für alle fortzufahren . Siehst du, wie mächtig das ist? Jetzt habe ich eine vollständige , einsatzbereite, anpassbare Leinwand, die auf meinem Projekt-Setup basiert. Das ist also sehr leistungsfähig, denn wenn Sie sich erinnern, als Teil der Projektgrundlage für das Setup verlangt, haben wir als Teil der Projektgrundlage für das Setup verlangt, dass alles sehr anpassbar, anpassbar und professionell Das ist also die Grundlage für das Fundament, das Sie gerade sehen Wenn wir die Schritte, die ich Ihnen beigebracht habe, nicht nacheinander durchgegangen wären, wäre der Aufstieg aus der Cloud ganz anders. Und das ist der Grund, warum viele Studierende , viele Lernende, viele Fachleute Ergebnisse aus der grundlegenden Nutzung der Cloud ziehen, verglichen mit völlig anderen Ergebnissen aus der professionellen Nutzung der Cloud Hier findet die Unterscheidung statt. Wenn Sie Cloud gelegentlich mit diesem soliden Wissen in Bezug auf Verwendung als Teil der Sequenz, die ich Ihnen beibringe, verwenden, werden Sie ganz andere Ergebnisse erzielen Wenn Sie jedoch Schritt für Schritt der strategischen Vorgehensweise folgen, die ich Ihnen zeige, werden Sie professionelle Ergebnisse erzielen, die Ihnen helfen, den Unterschied zu erkennen, und Sie können sich durch werden Sie professionelle Ergebnisse erzielen, die Ihnen helfen, den Unterschied zu erkennen, und Sie können sich die Ihnen helfen, den Unterschied zu erkennen, den Output, den Sie generieren, abheben, was ziemlich einzigartig ist, professionell auf den Output, den Sie generieren, abheben, was ziemlich einzigartig ist, dem Niveau im Vergleich zu einem generischen Basis-Apot , der nicht vollständig etwas, das Sie als Teil Ihrer täglichen Aktivitäten nutzen könnten als Teil Ihrer täglichen Aktivitäten nutzen Wie wir hier sehen können, los geht's. Claude lässt den Motor laufen , um den gesamten Prozess zu durchlaufen. Schau dir das an. Wie wir hier sehen können, ist hier die demnächst erscheinende Website, einem einzigen Indexpunkt, alles, HTML, CSS, JS, eigenständig, plus Ihr Logo, das in den Assets gespeichert Hervorragend. Was ist drin, Tic? Schau dir die Details an, in denen die Platzhalter alle mit Bearbeiten gekennzeichnet sind Hervorragend. Sehen Sie, wie professionell das ist. Es erstellt für mich den eigentlichen Code mit Verweisen über das Logo Also haben wir das Logo. Und schauen Sie sich die Datei und die eigentliche Website an, einseitige Website hier. Also haben wir Tassen, Café und Bäckerei. Es braut sich etwas Warmes zusammen, ein neuer Ort in der Nachbarschaft für langsame Morgen, Schinkenpüree, Espresso und Brot, jeden Tag von Grund auf neu gebacken Dann haben wir den Platzhalter für das Datum. sage ich Claude einfach, mach weiter und aktualisiere den Tag Wir reparieren das automatisch. Dann schauen Sie sich den kleinen Ausschnitt zum Thema Café an Ich kann das nach Belieben bearbeiten. Schauen Sie sich das auch für die Details an. Bleiben Sie auf dem Laufenden, seien Sie der Erste, der durch die Tür geht. Du könntest das einfach zu einem späteren Zeitpunkt verbinden einem späteren Zeitpunkt wenn du mit der Frontend-Webentwicklung fertig bist Wir haben die sozialen Medien hier drüben. Wenn wir sie übrigens verbinden möchten, und sobald Sie auf einen von ihnen klicken, wird es Ihnen einfach sagen, dass Sie den Link extern öffnen, da diese als Platzhalter für die eigentlichen Links betrachtet werden für die eigentlichen In dieser Phase denken wir daran, wir eine einseitige Website erstellen unsere Anwendung völlig codefrei ist und speziell für die Frontend-Webentwicklung Wie Sie hier sehen können, im Falle von Fehlern wird Claude im Falle von Fehlern diese unterwegs erkennen Also werde ich Claude sagen, alle Fehler zu beheben. Das ist im Grunde etwas , was du mit Claude machen könntest , wenn es auf Fehler stößt. Sag Claude einfach, mach weiter, finde einen Fehler und mach weiter und behebe den Fehler. Dies ist eine sehr professionelle und elegant aussehende einseitige Website. Wie Sie hier sehen können, haben wir die Platzhalter für das eigentliche Logo als Teil der einseitigen Website Jetzt, da Claude die Fehler behebt, habe ich die Möglichkeit, dies als HTML-Datei herunterzuladen oder es als Teil meines Projekts hinzuzufügen Sagen Sie Cloud einfach, machen Sie weiter fügen Sie dies dem Frontend-Webentwicklungsprojekt hinzu. Dabei handelt es sich um eine andere Anwendung oder eine andere Ebene, um Ihre Anwendung weiterzuentwickeln, Sie die Ausgabe, die Sie generieren, zur Feinabstimmung Ihres Projekts abrufen können generieren, zur Feinabstimmung Ihres Somit könnte jede einzelne Ausgabe , die Sie aus der Cloud erhalten, dem Projekt hinzugefügt werden , damit Ihre Ergebnisse im Laufe der Zeit immer besser Und nehmen wir an, Sie sind ein professioneller Webentwickler, Sie könnten einfach durch den Code hier navigieren. Sie könnten auf Kommentare klicken, wenn Sie etwas kommentieren oder bearbeiten möchten . Wie ich bereits erwähnt habe, ist unsere Anwendung codefrei. Damit Sie jedoch genau sehen können, was passiert, falls Sie zusätzliches Interesse an zusätzlichen Anwendungen haben oder programmieren können, oder wenn Sie weiter lernen möchten, wie diese Codes verwenden und sie auf Ihre eigenen, einzigartigen Praktiken anwenden können, können Sie sich im Grunde alle diese Funktionen und Optionen vor Augen führen lassen Lassen Sie sich inspirieren und wenden Sie es auf Ihre eigene einzigartige Situation an. So können wir hier auf das Umschaltsymbol klicken. Ich habe die Möglichkeit, mir den gesamten Code anzusehen. Für das Design der Website. Ich habe die Möglichkeit, es zu kopieren. Ich habe die Möglichkeit, es herunterzuladen, um es weiter zu bearbeiten oder als Teil meines aktuellen Hostings, beispielsweise eines Website-Hostings, zu verwenden. Wenn Sie ein Website-Hosting oder einen beliebigen Website-Builder wie Wordpress verwenden , können Sie einfach die HTML-Datei nehmen und sie Ihrer Wordpress-Seite hinzufügen, z. B. rechts, als Teil einer neu erstellten Seite Das sind also ziemlich einzigartige Anwendungen Sie sich inspirieren lassen Zum jetzigen Zeitpunkt ist jedoch alles, was wir tun, immer noch zu 100% bei Claude und codefrei. Deshalb haben wir unsere Website, einseitige Website, vollständig gestaltet. Wie wir hier sehen können, hat Claude ein hypothetisches Datum hinzugefügt, nur um die Fehler zu korrigieren, was ziemlich offensichtlich ist Wir erhalten ein hypothetisches Datum, einen Countdown-Timer, und ich könnte einfach jeden Teil des Prozesses nach meinen Wünschen bearbeiten jeden Teil des Das ist also einfach die erste Ausgabe , die wir von Claude erhalten Es ist eine einseitige Website, die auf dem aktuellen Kontext basiert. 6. Designanpassung: Willkommen zurück. Wir haben also unsere ersten Ergebnisse aus der Cloud erhalten, und in der Regel muss jede Website angepasst werden. Und im Rahmen der aktuellen Vorlesung werde ich Ihnen zeigen, wie Sie die Ausgabe aus der Cloud an Ihre Präferenzen anpassen können . Ihr könntet einfach die Schriftarten ändern, die Grafiken ändern, die Farben ändern, bestimmte Elemente hinzufügen. Es liegt ganz bei uns. Wie wir hier anhand der Basisausgabe sehen können , haben wir Platzhalter für das eigentliche Logo Und aus meiner eigenen Präferenz heraus möchte ich mich nicht mit irgendwelchen Segmenten aus den Platzhaltern auseinandersetzen müssen , und ich möchte, dass alles einfach einsatzbereit ist Also gehe ich zu Ta Claude. Das Logo-Bild auf der Website ist kaputt. Stellen Sie sicher, dass das Logo vollständig sichtbar ist, und bearbeiten Sie, was erforderlich ist, um dies zu erreichen. Dazu wird Cloud benötigt. Du hast eine gewisse Flexibilität. Mein Endergebnis ist ziemlich einfach. Ich möchte, dass Sie mein Logo als Teil des Designs direkt hier präsentieren . Wie Sie sehen können, handelt es sich hier um einen Hin- und Her-Prozess , der typisch ist, wenn Sie es mit einem KI-Modell zu tun haben, und er ist Teil der strategischen Interaktion mit dem KI-Modell. Sie können jedes Mal die Ergebnisse erzielen, die Sie bevorzugen , und zwar ganz nach Ihren Wünschen. Claude führt einfach den Prozess durch und schaut sich die eigentlichen Dateien hier an. Und wie Sie hier sehen können, es auf ein anderes Format des Prozesses, und es wird immer noch ein Fehler bei der Formatierung gefunden , weil das Logo der tatsächlichen Farbpalette zu entsprechen scheint , die den Fehler verursacht, was im Moment ziemlich gut zu beheben ist . Warum? Denn wenn Sie dies manuell tun würden , würden Sie den Fehler selbst beheben. Wenn wir also auf einen Fehler stoßen, geben Sie ihn einfach an Claude zurück, damit Claude den Fehler tatsächlich in unserem Namen beheben kann . Jetzt, wie wir hier sehen können, ist es fast soweit. Also werde ich Claude sagen, naja, das Logo sollte genau auf der Seite mit einem kreisförmigen Rahmen platziert werden. Bisher wird das Logo nicht angezeigt. Los geht's. Also jeder Eddor, auf den wir normalerweise manuell stoßen irgendeine Art von Branding-Assets, Ihr Logo, ein anderes Format oder verschiedene Farbpaletten mitbringen Ihr Logo, ein anderes Format und Sie versuchen, sie anzuzeigen, das sind typische Eddors, mit denen jeder Entwickler, jeder Frontend-Webentwickler im Rahmen der Anpassung zu kämpfen haben wird Nun, das müssen wir nicht tun. Indem wir einfach die Taktiken befolgen, die ich Ihnen beibringe, können wir Claude einfach sagen wie er den Anpassungsprozess durchführen soll, und Claude die schwere Arbeit für uns erledigen lassen , was die Bearbeitung des Codes und die Anpassung der Ausgabe angeht, bis wir das endgültige Design erreicht haben , das wir bevorzugen Wie wir sehen können, hat Claude versucht , ein paar Änderungen am Logo zu übernehmen, und ist trotzdem auf das Problem gestoßen das Logo genau an unsere Vorlieben anzupassen Das ist also sehr wichtig. Wie wir hier sehen können, können wir verschiedene Änderungen vornehmen um zu den Ergebnissen zu gelangen , die wir erreichen möchten Also versucht Claude es immer und immer wieder zu reparieren, bis es fertig ist. Siehst du, wie mächtig das ist? Los geht's. So konnten wir alle Iterationen, die Claude durchgemacht hat, direkt vor uns sehen, die Sie normalerweise manuell durchführen würden , um dies zu erledigen, was uns Zeit und den ganzen Aufwand ersparte Und los geht's. Wir können sehen, wie das Logo wunderschön vor uns präsentiert wird. 7. Hinzufügen von Animationen für die Website mit einer Seite: Willkommen zurück. Deshalb haben wir erfolgreich ein schönes Logo als Teil unserer einseitigen Website hinzugefügt. Lassen Sie uns nun weitere Anpassungen hinzufügen, oder? Wir gehen gerade die Frontend-Webentwicklung durch und könnten eine Reihe von Anpassungen vornehmen, durch und könnten eine Reihe von die auf unseren Präferenzen basieren Wie wäre es, wenn ich das bearbeiten möchte , um zum Beispiel mehr Animation hinzuzufügen braut sich etwas Warmes , ich könnte einfach nebenbei einen Screenshot machen, ihn direkt hierher ziehen oder das Element einfach markieren, kopieren und in Cloud einfügen. Ich werde es Cloud sagen. Ich würde auch gerne Animationen hinzufügen. Los geht's. Heben Sie das hervor. Etwas Warmes braut sich zusammen, so dass es sich verwandelt. Nehmen wir an, es kocht etwas Warmes. Los geht's im animierten Stil. Schlagen Sie mehrere Animationen zur Auswahl vor. Los geht's. Das wird Cloud also sagen. Mach weiter. Ich würde das gerne animieren. Ob du eine bestimmte Animation im Sinn hast , liegt ganz bei dir Wenn Sie jedoch verschiedene Optionen durchgehen möchten, während Sie versuchen, das beste Design für Sie, die beste Animation, herauszufinden , wird diese Aufforderung Claude sagen, machen Sie weiter, listen Sie einige Animationen für mich auf, und dann werde ich die finden, die mir am besten gefällt. Welcher Animationsstil passt also besten zu Brewing to Cooking Swap? Weiches Überblenden, Vertikales Rollen, Typ Prior, Blue Morph? Nun, ich könnte es Claude sagen. Ich würde sie gerne alle testen. Zeigen Sie sie also nacheinander interaktiv im Chat an, bis ich bestätige Also, was würde das bewirken? Indem Sie das Wort interaktiv zur Eingabeaufforderung hier drüben , sagen Sie Claude, ich möchte, dass die tatsächlichen Animationen nacheinander angezeigt werden, bevor bestätige, für welche ich mich entscheiden soll, was im Rahmen Ihrer Anpassungen sehr wichtig ist Sie würden gerne sehen, was die besten Optionen für Ihre Website sind , oder Vor allem, wenn Sie versuchen für ein bestimmtes Design inspirieren zu lassen oder sich für ein bestimmtes Design inspirieren zu lassen oder herauszufinden , welche Optionen Sie haben. diese solide Eingabeaufforderung hinzufügen, können Sie es Claude im Chat mitteilen. Zeig mir genau , wie es aussieht. Ich bestätige es, dann kannst du kartografieren. Etwas Warmes kocht. Das ist Option eins. Das heißt Soft Cross Fade. Okay, was gut ist. Schauen wir uns den nächsten an. Ich werde auf Weiter klicken. Los geht's. So können wir die direkte Animation und die Interaktion direkt in der Oberfläche in Cloud sehen und die Interaktion direkt in der Oberfläche in , bevor wir sie auf unsere Website migrieren Es kocht etwas Warmes, und das ist die vertikale Rolle Ich mag diesen noch mehr. Entscheiden wir uns für Option drei. Ich werde auch hier auf Weiter klicken. Im Rahmen der Anpassungsmöglichkeiten. Wie Sie sehen können, können Sie hier Ihrem Design Animationen hinzufügen. Jeder Teil der eigentlichen einseitigen Website nach Ihren Wünschen vollständig angepasst werden. Sie können die Schriftart ändern, die Farbe ändern, einen bestimmten Abschnitt hinzufügen, z. B. die Grafik ändern. Lass uns die Grafik hier ändern. Wenn wir möchten, liegt es ganz bei uns. Also, alles, was Sie als App von Claude sehen, haben Sie die Möglichkeit, es individuell anzupassen . Folgen Sie einfach den Taktiken , die ich Ihnen beibringe. Etwas Warmes braut sich zusammen. Ich denke, dieser ist in Ordnung. Ich werde Claude sagen, fortzufahren. Bei Option drei mag ich beide, drei und zwei. Sie sind ziemlich professionell und passen zum Thema des aktuellen Geschäfts. Also etwas Warmes wird gebraut, wir werden es auf etwas Warmes umstellen, das kocht, richtig Also, wie wir hier sehen können, läuft Cloud gerade die Codierung für die Dateien durch , um die Ausgabe hier auszutauschen. Und jede einzelne Codezeile, wie ich bereits erwähnt habe, können Sie direkt über das Umschaltmenü finden , wenn Sie sie zur weiteren Bearbeitung auf Ihre eigene direkte Website übertragen möchten zur weiteren Bearbeitung auf Ihre eigene direkte Website übertragen Schau dir das an. Etwas Warmes braut sich zusammen. Los geht's. Es führt den Befehl aus und wir können sehen, wie die Änderungen hier beginnen, Gestalt anzunehmen. Lassen Sie uns nun die Ausgabe validieren. braut sich etwas Warmes Es braut sich etwas Warmes zusammen und die Bearbeitung läuft noch Da haben wir's. Hier wird es bestätigt. Sobald es fertig ist, zeigt es uns, dass es mit dem Kompilieren der Ausgabe fertig ist Dann haben wir die Möglichkeit, endlich die Ausführung als Teil einer einseitigen Website zu sehen endlich die Ausführung als Teil . Los geht's. Etwas Warmes kocht, etwas Warmes braut sich zusammen und es wird uns sagen, dass beim Hinzufügen der Animationen alles in Ordnung ist . Und dieselbe Taktik funktioniert für jedes Segment, das Sie hier bei der Bearbeitung dieses bestimmten Segments unterstützen möchten Bearbeitung dieses bestimmten Segments Sie möchten eine bestimmte Animation hinzufügen, um Ihrer eigenen einseitigen Website ein zusätzliches professionelles Aussehen und eine zusätzliche professionelle Atmosphäre zu verleihen Ihrer eigenen einseitigen Website ein zusätzliches professionelles Aussehen und eine zusätzliche professionelle Atmosphäre zu Und Cloud hier verifiziert einfach, ob alles reibungslos und perfekt läuft Also checkt alles aus. Die HTML-Datei ist sauber. Fußzeile, alles ist in Ordnung, Screenreader, bekommt einen stabilen, dann flackernden Satz also, all die Probleme, die Sie normalerweise selbst bei der Frontend-Webentwicklung manuell erledigen würden , Claude hilft Ihnen also, all die Probleme, die Sie normalerweise selbst bei der Frontend-Webentwicklung manuell erledigen würden, mühelos zu umgehen. Und der Code ist fertig. Ich kann einfach auf Herunterladen klicken. Ich könnte es zur weiteren Bearbeitung auf meine Website bringen. Um eine U-Seite auf meiner Website zu erstellen. Wenn ich im Rahmen meines Projekts für dieses aktuelle Geschäft tatsächlich eine vollständige On-Website habe , kann ich eine U-Seite hinzufügen und einfach eine Zoom-Seite öffnen. Die Anwendungsmöglichkeiten sind endlos. Dies ist also eine sehr leistungsstarke Anpassungstaktik, die Sie Rahmen Ihrer Front-End-Webentwicklung über die Cloud hinzufügen können Ihrer Front-End-Webentwicklung über die Cloud 8. Hinzufügen von Grafiken für die Website mit einer Seite: Willkommen zurück. Gehen wir jetzt noch einen Schritt weiter. Nehmen wir an, ich möchte der einseitigen Seite einen lebendigen Reiz verleihen . Ich möchte einige Karten hinzufügen, zum Beispiel als Teil eines Bereichs, in dem unsere Produkte als Teil eines Cafés und einer Bäckerei vorgestellt werden. Wir haben Croissants, wir haben Espressos, wir haben Baguettes. Wir haben Brot, wir haben Lattes und die Liste geht weiter. Deshalb möchte ich diese Produkte hier als Teil von Karten präsentieren diese Produkte hier als Teil von Karten Stimmt das? Also werde ich Claude sagen, einen Abschnitt hinzufügen. Direkt neben dem Datum und der Uhrzeit der Eröffnung wird der Abschnitt umklappbare Karten enthalten, wird der Abschnitt umklappbare Karten enthalten umklappbare Karten denen die folgenden Produkte vorgestellt Zum Beispiel werden wir hier Croissants sagen, wir werden Latte oder Latte sagen Wir werden Espresso sagen. Lassen Sie uns einen einzigen Gegenstand behalten. Los geht's. Dann gehen wir Brot essen und die Liste geht weiter. Dann verstehst du die Idee. Also das wird Claude sagen, los geht's, einen neuen Abschnitt zwischen diesen beiden Abschnitten zu erstellen. Und füge umklappbare Karten hinzu, um diese Produkte widerzuspiegeln. Jeder Frontend-Webentwickler müsste dies tun, wenn er seine Produkte präsentiert Sie präsentieren ihre Dienstleistungen, ihr Projektportfolio ihr Projektportfolio Sie können diese wunderschön animierten ausblätterbaren Karten hinzufügen , was normalerweise eine Menge Zeit in Anspruch nimmt, wenn Sie versuchen, dies selbst zu tun, oder Sie versuchen, über die Website Builder eine fertige Version zu finden , über die Website Builder eine fertige Version Ich zeige Ihnen zum Beispiel die Taktiken, wie Sie sie einfach über die Cloud direkt als Teil der Benutzeroberfläche erstellen können Cloud direkt als Teil der Das ist eine sehr mächtige Anwendung, sehr mächtige Taktik, von der du dich inspirieren lassen kannst, Wir haben also die Möglichkeit zu animieren. Wir haben die Möglichkeit, Logos und bestimmte Funktionen und Bilder nach unseren Wünschen hinzuzufügen bestimmte Funktionen und Bilder nach unseren Wünschen Element an unsere Bedürfnisse anzupassen Dann haben wir die Möglichkeit , Abschnitte hinzuzufügen. Alles, was Sie normalerweise als Teil eines Website-Builders tun könnten , zeige ich Ihnen, wie Sie es über die Cloud tun können. Animationen über Karten hinzufügen neben Abschnitten auch Animationen über Karten hinzufügen, können Sie die Codes genau für die weitere Bearbeitung und Anpassung abrufen . Wenn Sie außerdem wissen, wie man diese Codes verwendet, haben Sie die Flexibilität, dies zu tun, indem Sie den Lektionen folgen, die ich Ihnen beibringe. Und Claude hier hat den tatsächlichen Kontext verstanden , den wir erreichen wollen, und es wird beginnen, hier den Abschnitt aufzubauen. Es läuft durch den Code. Lassen Sie es uns übrigens erweitern, wenn Sie sehen möchten, was vor sich geht. Sobald Sie darauf klicken, können Sie sehen, was Cloud mit den Dateien zu erreichen versucht. Wenn Sie darauf klicken, wird es normalerweise erweitert, aber da es eine Menge Codes ausführt, wird es in dem Moment, in dem wir darauf klicken, nicht direkt erweitert , sondern es einfach direkt hier erweitert. Also ja, wenn es eine Reihe von Codes hintereinander ausführt, kann es einfach zu einer kleinen klickbaren Verzögerung kommen kann es einfach zu einer kleinen , wenn Sie darauf klicken um Ihnen genau zu zeigen, was unter der Haube von Cloud passiert. Und nur ein paar Sekunden, Sie klicken erneut darauf und Sie können die gesamte Codierung unter der Haube sehen , die über die Cloud stattfindet , bis sie die Aufgabe erledigt hat Jetzt können wir die Datei sehen. Es sollte fertig sein. Wir haben es erweitert, indem wir den Schalter auf die linke Seite bewegt haben. Und los geht's. Direkt unter Datum und Uhrzeit, ein Vorgeschmack auf das, was kommt, jeden Morgen frisch zubereitet Croissants, los geht's, HoverTypeK, mit Butter laminiert und gefaltet. Es wurden sogar einige zusätzliche textbasierte Elemente hinzugefügt, um die Idee, die ich habe, zu ergänzen Sehen Sie, wie mächtig es ist, es so aufzubauen, wie ich es Ihnen beigebracht habe, bis zu dieser aktuellen Phase , in ich es Ihnen beigebracht habe, bis zu dieser aktuellen Phase Sie in der Lage sind, ein vollständiges Projekt zu haben, dem Claude Ihnen einen Schub in die richtige Richtung gibt. Ich habe einen Latte, Espresso vom Hand gezapft und gedämpfte Milch bekommen, ausgezeichnetes Brot, Wie Sie sehen können, entwickelt sich unsere einseitige Website. Lassen Sie uns die aktuelle Grafik im Rahmen unserer Anpassung ändern . Ich werde es Claude sagen. Los geht's. Kopiere das und füge es ein. Under, los geht's. Etwas Warmes braut sich zusammen. Es gibt eine Grafik, die ich ändern muss. Mach daraus eine Kaffeetasse. Mit animiertem Dampf , der aus der Tasse austritt. Sie könnten Ihre eigenen einzigartigen Erkenntnisse und Inspirationen hinzufügen , wenn Sie etwas im Sinn haben, aber keine Ahnung haben, wie Sie es programmieren sollen. Folgen Sie der Taktik, die ich Ihnen gerade beibringe, und Sie können sie als Teil Ihres Designs Es geht einfach über die grundlegenden Frontend-Webentwicklungstaktiken hinaus die grundlegenden Frontend-Webentwicklungstaktiken hinaus fügt Abschnitte, Schriftarten, Bilder und Animationen hinzu Nein, Sie können es durch weitere Anpassungen noch einen Schritt weiter bringen durch weitere Anpassungen noch einen Schritt weiter Indem du deine eigene Vision mitbringst und sie innerhalb der Aufforderung zusammenfügst, Claude zu sagen, mach weiter und baue sie für mich auf Also werde ich diese aktuelle Grafik ändern, die nicht zu dem aktuellen Thema passt, das wir haben. Also haben wir alles bis zu diesem aktuellen Stadium animiert, alles bis zu diesem aktuellen Stadium repariert. Alle anderen Elemente sind leicht essbar. Sie sind ziemlich einfach zu bearbeiten. Wenn Sie bis zu diesem aktuellen Punkt durchgehalten haben, werde ich das Design jetzt einfach verbessern, um es zu einem professionellen Frontend-Webentwicklungsergebnis zu machen es zu einem professionellen Frontend-Webentwicklungsergebnis Wie wir hier sehen können, geht Claude gerade das Design durch Um es auf der Grundlage meiner Vision und meiner Vorlieben fertigzustellen . Los geht's Es durchläuft den Code, spart mir Zeit, spart mir Mühe. Unsere fertige einseitige Website entwickelt sich also wunderbar Wir haben das kleine Logo, das Hauptlogo. Wir haben etwas Warmes, das hier kocht. Dann haben wir ein neues Lokal in der Nachbarschaft für gemütliche Vormittage und ziehen die Brotaufstriche raus, also haben wir einen Countdown-Timer Wir könnten das Datum ändern, wenn wir möchten. Dann haben wir ausblätterbare Karten, eine hervorragende Aussage, den Ort, den wir bearbeiten könnten Dann könnten wir ein kleines Formular für die E-Mails haben. Wenn Sie mit dem Aufbau der Website fertig sind, können Sie sie später für die weitere Entwicklung verwenden , wenn Sie dies bevorzugen Wir haben die Platzhalter für die eigentlichen Social-Media-Links und dabei alles im Hinterkopf behalten, was wir derzeit tun, ausschließlich Frontend-Webentwicklung, und der Code ist Wie wir hier sehen können, haben wir den animierten Becher bekommen und die einseitige Website läuft perfekt Zum jetzigen Zeitpunkt haben wir also eine maßgeschneiderte und einseitige Website für hypothetische Unternehmen erstellt und aufgebaut , die von Grund auf jeder Anwendung, die Sie im Sinn haben, zugeordnet werden kann jeder Anwendung, die Sie im Sinn haben, zugeordnet im Sinn haben 9. Bereitstellen Ihrer Single-Page-Website: Und willkommen zurück. Wir haben erfolgreich unsere einseitige Website für die Eröffnung eines hypothetischen Unternehmens erstellt für die Eröffnung , dem es sich um ein Café und eine Bäckerei handelt Wir haben das wunderschöne Design entworfen. Ich habe dir hier die Taktiken zur Anpassung beigebracht angeht , was das Hinzufügen von Animationen, Grafiken und jedem einzelnen Gegenstand Wenn du es ändern möchtest, befolge einfach die Taktiken, die wir behandelt haben, und du hast die Möglichkeit, es zu ändern. Sie können einfach die Daten und Zeiten ändern. Sie können Abschnitte entfernen, wenn Sie sie noch nicht verwenden möchten Sie können beispielsweise Abschnitte entfernen. Sie könnten zum Beispiel die Social-Media-Symbole entfernen . Wenn Sie sie nicht mit sozialen Medien verbinden möchten, liegt es ganz bei Ihnen, oder? Aber du verstehst die Idee. Nehmen wir an, nachdem alle Taktiken befolgt haben, die ich Ihnen beigebracht habe, und Sie Ihre einseitige Website angepasst haben , sind Sie bereit, sie tatsächlich zu veröffentlichen und zu starten. Der beste Weg, dies für einseitige Websites zu tun, ist in der Regel, dass Sie sie für Ankündigungen, Veranstaltungen, Landingpages verwenden , und so weiter, Sie könnten sie in ein paar Sekunden einfach durch Clot starten ein paar Sekunden einfach durch Clot Wenn Sie fertig sind, navigieren Sie hier nach oben und klicken Sie auf Artefakt veröffentlichen Bevor wir es veröffentlichen, können Sie es zu einem Projekt hinzufügen. Dies ist das Projekt, das wir bereits erstellt haben Auf diese Weise haben Sie alles unter einem Dach. Für weitere zukünftige Entwicklungen können Sie einfach in das Projekt einsteigen , alles anpassen beliebigen Code nach Ihren Wünschen extrahieren . Und dann einfach weitermachen, anstatt einfach alles, was wir gemacht haben , jedes Mal von Grund auf neu machen zu müssen. Sie haben also mehrere Optionen , die Sie nutzen können. Sie können sie als HTML-Datei zur weiteren Bearbeitung herunterladen oder ob Sie sie im Rahmen Ihres Hostings zu einer bestimmten Seite hinzufügen möchten Rahmen Ihres Hostings Das liegt ganz bei Ihnen als Teil Ihres Website-Builders. Das liegt ganz bei Ihnen. Sie könnten es dem Projekt für die zukünftige Entwicklung hinzufügen , wenn Sie dies für Ihr Unternehmen regelmäßig tun . Und schließlich, wenn Sie bereit sind, können Sie loslegen und Artifact veröffentlichen Klicken Sie auf Artefakt veröffentlichen und sehen Sie sich das an. Veröffentlichung dieses Artefakts wird es für jeden im Internet zugänglich und möglicherweise in Suchmaschinen sichtbar Es ist eine vollständige Online-Website. Ihr Chat bleibt privat. Das ist der Name des eigentlichen Artefakts. Es wird Indexpunkt-HTML genannt und basiert auf der tatsächlichen Konfiguration der Datei Sobald Sie dann auf Link veröffentlichen und kopieren klicken , können Sie loslegen. Link veröffentlichen und kopieren. Dies ist der eigentliche Link, und er wurde vollständig veröffentlicht. Ich kann die Veröffentlichung einfach nach meinen Wünschen rückgängig machen oder ich kann mir einfach einen Einbettungscode besorgen Wenn Sie einen Webseiten-Baukasten oder einen beliebigen Webseiten-Baukasten verwenden , können Sie, sobald Sie einen Einbettungscode erhalten haben, diese eigentliche Seite direkt als Teil Ihrer bestehenden Website einbetten direkt als Teil Ihrer bestehenden Website Oder wenn es sich um eine eigenständige Seite handelt, kopieren Sie den Link, um ihn mit Ihren Freunden zu teilen. Sie könnten ihn mit Ihren Kunden teilen. Sie könnten es mit Ihren Kollegen teilen. Es liegt ganz bei Ihnen. Und sobald Sie darauf klicken und einfach zur eigentlichen fertigen Seite navigieren eigentlichen fertigen Seite Hier ist die wunderschön gestaltete Website mit ein paar Klicks, richtig, in ein paar Minuten, ohne dass Sie alles von Grund auf neu durchgehen müssen Es ist eine sehr, sehr, sehr leistungsstarke Anwendung , mit der Sie sich inspirieren lassen können, und sie ist Teil der Cloud-Artefakte Sie können also einfach einen oder diesen Link teilen oder Sie können einfach nach Ihren Wünschen zurücknavigieren. Es liegt ganz bei dir. Zum jetzigen Zeitpunkt haben Sie Ihre eigentliche einseitige Website jedoch erfolgreich gestartet . Sie können einfach zurück zur Cloud navigieren, und Sie können genau sehen, was wir bis zu diesem Zeitpunkt im Rahmen des Aufbaus behandelt haben bis zu diesem Zeitpunkt im Rahmen des Aufbaus behandelt Nach dem Start Ihrer Website kehren Sie zu Claude zurück Artifact wurde bereits gestartet Es ist bereits veröffentlicht. Ich kann das einfach bearbeiten und erneut veröffentlichen, oder die Änderungen werden einfach wieder veröffentlicht Ich kann es direkt teilen oder direkt auf der Website platzieren oder den Code auf meine Website kopieren All dies sind Optionen, die Sie problemlos nutzen können. 10. Erstellen Ihrer mehrseitigen Website: Und willkommen zurück. Zu Beginn werden wir eine mehrseitige Website erstellen Wir werden eine Website W erstellen, die aus einer Reihe von eigentlichen Seiten besteht, einer vollständigen Frontend-Webentwicklungsanwendung auf der Website Frontend-Webentwicklungsanwendung Auf diese Weise können Sie Ihre Fähigkeiten in Bezug auf Frontend-Webentwicklung auf ein ganz neues Wir haben bereits das Logo für unsere aktuelle Demonstration, das hypothetische Café und die Bäckerei, sowie Referenzbilder als Teil des Kontextes hinzugefügt für unsere aktuelle Demonstration, das hypothetische Café und die Bäckerei, Referenzbilder als Teil des Wir könnten jede zusätzliche Information hinzufügen , die wir hinzufügen möchten, ein zusätzliches inspirierendes Bild und einen inspirierenden Screenshot, zu dem wir eine inspirierende Notiz haben, die wir eine inspirierende Notiz Die Ideen sind ziemlich endlos. Sie können also all diese zusätzlichen Elemente hinzufügen , wenn Sie möchten, zum Kontext des Projekts. Sie tun das, wir werden mit dem Aufbau unserer mehrseitigen Website beginnen , nicht einer einseitigen Website, sondern einer Reihe von Seiten , einer vollständigen Website , mit der sich viele Unternehmen, viele Fachleute, viele Einzelpersonen entweder täglich beschäftigen oder mit denen viele Unternehmen, viele Fachleute, viele Einzelpersonen mit der sich viele Unternehmen, viele Fachleute, viele Einzelpersonen entweder täglich beschäftigen sie im Rahmen ihres beruflichen Umfelds zusammenarbeiten . Wir werden Claude also sagen, dass er als professioneller Webentwickler auftritt, speziell für Front- und Webentwicklung. daran, dass alle Anwendungen, an denen wir derzeit arbeiten, Frontend-basiert sind, Front- und Webentwicklung Front- und Webentwicklung, bei der Sie mir helfen werden, eine vollständige Website für mein neues Unternehmen, das Mugs Café and Bakery, zu erstellen das Mugs Café and Bakery Verwendung der angehängten Dateien im Kontext als Referenz und Inspiration Die Website sollte Folgendes enthalten. Dies ist der Teil oder die Phase , in der Sie kreativ werden werden werden. Wie würden Sie sich Ihre Website vorstellen? Zum Beispiel würde die Website aus fünf einzigartigen Seiten bestehen, fünf einzigartigen Seiten klar über uns sind, Kontaktseite, eine Bildergalerie und Vorschläge für relevante Seiten, und Vorschläge für relevante Seiten die auf dem Kontext und dem Thema basieren. Alle Seiten sollten vollständig editierbar und anpassbar sein , um Programmierprobleme zu vermeiden, auf die Sie bei zukünftigen Änderungen stoßen könnten bei zukünftigen Änderungen stoßen Jeder Abschnitt oder jedes Segment der Website kann problemlos als Code für die zukünftige Bereitstellung abgerufen für die zukünftige Bereitstellung werden. Wenn Sie planen , Ihre Website beispielsweise zu einem bestimmten Hosting-Anbieter zu bringen , oder wenn Sie versuchen, sie in Zukunft anzupassen, stellen diese schnellen Taktiken sicher, diese schnellen Taktiken sicher dass Sie die richtigen Grundlagen für Ihre Anwendung schaffen, um Probleme in Bezug auf Folgendes zu vermeiden Codierung und mangelnde Flexibilität bei der Ausgabe. Dann sage ich Cloud, mach weiter hier drüben. Ich werde es Cloud sagen, mach weiter. Fügen Sie alle relevanten Eingaben hinzu, die das Design der Website besser und effizienter machen . Dies schafft also die Voraussetzungen für unsere mehrseitige Website. Wir erstellen eine komplette eigene Website für das hypothetische Geschäft, eine mehrseitige Website, oder? Es ist im Grunde genommen für diesen aktuellen Geschäftskontext gedacht , den viele der Lernenden und Studenten finden werden, wenn sie die beigefügten Dateien als Teil des inspirierenden Kontextes für das Projekt verwenden des inspirierenden Kontextes für das Projekt Jede Einschränkung, die Sie hinzufügen möchten, können Sie gerne Eine Voraussetzung für Ihre eigene einzigartige Website, die Sie gerne hinzufügen können. Die Website würde, je nach meiner Präferenz, aus fünf einzigartigen Seiten bestehen, was für viele Websites ein typischer Standard ist. klar über einen Bereich, eine Kontaktseite Bildergalerie und schlagen je nach Kontext und Thema relevante Seiten vor. Wenn Sie möchten, dass Claude Vorschläge auf der Grundlage Best Practices für die jeweilige Anwendung vorschlägt, was könnte zusätzlich gut passen. Alle Seiten sollten vollständig editierbar und für Ihre zukünftige Bearbeitung anpassbar Es ist sehr wichtig, wenn Sie sich mit HTML und CSS auskennen und versuchen, selbst zu programmieren, obwohl die aktuelle Anwendung nur aus Null und keinem Code besteht Sie können den Code verwenden und den Code aus den Ausgaben für Ihre eigenen Vorlieben und Anwendungen extrahieren Ihre eigenen Vorlieben und Anwendungen Jeder Abschnitt oder jedes Segment der Website kann einfach als Code für die zukünftige Bereitstellung abgerufen werden. Wenn ich ein bestimmtes Snippet von der Website extrahieren oder die gesamte Datei für die Website migrieren möchte, oder die gesamte Datei für die Website migrieren möchte die ich mit der Cloud erstellt habe, jeder einzelne Inhalt oder sollte jeder einzelne Inhalt oder Code leicht verschiebbar sein und nicht kaputt gehen, nur weil ich die Cloud verlassen habe. Das ist sehr wichtig, weil Sie so die Beseitigung von Fehlern unterstützen der ganze Aufwand, Dinge von Anfang an zu überarbeiten Jetzt erstellt Claude die Website für uns auf der Grundlage der aktuellen Aufforderung und des aktuellen Kontextes Wie Sie hier sehen können, geht es jetzt um die Details Projekts , das wir eingerichtet haben, alle relevanten Bilder, alle relevanten Designs. Denken Sie daran, dass es für eine mehrseitige Website eine sehr wichtige Komponente gibt, nämlich die Navigation. Wie navigiert man von einer Seite zur anderen. Und in der Regel kann es in einer Phase der Frontend-Webentwicklung ziemlich hektisch sein, dies manuell durchzuführen, da Sie für die Navigation verantwortlich sind für die Navigation verantwortlich Und ich werde Ihnen sehr leistungsstarke Strategien zeigen, wie Sie den gesamten Aufwand beseitigen den gesamten Aufwand , sodass Sie am Ende unserer Anwendung ein vollständiges Frontend-Webentwicklungspaket haben, Sie am Ende unserer Anwendung ein vollständiges Frontend-Webentwicklungspaket haben vollständig für die Website bereit ist Und das Kerndesign läuft hier drüben über eine Cloud. Es verwendet JavaScript, CSS, HTML, einfach um alles aufzubauen , worum ich es gebeten habe. Und sobald Sie auf eines davon klicken, haben Sie übrigens die Möglichkeit zu sehen, in welcher Phase des Codierungsprozesses sich der Code befindet. Auch wenn Sie vielleicht ein paar Sekunden Zeit haben um zu sehen, was vor sich geht, weil Code einfach die Reihe der Codes durchläuft. Hier drüben haben wir zum Beispiel die JS-, die JSON-Dateien, dann haben wir hier die CSS-Dateien und dann haben wir hier auch die HTML-Dateien zum Laufen gebracht. Es werden also mehrere Codes gleichzeitig ausgeführt , um das Design zu entwickeln. Stellen Sie sich nun vor , Sie würden das alleine machen. Manuell, codieren Sie jede einzelne Zeile, damit es funktioniert. Es ist schwierig und es wird Sie viel Zeit und Mühe kosten, dies zu tun. Und wenn Sie einfach die Taktiken anrufen, die ich Ihnen gerade beibringe, können Sie den gesamten Prozess einfach durchgehen Wie wir hier sehen können , ist Claude fast fertig, ist Claude fast fertig, und der Bildschirm wechselt einfach weiter von einem Bildschirm zum anderen, um die Phase widerzuspiegeln, in der sich Cloud als Teil des Kompilierungsprozesses befindet Es baut die gesamte Website hier drüben auf. Es könnte dir zeigen, dass ein Fehler vorliegt. Ich könnte zeigen, dass es immer noch geladen wird. Es könnte dir zeigen. Es wird kompiliert, weil es sich noch in der Aufbauphase befindet, genauso wie Sie es manuell tun würden Sie werden es schrittweise tun. Und wenn Sie auf jede einzelne Phase klicken, können Sie sehen, was gerade vor sich geht und welcher Phase sich die Cloud im Grunde befindet , um Ihnen zu helfen das Tempo für Ihren eigenen, einzigartigen Ablauf festzulegen. Wo befinden Sie sich gerade in der Phase der Website-Entwicklung, wenn Sie bedenken, dass alles, worauf wir die Analyse gestützt haben , auf einem hypothetischen Geschäft basiert Es könnte für Ihr eigenes einzigartiges Unternehmen, für Ihr eigenes einzigartiges Projekt funktionieren für Ihr eigenes einzigartiges Alle Charaktere, alle Elemente sind völlig hypothetisch Zu Demonstrationszwecken, damit Sie sehen, dass es leicht übertragbar und auf Ihre eigene Karriere, auf Ihr eigenes kreatives Unternehmen, auf Ihr eigenes Projekt, auf Ihr eigenes Unternehmensumfeld übertragbar kreatives Unternehmen, auf Ihr eigenes Projekt, auf Ihr eigenes und übertragbar ist, unabhängig davon, in welchem Bereich Sie sich befinden, Sie können etwas daraus lernen, das Ihnen hilft, Ihre Fähigkeiten in der Front-Web-Entwicklung zu verbessern und auf eine ganz neue Ebene in welchem Bereich Sie sich befinden, Sie können etwas daraus lernen, das Ihnen hilft, Ihre Fähigkeiten in der Front-Web-Entwicklung zu etwas daraus lernen, das Ihnen hilft verbessern zu bringen Ebene. Wie wir hier sehen können, baut Claude einfach alle diese Seiten nacheinander auf. Es werden alle Codes für fünf einzigartige Seiten ausgeführt , wobei all diese Anforderungen auf unserer Präferenz basieren. Wir können die Startseite über uns, die Speisekarte, den Galeriekontakt sehen. Es wurde auch hinzugefügt, einen Tisch zu reservieren basierend auf der aktuellen Aufforderung , die ich an Claude weitergegeben habe, schlage etwas vor, das zu unserem Thema passt Und da es ein Café und eine Bäckerei sein wird, schlug Claude vor: Weißt du was? Wie wäre es mit einer Tischreservierung? Seite, was absolut Sinn macht. Das ist also sehr leistungsfähig , denn lassen Sie immer Platz für das KI-Modell, damit es Ihnen einige Ergebnisse zur Verfügung stellen kann, die Sie vielleicht hilfreich finden. Und wie wir hier sehen können, haben wir eine MD-Datei. Alles ist von Grund auf neu aufgebaut. Wir überwachen einfach den Output, anstatt einfach alles von Grund auf neu aufzubauen. Das ist sehr, sehr mächtig. Der Aufbau Ihrer Website ist fertig. Fünf Seiten HTML, CSS, JS, mit Logos, Fotos, was ist zu Hause über uns, Menü, Galerie, Kontakt, Designanleitung, warum es einfach ist, es zu bearbeiten und zu extrahieren CSS in einem Stil. Jeder Abschnitt, jede Seite hat deutliche Unterbrechungen. Hervorragend. Keine gebaute Stufe, kein Framework, ausgezeichnet. Die Readme-Dateien behandeln das Anpassen von Farben. Ein paar Dinge, die es wert sind, vor dem Start erledigt zu werden: Verbinde das Kontaktformular mit Servern und tausche die Platzhalter-Kacheln gegen deine echte Adresse und Fotos Beide sind markiert, ausgezeichnet. Da wir uns also auf die Frontend-Webentwicklung fixieren , ist das für weitere Phasen der Webentwicklung natürlich für weitere Phasen der Webentwicklung jedes Formular oder jede externe Seite, sagen wir, Seiten, die das Ausfüllen eines Formulars erfordern , um Daten zu sammeln, zum Beispiel im Rahmen der Anmeldung für Dies wird als etwas angesehen der Backend-Front-Entwicklung zusammenhängt Und wie ich bereits erwähnt habe, behandeln wir das nicht. Wir konzentrieren uns nur auf die Frontend-Webentwicklung. Als Teil unserer Anwendung. Schauen wir uns das jetzt an. Wir haben eine vollständige ZIP-Datei , die wir einfach herunterladen konnten und die alles enthält, all diese Seiten. Und das ist übrigens als Teil unseres Designs sehr wichtig . Warum? Weil wir jede einzelne Seite für sich als einen einzigen Code erstellt haben, anstatt einfach alles kompiliert und zusammengefasst zu Jede einzelne Seite könnte für sich selbst angepasst werden. Wir haben also den grundlegenden HTML-Code für unsere Website, oder? Dies ist eine Art Rückgrat dafür. Wir möchten jedoch einige Anpassungsgrafiken hinzufügen , da wir natürlich nicht nur eine einfache HTML-Leinwand für unsere Website verwenden werden . Nein. Jetzt zeige ich es dir nachdem wir das Backbone der Website gesammelt haben, das sind die vollständigen HTML-Dateien, und wir haben den eigentlichen Zip-Ordner für die Website, einschließlich aller Codes. Jetzt werden wir das verbessern und die Website tatsächlich in etwas Vorzeigbares verwandeln, einschließlich Grafiken und Anpassungen 11. Präsentieren der Website für Designanwendungen: Willkommen zurück. Cloud hat also das komplette Paket für unsere Website zusammengestellt. Es enthält alle HTML-Codes. Und sobald Sie die Zip-Datei für die Website heruntergeladen haben, haben Sie alle Codes, die Sie verwenden können, wenn Sie versuchen, diese als Teil Ihres Website-Builders zu laden. Das ist jedoch nicht das Ziel , das wir erreichen wollen. Wie ich bereits erwähnt habe, verwenden wir Claude für die vollständige Frontend-Webentwicklung Obwohl dies eine vollständig einsatzbereite Website ist, werde ich Ihnen von A bis Z die Taktiken zeigen, wie Sie alles als Teil der Cloud erledigen können Wir haben die Website also erfolgreich erstellt, richtig Wir haben die HTML-Codes. Jetzt sagen wir Claude, dass wir die Website brauchen. Sie darf nicht so gebaut werden, dass sie extern verwendet wird. Nein, ich möchte, dass alles in der Cloud angezeigt, angepasst, bearbeitet und vollständig sichtbar ist. An der Fong-Eingabeaufforderung möchte ich also, dass die erstellte Website hier in der Benutzeroberfläche vollständig angezeigt wird, einschließlich der Farben, des Logos, der Designs usw. Also das wird Claude sagen, großartig. Wir haben den Output für die Website. Ich möchte es jedoch nicht extern verwenden , indem ich alles herunterlade , um es extern zu bearbeiten. Nein, ich möchte alles intern als Teil der Benutzeroberfläche sehen Teil der Benutzeroberfläche weil es im Rahmen der Analyse für Claude versuchen wird, uns die Arbeit so schnell wie möglich zu erledigen , indem es einfach all diese separaten HTML-Dateien herunterlädt . Ich könnte sie zu einem Website-Builder bringen und die ZIP-Datei herunterladen, die alle erforderlichen Anpassungen enthält, die CSS-Dateien, was eher ein fortgeschrittener Frontend-Webentwickler beim Erstellen einer Website verwenden würde . Wie ich bereits erwähnt habe , versuchen wir jedoch nicht, das zu erreichen Wir versuchen, die manuelle Interaktion zu minimieren, und wir versuchen, die Automatisierung durch die Cloud für die Frontend-Webentwicklung zu erhöhen die Automatisierung durch die Cloud für die Frontend-Webentwicklung Durch das Hinzufügen der folgenden Eingabeaufforderung wird Cloud die Lösung erneut erstellen, direkt in der Benutzeroberfläche hier drüben . Sie zeigt mir all diese Seiten, all diese verschiedenen Designs, all diese verschiedenen Elemente, die auf der Analyse und dem Projektkontext und dem Thema und der Aufforderung basieren Projektkontext und dem Thema und der , die wir Claude gegeben haben Wie wir hier sehen können, extrahieren Sie also den Hauptinhalt jeder Seite. Es durchläuft den Code es uns zuvor zur Verfügung gestellt hat , baut die Seite zusammen, setzt alle HTML- und CSS-Dateien Wie Sie sehen können, erledigt es die Arbeit des Webentwicklers, der normalerweise all diese Dateien nimmt und die Website mit diesen Das gibt Ihnen also eher eine Zwischenstufe, eher eine Art Zwischenstufe dafür wie leistungsfähig Ihre Anwendung sein kann, oder? Wie wir sehen können, wurde die Website erfolgreich gestartet, ohne dass ich alle Komponenten der Datei herunterladen und sie dann zu einem Website-Builder weiterleiten und einfach die Website starten oder die Website erstellen muss ich alle Komponenten der Datei herunterladen und sie dann zu einem Website-Builder weiterleiten alle Komponenten der Datei herunterladen und einfach die Website . Nein, wenn ich die Taktik befolge, kann ich zwei Ziele erreichen Halte jede einzelne Datei für mich bereit. Ich könnte sie alle herunterladen. Wenn Sie beispielsweise einen Webentwickler haben, können Sie die Dateien an den Webentwickler weitergeben, können Sie die Dateien an den Webentwickler weitergeben für zukünftige Änderungen bearbeitet, oder wenn Sie die Anwendung im Rahmen Ihres Website-Hostings und Website-Builders selbst ausführen können die Anwendung im Rahmen Ihres Website-Hostings und Website-Builders selbst Ihres Website-Hostings und Website-Builders , können Sie sie verwenden Oder nicht, wenn Sie nicht in eine Anwendung eintauchen möchten , bei der eine Datei, die einen Code enthält, extern verschoben wird, ist das völlig in Ordnung Ich zeige Ihnen alle Taktiken, denen Sie folgen könnten. Indem Sie Claude einfach sagen , dass er das jetzt tun soll, haben Sie eine vollständige Website, die fertig ist. Schauen wir uns das an. Schau, wie professionell das ist. Wir haben uns tatsächlich eine vollständige Website besorgt, die in verschiedene Segmente und Komponenten unterteilt ist . daran, dass Sie als Teil der ersten Ausgabe von Claude möglicherweise auf Fehler stoßen, Teil der ersten Ausgabe von Claude möglicherweise auf Fehler stoßen, was grundlegend ist, was normalerweise völlig in Ordnung ist und über das sich keine Sorgen machen müssten. Ich versuche gerade zu bestätigen , dass Cloud die Website tatsächlich auf der Grundlage meiner Präferenzen erstellt. Also haben wir den Header hier drüben, dann haben wir die Navigation. Wenn Sie auf die Navigation klicken, wird nichts angezeigt, richtig, was ziemlich offensichtlich ist da Cloud die Website zusammenstellt Haben Sie jedoch irgendwelche Eddors, sind nicht erfasste Eddors, auf die das sind nicht erfasste Eddors, auf die Sie manuell stoßen würden. Nein, ich werde Claude sagen, mach weiter, behebe all diese Fehler Aber bevor wir das tun, schauen wir uns all diese Artikel hier an. , wenn ich auf Sachen klicke Was bekommen wir, wenn ich auf Sachen klicke? Los geht's. Wenn ich also zum Beispiel auf Kaffee und Getränke und Speisekarte klicke , haben wir zwar einige Menüüberschriften, aber wir haben keine Umschalt-Funktionen. Das können wir reparieren Dann könnten wir zur eigentlichen Homepage zurückkehren. Übrigens, wenn Sie einmal darauf geklickt haben weil es einen Platzhalter für einen Link enthält, wenn Sie auf Link öffnen klicken, werden Sie nirgendwohin gelangen, da die Seite noch nicht gestartet wurde Die Website ist nicht aktiv. Ich kann auf Tisch reservieren klicken. Okay? Es bringt mich zu dieser Seite hier drüben. Dann könnte ich zur Homepage navigieren. Wir haben hier also ein solides Setup, das eine Feinabstimmung erfordert, richtig? Lass uns auf das C klicken, um das vollständige Menü zu sehen. Dann navigieren wir zur Speisekarte, Kaffee und Getränke, Gebäck und Brot, Frühstück und Mittagessen, saisonal, die wir nach unseren Wünschen bearbeiten können . Wir haben also das tatsächliche Setup eingerichtet. Und falls Sie übrigens das Startbild im Hintergrund bemerken, das ist das Bild, das wir als Teil des Kontextes hinzugefügt haben , was im Grunde Teil des Projekt-Setups ist. Wir haben eine klare Überschrift, die sehr professionell ist. scheint also alles in Ordnung zu sein, es sind jedoch noch ein paar Änderungen erforderlich, wie wir aus dem heutigen Fall sehen können, einige Favoriten Wie wir sehen können, ist dies für die Galerie, aber da wir keine Bilder haben, los geht's Wir haben keine Bilder als Teil der Galerie platziert. Aus diesem Grund können wir keine Bilder sehen , da wir die eigentliche Website für die Integration mit zusätzlichen Bildern erstellen. Lassen Sie uns nun noch einen Schritt weiter gehen. Ich gehe zu Ta Claude, repariere alle Fehler auf der Website und stelle sicher Bilder aus dem Projektkontext und den Stellen, an denen Bilder hinzugefügt werden können, aufgenommen sie mit einem Platzhalter beschriftet werden. Das ist also die erste Ausgabe , die wir für die mehrseitige Website erhalten, was übrigens großartig ist, weil wir alle Dateien haben Claude die Dateien für die Website direkt anzeigt. Und als Teil des Prozesses müssen wir dieses Menü nicht selbst erstellen, sobald Sie auf Integrationsfehler stoßen . Sag Claude einfach: Mach weiter, behebe all diese Fehler und stelle sicher, dass die Website voll funktionsfähig ist. Als Teil der Entwurfsphase werden wir natürlich nicht einfach ein fertiges Ergebnis vom ersten Durchlauf haben , vor allem, wenn dies Ihre erste Interaktion mit Claude ist. Nein, wir werden die Basisausgabe haben , wie wir hier sehen können. Jetzt beheben wir die Fehler, was sehr wichtig ist, um sicherzustellen , dass alles einwandfrei funktioniert. Wie wir sehen können, hat Claude hier einen Fehler gefunden Er versucht, die gesamten Fehler im Code durchzugehen , was Sie tun müssen. Manuell, um sicherzustellen, dass die Website voll funktionsfähig ist. Wenn Sie die Taktiken berücksichtigen, die ich Ihnen beibringe , können Sie die Website weiter anpassen. Nehmen wir an, Sie haben ein bestimmtes Bild , das Sie hinzufügen möchten, oder ein bestimmtes Symbol, das Sie platzieren möchten, oder einen bestimmten Menüpunkt, den Sie ersetzen möchten. Alles, was Sie direkt in Claude tun können basierend auf den Taktiken, die ich Ihnen gerade beibringe. Wir gehen das also als Teil von Etappen durch. Jetzt entfernen wir alle Fehler in der aktuellen Phase, um sicherzustellen, dass alles einwandfrei läuft. Und ich sage Claude, dass er alle Ressourcen nutzen soll , die ich zur Verfügung gestellt habe. für Ihre eigene Anwendung Wenn Sie für Ihre eigene Anwendung die Zeit für die Interaktion mit Claude minimieren möchten , können Sie es Claude einfach mitteilen oder dem Kontextsegment des Projekts weitere Bilder, mehr Dateien und mehr kontextuelle Details hinzufügen mehr kontextuelle Details Kontextsegment des Und dann wird Claude einfach in der Lage sein, all diese Details recht schnell und effektiv auszufüllen Schauen wir uns das jetzt an. Jetzt schauen wir uns die Website hier an. Nochmals, die Zip-Datei. Wir haben die Seite von selbst bekommen. Das Live spiegelt alle Details wider, dieselbe Navigation, dieselben Farben. Alles ist perfekt an seinem Platz. Okay, schauen wir uns das vom Koffer von heute an, Favoriten im kompletten Menü. Gut. Dies ist das grundlegende Rückgrat für die eigentliche Website. Es ist jedoch nicht vollständig , da wir die Navigation hinzufügen müssen . Das ist einer. Dann haben wir die Möglichkeit , die anderen Elemente hier zu bearbeiten, z. B. die Reservetabelle oder unser Menü, die weitere Anpassungen erfordern. Jetzt, in der aktuellen Phase, sind wir bereit, uns mit der weiteren Verbesserung und Anpassung unserer Website zu befassen der weiteren Verbesserung und . 12. Website-Navigation und -Bearbeitung: Und willkommen zurück. Deshalb haben wir erfolgreich die Stiftung für die Website ins Leben gerufen. Wir müssen jedoch einige Änderungen vornehmen. Wir müssen die Navigation integrieren, um sicherzustellen, dass sie voll funktionsfähig ist, oder? Wir haben also die Codes. Wir haben Claude gesagt, mach weiter, führe die Codes in Claude aus, um die Website zu sehen. Gehen wir nun eine Ebene weiter. Wir werden Claude sagen, dass er sicherstellen soll, dass die Navigation voll funktionsfähig ist. Das ist einer. Das Menü zeigt alle Seiten korrekt und das Menü verlinkt ordnungsgemäß auf die betreffende Seite. Das ist das Erste , was wir tun müssen. Los geht's, nur um sicherzustellen, dass wir die richtige Navigation eingerichtet haben , bevor weitere Änderungen vornehmen, um sicherzustellen, dass die Website voll funktionsfähig ist Was würde das also bewirken? Das wird Claude sagen, mach weiter. Natürlich haben wir anhand der aktuellen Website festgestellt, dass ich jedes Mal, wenn ich auf etwas klicke , nicht die vollständige Navigation sehe. Ich möchte, dass die Dinge auf diese Weise vollständig dargestellt werden können Wenn ich hier auf einen bestimmten Menüpunkt klicke, kann ich ganz einfach von einer Seite zur anderen navigieren ganz einfach von einer Seite zur anderen Das ist also sehr wichtig. Übrigens, sobald wir damit fertig sind, werde ich Ihnen zeigen, dass es bei der Anzeige der Ausgabe aus der Cloud einen sehr wichtigen Bereich gibt, dessen Sie sich sehr, sehr bewusst sein müssen, nämlich die Erweiterung hier, denn wenn Cloud die eigentliche Website erstellt, Ihnen manchmal verschiedene Versionen angezeigt , die auf Mobilgeräten oder Desktops basieren. Wenn ich also sehen muss, dass alles vor Ort voll funktionsfähig ist, werde ich es vollständig erweitern , um zu bestätigen, dass alles aufgebaut wurde. Und sobald ich hineingezoomt habe und beispielsweise feststelle, dass das Menü aufgrund der Handygröße nicht funktioniert, werde ich Claude sagen, stellen Sie sicher, dass die Website auch für Mobilgeräte funktioniert, nur um sicherzustellen, dass Sie die Website an jedes Gerät anpassen können, mit dem Sie es zu die Website an tun haben. Dies ist ein Profi-Tipp für Fortgeschrittene. Bleiben Sie dabei. Wenn Sie Cloud erstellen, versuchen Sie immer, sobald Sie mit dem Design fertig sind, es zu erweitern, um das Layout vollständig zu sehen das Layout vollständig denn wenn Sie die Abmessungen und die Größe ändern, wie Sie hier sehen können, beginnt sich das tatsächliche Layout zu ändern, oder? Das Menü beginnt sich zu ändern, die Anordnung für den Text beginnt sich zu ändern. Sie also immer daran, dass einige Funktionen bestimmten Geräten abhängen können. Das ist also Teil Ihres Entwicklungsprozesses. Es ist sehr einfach. Einfach durch eine Codezeile teilen Sie Cloud mit einer Aufforderung mit, sagen Sie Claude, machen Sie weiter und stellen Sie sicher, dass das Gerät auf dem Handy und auf dem Desktop funktioniert. Das ist es hauptsächlich. Es ist also nichts Kompliziertes, sondern etwas, das Sie bei der Erstellung Ihrer eigentlichen Website im Hinterkopf behalten das Sie bei der Erstellung Ihrer eigentlichen Website im Hinterkopf sollten. Wie wir hier sehen können, bitten wir Claude, die Navigation zu bestätigen. Es geht darum, einen Blick auf die Navigation zu werfen, um sicherzugehen, dass alles den Anforderungen entspricht, die wir haben. Es geht also darum, sich die Schritte anzusehen, um sicherzustellen, dass alle vorherigen Seiten, die wir erstellt haben, etwa fünf Seiten, ordnungsgemäß verlinkt sind, und ich werde Ihnen zeigen, wie wir bestätigen können, dass alles in Ordnung ist. Es durchläuft also den Prozess. Es könnten Fehler auftreten. Und wenn Sie hier drüben echte Probleme beim Umschalten auf dem Handy sehen können. Es hat das Problem mit Mobilgeräten selbst identifiziert. Indem Sie es einfach sagen, fahren Sie fort und stellen Sie sicher, dass die Navigation ordnungsgemäß funktioniert. Es läuft durch die Codes. Es hat das herausgefunden, weißt du was? Basierend auf Mobilgeräten funktioniert das möglicherweise nicht richtig. Basierend auf dem Desktop funktioniert es möglicherweise ordnungsgemäß. Das ist mir also durchaus bewusst , und durch den Prozess hat Claude es geschafft, es selbst zu identifizieren. Also habe ich Ihnen den Tipp gegeben, ich habe Ihnen den professionellen Rat gegeben, aber behalten Sie ihn gleichzeitig im Hinterkopf, denn Claude hilft Ihnen einfach, dieses Hindernis standardmäßig zu umgehen. Aber als jemand, der Cloud professionell nutzt , sollten Sie, sobald Sie mit der Erstellung Ihrer Website fertig sind, sie immer auf die vollen Abmessungen der Website erweitern die vollen Abmessungen der , um alle Funktionen zu sehen , und dann sagen Sie Cloud, sie mit Mobilgeräten kompatibel zu machen. Wie wir hier sehen können, versucht Cloud standardmäßig, sie auch mobilfreundlich zu gestalten. Es durchläuft die Navigation, anstatt dies manuell tun zu müssen. Wir bestätigen die Etappen für den Aufbau, ein Level nach dem anderen. Wir haben also den ersten Backbone-Code. Wir haben Cloud angewiesen, ihn innerhalb der Cloud auszuführen, ohne externen Verweis auf einen Webseiten-Baukasten oder die Nutzung eines Webseiten-Baukastens oder Hostings in irgendeiner Form Dann berücksichtigen wir die Navigation und stellen sicher, dass die Navigation als vollständiger Aufbau vor Ort ordnungsgemäß funktioniert als vollständiger Aufbau vor Ort Wir gehen also eine Stufe nach der anderen vor, bis wir eine vollständige , fertige Website haben , die wir nutzen können, und gleichzeitig können Sie sich für Ihre eigene, einzigartige Anwendung inspirieren lassen einzigartige Anwendung Jetzt finalisiert Claude die App hier drüben. Wir können es erweitern, um genau das Setup für die Navigation zu sehen , was Teil des Prozesses ist, genauso wie Sie eine Website entwerfen, das Frontend der Website, Sie machen das stufenweise, richtig Sie gehen durch den Aufbau, Sie gehen durch Abschnitte, Grafiken, Navigation, und das braucht Zeit Aufbau einer voll funktionsfähigen Website dauert ein paar Wochen Aufbau einer voll funktionsfähigen Website dauert ein Und durch die Integration von Cloud können Sie es auf 2 Minuten bis maximal eine Stunde reduzieren 2 Minuten bis maximal eine Stunde wenn Sie sich mit den Taktiken vertraut machen, die ich Ihnen beibringe. Jetzt finalisiert Cloud die App hier drüben. Und wir sind fast fertig mit der Navigation für unsere Website Denken Sie immer daran, sicherzustellen, dass Claude die Aufgabe zuerst erledigt, bevor Sie zum Ergebnis übergehen Jetzt schreibt es die eigentlichen Funktionen. Es entwirft die Navigation, um sie zu validieren. Sie können die verschiedenen Phasen des Aufbaus sehen verschiedenen Phasen des Aufbaus Natürlich müssen Sie im Rahmen der Entwicklung der Website, der Frontend-Webentwicklung, der Frontend-Webentwicklung, manchmal Texte hinzufügen Sie müssen einige Referenzen für das Design hinzufügen, für das Projekt, an dem Sie gerade arbeiten die Taktiken, die ich Ihnen beibringe, geben Ihnen die Fähigkeiten, sich durch jedes Projekt zu navigieren, mit dem Sie es zu tun haben und das Frontend-Webentwicklung erfordert Sobald wir also mit der Navigation fertig sind, gehen wir zu einer anderen Ebene über, was bestätigt, dass wir das Rückgrat, die Funktionalität der Website, haben die Funktionalität der Website Die Navigation funktioniert. Wir müssen es jedoch stärker anpassen. Wir müssen einige Funktionen hinzufügen, einige Animationen, was Teil jeder Front-End-Webentwicklung ist Also kompiliert Claude jetzt das Endergebnis und das Endergebnis und lädt die eigentliche Vorschau damit wir genau bestätigen können, dass die Navigation funktioniert Und wie ich bereits erwähnt habe, denken Sie immer daran, dass das Ergebnis, sobald Sie das Ergebnis erhalten haben, immer in voller Form erweitert Durch die Umschaltoption hier drüben , um das endgültige Ergebnis zu sehen. Und wenn Sie dann die Größe angepasst haben und zum Beispiel feststellen, dass etwas nicht funktioniert, können Sie es Claude Confirm sagen Funktioniert es auf dem Handy oder nicht? Funktioniert es auf dem Desktop oder nicht? Und wenn Claude Ihnen die Bestätigung gibt, dann ja, es kann sein, dass Sie mit der Benutzeroberfläche, die Sie haben, eingeschränkt sind, aber es ist eine Vorsichtsmaßnahme, um sicherzustellen, dass Ihre Website auf mehreren Geräten funktioniert Nun, die Cloud hier drüben bestätigt die Navigationslogik. Alles funktioniert einwandfrei. Dann musste ich richtig wiegen, aber ich habe festgestellt, dass ein echtes Verhärtungsproblem im Inneren eines Sandkastenrahmens auftreten kann Es durchläuft also den Iterationsprozess , den es normalerweise im Rahmen der Fehlersuche und gegebenenfalls der Behebung von Fehlern durchführt Falls es sich um einen Fehler handelt, der sich auf die Ausgabe auswirkt, werde ich ihn beheben Wenn es keine negativen Auswirkungen hat, wird es einfach umgangen, was Sie auch manuell tun würden Wir erwarten also das endgültige Ergebnis hier. Und wie wir sehen können, hat sich das Ergebnis umgedreht, und ich gehe davon aus, dass die Cloud es sofort bestätigt , dass es einsatzbereit ist Bestätigt, dass die Navigation funktioniert. Mein Test musste nur richtig wiegen. Okay, wir haben das Problem bereits angesprochen. Schauen wir uns den aktuellen Befehl an, der in der Vorschau ausgeführt wird. Jetzt ist die gesamte Navigation verifiziert. Ich ziehe es immer vor, etwas zu erweitern, um zu sehen, was sich unter der Haube verbirgt, was in den verschiedenen Phasen der Analyse passiert . Das ist ein Profi-Tipp. Ich rate dir, es durchzugehen, weil es dir sagt, in welchem Stadium sich Claude befindet, und falls du etwas findest oder entdeckst, das du nicht bevorzugst, kannst du es direkt ansprechen. Schauen Sie sich das Feedback von Claude an. Alles scheint ziemlich in Ordnung zu sein. Es hat dabei einen Fehler gefunden und ihn behoben. Außerdem habe ich die Zip-Datei fertig gemacht, einschließlich aller Codes, fertig. Es wird dies weiterhin bereitstellen. Je mehr wir die Datei aktualisieren, desto mehr iterieren wir die Datei, wie ich bereits erwähnt habe, weil Sie sich damit als Teil eines Projekts befassen damit als Teil eines Projekts Bei jeder zukünftigen Bearbeitung oder Ergänzung, Aktualisierung oder Änderung an Ihrem aktuellen Projekt können Sie Claude symbolisieren, weitermachen, die vollständige Zip-Datei auf der Website aktualisieren und sie mir schicken Ich nehme es. Und dann können Sie es in einen Homepage-Baukasten verschieben. Sie können es auf Ihr eigenes Hosting verschieben anstatt dies jedes Mal von Grund auf neu tun zu müssen . Schauen wir uns nun die endgültige Ausgabe an. Hier gehen wir rüber. Jetzt werde ich das Hauptmenü umschalten, die Funktionen erweitern und los geht's. Wunderschön, oder? Wir haben die Abo-Seite. Hervorragend. Schauen Sie sich das Bild an, das Teil des Projektkontextes ist. Eine Geschichte wurde hinzugefügt. Los geht's, wie es gemacht wird. Lernen Sie das Team kennen, zufällige Personen, hypothetische Namen, hypothetische Situation, hypothetisches Projekt Dennoch ist es wunderschön gestaltet. Schauen Sie sich zum Beispiel die Galerie an, schauen Sie sich das an. Dies sind übrigens die Bilder, die wir als Teil des Kontextes hinzugefügt haben. Wenn Sie sich das ansehen, fügen Sie hier ein Foto hinzu, fügen Sie hier ein Foto hinzu. Es gibt uns Platzhalter, um genau anzugeben, was einige gute Vorschläge sind Die als Foto markierten Titel sind Platzhalter. Fügen Sie Ihre Bilder herunter und Sie können sie austauschen Leistungsstark. Seite „Kontaktieren Sie uns“. Los geht's. Wir haben ein Formular. Das könnten wir später für den Inhalt verwenden , zum Beispiel, wenn Sie ein zusätzliches Formular oder einen Platzhalter dafür haben, könnten wir das korrigieren. Das ist völlig in Ordnung Dann schauen Sie sich auch die Galerie an. Das haben wir gesehen. Das ist das Kaffee-, Bäcker- und Café-Leben. Wenn Sie bestimmte Aufnahmen aus dem Café über uns haben. Das ist eine meiner Lieblingsseiten Mix, Proof, Shape, Core, Bake. Dies sind Ergänzungen, die Claude aufgrund der hinzugefügten Aufforderung vorgeschlagen Claude aufgrund der hinzugefügten Aufforderung die zum Thema passen, oder? All dies sind also wichtige Details. Wie wir sehen können, wurden lediglich einige hypothetische Namen für hypothetische Mitarbeiter bereitgestellt , die wir einfach nach unseren Vorlieben und Werten ändern können , kommen und Hallo sagen, Kontakt aufnehmen können, was, glaube ich, Teil der Kontaktlos-Seite ist . Schauen wir uns das an. Los geht's. Hervorragend. Die Navigation funktioniert einwandfrei. Nach Hause, wir gehen zurück, reservieren einen Tisch. Bevor wir einen Tisch reservieren, schauen wir uns das an. Ein paar Lieblingssachen, Sauerteig vom Land, Buttercroissont, Tassen, Hauslatte, Buttercroissont, Tassen, Hauslatte, ausgezeichnetes Ca-Komplettmenü. Wunderschön, oder? Wir haben den Kaffee. Wir haben das Gebäck. Wenn ich das ein bisschen zur Seite scrolle, wenn ich hier drüben klicke, falls du es merkst, haben wir unser Menü, oder? Wir haben unser Menü als Teil einer mobilen Ansicht im Vergleich zu einer einfachen Desktop-Ansicht angezeigt, was ein großes Plus ist. Es ist eine großartige Ergänzung, um sicherzustellen, dass alles gut ausgerichtet und in Ordnung ist gut ausgerichtet und in Ordnung Auf der Seite Über uns wird alles gelöscht. Wir können das Logo des tatsächlichen Ortes sehen, hypothetische Teammitglieder vom Ofen bis Dies ist einfach ein fiktiver hypothetischer Fall leicht Ihrer eigenen einzigartigen Situation zugeordnet Diese Bilder, die als Teil des Kontextes für das Projekt zur Verfügung gestellt wurden , wurden für den Aufbau der Website verwendet Die Homepage sieht toll aus. Wir haben die aktuellen Lieblingskoffer, die Preise aus dem Menü extrahiert, unsere Geschichte anhand der bereitgestellten Bilder, die Anfahrtsbeschreibung sowie, falls Sie eine Art Kartenfunktion hinzufügen möchten, schauen Sie sich die Fußzeile an. Alles ist großartig Lass uns mit der Navigation experimentieren , wenn ich auf Kontakt klicke. Und ja, los geht's. Wir gehen auf die Kontaktseite. Und wenn ich mir dann die Seite Über uns ansehe, ja, sie funktioniert auch. Wir landen auf der Seite Über uns. Wenn ich mir die Speisekarte, das Gebäck und das Brot ansehe , ja, los geht's. Claude im Hintergrund, wie ich schon erwähnt habe, repariere das. Saisonal. Los geht's. Gruppenbesuch planen, Tisch reservieren. Klicken Sie auf Reservieren. Ja. Geh zurück zum Menü. Los geht's. 13. Hinzufügen von Animationen für die mehrseitige Website: Und willkommen zurück. Und wir haben zum jetzigen Zeitpunkt die Navigation für unsere Website erfolgreich eingerichtet die Navigation für unsere Website und getestet, ob alles einwandfrei funktioniert. Und die Einrichtung der Navigation ist übrigens ein sehr zeitaufwändiger Prozess. Wenn Sie wie ich versucht haben, dies manuell zu tun, wenn Sie das Frontend einer Website entwickeln, könnten Sie leicht verschiedene Links und verschiedene Segmente unterbrechen , ganz zu schweigen davon, zwischen der mobilen Ansicht und der Desktop-Ansicht zu wechseln , und die Liste geht weiter Und durch die Integration von Cloud, genau wie ich es mit Ihnen teile, konnten wir den gesamten Aufwand umgehen und bei diesem wunderschönen Design landen, das voll funktionsfähig ist und die Navigation Alles ist perfekt aufeinander abgestimmt. In dieser aktuellen Vorlesung werde ich Ihnen nun beibringen, wie Sie einen meiner Lieblingsteile für die Frontend-Webentwicklung jeder Website anwenden meiner Lieblingsteile für können, nämlich die Anpassung Oft sind wir durch Themen begrenzt. Wir haben keine Ahnung, wie man programmiert, oder wir haben keine Ahnung, wie man mit CSS oder HTML umgeht, ganz zu schweigen von kaputten Dingen. Jetzt zeige ich Ihnen, wie wir den gesamten Prozess einfach umgehen können , indem wir die Cloud integrieren. Wenn wir uns also die Website ansehen , die wir bis zu diesem Zeitpunkt erstellt haben, werden Ihnen die Lektionen, die ich mit Ihnen teilen werde, und die Taktiken helfen, sich inspirieren zu lassen. Sie werden feststellen, dass Sie die Möglichkeit haben, verschiedene Anpassungen nach Ihren Wünschen zu integrieren Ihren Wünschen Dinge zum Auftakt. Nehmen wir zum Beispiel an , ich möchte als Teil der Homepage hier eine Art Animation hinzufügen Animationen gelten als eine sehr leistungsstarke Ergänzung für jede Website, oder? Wie wäre es, wenn ich die Hauptüberschrift hier haben möchte. Irgendwas brodelt immer auf Tassen. Wir werden eine Art dynamische Animation hinzufügen , in der das Wort brodelt Nehmen wir an, wir gehen zum Kochen, Kochen und Brauen über. Auf diese Weise ist es etwas Interaktiveres. Also werde ich Claude sagen, dass ich der Überschrift eine dynamische Animation hinzufügen möchte. Und dann habe ich übrigens zwei Möglichkeiten. Entweder kopiere ich es und füge es so ein, wie es ist, und setze es in Anführungszeichen, Claude wird es verstehen, oder eine meiner bevorzugten alternativen Optionen ist Claude wird es verstehen, oder eine meiner bevorzugten alternativen Optionen ist einfach, dass Sie einen Screenshot von dieser Website oder Ihrer eigenen Website machen können . Wenn Sie Ihre eigene Website bearbeiten, einfach einen Screenshot, ziehen Sie ihn per Drag-and-Drop direkt als Teil der Benutzeroberfläche und fügen Sie den Befehl hinzu. Das ist sehr mächtig. Und noch ein Profi-Tipp: Du hast die Möglichkeit, wenn du den Screenshot ziehst, Cloud mitzuteilen, mir den Code, die HTML-Datei, zu besorgen, die hinter dem Screenshot läuft. Auf diese Weise haben Sie die Möglichkeit, dies zu tun, wenn Sie einen Ausschnitt nehmen ihn beispielsweise auf Ihrer Website platzieren und ihn beispielsweise auf Ihrer Website platzieren möchten Es ist ein sehr wichtiger Tipp, den Sie beachten sollten. Deshalb möchte ich der Überschrift eine dynamische Animation hinzufügen. Bei Tassen brodelt immer irgendwas, so auch bei köchelnden Flips Aus Kochen wird zum Beispiel Brauen. Und lassen Sie uns noch einen Schritt weiter gehen . Ich werde es Claude sagen. Zeig mir interaktiv die verschiedenen Animationsoptionen. Füge dieses Wort immer hinzu, wenn du es mit Claude zu tun hast. Wenn Sie das folgende Ergebnis sehen möchten, das die Ausgabe direkt im Chat hier drüben ist , im Vergleich dazu, dass das Ergebnis einfach in der Ausgabe widerspiegelt. Sobald du das Wort interaktiv hinzugefügt hast, wird Claude verstehen, dass ich die Ergebnisse hier zeigen muss Und falls die Interaktivitätsoption für Sie nicht funktioniert, bedeutet das, dass Sie zu den Einstellungen gehen und dann Interaktivität aktivieren müssen und dann Interaktivität aktivieren Dies ist ein sehr mächtiger Profi-Tipp , von dem viele keine Ahnung haben, dass er existiert, und ich werde ihn Ihnen beibringen, um Ihnen zu helfen , Ihre Integration von Claude auf ein ganz neues Niveau zu heben Zeigen Sie mir interaktiv die verschiedenen Animationsoptionen, sodass ich die gewünschte Option bestätigen kann , falls Sie keine Ahnung haben welche Art von Animation Sie haben möchten Dies ist eine sehr leistungsstarke Pro-Taktik für Ihre Front-End-Webentwicklung Sie können damit zunächst anpassen und bestimmten Elementen Animationen hinzufügen Und vor allem, wenn Sie eine bestimmte Animation im Sinn haben, diese gerne als Teil des Abschlussballs einfügen Wenn Sie jedoch keine Ahnung haben, welche Art von Animation Sie benötigen oder welche verschiedenen Optionen Sie haben Vielleicht möchten Sie sich für Ihr Design inspirieren lassen, oder Sie möchten sehen , welche Optionen Ihnen im Rahmen der Animationsoptionen am besten zur Verfügung stehen. Im Allgemeinen, wenn Sie damit nicht vertraut sind, das ganze Ziel darin, dass Sie als jemand, der keine Ahnung hat, wie man programmiert, wie man irgendeine Art von Code verwendet, Lage sind, die Frontend-Webentwicklung durchzuführen , ohne dass etwas davon erforderlich Es ist also einfach diese Taktik, die Ihnen hilft, sich inspirieren zu lassen und alle Optionen zu sehen, ohne die Website zu beschädigen Wenn Sie beispielsweise Frontend-Webentwicklung für Ihr eigenes Projekt durchgeführt haben , haben Sie vielleicht bemerkt, dass Sie die Navigation unterbrechen könnten, wenn Sie versuchen, etwas zu bearbeiten , zum Beispiel hier Sie könnten das Setup kaputt machen, Sie könnten das Theme kaputt machen und dann viel Glück dabei haben, stundenlang zu versuchen, die Änderungen, die Sie vorgenommen haben, zu korrigieren Diese Taktik, die folgende Aufforderung, wird Ihnen helfen, alles unter der Cloud-Chat-Umgebung zu halten , Interaktivität hier drüben Sie sind damit einverstanden, Sie bestätigen es und können es dann direkt über die Benutzeroberfläche migrieren direkt über die Benutzeroberfläche Und am wichtigsten ist, dass Cloud standardmäßig, wenn der Befehl ausgeführt wird, einen Blick auf die Schritte werfen, die es ausführt. Es erstellt die Animationen. Es baut die Optionen auf. Sobald Sie jedoch eine Auswahl getroffen haben, wird alles im Rahmen Ihrer Website korrigiert , um sicherzustellen, dass nichts kaputt geht Und dies ist eine der leistungsstarken Integrationen von Claude, da Cloud beim Codieren sehr leistungsfähig ist Es ist also in der Lage, Codes ziemlich schnell durchzugehen, die Codes zu debuggen und sicherzustellen, dass alles einwandfrei funktioniert Schauen wir uns nun die Ausgabe an. Sehen Sie, wie mächtig das ist. Dies ist eine sehr mächtige Pro-Taktik , die Ihnen viel Zeit sparen wird Schauen wir uns die Ergebnisse an. Es braut sich immer etwas zusammen. Da haben wir's. Kochende Becher, ausgezeichneter Kilometerzähler. Okay. Dann gibt es immer etwas Becher köchelt oder kocht, drei-D-Umkippen Dann haben wir Crossfade plus Scale, dann Blur Focus, irgendwas ist immer eine Tasse, Dampferhöhung je Marke. dann Blur Focus, irgendwas ist immer eine Tasse, Dampferhöhung je Marke. Ausgezeichnet. Jede Karte wird direkt im eigentlichen Heldenstil in der Vorschau direkt im eigentlichen Heldenstil in der Hervorragend. Dunkler Hintergrund. Also nimmt es die Elemente genau so auf, wie sie sind. Wie würde es aussehen, und Sie können die Animationen hier sehen. Lassen Sie uns also einfach zu Demonstrationszwecken eine auswählen. Wie wäre es, wenn wir hier drüben Steam Rise machen? Ich werde auf „ Das verwenden“ klicken und mir die Ausgabe ansehen. Simply Cloud bestätigt die Entwurfsanforderung die Animationsanforderung und führt dann den Code aus, um dieses bestimmte Segment zu aktualisieren. Das ganze Ziel dieser Vorlesung besteht also zunächst darin, diese neue Taktik und diesen neuen Tipp zu lernen, aber gleichzeitig zu verstehen, dass Sie nicht nur auf solche Bearbeitungen beschränkt sind nicht nur auf solche Bearbeitungen beschränkt Nein. Sie können es verwenden, um den Text hier zu animieren Wir können es verwenden, um bestimmte Schaltflächen zu animieren, zum Beispiel um bestimmte Elemente zu animieren So können Sie sich inspirieren lassen, diese Taktik zu erlernen und auf Ihre eigene Situation anzuwenden können Sie im Rahmen Ihrer Frontend-Webentwicklung viele Türen öffnen Rahmen Ihrer Frontend-Webentwicklung Und die Taktik, die ich Ihnen gerade beibringe , die Interaktivität, wird selbst von professionellen Cloud-Benutzern oft übersehen Es ist eine sehr mächtige, spezifische Taktik. Denken Sie daran, Sie müssen zu den Einstellungen gehen und diese Und dann erwähnen Sie in der Eingabeaufforderung hier das Wort interaktiv Das ist sehr wichtig, denn dadurch wird Cloud mitgeteilt, , bevor Sie etwas hierher migrieren ich möchte, dass Sie mir die Ergebnisse als Teil der Benutzeroberfläche korrekt vor mir zeigen als Teil der Benutzeroberfläche korrekt vor Und sobald ich eine Auswahl getroffen habe, werden Sie sie migrieren, und standardmäßig implementiert Cloud die Designausgabe und stellt dann sicher, dass die Datei erstellt wird die Designausgabe und , und führt Tests durch, dass nichts kaputt geht. Alles ist perfekt funktionsfähig. Fühlen Sie sich übrigens frei. Wenn Sie an Ihrer eigenen Website oder Ihrem eigenen Design arbeiten, nehmen Sie sich einfach Website oder Ihrem eigenen Design arbeiten, einen Moment Zeit und versuchen Sie, sich inspirieren zu lassen, Ihre eigene Website zu erstellen oder anzupassen. Oder wenn Sie eine Website von Grund auf neu erstellen. Wenn Sie versuchen, Ihre eigene Website anzupassen, könnten Sie dies tatsächlich tun Dies ist eher ein professioneller Schritt für Fortgeschrittene. Sie können Ihr aktuelles Design übernehmen. Sie können beispielsweise einen Screenshot Ihrer Website machen und ihn zu Claude hinzufügen und ihn von Claude für Sie erstellen und für Sie anpassen lassen. Dann können Sie Claude bitten, Ihre HTML-Datei zu erhalten, und dann können Sie diese HTML-Datei kopieren und zum Beispiel wieder in Ihren Website-Editor einfügen. Das ist etwas für Frontend-Webentwickler , die sich mit dem Programmieren auskennen Wie ich bereits erwähnt habe, sind die aktuelle Praxis , die aktuelle Vorlesung, die aktuellen Lektionen auf Sie zugeschnitten, für jemanden der keine Ahnung hat, wie man programmiert, aber wenn Sie gleichzeitig mit Programmieren experimentieren möchten, können Sie dies auf sehr rationelle und systematische Weise tun sehr rationelle und systematische Dies ist also sehr wichtig jeden, der entweder an seiner Website arbeiten oder eine neue Website erstellen möchte , sei es für Ihr eigenes Projekt, für Ihr eigenes Unternehmen oder für Ihren eigenen Kunden. Diese Taktiken, die ich Ihnen beibringe helfen Ihnen, viel Zeit und Mühe zu sparen. Schau dir den Apu Bado an, wie du siehst, Claude, vergewissere dich, dass alles läuft Und je mehr Änderungen wir vornehmen, was würden Sie anhand der Konfiguration, die wir vorgenommen haben, feststellen , dass Claude die Website tatsächlich erneut verpackt, einschließlich der HTML-Datei und des vollständigen Pakets auf der Website, einschließlich der neuesten Ergebnisse Das ist sehr wichtig, denn als Teil des Setups möchtest du, wie ich bereits erwähnt habe, immer wieder zu dem zurückkehren , was du gerade tust, oder? Sie müssen nicht alles von Grund auf neu erstellen. Und wenn Sie diese Taktiken befolgen , sagen wir, einen Monat später, können Sie einfach zu Ihrem Projekt zurückkehren und sich die neueste Ausgabe ansehen, einige Änderungen vornehmen, die Ausgabe verfeinern, sie exportieren und erneut verwenden Schauen Sie sich die App hier an. Und los geht's. Wir haben uns eine wunderschön aussehende Animation speziell nach unseren Wünschen hinzugefügt , ohne etwas von der eigentlichen Website zu beeinträchtigen, was sehr wichtig ist. Und nehmen wir an, ich würde gerne zu einem anderen Design wechseln, oder? Also würde ich einfach raufgehen und mir das Feedback hier ansehen. Dann sagen wir, ich habe meine Meinung geändert. Dann entscheide ich mich für dieses Design hier drüben. Klicken Sie auf Dieses Design verwenden. Los geht's. Seien Sie vorsichtig, bevor Sie diese Aufforderung ausführen. Bösartige Konversationsinhalte könnten Cloud dazu verleiten , schädliche Aktionen auszuführen. Nun, das ist ein automatischer Uput, der standardmäßig einfach erscheint , wenn Sie versuchen, etwas zu reparieren, das Sie bereits generiert haben . Es passiert zu der Zeit. Das ist völlig okay. Das ist kein Problem. Wir werden also erwähnen, dass Sie stattdessen die Kilometerzählerfolie verwenden, Animation für die Überschrift des Helden. Fügen Sie stattdessen einfach das Wort hinzu und wir werden den Code erneut ausführen Das zeigt Ihnen also, dass ich die Möglichkeit habe , eine Auswahl zu treffen und die Datei zu aktualisieren. Und als ich mir dann die Ausgabe hier ansehe, mir aufgefallen, naja, sie sieht gut aus, je nach Marke. Ich würde jedoch gerne sehen, ob die verschiedenen Animationen besser zu meinen Vorlieben passen . Und wenn ich das manuell selbst machen würde, könnte ich die Datei beschädigen. Möglicherweise muss ich viel Zeit damit verbringen , das vor und nach dem Vergleich zu überprüfen, und ich habe keine Referenz beziehen könnte, falls zum Beispiel etwas kaputt geht. Viele von uns, die versucht haben, dies manuell zu tun , waren mit solchen Problemen konfrontiert. Wenn Sie also hier drüben feststellen, wird Claude die grundlegende Eingabeaufforderung erneut ausführen. Es repariert die Animation und aktualisiert die gesamte Datei, aktualisiert die gesamte Datei ohne dass ein Eingreifen erforderlich ist. Denken Sie einfach daran, dass Sie die Möglichkeit und die Möglichkeit haben , im Hintergrund weiterzuarbeiten. Wenn Sie eine andere Aufgabe erledigen, fügen Sie einfach die Eingabeaufforderung lassen Claude die Dekodierung und Bearbeitung übernehmen Und wenn es fertig ist, können Sie darauf zurückgreifen , um sich die Ausgabe anzusehen Und los geht's. Schau dir das an. brauchte ein paar Sekunden Claude brauchte ein paar Sekunden, um einfach alles in Ordnung zu bringen. Und wie Sie sehen können, ist dies die neueste Version. Los geht's. Wir konnten also einfach zu dieser aktuellen Animation wechseln , bei der es sich um die Anzeige des Kilometerzählers handelt ein paar Klicks können wir also die gesamte Codierungsstruktur für die Website ändern, um die Animation zu integrieren, ohne dass irgendeine Codierung erforderlich Und diese Taktik gilt für jedes Segment Ihrer Website, das Sie erstellen möchten, wenn Sie etwas animieren möchten Nehmen wir an, ich möchte diese Karte hier animieren. Ich möchte diesen Text hier animieren. Sie sich gerne inspirieren, um Ihre Bewerbung auf ein ganz neues Niveau zu 14. Hinzufügen von Grafiken für die mehrseitige Website: Und willkommen zurück. Wir haben die Animationen also erfolgreich als Teil unserer Anforderungen erstellt, und das ist etwas, das wir auf verschiedenen Teilen der Website abbilden könnten . In dieser aktuellen Vorlesung werde ich Ihnen nun zeigen, wie wir einige Grafiken hinzufügen könnten. Nehmen wir an, Sie möchten einige Grafiken hier oder in einem anderen Teil der Website hinzufügen , hier zum Beispiel, oder in einem anderen Bereich, alles ist möglich. Sie können sich inspirieren lassen, sich auf Ihre eigene Situation zu bewerben . Lassen Sie mich Ihnen nun ein paar Tricks zeigen wie Sie Ihrer Website Grafiken hinzufügen können. Ich werde Claude sagen, dass ich dem Hauptheldenbereich ein paar animierte Grafiken hinzufügen ein paar animierte Grafiken möchte. Und der Heldenbereich, das ist im Grunde das, was wir hier den Heldenbereich nennen, oder? Neben der Schaltfläche , um einen Tisch zu reservieren. Übrigens müssen Sie nicht die vollständige Beschreibung durchgehen. Wie ich noch einmal erwähnt habe, machen Sie zum Beispiel einen Screenshot der genauen Position hier drüben und beschriften Sie ihn dann auf ein Blatt Papier, auf eine Serviette oder auf die Software, die Sie möchten Sie können die Änderungen, die Sie vornehmen möchten, schreiben und einfach diesen Screenshot machen, das Stück Papier nehmen, die Serviette nehmen, was auch immer Sie bearbeiten, und es dann Claude zuordnen Bearbeiten Sie es, ziehen Sie es hierher, aber ich zeige Ihnen den einfachsten Ansatz durch eine textbasierte Also sage ich Claude, ich möchte hier nebenan eine Grafik hinzufügen , um einen Tisch zu reservieren. Und ich hätte gerne ein paar Optionen. Also werde ich Claude sagen, dass er ein paar interaktive Grafiken hinzufügen soll . Los geht's. Nur um sicherzugehen, dass Claude es versteht, würde ich sie gerne zuerst sehen, bevor wir sie migrieren. Hier in der Benutzeroberfläche, los geht's. So erhöhen Sie Ihre Eingabeaufforderungen, die im Hauptbereich für Helden neben der Schaltfläche zum Reservieren eines Tisches animiert werden im Hauptbereich für Helden neben der Schaltfläche zum Reservieren eines Tisches Außerdem könnten wir das Hinzufügen konkreter gestalten. Los geht's. Mit beiden Eingabeaufforderungen erhalten Sie also Ergebnisse Wenn ich jedoch möchte, dass es ganz spezifisch ist ich die Interaktivität hier bestätige, kann ich die Grafiken sehen Ich möchte mir einige Optionen ansehen bevor ich sie migriere. Claude wird also das Thema, den Kontext und den Aufbau, den wir bis zu diesem aktuellen Stand erarbeitet haben, analysieren den Kontext und den Aufbau, den wir bis zu diesem aktuellen Stand erarbeitet haben, und einige wichtige oder nützliche Grafiken vorschlagen, die zu dem hypothetischen Fall passen, mit dem wir es einige wichtige oder nützliche Grafiken dem hypothetischen Fall passen, mit dem zu tun haben, richtig? Wir haben ein Projekt hinzugefügt. Es ist ein kontextbasierter Ansatz. Wir haben Dateien, wir haben Elemente, die hinzugefügt werden müssen. Claude ist derzeit gut genug geschult , um genau sagen zu können, was wir tun mussten, und einige wichtige Elemente vorschlagen zu können. Schauen Sie sich diese animierte Grafik mit Brainstorming-Ideen zum Thema Bäckerei an. Sie ist sehr mächtig , weil sie uns sagt, dass Claude auf derselben Wellenlänge ist wie wir, was wir zu tun versuchen Los geht's. Schau dir die an. Tisch jetzt geöffnet. Wir haben einen Live-Indikator. Das ist sehr nett. Wir haben eine Tasse, eine Tasse. Wir haben täglich einen frischen. Wir haben einen Tisch reserviert. Schauen Sie sich diese leistungsstarken, leistungsstarken Ergänzungen als Teil der Grafik an. Also, je nach meiner Präferenz, sagen wir, wenn wir einen Tisch reservieren wollen, möchte ich diese Funktion hier hinzufügen. Also werde ich Claude sagen, mach weiter, füge diese Funktion hinzu. Am pulsierenden „Jetzt öffnen“ -Statusschild neben der Schaltfläche „Tisch reservieren Es ist also eine sehr schöne Animation, und falls ich möchte, ist es eine sehr schöne Grafik, die animiert ist Wenn ich etwas anderes testen möchte , ohne die eigentliche Seite kaputt zu machen, was normalerweise manuell passiert, würde ich einfach zurückgehen, darauf klicken, das benutzen und Claude sagen, es stattdessen zu verwenden. Oder ich könnte Claude einfach sagen, nun, zeig mir mehr Optionen, wenn ich zusätzliche Optionen haben möchte , um die beste Lösung für meine Anwendung zu finden . Aber das sind sehr schöne Grafiken , die Sie normalerweise selbst erstellen müssen , wenn Sie den Code schreiben , um sie tatsächlich als Teil Ihrer Website zu integrieren. Cloud repariert also gerade den Code, HTML, CSS, alles sollte vorhanden sein, um diese Grafik zu integrieren, um unsere Fähigkeiten in diese Grafik zu integrieren, um der Frontend-Webentwicklung zu verbessern und sie auf ein ganz neues Niveau zu heben und sie auf ein ganz neues Niveau zu Wie Sie hier sehen können, führt Claude einfach die Befehle durch, was uns Zeit und Mühe spart, und Sie können sehen, welche Phase der Codierung gerade durchläuft Mühe spart, und Sie können sehen welche Phase der Codierung Wie ich bereits erwähnt habe, müssen Sie bei den Anwendungen, denen wir folgen, nicht wissen, wie man etwas programmiert. Folgen Sie einfach den Taktiken, die ich Ihnen beibringe, und Sie können die Arbeit als professioneller Frontend-Webentwickler mit einer Menge Taktiken und Fähigkeiten erledigen mit einer Menge Taktiken und Fähigkeiten , damit Sie sich bei der Frontend-Webentwicklung von der Masse abheben Schauen wir uns nun die Ergebnisse an und los geht's. Die Tische sind jetzt geöffnet. Sehen Sie, wie mächtig das ist. Es ergänzt das Design auf graue Weise. Über uns fügen wir eine weitere Grafik , um das Design noch weiter aufzuwerten Ich werde es Claude sagen. Wenn ich einen Tisch reservieren möchte, platziere ich ihn zum Beispiel neben oder in der Menüleiste. Also werde ich es Claude sagen. Lass uns das benutzen. Los geht's. Ich werde bei meiner Aufforderung jedoch etwas konkreter sein. Fügen Sie die Animation des dampfenden Bechersymbols hinzu, nicht neben der Schaltfläche „Tisch reservieren Nein, aber ich werde es in der Menü-Schaltfläche „Unsere Ansicht“ korrigieren der Menü-Schaltfläche „Unsere Ansicht Das ist Teil deiner kreativen Reise, oder? Bei der Frontend-Webentwicklung wird von Ihnen erwartet, dass Sie dabei kreativ werden Und ich zeige Ihnen die Taktiken, genauso wie ich sie normalerweise anwenden würde, wie ich mich durch die Interaktion mit Claude manövrieren werde durch die Interaktion mit Ich fand das sehr hilfreich. Dann wurde mir klar, naja, mir hat diese Grafik gefallen. Ich möchte es nicht einfach überspringen, und es passt perfekt nicht neben den Reservetisch, sondern Teil unserer Speisekarte, oder? Das ist etwas, was Sie normalerweise manuell tun würden. Oder wenn Sie zum Beispiel in einem Unternehmen arbeiten, haben Sie ein Meeting, um das Layout und die Präsentation zu besprechen , und wir sind in der Lage, all dies durch die Taktik, die ich Ihnen beibringe , so schnell und effektiv wie möglich zu integrieren in der Lage, all dies durch die Taktik, die ich Ihnen beibringe , so schnell und effektiv wie . Nun, meinen Erwartungen entsprechend, werden wir Claude bitten, diese Tasse in den Button zu stellen , über den Sie unsere Speisekarte ansehen können, und los geht's. Sehen Sie, wie leistungsstark das Design ist. Voll dynamisch, voll professionell und es entspricht unseren Anforderungen erstklassig In der aktuellen Phase haben Sie also gelernt , Grafiken als Teil Ihres Designs hinzuzufügen, und das funktioniert auf jeder Ebene jeder Seite oder jeder Phase Ihrer eigentlichen Website, oder? Sie könnten einfach zur Kontaktseite und zur Seite Über uns navigieren . Galerie, was auch immer es ist, und Sie können diese Taktiken anwenden, um Grafiken als Teil Ihres Designs zu integrieren. Und wie ich bereits erwähnt habe, haben wir von Claude die Bestätigung erhalten , dass die Website fertig ist, und das Design wurde fertiggestellt Wir haben die Grafiken für die inzwischen geöffneten Tische hinzugefügt und wir haben eine animierte Tasse hinzugefügt, um die visuelle Präsenz unserer Website weiter zu verbessern 15. Siteweite Schriftarten-Sweep: Willkommen zurück. Nehmen wir nun an, ich möchte die Schriftarten für die gesamte Website ändern und modifizieren. Nehmen wir an, ich durchlaufe gerade den Designprozess und habe festgestellt, dass ich je nach meinen Anforderungen gerne unterschiedliche Schriftarten haben möchte. Nun, obwohl die Schrift perfekt zur Marke passt , würde ich gerne verschiedene Schriften testen, um zu sehen, welche die Essenz des aktuellen Projekts am besten widerspiegelt, sei es für Marketingzwecke, für Ihre eigene Inhaltserstellung, und die Liste geht weiter. Also gehe ich zu Claude. Ich würde gerne verschiedene Schriften für die gesamte Website testen . Zeige hier interaktive Beispiele im Chat an, sodass ich die gesamte Schriftauswahl der Website bestätigen kann. Was würde diese Aufforderung also bewirken? Zuallererst sagen wir Claude, was mein Ziel ist, als Teil einer soliden Taktik der Prompt-Engineering-Taktik. Und wenn Sie dann das Wort Interaktivität hinzugefügt haben, immer daran, dass Sie das Wort interaktiv verwenden Das wird Claude sagen: Weißt du was? Zeigen Sie hier zuerst die Ergebnisse an. Es ist eine sehr mächtige Taktik für Fortgeschrittene. Um dir zu helfen, den Saft aus Claude herauszuholen. Im Chat ist das so, dass ich den kompletten Schrift-Sweep bestätigen kann den kompletten Schrift-Sweep bestätigen Und ich habe den kompletten Schriftwechsel erwähnt, weil er Claude dadurch sagen wird, was das Endziel ist Sobald ich alles bestätigt habe, wirst du alles als Teil der Website aktualisieren Die gesamte Website wird komplett bearbeitet und aktualisiert, anstatt dass ich das einfach manuell machen muss. Schau dir das an. Schauen Sie sich die Ausgabe an. Los geht's. Wir haben die Schriftbeschriftungen, die aktuelle ist die aktuelle Schrift. Dann haben wir die verschiedenen Optionen. Los geht's. Sie können übrigens den Namen der Schrift sehen. Wenn Sie ein Marketingprofi sind, Sie sind Branding-Spezialist, Sie sind in der Lage, die tatsächlichen Schriftnamen und die Schriftpaarung zu verstehen , und übrigens, Claude wird verstehen, welche Schriften am besten zu dem aktuellen Team passen , mit dem wir zusammenarbeiten Jede Karte wendet die Paarung auf echte Inhalte auf Ihrer Website an. Sehen Sie, wie mächtig das ist Ich kann mir genau die Schriften ansehen, die ich verwenden könnte, und Claude versteht, dass diese Schriften zusammengehören, und was bedeuten sie? Sie können also jede davon richtig durchblättern. Und dann können Sie eine Auswahl treffen. Dann tippen wir auf „ Verwenden Sie das“ oder „Behalten Sie das“, um an Ort und Stelle zu bleiben, und ich werde es seitwärts auftragen Also werde ich die Schriftart auswählen , die meinen Vorlieben entspricht Wählen wir eine davon aus, um sicherzustellen, dass alles richtig ausgerichtet ist Basierend auf der aktuellen Marke finde ich diese ziemlich nett. Also werde ich den hier benutzen . Da haben wir's. Dieser. Klicken Sie auf US Does, ändern die Schriftarten der Website auf Lib und dann auf Nunito. Also werde ich diese Kombination zusammen haben , Liber und Nonito als Und genau das ist das Design eines einzigen Bedienfelds, das sich auszahlt Ich muss mich nur ändern. Los geht's. Ein Element und Cloud ist in der Lage, die gesamte Website zu verwischen. Wenn Sie also die Taktiken bis zu dieser aktuellen Phase anwenden, bei jeder Bearbeitung, sei diesem aktuellen Zeitpunkt oder in der Zukunft, wann immer Sie zu Ihrem laufenden Nebenprojekt zurückkehren, können Sie bei jeder Bearbeitung, sei es zu diesem aktuellen Zeitpunkt oder in der Zukunft, wann immer Sie zu Ihrem laufenden Nebenprojekt zurückkehren, einfach auf das Projekt springen und eine Bearbeitung in ein paar Minuten, wenn nicht sogar Sekunden, durchführen , anstatt den gesamten Prozess von Grund auf neu zu durchlaufen Am Anfang kann es also einige Zeit dauern, bis Sie diese aktuelle Phase Sobald Ihr Projekt jedoch läuft und weitere Änderungen vorgenommen werden, sind es nur ein paar Sekunden bis zur endgültigen Ausgabe Jetzt durchsucht Cloud einfach die gesamten Schriftarten für die Website und tauscht unter der Haube von Claude alle erforderlichen Codes aus, um das Design und die Schriftanzeige für die Website zu ändern Schriftanzeige für die Und Sie können jede Schriftart verwenden , die Sie sich vorstellen. Sie müssen sich übrigens nicht einfach auf die Vorschläge von Claude verlassen die Vorschläge von Claude Wenn Sie jetzt Ihre eigenen Schriftarten haben oder bestimmte Schriftarten als Teil Ihrer eigenen aktuellen Website verwenden, können Sie sie einfach zur Eingabeaufforderung hinzufügen und Claude kann sie direkt der Ausgabe zuordnen. Claude führt den Befehl hier und wir können sehen, dass alles erfolgreich und systematisch aktualisiert wurde . Wir warten auf die Bestätigung und los geht's. Wir haben die neueste Ausgabe unserer Website erhalten, und wie Sie sehen können, wurden die Schriftarten aktualisiert. Das ist sehr professionell. Das ist sehr elegant, und Claude war in der Lage , all diese Ergebnisse ganz einfach abzubilden, oder? Und wir können den klaren Unterschied zwischen dem Vorher und dem Nachher erkennen . Durch den Hauptbereich mit den Helden hier drüben können wir direkt erkennen, dass die Schrift komplett geändert wurde. Und ich könnte Claude einfach fragen, ob die gesamte Website ihre Schriftart geändert hat. Einfach ausgedrückt. Es ist eine sehr einfache Aufforderung. Die Seite hat ihre komplette Schriftart geändert. Dies bestätigt also , dass Claude im Rahmen einer Bestätigungsprüfung nichts verpasst hat . Bestätigen Sie also, dass die gesamte Site ihre Schriftart geändert hat. Es ist eine sehr einfache Aufforderung, sehr direkt. Auf diese Weise wird Claude Claude genau sagen, wonach wir suchen. Falls du es hier drüben als Teil des Schecks feststellst, tu das übrigens immer. Wenn Sie etwas als Teil eines KI-Tools ausführen, einschließlich Claude, sollten Sie immer das Endergebnis bestätigen , denn am Ende des Tages, raten Sie mal, was. Ein KI-Tool macht unterwegs Fehler. Sobald Sie also diese zusätzliche Sicherheitsabfrage hinzugefügt haben, stellen Sie sicher, dass die gesamte Website ihre Schriftarten geändert hat. Schauen Sie sich das an habe ein kleines loses Ende für die eigentliche Datei gefunden, basierend auf den alten Schriftarten Ich habe irgendwo einen Kommentar gefunden Es ist rein beschreibend. Lassen Sie mich die Vorschau überprüfen, um dann den berechneten Stil zu überprüfen Es wird also eine zusätzliche Vorsichtsmaßnahme erforderlich sein, falls hier oder da etwas im Rahmen des Fehlens fehlt . Wenn wir uns das also ansehen, bestätigt sich, dass die gesamte Website jetzt in derselben Schriftart ist, die ich ausgewählt habe So wurde das KI-Modell überprüft, nicht nur Augapfel. Großartig. Ich habe dir die Schritte zur Bestätigung gezeigt. Dies gibt Ihnen eine weitere Ebene der Zuverlässigkeit bei der Ausgabe, anstatt sich einfach jede einzelne Schriftzeile für sich ansehen zu müssen. Sie können die Taktik anwenden und dann das KI-Modell die Ausgabe im Falle von Fehlern genau bestätigen lassen, und Ihre Aufgabe wäre es, sie einfach zu überprüfen und auf sehr systematische Weise zu bestätigen 16. Bilder hinzufügen: Und willkommen zurück. Lassen Sie uns nun unsere Fähigkeiten in der Webentwicklung Frontend-Webentwicklung durch die Verwendung von Stoff auf ein ganz neues Wenn Sie mit einer Website zu tun haben, insbesondere aus geschäftlicher und kreativer Sicht, müssen wir normalerweise einer Website zu tun haben, insbesondere aus geschäftlicher kreativer Sicht, müssen wir Dateien hinzufügen, oder? Hin und wieder. Wenn Sie sich zum Beispiel erinnern, Rahmen unseres Aufbaus haben wir im Rahmen unseres Aufbaus eine Galerie erstellt Das ist also etwas Typisches für jeden kreativen Menschen. Sie arbeiten an Ihrem Portfolio, Sie präsentieren Ihr Unternehmen oder Sie arbeiten als Teil eines Unternehmens Sie möchten Ihre Produkte präsentieren. Dieser aktuelle Vortrag soll Ihnen helfen, sich inspirieren zu lassen und Ihnen zu zeigen, wie einfach es ist, Ihre eigenen, einzigartigen Eingaben hinzuzufügen und die Website mit ein paar Klicks zu aktualisieren. Im Rahmen der Vorbereitung des Projekts haben wir zunächst einige kontextuelle Eingaben als Teil des anfänglichen Aufbaus hinzugefügt einige kontextuelle Eingaben als Teil des Falls Sie jedoch feststellen sollten, dass wir hier zum Beispiel bestimmte Platzhalter für zukünftige Ergänzungen im Rahmen des Website-Aufbaus eingerichtet haben für zukünftige Ergänzungen im Rahmen des Ich könnte ein Foto hinzufügen, zum Beispiel einen Esstisch oder ein Esszimmer, ein weiteres von Claude empfohlenes Foto, frische Croissants, ein Foto hinzufügen, über den Riegel gießen, ein Foto hinzufügen, über den Riegel gießen An der Theke bei der Eröffnung, Stammgäste in der Gemeinde Das ist sehr mächtig und alle passen perfekt zu einer Bäckerei und einem Café, oder? Sie können all diese Elemente also typischerweise in jedem Café oder jeder Bäckerei sehen , wo Sie frische Croissants Sauerteig haben Sie lassen sich einen Kaffee über die Bar gießen. Du hast dir bei der Eröffnung einen Tresen besorgt. Es ist also sehr, sehr realistisch in dem Sinne, dass wir das Ergebnis bekommen. Wenn ich jedoch etwas Input von meiner Seite hinzufügen möchte , richtig, als Teil der Ergänzung, die ich zu Claude hinzufüge, werde ich zum Beispiel, sagen wir, ich möchte ein paar Bilder hinzufügen , die auf dieser hypothetischen Bäckerei basieren Zum jetzigen Zeitpunkt werde ich Claude also sagen, dass er die folgenden Bilder zur Galerie hinzufügt die folgenden Bilder zur Galerie Einfach ausgedrückt, und Sie können dies gerne auf Ihre eigene einzigartige Situation anwenden. Ich werde zum Beispiel ein Bild von einer Kaffeetasse, ein Bild von Brot, ein weiteres oder ein anderes Bild von Brot hinzufügen Kaffeetasse, ein Bild von Brot, , und Sie können jedes Kontextelement hinzufügen , mit dem Sie Ihre Website aktualisieren möchten Dies könnte Ihr eigenes einzigartiges Kunstwerk sein, Projekte Ihres Unternehmens, die Inspiration und die Ideen sind ziemlich endlos, wenn es darum geht Also gehe ich zu Claude, füge die folgenden Bilder zur Galerie und stelle sicher, dass sie professionell organisiert sind , und entferne alle leeren Platzhalter Nehmen wir an, ich bin mit diesen Bildern zufrieden. Ich benötige keine zusätzlichen Platzhalter. Ich werde Claude einfach sagen, mach weiter, lade diese Bilder als Teil meiner Galerie und alle leeren Platzhalter zu diesem Zeitpunkt, ich sehe nicht, dass sie benötigt Übrigens, falls Sie bemerkt haben, dass Claude das Layout und die Anpassung auf der Grundlage des tatsächlichen Bildes, der Größen, der Schriftarten und der Struktur geändert hat das Layout und die Anpassung auf der Grundlage des tatsächlichen Bildes, der Größen, , um dem tatsächlichen Ergebnis oder der tatsächlichen Ausgabe, die Sie erhalten, den Reiz der Frontend-Webentwicklung zu verleihen Reiz der Frontend-Webentwicklung zu Ergebnis oder der tatsächlichen Ausgabe, die Sie erhalten, den Reiz der Sie können hier nachschauen, die hochgeladenen Bilder überprüfen, überprüfen, welche hochgeladene Datei den tatsächlichen Slots entspricht , die wir haben, oder den Platzhaltern, und Claude wird damit beginnen, die Bilder als Teil der Galerie zu kompilieren, und es muss alle zusätzlichen Elemente entfernen. Denken Sie daran, dass Sie während der Erstellung der Website möglicherweise einige Anmerkungen von Claude sehen werden Sie während der Erstellung der Website möglicherweise einige Anmerkungen von Claude sehen Sobald das Design jedoch fertiggestellt ist, können Sie einfach, Claude, all diese Anmerkungen entfernen Bei den Kacheln, die bei Foto markiert sind, handelt es sich also um Platzhalter. Also sage ich es Claude, weißt du was? Ich will diese Platzhalter nicht mehr haben. Ich bin fast fertig mit meiner Galerie, also brauche ich weder diese Anweisungen noch diese Platzhalter Sehr wichtig, wenn Sie als Teil eines Teams arbeiten, oder? Wenn Sie ein Team von Designern und Frontend-Webentwicklern haben , können Sie diese Anmerkungen ihnen überlassen, ein Foto als Teil der Platzhalter hinzufügen, Ihre eigenen Bilder ablegen und sie dann als Teil hier austauschen Genaue Anweisungen finden Sie in Read Me Das ist sehr effektiv in Designagenturen oder größeren Teams, in denen jemand dort weitermacht, wo Sie aufgehört haben Behalte das also immer so, wie wir hier sehen können, Claude durchläuft gerade den Aufbau der fertigen Galerie, und dieselbe Taktik könnte für jede Branche funktionieren, in der du tätig bist, egal ob du in einer bestimmten Kunstbranche, Bauindustrie, Entwicklung, was auch immer es ist, du kannst diese Galerie-Taktik nutzen um etwas hinzuzufügen und zu präsentieren Ihre Arbeit auf sehr systematische Weise, und Sie können jederzeit darauf zurückgreifen und sie dann Die eigentliche Galerie, indem Sie Eingaben hinzufügen, so wie ich es gerade mit Ihnen teile, können Sie Claude dazu bringen, diese Eingaben zu nehmen und sie systematisch anzuordnen Und Sie haben auch die Möglichkeit, ihr Animationen hinzuzufügen. Anstatt einfach mit der Maus über die Bilder zu fahren, kann ich Claude sagen, wenn ich auf ein Bild klicke, kannst du es in eine Flipcard verwandeln und eine Notiz darauf schreiben, basierend auf den Taktiken, die wir bis zu diesem Zeitpunkt behandelt haben. Das wird dir helfen, dich gleichzeitig inspirieren zu lassen und dich mit den Fähigkeiten auszustatten, mit denen du dich durch dein eigenes Frontend manövrieren kannst Webentwicklung. Wie ich bereits erwähnt habe, bringe ich Ihnen diese Taktiken und Fähigkeiten bei, und Sie können sich inspirieren lassen, sie auf Ihre eigene einzigartige Situation anzuwenden, sei es auf einer bestimmten individuellen Ebene oder einer Kombination davon. Sie könnten hier Grafiken hinzufügen. Sie könnten Animationen hinzufügen. Sie könnten Bilder hinzufügen und dann alles miteinander kombinieren. Claude hier drüben, wie du sehen kannst, flackert die Ausgabe, was darauf hindeutet, dass die Ergebnisse fast fertig Wie Sie übrigens sehen können, wenn wir das manuell machen würden, schauen Sie sich an, wie viel Aufwand wir investieren müssen, um das zu erledigen. Größenänderung, Anpassung, Umbruch, Rahmen, die Liste geht weiter Wenn Sie also dieses Handbuch erstellt haben, ist das keine leichte Aufgabe. Auch wenn es einfach aussieht, ist es nicht. Ich werde dir viel Zeit dafür nehmen. Claude erreicht also die endgültige Phase, die Vorschau validiert wird, wie ich bereits erwähnt habe Sie können dies im Hintergrund laufen lassen wenn Sie an etwas anderem arbeiten Wir sind jedoch fast fertig mit der Ausgabe, und Claude überprüft einfach, ob jedes einzelne Element perfekt ausgerichtet ist jedes einzelne Element perfekt ausgerichtet Das ist eine großartige Ausgabe und ein großartiger Schritt im Rahmen der Frontend-Webentwicklung, denn wenn Sie Bilder oder externe Elemente hinzufügen, neigen Sie normalerweise wenn Sie Bilder oder externe Elemente hinzufügen, dazu, Ihr Thema oder Ihr Layout zu beschädigen. Und viele von uns erleben das. Ich habe das ehrlich gesagt beim manuellen Erstellen einer Website erlebt beim manuellen Erstellen einer Website Wenn Sie ein Bild hinzufügen möchten, brechen Sie plötzlich das Layout und versuchen herauszufinden, was passiert ist, oder die Abmessungen, sie sehen auf dem Desktop ziemlich solide Auf Mobilgeräten gehen sie jedoch kaputt. Also all diese oder hinter den Kulissen, unter der Haube, Fehlerprüfungen, Bestätigungen, Claude geht sie durch, um den gesamten Aufwand zu vermeiden , Dinge hin und her zu reparieren Lassen Sie uns nun die Ausgabe hier untersuchen. Wie wir sehen können, macht Claude wirklich gute Arbeit beim Hinzufügen der Bilder, die ich hinzugefügt habe, um sie in meine Galerie zu integrieren. Wie ich bereits erwähnt habe, nehmen wir das Ergebnis jedoch nicht direkt auf, bevor wir die Bestätigung erhalten haben , dass alles eingerichtet ist Dann beginnen wir damit, die Ergebnisse von Claude zu überprüfen , was sehr wichtig und sehr notwendig ist , um unvollständige Ergebnisse zu vermeiden. den ersten Blick können wir jedoch sehen, dass wir die Bilder hier hinzugefügt haben und Claude sie angeordnet und strukturiert hat, und Claude sie angeordnet und strukturiert hat um sicherzustellen, dass alles ziemlich elegant und professionell aussieht. Und rate mal was? Platzhalter wurden entfernt Die Anweisungen zur Verwendung der Platzhalter wurden entfernt Dies ist ein fortgeschrittener Schritt bei der Fertigstellung Ihres Entwurfs Sie gestalten die gesamte Website. Eine Bemerkung wird entfernt. Und wie Sie hier sehen können, haben wir eine sehr schöne Galerie mit einigen Bildern, die sich auf den Kontext und den hypothetischen Fall beziehen auf den Kontext und den , mit dem wir es zu tun haben, nämlich ein Café und eine Bäckerei Und dann können wir zum Startbildschirm navigieren. Alles ist ziemlich in Ordnung. Wir haben einige Grafiken hinzugefügt. Wir haben einige Integrationen für die Navigation hinzugefügt. Wir haben irgendwelche hypothetischen Menüelemente. Alles sieht ziemlich organisiert und systematisch aus. Übrigens können Sie jedes Element, basierend auf den Taktiken, die ich Ihnen beibringe basierend auf den Taktiken, die ich Ihnen beibringe, nach Ihren eigenen Vorlieben aktualisieren. Und das ist übrigens eine sehr leistungsstarke, elegante Website , von der Sie sich inspirieren lassen können. Wir haben eine mehrseitige Website erstellt. Normalerweise dauert es ein paar Wochen Arbeit, wenn Sie das von Grund auf neu erstellen und sicherstellen, dass Sie programmieren und versuchen, alles auf den neuesten Stand zu bringen und zum Laufen zu bringen, oder? Ganz zu schweigen von den Fehlern, den Unterbrechungen, die passieren Sie versuchen, Dinge hier und da zu aktualisieren den Unterbrechungen, die passieren können, wenn Sie versuchen, Dinge hier und da zu aktualisieren. Nein, wenn wir die Taktik jetzt befolgen, können wir alles als ein einziges Projekt zusammenstellen , auf das wir immer zurückgreifen können. Dies ist eine der wichtigsten Lektionen, die Sie Rahmen des aktuellen Kurses verstehen müssen. Es ist nicht einfach eine einzelne Chat-Interaktion , mit der Sie es gerade zu tun haben. Nein, Sie arbeiten tatsächlich an einem kompletten Projekt, das mit Cloud erstellt wurde. Es ist sehr wichtig, dies zu beachten, denn wenn Sie dies professionell machen, müssen Sie möglicherweise auf Ihr vorheriges Design zurückgreifen einige Änderungen vornehmen Sie müssen irgendwelche Änderungen vornehmen, oder Sie entdecken irgendwo einen Fehler, oder wenn Sie dies professionell als Teil Ihres Unternehmens oder als Teil eines Designstudios tun , erwähnt Ihr Kunde, dass wir ein Update benötigen Sie müssen das nicht jedes Mal von Grund auf neu durchgehen . Nein, Sie haben die Möglichkeit, einfach in das Projekt einzusteigen und alles , was Sie anpassen möchten, auf der Grundlage der Taktiken anzupassen, die Sie bis zu diesem aktuellen Zeitpunkt gelernt haben bis zu diesem aktuellen Zeitpunkt gelernt ist sehr mächtig und bietet Ihnen hervorragende Ergänzung zu Ihren Fähigkeiten in der Frontend-Webentwicklung Wir können hier sehen, dass Claude gerade dabei ist, den gesamten Output fertigzustellen Auf den ersten Blick können Sie jedoch erkennen, dass Claude das Endziel verstanden hat , das wir erreichen wollen Wir haben die Bilder an Ort und Stelle und es ist nur eine Frage von ein paar Sekunden, und es ist nur eine Frage von ein bis Claude die Ergebnisse finalisiert und bestätigt, dass alles perfekt aufeinander abgestimmt ist So können wir genau sehen, wohin Claude geht. Damit ist das eigentliche Ergebnis der aktuellen Lektion vervollständigt , und Sie sind völlig in der Lage, diese Taktiken einfach anzuwenden. Wir haben die Bilder an ihrem Platz, und die Platzhalter sind weg, und meine Galerie ist ziemlich intakt, und ich habe einfach die Möglichkeit , in Zukunft weiterhin Bilder hinzuzufügen oder Bilder meinen Wünschen zu entfernen Sie können also die Taktiken anwenden, diese Taktiken, um externe Elemente als Teil Ihrer Website zu integrieren , egal ob Sie ein bestimmtes Projekt oder ein bestimmtes Bild oder ein bestimmtes Yo oder ein bestimmtes Kunstwerk hinzufügen oder ein bestimmtes Bild oder ein bestimmtes Yo oder , mit dem Sie arbeiten Sie müssen nicht einfach auf den eigentlichen Website-Builder springen den eigentlichen Website-Builder und sie nacheinander laden. Nein, Sie können es mit ein paar Klicks tun . Und los geht's. Dies ist der letzte Umbau, und Claude bestätigt lediglich , dass die Website fertig ist. Auch wenn es ein paar Sekunden länger gedauert hat bis das Ergebnis fertig war, im Vergleich zu, übrigens, ein paar Tagen Arbeit, denn was unter der Haube von Claude passiert, werden Sie feststellen, dass es viele Änderungen vornimmt, um auf der Grundlage der Struktur, der wir gefolgt sind, zu bestätigen, dass das Design fertig ist, weil am Ende jeder Iteration ein dass es viele Änderungen vornimmt, um auf der Grundlage der Struktur, der wir gefolgt sind, zu bestätigen, dass das Design fertig ist , weil am Ende jeder Iteration Teil von Solid Schnelle technische Taktiken, Sie erhalten den aktualisierten Website-Code und das vollständige On-Website-Paket, was sehr wichtig ist. Also all diese Ergänzungen hinter den Kulissen für den HTML-Code, das CSS, das Layout, die Struktur, die Größe und vieles mehr, um das sich Cloud kümmert Zum jetzigen Zeitpunkt sind wir also in der Lage, zusätzliche externe Bilder und Elemente zu integrieren , die über die Cloud in unsere Website integriert werden sollen . 17. Ändern von Website-Design-Designs: Und willkommen zurück. Glaubst du, wir sind fertig? Natürlich nicht. Wir werden Ihre Fähigkeiten im Bereich Frontend-Webentwicklung und KI verbessern und auf ein ganz neues Niveau heben Fähigkeiten im Bereich Frontend-Webentwicklung und KI verbessern und auf ein ganz neues In diesem aktuellen Vortrag werde ich Ihnen einen sehr leistungsfähigen, werde ich Ihnen einen sehr aber oft als problematischer Schritt in der Frontend-Webentwicklung angesehen werden , vorstellen, der das Thema ändert Wenn Sie sich mit Frontend-Webentwicklung befassen , wenn ich das Thema der aktuellen Website ändern würde , werden viele Frontend-Webentwickler häufig davor zurückschrecken, werden viele Frontend-Webentwickler wenn sie sich damit befassen, weil dies ein Rezept ist , um die gesamte Website kaputt zu machen Ich werde Ihnen jedoch jetzt die Taktik zeigen die Taktik Wie wir Claude dazu bringen werden, weiterzumachen und das Thema für die gesamte Website auf sehr strategische Weise zu ändern das Thema für die gesamte Website auf . Ich werde Claude sagen, dass ich das gesamte Thema für die Website ändern möchte . Schlage mir auf interaktive Weise verschiedene Theme-Optionen vor, darunter Farben und Layouts , damit ich vor der Migration das passende auswählen kann, und sicherstellen, dass es sehr wichtig ist, eine Kopie der aktuellen Website zu behalten, damit ich zu ihr zurückkehren kann Was würde das also bewirken ? erstelle ich über Claude ein Backup für meine aktuelle Website, falls ich es wieder extrahieren möchte. Dies ist eine sehr fortgeschrittene Taktik , mit der viele nicht vertraut sind Ich benutze Claude, eher eine Backup-Engine für mich. Und ich sage es Claude, weißt du was? Ich werde mehrere Themen auf der Website untersuchen. Machen Sie weiter, zeigen Sie mir diese Optionen, aber stellen Sie gleichzeitig sicher, dass wir die Arbeit, die wir geleistet haben, beibehalten. Schauen Sie sich das Ergebnis an, damit Claude den Prozess durchläuft und darüber nachdenkt, interaktive Optionen für verschiedene Websites zum Vergleich vorzustellen . Es baut diese interaktive Funktion hier drüben auf. Dann wird es das Ganze speichern, zuerst wird es die gesamte Datei als Backup speichern und mir dann diese Themen zeigen. Beginnen wir also damit, den aktuellen Build zu sichern , damit Sie jederzeit zurückkehren können Dann stelle ich interaktive Themenoptionen zusammen , damit Sie sie vergleichen In der Regel ist das eine ziemlich komplexe Aufgabe. Wenn Sie es aus manueller Sicht betrachten, ist es ziemlich anspruchsvoll. Wenn wir uns also mit einem KI-Modell befassen, ist es in Ordnung, wenn es länger dauert als gewöhnlich, weil die Aufgabe im Vergleich zu gewöhnlich anspruchsvoller ist. Im Grunde genommen, Claude, kann es je nach Aufgabe in Bezug auf die Dauer der Ausgabe variieren. Es kann ein paar Sekunden dauern, manchmal kann es ein paar Minuten dauern, was je nach Build und Aufgabe völlig in Ordnung ist . Schauen wir uns das an. Zuallererst sichern, bestätigt und gespeichert. Wir sind also bereit, zu versuchen, mit verschiedenen Themen zu experimentieren. Lassen Sie uns einen interaktiven Themenvergleich erstellen. Das ist der aktuelle hier drüben. Okay. Dann haben wir einen anderen. Modern, minimalistisch. Ich mag diesen. Wie wäre es mit dem hier drüben? Stimmungsvoll, gehobenes, sanftes Pastell, kühn, zeitgenössisch. Jede Karte zeigt dieselbe Struktur in der Vorschau an. Wir haben jedoch unterschiedliche Themen. Ihr Backup ist also bereits gespeichert. Die aktuelle Warmbäckerei baut alle fünf Seiten auf. Alles ist ganz in der Reihe und mit Reißverschluss versehen, bereit zu gehen. Nehmen wir an, zunächst kann ich Claude sagen, naja, ich mag keinen von ihnen. Mach weiter, schlage andere Optionen vor. Mir gefällt jedoch das aktuelle Thema hier. Also werde ich Claude sagen, mach weiter, benutze das. los geht's. Also das ist sehr wichtig, weil es Claude sagen wird, weißt du was? Ich mag dieses Thema. Machen Sie weiter und renovieren Sie die gesamte Website komplett. Wenn Sie dies übrigens manuell tun würden, laufen Sie Gefahr, dass die Website beschädigt wird Wie ich das mehrfach manuell gemacht habe, reicht es aus, von einem Thema zum anderen zu wechseln, um die gesamte Arbeit zu zerstören , die Sie haben, und viel Glück beim Versuch, die Eddors hier und da zu finden Also umgehen wir die gesamte Option. Wir haben ein sehr schönes Thema ausgewählt und ich sage Claude einfach, mach weiter Ändern Sie das gesamte Arrangement für die aktuelle Website auf der Grundlage des Themas, das ich mir vorgestellt habe, zu integrieren und fühlen Sie sich frei, nebenbei Branding-Elemente basierend auf dem Thema, das Sie haben . Wenn Sie an einer bestimmten Website arbeiten , Ihrer aktuellen Website, können Sie Ihre eigenen Farbpaletten und Ihre eigenen Themeneinstellungen hinzufügen Ihre eigenen Themeneinstellungen Auf diese Weise können Sie Änderungen vornehmen, die Ihre aktuelle Website vollständig nachahmen Schauen wir uns das Feedback von Claude an . Lass uns das richtig machen. Zunächst eine vollständige Prüfung aller Farbreferenz-Stylesheets, genau das, was Sie manuell tun müssen. Claude macht das automatisch. Also geht es all diese Änderungen durch, um sicherzugehen , dass nichts übersehen wird wird alles widerzuspiegeln Übrigens wird alles aktualisiert, um Ihr eigenes, individuelles Thema Und sobald Sie das Thema geändert haben, können Sie die Taktiken anwenden, die wir behandelt haben , indem Sie Grafiken, Animationen und Bilder hinzufügen. Es liegt ganz bei dir. Dies ist also eine sehr leistungsstarke Ergänzung beachten sollten, um Ihnen zu helfen Ihre Front-Web-Frontend-Webentwicklungsfähigkeiten , denn alles, was Sie normalerweise manuell erledigen müssten zu verbessern , denn alles, was Sie normalerweise manuell erledigen müssten, ich Ihnen, wie Sie KI einsetzen können, um es in Ihrem Namen zu erledigen Wenn Sie also keine Ahnung haben, wie man programmiert, ist das völlig in Ordnung Sie sind neu in der Frontend-Webentwicklung. Das ist völlig okay. Sie arbeiten als Teil eines Unternehmens. Sie arbeiten an einem Projekt, Sie arbeiten an einem Unternehmen. Wie dem auch sei, die Taktiken, die ich Ihnen beibringe, werden Ihnen helfen Ihre Fähigkeiten zum Erstellen von Websites zu verbessern, insbesondere die Fähigkeiten zur Frontend-Webentwicklung, da dies der Kern dessen ist, was wir Rahmen der Lektion tun Wie Sie hier sehen können, hat Claude alle Farbpaletten identifiziert und repariert sie oder ersetzt sie durch alternative Farbpaletten je nachdem, was ich bevorzuge. Dies dient lediglich zu Demonstrationszwecken. Ich bevorzuge das aktuelle Thema, die Farben passen perfekt zum aktuellen hypothetischen Geschäft Allerdings müssen Sie die verschiedenen Optionen in Bezug auf das Ergebnis verstehen , das Sie erhalten, denn Sie sind nicht einfach auf das Ergebnis beschränkt, das Sie von Claude erhalten, als ob das nicht Sie haben die Möglichkeit, Ihre eigenen Einstellungen hinzuzufügen , sie zu ändern und zu optimieren, bis Sie das Ergebnis erhalten, das Sie bevorzugen und mit dem Sie sich sehr wohl fühlen Der ganze Zweck besteht darin, dass Sie das Ergebnis erhalten, das Ihre wahre Vision so systematisch wie möglich widerspiegelt so systematisch wie möglich Jetzt, da Claude die Ausgabe finalisiert, werfen wir einen Blick auf die eigentliche Homepage, denn hier sehen Sie normalerweise den größten Schwung in Bezug auf die Änderungen Und wenn ich ein Bild ändern möchte, sagen wir das Hintergrundbild des Helden, könnte ich Cloud einfach sagen: Weißt du was? Ändere dieses Bild. Ich könnte etwas hochladen, wenn ich will. Oder wenn ich eine Grafik im Kopf habe, kann ich sie auf einem Blatt Papier skizzieren. Mache einen Screenshot von meiner aktuellen Website und dann habe ich die Möglichkeit, ihn hochzuladen und Cloud mitzuteilen Weißt du was, füge ihn auch zum aktuellen Build hinzu. Das sind also sehr wirksame Taktiken, die Sie als Teil Ihrer Aktivitäten integrieren können . Lassen Sie uns nun die Phase untersuchen, in der sich Cloud befindet. Wie Sie sehen, ist es definitiv ein großer Build, denn wir aktualisieren ein ganzes Theme, ein ganzes Theme. Und deshalb habe ich dir zu Beginn des aktuellen Kurses gesagt, dass viele Frontend-Webentwickler davor zurückschrecken, dass viele Frontend-Webentwickler davor wenn sie versuchen, weil du keine Ahnung hast, ob das Theme deine Website kaputt machen könnte Wir umgehen jedoch all diese Probleme auf strategische Weise Wie wir sehen können, befinden wir uns in der endgültigen Validierungsphase, und ehrlich gesagt gefällt mir das neue Thema noch besser als das vorherige Das ist sehr elegant, sehr professionell. Wir können sehen, dass alles ziemlich aufeinander abgestimmt ist, und wir haben das fertige Paket hier, den Zip-Ordner , der sofort einsatzbereit ist Und Sie können jederzeit eine Pause einlegen. Nehmen wir an, Sie sind professioneller Frontend-Webentwickler, um genau zu sehen, was Claude tut, um die Ergebnisse abzuleiten. Das ist etwas, das Sie hin und wieder tun müssen , um sicherzustellen , dass Sie es ausreichend menschlich beaufsichtigen Das ist sehr wichtig, denn am Ende des Tages sind Sie derjenige, der für die Ergebnisse verantwortlich ist die Sie von einem beliebigen KI-Tool erhalten Sie sich nun, wie Sie hier sehen können, Schauen Sie sich nun, wie Sie hier sehen können, das Design an, sehr modern, sehr elegant. Alles wurde sehr schön aktualisiert. Lassen Sie mich die Menüs untersuchen. Die Navigation funktioniert. Und wenn Sie sich mit dem Thema befassen, ist das in der Regel das Erste, was als Teil des Prozesses kaputt gehen könnte . Alles sieht ziemlich systematisch aus. Lassen Sie mich zum Beispiel einen Blick in die Galerie werfen. Wie wäre es damit? Los geht's. Hervorragend. Alles ist ziemlich aufeinander abgestimmt. Wir haben nette Funktionen integriert. Und zum jetzigen Zeitpunkt haben wir eine sehr leistungsstarke Version für unsere Website, und wir können uns einfach inspirieren lassen, und wir können uns einfach inspirieren die Farben, die Themen, das Hinzufügen von Grafiken und das Hinzufügen von Bildern zu aktualisieren , wenn es um Ihre eigenen Fähigkeiten in der Frontend-Webentwicklung geht um Ihre eigenen Fähigkeiten in der Frontend-Webentwicklung Wenn Sie sich auf der Grundlage dessen, was ich Ihnen beigebracht habe, bis zu dieser aktuellen Phase durchgehalten haben, können Sie Ihre gesamten Fähigkeiten auf ein ganz neues Niveau bringen 18. Bereitstellen des Website-Designs durch Claude: Und willkommen zurück. Sobald wir also mit der Fertigstellung unserer Website fertig sind, ist es an der Zeit, die Website bereitzustellen und zu starten Dies ist sehr praktisch, wenn Sie versuchen, Ihre Arbeit zu präsentieren, wenn Sie als Teil eines Teams arbeiten oder wenn Sie versuchen, dies Ihrem Kunden zu zeigen. Es ist sehr praktisch, sie direkt in der Cloud zu starten Ja, du hast mich richtig verstanden. Sie können Ihre Website bereitstellen, Ihre Website direkt live im Internet direkt aus der Cloud. Wie ich bereits erwähnt habe, beschäftigen wir uns derzeit mit Front-End-Webentwicklung Wenn Sie dies also im Rahmen Ihrer kreativen Arbeit tun, versuchen Sie, das Frontend-Design fertigzustellen , bevor tatsächlich weiter an Ihrer Website arbeiten Denken Sie immer daran, dass Sie die Möglichkeit haben, es direkt in Claude zu starten , um zu sehen, wie es auch funktioniert Wie gehen Sie also vor? Navigiere einfach hier in die obere Ecke. Klicken Sie auf das Drop-down-Menü. Sie haben die Möglichkeit, dies als HTML-Datei herunterzuladen. Sie können es auch zum Projekt hinzufügen. Dies ist eine meiner Lieblingspräferenzen und -taktiken. Sobald Sie mit diesem Build fertig sind, fügen Sie ihn zu Ihrem Projekt hinzu, an dem Sie gearbeitet haben. Warum? Weil Claude dadurch für zukünftige Änderungen geschult wird Auf diese Weise müssen Sie nicht bei Null anfangen. Nein, Claude hat ein vollständiges Projekt, das es mit Ihnen erstellt hat, auf das Sie sich für zukünftige Ergänzungen beziehen können Dies ist eine sehr effektive Taktik, der Sie Zeit und Mühe sparen, Ihre Fähigkeiten verbessern und den Output jedes Mal verbessern können, und den Output jedes wenn Sie das Projekt immer wieder verwenden Und dann hast du die Funktion, ich dir erzähle, nämlich die Website als Artefakt zu veröffentlichen Sobald Sie darauf klicken, erhalten Sie die tatsächliche URL für die Website Und sobald Sie standardmäßig auf Veröffentlichen und Copyink klicken, Ihre Website im Internet verfügbar Sie können es mit Ihren Kollegen teilen, teilen, wenn Sie Ihr eigenes Portfolio auf Ihrer Website anzeigen, wenn Sie es beispielsweise als zusätzliche Seite auf Ihrer Website hinzufügen, oder wenn Sie versuchen, diese Aktivität als Teil Ihres Kunden zu präsentieren , die Anwendungsmöglichkeiten sind endlos Lass uns auf diesen Link klicken, veröffentlichen und kopieren. Jetzt dauert das Laden ein paar Sekunden. Ich habe die Möglichkeit, die gesamte Website irgendwo einzubetten. Ist sehr praktisch, wenn Sie beispielsweise ein kleines Display innerhalb der Website erstellen ein kleines Display innerhalb der Website oder wenn Sie eine eigene Seite auf Ihrer aktuellen Website haben und diese als Ergänzung hinzufügen möchten. Wie ich bereits erwähnt habe, sind die Anwendungen ziemlich endlos. Ich habe die Möglichkeit, die Veröffentlichung rückgängig zu machen, wenn ich zusätzliche Arbeiten daran vornehmen möchte Schauen wir uns nun das Endergebnis an und los geht's. Diese Website ist jetzt live im Internet. Sehen Sie, wie mächtig das ist. Wir haben die Seite Über uns. Los geht's. Wir haben die Speisekarte. Hervorragend. Alles ist hier. Wir haben die Galerie. Alles funktioniert einwandfrei. Wie Sie sehen können, handelt es sich um eine voll funktionsfähige Website , die wir direkt erstellen konnten. Und mir ist aufgefallen, dass Sie, sobald Sie hier auf eines dieser Navigationssymbole klicken , diese Meldung angezeigt wird. Warum? Weil wir das innerhalb von Claude im Internet veröffentlichen. Also wird es uns immer wieder daran erinnern, weißt du was? Sie sind dabei, Claude zu verlassen, um darauf zuzugreifen. Das ist also etwas, das du im Hinterkopf behalten solltest, denn wie ich bereits erwähnt habe, bauen wir es als Teil von Claude, oder? Also, wenn du das tust und zu verschiedenen Teilen der Website navigierst, da sie live im Internet ist, was macht sie dann, ist, uns zu sagen, weißt du was? Es ist jetzt extern. Es ist nicht mehr in Claude. Denken Sie also daran, wenn Sie zu dieser Website navigieren möchten . Nun, es ändert nichts. Ehrlich gesagt erhalten Sie immer noch eine voll funktionsfähige Website, die vollständig im Internet bereitgestellt wird Sie haben die Möglichkeit, den Link zu teilen, Sie haben die Möglichkeit, diesen Code zu kopieren und in Ihre Website einzubetten, und die Anwendungen, wie ich bereits erwähnt habe, sind ziemlich endlos 19. Weitere Optionen für die Website-Bereitstellung: Willkommen zurück. Jetzt zeige ich Ihnen eine weitere sehr leistungsstarke Option für die Bereitstellung und den Start Ihrer Website. Wenn Sie sich erinnern, haben wir unsere Website einfach als Artefakt innerhalb von Claude gestartet unsere Website einfach als Artefakt innerhalb von Claude Sie ist vollständig live im Internet, und dann können wir den Link teilen und den Code einbetten Die Anwendungsmöglichkeiten sind, wie ich bereits erwähnt habe, ziemlich endlos. Nehmen wir an, Sie versuchen zum Beispiel, diese Website zu bekommen und sie auf Ihr eigenes aktuelles Hosting zu oder Sie versuchen, sie Ihren eigenen aktuellen Website-Builder zu übertragen, um sie dort bereitzustellen. Wie würden Sie das also angehen? Dies ist das Kernergebnis der aktuellen Vorlesung. Ich werde Ihnen zeigen, wie Sie Claude einfach sagen, dass er Ihnen ein fertiges Komplettpaket besorgen soll . Auf diese Weise laden Sie einfach herunter und installieren schnell wie möglich, ohne weitere Eingriffe erforderlich Also werde ich es Claude sagen. Ich möchte, dass die Website als fertiges Komplettpaket verfügbar ist, einschließlich Bildern und Grafiken und Funktionen, die wir erstellt haben. Warum? Weil du nicht willst, dass Claude, was zum Beispiel den Bildern in der Galerie oder den eigentlichen Hintergrundbildern passieren könnte zum Beispiel den Bildern in der Galerie oder den , sie zurücklässt. Es könnte Ihnen einen Platzhalter dafür geben , wenn Sie, sagen wir, ein professioneller Frontend-Webentwickler sind und wissen, wie man programmiert, Sie sind damit einverstanden Sie können den Code einfach nehmen ihn auf Ihrer Website und Ihrem Webhosting bereitstellen Ihrer Website und Ihrem Webhosting Oder Ihr Website-Builder, und dann fügen Sie die Bilder manuell hinzu. Das ist eine Option. Ich bevorzuge diese Option jedoch nicht. Ich hätte gerne einen vollständigen Build in der Cloud. Ich nehme die Ausgabe einfach vollständig auf und stelle sie dann vollständig bereit, und stelle sie dann vollständig bereit ohne dass dazwischen irgendwelche Zwischenaktionen erforderlich sind. Deshalb möchte ich, dass die Website als vollständiges, einsatzbereites Paket zur Verfügung steht, alle Bilder und Grafiken sowie Funktionen enthält, die wir so erstellt haben, dass die Datei vollständig ist und keine weiteren Maßnahmen erforderlich sind. Und stellen Sie sicher, dass die Datei mit externen Website-Buildern und Hostings kompatibel ist . Das wird also Cloud kennzeichnen. Weißt du was? Stellen Sie alles als vollständiges Paket und stellen Sie sicher, dass alles , was wir erstellt und hinzugefügt haben , einschließlich der Bilder und Grafiken auf der Liste, Teil der einsatzbereiten Datei ist. Und vor allem müssen Sie sicherstellen, dass die Datei, die wir aus der Cloud beziehen, mit externen Website-Buildern und Hostings kompatibel ist , denn wenn Sie sie verwenden, ist sie Teil Ihres aktuellen Website-Hostings oder Ihres aktuellen Website-Builders. Es gibt viele Builder. Es gibt viele Hosting-Anbieter. Dies kann jedoch von Lernenden zu Lernenden, von Profi zu Profi, von Student zu Student variieren von Profi zu Profi, von Student zu Student Wir müssen sicherstellen, dass Claude uns das Ergebnis geben kann, das jeder Situation , mit der Sie es zu tun haben, leicht zugeordnet werden kann mit der Sie es zu tun haben, also diese aktuelle Eingabeaufforderung hinzufügen , sagen Sie es Claude einfach als Teil der Frontend-Webentwicklungsanwendung Geben Sie mir das vollständige Ergebnis so, wie es ist, denn ich möchte die aktuelle Website , die wir erstellt haben die aktuelle Website , die wir erstellt haben, nehmen und sie als Teil meines Hosting-Anbieters, meines Website-Builders oder eines anderen Dienstes bereitstellen , der Ihren aktuellen Code verwenden und als Live-Website bereitstellen könnte Ihren aktuellen Code verwenden und als Live-Website bereitstellen könnte Es gibt viele von ihnen da draußen. Die Liste ist umfangreich. Sie können übrigens gerne selbst recherchieren. Sie können viele dieser Optionen erkennen , die vollständig zugänglich sind, wenn Sie die vollständige HTML-Datei verwenden, die Sie erstellt haben. Sie ziehen es buchstäblich per Drag & Drop und schon haben Sie Ihre eigene Webseiten-URL und können Ihre eigene, einzigartige Domain hinzufügen. Das ist also eine Art von Aktivität die Sie selbst durchführen können, aber ich zeige Ihnen, wie Sie zu diesem Punkt gelangen, indem die fertige Datei einfach Sie die fertige Datei einfach vollständig herunterladen und je nach Ihren Umständen verwenden können. Ob Sie dies auf Ihr eigenes Webhosting anwenden , das ist teilweise eine Option für Ihren eigenen Website-Builder Ihren eigenen Website-Builder. Das ist eine weitere Option. Sie werden einen dieser Dienste finden, bei dem Sie Ihre HTML-Datei einfach per Drag & Drop ziehen, zum Beispiel die Datei, die wir hier haben, was mehr als genug ist. Lassen Sie mich Ihnen die Datei zeigen , die Sie verwenden könnten. Nehmen wir an, diese aktuelle Datei, der HTML-Code, oder Sie können die Datei einfach entpacken, den HTML-Code ebenfalls verwenden und die Site einfach buchstäblich bereitstellen, indem Sie den Code per Drag-and-Drop ziehen Sie nehmen den Code, ziehen ihn per Drag-and-Drop auf einen der Direktvermittlungsdienste und schon haben Sie Ihre eigene URL, und Ihre Website ist vollständig online zugänglich Wie ich bereits erwähnt habe, befassen wir uns jedoch mit der Frontend-Webentwicklung der Website Und es gibt natürlich noch andere Komponenten , die zur Webentwicklung Frontend ist ein Segment, Sie haben jedoch das Backend für ein anderes Segment Und im Rahmen des aktuellen Kurses befassen wir uns nur mit der Frontend-Webentwicklung Es ist also sehr wichtig, dies im Hinterkopf zu behalten , denn die Taktiken ich Ihnen beibringe, können Ihnen helfen, Ihre aktuelle Website zu verbessern , eine komplette Website von Grund auf neu zu entwerfen alle Ergebnisse zur weiteren Bearbeitung zu exportieren, aber denken Sie immer daran, dass Sie, wenn Sie sich mit diesen Ergebnissen und den Ergebnissen des KI-Modells befassen , sicherstellen müssen Ihrer eigenen einzigartigen Situation Durch die Anwendung der Taktiken, die ich Ihnen beibringe, entspricht das Also lasst uns diese echte Produktion fertig machen. Ich werde einige echte Lücken beheben, Front-Loading-Kompatibilität mit Homepage-Baukästen, funktionierendes Kontaktformular, ohne dass eine Einrichtung erforderlich ist Wie Sie hier sehen können, können Sie beispielsweise ein typisches Kontaktformular ein typisches Kontaktformular vom Frontend aus entwerfen , aber natürlich müssen Sie es für eine Datenbank vom Backend aus verbinden Das ist also etwas, das nicht Bereich gehört, über den wir sprechen oder mit dem wir es zu tun Wie ich bereits erwähnt habe, konzentrieren wir uns nur auf die Frontend-Webentwicklung Denken Sie also daran, wenn Sie an Ihrer eigenen einzigartigen Anwendung arbeiten Claude ist sich dessen jedoch durchaus bewusst und versucht, alle Kompatibilitätsprobleme zu minimieren, alle Probleme, die auftreten könnten, wenn Sie diesen und versucht, alle Kompatibilitätsprobleme zu minimieren, Schritt oder diese Integration ausführen, was sehr wichtig ist, wenn Sie diese Eingabeaufforderung durchgehen Schritt oder diese Integration ausführen, was sehr wichtig ist, wenn Sie diese was sehr wichtig ist . Wir benötigen das Paket für unser Frontend-Webdesign, das kompatibel, leicht anpassbar und übertragbar Und dann liegt es ganz , wie Sie es von dort aus nutzen würden, Ihr eigenes Hosting, Ihr eigener direkter Mittagsservice, Ihre eigene Backend-Verbindung, was auch immer es ist Sie sind in der Lage, die Ausgabe zu nehmen und sie dann an Ihre eigene Situation anzupassen. Und wie wir hier sehen können, überprüft Claude alles Der HTML-Code, die CSS-Datei, die Header, die Bilder, die Navigation, die Grafiken, die Schriften, alles war im Grunde genommen ein fertiges, exportierbares, einsatzbereites exportierbares, einsatzbereites Frontend-Design für Dies ist als Teil Ihrer Optionen bei der Bereitstellung Ihrer Website sehr wichtig Ihrer Optionen bei der Bereitstellung Ihrer Website Und natürlich hängt es von der Art der Website ab. Also, wenn Sie eine Website haben , für die keine Formulare oder Backend-Integration erforderlich sind. Sie können dies einfach unterwegs starten. Wie ich bereits erwähnt habe, teile ich Ihnen jedoch die verschiedenen Optionen mit, die Ihnen zur Verfügung stehen, einschließlich weiterer erweiterter Ergänzungen. Sie können die Ausgabe verwenden , um diesen Prozess zu vereinfachen. Je nach Situation können Sie jedoch, wenn Sie keine dieser zusätzlichen Funktionen benötigen, wenn Sie keine dieser zusätzlichen Funktionen benötigen, Ihre Website direkt starten, entweder wie ich bereits erwähnt habe, über die Cloud als Artefakt, oder Sie können sie als versandfertige Ausgabedatei Sie können sie direkt als Teil Ihres Website-Builders, Ihres Webhostings oder eines dieser direkten Code-HTML-Codes bereitstellen als Teil Ihres Website-Builders, Ihres Webhostings oder eines dieser direkten Code-HTML-Codes zu Live-Website-Diensten da draußen. Sie benötigen nur ein paar Minuten , um diejenigen zu finden, die am besten zu Ihrer Anwendung passen. Als Teil des Ergebnisses der aktuellen Lektion geben wir Ihnen jedoch das Endprodukt, das Endergebnis, das Endergebnis, nämlich eine vollständig gestaltete Website. Und das Ergebnis und die Lektionen, die Sie daraus gezogen haben und Ihre individuellen Umstände anzupassen , um das Ergebnis an Ihre eigene Situation . Auf diese Weise haben Sie sich die Fähigkeiten und das Fachwissen angeeignet, nicht einfach stecken zu bleiben. Basierend auf Ihrem eigenen Ergebnis. Nein, Sie haben die Tools und das Know-how, und Sie haben die Demonstrationen, die Ihnen Schritt für Schritt genau zeigen , wie Sie den Prozess durchführen müssen. Davon abgesehen ist Claude dabei, alles fertigzustellen. Es durchläuft alle Seiten, wie wir sehen können. Es passt alles an, und es könnte Grenzen stoßen, weil es für Claude ziemlich anspruchsvoll Klicken Sie einfach auf Weiter. Und wenn Ihnen noch Credits zur Verfügung stehen, warten Sie einfach auf die Reset-Zeit und können Ihre Bewerbung fortsetzen. Derzeit ist dies jedoch nicht erforderlich , und los geht's. Unsere Website ist vollständig fertig. Ich habe den HTML-Code, den ich herunterladen kann, und ich kann ihn als Teil des HTML-Codes für Live-Website-Dienste bereitstellen. Fühlen Sie sich frei, verschiedene Optionen zu erkunden. können gerne nach verschiedenen Optionen suchen, wenn dies den Anforderungen entspricht Oder ich kann einfach in der ZIP-Datei auf Vollständig herunterladen klicken. Es beinhaltet alles , was ich sehe und alles, was wir mit ATZ gebaut haben. Ich kann dies als Teil meines Webhostings als meine aktuelle Website zur weiteren Bearbeitung verwenden, oder ich kann es einfach zu einem Website-Builder bringen und direkt laden. Die Anwendungsmöglichkeiten sind endlos, und Sie können diese Ergebnisse einfach nach Ihren eigenen Vorlieben sofort einsatzbereit haben . 20. Wir kommen zum Ende.: Also, was denkst du? Beeindruckend? Ich hoffe wirklich, dass Sie den Kurs sehr hilfreich fanden, Ihnen geholfen haben, sich inspirieren zu lassen und Ihr Wissen sogar um mindestens 1% zu verbessern. Es ist eine gut gemachte Arbeit. Ich freue mich auf Ihr Feedback zur Kartenklasse und stelle sicher, dass Sie meinem Profil folgen, um die neuesten Versionen und Updates zu Wir sehen uns dann im nächsten Kurs.