Erwecke dein UI-Design zum Leben: Code mit Cursor-KI für Anfänger (1 Stunde)

1. 00 Kurs-Intro: Wenn Sie schon immer einmal aus Ihrer Designdatei ausbrechen und sehen wollten , wie Ihre Kreation im Internet zum Leben erweckt wird, ist dies genau das Richtige für Sie In diesem Kurs zeige ich Ihnen, wie Sie mit Hilfe von Cursor, einem kostenlosen KI-gestützten Codierungsassistenten, aus einem einfachen Figma-Design eine Live-Website machen einem kostenlosen KI-gestützten Codierungsassistenten, aus einem einfachen Figma-Design mit Hilfe von Cursor, einem kostenlosen KI-gestützten Codierungsassistenten, aus einem einfachen Figma-Design eine Live-Website eine Das Tolle an Cursor ist, dass Sie im Grunde eine Konversation mit Ihrem Code-Editor Sie können alles fragen, und der Cursor hilft Ihnen nicht nur , sondern erklärt Ihnen auch, wie man ihn erstellt. Es ist, als ob ein super geduldiger Entwickler direkt an Ihrer Seite sitzt. Wir erstellen unsere erste Website mit HGML-CSS und ein bisschen JavaScript, lernen die Grundlagen, bearbeiten Ihr Design und veröffentlichen schließlich eine echte Website mit Wir bringen Ihr Design in weniger als einer Stunde von einer Datei auf eine Live-Site. Dieser Kurs richtet sich an Sie, wenn Sie UI-Designer sind die Barrieren beim Programmieren überwinden und mit der Entwicklung Ihrer eigenen Ideen beginnen möchten . Sie benötigen keine Programmiererfahrung, nur die Bereitschaft, etwas Neues auszuprobieren. Dies ist ein Kurs von moonlearning dot IO. 2. 01 Was ist Cursor: Cursor ist ein KI-gestützter Codierungsassistent , mit dem Sie schnell unglaubliche Projekte erstellen können, fast so, als würden Sie ein Gespräch mit Ihrem Code-Editor führen. ob Sie ein Anfänger oder ein erfahrener Programmierer sind, der Cursor macht das Programmieren schneller und intuitiver, sodass Sie im Handumdrehen erstaunliche Dinge erstellen können. Warum ist der Cursor für Sie, meine Designer , so großartig , um loszulegen? Es ermöglicht Ihnen, mehr als nur komplette Produkte zu entwerfen und zu bauen. Wie funktioniert es? Sie können in der Alltagssprache beschreiben, was Sie wollen, und per Fluch werde ich den Code für Sie erstellen und vorschlagen, wo Sie ihn platzieren sollen. Du kannst alles wortwörtlich fragen , von wie fange ich an , eine Website zu erstellen, über das Hinzufügen eines Schilder- und Formularbereichs zur Anpassung des Designs während des Projekts. Lassen Sie uns zum Beispiel die Button-Farbe von Blau auf unser variables Schwarz anpassen . Cursor geht aber auch über den Code-Editor hinaus. Sie können es also zum Beispiel fragen, wie ich das in eine Datenbank umwandeln kann? Oder wie fange ich überhaupt mit Datenbanken an ? Was gibt es? Was muss ich suchen? Und wie kann ich diese Dinge verbinden? Es wird Sie Schritt für Schritt führen. Wie Cursor erklärt , anstatt zu übernehmen, behalten Sie die Kontrolle, und die Lernkurve ist unglaublich. Sobald Sie bereit sind, Ihren eigenen Code zu schreiben, kann Cursor AI Ihnen helfen, Fehler zu finden und zu beheben oder Ihre Dateien mithilfe von Best Practices aufzuräumen Cursor ist nicht nur ein weiteres KI-Tool. Es ist derzeit eines der nützlichsten und leistungsfähigsten Tools auf dem Markt, Sie über Designdateien hinausgehen und Ihre Produkte als Designer wirklich entwickeln 3. 02 Was wir bauen werden: In diesem Kurs werden wir von Grund auf eine vollständig responsive One-Pager-Website mit Code einrichten eine vollständig responsive One-Pager-Website Grund auf eine vollständig responsive One-Pager-Website mit Code Als Basis verwende ich ein Figma-Design, das ich zuvor eingerichtet habe Bitte beachten Sie jedoch, dass Sie keine Figma-Kenntnisse benötigen, um Kersey verwenden keine Figma-Kenntnisse benötigen Sie benötigen keine Figma-Datei. Sie könnten auch einfach von einer Skizze oder einer Idee in Ihrem Kopf ausgehen Ich persönlich mag es einfach sehr, mein Design vorher in einer UI-Designsoftware einzurichten . Ich kann Dinge frei bewegen. Ich kann Komponenten und Hierarchien durchdenken und dann zur Programmierung übergehen. Das liegt jedoch ganz bei Ihnen. 4. 03 Arbeitsmaterial: Gehen Sie zu den Downloads und hier finden Sie Dateien für jeden der Mu-Lernkurse, und Sie finden auch einen Download für diesen Kurs. Stellen Sie sicher, dass Sie das Kursmaterial herunterladen. Darin finden Sie verschiedene Cursordateien für die verschiedenen Schritte, an denen wir arbeiten werden. Während des Kurses möchte ich dir zeigen, wie man sie öffnet, und das Design findest du auch hier. Wenn du auf das Design klickst, erhältst du eine PDF-Übersicht über unser Design, und das gibt dir nur eine Vorstellung vom Hexadezimalcode der Farben. Sie können den Text herauskopieren und einfach mitmachen und sehen, was wir bauen werden. Wenn Sie Figma nicht haben, ist das als Referenz absolut in Ordnung Wenn Sie ein Figma-Konto haben und die ursprüngliche FGMA-Datei bevorzugen, kopieren Sie einfach diesen Link und fügen Sie ihn in Ihren Browser ein. Es wird eine Kopie der ursprünglichen Figma-Datei für Sie erstellt der ursprünglichen Figma-Datei Bitte klicken Sie nicht wirklich darauf, es zu kopieren und einzufügen. 5. 04 Grundlegende HTML und CSS: Eine superschnelle und einfache Anleitung für absolute Anfänger zu den Grundlagen von HTML und CSS und wie sie zusammenarbeiten , um eine Website zu erstellen. Eine Website besteht hauptsächlich aus HTML. Wenn Sie in Ihrem Browser mit der rechten Maustaste auf eine Webseite klicken , z. B. in Chrome, und Inspect auswählen, öffnen Sie die Tools des Entwicklers. diese Weise können Sie die HTML-Struktur der Seite sehen , die Sie gerade betrachten, und Sie können sie sogar vorübergehend ändern um zu experimentieren. Mach dir keine Sorgen. Diese Änderungen sind nur in Ihrem Browser und verschwinden, sobald Sie die Aktualisierung durchführen. HTML-Code besteht aus Zeichen, die in spitzen Klammern eingeschlossen sind, die als HTML-Elemente bezeichnet werden. Die meisten Elemente bestehen aus zwei Tags, einem öffnenden Tag und einem schließenden Tag. Das schließende Tag ähnelt dem öffnenden Tag, enthält jedoch einen zusätzlichen Schrägstrich vor dem Elementnamen Das Tag definiert einen Inhaltstyp. Das P-Tag weist den Browser beispielsweise an, den eingeschlossenen Inhalt als Absatz anzuzeigen . Die Tags selbst werden nicht angezeigt. Die Markierungen H eins bis H sechs bieten beispielsweise unterschiedliche Überschriften mit unterschiedlichen Wichtigkeitsstufen, bieten beispielsweise unterschiedliche Überschriften mit unterschiedlichen Wichtigkeitsstufen wobei Alter eins die höchste und H sechs die niedrigste Wir können einer Technologie auch Attribute hinzufügen, die zusätzliche Informationen liefern, z. B. die Verwendung eines Klassenattributs zur Anwendung von Stilen Ich werde dir gleich mehr darüber erzählen. Es gibt auch selbstschließende Elemente wie das Bild-Tag, das den Inhalt, in unserem Fall das Bild, über das Attribut source einzieht das Bild, über das Attribut source Aber wie können wir eine ganze Seite mit diesen Elementen einrichten? Nun, die grundlegendste Struktur einer HMR-Seite besteht aus einem HML-Element, das den Kopf - und den Körperteil enthält Der Kopf enthält Informationen für den Browser, die nicht sichtbar sind, wie der Seitentitel Das ist also der kleine Name , den Sie in Ihrem Browser-Tab sehen , eine Metabeschreibung für Suchmaschinen, und Sie können auch Stylesheets und Schriftarten usw. verknüpfen. Der Hauptteil enthält alles, was auf der Seite erscheint. Also dein Text, deine Bilder, Buttons, alles, was du entwirfst. Hier ist eine Liste der gängigsten Tags , die für Sie nützlich sein könnten. Sie können einen Screenshot machen. Normalerweise wird die Homepage einer Website per Konvention als Index-HTML bezeichnet. Sie können auch Unterseiten wie eine Info-Seite oder Projekte erstellen . Um auf diese Unterseiten zu verlinken, kannst du das Anchor-Tag A verwenden. Dadurch wird ein anklickbarer Link erstellt , den du an einer beliebigen Stelle auf deiner Seite platzieren kannst Sie können auch auf externe Websites außerhalb Ihrer Seite verlinken außerhalb Ihrer Seite verlinken Wenn Sie jedoch eine reine HTML-Seite öffnen, werden Sie feststellen, dass der Inhalt zwar vorhanden ist, aber nicht sehr gut aussieht. Hier kommt CSS ins Spiel. Während HTML den Inhalt Ihrer Seite steuert, steuert CSS das Erscheinungsbild Ihrer HTML-Elemente wie Farben, Schriftarten, Abstände und Layout Um Ihre CSS-Datei mit Ihrer HTML-Datei zu verbinden, fügen Sie im Kopfbereich einen Link dazu Stellen Sie sich nun Ihre HTML-Elemente als unsichtbare Boxen vor. Mit CSS können Sie Regeln erstellen, die steuern, wie jede Box und ihr Inhalt aussehen und sich verhalten. Eine CSS-Regel besteht aus zwei Hauptteilen: einem Selektor , der auf ein oder mehrere Elemente in HTML abzielt, und einer Deklaration, die definiert, wie diese Elemente gestaltet werden sollen Die Deklaration selbst besteht aus einer Eigenschaft wie color und einem entsprechenden Wert wie einem Hx-Code Sie können mehrere Deklarationen innerhalb der geschweiften Klammern hinzufügen , und Sie können auch mehrere Selektoren kombinieren , um denselben Stil auf mehrere Elemente anzuwenden denselben Stil In CSS können Selektoren auf einfache Tags abzielen, aber oft werden stattdessen Klassen verwendet Klassen werden innerhalb des HTML-Tags zugewiesen und dann in CSS referenziert, indem einfach ein Punkt vor dem Namen Klassen sind flexibler und wiederverwendbarer, da sie für ein einheitliches Design auf verschiedene Elemente angewendet werden können . Es gibt mehr Möglichkeiten , Lets in CSS zu verwenden. Wissenswert sind der Universal-Selector , der ein Sternzeichen ist und auf die gesamte Seite abzielt Wir haben auch IDs, und sie werden fast wie Klassen in HTML zugewiesen und dann in CSS aufgerufen, indem ein Hashtag vor den IDs sollten jedoch nur für die Gestaltung eines bestimmten Elements verwendet werden , nicht für mehrere Sie können sie zwar in CSS verwenden, in sie jedoch in der Regel für dynamisches Verhalten verwendet JavaScript werden sie jedoch in der Regel für dynamisches Verhalten verwendet. Möglicherweise sehen Sie auch Selektoren, die auf Elemente abzielen, die in anderen Elementen verschachtelt Diese Option zielt beispielsweise nur ein Absatzelement innerhalb der Klasse namens Eine wichtige Sache , die Sie über CSS wissen sollten , ist, dass es kaskadierend ist Das heißt, wenn Sie mehrere Stile auf dasselbe Element anwenden , hat der letzte Vorrang Wenn Sie beispielsweise die Farbe auf Blau und später auf Rot setzen , wird der Text rot angezeigt da die letzte Regel Vorrang hat. Hier ist eine Liste der gängigsten CSS-Selektoren. Vielleicht möchtest du einen Screenshot davon machen. 6. 05 Einrichten einer Dateistruktur: Um zu beginnen, wechseln Sie einfach zu cursor.com und melden Sie sich dann für ein kostenloses Konto an . Stellen Sie sicher, dass Sie die Desktop-Version von Cursor herunterladen Wenn Sie Cursor zum ersten Mal öffnen, werden Sie wahrscheinlich so etwas sehen, oder Sie werden gefragt, ob Sie ein Terminal verwenden möchten Wir werden uns vom Terminal fernhalten. Wir werden es super, super einfach für absolute Anfänger halten super einfach für absolute Anfänger und wir werden einfach mit Ordnern arbeiten. Öffnen Sie also einfach einen Ordner, wie Sie es immer tun würden. In meinem Fall werde ich eines erstellen und es Cliche-Café nennen Klicken Sie auf Erstellen und klicken Sie jetzt einfach auf Öffnen. Dann siehst du den Workspace, und hier wird später unser gesamter Code gespeichert. Auf der linken Seite sehen Sie also den Ordner, den wir gerade erstellt haben. Falls Sie noch etwas anderes sehen, klicken Sie sich hier ein bisschen um. Sie können auch versuchen, einen Ordner über das Menü zu öffnen. Sie können dieses Menü mit Befehl und B umschalten , falls Sie es nicht sehen Und wir wollen auch ein anderes Menü, das sehr wichtig ist , weil wir unseren Chatbot hier auf der rechten Seite haben wollen Also werde ich das mit dem Menü machen. Ich gehe zur Ansicht. Und dann hier oben kann ich das Aussehen sehen, und hier siehst du, das ist deine primäre Seitenleiste, die linke, und dann will ich die rechte, also die sekundäre, wir können auch die Abkürzung verwenden, die uns hier gegeben wird. Sie können dies also auch mit Option Command und B umschalten, in meinem Fall auf einem Mac Wenn Sie vier Fenster verlinken möchten, klicken Sie einfach hier und es wird Ihnen angezeigt Du kannst jetzt so ziemlich einfach loslegen und du könntest der KI einfach sagen, was du bauen willst und sie wird es für dich einrichten. Aber ich bevorzuge es, zuerst meine eigene Dateistruktur einzurichten, und dann werde ich mit der KI sprechen und all meine Inhalte und mein gesamtes Design hinzufügen. Also klicke ich auf meinen Ordner und dann kannst du hier sehen, dass ich eine Datei hinzufügen oder einen neuen Ordner hinzufügen kann. Ich werde drei Dateien hinzufügen. Die erste heißt Index-HTML, und es ist wirklich wichtig, dass Sie sie genau so benennen. Dann den zweiten werde ich Styles CSS nennen, und dann werde ich vielleicht einen dritten für später haben , den ich Script JS nennen werde. Zu Ihrem Verständnis: Die HTML-Datei ist der Ort, an dem der Seiteninhalt abgelegt wird, und sie bietet Struktur und Bedeutung. Außerdem würde eine HTML-Datei auf eine Seite reagieren , die Sie sehen, wenn Sie ein Browserfenster öffnen. Die CSS-Datei, hier wird das Seitendesign gesteuert. CSS kümmert sich um das gesamte Styling und die Anordnung. In der JavaScript-Datei wird hier das Verhalten der Seite festgelegt, sodass sie auf alle Aktionen der Benutzer reagiert. Also Dinge wie ein Klick oder eine Eingabe. Was es sehr einfach halten wird. Habe ein HTML, ein CSS und ein JavaScript, aber du kannst natürlich auch mehrere dieser Dateien haben. Das Einzige, was Sie beachten müssen, ist , dass Sie beim HGML immer mit einem Index-HTML beginnen sollten, und dann können Sie Unterseiten unterschiedlich benennen lassen Das Tolle ist, wenn du nichts weißt, fragst du einfach deinen kleinen Freund hier drüben, unseren KI-Chatbot Nehmen wir zum Beispiel an, was macht der Index-HTML? Also betrachte das wirklich als deinen Assistenten, mit dem du ständig sprichst. Es ist wie ein superfreundlicher Entwickler , der neben Ihnen sitzt, und jede Frage, die Sie haben, können Sie sie stellen. Und übrigens, wenn du etwas nicht verstehst , lass es es es einfach wissen. Also verstehe ich zum Beispiel nicht. Ich bin ein absoluter Anfänger, und es wird dir dann eine passende Version geben, damit du sie verstehen kannst. Und es ist genauso, wenn Dinge kaputt gehen oder ein Fehler auftritt oder etwas nicht funktioniert. Sprich damit, als würdest du mit einer Person sprechen , als ob es einen Fehler gibt. Ich wusste nicht, warum es passiert ist. Ich werde noch eine letzte Sache hinzufügen. Also werde ich in meinem Hauptordner einen weiteren Unterordner hinzufügen, damit wir keine Dateien speichern wollen Wir wollen einen neuen Ordner und ich werde diesen Ordner Bilder nennen Und der ist derzeit leer. 7. 06 Vorhandene Ordner und Thema verwenden: Du kannst entweder einfach mit mir zusammenarbeiten und einfach deine eigene Struktur und deinen eigenen Code einrichten , oder du kannst auch, besonders wenn du dich mal verirrst, einige voreingestellte Ordner öffnen, die ich für dich erstellt habe. Stellen Sie also sicher, dass Sie das Kursmaterial herunterladen, und dann finden Sie im Kursmaterial einige vorgefertigte Ordner. Übrigens können sich der Name und die Anzahl der Ordner hier ändern. Aber sagen wir einfach , Sie möchten zu der Dateistruktur springen, die ich erstellt habe, dann nehmen Sie die erste hier und öffnen Sie sie. Und Sie werden dann meine bisherigen Arbeiten hier sehen. Sobald wir in einer Minute anfangen, Code hinzuzufügen, werden Sie sehen, dass meiner mehr oder weniger so aussieht. Sie können also sehen, dass hier wirklich schöne Farben entstehen. Möglicherweise sehen Sie zunächst ein anderes Setup, und dies ist das Farbthema Ihres Editors. Wenn Sie das ändern möchten, klicken Sie einfach hier oben im Menü auf den Cursor, dann auf Einstellung und suchen Sie das Thema. Und genau hier im Thema können Sie ein beliebiges Thema auswählen. Ich verwende Monochai, was eine sehr beliebte Art ist , dies zu betrachten, aber jede andere, die Sie auch verwenden können, ändert wirklich nur die Farbe Lassen Sie mich Ihnen einfach ein Beispiel geben wie es sonst aussehen würde Klicken Sie also auf Cursoreinstellungen, Thema und wählen Sie einfach das aus , mit dem Sie sich wohl fühlen. Eine kleine Randnotiz, bevor wir einsteigen. Wir arbeiten mit KI, also sprechen wir mit ihr, und selbst wenn wir dieselben oder ähnliche Dinge sagen, werden wir wahrscheinlich nicht genau den gleichen Code und den exakt gleichen Wortlaut bekommen genau den gleichen Code und den exakt gleichen Wortlaut Das ist absolut in Ordnung. Der wichtige Teil ist, dass Sie anfangen zu verstehen, wie man mit dem Cursor arbeitet und wie man seine eigenen Produkte baut. Es geht nicht darum, zu 100% nachzuahmen , was ich auf dem Bildschirm mache Und sehr wichtig, Dinge werden kaputt gehen, Dinge werden schief gehen. Vertrau mir. Es geht nicht darum, es perfekt zu machen. Es geht darum zu verstehen, wie man es repariert und wie man den Cursor benutzt , um es zu reparieren. 8. 07 Einrichten unserer Inhalte mit HTML und Cursor: Lassen Sie uns also etwas Inhalt hinzufügen. Stellen wir zunächst sicher, dass wir unseren Chat hier haben. Denken Sie also daran, wir gehen zur Ansicht und dann zur sekundären Seitenleiste oder verwenden eine Verknüpfung Jetzt wollen wir eine einseitige Café-Seite erstellen eine einseitige Café-Seite Also habe ich hier ein wirklich schnelles Layout erstellt, ziemlich grob mit Figma Und sehr wichtig, Sie müssen Figma nicht verwenden. Du könntest einfach mit Cursor sprechen und es aus deinem Kopf heraus aufbauen Sie könnten im Grunde ein wenig auf ein Papier kritzeln oder jede andere Software verwenden Also ich verwende das wirklich nur als Beispiel. Sie müssen es überhaupt nicht so einrichten. Schauen wir uns das an, denn wir werden Schritt für Schritt vorgehen. Also hier haben wir verschiedene Bereiche wie einen Helden, ein Menü, hier unten, die Futa Und Sie können sehen, dass ich hier eine gewisse Hierarchie habe ich hier eine gewisse Hierarchie Auch hier brauchst du es nicht wirklich. Ich habe es gerade schon bearbeitet. Du kannst also sehen, dass wir im Helden ein H haben. Das ist ein HGML-Tag. Wenn Sie damit nicht vertraut sind, machen Sie sich keine Sorgen. Im wirklichen Leben würde dies wahrscheinlich auch semantischere Benennung wie diese verwenden, aber wir wollen es wirklich einfach halten Und dann habe ich eine andere Hierarchie, g eins, g vier und etwas Text für den Helden und ein Bild und das Menü Lass uns damit anfangen. Im Grunde werden wir Cursor genau sagen, was wir bauen wollen und wie wir es sehen. Übrigens, manchmal finden Sie hier standardmäßig eine kleine Datei angehängt. Nehmen Sie das vorerst ab , denn wir wollen, dass der Cursor die Struktur verwendet, die wir bereits eingerichtet haben, und ich werde es ihm sagen. Ich würde sagen, verwende meine Dateistruktur in Next HTML und stilisiere CSS Ich möchte eine einseitige Website für ein Café namens Cliche Cafe erstellen für ein Café namens Cliche Cafe Also werde ich Ihnen nur ein Beispiel dafür geben, was ich eingegeben habe. Ich werde das beschleunigen und es dir vorlesen, erwarte also nicht, dass du mittippen kannst Was Sie tun können, ist einfach das Video zu beenden und dann einfach dasselbe einzugeben oder einfach Ihren eigenen Text zu erfinden. Das heißt nicht, dass meins besser ist, und wir werden wahrscheinlich sowieso nicht die gleiche Ausgabe erzielen wahrscheinlich sowieso nicht die gleiche Ausgabe Ich werde dir den Text vorlesen und es ist mir übrigens egal, ob du Tippfehler hast Also mach einen ersten Abschnitt namens Hero. Das ist halb Text auf der linken Seite und halb Bild auf der rechten Seite. Der Text steht als H one, Klischee Cafe, dann unter dem Straßennamen Die Stadt im Alter von vier Jahren und darunter im Text, verwende P. Das ist ein Tag für den Text, die Öffnungszeiten Erstellen Sie einen zweiten Abschnitt namens Menü, und hier möchte ich das Menü hinzufügen, das aus vier Getränken und vier Essensoptionen besteht , die alle einen Namen enthalten, der Text fett gedruckt ist, dann unten die Beschreibung des Essens in Kopie und nur normales P, und darunter der Preis. Fügen Sie am Ende eine Fußzeile mit den Kontaktdaten hinzu. Lass uns die Eingabetaste drücken. Okay, großartig, schauen wir uns an, was wir haben. Nochmal, das wird für deine Generation wahrscheinlich ganz anders sein als die , die ich hier habe. Sie können also sehen, hier ist eine einfache Struktur Ihres Warm-Pagers Und zuerst haben wir den Index HTML, und dann weiter unten gibt er uns etwas CSS Wenn Sie also den Index-HTML hinzufügen möchten, stellen Sie sicher, dass Sie sich in der Index-HTML-Datei Und wenn Sie dann mit der Maus darüber fahren, sehen Sie eine kleine Schaltfläche zum Anwenden Klicken Sie auf Weiter, und der gesamte Code wird jetzt für Sie generiert Im Moment klicken wir einfach auf Akzeptieren. Sie können hier sehen, dass es einen Kopf gibt. Das wird nicht angezeigt. Dies ist nur eine allgemeine Information über diese Seite und sie enthält bereits unser Style-CSS. Es verweist auf diese CSS-Datei hier drüben. Hier ist der Körper, alles , was in der Karosserietechnik enthalten ist, Sie können sehen, das werden wir später angezeigt sehen Stellen Sie jetzt sicher, dass Sie das speichern. Wenn Sie diese kleine Blase hier sehen und sie nicht gespeichert ist, drücken Sie einfach Command und S, und sobald Sie das Kreuz wieder sehen, ist es gespeichert. Lassen Sie uns nun zu den Stilen springen und auch unsere Stile hinzufügen. Also bewirb dich, mach weiter und es werden jetzt die Stile hier für uns hinzugefügt. Lasst uns das akzeptieren. Und Sie können hier sehen, dass wir einige Stile für den Helden für die verschiedenen Abschnitte und für den Putter Okay, jetzt wollen wir sehen, wie das aussieht. Die Art und Weise, das zu betrachten , ist , dass Sie Ihre Index-HTML-Datei finden müssen. Sie können es direkt vom Cursor aus verwenden, oder Sie können zu Ihrer eigentlichen Datei springen, in der Sie sie gespeichert haben, und sie dann einfach mit dem Browser öffnen. Am einfachsten ist es, sie einfach in Ihrem Browser abzulegen. Symbol oder klicken Sie einfach mit der rechten Maustaste, um es zu öffnen. Und los geht's. Hier ist unsere kleine Website, offensichtlich noch nicht besonders hübsch aussieht, aber wir haben alle Inhalte, von denen wir dem Cursor erzählt haben, darauf. Okay, lass es uns ein bisschen verfeinern. Und lassen Sie uns zunächst mit dem Bild beginnen. Also wollen wir dieses Bild hier verwenden. Sie haben dieses Bild also entweder in Ihrer Figma-Datei, dann können Sie es einfach exportieren und in Ihren Cursordateien speichern in Ihren Cursordateien Erinnern wir uns also daran , wo wir das haben wollen. Wir haben unsere Datei hier eingerichtet und erinnern uns, dass wir einen kleinen Ordner namens images erstellt haben . Also wollen wir, dass es genau hier drin ist. Wenn Sie Figma nicht verwenden, verwenden Sie einfach ein beliebiges Bild und ziehen Sie es in die Datei Denken Sie auch hier daran, dass es sich um dieselbe Datei auf Ihrem Computer handelt, die Sie dann im Cursor gespiegelt sehen Was ich in meinem Fall tun werde, ich werde es hier exportieren, und dann können Sie auf meinem Computer sehen, ich sehe diese Dateien, und jetzt nenne ich sie einfach Hero Image und speichere sie Jetzt springen wir rüber und Sie können jetzt sehen, ob ich den Bildordner öffne , er ist genau hier drin. Was ich jetzt tun werde, ist, dass ich wieder mit dem Cursor sprechen werde und ich werde dem Cursor das Heldenbild mitteilen, an der Datei ihren Bildpunkt JPEG im Bilderordner. Drücken Sie die Eingabetaste, um zusätzlichen Code zu generieren. Schauen wir uns nun an , was es macht. Es sagt uns, dass wir in die Indexdatei springen sollen. Wir sind schon hier drin und stellen fest wie nett es dir alles erklärt. Wenn wir jetzt auf Anwenden und fortfahren klicken, wird uns genau angezeigt , wo das hinzugefügt werden soll. Das ist eine wirklich tolle Möglichkeit auch für euch zu lernen und zu verstehen. Sie können hier vorher sehen, dass Bild stand und das Bild war nur ein Café-Bild, und jetzt heißt es Bilder Schrägstrich Das heißt, geh in diesen Ordner und hol dir das Heldenbild. Dann klicken wir einfach auf Akzeptieren. Stellen Sie sicher, dass Sie nicht vergessen, es zu speichern. Und jetzt schauen wir uns unsere Website an. Wir müssen uns auffrischen. Sie können das entweder direkt hier im Browser tun oder einfach die Befehlstaste drücken und Sie können sehen, dass wir jetzt unser Bild hier haben. Okay, lassen Sie uns einfach ein paar letzte kleine Details hinzufügen. Also werde ich die Adresse hier rüberschreiben. Und jetzt springe ich einfach zurück zu meiner Cursor-Datei und wir können das von Hand hinzufügen. Ich könnte das auch einfach hier hinzufügen, oder ich kann dem Cursor sagen, dass ich für die Adresse das verwenden kann . Und dann kopiere ich einfach den Text, den ich aus meiner Designdatei kopiert habe , und drücke die Eingabetaste. Ich werde es auch einfach anweisen, es untereinander zu platzieren und dann einfach Eingabetaste drücken und Sie können jetzt den Code sehen. Also bewirb dich, mach weiter. Fantastisch. Nochmals, es erklärt es dir gut. Holen wir uns einfach auch unsere Öffnungszeiten. Also werde ich sie einfach kopieren, sie hier einfügen und dem Cursor sagen, dass er sie hinzufügen soll. Und wieder gehen wir zu Index, übernehmen und wir können gut sehen, wo es bearbeitet wurde. Und es hat jetzt auch zwei Zeilen. Speichern wir es und springen wir hierher und aktualisieren es. Das sieht wirklich nett aus. Und nochmal, das ist wahrscheinlich hier, ich werde später aufräumen, wenn ich an meinem Design arbeite Schauen wir uns nun das Menü an und das Menü, was ich hier gemacht habe Das ist wie mit Komponenten , mit denen man arbeiten kann. Aber hier unten habe ich nur lose Texte. Ich werde ihm sagen, dass er diesen Text für das Menü verwenden soll. Außerdem könnte ich einfach das verwenden, was es hier generiert hat. Also werde ich ihm einfach sagen, dass es das für das Menü verwenden soll, und dann füge ich den Text hinzu , den ich gerade aus meinem Design kopiert habe. Also lasst uns das anwenden, weitermachen. Und das sieht ein bisschen komisch aus. Es ist jetzt wie ein großer Haufen, aber lass uns weitermachen und schauen, wie das aussehen würde. Es hat also die Kühnheit verloren und es ist nicht so strukturiert. Aber wir können einfach zurückspringen und Cursor davon erzählen. Also werde ich es im Menü sagen. Jedes Getränk und jedes Essen ist ein Artikel dessen Name fett gedruckt ist und dann unter der Beschreibung und dem Preis steht. Und ich werde es einfach fragen, ob es das mit einer guten Semantik für mich einrichten kann , weil ich nicht weiß, welche Tags ich verwenden würde Klicken wir jetzt auf Anwenden , das sieht schon viel besser Es verwendet hier einen Artikel. Lass uns das anwenden. Fahren Sie fort. Fantastisch außer. Lass uns rüberspringen und unsere Seite aktualisieren und dann sieht das besser aus. Die Entfernungen stimmen, aber der allgemeine Aufbau ist in Ordnung. Ich werde nur eine letzte Kleinigkeit tun. Ich werde ihm sagen, dass er aufräumen soll. Ich werde ihm einfach sagen, den HTML-Code und alles , was folgt, für die CSS-Datei aufzuräumen den HTML-Code und alles , was folgt, für die CSS-Datei ein super schönes semantisches und perfektes Setup zu erhalten, und dann wird es mir diese Änderungen geben 9. 08 Hinzufügen von Styling mit Cursor und CSS: Das ist also ein Design, das wir jetzt haben, und dann können Sie hier in unserer Figma-Datei sehen, dass wir Ihre Typografie ändern, etwas Farbe, Abstand usw. hinzufügen möchten etwas Farbe, Abstand usw. hinzufügen Gehen wir also Stück für Stück vor. Übrigens, das ist wirklich der Moment, in dem Sie anfangen müssen, damit zu spielen, weil Sie ganz andere Ergebnisse erzielen werden . Die Dinge werden schief gehen. Sie müssen das beheben, es wirklich als Spielwiese nutzen , um dieses Tool zu erkunden. Ich werde damit beginnen, mir diese Farbe zu schnappen. Das ist eine Variable in Figma. Ich werde mir vorerst nur den Hex-Code holen . Das wird gut funktionieren. Dann verwende ich für die Typografie für den gesamten Text Railway und das ist eine Google-Schrift Lassen Sie uns einen Schritt zurückschneiden und Cursor von all dem erzählen. Lassen Sie uns einen Blick darauf werfen. Also hier haben wir unseren Header, mit dem wir beginnen. Sie können also sehen, dass das eine Klasse von Helden, Klassentext, Klassenbild leitet . Wenn wir also in dieses CSS springen, können Sie die Heldenklasse finden. Punkt bedeutet immer Klasse und dann Held. Und so kannst du hier Text, Heldenbild, all die verschiedenen Dinge sehen . Und du kannst wirklich auch einfach da reinspringen und damit spielen. Also, was wir tun wollen, ich werde es von Hand machen. Ich werde einfach den Hex-Code mit der Hintergrundfarbe kopieren den Hex-Code mit der Hintergrundfarbe , weil das ziemlich offensichtlich ist. Schauen wir uns das abgeholt an. Auffrischen. Perfekt. Und jetzt wollen wir den Text hinzufügen. Also, was den Text angeht, werde ich Cursor sprechen, und ich werde ihn erzählen. Also sage ich, ich möchte die Google-Schrift Railway für den gesamten Text auf der gesamten Seite verwenden . Es sagt mir zuerst, ich solle in den HTML-Code gehen, bewerben, weitermachen und dann sehen, was es bewirkt. Es wird also zum Kopf beitragen. Also nochmal, der Kopf ist das, was man nicht sieht. Es wird einen Link zu dieser Schrift hinzufügen, also wird es diese Google-Schrift für mich übernehmen. Das klingt großartig. Lassen Sie uns das akzeptieren und diese Datei speichern. Und jetzt in den Stilen Anwenden, Fortfahren, und es generiert und verwendet Eisenbahnen. Also lassen Sie uns das auch speichern und zurückspringen und aktualisieren, und zurückspringen und um zu sehen, ob das an Fahrt gewinnt. Fantastisch. Das sieht alles gut aus. Jetzt gefällt mir auch diese Polsterung hier nicht. Lass uns einfach zurückspringen, also diese ganze Polsterung. Übrigens, sehr praktisch, wenn Sie in Chrome sind rechten Maustaste, klicken Sie auf Inspect, und dann erhalten Sie den sogenannten Inspektionsmodus Sie können also das HTML hier sehen und dann können Sie sehen, wie der gesamte Stil angewendet wurde Und du kannst gleich hier damit spielen. Und das hat also keinen Einfluss auf Ihren Code. Das passiert wirklich einfach hier im Browser. Das ist sehr nützlich, um die Struktur kennenzulernen und zu verstehen. Du kannst also sehen, dass es bei unserem Klassenhelden eine allgemeine Polsterung gibt, aber dann gibt es mehr Polsterung Wenn wir zum Bild springen, haben wir hier auch tatsächlich einen gewissen Spielraum Also wollen wir das alles abnehmen, also schauen wir uns das an. Sie können entweder mit dem Cursor sprechen oder wir können das einfach abnehmen. Wir können also einfach die gesamte Polsterung entfernen, oder eine andere Möglichkeit, dies zu tun, besteht darin, die obere, rechte und untere Polsterung Lassen Sie uns also tatsächlich darüber sprechen. Ich sage dir, nimm die obere, rechte und untere Polsterung von 50 aus der Heldenklasse ab Und noch etwas, was wir machen wollen, ist das Heldenbild Es gab auch eine Art Rand um das Bild herum, aber ich kann ihn nicht finden Also werde ich Kursa einfach sagen , dass wir keine Polsterung oder einen Rand um das Bild herum haben wollen Lassen Sie uns das generieren und wir wenden es an, akzeptieren es und dann lassen Sie uns einfach zurückspringen und uns ansehen, was es bewirkt hat Und wir können sehen, dass das immer noch im Helden ist, also füllen sie immer noch 20 auf Das ist also links und rechts. Also hat uns Cursor nicht verstanden. Lass uns zurückspringen. Also wenn du das hast, ist es oben, dann ist es oben und unten und links und rechts. Also wir wollen, dass oben Null ist, rechts ist Null. Unten ist Null, und dann wollen wir es nur auf der letzten Kleinigkeit haben. Also werden wir ja tun. Wenn Sie das nicht verstehen, können Sie auch mit Cursor sprechen und ihm einfach sagen, was er tun soll. Also springen wir zurück, aktualisieren das, und das sieht genau so aus, wonach wir suchen. Großartig. Lassen Sie uns diesen Text jetzt ein wenig stylen. Ich habe das eigentlich schon in Figma eingerichtet. Auch hier kannst du das einfach von Hand machen, während du weitermachst, aber so wie ich es habe, werde ich es benutzen Was ich tun werde, ist, das alles einfach zu kopieren. Lass mich das kopieren und dann werde ich es erzählen. Ich gehe tatsächlich ins CSS. Ich weiß, dass es in CSS sein wird. Ich sage es, wo ich es haben will. In meinem Fall ist H eins, und ich werde es einfach einfügen. Lass mich sehen, was passiert. Ich könnte das auch einfach in mich einfügen . Das klingt großartig. Übrigens, ich glaube nicht, dass ich die Schriftfamilie brauche , weil ich das schon geschrieben habe. Ich werde es vorerst einfach so lassen, ich kann das immer aufräumen Okay, außer. Und ich werde dasselbe für die anderen tun. Also in meinem Alter von zwei Jahren. Also mache ich das für meine gesamte Typenskala hier. Ich kopiere es einfach aus dem Tiefmodus von Figma, wo du alle Einstellungen bekommst Das musst du nicht tun. Sie können den Cursor auch einfach bitten, das für Sie nachzuholen. Sie können einfach beliebige Werte eingeben oder einige Standardeinstellungen verwenden. Wenn Sie also mit Figma arbeiten, ist das jedoch sehr praktisch Lassen Sie uns das speichern und dann schauen wir einfach, ob wir einen Unterschied Das sieht also schon ganz nett aus. Macht das tatsächlich etwas größer. Das sieht also toll aus. Und jetzt werde ich ihm einfach sagen , dass er aufräumen soll. Ich sage ihm, es soll das CSS bereinigen, Wiederholungen herausnehmen und Variablen für Farbe und Schriftfamilie erstellen . Lassen Sie uns das anwenden Also das ist super nett. Es räumt wirklich Ihre gesamte Datei mit einem Klick auf Speichern Sie es, und das sieht schon viel sauberer aus. Sie können hier sehen, das ist alles aufgeräumt und dann die Variablen hier drin, fantastisch Schauen wir uns das mal an. Stellen wir sicher, dass es keine Fehler gibt, und das sieht genauso aus. Aber schauen wir uns das an, weil da diese seltsame Polsterung passiert Gehen wir zur Inspektion und schauen uns an , wo das herkommt Wir haben diese Marge von 16 und dann haben wir hier eine Marge und ich kann nicht wirklich sehen , woher sie kommt. Gehen wir zurück und fragen wir Cursor. Ich frage im Inspektionsmodus, die Helden H eins, H vier und P wird ein Rand angewendet , aber ich kann ihn nicht sehen. Woher kommt es? Zeig es mir in CSS. Hier erfahren Sie , dass der Rand aus der Standardeinstellung des Browsers stammt. Also eine Erklärung hier, wir verstehen das. Also füge Marge Null zu all dem hinzu. Okay. Ich frage es einfach, kannst du das für mich tun? Klicken wir auf Anwenden und dann sehen Sie hier den Rand Null, außer dass wir ihn speichern und zurückschneiden, um zu sehen, ob das funktioniert hat. Perfekt. Okay, jetzt können wir einfach die Ränder hinzufügen, die wir tatsächlich wollen. Also sage ich es, okay, großartig. Jetzt füge einfach ein Leerzeichen zwischen dem Namen H one und der Adresse der Öffnungszeiten hinzu. Gib mir ein CSS-Update. Okay, es werden also zuerst einige Klassen im HTML hinzugefügt . Lass uns das machen. Das ist Stift. Es werden einige Klassen hinzugefügt. Ja, ich bin mir nicht sicher, ob ich das will. Und dann fügt es hier welche hinzu. Lassen Sie uns das ablehnen und erneut darüber sprechen . Also werde ich es erzählen. Also die H-Zone ist eine Einheit. Dann sollten Straße und Stadt eine Einheit sein, H vier. Aber untereinander mit einem Abstand von rund 32 Pixeln zur nächsten Einheit, das sind die Öffnungszeiten. Kannst du die Dips hinzufügen oder wie auch immer du das am besten anordnen würdest Okay, das sieht nett aus. Schauen wir uns an, was es macht. Das sieht toll aus. Also erstelle hier einen kleinen Cluster, hier kleinen Cluster. Das sieht sehr reizend aus. Bitten Sie es immer, das am besten zu gestalten, und dann wird es Ihnen ein ziemlich nettes Setup geben . Dann springe zu CSS. A Ich kann es nicht ganz sehen. Ich bearbeite es hier unten. Morgen können wir es später bitten, aufzuräumen. Lass uns zurückspringen. Das sieht ganz nett aus. Lassen Sie uns jetzt einfach unser Menü hier sortieren , also springen wir zurück. Wenn wir also hier nachschauen, können wir sehen, dass die Speisekarte beim Aufräumen tatsächlich ein bisschen durcheinander gebracht wurde . Also, was ich tun werde, ist, dass es manchmal einfacher ist. Wir entfernen das einfach und dann sagen wir ihm, dass es ein neues hinzufügen soll. Lassen Sie uns also zu unserer Figma-Datei springen. Und hier erinnere ich mich tatsächlich, dass dies das Setup ist. Also das ist alles in Component, aber hier habe ich nur einen losen Text zum Kopieren, also werde ich den einfach nehmen, drüber springen und ihm sagen, was zu tun ist. Also werde ich es unter dem Header-Helden sagen und einen neuen Abschnitt namens Getränkekarte hinzufügen. Das ist der Inhalt und dann kopiere ich einfach all meine Inhalte hinein. Die Überschrift „Getränke und Essen“ lautet „Alter drei“, und der Rest ist nur Text P, wobei der Name des Essens fett gedruckt ist und dann unter der Beschreibung und dann der Preis steht. Bearbeiten und aktualisieren Sie HTML und CSS. Das sieht wieder ein bisschen nach dem aus, was es mir gegeben hat, also sagen wir ihm einfach, dass es ein bisschen aufgeräumter sein soll Sagen wir, sieht gut aus, aber stellen Sie sicher, dass jedes Essen und Trinken wie ein eigener Artikel ist und dass die Semantik in HTML am besten ist Das funktioniert normalerweise immer , wenn Sie nicht wissen, was Sie sagen sollen Das sieht viel besser aus. Es verwendet allerdings eine H-Vier, also werde ich es einfach sagen. Das sieht toll aus. Benutze einfach kein H Four. Setze einfach das P als Stark für den Namen ein. Schau mal, ob wir jetzt den richtigen haben. Okay, das sieht endlich viel besser aus. Also sagen wir, bewerben Sie sich. Fahren Sie fort. Und es fügt es eigentlich nicht hinzu. Also lass es uns einfach kopieren. Und dann fügen wir es einfach hier unten ein. Großartig. Sehen wir uns den Abschnitt an. Es heißt Getränkekarte. Das klingt gut. Es gab uns einen Ausweis. Auch hier bevorzuge ich es, das als Kurs zu haben, aber Sie können das gerne machen, wie Sie möchten. Und ich brauche auch das CSS. Ich sage ihm, dass ich auch das CSS brauche und stelle fest, dass ich die ID in eine Klasse geändert habe. Wenn das wieder zu weit fortgeschritten ist, frag es einfach, was zu tun ist. Schau es dir an und sag ihm dann, was funktioniert oder nicht, und es wird dir helfen. Lassen Sie uns also ins CSS springen. Bewerben Sie sich, fahren Sie fort und akzeptieren Sie. Okay, lassen Sie uns einfach sehen, ob das funktioniert hat. Das sieht fantastisch aus. Ich möchte es jetzt nur zentrieren und hier etwas Platz haben. Aber ich sage es. Sieht toll aus. Einfach alle Texte zentrieren und eine falsche Schreibweise spielt keine Rolle. Also Platz über der Überschrift H drei in diesem Abschnitt. Übrigens weiß es jetzt, dass ich mich auf das letzte beziehe, was ich aktualisiert habe. Manchmal musst du ihr sagen, auf welche Klasse du dich beziehst. Okay, lassen Sie uns das anwenden. Fahren Sie fort. Sie können sehen, dass der gesamte Text zentriert wurde und ein kleiner Rand hinzugefügt wurde. Lassen Sie uns das akzeptieren. Spring hier rüber, aktualisiere dich. Und das sieht schon nach einer ziemlich schönen Website aus. Ich werde ihm nur sagen, dass er alles aufräumen soll. Also sage ich, räumen Sie HML und CSS auf und verwenden Sie dabei die besten Methoden. Also das könnte einen Moment dauern. Sie können dies dann zuerst auf die HGML anwenden und dann können Sie das andere auf die CSS-Datei anwenden Und es gibt eine Kleinigkeit, die ich persönlich hier nicht hintergrundfarben lassen möchte, also werde ich das einfach von Hand herausnehmen Okay, großartig. Lass uns einen Blick darauf werfen. Das funktioniert immer noch. Fantastisch. Wie ich bereits erwähnt habe, sollten Sie dies nicht als Tutorial mit den Schritten eins, zwei und drei betrachten. Es zeigt dir wirklich nur, wie ich in diesem Szenario vorgegangen bin. Wenn Sie dasselbe eingeben, erhalten Sie möglicherweise ein anderes Ergebnis. Sie haben ein anderes Projekt. Es geht also wirklich nur darum, damit zu spielen und Lösungen zu verstehen und zu finden. Eine kleine Randnotiz nach der Aufnahme: Mir ist aufgefallen, dass diese Überschrift hier tatsächlich viel mutiger ist als die in meiner Ausgabe. Also wenn ich mal hier nachschaue, dann ist das eine Schriftstärke von 900. Wenn ich mal in mein CSS schaue, dann ist das auch auf 900 gesetzt. Ich frage jedoch den Cursor, während das passiert, und es darauf hingewiesen, dass, wenn ich die Google-Schrift einziehe , Sie hier sehen können , dass standardmäßig 407 hundert abgerufen werden. Ich werde das einfach hier auswählen und dann kann ich ihm einfach sagen, dass er auch den Rest übernehmen soll. Während der Aktualisierung können Sie sehen, dass ich jetzt das richtige Gewicht angewendet habe. 10. 09 Unsere Website mit dem Cursor ansprechend gestalten: Das ist jetzt unsere Seite, und Sie können sehen, wir haben unser Intro, wir haben unser Menü, und ich habe einen weiteren Abschnitt über den Brisa-Kurs hinzugefügt und die Puta aufgeräumt Was wir jetzt jedoch tun wollen, ist, dass, wenn wir die Größe ändern, wir wollen, dass es sich richtig verhält Also wollen wir zum Beispiel, dass dieses Bild direkt darunter gestapelt wird. Schauen wir uns also an, wie wir das machen können. Lass uns einfach den Cursor fragen. Wenn Sie ihm sagen, wie sich alle Abschnitte verhalten sollen, ist es eine gute Idee einen Blick darauf zu werfen, wie die Abschnitte heißen. Einer heißt Hero Drinks Menu und hier unten, unser Bereich, also der Kurs dafür heißt Barista Es wird auch meistens an Bedeutung gewinnen, wenn du es nur beschreibst, aber manchmal kommt es bei der Formulierung zu Verwirrung, wenn du tiefer gehst. Es ist eine gute Idee, das zu tun Lassen Sie uns sagen, wie wir wollen, dass sie sich alle verhalten. Nochmals, ich beschleunige das ein bisschen, also solltest du vielleicht bis zum Ende gehen , damit aufhören und entweder schreiben, was ich geschrieben habe oder einfach deinen eigenen Text schreiben Machen Sie die Seite also responsiv. Es sieht also vom Handy bis zum Desktop gut aus. Held auf großen Bildschirmen, behalte KIs. Auf kleinen Bildschirmen stapeln Sie das Bild unter dem Text. Stellen Sie sicher, dass Sie auf kleinen Bildschirmen Platz zwischen Text und Bild hinzufügen . Dann die Getränkekarte. Lass uns das so lassen, wie es ist. Brisa-Kurs und notiere dir, wie ich den Klassennamen verwende. Stapel hin oder her, auf großen Bildschirmen behalten Sie AIS auf kleinen Bildschirmen und stapeln Sie den Text unter dem Bild Achten Sie darauf, etwas Platz unter dem Bild auf den kleinen Bildschirmen und auch unter den Schaltflächen hinzuzufügen . Drücken Sie Enser. Schauen wir uns das mal an Es sagt uns, dass wir Medienabfragen verwenden sollen. Aus Gründen der Reaktionsfähigkeit verwenden wir Medienabfragen, und das bedeutet, dass sie uns ab einer Breite dieser Breite mitteilen, dass wir diese Regeln verwenden müssen einer Breite dieser Breite mitteilen, dass wir diese Regeln verwenden Und hier, zum Beispiel unterhalb dieser Breite, wenden wir die Regeln an, die hier für IDs gelten. Dann verwenden wir Flexbox, das SS-Grid. Wenn Sie also davon wissen und einfach reinspringen und damit spielen, wenn Sie es nicht wissen, stellen Sie sicher, dass Sie es Cursor wissen lassen Lassen Sie uns das einfach anwenden und sehen, was passiert. Und Sie können sehen, dass gerade die Medienanfragen für den Helden, für den Heldentext, für das Barris de Course, Bars de Course-Bild hinzugefügt wurden Heldentext, für das Barris de Course, Bars de Course-Bild Bars de Course-Bild Eigentlich bin ich mir nicht sicher, ob das alles so heißt. Lass uns einen Blick darauf werfen. Balken zum Kursbild, Text, Anmeldung, Button. Manchmal wird es also ein bisschen mit den Klassennamen verwechselt. Also möchtest du das vielleicht später einfach aufräumen. Lass uns einfach sehen, was passiert, und dann können wir das immer noch nachbessern. Also das ist Refresh. Und das lässt sich gut stapeln. Brauche diesen Platz. Hier wollte ich, dass das nicht zunimmt und wir brauchen vielleicht etwas Platz über der H-Linie, und dann hier unten, das auch gut stapelt , der Abstand nimmt nicht wahrscheinlich weil wir gesehen haben, dass die Benennung damit ein wenig verwechselt wird Also lass uns vielleicht einfach Cursor fragen. also wirklich ein Gespräch, wie Sie es mit Ihren Kollegen tun würden. Ich frage es. Der Abstand unter dem Heldentext und der Britta-Schaltfläche nimmt nicht zu. Verwenden Sie möglicherweise Klassennamen , die nicht existieren Okay, jetzt bin ich da reingegangen und es wird nochmal nachgesehen. Also, was sagt uns das jetzt? Hier sind die aktualisierten Änderungen. Mal sehen, ob es sie tatsächlich selbst herausgefunden hat. Ich habe keine Ahnung, ob es so schlau ist. Lassen Sie uns aktualisieren und die Größe ändern. Und das sieht viel besser aus. Großartig. Das Einzige, was wir jetzt wollen , ist, dass wir im ersten Lebensjahr ein bisschen Polsterung wollen Lass es uns einfach sagen. Fügen Sie also im Hero auf kleinen Bildschirmen etwas Polsterung über dem Alter hinzu und entfernen Sie auch die Polsterung rund um das Geben wir das an, außer Speichern, Aktualisieren, und übrigens, eine gute Möglichkeit, das zu tun, ist auch, auf Inspizieren zu springen, denn was Sie auf Inspizieren bekommen, haben Sie hier diese kleine Schaltfläche, und dann können Sie zu verschiedenen Handygrößen springen Jetzt haben wir hier oben einen schönen Platz , der wirklich gut aussieht. Wir haben immer noch diesen. Wir könnten uns also ansehen , woher das kommt. Ich denke, es kommt von einer Polsterung von einer Polsterung hier und dem Helden Also müssen wir den ausziehen. Und dann haben wir hier unser Menü und hier haben wir dieses, was alles sehr gut funktioniert. Also lasst uns einfach diese Polsterung finden und wir können versuchen, das von Hand zu machen Also das hier ist wirklich die Heldenpolsterung. Und was wir tun können, ist , das einfach zu kopieren , weil wir jetzt anfangen, CSS zu verstehen, und dann platzieren wir es hier und wir können das alles auf Null setzen Und lassen Sie uns sehen, was passiert. Vielleicht müssen wir diesem Text jetzt nur ein bisschen mehr Auffüllung geben jetzt nur ein bisschen mehr Auffüllung geben Schauen wir uns das an und fügen wir hier die Polsterung hinzu Und dann denk dran, das ist oben, rechts, unten und links Schauen wir uns also an, ob wir dafür schon genug CSS verstehen . Perfekt. Und so kann man wirklich ins Lernen einsteigen. Und übrigens, kleiner Tipp hier. Wenn du hier draufklickst, dann hast du den kleinsten , nämlich 320 Pixel. Das kleinste Handy auf dem Markt, damit Sie sicherstellen können, dass auf diesem noch alles lesbar ist. Und einfach so haben Sie eine schöne, reaktionsschnelle Website. Wenn Sie also weiterarbeiten, werden Sie ein bisschen über CSS lernen Es ist wirklich wichtig, dass du versuchst zu verstehen. Wenn du es nicht verstehst, kannst du immer den Cursor fragen. Also frag es. Fragen Sie es zum Beispiel: Was ist Flex? Also, wofür benutzt du es? Und es wird dir sagen, wie diese Dinge funktionieren. Also das ist wirklich, wirklich fantastisch, und von da an kannst du es wirklich übernehmen. Alles, was schief geht, ist dasselbe. Frag es. Das Einzige, dessen Sie sich ein wenig bewusst sein müssen , ist die Benennung, denn manchmal entspricht sie einfach nicht der richtigen Namenskonvention. Also das ist etwas, das du dir einfach ansehen kannst, wie all diese verschiedenen Dinge heißen. Das Einzige, was wir jetzt tun wollen, ist natürlich , dass alles schön und ordentlich Ich werde ihm nur sagen, dass er aufräumen soll, indem ich bewährte Methoden verwende. 11. 10 Starte deine Seite online mit Netlify: Um unser Design lokal anzuzeigen, nehmen wir den Index und öffnen ihn einfach in unserem Browser Und das gibt uns eine realistische Vorstellung davon , wie unsere Seite aussehen wird, aber sie ist nur für uns auf unserem lokalen Computer sichtbar. Also, wie bekommen wir das online? Wie stellen wir diese Seite bereit? Und eine tolle Sache, du kannst einfach den Cursor fragen. Also, was ist der einfachste Weg, meine Seite bereitzustellen? Sie können hier also sehen, dass es uns mehrere Optionen bietet. Sie können Github, Netlify verwenden und es gibt noch einige mehr. Das, was ich verwenden werde und das mir für Anfänger am besten gefällt, ist Und Sie können einfach hier mit dem Cursor weiter gehen und ihn einfach bitten, Ihnen klare Anweisungen zu geben, wie das Aber ich werde es dir nur zeigen , weil es ziemlich einfach ist. Gehe zu netlify.com und registriere dich für ein kostenloses Konto. Ich werde mir so etwas ansehen und dann sicherstellen, dass Sie auf Websites sind Und hier erfahren Sie , wie Sie Ihre Websites zu Netlify hinzufügen können. Also haben wir Github Sie können Vorlagen durchsuchen und sie hier erstellen. Aber der einfachste Teil, den wir vorerst verwenden werden, ist die manuelle Bereitstellung. Also das ist hier unten. Sie können jetzt einfach nach Ihrer Datei suchen, um sie hochzuladen und dann zu finden. Sie können also sehen, dass die Datei, in der Sie gerade mit dem Cursor arbeiten können also sehen, dass die Datei, in der Sie gerade mit dem Cursor , alle Dinge enthalten muss, Ihre Bilder, Ihren Index , Ihr CSS, alles. Wählen Sie die gesamte Datei aus und klicken Sie dann auf Hochladen. Und das ist so ziemlich alles. Also, was Sie hier sehen, das ist vorerst Ihre URL. Wenn wir auf Open Production klicken, machen wir das einfach etwas kleiner, damit wir es besser sehen können. Und wir bekommen jetzt unsere Seite, die live ist. Und Sie können sehen, dass es genau dasselbe ist, was wir zuvor gesehen haben. Das ist also unsere URL. Wir wollen das ein bisschen bereinigen. Also klicken Sie auf Seitenkonfiguration, und dann sehen Sie hier unten den Namen der Website ändern, und wir können das jetzt einfach abnehmen und es Cliche-Café nennen. Lass es uns speichern Und Sie können jetzt sehen, dass unsere URL cliche cafe dot netlify dot app lautet Wenn wir das also wieder öffnen, können Sie es teilen, und hier finden Sie Ihre Seite Wenn Sie Ihre Seite aktualisieren möchten, kehren Sie einfach zu Deploy zurück und Sie können einfach eine neue Version durchsuchen. Außerdem werden alle alten Versionen für Sie gespeichert , sodass Sie jederzeit hin und her wechseln können. Jetzt möchten Sie wahrscheinlich Ihre eigene URL verwenden. In diesem Fall klicken Sie einfach auf Seitenübersicht und dann können Sie es hier sehen. Sie haben also Ihre Site bereitgestellt. Jetzt können Sie auf Ihre benutzerdefinierte Domain einrichten klicken. Hängt davon ab, woher Sie Ihre Domain haben. Sie können es direkt mit Netlify bekommen, was wahrscheinlich am einfachsten ist, aber Sie können auch jede Domain hinzufügen, die Sie woanders gekauft haben, und Netlify wird Sie durch den Prozess führen, und Sie werden auch Ihre Website sichern, was bedeutet, dass es HTTPS ist, was sehr wichtig ist was Oder Sie können Ihre neue Netlify-URL auch weiterhin kostenlos verwenden Ihre neue Netlify-URL 12. 11 Verbindungen mit Drittanbieter-Apps herstellen: Also hier habe ich meine Seite, und du kannst hier unten sehen , wie der Brisa-Kurs bald kommt Wenn du auf Anmelden klickst, passiert jetzt nichts Deshalb möchte ich, dass sich die Leute in eine Mailingliste eintragen können , um später weitere Informationen zu erhalten Mittlerweile gibt es viele verschiedene Anbieter für Mailinglisten. Ich werde einfach Mailchim verwenden , was sehr beliebt ist Sie können aber auch in den Cursor gehen und ihn einfach fragen, welchen er für Ihre Bedürfnisse empfiehlt Um anzufangen, werde ich etwas ganz Einfaches machen. Wenn Sie auf meiner Website auf Anmelden klicken, werden Sie einfach zu einer separaten Anmeldeseite weitergeleitet In Mailchimp gehe ich zu den Zielgruppen und dann zu den Und dann kannst du hier verschiedene Möglichkeiten sehen. Popups, einbetten und ich werde mich für eine entscheiden, die eine separate Landingpage ist. Also werde ich auf Neue Landingpage erstellen klicken. Und hier baue einfach eine Landingpage. Und ich werde das Klischee Cafe-Landingpage nennen. Lass uns anfangen. Und dann können Sie sehen, dass es eine wirklich nette Vorlage gibt, sodass Sie das wirklich gut aussehen lassen können. Aber ich werde mich hier für die Demo einfach für diese supereinfache Version entscheiden . Werde das hier und lass uns dieses eine Klischee-Café nennen Oder nennen wir es Barista-Kurs. Speichern Sie das und lassen Sie uns es speichern und schließen. Und dann klicke ich auf Veröffentlichen. Auch hier können Sie Dinge bearbeiten und sie einfach ein bisschen mehr nach Ihren Wünschen gestalten . Aber vorerst werde ich es einfach veröffentlichen. Und wenn ich jetzt hier klicke und deine Seite teile, kannst du sehen, dass ich genau dieses kleine Schild und Formular hier erstellt habe . Das ist also die URL, die ich kopieren werde, und ich werde dem Cursor davon erzählen. Ein kleiner Tipp: Sie können die Schaltfläche einfach markieren, weil Sie wissen, dass Sie auf diese Schaltfläche klicken möchten , und dann auf Zum Hut hinzufügen klicken, und dann weiß sie bereits, worauf Sie sich beziehen Wenn darauf geklickt wird, öffne ich diese Seite in einem neuen Fenster, und dann füge ich einfach den Link ein , den ich von Mail Jump Und so sagt es uns, was es tut. Es fügt etwas JavaScript hinzu. Wir können das später machen, aber lassen Sie uns einfach sagen es vorerst nur HTML verwenden soll. Also haben wir es einfach in einen Link umgewandelt. Lassen Sie uns ihn anwenden und Sie können jetzt sehen, ob wir darauf klicken leeres Ziel bedeutet, ein neues Fenster zu öffnen, Anmeldeschaltfläche und dann die Registrierung. Akzeptieren wir das, speichern wir es. Lass uns hier rüber springen und das Ganze auffrischen. Ich muss das Styling später ein wenig aufräumen. Und dann öffnet es diese neue Seite und wir können uns anmelden. Also lass uns das einfach versuchen. Ich werde diese Landingpage einfach aufrufen. Okay. Also, wenn wir hier reinspringen und zu unserem Publikum gehen und uns den Kontext ansehen, dann können wir sehen, dass das jetzt hinzugefügt wurde. Du kannst wirklich anfangen, damit zu spielen. Zum Beispiel könnten wir direkt auf unserer Seite ein Eingabefeld hinzufügen , und Sie können dann mit dem Cursor sprechen und ihn fragen, wie Sie es einrichten können, dass eine Eingabe in diesem Feld sofort an Mailchimp weitergegeben wird dass eine Eingabe in diesem Feld sofort an Mailchimp weitergegeben Denn das Tolle am Cursor ist , dass er sogenannte LLMs verwendet Mach dir nicht zu viele Gedanken darüber, welchen du wählst. Sie werden alle für das arbeiten, was wir tun. Und das ist so etwas wie Che Hiphi oder Claude. Das bedeutet in diesem Fall, dass sie unseren Code sehen und unseren Code verstehen, aber sie sind auch mit dem Internet als solchem verbunden und sie sind nur ein KI-Chatbd , den Sie auch über Dinge außerhalb Ihres Code-Editors fragen können auch über Dinge außerhalb Ihres Code-Editors Eine weitere tolle Sache, die Sie tun könnten, ist zum Beispiel einen Blick darauf zu werfen, ein Pop-up für Mail ihm hinzuzufügen, die Formulare einzubetten oder auch andere Tools zu verwenden Eine, die ich wirklich mag, ist, mir einen Kaffee zu kaufen. Das hat also diese kleinen Unterstützungsschaltflächen hier, und Sie können sie zu Ihrer Seite hinzufügen. Also, wenn sie angeklickt werden und jemand dir einfach einen Euro oder fünf Euro oder ein paar Dollar geben und dein Projekt unterstützen kann oder fünf Euro oder ein paar Dollar geben und dein Projekt unterstützen Es ist also wirklich nettes Zeug, und du kannst einfach mit Kerse darüber chatten, wie du das integrieren Es wird dir genau sagen , wohin du auf diesen Seiten gehen musst und welche Informationen es benötigt , um dir zu helfen, all das zu verbinden Eine letzte Kleinigkeit, auf die ich hinweisen möchte, ist, viele dieser Dinge Java-Skript erforderlich ist. Wir haben also eine JavaScript-Datei in unserem Setup. Sie ist derzeit jedoch nicht mit unserem Index verbunden. Du müsstest Cursor also immer sagen, ganz einfach. Lass es uns einfach sagen. Also möchte ich die Script JS-Datei verwenden, um sie zu verbinden. Und es wird dir sagen, dass du das zu deinem HTML hinzufügen sollst, und notieren, wie es es am Ende deines HTML-Codes hinzufügt. Im Kopf haben wir also den Stil CSS verbunden und dann JavaScript direkt vor dem Body-Tag. Die Welt liegt dir also wirklich zu Füßen, also fang einfach an zu spielen und mit dem Cursor über die Dinge zu sprechen , die du tun möchtest, und verbinde dich mit deiner Seite In den meisten Fällen werden Sie vor Sicherheitsproblemen gewarnt. Es ist jedoch immer noch eine KI. Seien Sie als Anfänger also vernünftig und verwenden Sie keine sensiblen Daten. 13. Vielen Dank: Gut gemacht, dass Sie diesen Kurs abgeschlossen haben. Sie können mich gerne bei MoLearningo Ich bin immer an Ihrem Feedback interessiert . Sie würden mir auch einen großen Gefallen tun hier eine Bewertung hinterlassen würden. Ava hat dieser Kurs gefallen und stellen Sie auch sicher, dass Sie einen Blick auf moonlearning dot IO werfen, wo Sie neben Kursen auch jede Menge zusätzliches Material finden Kursen auch jede Menge zusätzliches Material Mit der M-Mitgliedschaft kannst du auf alle meine Videos zugreifen, also alles von UX-UI-Grundlagen viele Informationen zur FINMA bis hin zu vielen Deep Dives und auch auf einen Abschnitt über CSSNUIFundamentals Wir werden also besprechen, was passiert, wenn UI-Design auf Code in Bezug auf Layout, Typografie, Farbe und andere relevante Themen trifft Typografie, Farbe Auf Moon Learning findest du auch einen Link zu all meinen letzten Artikeln, die ich kürzlich gelesen habe, sowie eine Ressourcenseite , auf der ich versuche, dich über die neuesten coolen Dinge auf dem Laufenden zu halten , die in der Welt des UX UI Designs passieren Wenn Sie eine Veranstaltung im echten Leben bevorzugen, schauen Sie sich den Workshop- und Diskussionsbereich Ich spreche häufig auf Konferenzen und gebe Online-Workshops rund um die Themen UX, UI-Design und Solopreneurship Abonnieren Sie unbedingt meinen Newsletter, um auf dem Laufenden zu bleiben Also bis bald auf Moonlaring Dot IO.