Moderne Frontend-Webentwicklung: HTML, CSS, Javascript, Sass und Typescript

1. Einführung: Hallo und willkommen in meiner neuen Klasse, moderner Frontend-Webentwicklung. Ich bin Christopher Dodd. Ich bin ein Top-Lehrer hier auf Skillshare.com. 2018 veröffentlichte er seinen allerersten Skillshare-Kurs Understanding Web Development , der später zu einem der meistgesehenen Kurse in der Kategorie Webentwicklung von Skillshare wurde. Die Grundlagen, die ich im Kurs vermittelt habe, gelten zwar immer noch, die Sprachen, Tools und Technologien des Webs entwickeln sich ständig weiter. HTML, CSS und JavaScript sind immer noch die wesentlichen Frontend-Sprachen, aber Compiler wie Sass und TypeScript haben inzwischen an Popularität gewonnen und die Art und Weise, wie CSS und JavaScript geschrieben werden, verändert. JavaScript-Frameworks sind auch bei Frameworks und Bibliotheken wie React, Vue und Angular sehr beliebt geworden bei Frameworks und Bibliotheken wie React, Vue und Angular sehr beliebt . Übrigens, falls Ihnen einige dieser Namen nicht bekannt sind, machen Sie sich keine Sorgen, wir werden sie im Kurs behandeln. Darin werden wir die Frontend-Webentwicklung aus einer moderneren Perspektive betrachten und uns mit einigen der beliebtesten Tools befassen, die heute verwendet werden. Wir werden lernen, Webseiten mit HTML zu schreiben, sie mit CSS und Sass zu stylen und Interaktivität und Datenabruf über JavaScript und TypeScript einzuführen . Wenn Sie daran interessiert sind, sich einen Überblick darüber zu verschaffen , wie moderne Frontend-Webentwicklung wirklich funktioniert, schauen Sie weiter und wir sehen uns drinnen. 2. Frontend vs. Backend Webentwicklung: Das wahrscheinlich wichtigste Konzept, das es in der Webentwicklung zu verstehen gilt, ist der Unterschied zwischen Frontend und Backend. Wir haben das in Understanding Web Development behandelt, aber es ist ein so wichtiges Konzept, dass ich hier eine Auffrischung hinzufügen wollte . Einfach ausgedrückt ist das Frontend jeder Code, der in Ihrem Webbrowser zusammengestellt wird, d. h. das Programm, mit dem Sie im Internet surfen. Der Backend-Code ist im Grunde alles andere. Wenn wir die Uhr ein wenig auf die Anfänge des Webs zurückdrehen , waren Websites einfach Informationsseiten. Diese Art von Website, nur eine statische Seite hauptsächlich Textinhalten mit vielleicht einigen Bildern, war die Norm. Kein ausgefallenes Styling und minimale Interaktivität. Im Grunde waren die einzige Interaktion, die wir hatten, Hyperlinks, das waren Teile der Texte, die blau mit einer durchgehenden Unterstreichung hervorgehoben waren , die uns beim Anklicken zu einer anderen URL weiterleiten würden. Wie würde das passieren? Auf die gleiche Weise wird es heute mit der sogenannten Hypertext Markup Language gemacht, besser bekannt als das Akronym HTML, das dem Browser zur Strukturierung von Text- und Bildinhalten zur Verfügung gestellt wird . Hier können wir beginnen, den Unterschied zwischen dem Frontend und dem Backend zu erkennen . Wenn wir auf diese Website-Adresse zugreifen, teilen wir einem Server mit, welche Inhalte er uns bereitstellen soll, und dieser Inhalt wird in Form von HTML vom Server zurückgesendet . Dieses HTML wird dann vom Browser gelesen und auf unseren Bildschirmen gerendert, so wie wir es hier sehen. Mit jedem modernen Browser können wir ein weiteres Panel öffnen, um den eigentlichen Rohcode anzuzeigen, normalerweise eine Menge Textinhalte innerhalb dieser Dinge , die als HTML-Tags bekannt sind. Heutzutage ist das Frontend oft viel komplexer. Websites sind viel schicker und bieten viel Interaktivität. In einigen Fällen führen Sie ein ganzes Computerprogramm in Ihrem Browser aus, und das sind sogenannte Web-Apps. gängigen Beispielen hierfür gehören Facebook und Google Sheets. Wenn wir JavaScript in unserem Browser ausschalten, können Sie feststellen, dass diese Apps nicht mehr funktionieren. Was Ihrer Website Stil und Interaktivität verleiht ist CSS bzw. JavaScript. CSS steht für Cascading Style Sheets und wird auf HTML aufgeschichtet , um das Aussehen von Standard-HTML komplett zu verändern. JavaScript bietet dann jede Interaktivität außer einigen Grundlagen innerhalb von HTML. Grundsätzlich ist für jede Interaktivität außerhalb von Hyperlinks und Formularfeldern wie Checkboxen, Optionsfeldern und Drop-down-Menüs JavaScript erforderlich, um zu funktionieren. Genau wie HTML werden CSS und JavaScript im Browser ausgeführt und sind somit Teil des Frontends. Um es noch einmal zu wiederholen, das Frontend ist im Grunde alles, was in Ihrem Browser passiert. Vergleichen wir das nun mit dem Backend, das unendlich komplexer sein kann. Das Backend einer Website wird auf dem Server ausgeführt und deckt die gesamte Programmierung ab , die hinter den Kulissen stattfindet , um dem Browser das entsprechende HTML, CSS und JavaScript zu liefern . Das Backend ist im Allgemeinen für die Interaktion mit Datenbanken verantwortlich, bestimmt, ob der Benutzer berechtigt ist , auf bestimmte Informationen zuzugreifen, und stellt diese Daten dann dem erforderlichen Frontend-Code aus HTML, CSS und JavaScript an den Browser bereit. Um dies zu demonstrieren, interagieren wir mit einer der am häufigsten besuchten Seiten im Internet, google.com. Wie Sie hier sehen können, habe ich google.com in meinem Webbrowser, Google Chrome, geladen . Ich bevorzuge Google Chrome und das werde ich für diesen Kurs verwenden. Ich empfehle es für Entwickler, wirklich guter Webbrowser wegen der Entwicklertools, die er hat. Aber wenn Sie Google nicht mögen, werden Sie Google Chrome natürlich nicht mögen, was ich vollkommen verstehe. Welchen Webbrowser Sie für diesen Kurs verwenden möchten , ist in Ordnung Ich werde jedoch während des gesamten Kurses Google Chrome verwenden . Der Grund, warum ich das inkognito geladen habe, hier kannst du sehen, ist, dass ich nicht automatisch angemeldet bin. Ich möchte Ihnen nur den Status der Abmeldung demonstrieren Status der Abmeldung Wenn wir dann über das Backend sprechen, zeige ich Ihnen die eingeloggte Version. Genau hier können Sie sehen, dass es anhand des Sitzungsspeichers oder der in unserem Browser gespeicherten Cookies erkennt dass es anhand des Sitzungsspeichers oder der in unserem Browser gespeicherten Cookies , dass ich derzeit nicht angemeldet bin sodass ich hier klicken kann, um „Anmelden“ zu können. Ich klicke hier einfach auf „Nein, danke“. Fangen wir hier an, mit unserem Frontend-Code zu interagieren. Wenn Sie sich erinnern, was ich gerade gesagt habe, liefert der Server HTML, CSS, JavaScript an den Browser, und der Browser stellt alles zusammen. Dieses HTML, JavaScript und CSS sind alles Frontend-Code. Da es im Browser zusammengestellt ist, können wir tatsächlich den gesamten Rohcode anzeigen. Ich werde auf einem Mac auf Option Command I klicken , um die Entwicklertools aufzurufen. Das hier heißt DevTools, und wenn ich darauf klicke, kann ich all die verschiedenen Panels in diesen Entwicklertools sehen . Das hier ist die JavaScript-Konsole, die wir uns später ansehen werden. Genau hier möchte ich auf „Elemente“ klicken und diesen Teil hier unten schließen. Hier oben können Sie den gesamten HTML-Code sehen und hier unten können Sie das gesamte CSS sehen , das dieser Seite das Design verleiht. Da dies alles in unserem Browser passiert, können wir dies tatsächlich im laufenden Betrieb ändern. Was ich tun kann, ist, dass ich hier auf dieses Ding klicken kann und dann Mauszeiger über verschiedene Elemente auf der Seite bewegen kann, um sie im Code zu sehen. Wenn ich nun auf einen von ihnen klicke, klicken wir auf diese Schaltfläche. Sie können sehen, dass dieser Code hier genau das ist, was diese Schaltfläche hier bestimmt. Wie Sie das HTML-Tag sehen können, ist hier eine Menge los. Offensichtlich ist dies kein einfaches Beispiel, das ist google.com. Aber ich möchte, dass Sie hier beachten, dass wir in diesem Wertfeld die Google-Suche haben, die sich auf den Text bezieht , der auf der Schaltfläche steht. Was ich hier tun kann, ist, dass ich es tatsächlich bearbeiten kann , sodass ich anstelle der Google-Suche einfach in Suchen ändern kann, und Sie können sehen, wie sich die Schaltfläche ändert. Hier im CSS kann ich tatsächlich bestimmte Attribute entfernen. Wenn Sie hier sehen, gilt dieser Stil diese beiden Schaltflächen Wenn ich den Mauszeiger darüber bewege, können Sie sehen , dass er für diese beiden Schaltflächen gilt. Ich kann den Grenzradius loswerden. Ich könnte so etwas wie die Farbe des Textes auf Schokolade ändern und wie Sie sehen können, ist der Schwebezustand ein bisschen anders. Aber wenn es nicht schwebt, wird die Farbe des Textes zumindest schokoladenbraun sein. Dieses Bild hier, es gibt zwei Möglichkeiten, das zu tun, ich kann darauf klicken und dann auf das Element klicken, oder ich kann mit der rechten Maustaste darauf klicken und auf „Inspizieren“ klicken, was meine bevorzugte Methode ist, du wirst mich das wahrscheinlich öfter in der Klasse machen sehen. Sie werden sehen, dass dieses img-Tag hier , ein Bild-Tag in HTML, dieses Bild hier rendert. Wie Sie hier sehen können, gibt es ein src und wenn ich hier mit der rechten Maustaste klicken und „In neuem Tab öffnen“ klicken würde, können Sie sehen dass wir die eigentliche Bilddatei von Google hier haben. Offensichtlich ist das google.com. Sie haben hier viele andere verrückte Sachen. Sie haben hier all diese seltsamen Codes, die sich hier im Klassenattribut befinden. Aber was ich hier versuche , Ihnen zu vermitteln , ist der gesamte Frontend-Code, das gesamte HTML, das CSS und das JavaScript. Es ist schwieriger, mit dem JavaScript zu interagieren. Aber wenn ich hier in den Kopf gehe, kann ich tatsächlich hier suchen und dann kann ich put.js, was eine JavaScript-Datei darstellt und dann gibt es hier vielleicht viel Code. Vielleicht kann ich eine externe JavaScript-Datei finden, nicht wirklich angezeigt wird. Aber hier können Sie innerhalb dieser Skript-Tags sehen, denen wir JavaScript-Code einfügen Hier befindet sich JavaScript-Code, wir tatsächlich kopieren oder uns einfach ansehen können , um zu sehen, was auf der Seite passiert. Aber das JavaScript-Beispiel ist mit HTML und CSS viel schwieriger. Es ist viel einfacher festzustellen, was vor sich geht da Sie hier dieses Panel haben, dem alle Stile angezeigt werden, die dieses Bild-Tag gelten, und Sie können in dem alle Stile angezeigt werden, die für dieses Bild-Tag gelten, und Sie können das eigentliche Bild-Tag tatsächlich auswählen. Wenn ich hier drüben klicke, um es zu berechnen, können Sie beginnen, einige der berechneten Stile zu sehen , und wenn wir hier klicken, können wir sehen, wo das gesetzt ist, sodass die Schrift von Ariel tatsächlich auf dem gesamten Text des Dokuments festgelegt ist, was im Grunde das gesamte Dokument ist. Wenn ich das abklicke, können Sie sehen, dass alle Schriftarten auf die Standardeinstellungen umgestellt werden, was meiner Meinung nach Times New Roman oder so ähnlich ist . Oder wir können die Standardkörperfarbe in etwas anderes ändern . Aber es wird nicht die Stellen überschreiben, an denen wir uns auf bestimmte Elemente konzentriert haben . Es wird diese oder diese Farben nicht außer Kraft setzen. Aber hier geht es um CSS-Spezifität bei einem fortgeschritteneren Konzept. Der Punkt, den ich Ihnen vermitteln möchte , ist , dass uns, als wir zu google.com gingen, der Frontend-Code für unseren Browser zugestellt wurde und unser Browser stellt ihn genau hier zusammen. Die gesamte Interaktivität, die jetzt nach dem Laden der Seite passiert , befindet sich im Frontend. Es ist der HTML-Code, der der Seite Struktur verleiht und die Elemente tatsächlich auf der Seite platziert. Es ist das CSS hier , das das Aussehen und das Layout bestimmt, und es ist das JavaScript, das uns jede Funktionalität bietet. Schauen wir mal, ob wir das können. Wenn ich darauf klicke, öffnet sich hier ein Panel. Es ist möglich, dass das nur CSS ist, aber höchstwahrscheinlich kommt das von JavaScript. Wenn ich hier auf „Nach Bild suchen “ klicke, kann ich sehen, dass sich hier ein Fenster öffnet und dann kann ich hier klicken, „Eine Datei hochladen“, von meinem Dateisystem aus, dass die Interaktivität im Frontend stattfindet ohne dass wir die Seite neu laden. Eine Sache, die Sie jetzt bemerken werden, ist, dass diese Änderungen weg waren, wenn ich die Seite aktualisiere . Was interessant ist, aber offensichtlich macht es Sinn. Ich kann hierher zurückkehren und das ändern , um einfach erneut zu suchen. Aber Google wird uns natürlich nicht erlauben, ihre Website für alle zu ändern. Jedes Mal, wenn Sie Code von einem Server an Ihren Browser senden, können Sie ihn ändern. Aber das wird natürlich nicht auf dem eigentlichen Google-Server gespeichert und für alle geändert. Dies passiert nur in Ihrer Version, die Sie des Besuchs der Adresse vom Server abgerufen Zeitpunkt des Besuchs der Adresse vom Server abgerufen haben. Wenn ich hier noch einmal aktualisiere, wird es wieder vom Server abgerufen und jetzt können Sie sehen, dass es plötzlich in den Dunkelmodus wechselt und es ist auch festgestellt, dass ich das in Australien aufnehme. Das ist eine zusätzliche Zauberei von Google dort. Aber jetzt öffne ich Google in einem neuen Fenster, einem Nicht-Inkognito-Fenster. Hier kannst du sehen, dass wir eine ähnliche Erfahrung gemacht haben, aber der Unterschied ist, dass du siehst , dass ich gerade angemeldet bin. Sie können meinen Namen und meine E-Mail-Adresse sehen , die aus Datenschutzgründen versteckt ist. Das ist meine Standard-E-Mail. Sie können mich natürlich über meine berufliche E-Mail kontaktieren, aber nicht über meine persönliche, bitte respektieren Sie das. Aber hier seht ihr meinen Namen und mein Foto hier und wo kommt das her? Offensichtlich stammt das aus einer Datenbank und diese Daten sind speziell für mich. Da ich angemeldet bin, also autorisiert bin, auf diese Daten zuzugreifen, habe ich jetzt mein Profilfoto, Namen und meine E-Mail-Adresse auf dieser Seite. Das kommt vom Backend und all diesen Operationen und Dingen, die ich mir im Browser ansehen und mit denen ich herumspielen kann. Dinge wie Autorisierung , Datenerfassung, herausfinden, welche Daten bereitgestellt werden sollen, das sind alles Backend-Zeug. Denn wenn es zunächst am Frontend gemacht würde, wäre es ein großer Albtraum für die Privatsphäre. Sie möchten nicht, dass ich auf Ihr Google-Konto oder das Google-Konto einer anderen Person zugreifen kann. Jedes Google-Konto muss getrennt sein. Wie Sie sehen können, kommt dies vom Backend aus und im Backend erfolgt die eigentliche permanente Änderung für eine solche App. Der Punkt ist, wir haben unseren Frontend-Code. Wir können hier reingehen. Wir können es so oft ändern, wie wir wollen. Ich könnte sogar mein Profilfoto hier gegen ein anderes Bild ändern . Wie Sie hier sehen können, kann ich direkt zu dem Bild gehen , das in einem neuen Tab geöffnet wird. Ich kann tatsächlich direkt zum Bild gehen. Ich könnte diese URL einfach hier im HTML durch ein anderes Bild ersetzen , und das würde das Bild aktualisieren. Ich kann meinen Namen ändern. Lass uns sehen. Wenn ich hier reingehe. Dadurch werden mir alle meine Konten angezeigt. Wenn ich das rüberziehe, damit du siehst, dass es ziemlich verschachtelt ist. Ich könnte zum Beispiel sogar meinen Namen in Michael Jackson ändern . Wenn ich dann hier drüben klicke, bin ich jetzt Michael Jackson. Ich kann den ganzen Frontend-Code ändern, aber das Backend wird dadurch natürlich nicht geändert. Das Backend ist das, was uns HTML, CSS und JavaScript bietet. Jedes Mal, wenn wir eine Anfrage an den Server stellen, eine Aktualisierung hier drüben vornehmen und ich hier drüben klicke, bin ich wieder Christopher Dodd, weil es diese Daten vom eingeloggten Nutzer aus dem Google-Backend abruft Nutzer aus dem Google-Backend und sie dann mit HTML, CSS und JavaScript zusammenfügt , um das Frontend-Erlebnis zu erstellen, das dann in Ihrem Browser zusammengestellt wird. Hoffentlich können Sie anhand dieses Beispiels sehen, wie dies in der realen Welt funktioniert, die Unterscheidung zwischen Frontend und Backend. Ich verwende dieses Beispiel gerne, weil ich denke, dass es den Unterschied zwischen den beiden wirklich demonstriert . Wie wir hier sehen können, gibt es hier keinen Backend-Code. Ich kann nicht direkt auf die Datenbank zugreifen. Das wäre natürlich ein großer Sicherheits-Albtraum. Das Backend ist all das Zeug, all meine Kontodaten, komplexere Operationen. Das einzige, was im Frontend durchkommt , ist die Struktur der Seite, das Design der Seite und jegliche Interaktivität, die ohne Neuladen der Seite erfolgen muss . Sie können hier sehen, dass ich dieses Panel öffnen kann und einige der Stile hier geändert sind JavaScript erledigt das tatsächlich für uns, weil wir die Seite nicht neu laden. Wir bekommen eine gewisse Frontend-Interaktivität. Ich kann das öffnen und meine Apps holen. Ich lasse es dabei, Leute. Im nächsten Video werden wir tatsächlich etwas HTML schreiben und dann werden wir darauf mit CSS, JavaScript und dann einigen der Präprozessor-Tools aufbauen JavaScript und dann einigen der , die auf diesen Sprachen basieren. Wir sehen uns im nächsten Video. 3. HTML: Wie wir im letzten Video gelernt haben, ist HTML die Standard-Markup-Sprache für das Web. Auszeichnungssprache gemäß der Britannica-Enzyklopädie, d. h. ein Standardtextkodierungssystem, das aus einer Reihe von Symbolen besteht, die in ein Textdokument eingefügt werden , um dessen Struktur, Formatierung oder die Beziehung zwischen seinen Teilen zu steuern . Die Markup-Symbole können von einem Gerät, Computer, Drucker, Browser usw. interpretiert werden , um zu steuern, wie ein Dokument aussehen soll wenn es gedruckt oder auf einem Monitor angezeigt wird. Ein markiertes Dokument enthält also zwei Arten von Text. Der anzuzeigende Text und die Markup-Sprache, in der er angezeigt werden soll. Ich denke, das ist eine ziemlich gute Beschreibung. In HTML haben wir, wie in anderen Markup-Sprachen, Tags und dann haben wir den Inhalt des Tags dazwischen. Dieses Tag hier mit dem Kleiner-Als-Zeichen und dem Mehr-Als-Zeichen steht für ein Standard-HTML-Tag. In den meisten Fällen werden jedoch einige Texte danach kommen. Dann zeigt das Standard-HTML-Tag mit einem Schrägstrich nach dem Kleiner-Als-Zeichen an, einem Schrägstrich nach dem Kleiner-Als-Zeichen an, dass dies das Ende des Inhalts für dieses bestimmte HTML-Element ist . Wir können Elemente auch in andere Elemente verschachteln , und Sie werden dies die ganze Zeit in HTML sehen . Es ist ein System, bei dem Elemente so konzipiert sind, in andere Elemente eingefügt werden können, um eine baumartige Struktur zu erstellen treffend den Namen Dokumentenbaum trägt. Wir können jede HTML-Struktur als Baum anzeigen indem wir ein Tool wie diesen Live DOM Viewer verwenden. Aber anstatt hier tiefer in die Theorie einzutauchen, sollten wir etwas HTML schreiben und sehen, wie es in Aktion funktioniert. Der Code-Editor, den ich für den heutigen Kurs verwenden werde , heißt Visual Studio Code. Es ist sehr beliebt, weil es im Grunde alle Funktionen eines kostenpflichtigen Code-Editors bietet , der von Microsoft völlig kostenlos erhältlich ist. Viele Leute benutzen es, auch ich. Ich sehe keinen Grund , einen anderen Code-Editor zu verwenden. Aber wenn Sie diese Klasse aus irgendeinem Grund in einem anderen Code-Editor machen möchten, können Sie das natürlich tun. Einige der Anweisungen werden etwas anders sein, aber in den meisten Fällen können Sie jeden Code-Editor verwenden , dem Sie folgen möchten. Wenn wir Visual Studio Code noch nicht installiert haben , googeln Sie es einfach. Visual Studio Code wurde, wie Sie sehen können, von Microsoft entwickelt, erstes Veröffentlichungsdatum 2015. Es gibt es schon eine Weile, aber in den letzten, ich würde sagen 3-5 Jahren, ist es wirklich beliebt geworden. Hier können Sie sehen , dass festgestellt wurde, dass ich einen Mac verwende, sodass ich einfach hier klicken kann , um die für mein Betriebssystem geeignete Version herunterzuladen . Was ich tun werde, ist, dass ich wieder zu Visual Studio Code wechseln werde . Eigentlich werde ich hier zu meinem Finder-Fenster wechseln und ein neues Projekt für den heutigen Kurs erstellen. Ich nenne es einfach Modern Web Development. Dann kann ich von hier aus, wie es hier heißt, eine Datei oder einen Ordner mit dieser Verknüpfung öffnen. Also verwende ich einfach die Verknüpfung und navigiere dann in diesen Codeordner und öffne diesen Ordner. Jetzt haben wir unser leeres Projekt. Ich werde den Visual Studio-Code später aktualisieren. Und hier kann ich entweder darauf klicken oder ich kann mit der rechten Maustaste auf „Neue Datei“ klicken und ich werde eine index.html erstellen. Es gibt einen Grund, warum ich es index.html genannt habe. Index bedeutet im Allgemeinen, dass dies die Homepage oder die Root-Datei einer Adresse ist und dann soll die extension.html angeben, um welche Datei es sich handelt. Das ist wichtig, weil wenn wir einen Server betreiben, er nach der Indexdatei sucht, wenn wir uns auf der Root-Route oder der Root-URL befinden. Lassen Sie mich das ganz schnell demonstrieren. Lassen Sie mich einfach etwas HTML eingeben um uns den Einstieg zu erleichtern, und dann werden wir darauf zurückkommen. Wir machen einfach Hello World zwischen ein paar H1-Tags. Ich klicke darauf auf „Speichern“. Die empfohlene Methode, um es zunächst in Ihren Browser zu laden , ist, wenn wir einfach zu Google Chrome gehen und dann den Finder öffne, können wir diese HTML-Datei buchstäblich einfach in Google Chrome ziehen und sie wird geladen. Da haben wir es, wir haben unsere Überschrift mit der Aufschrift Hallo Welt. In diesem Fall spielt es keine Rolle, wie wir unsere Datei nennen. Ich könnte es in page.html umbenennen. Wenn ich darauf klicke, wird Fehler angezeigt, weil sich der Pfad geändert hat, aber wenn ich ihn hier auf page.html ändere, ist es in Ordnung. Aber wenn wir so etwas wie einen Server betreiben würden , haben wir hier unten diesen Button, auf den wir klicken müssen, um einen Live-Server zu starten. Dies ist eine Erweiterung. Wenn wir hier zu den Erweiterungen gehen, können Sie die Erweiterungen sehen, die ich installiert habe. Es heißt Live Server von Ritwick Dey. Wenn Sie das installieren möchten, werden wir das wahrscheinlich später in der Klasse verwenden. Wenn wir das gemacht haben und auf „Go Live“ geklickt haben, erhalten wir immer noch page.html. Aber wenn wir zum Stammverzeichnis gehen, dieser Adresse, werden Sie sehen , dass sie nicht geladen wird. Wenn wir möchten, dass die Seite im Stammverzeichnis unserer Adresse geladen wird, müssen wir sicherstellen, dass sie Index heißt. Wenn ich hier auf „Speichern“ klicke, aktualisiere es hier, du kannst sehen, dass es keine Angabe dafür gibt , wie die Seite heißt, weil sie mit index.html im Stammverzeichnis der Adresse geladen wird . Weil wir hier einen Server betreiben, haben wir eine IP-Adresse und einen Port. Ich möchte hier nicht zu tief in dieses Zeug eintauchen. Ich will dich nicht theoretisch überfordern. Lassen Sie uns tatsächlich in etwas HTML einsteigen. Ich werde einfach den Server entsorgen. Kehren wir zu dem zurück, was wir zuvor hatten, nämlich das Ausführen vom Dateisystem aus. Wie Sie hier sehen können, heißt es hier, Sie betrachten eine lokale oder geteilte Datei und hier haben wir unser HTML-Dokument. Was ich tun werde, ist, das zu schließen. Versuchen wir, beide so auf den gleichen Bildschirm zu bringen. Dann lassen Sie uns das wirklich loswerden, speichern, hier aktualisieren und Sie können sehen, dass wir jetzt nichts haben. Fangen wir mit etwas HTML an. Ich werde den Explorer hier schließen und die Größe hier erhöhen, die Größe hier erhöhen, damit er besser zu erkennen ist. Wir können tatsächlich etwas HTML-Code für Boilerplate-Inhalte erhalten , indem wir einfach HTML in Visual Studio Code eingeben , und dann kann ich diesen Boilerplate-Code abrufen, sogenannten Boilerplate-Code. Wenn ich rauszoome, kannst du sehen. Lassen Sie uns das zunächst nicht tun, weil wir gerade HTML lernen. Was wir brauchen werden, sind zwei Dinge. Wir werden eine Kopf- und eine Körpermarke benötigen. diese beiden Tags benötigen wir Für diese beiden Tags benötigen wir ein abschließendes Tag, weil wir Dinge darin verschachteln werden. Öffnen wir eine Stirnmarke. Sie können sehen, dass Visual Studio Code uns bei der praktischen automatischen Vervollständigung hilft und uns die Referenz von MDM gibt. Los geht's. Wenn ich darauf drücke, wird automatisch das abschließende Tag für mich erstellt, was, wie wir bereits besprochen haben, genau dasselbe ist, aber es hat diesen Schrägstrich vor dem Wort. Ich gehe da rein und drücke „Enter“ und das öffnet sich schön formatiert mit Einrückungen hier. Das ist nur Formatierung, damit der Code einfacher zu lesen ist. Dann gehe ich runter und erschaffe den Körper und ich bekomme dasselbe. Wenn ich auf „Enter“ drücke, erhalten wir hier ein paar nette Einzüge. Wenn wir wollen, dass etwas auf der Seite erscheint, müssen wir es in unsere Body-Tags eintragen. Wenn ich zurücklege, was wir vorher hatten. Lass es uns ohne den H1 machen. Ich sage einfach Hallo Welt, nur ein paar grundlegende Textinhalte, aktualisiere hier drüben, du wirst sehen, dass es erscheint. Wofür der Header verantwortlich ist, ist alles, was mehr Meta für das Dokument ist. Wir sprechen über den Titel des Dokuments, Verweise auf CSS-Dateien , die wir möglicherweise einbringen, SEO-Informationen und solche Dinge. Dinge, die nicht auf der Seite angezeigt werden, aber trotzdem wichtig für die HTML-Datei sind. Das gebräuchlichste Beispiel hier ist der Titel. Ich kann dieses Title-Tag erstellen und zwischen dem öffnenden und dem schließenden Titel-Tag einen Titel eingeben. Du kannst das nennen , wie du willst, meine erste Webseite. Wenn ich darauf auf „Speichern“ klicke, möchte ich, dass du beachtest, auf dem Tab hier nur der Dateiname steht. Nun, wenn wir jetzt aktualisieren, wirst du sehen , dass es meine erste Webseite sein wird. Das ist also für den Nutzer, aber auch für Google-Suchmaschinen. Alles, was die Seite auf einer anderen Website einfügt oder einbettet. Wenn Sie diese Seite zum Beispiel auf Facebook teilen würden , Sie jetzt dem Dokument und dem Internet den Namen der Seite mit. Im Moment ist das alles, was ich für die Kopfmarke tun werde. Gehen wir zur Leiche. Wie Sie bereits gesehen haben, habe ich einen H1 erstellt. Eine H1 ist eine Abschnittsüberschrift, also lassen Sie uns das einfach ausführen und dann klicke ich hier auf „Aktualisieren“, und wie Sie sehen können, bekommen wir ein gewisses Styling sofort. Was ein H1 ist, ist eine Überschrift auf oberster Ebene, also glaube ich, es geht bis H6. Ja, hier kannst du bis H6 sehen . Wenn wir es nicht in unserem CSS festgelegt haben, erhalten wir ein Standardstyling wobei H1 das größte ist, und wenn wir dann ein H6 und Set haben würden , nennen wir das einfach eine Überschrift der sechsten Ebene. Erfrischen Sie sich hier. Sie können sehen, dass es wahrscheinlich noch kleiner ist, als wenn wir normalen Text eingeben würden . Ja, es ist sogar kleiner als normale Texte, was ein bisschen komisch ist, aber du verstehst, worum es geht. Es gibt den ganzen Weg von H2, Überschrift der zweiten Ebene, wie Sie sehen können, und von Haus aus ist es mit einem grundlegenden Design ausgestattet. Es ist jedoch wichtig, hier zu beachten, dass Sie die richtigen Überschriften verwenden möchten, auch außerhalb des Stylings, da dies für Google nur ein Zeichen für eine gute Formatierung ist . Google scannt eine Webseite tatsächlich und stellt fest, ob sie korrekt strukturiert ist. Daher sollten Sie diese Überschriften-Tags immer korrekt verwenden. Wenn Sie ein Dokument schreiben, haben Sie Ihre oberste Überschrift und wenn Sie darunter eine Überschrift erstellen möchten, wäre das Überschrift 2, und wenn Sie eine Überschrift darunter erstellen möchten , wäre es Überschrift 3. Verwenden Sie immer noch die richtige Überschrift, auch wenn Sie mit verschiedenen Stilen arbeiten. H1-H6 ist ein sehr verbreitetes Schlagwort. Ich werde diesen H6 gleich hier loswerden . Anstelle von normalem Text zeige ich Ihnen ein anderes beliebtes Tag, das Absatz-Tag. In Visual Studio Code kann ich einfach Lorem eingeben, auf „Tab“ klicken und Lorem ipsum wird eingefügt. Wenn ich hier auf „Speichern“ klicke, aktualisiere es hier, du wirst sehen, dass wir diesen Absatz bekommen. Nun, was in HTML wichtig ist, ist, dass wir, sofern wir es nicht ändern, das Styling mit HTML sofort verwenden. Lass mich das einfach öffnen und dann kann ich es dir in den DevTools zeigen. Wenn ich auf einem Mac auf „Option Command I“ drücke. Jetzt können wir den Ausgabecode hier sehen. Es ist genau das Gleiche, was wir hier haben, aber jetzt können wir sehen, wie es im Browser ankommt und wir können tatsächlich damit interagieren. Wir können tatsächlich reingehen und Wörter ändern, wie wir es im Google-Beispiel getan haben, und wir können solche Tags schließen und erweitern. Aber wir können auch die berechneten Stile sehen. Wenn wir den Mauszeiger hier über dieses P-Tag bewegen, können Sie sehen, wie Orange über und unter dem Absatz erscheint. Ich kann meinen Cursor nicht gleichzeitig mit dem Mauszeiger darüber bewegen und es gleichzeitig anzeigen. Aber du kannst links sehen, dass du P hast, es sagt dir die Abmessungen davon und dann zeigt es dir einen orangefarbenen Raum darüber und darunter, und dann zeigt es dir es sagt dir die Abmessungen davon und dann zeigt es dir einen orangefarbenen Raum darüber und darunter, der tatsächlich Polsterung ist , und wir können das überprüfen, indem wir hier auf Computed gehen und uns das ansehen, das sogenannte Boxmodell. Sie können sehen, hier haben wir es, es ist eigentlich keine Polsterung, ich bin korrigiert, es ist Rand. Die Margen sind ein bisschen anders. Wir werden in dieser speziellen Klasse nicht auf das Box-Modell eingehen, aber ich behandle es in meinem HTML- und CSS-Kurs hier auf Skillshare, sodass Sie sich das ansehen können. Aber wie Sie hier sehen können, haben wir standardmäßig einen gewissen Spielraum. Wenn wir zur zweiten Überschrift übergehen, können wir sehen, dass wir standardmäßig auch einen gewissen Spielraum haben. Aber wir haben hier auch einige andere Standardeinstellungen, z. B. dass die Schriftgröße um 50 Prozent größer ist und der Anzeigestil Block ist. Wir werden uns später mit Stilen befassen. Aber ich möchte hier nur darauf hinweisen , dass wir, wenn wir HTML ohne CSS schreiben, etwas CSS umsonst bekommen. Wir bekommen standardmäßig etwas CSS. Hier oben in unserem H1 können Sie sehen, dass wir eine Schriftgröße haben , die 2em ist, was eine Einheit ist. Offensichtlich ist das eine zusätzliche Hälfte auf der H2. Aber das alles ist mit CSS vollständig editierbar, es sind nur Standardeinstellungen in HTML. Hier können Sie in Styles gehen und das User Agent Stylesheet sehen, das dem Standard-Stylesheet ähnelt. Dies kann sich ändern, je nachdem , welchen Browser Sie gerade betrachten. Aber dann kannst du auch hier in Computed gehen, und dieser Button hier zeigt dir , woher das kommt. Ich glaube, die Schriftstärke ist auch fett und das ist ein Unterschied. Aber nur um hier ein bisschen voranzukommen, können wir dies auf eine geringere Schriftstärke ändern. Es ist immer noch ein H1, aber es hat einfach nicht das H1-Standardstyling. Das ist also wichtig zu wissen. Lassen Sie uns einige der anderen gebräuchlichen Tags behandeln , die Sie in HTML sehen werden. Wie ich in den vorherigen Videos erwähnt habe, ist das A-Tag, bei dem es sich um den Hyperlink handelt , ein übliches Tag. Es ist nur ein einfaches A. Wir haben hier unser Abschlussschild. Wir wollen das auf die andere Seite des Textes setzen , wir wollen einen Hyperlink. Wenn ich auf „Speichern“ klicke und hier aktualisiere, sollten wir normalerweise ein Standardstyling erhalten. Aber ich denke, weil wir noch keinen Href haben, müssen wir ihn tatsächlich einsetzen, und das wird unser erstes Attribut sein. Wir können dem Eröffnungs-Tag Attribute hinzufügen , nicht dem schließenden Tag, dem Opening-Tag. Wie Sie hier sehen können, enthält href die URL oder das Fragment, auf das der Hyperlink zeigt. Das ist es, wonach wir suchen. Wenn ich das öffne, ist es egal, was ich hier reinlege. Lassen Sie uns einfach einen Hash eingeben, der der übliche Platzhalter ist, und dann drücke ich auf „Speichern“, aktualisieren Sie hier, Sie werden sehen, dass ich jetzt das Standarddesign für einen Hyperlink erhalte . Wir ändern unseren Cursor. Wir bekommen die Texte blau und unterstrichen. Das ist sehr altmodisch. Normalerweise wird dieser Stil von vielen Websites überschrieben, aber das ist das klassische Styling eines Hyperlinks. Ich habe die DevTools hier gerade wieder geöffnet und werde sie hier einfach ablegen. Ich denke, wir können uns alle drei gleichzeitig ansehen. Wie Sie hier sehen können, ist die Farbe, wie ich bereits erwähnt habe, Webkit-Link, was eine Variable ist, und unser Cursor wird ein Zeiger sein und wir werden ihn unterstreichen. Sie können hier sehen, oder wenn wir zu Computed gehen, ist das normalerweise die tatsächlich berechnete Farbe genau dort und der Zeigerstil für den Cursor. Auch hier können wir reingehen, was wir später tun werden, und das durch etwas anderes ändern. Cursor, wir können zum Beispiel ein Fadenkreuz machen. Wenn Sie einen Link haben, können Sie hier zu diesem Fadenkreuz-Cursor wechseln. Wir können das mit CSS auf alles einstellen, was wir wollen. Der Punkt ist, wir haben einige Standardstile sofort einsatzbereit. Bevor ich nun diese Datei mit dem Namen page.html erstellt habe, gehen wir zurück und legen sie in page.html ab und lassen Sie uns hier richtig faul damit umgehen. Lass uns einfach nochmal Hello World ohne HTML-Tags einfügen. Aber ich will dir hier nur zeigen, dass wir tatsächlich auf diese Seite verlinken können und wenn ich dann hier neu lade, klicke darauf, dann wirst du sehen, dass es ein bisschen eng ist. Aber Sie können hier sehen, dass uns das zu page.html führt. Wenn ich das komplett erweitere, gehen wir zurück zu hier und dann fügen wir vielleicht hier einen Link ein und schicken ihn zurück an index.html. Geh nach Hause. Wenn ich jetzt hier aktualisiere und auf „Go Home“ klicke , kehren wir zu index.html zurück. Jetzt können wir zwischen zwei Dateien verlinken. Ich werde page.html entfernen, das war nur, um auf Hyperlinks hinzuweisen. Das löschen wir einfach. Bring das in den Müll. Das sind alles sehr einfache Dinge, Leute, wenn ihr dafür zu weit fortgeschritten seid, gerne weitermachen. Aber wir werden jetzt noch einige weitere HTML-Tags behandeln. Wie ich im Vorfeld dieses Videos erwähnt habe, können wir auch ein Bild hinzufügen , und wir haben gesehen, dass es im Google-Beispiel nur ein IMG-Tag war und dieses ein sich selbst schließendes Tag ist. Wir brauchen dafür eigentlich kein abschließendes Tag, denn alles, was wir tun müssen, ist, ihm die Adresse des Bildes zu geben, das wir zeigen möchten, und das tun wir über das SRC-Attribut und dann zwischen diesen doppelten Anführungszeichen den Link zu einem Bild einfügen. Das ist nur ein Platzhalterbild und dann schließe ich es einfach mit dem Kleiner-Als-Zeichen. Das ist das Größer-und-Zeichen, also setzt du es einfach ans Ende und du hast ein wohlgeformtes HTML-Tag. Los geht's, aktualisieren Sie hier und hier können Sie sehen , dass das Bild etwas Ladezeit benötigt, bis das Bild von dieser externen Quelle geladen wird Ladezeit benötigt, bis das Bild von dieser externen Quelle geladen wird. Es ist jetzt zwischengespeichert, sodass es nicht erneut geladen wird. Aber jetzt können Sie sehen, dass wir hier unser Platzhalterbild haben. Wenn wir das überprüfen, werden Sie feststellen, dass wir, nein, wir haben damit keine Margen erzielt. Lassen Sie uns das hier schließen. Lassen Sie mich dieses Dokument etwas anders strukturieren. Wir haben, lassen Sie uns hier einfach einen Absatz von Lorem Ipsum einfügen. Das legen wir da hin. Lassen Sie mich das erweitern. Wir werden das Bild hier unter die Überschrift der zweiten Ebene stellen . Ich nenne diesen Text einfach mit Bild. Klicken Sie darauf auf „Speichern“ und aktualisieren Sie es hier. Sie können jetzt sehen, dass wir diesen Abschnitt hier unten haben. Ich füge hier ein zusätzliches Tag von hr hinzu, was meiner Meinung nach eine horizontale Regel ist, für die sie steht, und sie wird einfach eine Linie zwischen den Inhaltsstücken ziehen. Speichern, aktualisieren Sie hier, Sie werden sehen, dass diese Zeile erstellt wird. Dann füge ich hier einen weiteren Textabsatz ein und füge dann etwas ein, dann nur um ein Blockzitat zu demonstrieren. Dies ist hauptsächlich ein semantisches Tag, aber das Einfügen eines Zitats. Was ich mit Semantik meine ist, dass es nicht viel Styling gibt, also ist es hauptsächlich nur die Benennung. Ich kann hier ein Zitat sagen : „Ein Mann ohne Auto kommt nicht sehr weit.“ Eines meiner Lieblingszitate. Wie Sie hier sehen können, sieht es genauso aus, nur mit einigen Einrückungen. Wenn ich meine Dev-Tools erneut öffnen, nach unten scrollen und hier mit der rechten Maustaste klicken würde, können Sie sehen, dass wir hier nur ein Attribut namens margin-block-start haben , das ihm diesen Rand links von 40 Pixeln gibt. Dann hast du diese 16 Pixel oben. Tatsächlich haben Sie auch 40 Pixel auf der rechten Seite, das ist es, was ihm diese eingerückte Funktionalität hier oder das eingerückte Aussehen verleiht , und dann fügen wir einfach einen weiteren Absatz an das Ende, aktualisieren Sie es hier und Sie können sehen. Lassen Sie uns hier einen neuen Abschnitt erstellen. Erstellen Sie hier ein weiteres h2. Nennen wir diesen Absatz und diese Liste. Jetzt zeige ich Ihnen hier eine gängige HTML-Struktur. Wir können entweder eine geordnete Liste oder eine ungeordnete Liste öffnen. Ungeordnete Listen sind in der Regel üblicher, also gehe ich nach ul, was für ungeordnete Liste steht, öffne und dann erstellen wir ein verschachteltes LI-Tag für alle Listenelemente in der Liste. Erstes Element, wir werden es in nur einem zweiten Element auf unserem Bildschirm sehen , ein zweites Element und ein drittes Element. Wenn ich hier auf „Speichern“ klicke, haben wir eigentlich vergessen, es hier in einen Absatz zu setzen. Nochmals, nur noch ein bisschen Lorem ipsum. Klicken Sie auf „Speichern“, aktualisieren Sie es hier und wie Sie sehen können, haben wir unsere Liste hier. Wenn ich es noch einmal überprüfen würde, was ich dieses Mal nicht tun werde weil ich denke, Sie verstehen, worum es geht, würde ein gewisses Styling darauf angewendet werden , das ihm diesen Punkt und die Einrückung verleiht . Automatisch gibt es auch ein gewisses Styling auf der UL. Wenn wir eine geordnete Liste erstellen möchten die nur nummeriert werden soll , können wir das u durch ein o ersetzen. Aktualisieren Sie hier und Sie können sehen, ob wir ein viertes Element hinzufügen würden, es wird automatisch als vier angezeigt. Speichern Sie das, ich verschiebe das jetzt zurück, aktualisiere es hier drüben, und das vierte Element hat automatisch eine Vier vor sich. Abschließend werde ich Ihnen einige Formularfelder zeigen. Dies ist die größte sofort einsatzbereite Funktionalität, die Sie mit HTML erhalten können. Lass uns erstellen, ich nenne diesen Absatz einfach mit Formular, und dann füge ich hier etwas Lorem Ipsum ein. Aber dann, nach dem Absatz von Lorem ipsum, werde ich ein Formular eingeben. Formulare funktionieren nun so, dass wir Details, die wir hier eingegeben haben, an eine bestimmte Adresse senden können , und das tun wir über das Action-Attribut. Wenn ich hier Eingaben dazwischen einfüge und dieses Formular absende , werden die Daten an eine bestimmte URL gesendet. So verwendet man normalerweise Formulare. Aber vorerst zeige ich Ihnen nur die tatsächlichen Eingaben selbst. Der erste, den ich dir zeige, ist Text. Dies sind selbstschließende Tags. Wir müssen das nicht abschließen. Ich gebe einfach die Art des Eingabetextes ein und das reicht aus, um es im Grunde zum Laufen zu bringen. Wenn ich hier etwas aktualisiere, können Sie sehen, dass wir hier dieses Feld haben dem wir jetzt eine gewisse Interaktivität haben. Ich kann hier reinlegen, was ich will , hallo Welt. Ich habe dieses Feld mit bearbeitbarem Text. Ich kann hier auch einen Wert eingeben, also wenn es geladen wird, ist schon etwas Text drin. Da hast du es. Aber natürlich ist es eine Eingabe, damit ich sie ändern kann. Ich könnte auch, indem ich diesen Wert hier los werde, ihn in ein Zahlenfeld ändern, ihn in ein Zahlenfeld ändern, das im Grunde genauso aussieht , wenn ich es hier aktualisiere. Aber jetzt können Sie diese Aufwärts- und Abwärtspfeile sehen. Ich tippe gerade Zeichen hier ein, es funktioniert nicht. Ich muss eine Zahl eingeben. Es akzeptiert nur eine Zahl, und dann kann ich rauf und runter gehen. Das ist ein Zahlenfeld. Nummer 1, die wir tun können, ist das Kontrollkästchen hier aktualisieren, und Sie können sehen, dass ich darauf klicken kann, um es ein- und auszuschalten. Offensichtlich macht das nicht wirklich viel Sinn. Normalerweise verwenden wir ein Etikett. Ich kann ein Label erstellen, das Kontrollkästchen in das Etikett setzen und dann hier etwas Text schreiben. Sagen wir einfach, es ist wie ein Formular, in dem Sie einer Sache zustimmen. Ich sage nur, dass ich zustimme. Wenn ich dann auf das Etikett klicke, wird auch das Kontrollkästchen aktiviert. Fahren wir mit der Erstellung von Optionsfeldern fort. Nun, Radiobuttons sind etwas komplexer, weil wir ihnen allen einen Namen geben müssen ihnen allen einen Namen geben müssen , damit wir wissen, dass sie miteinander verwandt sind. Ich nenne das Radio 1 und lassen Sie uns einfach, was sollen wir hier sagen Option 1, ich nenne es einfach Option 1. Wir werden mehrere davon benötigen. Ich kopiere und füge es ein. Lassen Sie uns tatsächlich ein wenig herauszoomen, damit wir hier alles sehen können. Option 2. Wir wollen das als Radio 1 behalten, also sind diese miteinander verknüpft. Ich klicke auf „Speichern“ und aktualisiere es hier. Bei Radios besteht der Unterschied zwischen diesem und Checkboxen darin, dass, wenn ich eines auswähle und dann ein anderes auswähle, wird die Auswahl aus dem ersten entfernt. Das tut es, weil diese in derselben Gruppe sind. Wenn ich diese erstellen oder duplizieren und wir diese beiden im Namensfeld Radio 2 nennen, dann wären sie miteinander verknüpft. Wenn ich in diese erste Gruppe gehe und hier auswähle, wird die Auswahl aus dem anderen Radio in der Gruppe entfernt . Wenn ich hierher gehe, ist das eine separate Gruppe, also wird sie nicht aus der ersten entfernt, es sei denn, ich habe vergessen, das zu ändern, und jetzt haben wir dieselbe Gruppe. Aber dann müssten wir diese Option 4 schreiben. Sehr einfaches Zeug, aber es gibt Ihnen nur einen Überblick über einige gängige Komponenten in HTML. Wir haben auch einen Textbereich, der ziemlich einfach ist. Es ist eigentlich ein Tag mit einem abschließenden Tag, und der Platzhalterinhalt, den wir in den Textbereich einfügen können , ist das, was wir zwischen die beiden Tags setzen . Lassen Sie uns etwas Lorem Ipsum in einen Textbereich legen. Wie Sie hier sehen können, können wir dieses Feld tatsächlich erweitern, was interessant ist. müssen wir dazu etwas mehr Formatierung vornehmen Normalerweise müssen wir dazu etwas mehr Formatierung vornehmen, aber hier können Sie sehen, dass wir im Grunde etwas Lorem Ipsum in einem mehrzeiligen Textfeld haben . Das ist auch anpassbar. Wir können mit einem bestimmten Inhalt beginnen, mit dem Lorem ipsum und ihn dann ändern. Das ist ein Textbereich. Dann ist das, was ich Ihnen zeigen werde, die Auswahl . So erstellen wir ein Drop-down-Menü. Wir haben unsere Auswahl und darin wollten wir Nestoptionen. Auch hier gehe ich zu Option 1, füge ein Duplikat ein, Option 2 und Option 3. Die aktuell ausgewählte ist standardmäßig die erste. Wenn ich hier aktualisiere, können Sie sehen, dass wir ein Drop-down-Menü haben, in dem die erste Option automatisch ausgewählt ist. Es kommt vom Bildschirm. Lassen Sie mich einfach etwas davon entfernen. Lass uns einfach bis hierher gehen. Speichern, aktualisieren Sie es hier. Wenn ich hier klicke, können Sie sehen, dass wir in diesem Drop-down-Menü verschiedene Optionen auswählen können. Wenn wir möchten, dass eine andere Option als die erste ausgewählt wird, können wir hier ein optionales Attribut eingeben, einfach ausgewählt, fertig. Aktualisieren Sie und Sie können sehen Option 2 jetzt standardmäßig ausgewählt ist, aber wir können sie hier ändern. Das meine ich mit Interaktivität ohne JavaScript, das ist Standard in HTML, und das ist eine Web-1.0-Version der Webentwicklung. Lassen Sie mich diese Aussage etwas näher erläutern. Web 1.0 ist im Grunde die erste Version des Webs, die dieser sehr ähnlich war. Es war nur ein vertikales Layout mit nur Überschriften, Absätzen und Formularen und Listen, all das Zeug, das wir in diesem Video gemacht haben. Es war sehr einfach. Es gab nicht viel Styling. Laufe der Zeit gibt es diesen Begriff Web 2.0, der über das aktuelle Web spricht abgesehen von all dem Blockchain-Zeug, das vor sich geht, das jetzt die Bezeichnung Web 3.0 trägt. Web 2.0, in dem wir uns gerade befinden, besteht aus zweidimensionalen Layouts mit viel mehr Interaktivität, die durch JavaScript bereitgestellt wird. In Web 1.0 waren es nur Websites, auf denen Informationen angezeigt wurden. Alles, was Sie brauchten, war dieser semantische Inhalt wie eine Überschrift auf oberster Ebene, ein Absatz und dann ein Formular zum Akzeptieren einiger Daten. Sehr einfache Dinge, die auch mit einigen sofort einsatzbereiten Stylings ausgestattet waren , die wir zuvor gesehen haben, als wir sie inspiziert haben, all das Design, das zur Standardausstattung gehört. Dies ist ein sehr frühes Stadium der Webentwicklung. Sie sehen, wie Sie wissen, nicht wirklich viele Websites, die jetzt so aussehen, aber das ist das Standard-Aussehen von HTML ohne Styling. Lassen Sie uns im nächsten Video unsere Webseite stylen und über CSS sprechen. Natürlich ist CSS ein großes Thema, aber wir geben nur einen kurzen Überblick damit Sie verstehen wie wir das, was wir in diesem Video erstellt haben, tatsächlich stylen und auf dem aufbauen können was wir in diesem Video erstellt haben, , was wir über HTML gelernt haben. Wir sehen uns im nächsten Video. 4. Schneller Haftungsausschluss: Hallo, alle zusammen. Ich wollte hier nur ein zusätzliches Video als kleinen Haftungsausschluss einfügen, weil wir gerade HTML behandelt haben, was ziemlich einfach ist, und wir haben viel von dem behandelt, was man mit HTML machen kann. Es gibt nicht viel, es gibt nur die Verschachtelung von Tags innerhalb anderer Tags, es ist nicht zu kompliziert. Aber wenn wir anfangen , uns mit CSS, JavaScript und den anderen Konzepten zu beschäftigen, wird es sehr schnell viel komplexer werden. Und viele dieser Themen könnten ein Kurs für sich sein. Tatsächlich sind es einige von ihnen, und ich werde im Laufe des restlichen Unterrichts auf diese anderen Klassen verweisen . Aber ich wollte hier nur diesen Haftungsausschluss machen , weil ich Skillshare-Kurse schon lange genug mache , um einige der Kritikpunkte zu kennen , die ich in den Bewertungen bekommen könnte. Ich wollte nur sicherstellen, dass dies ein Kurs für alle Niveaus ist . Zuerst befassen wir uns mit den Grundlagen, wir lernen HTML kennen, wir sprechen über grundlegendes CSS, aber Sie könnten sehen, wie die Komplexität zunimmt , wenn wir uns mit Sass, Tailwind, JavaScript, insbesondere TypeScript, befassen und dann zu JavaScript-Frameworks insbesondere TypeScript, übergehen, einschließlich des Abrufs von Informationen aus APIs. Nur in der Reihenfolge , in der sie auftauchen, hier nur ein paar zusätzliche Details allgemein über die Themen sprechen, über die wir für den Rest der Klasse sprechen werden. CSS, wir werden über Layouts sprechen, weil ich denke , dass Layouts das komplexeste Ding in CSS sind. Wenn Sie möchten, dass die Farbe eines bestimmten Textes rot ist, können Sie die Farbe Rot festlegen. Das ist hoffentlich nicht zu kompliziert, um es zu verstehen, aber Layouts sind ein ganz neues Konzept. Wir werden über Flexbox sprechen, wir werden über CSS Grid sprechen. Aber wisse einfach, dass es in CSS so viele verschiedene Stile gibt. Wenn Sie sich eingehender damit befassen möchten, gibt es hier auf Skillshare einen Kurs mit dem Titel Web Development Fundamentals, HTML and CSS, den ich erstellt habe . Nach der CSS-Lektion werden wir über Sass sprechen, und dann werden wir später im Unterricht auch auf etwas namens Tailwind CSS eingehen. Wie ich hier geschrieben habe, müssen Sie möglicherweise einige Erfahrung mit CSS sammeln, um die Vorteile dieser zusätzlichen Tools zu verstehen. Wie ich in diesem Kurs sagen werde, sind HTML, CSS und JavaScript die einzigen Frontend-Sprachen , die im Browser ausgeführt werden, und sie sind die einzigen, die es zu lernen gilt. Aber natürlich haben wir all diese anderen Tools wie Sass, wie Tailwind CSS, TypeScript, Vue. Das sind die, über die wir in diesem Kurs sprechen werden. Sie sitzen einfach oben, um Entwicklern zu helfen. Um zu verstehen, welchen Nutzen sie haben, benötigst du möglicherweise etwas Erfahrung mit der zugrunde liegenden Sache, die sie zu produzieren versuchen. In Bezug auf das Styling wäre es CSS, in Bezug auf die Funktionalität wäre es JavaScript. Wenn wir zu JavaScript übergehen, werden wir in diesem Kurs nur an der Oberfläche kratzen und dann werden wir uns mit TypeScript und Vue befassen. Es geht sehr schnell, sobald wir zum JavaScript-Teil kommen. Wenn Sie nach der JavaScript-Lektion eine Pause einlegen und sich eingehend mit JavaScript befassen möchten , habe ich einen vollständigen Kurs über JavaScript, er heißt Web Development Fundamentals JavaScript. Das kannst du dir ansehen. Auch hier gilt: Um die Vorteile von TypeScript zu verstehen, die ich auch hier unten aufgeführt habe, benötigen Sie einige Erfahrung mit komplexeren Frontend-Projekten. Es ist tatsächlich schwierig, ein sehr einfaches Beispiel für die Verwendung von TypeScript zu finden , da der Vorteil von TypeScript erst sichtbar wird wenn Sie anfangen, mit komplexeren Frontend-Projekten zu arbeiten . Dann schauen wir uns endlich Vue.js an. Vue.js ist nur ein Beispiel für ein reaktives Frontend-Framework. Sie sollten mit DOM-Navigation und Event Listeners vertraut sein , bevor eingehender mit Frontend-Frameworks wie Vue, React, Angular usw. befassen. Wenn Sie mehr über diese Konzepte erfahren möchten , sollten Sie sich insbesondere Grundlagen der Webentwicklung JavaScript befassen, meinem Kurs hier auf Skillshare. Nur zur Erinnerung: Die einzigen wesentlichen Elemente des Frontends sind HTML, CSS und JavaScript. Alle anderen Tools sind nur dazu da, bei der Entwicklung dieser drei zu helfen . Auch alle anderen Tools, in diesem Kurs besprochen wurden oder nicht, können an Beliebtheit gewinnen und verlieren. Die Landschaft verändert sich ständig und Sie können diese Tools nach eigenem Ermessen verwenden. Die einzigen wesentlichen Elemente, wie es hier geschrieben ist, sind HTML , CSS und JavaScript. Deshalb wollte ich nur dieses Disclaimer-Video einfügen, um auf alle möglichen Bedenken einzugehen , die ich mir vorstellen kann, wenn ich vorstellen kann , wie schnell wir für den Rest des Kurses vorgehen. Wenn du jemals in einer bestimmten Phase feststeckst und mehr darüber erfahren möchtest, kannst du hier zu einem anderen Kurs auf meinem Skillshare-Kanal gehen und einen tiefen Einblick in viele dieser Themen finden. Andernfalls können Sie sich andere Tutorials ansehen oder diese Lektion einfach komplett überspringen. Wenn es nicht die HTML -, CSS - und JavaScript-Lektion ist, können Sie diese gerne ganz überspringen. Der Zweck dieses Kurses ist es, Ihnen einen Überblick über einige der beliebtesten Tools zu geben , die heute verwendet werden, sodass Sie danach Ihr eigenes Projekt wählen können, wie der ursprüngliche Kurs „Webentwicklung verstehen“. Also wollte ich das nur klarstellen, bevor wir weitermachen. Lassen Sie uns ohne weitere Umschweife zum Rest der Klasse übergehen. 5. CSS: In diesem Video stellen wir CSS vor. CSS könnte ein Kurs für sich sein, weshalb ich einen speziellen Skillshare-Kurs zu HTML und CSS habe . In diesem Video werden wir nur die Grundlagen behandeln und erläutern, wie es auf HTML angewendet wird, ausgehend von diesem Beispiel , das wir im letzten Video geteilt haben. Jetzt habe ich dir zwei Möglichkeiten gezeigt, unser HTML zu laden. Wir können das entweder über das Dateisystem wie Search oder über einen Server tun . In diesem Video werde ich auf die Bereitstellung über einen Server umsteigen . Einer der großen Vorteile besteht darin, dass ich nicht jedes Mal aktualisieren muss. Wenn ich also hier eine Änderung vornehme, muss ich in diesem Dokument auf Speichern dann in diesem Dokument aktualisieren. Um die Änderung zu sehen, können wir diesen Schritt einfach vermeiden , indem wir unseren Live-Server betreiben . Wie ich Ihnen im letzten Video gezeigt habe, wenn ich meine Erweiterungen hier öffne, Live Server von Ritwick Dey. Wenn Sie das installieren möchten, müssen Sie in Ihrer Version von Visual Studio Code nur Live Server hier eingeben, danach suchen, es wird angezeigt, Sie klicken darauf und dann klicken Sie auf Installieren. Super einfach zu installierende Erweiterungen für Visual Studio Code. Ich schließe diesen Tab und klicke dann hier, um live zu gehen. Es wird es öffnen. Hier kannst du sehen, dass es am Ende index.html hat. Wir brauchen das nicht einmal, wir können das entfernen und es wird wissen, was die Webseite ist weil der Index die Stammadresse auf einer Website darstellt. Lass uns das jetzt demonstrieren. Wenn wir hier weiter gehen und ich diese zweite Option anstelle von Option 2 aufrufen soll und auf Speichern klicke. Du siehst, wir müssen es hier nicht aktualisieren , weil es im laufenden Betrieb neu geladen werden kann, wirklich cool und praktisch für die Entwicklung. Lassen Sie uns nun eine CSS-Datei einbringen. Wir können hier tatsächlich etwas namens Style-Tag erstellen und CSS hier einfügen und es wird auf die Seite angewendet, auf der es sich befindet. Aber lass es uns sauberer machen , indem wir unser CSS in eine andere Datei legen. Ich öffne den Explorer hier, erstelle eine neue Datei und nenne sie styles.css. Sie können es nennen, wie Sie wollen, solange es am Ende got.css ist , da dies Visual Studio Code und dem Webbrowser anzeigt , dass es sich um eine CSS-Datei handelt. Jetzt wollen wir diese CSS-Datei mit unserem HTML-Dokument verknüpfen und das können wir innerhalb des Head-Tags tun. Ich erstelle einen Link mit einem Attribut rel mit dem Wert von stylesheet, das der Seite mitteilt , dass wir ein Stylesheet einfügen, und dann href, was der Pfad zum Stylesheet ist. Da sie sich beide im selben Verzeichnis direkt nebeneinander befinden, müssen wir nur styles.css, den Namen der Datei, eingeben und dort auf Speichern klicken. Um zu testen, ob das funktioniert, lass uns hier rübergehen und unseren ersten Stil schreiben. Was wir hier tun können, ist einen Reset durchzuführen. Sie sehen, jetzt haben wir Ränder und Padding, die automatisch aus dem HTML stammen. Was wir tun können, ist dieses Sternchen hier reinzuwerfen, Wildcard Selectors nennen sie es. Dann können wir Polsterung einbauen, zu viele Ds dort platzieren. Beim Padding können wir standardmäßig für alle Elemente Null und den Rand standardmäßig auf Null setzen. Wie Sie hier sehen können, können wir auf jeden Fall sehen , dass unsere Verlinkung des Stylesheets hier funktioniert hat, weil das jetzt gilt. Wenn ich hier reingehen und mein h1-Tag überprüfen würde, können Sie sehen, dass unser Standardstyling , das wir hier hatten durch unser hier ausgewähltes Sternchen überschrieben wurde. Es sieht so aus, als ob das alles Ränder sind, nicht Padding, aber wenn ich dieses Kontrollkästchen hier anklicken würde, kann ich es ein- und ausschalten. Die andere Sache, die wir hier tun können, ist, unsere eigenen Stile direkt im Browser über die Chrome DevTools hinzuzufügen unsere eigenen Stile direkt im . Ich kann hier reingehen und mich einfach alles auf die Farbe Blau einstellen lassen . Das ist kein sehr praktisches Beispiel, aber wie Sie hier sehen können, können wir die Farbe tatsächlich ändern und Dinge in unserem Browser testen. Wenn ich jetzt die Seite hier aktualisiere, wird das nicht wieder in unserem Dokument gespeichert, aber wir können in unserem Browser spontan mit verschiedenen CSS-Codes experimentieren . Wir müssen nur sichergehen, ob wir das so machen, also sagen wir einfach, wir haben alles blau gefärbt , dann müssen wir sicherstellen, dass wir einfach diese Kopie nehmen und einfügen können. Wir müssen nur sicherstellen , dass wir es in unser Stylesheet einfügen und speichern, und dann wird es im Browser angezeigt. Es funktioniert nur in die eine Richtung, nicht umgekehrt. Wenn wir hier Änderungen vornehmen, werden sie hier nicht gespeichert. Ich wollte das nur zur Kenntnis nehmen. Ich werde das tatsächlich entfernen und über die wichtigsten Konzepte in CSS und HTML sprechen . Hier siehst du, wie sich alles übereinander stapelt. Du hast die H1 und danach gibt es keinen Inhalt, es ist all diese Art von vertikalem Layout. Aber natürlich haben wir hier einige Ausnahmen. Wir hätten, wenn ich etwas davon in ein Link-Tag packen würde, das A-Tag und lassen Sie uns hier einfach einen Hash als Platzhalter setzen, Sie können sehen, dass das so heißt Inline. Wenn ich hier nachschaue, um es zu berechnen, können Sie sehen, dass der Anzeigestil Inline ist, aber alles andere, der Anzeigestil ist standardmäßig Block, es gibt standardmäßig nur wenige Elemente in HTML, die Inline sind, aber es gibt tatsächlich mehrere verschiedene Darstellungstypen. Wir können Grid machen, wir können Flexbox machen. Dies sind die moderneren CSS-Anzeigetypen, und sie werden heutzutage in der modernen Webentwicklung häufig verwendet . Lass uns darüber reden. Wie bereits erwähnt, ist Web 2.0 eher ein zweidimensionales Layout. Was ich tun werde, ist das zu entfernen. Beginnen wir mit einem gängigen Baustein für die Erstellung von Layouts in HTML, dem div-Tag. Hier können wir lesen , dass das div-Element keine besondere Bedeutung hat. Es vertritt nur seine Kinder. Es ist ein sehr weit gefasstes Tag, das standardmäßig den Anzeigestil Block hat. Ich werde Lorem Ipsum in meinen ersten Div aufnehmen und wieder Lorem Ipsum in meinen zweiten Div genau hier. Ich klicke auf Speichern. Wie Sie hier sehen können, ist es ein bisschen schwer zu erkennen, aber sie sind Displayblöcke. Wenn wir hier nachschauen, wird Block angezeigt, aber standardmäßig gibt es einfach keinen Rand. Aber wenn ich das ausdehne, kann man sehen, dass eins übereinander gestapelt wird. Lass uns so etwas wie hier reingehen und einen Stil festlegen. Ich kann das alles gezielt anvisieren, indem ich einfach div hier einfüge geschweifte Klammern öffne, um unsere Styles einzufügen. Geben wir all unseren Divs einen Rand von einem durchgehenden Pixel , damit wir die Trennung zwischen ihnen sehen können. Hier kannst du sehen, dass wir zwei Divs haben, und standardmäßig sind sie Display-Blöcke, was bedeutet, dass sie übereinander gestapelt werden. Nun, wenn ich hier reingehen und einen anderen Anzeigetyp einstellen würde. Lassen Sie uns Inline anzeigen. Jetzt kannst du sehen, dass, wenn ich das ausdehne, sie nicht in zwei Blöcken enthalten sind und dann versuchen, in einer Reihe zueinander zu sitzen. Dann ist der dritte gebräuchliche Typ in der Reihe nicht so häufig. Wir können tatsächlich Inline-Block verwenden. Wie Sie hier sehen können, stapeln sie übereinander. Fügen Sie hier eine maximale Breite von 300 hinzu, speichern Sie, sie werden übereinander gestapelt sofern nicht genügend Platz vorhanden ist, um nebeneinander zu stehen. Wenn ich zurück zu dieser Seite gehe , können Sie sehen, was wir haben. Inline-Block ist wie Block, aber die Blöcke werden am Ende nebeneinander angeordnet, wenn genügend Platz vorhanden ist. Wenn ich dieses Fenster verkleinere, können Sie sehen, dass sie wieder übereinander stapeln. Lassen Sie uns das entfernen und versuchen wir ein zweispaltiges Layout zu erstellen. Ich möchte ein Element für die Seitenleiste haben. Erstellen Sie hier eine Seitenleiste und dann eine für den Hauptinhalt. Wenn ich nun wieder auf Speichern klicke, wird standardmäßig ein Block angezeigt, einer liegt übereinander. Lass uns wirklich hier rein gehen. Um diese beiden Divs zu unterscheiden , weil wir sie getrennt stylen wollen , können wir entweder eine ID oder eine Klasse verwenden. Die ID ist für ein einzelnes Element reserviert . Wenn ich also hier reingehen würde, kann ich eine Seitenleiste mit ID-Attributen erstellen. Wenn ich das mache, kann ich keinem anderen Element eine ID der Seitenleiste geben, da sonst alles kaputt geht. Hier kann ich als Alternative einen Kurs machen und diesen Main nennen. Der große Unterschied zwischen Klasse und ID besteht darin, dass ich mit Class ein anderes Div namens Main haben könnte. Wenn ich das kopieren und einfügen müsste, könnte ich ein anderes Div namens Main haben und das wäre okay. Wohingegen ich nicht zwei Tauchgänge mit derselben ID haben könnte. Das ist der Unterschied zwischen ID und Klasse. Wenn wir Frontend-Erlebnisse entwickeln, verwenden wir meistens Klassen, auch wenn wir davon ausgehen, sie nur einmal zu verwenden. Der Unterricht funktioniert in den meisten Situationen gut. Ich werde diese Seitenleiste aufrufen aber bevor ich das tue, zeige ich Ihnen nur, wie wir in unserem Stylesheet hier drüben auf eine ID abzielen . Wir verwenden den Hash für eine ID-Seitenleiste. Dann würden wir unsere Stile hier einfügen, und das würde nur auf das Element mit der ID der Seitenleiste abzielen . Was wir für Main tun werden, weil es eine Hauptklasse hat. Wir verwenden einen Punkt, so.main, und dann zielen wir jetzt auf alle Elemente ab , die die Klasse Main haben. Ich werde diese beiden einfach zum Unterricht machen, also geh her. Klassen-Seitenleiste. Lass uns hier rübergehen und dann hier einen Punkt setzen , weil jetzt im Unterricht, und lass uns diese nebeneinander platzieren. Lassen Sie mich zurückstellen, ich möchte diese Ränder sehen, damit wir sie leicht sehen können , ein Pixel durchgehend, sie können sehen und jetzt werden wir die Seitenleiste machen, ich möchte nicht größer sein als, machen wir sie auf eine Breite von 300 Pixeln. Dann kann ich ihm hier eine größere Breite von 500 Pixeln geben, Sie werden sehen, dass sie immer noch übereinander stapeln . Gehen wir hier hin und lassen Sie uns für beide diesen Inline-Block anzeigen das Standardverhalten des Display-Blocks aktualisieren. Wie Sie sehen können, stapelt es sich immer noch übereinander , wahrscheinlich weil ich nicht genug Platz gelassen habe. Ich mache den Hauptbereich zu 400. Das hängt natürlich davon ab, wie breit Ihr Browser ist. Wenn ich es hier verlängere, kannst du sehen, dass sie Seite an Seite stapeln, lass uns diese 200 und diese 400 machen und jetzt kannst du sehen, dass sich die Seitenleiste links und der Hauptinhalt rechts befindet. Was ich jetzt tun möchte, ist, dass die Seitenleiste bündig an den Ecken anliegt und der Grund, warum sie das derzeit nicht den Ecken anliegt und der Grund, warum sie das derzeit nicht tut, ist, wenn wir uns das ansehen, also wir haben dieses Panel hier, wenn ich das ablege und mir das Body-Tag hier ansehe, mir berechnet an, es hat tatsächlich einen Standardrand von acht Pixeln. Wie Sie hier sehen können , Rand unten acht , Rand links acht, Rand rechts acht, Rand oben acht. Lassen Sie uns hier genauer hineingehen und ich werde auf den gesamten Körper abzielen, es gibt keinen Punkt oder Hash, der davor steht, weil es auf ein Element abzielt, und dann werde ich einfach diesen Standardrand entfernen, also sage ich einfach Margin Null. Dann sieht man den Rand um den ganzen Text herum, das gesamte Dokument ist jetzt entfernt. Jetzt verwenden wir Pixelbreiten, was nicht sehr responsiv ist, da sich die Höhe oder die Abmessungen des Viewports wie in dem Fenster , in dem wir diese Seite betrachten, ändern können. Ich möchte, dass diese Seitenleiste so hoch ist wie der verfügbare Speicherplatz. Was ich tun kann, ist, hier ein Höhenattribut einzugeben und ich kann eine Einheit namens Viewport height verwenden, und diese Zahl vor der Viewporthöhe ist der Prozentsatz der Viewporthöhe , den ich verwenden möchte. Ich möchte den gesamten verfügbaren Speicherplatz nutzen, ich klicke auf „Speichern“ und wie Sie sehen können, die Seitenleiste jetzt die volle Höhe also die volle Höhe des Fensters, das wir betrachten. Wenn ich das schließen würde, dann unser Fenster vergrößern würde und wie Sie sehen können, geht es ganz nach unten, das ist es, was wir von unserer Seitenleiste erwarten. Dann können wir das auch hier machen, es ist etwas kniffliger mit Inline-Block, aber ich kann tatsächlich etwas namens Calc verwenden , um einen mathematischen Ausdruck zu erstellen. Ich kann tatsächlich die andere Einheit der Viewport-Breite machen. Ich kann die Breite des Viewports abrufen und die 200 entfernen, die wir für die Seitenleiste benötigen. Klicken Sie darauf auf „Speichern“ und wie Sie sehen können, funktioniert es nicht gerade. Wir müssen das ein bisschen verfeinern, vielleicht um 250, 210 reduzieren und hier wird der Inline-Block etwas knifflig. Wenn wir dann hierher gehen, können Sie sehen, dass es sich bis zum Ende ausdehnt, es wird eine Breite von 100% des Viewports minus 250 sein. Wie Sie hier im Wesentlichen sehen können, wird diese Berechnung für jede Bildschirmgröße durchgeführt. Wie ich bereits erwähnt habe, ist Inline-Block etwas knifflig und wird in der modernen Webentwicklung nicht wirklich verwendet. Inline-Block ist altmodisch, viele Leute verwenden jetzt Flexbox oder Grid, also schauen wir uns an, wie wir das in Flexbox machen würden. Hier müssen wir den einzelnen Elementen keinen Display-Inline-Block zuweisen, stattdessen gehe ich hier in den Index und erstelle ein Div, das diese Elemente umschließt, um das Layout zu erstellen. Ich nenne diesen Seitencontainer, wir können hier einen Bindestrich einfügen um die Wörter zu trennen, und dann schneide ich das aus und füge in unseren Seitencontainer ein. Dieser Seitencontainer gibt uns das Layout, also müssen wir ihn nur stylen. Wir gehen hier zum Seitencontainer, Sie platzieren ihn über der Hauptleiste und der Reihenfolge, und ich lege den Anzeigestil fest, das ist das übergeordnete Element dieser beiden, um flexibel zu sein. Ich klicke darauf auf „Speichern“. einfach den Display-Flex verwenden, wir einfach den Display-Flex verwenden, werden die Inhalte automatisch nebeneinander und flexibel auf unseren Bildschirmen angezeigt. Wenn wir diese Breiten entfernen würden, was ich jetzt mache und auf „Speichern“ klicke, siehst du immer noch, dass wir sie nebeneinander haben, aber es weiß nicht, wie viel von dem verfügbaren Speicherplatz genutzt werden soll. Was wir innerhalb der Seitenleiste tun können, ist Flex 1 und auch innerhalb der Hauptleiste möchte ich Flex 1 verwenden. Wir können einen Route Flex 1 und einen spezifischeren Flex Grow haben. Das ist, wie es hier heißt, der Wachstumsfaktor. Es hängt davon ab, welche anderen Elemente sich in diesem Container befinden. Aber wenn ich hier auf „Speichern“ klicke, wirst du sehen, dass wir jetzt ein responsives Layout mit zwei Spalten erhalten. Wenn ich das verschieben würde, kannst du jetzt sehen, weil Grow bei beiden auf Eins gesetzt ist, werden sie beide die gleiche Breite haben und beide werden auf den verfügbaren Platz wachsen, beide werden auf den verfügbaren Platz wachsen, sodass jeder von ihnen die Hälfte hat. Aber wir können das Verhältnis hier ändern, was ich tun werde, und ich möchte, dass die Seitenleiste dreimal weniger breit ist, also werde ich die Hauptleiste um den Faktor drei vergrößern. Dann, wie Sie hier sehen können, wird der Hauptbereich dreimal so stark wachsen wie die Seitenleiste, wenn ich ihn erhöhe wird der Hauptbereich dreimal so stark wachsen wie , wie Sie hier sehen können. Aber wir wollen dieser Seitenleiste eine Mindestbreite geben , weil wir dort Inhalte haben werden, also füge ich eine sogenannte Flex-Basis hinzu und ich möchte, dass es ungefähr das ist und ich möchte, dass es , was wir zuvor hatten, 300 Pixel. Ich gebe ihm einen Indikator, dass ich möchte, dass es 300 Pixel sind, hier kannst du sehen, dass es das jetzt erweitert und dann kann ich hier gehen, um den Schrumpffaktor einzustellen, ich sage Null, was bedeutet, dass es niemals unter 300 Pixel schrumpfen wird, 300 Pixel sind ein bisschen zu groß, also lass uns gehen, 150 reichen für die Hälfte. Wenn ich dann all diese drei Attribute in einem Attribut zusammenfassen kann , kann ich einfach flexibel vorgehen, das erste ist Grow, das zweite ist Shrink und das letzte ist Flex Basis. Ich kann alle drei durch diesen ersetzen. Das mache ich. Klicken Sie darauf auf „Speichern“. Sie sehen, wir erzielen das gleiche Ergebnis. Wenn ich jetzt hier drüben klicke, sollten es 150 sein, was, wie Sie sehen können, etwas größer als 150 ist und das liegt daran, dass der Flexfaktor immer noch eins ist. Ich gehe hierher und ändere Grow auf Null und das wird sicherstellen , dass es nie größer oder kleiner als 150 wird. Es hat tatsächlich 152, wenn ich das berechne, können Sie sehen, dass das daran liegt, dass wir auf beiden Seiten eine Grenze von Eins haben . Wenn wir also wollen, dass es genau 150 ist, müssten wir die Grenze entfernen, was wir wohl jetzt tun können. Ich werde diese Grenze um die Entwickler entfernen, auf „Speichern “ klicken und wenn wir uns dann die Seitenleiste ansehen, werden es 150 sein. Um nun die Seitenleiste vom Hauptbereich zu unterscheiden, geben wir ihr eine Hintergrundfarbe und machen die Hintergrundfarbe einfach beige. Sie können sehen, wir haben unsere Seitenleiste, sie wird niemals weniger oder mehr als 150 sein und dann wird der Hauptinhaltsbereich auf den verfügbaren Speicherplatz erweitert. Es wird sich daneben in diesem Seitencontainer befinden. Hoffentlich macht das mit Flexbox Sinn. Es ist eine wirklich nette, ansprechende und flexible Möglichkeit für uns, zweidimensionale Layouts zu erstellen. Aber es gibt tatsächlich eine neuere Methode, Layouts in CSS zu erstellen, und zwar über den Darstellungstyp Grid , der vor ein paar Jahren nicht in jedem Browser verfügbar war, aber wenn wir ihn heute überprüfen. Wenn wir suchen, kann ich in Google verwenden und auf diesen ersten Link klicken, können wir tatsächlich sehen, wie viel Akzeptanz eine Funktion hat. Wir gehen ins Netz. CSS-Grid-Layout, Sie können sehen, dass es weit verbreitet ist, es wird seit 2017 von Chrome unterstützt, Firefox wird seit 2017 unterstützt, aber es sieht so aus, also ja, es wird gut unterstützt. Wenn Sie sich hier umschauen, wird es im Grunde von 96,25% der Benutzer weltweit unterstützt, sodass es für die meisten Anwendungsfälle bereit ist. Bei jeder dieser modernen Funktionen, die herauskommen, sollten Sie sie überprüfen und sie mit Flexbox vergleichen. Sie haben das flexible Modell , 99,05% aller Browser haben sich daran angepasst. Dies sind einige der neueren Innovationen, aber das CSS-Grid ist schon eine Weile auf dem Markt, wie Sie sehen können, Chrome unterstützt es bereits seit vielen Jahren, sodass Sie mit dem Display-Grid ziemlich zufrieden sein sollten. Um das Display Grid zu demonstrieren, erstelle ich hier ein weiteres Div und nenne diesen Header, damit wir eine Kopfzeile platzieren können, die sich über unsere Seitenleiste und den Hauptinhalt erstreckt. Wie Sie sehen können, weil ich es in diesen Seitencontainer gesetzt habe , derzeit auf Flex eingestellt ist, und sie werden alle in derselben Zeile stehen. Wenn ich Rappen aktivieren möchte, kann ich Flex Wrap eingeben und wenn dann einer von ihnen zu groß werden sollte, sagen wir einfach, wir wollten unseren Zielheader hier haben. Sagen wir einfach, ich wollte den Header so breit machen, der halbe Bildschirm, den Sie sehen können und dann sagen wir einfach, wir hatten eine Flex-Basis von der Hälfte des auch hier eine Flex-Basis von der Hälfte des Bildschirms und einen Flex-Verkleinerer, also nicht weniger als die halbe Breite des Bildschirms von Null, dann können Sie sehen, dass es in eine neue Zeile gezwungen wird , aber zum größten Teil, wenn wir so etwas machen, es wird alles in einer Reihe stapeln. Wie dem auch sei, das ist Flex-Box. Gehen wir von Flex-Box aus, ändern wir das jetzt Grid und dann haben wir jetzt einen Rasterstil, der also übereinander gestapelt wird, weil wir unser Raster-Layout noch nicht eingerichtet haben, also setzen wir es auf das übergeordnete Element. Ich werde diese Flexbox-Attribute loswerden und ich werde die Höhe hier loswerden um Breite 50 loszuwerden und jetzt haben wir unsere drei Divs hier. Formatieren wir sie, indem wir unsere Spaltenvorlage erstellen, sodass wir unsere Div erstellen, wir können Grid-Vorlagenspalten verwenden, und das tun wir über Brüche. Ich werde ähnlich wie zuvor eine Spalte erstellen, die aus einem Bruch besteht, und dann die zweite, die aus drei Brüchen Klicken Sie dort auf Speichern und wie Sie sehen können, haben wir jetzt dasselbe System wie zuvor, bei dem die erste Spalte dreimal kleiner ist als die zweite Spalte. Wenn ich hier drüben klicke, können Sie tatsächlich das Raster sehen Wenn ich also auf den Seitencontainer klicke, wo sich das Darstellungsraster befindet, können wir uns die Linien unseres Rasters ansehen. Aber das Problem hier ist, dass unser Header-Abschnitt , den wir über die Sidebar und Main ausdehnen wollen , in dieser ersten Spalte befindet, sich unser Header-Abschnitt , den wir über die Sidebar und Main ausdehnen wollen, in dieser ersten Spalte befindet, dann geht es weiter zum nächsten Div, das in die nächste Spalte geht und dann das dritte Div umschließt und in dieselbe erste Spalte geht. Wir wollen das nicht, also gehen wir hier rein und geben den Start der Rasterspalte ein und wir möchten, dass das an der ersten Rasterlinie beginnt. Wenn wir zurück zu hier gehen, ist die erste Zeile hier, wenn sie erscheint, hier, wenn sie erscheint, die erste Rasterlinie , genau dort ist die zweite Rasterlinie und dann auf der anderen Seite hier ist die dritte Rasterlinie. Ich möchte, dass es um eins beginnt und dann können wir das Ende der Rasterspalte erreichen und wir können es auf der dritten Rasterlinie enden lassen, wenn ich dort auf Speichern klicke. Jetzt können Sie sehen, dass sich die Kopfzeile über beide Spalten erstreckt , was wir wollen. Wir können das tatsächlich aufräumen, wir können sie zu einem Attribut namens Rasterspalte kombinieren und dann können wir einen Schrägstrich drei machen , um dasselbe zu demonstrieren , das nur die beiden zusammenfasst, die wir zuvor hatten, den Anfang der Rasterspalte und das Ende der Rasterspalte. Wir fügen es in das eine Attribut ein, das hier durch einen Schrägstrich getrennt ist. Jetzt haben wir das gleiche Problem davor oder nicht, aber die gleiche Situation schon einmal, wo wir die zweite Spalte so eingestellt haben dreimal so groß ist wie die erste Spalte, dass sie dreimal so groß ist wie die erste Spalte, was bedeutet, dass, wenn wir unsere Fensterbreite vergrößern , der Inhalt der Seitenleiste um den Faktor dreimal weniger wächst. Für diese erste Spalte werde ich das in einen Min-Max-Wert packen , der es mir ermöglicht, einen Größenbereich zu definieren, also mache ich das Minimum als automatisch und das Maximum als 150 PX speichere das und jetzt können Sie sehen, dass die erste Spalte niemals größer als 150 sein wird. Was ich jetzt auch tun kann, ist, hier einen Stil für die Rasterlücke einzufügen , wodurch eine Lücke zwischen den Rasterelementen entsteht. Wir fügen eine Spalte- und Zeilenlücke Wenn wir also hierher gehen, können Sie sehen, dass wir jetzt diesen violetten Bereich haben, der uns die Lücke zwischen Spalten und Zeilen zeigt. Eine weitere Sache, die wir hier haben, ist , dass der Seitencontainer die Mindestbreite ist, es kann grundsätzlich sein, wir wollen diese Breite zu 100 und die Höhe zu 100% machen , um den verfügbaren Platz abzudecken . Wie Sie hier sehen können, deckt der Seitencontainer jetzt den gesamten Raum ab. Aber jetzt können Sie sehen, dass die Kopfzeile einfach zu groß ist , also fügen wir stattdessen Zeilen in eine Rastervorlage ein und wir geben für die erste Zeile 150 für die Kopfzeile und dann die zweite Zeile ein. Lass uns 1 Fr machen, sehen, wie das funktioniert, ich denke 150 ist zu hoch, also lass uns die 50 machen, los geht's. Die erste Zeile wird 50 sein und dann wird die zweite alles andere sein und jetzt können Sie den Vorteil davon sehen, dass wir jetzt die Seitenleiste haben, die den Flur die Seite hinunter verlängert , und um die Kopfzeile so deutlich wie möglich zu machen, geben wir dieser auch eine Hintergrundfarbe. Wird nicht die sexieste sein, aber lassen Sie uns einfach eine schöne Hintergrundfarbe daraus machen, sagen wir dunkelgrau, und klicken Sie darauf auf Speichern. Jetzt können Sie sehen, dass wir unsere Kopfzeile in der oberen Reihe, unsere Seitenleiste und unseren Hauptinhalt haben . Jetzt mag ich diese Rasterlücke zwischen der Seitenleiste und dem Hauptinhalt, aber ich möchte, dass diese Kopfzeile bündig an der Seitenleiste anliegt, also müssen wir statt einer Rasterlücke eine Spaltenlücke tun, und jetzt können Sie sehen, dass es keine Lücke zwischen den Zeilen gibt, sondern eine Lücke zwischen den Spalten, da können Sie sehen. Mit diesen Stilen können wir ein nettes kleines Raster-Layout erstellen und wenn ich das ausklicken würde, können Sie sehen, dass es reagiert und funktioniert, egal wie groß unser Browserfenster ist. Wie Sie hier sehen können, nimmt unser zweidimensionales Layout jetzt langsam Form an. Auch hier gibt es so viel, das wir mit CSS abdecken könnten, wir könnten bestimmte Elemente einfärben, wir könnten Rahmen hinzufügen, wir können Randradien hinzufügen, wir können die Schriftgröße, die Schriftfamilie ändern , natürlich all das offensichtliche Zeug, aber das, was vielleicht weniger offensichtlich ist und mehr Web 2.0 ist, ist dieser Layoutkram. Der Layoutkram ist sehr wichtig und grundlegend für die Erstellung von Layouts und weniger offensichtlich, als einfach zu sagen, dass der Text eine bestimmte Farbe haben soll. Jeder kann verstehen, dass das Einrichten responsiver Layouts bei HTML und CSS der knifflige Teil ist, und darauf habe ich mich in diesem Video konzentriert. Wir können es einfach googeln, wenn wir etwas Bestimmtes wollen, zum Beispiel diese Schrift fett machen, wie machen wir das? Es ist ziemlich einfach, aber dieses Zeug ist das kompliziertere Zeug. Wie Sie sehen können, unterscheidet sich dies stark der letzten Lektion, in der wir gerade diese grundlegenden stilisierten Inhalte hatten von der letzten Lektion, in der wir gerade diese grundlegenden stilisierten Inhalte hatten , die in einem grundlegenden Informationsformat übereinander lagen. Jetzt beginnen wir, Layouts mit CSS zu erstellen und bewegen uns mehr in den Web 2.0-Bereich. Apropos moderne Webentwicklung , es ist wirklich wichtig, dass wir sicherstellen, dass unsere Website auf dem Handy gut aussieht Offensichtlich nutzen heutzutage viele Leute Websites auf ihrem Handy, daher ist es wichtig, ein gutes mobiles Layout zu haben. Es ist immer am besten, sicherzustellen, dass unsere Website responsiv ist und standardmäßig auf jedem Gerät gut funktioniert, aber manchmal müssen wir einen bestimmten Stil für eine bestimmte Bildschirmbreite erstellen . Lassen Sie mich Ihnen jetzt zeigen, wie das geht, also wollte ich das nicht schließen, ich möchte nur, dass es das zur Seite verschiebt. Lass mich es hierher bringen. Wenn wir hier auf dieses kleine Symbol klicken, können wir die Gerätesymbolleiste umschalten. Jetzt können wir uns hier mit verschiedenen Geräten befassen. Lass uns das iPhone Pro 12 machen. Wir können auch hier klicken, um verschiedene Bildschirmgrößen Wir können ein Tablet mit einer Breite von 768 Pixeln, ein großes Handy, ein mittleres Handy und ein kleines Handy mit einer Breite von 320 Pixeln machen ein großes Handy, ein mittleres Handy , was meiner Meinung nach heutzutage sowieso fast niemand hat. Hier können wir sehen, dass alles nur verkleinert ist, es ist also nicht das Beste. Was ich hier tun möchte, ist ein spezielles Meta-Tag hier in unseren Kopf einzufügen . Ich füge es einfach ein. Schauen wir es uns an. Beachten Sie eigentlich nur, was ich getan habe, nachdem ich auf „Speichern“ geklickt habe. Sie können sehen, dass es jetzt etwas mehr vergrößert wurde und dass es besser für unsere mobilen Layouts oder unser mobiles Viewport geeignet ist. Im Grunde ist das Tag Meta mit dem Namensattribut von Viewport und diesem Inhalt rechts, Breite entspricht der Strichbreite des Geräts, Anfangsskala 1. Das ist jetzt der Standard. Ich habe es nicht abgetippt. Ich habe es einfach kopiert und eingefügt , weil du das einfach in ein beliebiges HTML-Dokument wirfst und du bekommst diese Funktion. Es ist sehr einfach. Ich muss nicht im Detail darauf eingehen, wie man das schreibt. Sie können das einfach kopieren und einfügen und es wird funktionieren. Wir sind jetzt in unserer mobilen Version hier unten, und Sie können sehen, dass hier alles gleich ist. Wir möchten die Seitenleiste auf Mobilgeräten vielleicht kleiner machen, aber in diesem Fall benötigen wir den gesamten Speicherplatz, den wir bekommen können. Lassen Sie uns diese Seitenleiste auf dem Handy vollständig entfernen. In CSS machen wir das, indem wir eine Medienabfrage verwenden. Wir beginnen mit einem AT-Symbol, geben Medien und dann müssen wir hier Klammern öffnen und eine minimale oder maximale Breite angeben. Ein Missverständnis, das Sie hier haben könnten , ist, dass Sie denken, dass ich so etwas wie ein Gerät und dann das iPhone hineinlege und das dann auf alle iPhones anwende. Aber so ist es eigentlich nicht. Wir müssen tatsächlich eine Breite angeben. Wir müssen festlegen, an welchem Breakpoint diese Änderung stattfinden soll. Wie Sie sehen können, können wir nun diese verschiedenen Geräte und ihre Breiten sehen. Ein übliches Muster besteht jedoch darin, das Layout am Tablet zu ändern. 768 ist der Standard-Bruchpunkt für Tablets. Aber wir können den Breakpoint bestimmen, wie wir wollen. Wir können hier sogar den responsiven Modus verlassen und einfach unser Fenster verkleinern, es testen, lesen, was hier oben steht, und dann einige Medienanfragen eingeben. Es muss nicht immer für Mobilgeräte sein. Aber hier können wir eine maximale Breite von 768 Pixeln festlegen, Klammern öffnen und jetzt reguläres CSS einfügen, das nur gilt wenn die Breite 768 oder weniger des Viewports beträgt. Lass mich hier reingehen, eine Klassenauswahl für die Seitenleiste öffnen und ich setze den Anzeigestil auf keinen. Klicken Sie darauf auf „Speichern“. Jetzt können Sie sehen, dass die Seitenleiste weg ist. Wenn ich das öffnen würde, auch wenn ich nicht im responsiven Modus bin, ist meine Bildschirmbreite gerade weniger als 768. Wenn ich den Wert auf über 768 ziehe , wird die Seitenleiste wieder angezeigt. Dieser Stil gilt nur für das, wofür wir ihn festgelegt haben. Heutzutage wird das Internet dazu ermutigt, die Entwicklung auf Mobilgeräten voranzutreiben. Wir können das Gegenteil von dem tun, was wir gerade hier getan haben. Hängt nur davon ab , wie du es machen willst. Stellen Sie die Mindestbreite auf 768 ein. Das heißt, wir schreiben hier unser Standardstyling auf, vorausgesetzt, mobil, und dann schreiben wir hier unsere Desktop-Stile auf. Das heißt, wir wollen standardmäßig nicht, dass es angezeigt wird. Sobald es 768 erreicht hat, möchten wir, dass Block angezeigt wird . Wenn ich hier auf „Speichern“ klicke, erhalten wir das gleiche Ergebnis. Wenn ich das über 768 hinaus verlängere, bekommen wir wieder die Seitenleiste. Das nennen sie Mobile-First-Entwicklung, bei der Sie das CSS schreiben, vorausgesetzt, es wird auf einem Handy angezeigt werden, und dann Ihre Medienabfragen für den Desktop schreiben. Ich mache es in den meisten Fällen lieber andersherum. Ich arbeite gerne zuerst auf dem Desktop und erstelle dann Stile für ein Handy und ändere es wieder auf meine bevorzugte Weise. Jetzt können Sie auf dem Desktop sehen, dass wir die regulären Styles haben, aber sobald sie niedriger als 768 sind, beginnen diese Stile zu wirken. Das ist nur ein sehr einfaches Beispiel. Wir können zum Beispiel auch sagen, ob wir etwas auf dem Tablet haben wollen, das anders aussehen wird als auf dem Handy. Sagen wir einfach, unser größtes Handy, das wir unterstützen, sagen wir 425, können wir hier tatsächlich noch weitere Klammern hinzufügen, beenden. Wir können eine Mindestbreite von 425 und eine maximale Breite von 768 sagen. Anstatt nichts am Rand anzuzeigen, lassen Sie mich das auf 4-5 ändern. Hier gibt es einige Überschneidungen, also werde ich 426 machen. Wenn es bei 425 liegt, gilt dies. Wenn es jedoch auf 426 steigt, gilt dies , da es unter 768 liegt. Lass uns einfach umziehen. Was sollen wir mit der Seitenleiste machen? Sparen wir hier. Schauen Sie sich unsere Tablet-Ansicht an. Lass uns einfach die Seitenleiste machen. Eigentlich gehen wir statt der Seitenleiste einfach in den Seitencontainer, gehen hier hoch und schnappen uns das. Lassen Sie uns die maximale Breite der ersten Spalte festlegen. Sagen wir 50 auf der Bildschirmgröße. Jetzt können Sie sehen, dass das wahrscheinlich etwas zu niedrig ist. Vielleicht schaffe ich es 100. Dann können Sie sehen, dass die Bildschirmgröße größer als 768 ist Wir werden eine erste Spalte haben , die nicht größer als 150 ist. Aber wenn wir dann unter 768 kommen, wollen wir, dass es maximal 100 sind. Sie können hier sehen, dass das jetzt in unseren Dev-Tools auftaucht. Wenn wir dann weniger als 425 nehmen, scrolle ich das bis 425 runter, da siehst du, dass das nicht mehr zutrifft. Wenn wir in die Seitenleiste klicken, wird jetzt keine angezeigt da diese Medienabfrage jetzt wirksam ist. Auf diese Weise erstellen wir tatsächlich separate Stile für verschiedene Geräte. Dies erfolgt über die Bildschirmbreiten. Es spielt keine Rolle, ob Sie ein Gerät verwenden oder ob Sie einen normalen Browser verwenden und ihn auf diese Weise aktualisieren, wir könnten sogar responsive Abfragen für riesige Bildschirme durchführen. Lassen Sie mich das öffnen und wir können hier zu einem großen Laptop mit 1440 Pixeln übergehen . Wenn ich hierher gehe, können wir zu einem 4K-Bildschirm gehen und uns Stile auf einem 4K-Bildschirm ansehen. Vielleicht wollen wir den Seitencontainer für etwas auf eine maximale Breite festlegen. Wir können tatsächlich jeden Bereich von Bildschirmbreiten oder Fensterbreiten beeinflussen Bildschirmbreiten oder Fensterbreiten , auf dem die Webseite angezeigt wird. Es ist nicht nur für Mobilgeräte, sondern auch für Mobilgeräte, so würden wir es ansprechen. Wir würden die maximale Breite der Telefone herausfinden , die wir unterstützen möchten, und dann ein separates Design darauf anwenden. Ich wollte SaaS in dieses Video einbauen, aber es sieht so aus, als würden wir schon eine ganze Weile über dieses Thema sprechen . Ich werde das Gespräch über SaaS trennen und das in der nächsten Lektion behandeln. SaaS ist ein Präprozessor für CSS, daher ist es sehr relevant für das, was wir hier tun. Macht unser Leben nur ein bisschen einfacher. Wenn Sie an SaaS interessiert sind, klicken Sie auf das nächste Video. Andernfalls können Sie zu JavaScript übergehen. 6. Sass: In dieser Lektion werden wir über Sass sprechen, was für syntactically awesome style sheets steht. Es ist eine Präprozessor-Skriptsprache , die interpretiert oder in Cascading Style Sheets, auch bekannt als CSS, kompiliert wird . Nun, das ist dir wahrscheinlich durch den Kopf gegangen. Im Grunde genommen, Sass, was es macht, ist, wie wir in den vorherigen Videos besprochen haben, es gibt wirklich nur drei Dinge das Neuladen im Browser oder dass der Browser sein HTML, CSS und JavaScript interpretiert . Wo kommt Sass ins Spiel? Sass ist eigentlich CSS mit Superkräften, aber um es in unserem Browser auszuführen, müssen wir es zu CSS kompilieren, und hier kommt der Präprozessor-Teil ins Spiel. Was wir jetzt tun werden, ist diesen Prozess zu durchlaufen und unsere Anwendung oder unsere Webseite mit Sass ein bisschen weiter auszubauen unsere Anwendung oder unsere Webseite . Ich werde meinen Browser hierher ziehen und das hier starten. Eigentlich könnte ich das hier für den Installationsteil dieses Videos erweitern . Im VS-Code können wir hier in unser Erweiterungs-Panel gehen und sogenannten Live Sass-Compiler von Glen Marks laden . Nochmals, wenn Sie es derzeit nicht installiert haben, müssen Sie nur im Suchfeld hier oben nach dem Live-Sass-Compiler suchen, und dann können Sie ihn hier finden und dann klicken Sie einfach auf „Installieren“. Für mich habe ich es bereits installiert, also heißt es deaktivieren oder deinstallieren. Im Grunde ist dies der einfachste Weg, Kompilierung von Sass in VS-Code zu beginnen. Nur damit Sie es wissen, es gibt viele Möglichkeiten und Tools , um Sass zu kompilieren. Dies ist einfach der einfachste Weg, da wir dies ohne zusätzliche Einrichtung tun können . Alles was wir tun müssen, ist diese spezielle Erweiterung zu installieren und dann können wir hierher gehen. Die Schaltfläche wird noch nicht angezeigt, weil wir eigentlich ein Stylesheet erstellen müssen , aber wir können hier rübergehen und ein styles.scss erstellen. Jetzt siehst du das Logo für Sass dort und wenn ich „Enter“ drücke , kannst du jetzt sehen, dass es startet und jetzt haben wir diesen Button für Live-Kompilierung von Sass oder SCSS in CSS. Das ist technisch gesehen SCSS und Sass ist ein bisschen anders, aber SCSS ist meiner Meinung nach besser weil CSS abwärtskompatibel mit SCSS ist. Damit meine ich, lass mich dir das jetzt zeigen. Ich nehme den ganzen Code, schneide ihn aus styles.css aus füge ihn in style.scss ein. Eigentlich habe ich das falsch geschrieben, es sollte styles.scss sein. Wie Sie hier sehen können, ist dies jetzt leer. Wenn wir hierher gehen, haben wir alle unsere Styles verloren, aber was wir hier tun können, ist auf diesen Button zu klicken, um Sass zu sehen. Jetzt wird unsere styles.css erneut gefüllt und abhängig unseren Einstellungen im Live-Sass-Compiler können Sie sehen, dass wir einige zusätzliche Attribute hinzugefügt haben. Ich denke, in diesem Fall ist es nur ein zusätzliches Attribut und ein kleiner Verweis auf eine Quellkarte hier. Sie können sehen, dass wir hier eine Quellkarte haben , die uns hilft, den Code vom kompilierten Code bis zum Präprozessor zurückzuverfolgen den Code vom kompilierten Code bis zum Präprozessor zurückzuverfolgen . Wie Sie hier sehen können, haben wir jetzt unser CSS verarbeitet und wir haben jetzt unser gesamtes Styling zurück. Jetzt ging das letzte Video etwas länger als ich erwartet hatte. Eigentlich wollte ich hier noch ein paar weitere Funktionen in unsere kleine Web-App einbauen . Lass uns das machen und dann ist das Refactoring mit SCSS. Ich schreibe es hier drüben. Dieser Live-Sass-Compiler wird hier nach Änderungen Ausschau halten und dann wird er aktualisiert. Eigentlich schalte ich es vorerst aus. Die Knöpfe gehen an. Ich muss das bewegen. Klicke auf „Beobachten“, werde es erstmal los und dann lösche ich das alles erstmal. Da war ich mir etwas zu weit voraus. Lassen Sie uns das mit CSS ein bisschen weiter ausbauen. Ich möchte in meiner Seitenleiste ein Seitenleistenmenü erstellen, also öffne ich es. Was ich tun werde, ist eine Konvention, die der sogenannten BEM, Block Element Modifier, ähnelt . Im Grunde nur eine Konvention dafür, wie ich Klassen benenne. Dieses, weil es in einer Seitenleiste ist, kann ich in die Seitenleiste gehen und falls du dich fragst, was das ist, das ist Emmett, also kann ich Punkt machen und dann den Klassennamen auf Tab drücken und es wird ein Div mit diesem Klassennamen erstellt. Ich nenne das Sidebar-Menü. Dann kannst du sehen, dass wir ein Div haben, aber sagen wir einfach, wir wollen, dass das eine Liste ist , damit ich es ändern kann, füge den Elementnamen hier davor füge den Elementnamen hier davor ein, dann drücke „Tab“, und jetzt erhalten wir eine ungeordnete Liste mit der Klasse des Sidebar-Menüs. Dann können wir hier reingehen und einige List-Tags öffnen. Eigentlich wollen wir ein paar Links hier drin haben, also lasst uns ein paar Links einfügen. Ich füge Link 1 ein und kopiere das dann einfach heraus. Link 2, Link 3, hier umbenennen. Jetzt haben wir hier ein Sidebar-Menü und natürlich möchte ich nicht das Standarddesign von Links und Listen. In diesem Fall mag es innerhalb des Hauptinhalts praktisch sein, aber hier versuchen wir, ein Menü zu erstellen , also muss ich das rückgängig machen. Ich werde hier vor den Medienabfragen darauf eingehen und eingeben Seitenleistenmenü eingeben. Wenn wir hier reinschauen und uns das ansehen, können wir sehen, welche Stile für diese Elemente tatsächlich automatisch generiert werden . Ich werde das ansprechen. Hier sehen wir unser Seitenleistenmenü und Sie können Stiltyp der Liste sehen. Wenn wir hier reingehen würden, testen wir es zuerst in diesem Browser, Liste, Stil, Typ, und dann können Sie hier sehen, dass wir diese Dinge hier ändern können. Wir können nichts tun. Wir können diese Punkte entfernen. Lassen Sie mich das kopieren und hier einfügen, und dann bekommen wir auch eine gewisse Polsterung von links von 40 Pixeln. Ich werde das auch entfernen, padding-left: 0. Da haben wir es. Ich möchte immer noch ein gewisses Maß an Polsterung, also werde ich eine allgemeine Einstellung für die Polsterung vornehmen. Nur in diesem Abschnitt werde ich 10 Pixel daraus machen. Wenn wir uns das Seitenleistenmenü ansehen, können wir sehen, dass es eine Polsterung von 10 Pixeln hat. Der gesamte Inhalt innerhalb des Seitenleistenmenüs wird beim Versuch 10 Pixel groß sein, aber dann haben wir anscheinend auch einen gewissen Rand oben und unten, also gehe ich darauf ein, ich schaue mir berechnet hier an. Wir haben oben und unten etwa 16 Pixel Rand. Ich entferne die Margen, indem ich die Marge Null setze und los geht's. Jetzt möchte ich das Styling des Link-Tags loswerden. In CSS kann ich das so machen, indem ich zunächst das Seitenleistenmenü auswähle und wenn ich ein Leerzeichen einfüge, kann ich Kinder darin auswählen. Ich wähle die darin enthaltenen Listenelemente aus, aber dann befinden sich in diesen Listenelementen Tags, sodass ich dort tatsächlich zwei Verschachtelungsebenen vornehmen kann. Ich suche nach den Link-Tags innerhalb eines Listenelement-Tags in diesem Seitenleisten-Menüelement. Dann werde ich noch einmal auf das verweisen, was wir hier in einem Browser sehen , nach unten schauen. Textdekoration unterstreichen, lassen Sie uns das entfernen. Textdekoration. Keine. Wir möchten auf jeden Fall, dass der Cursor auf dem Zeiger bleibt, damit er anzeigt, dass es sich um einen Link handelt, wie Sie hier sehen können. Wir wollen, dass die Farbe ist, machen wir sie vorerst einfach schwarz. Ich drücke da auf „Speichern“ und wie du siehst, sehen sie jetzt viel normaler aus. Wir möchten sie vielleicht etwas offensichtlicher aussehen lassen , dass sie anklickbar sind. Was wir tun können, ist hier eine Pseudoklasse hinzuzufügen. Auch hier werfe ich dir in diesem Video eine Menge neues CSS vor, aber auch hier, wenn du tiefer in HTML und CSS eintauchen möchtest, kannst du dir meine andere Klasse ansehen. Aber genau das hier ist eine sogenannte Pseudoklasse. Ich setze hier einen Doppelpunkt und dann setze ich den Hover und was wir tun können ist, diese Textdekoration vielleicht zurückzubringen, aber nur beim Schweben. Ich unterstreiche die Textdekoration und dann werden Sie sehen , dass wir sehen können, dass die Links oder wir dem Benutzer anzeigen, dass es sich um Links handelt, indem wir den Cursor ändern und ihn unterstreichen. Cool, lass uns auch ein Header-Menü erstellen. Ich gehe hier hoch und anstelle des Headers werde ich genau das Gleiche tun. Ich werde eine URL mit einem Header-Menü der Klasse erstellen, gehen Sie hier rein und lassen Sie uns das hier kopieren. Spar dir das. Wir werden das etwas anders stylen. Unter Header erstelle ich einen Regelsatz für das Header-Menü. Nochmals das Gleiche, entferne den Listenstiltyp, und ich möchte, dass er nicht über sich selbst angezeigt wird . Ich möchte, dass es auf dem Bildschirm angezeigt wird. Was ich tun werde, ist Display Flex. Da hast du es. Jetzt, wo sie nebeneinander liegen , aber sie sind zu nah, also werde ich einen Spaltenabstand von 10 Pixeln machen. Da hast du es, sie sind getrennt. Dann verwende ich dieses andere Attribut in Flexbox namens Justify Content Center und damit werden die Links in die Mitte gestellt. Da kannst du es sehen. Dann formatieren wir diese Links. Auch hier können wir genau das Gleiche tun wie beim letzten Mal. Header-Menü UL LI. Eigentlich nicht die UL, weil wir uns bereits in einer UL befinden. Dann setzen wir die Textdekoration auf Keine“ und was machen wir mit der Farbe? Nochmals schwarz, sagen wir einfach, und vielleicht machen wir dieselbe Pseudoklasse. Ich kopiere das einfach und setze die Pseudoklasse für Hover ans Ende und dann können wir unseren Hover-Status stylen , Textdekoration unterstreichen. Lass uns das machen. Ich klicke darauf auf „Speichern“. Jetzt können wir sehen, dass wir unser Menü in unserer Kopfzeile und unser Menü in unserer Seitenleiste haben . Was wir hier gemacht haben, ist, dass Sie sehen können dass wir etwas geschachtelt haben. Wir haben ein paar Farben. Was wir in Sass tun können, ist unsere Verschachtelung zu verändern. Der Live Sass-Compiler wurde ausgeschaltet. Ich werde das öffnen. Was wir tun werden, ist, dass ich das alles kopiere. Ich gehe zu styles.css, füge das hier ein und dann wollen wir sicherstellen, dass alle Änderungen füge das hier ein und dann wollen wir sicherstellen, dass alle Änderungen, die wir hier vornehmen, in styles.css übernommen werden. Schalten Sie das nicht ein und schon haben Sie Ihr CSS hierher kopiert. Andernfalls wird das, was Sie hier geschrieben haben, überschrieben. Dann klicke ich auf „Watch Sass“. Es schaut jetzt zu. Und weil CSS abwärtskompatibel mit SCSS ist, funktioniert alles normal. Lassen Sie mich Ihnen nun einige der Vorteile der Verwendung von Sass zeigen. Wenn wir hierher gehen, schauen wir uns styles.css nicht mehr an. Das ist jetzt nur für den Browser. Wir werden in styles.css arbeiten. Was wir hier tun können, ist an unseren Nestern zu arbeiten. Wie Sie hier sehen können, wiederholen wir uns. Wir haben dreimal ein Header-Menü und wir haben hier zweimal li und a zweimal. Was wir tun können, wir können das nehmen, ausschneiden, das, fügen es in unseren Regelsatz für das Header-Menü und dann repariere ich die Einrückung hier. Da wir über das Header-Menü kopieren, können wir stattdessen, sobald wir es darin verschachtelt haben, das Symbol „und|“ verwenden. Los geht's. Wir können „und“ machen. Drücken Sie nun auf „Speichern“ und Sie können sehen, jetzt bekommen wir in unserer styles.css das gleiche Ergebnis. Wenn ich hier im Header-Menü li a und la nachschaue , bewege ich das hier unten. Sie sind in unserer styles.css getrennt, was wir für unser CSS benötigen , aber hier sind sie zusammen. Tatsächlich brauchen wir in diesem Fall nicht einmal das Ende. Wir können einfach so vorgehen und dann wird die Verschachtelung hier impliziert, indem wir sie in den Regelsatz aufnehmen. Aber wir können diese Verschachtelung noch weiter vorantreiben. Sie können hier sehen, dass sich Li und A wiederholen. Wir können diesen Teil tatsächlich nehmen und ihn hier einbetten, indem wir das Ende hineinlegen. Das Ende nimmt einfach das übergeordnete Element und wendet dann jede weitere Auswahl darauf an. Wir haben ein Header-Menü und dann werden wir diese Stile auf Link-Tags innerhalb von Listen-Tags innerhalb des Header-Menüs anwenden Link-Tags innerhalb von Listen-Tags innerhalb des , damit Sie sehen können, wie sich die Verschachtelung hier abspielt. Das funktioniert jetzt alles auf die gleiche Weise, und was wir tun können, um noch einen Schritt weiter zu gehen, ist, dass wir das At-Symbol verwenden können um selbst einen Klassennamen zu erstellen. Sehen Sie, wie wir Header und Header-Menü haben. Sie haben beide einen Header. Was wir tun können, ist das zu nehmen, das zu schneiden und dann können wir hier ein „und“ machen, um den Punkt-Header darzustellen , und dann können wir das Dash-Menü einwerfen und wir erhalten genau das gleiche Ergebnis. Wenn wir uns das CSS ansehen, können Sie sehen, dass wir das gleiche Ergebnis wie zuvor erhalten. Header, Header-Menü, Header-Menü links, Header-Menü links mit dem Mauszeiger. Es erweitert es um das notwendige CSS, aber in unserem Code-Editor wir diese verrückte Verschachtelung verwenden. Ich persönlich finde das praktisch, wenn ich Klassennamen erstelle , die tiefer gehen. Zum Beispiel könnten wir dem einen Klassennamen oder einen Link zum Header-Menü geben . Wie Sie sehen können, verdoppeln wir jedes Mal die Wörter davor. Ich finde es sehr praktisch, dass ich das „und“ -Symbol, das Ampersand, hier verwenden kann , um auf den früheren Teil zu verweisen und alles semantisch verschachtelt zu haben. Jetzt leben alle unsere Header-Stile in diesem einen Regelsatz. Dann haben wir natürlich all diese verschachtelten Regelsätze. Das Gleiche können wir für das Seitenleistenmenü tun. Ich mache es von außen nach innen, ich nehme diesen Teil , der der einzige Teil ist , der anders ist. Schneide diesen Teil aus und setze dann ein „und“ für den Mauszeiger. Jetzt können wir einfach den Hover-Status mit den anderen Stilen für den Standardstatus bestimmen den Hover-Status mit . Und dann ist der Unterschied zwischen diesem Selektor und diesem Selektor natürlich das li a. Also können wir das einfach nehmen, es hier einordnen und dann, den letzten Schritt, wir können den Teil nehmen, der von hier nach hier anders ist, nämlich hier einordnen und dann, den letzten Schritt, wir können den Teil nehmen, der von hier nach hier anders ist, das Strich-Menü. Schnapp dir das, geh hier rein und füge das „und“ hinzu. Wirf das weg. Wenn wir nun auf Speichern klicken, schauen wir uns unser Ergebnis an. Wir erhalten genau das gleiche Ergebnis. Ich würde sagen, für mich ist der größte Vorteil von Sass diese Verschachtelungsfunktion. Jetzt haben wir den gesamten Header-Code in einem Regelsatz. Wir haben unseren gesamten Sidebarcode in einem Regelsatz. Es kann verwirrend werden, wenn Sie versuchen, die Codebasis zu durchsuchen. Es gibt einige Nachteile. Wenn ich zum Beispiel darauf klicke und in ein neues Projekt komme und das hier finden möchte das hier finden gehe ich in die Sass-Datei, um es zu ändern. Ich kann es nicht so suchen, wohingegen ich es in CSS könnte. Ich muss das Seitenleistenmenü finden. Wo ist es? Es ist auch nicht hier. Hier wird es etwas kniffliger , wenn es um die Suche geht, aber ansonsten gefällt mir dieser Verschachtelungsansatz sehr gut. Die andere Funktion, die wir in SCSS verwenden können, sind Variablen. Ich kann hier rübergehen und Variablen definieren. Sagen wir einfach Header-Farbe und was haben wir dann für die Header-Farbe? Dunkelgrau, und dann nehmen wir eine Seitenleistenfarbe. Wenn wir es nur an einem Ort verwenden, ist es natürlich nicht so praktisch, aber vielleicht können wir hier Markenfarben speichern. Sachen wie Knopffarben und solche Sachen. Komponenten, die wir regelmäßig verwenden werden. Wir machen hier Beige. Und dann würden wir anstelle von Dunkelgrau die Variable setzen, sodass jede Farbe, die in der Header-Farbe gespeichert ist, hier gelten würde. Jede Farbe, die in der Seitenleistenfarbe gespeichert ist, würde hier einfach durchgehen. Wenn ich darauf auf „Speichern“ klicke, wirst du sehen, dass wir das gleiche Ergebnis erhalten. Und wir bekommen hier immer Standard-CSS in unserer CSS-Datei. Wenn Sie hier nachschauen, gibt es keine Variablen, es gibt keine Verschachtelung , die wir in SCSS haben. Das ist nur SCSS-Code. Es erleichtert uns die Arbeit mit CSS und bietet uns zusätzliche Funktionen. Aber es ist sehr wichtig, hier zu beachten , dass das kompilierte CSS, der Teil, der tatsächlich vom Browser gelesen wird, nicht Sass sein wird. Es gibt einige andere Funktionen in SCSS. Wir können Funktionen und benutzerdefinierte Medienabfragen und all diese Dinge erstellen und benutzerdefinierte Medienabfragen und all diese , aber ich möchte in diesem Video und in dieser Klasse nicht zu komplex werden. Wenn du tiefer in Sass einsteigen möchtest, habe ich hier auf Skillshare einen Kurs über Sass. Klicken Sie darauf, wenn Sie mehr erfahren möchten. Die Hauptsache, die ich hier vermitteln wollte , ist, was Sass macht. Die Idee hinter einem Präprozessor ist, dass wir unsere eigene Sprache erstellen können in eine der drei Sprachen kompiliert , auf die das Frontend Browsers reagiert, und wir können unsere Entwicklungsumgebung auch mit einem Tool wie einem Live-Sass-Compiler einrichten einem Tool wie einem Live-Sass-Compiler um diesen benutzerdefinierten Code zu kompilieren, diesen Code, der uns als CSS-Entwickler das Leben erleichtert . Nachdem das geklärt ist, lassen Sie uns vorerst vom Styling übergehen und über Interaktivität sprechen. Lassen Sie uns über JavaScript sprechen. 7. Javascript: In diesem Video werden wir über JavaScript sprechen. Javascript verleiht unseren Webseiten Interaktivität im Frontend. Ich habe in der Vergangenheit auf diesem Skillshare-Kanal über JavaScript gesprochen . Der größte Kritikpunkt , den ich an meinen vorherigen Schulungen zu JavaScript bekommen habe meinen vorherigen Schulungen , ist, dass sie nicht praktisch genug sind Deshalb werde ich in diesem Video ein Beispiel wählen, das ziemlich praktisch und realitätsnah ist. Ich werde dieser Webseite eine Sidebar-Schublade hinzufügen, und wir werden eine Schaltfläche zum Öffnen der Schublade und eine Schaltfläche zum Schließen der Schublade haben . Das ist ein ziemlich verbreitetes Beispiel aus der Praxis und auch ein ziemlich einfaches. Das Codieren sollte nicht zu lange dauern. Was ich tun werde, ist in index.html zu gehen. Hier habe ich die SCSS-Datei vorerst bereits geschlossen und kann sie schließen. Das heißt nicht, dass es nicht mehr läuft. Wie Sie hier sehen können, schaut es immer noch zu, aber es wird uns einfach nicht so sehr im Weg stehen. Ich könnte das nur ein bisschen erweitern. Hier im Hauptinhalt haben wir natürlich den Header-Bereich und den Seitenleistenbereich ausgefüllt , aber wir haben nichts in den Hauptinhalt aufgenommen, also lasst uns das jetzt machen. Geben wir unserer Seite eine Überschrift, und ich sage einfach Top-Level. Eigentlich nenne ich diese Seite Titel. Dann füge ich es hier unten in den Absatz ein, nur damit das realistisch aussieht. Dann können Sie sehen, wir haben einen Seitentitel mit etwas Absatztext darunter. Dann drücke ich hier einen Knopf. In diese Schaltfläche schreibe ich Schublade öffnen. Wie Sie sehen können, haben wir unser Standard-Button-Design von Anfang an. Wenn ich den Mauszeiger darüber bewege, können Sie sehen, wie sich die Farben ändern. Dies ist ein Standard-Button-Element aus HTML. Jetzt werden wir zwei Schaltflächen auf unserer Webseite haben. Um sie zu unterscheiden und um sicherzustellen, dass unser Targeting sehr spezifisch ist, gebe ich dem eine ID von Open-Drawer-Button. Nun, unsere Schublade existiert noch nicht, also müssen wir sie erstellen. Ich gehe hier rein, lass mich das noch einmal herausziehen und ich werde ein neues Div mit der Klasse der Schublade erstellen. In der Schublade erstelle ich eine weitere Schaltfläche und gebe ihr die ID der Schaltfläche zum Schließen der Schublade. Mit dieser Taste wird die Schublade geschlossen. Dann füge ich in die Schaltflächen-Tags zum Öffnen und Schließen den entsprechenden Text ein , der einfach Schublade schließen lautet. Wenn Sie dann genau hinschauen, können Sie sehen , dass jetzt ein Div in unser Raster fällt weil es sich im Seitencontainer befindet. Wir wollen das nicht, also verschieben wir das aus dem Seitencontainer, und Sie können jetzt sehen, dass es immer noch unten steht, weil wir es noch nicht gestylt haben. Das erste, was wir tun wollen, ist, ich das in unseren Entwicklertools mache, damit ihr sehen könnt, wie das Ganze im laufenden Betrieb passiert. Wenn ich diese Taste hier drücke, wird eine Auswahl für diese Klasse eingerichtet. Genau hier schreibe ich Position: absolut. Dadurch können wir es außerhalb des regulären Layouts und über dem Inhalt platzieren, was wir für unsere Schublade wollen. Ich werde das jetzt explizit positionieren. Ich mache es mit Null Pixeln von oben und Null Pixel von rechts. Dann wollen wir ihm eine Breite geben, die der Hälfte der Breite des Viewports entspricht. Derzeit können wir es nicht sehen, da es keine andere Hintergrundfarbe gibt. Geben wir ihm einfach eine schwarze Hintergrundfarbe. Wir möchten auch, dass es sich über die gesamte Höhe der Seite erstreckt. Ich werde eine Höhe von 100 Prozent der Viewporthöhe erstellen . Jetzt können Sie sehen, wie sich unsere Schublade formt. Ich werde hier etwas Polsterung reinlegen, damit der Knopf dort nicht bündig an der Seite anliegt. Stellen Sie dann sicher, dass Sie die Seite nicht aktualisieren , da dies noch nicht in unserem Dokument gespeichert wurde Deshalb kopiere ich die Stile, die wir gerade eingerichtet haben. Gehe in unsere styles.scss. Stellen Sie sicher, dass Sie nicht zu styles.css gehen, wenn Sie noch Live Sass Compiler ausführen oder ihn in Zukunft ausführen möchten , da er diese Änderungen überschreibt. Gehen wir dann weiter vor den Medienanfragen fügen Sie sie hier in unsere Schubladenstile ein. Die Einrückung ist etwas abwegig, aber wie Sie sehen können, wenn wir auf Speichern klicken, kompiliert sie, aktualisiert unseren Live-Server, und wie Sie sehen können, haben wir unsere Schublade überzogen. Jetzt müssen wir angeben, ob die Schublade geöffnet oder geschlossen ist. Was ich tun werde, ist hier runter zu gehen und Aria zu verwenden , eine Methode, mit der wir Screenreadern den Status eines Elements anzeigen können . Screenreader sind ein Tool, das sehbehinderte Menschen verwenden, um sich Websites vorlesen zu lassen. Es ist gut, dieses Attribut zu verwenden, da es diesen Personen hilft, auf die Website zuzugreifen. Wir setzen aria-hidden hier auf true und geben dem Screenreader an , dass dieses Element derzeit ausgeblendet ist. Dann müssen wir jetzt nur noch in unser CSS gehen und eine Stilregel schreiben, die das widerspiegelt. Die Art und Weise, wie wir auf ein Element mit einem bestimmten Attribut abzielen , erfolgt über diese eckigen Klammern, und dann setzen wir einfach das Attribut mit seinem Wert in diese Klammern. Um zum Seitenrand zu kommen, gehe ich zu 100 Prozent negativ nach rechts. Der Grund, warum ich es aus dem Bildschirm verschiebe , anstatt es auf diese Weise mit Display zu verstecken : keiner ist, weil wir zwischen Ein und Aus keine Keyframes hinzufügen können : keiner ist, weil wir zwischen Ein und Aus keine Keyframes , wenn wir die Schublade animieren wollen, das Öffnen und Schließen zu animieren. Anstatt anzuzeigen: keine, werde ich jetzt 100 Prozent negativ nach rechts drehen. Daher können wir es nicht auf der Seite sehen, es sei denn, der Benutzer tut natürlich das, was ich gerade mache, nämlich die Seite horizontal zu scrollen. Das ist natürlich nicht nett, also werde ich in unseren Styles für das Bodytag nachschauen und overflow-x auf versteckt setzen. Dies könnte in Zukunft ein Problem sein, wenn wir die Seite aus irgendeinem Grund horizontal scrollen möchten, aber im Moment wird dieser Hack funktionieren. Ab diesem Punkt müssen wir, um diese Schublade zu öffnen, nur noch das Attribut aria-hidden in einen anderen Wert als true ändern , da es nur zu 100 Prozent negativ ist. Wenn das Attribut wahr ist , wird es standardmäßig richtig 0 sein. Ich muss hier auch den Stil für den Übergang eingeben, damit wir das richtige Attribut animieren. Wir geben dem eine Dauer von einer halben Sekunde und die Geschwindigkeitskurve stellen wir auf Ease-In-Out ein. Jetzt, wo wir diese Einstellungen dort haben, kann ich diesen Wert über die Dev-Tools aktualisieren , indem ich ihn manuell ändere. Auf der Registerkarte Elemente kann ich es von wahr auf falsch ändern, und dann können Sie sehen, dass die Schublade animiert wird. Wenn ich es wieder auf True ändere, wird es dann animiert. Jetzt werden die Benutzer natürlich nicht in die Entwicklertools kommen und dies ändern, also benötigen wir JavaScript, um den Endbenutzern diese Interaktivität im Frontend zur Verfügung zu stellen. Lassen Sie uns jetzt unsere JavaScript-Datei erstellen. Ich werde das Fenster hier draußen verlängern. Anstatt dies vorerst Seite an Seite zu tun, öffnen wir hier unseren Datei-Explorer und erstellen eine neue Datei mit dem Namen scripts.js. Der Skriptteil ist nicht unbedingt erforderlich. Wir können es nennen, wie wir wollen, solange wir es mit der Erweiterung of.js benennen, die für JavaScript-Dateien unerlässlich ist. Dann müssen wir diese externe Skriptdatei in unserem HTML verlinken . Wenn wir hier runter gehen, legen wir es vor das abschließende Körperschild. Wir können ein Script-Tag erstellen. Innerhalb des Script-Tags können wir das JavaScript wortwörtlich hier platzieren , aber stattdessen verknüpfen wir es einfach einem externen Stylesheet, das wir gerade erstellt haben. Ich gebe einfach den Pfad zu dieser Datei ein. Da sie sich hier im selben Ordner befindet, können wir einfach scripts.js schreiben. Um zu überprüfen, ob die Verknüpfung tatsächlich korrekt ist, fügen wir ein einfaches Konsolenprotokoll ein. Dadurch wird lediglich eine Nachricht an die Konsole ausgegeben. Dieser Befehl hier ist sehr praktisch für das Debuggen, aber im Moment geben wir nur die Wörter Hello World aus. Wenn ich hier zu meinem Browser zurückkehre, ihn aktualisiere und wir dann zur Konsole übergehen, können Sie sehen, wie die Worte Hallo Welt auftauchen. Wenn ich erneut aktualisiere, können Sie sehen, dass nach dem Laden der Seite dieser Hello World-Text geladen wird . Das bestätigt, dass das Skript tatsächlich verlinkt ist, und so können wir hier beginnen, unser JavaScript zu erstellen. Wie bereits erwähnt, werden wir unser JavaScript verwenden , um die Schublade zu öffnen Wir benötigen also einen Event-Listener auf der Schaltfläche. Dann zielt dieser Event-Listener auf diese Schublade ab und ändert dann durch dieses aria-hidden die rechte Maustaste auf Null. Wenn ich einfach falsch tippe, öffnet es sich und dann setzen wir einen weiteren Event-Listener darauf, um die Schublade zu schließen. Gehen wir hier rüber und zielen wir auf das erste Element ab, diese Schaltfläche „Schublade öffnen“. Erfrischen Sie sich hier. Schließ die Schublade. Das machen wir, indem wir mit dem Dokumentobjekt beginnen. Dann haben wir innerhalb der Dokumentobjekte hier ein paar Optionen, wir können QuerySelector verwenden, eine Catch-All-Methode , mit der wir hier einen CSS-Selektor einfügen können und das erste Element erfasst, das diesem Selektor entspricht. Es ist dasselbe wie in unseren Stilen. Wenn wir auf unsere Seitenleiste abzielen würden, könnten wir das so machen. In diesem Fall zielen wir auf diese spezielle Schaltfläche ab, die eine ID hat , sodass wir den Hash dort platzieren und ihn so anvisieren können. Oder wir können die Methode getElementById verwenden und dann die ID eingeben. Jetzt haben wir das Element ausgewählt. Was wir tun können, ist hier eine weitere Methode namens addEventListener hinzuzufügen . Das erste Argument ist, worauf wir achten werden. Wir hören uns das Click-Event an. Dann ist die zweite die Funktion, die wir ausführen wollen. Ich werde es so auf die altmodische Art machen. Dann hier drinnen, nur um zu überprüfen, ob dieser Event-Listener korrekt eingerichtet ist, werde ich einfach ein Konsolenprotokoll erstellen. Wie gesagt, Konsolenprotokolle sind sehr praktisch für das Debuggen und das Durchlaufen eines großen Prozesses. Dies ist ein etwas kleinerer Prozess, aber wir können überprüfen, ob der Event-Listener über diese console.log funktioniert. Wenn ich hier auf „Schublade öffnen“ klicke, siehst du in der Konsole hier, Klick kommt hoch und wenn ich weiter draufklicke, geht die Zahl neben Klick hoch. Das passiert, wenn Sie Konsole doppelte Werte protokollieren. Das ist gut. Wir wissen, dass wir das Element richtig ausgewählt haben, und wir können dem Klickereignis tatsächlich Code anhängen. Jetzt gehe ich rein und nehme die Schublade ins Visier. Dafür verwende ich QuerySelector. Dort gibt es noch ein anderes namens querySelectorAll und das dient zum Erstellen eines Arrays von Elementen für den Fall, dass Sie mehrere auswählen möchten. Wir wollen nur das erste auswählen, das zu unserem CSS-Selektor passt , und das ist die Schublade. Dann wollen wir die Methode setAttribute ausführen und da dies eine Schaltfläche zum Öffnen ist, setzen wir das Attribut aria-hidden auf false, damit es nicht versteckt ist. Wenn ich hier auf „Speichern“ klicke, hierher zurückgehe, „Schublade öffnen“ klicke, und du kannst sehen, dass die Schublade geöffnet wird und wenn wir hinter die Kulissen auf den tatsächlichen Schubladencode schauen , kannst du hier sehen, dass aria-hidden wahr ist. Schau dir an, was mit aria-hidden passiert , wenn ich auf diese Schaltfläche klicke. Wie Sie sehen können, aktualisiert es unseren HTML-Code und macht ihn falsch. Cool. Wir müssen nur noch einmal genau den gleichen Vorgang mit der Schaltfläche Schließen ausführen. Ich gehe hier rein. Anstelle von Open-Button, Close-Drawer-Button und statt false true, aber wir können den ganzen anderen Code recyceln. Erfrischen Sie sich hier, Schublade öffnen, Schublade schließen , Schublade öffnen, Schublade schließen und so einfach ist das. Nun, das ist ein sehr kleines Projekt und ich serviere es vor Ort, es ist also nicht im Internet. Alles wird superschnell geladen, aber wenn Sie dies in Zukunft in eine Produktionsumgebung bringen möchten, ist es gut, zu warten, bis alle Elemente auf der Seite geladen sind, bevor Sie mit dem Laden dieser Event-Listener beginnen Laden dieser Event-Listener da die Möglichkeit besteht, dass Sie versuchen könnten einen Event-Listener anzuhängen, bevor das JavaScript dieses Element finden kann . Was ich tun werde, ist der Vollständigkeit halber einen weiteren Event-Listener hinzuzufügen, der unseren gesamten JavaScript-Code umschließt . Dieser wird auf dem Dokumentobjekt platziert. Wir werden für dieses Ereignis einen Event-Listener namens domContentLoaded hinzufügen , wie Sie hier sehen können. Es sagt nicht viel aus, aber im Grunde ist DOMContentLoaded, wenn, wie erwähnt, der DOM-Inhalt geladen wird, also der Inhalt auf der Seite geladen wird. Ich schnappe mir das alles und schiebe das dann da rein. wird nur sichergestellt , dass der gesamte Inhalt geladen ist , bevor wir versuchen, diese Event-Listener anzuhängen da wir eine Fehlermeldung erhalten, wenn wir Dadurch wird nur sichergestellt , dass der gesamte Inhalt geladen ist, bevor wir versuchen, diese Event-Listener anzuhängen, da wir eine Fehlermeldung erhalten, wenn wir kein Element mit einer solchen ID finden können. Um dieses Timing-Problem zu lösen, fügen wir hier einen zusätzlichen Event-Listener ein. Ein ziemlich einfaches Beispiel, aber ein ziemlich verbreitetes, und ich hoffe, Sie stimmen zu einem und ich hoffe, Sie stimmen praktischen Beispiel für die Verwendung von JavaScript, um Interaktivität auf Ihrer Seite zu erzeugen , während ein anderes Element auf dem Bildschirm geöffnet und geschlossen wird, und natürlich würden wir hier einige Inhalte einfügen wollen, vielleicht etwas Navigation, vielleicht im Fall einer E-Commerce-Website, Sie könnten Ihre Eine Einkaufskarte ist hier, eigentlich alles, was Sie wollen, aber jetzt haben wir zumindest die Möglichkeit diese Schublade mit JavaScript zu öffnen und zu schließen. Wenn du tiefer in JavaScript einsteigen möchtest, habe ich natürlich meine anderen Kurse hier auf Skillshare. Sie können sich den JavaScript-Kurs Web Development Fundamentals ansehen den JavaScript-Kurs Web Development Fundamentals um einen ausführlichen Kurs über JavaScript zu erhalten. Andernfalls werden wir jetzt weitermachen und über TypeScript sprechen , ein ähnliches Konzept wie SAS eine Präprozessor-Skriptsprache, außer dass es diesmal für JavaScript ist. Das werden wir im nächsten Video sehen. 8. Typescript: In diesem Video werden wir TypeScript lernen oder zumindest vorstellen. TypeScript ist ein ähnliches Konzept wie SASS versus CSS. CSS ist offensichtlich das, was in Ihrem Browser ausgeführt wird. JavaScript wird auch in Ihrem Browser ausgeführt, aber SASS ist etwas, das wir verwenden können CSS zu kompilieren, um uns als Entwicklern zu helfen, dasselbe gilt für TypeScript. Es ist ein separates Skript, das ein Superset von JavaScript ist. Wir können JavaScript in TypeScript einfügen und es funktioniert genauso wie mit SASS, aber der Unterschied liegt bei JavaScript, es ist eine Programmiersprache. Es unterscheidet sich von CSS in dem Sinne, dass CSS einfach aus Stylesheets besteht. Die Funktionen, die TypeScript lohnenswert machen unterscheiden sich stark von SCSS oder SASS. Wie hier erwähnt, handelt es sich um eine strikte syntaktische Obergruppe von JavaScript und fügt der Sprache optionale statische Typisierung hinzu. Das ist sehr Programmierer E. Wenn Sie ein Anfänger sind, der sich das anhört, könnte Ihnen das über den Kopf gehen. Wenn Sie diese Lektion überspringen möchten, können Sie das gerne tun , aber ich wollte das hinzufügen, da es in der modernen Frontend-Webentwicklung verwendet wird . Es ist in den letzten Jahren sehr beliebt geworden und viele Leute benutzen es. Für mich hat es sogar eine Weile gedauert, bis die Vorteile der Verwendung von TypeScript verstanden habe, aber am Ende dieser Lektion verstehen Sie hoffentlich, wofür TypeScript ist und ob Sie es tatsächlich verwenden möchten. Lassen Sie dies Ihre Einführung in TypeScript sein. Wenn Sie es nicht verwenden möchten, ist dies nicht unbedingt erforderlich, es sei denn, Sie arbeiten mit einem bestimmten Entwicklungsteam zusammen, das es verwendet. Wenn Sie mehr über TypeScript erfahren möchten, die Website hier, der erste Website-Link , der bei Google erscheint. Um TypeScript verwenden zu können, benötigen Sie nun Node und NPM. Wenn Sie nicht wissen, was das sind, können Sie zu nodejs.org gehen. Nodejs ist eine plattformübergreifende Open-Source-JavaScript-Laufzeitumgebung . Node ist im Wesentlichen nur die Fähigkeit, JavaScript, eine Sprache, die für Webbrowser entwickelt wurde, auf Ihrem Computer auf einem Server auszuführen eine Sprache, die für Webbrowser entwickelt wurde , auf Ihrem Computer , sodass Sie diese verwenden können. Dann ist NPM, was für Node Package Manager steht, Sie auf npmjs.com finden den Sie auf npmjs.com finden, im Wesentlichen ein Paketmanager. Wir sind in der Lage, verschiedene Pakete zu installieren , die Leute erstellen. Sie können sie hier suchen. Sie können sich diese Pakete als verschiedene Module vorstellen, unterschiedlichen vorgefertigten Code, andere Leute erstellt haben und den wir in unser Projekt und global in unserem System installieren können . Um zu überprüfen, ob Sie Node installiert haben, können Sie node -v ausführen. Um zu überprüfen, ob Sie NPM installiert haben, können Sie npm -v ausführen, und dann können Sie tsc --version ausführen , um die Version von TypeScript zu sehen, die Sie haben. Wenn Sie TypeScript nicht installiert haben, werden Sie sehen, dass dort Befehl nicht gefunden wird: tsc. Dann möchten Sie npm install -g typescript ausführen , und dadurch wird TypeScript global auf Ihrem Computer installiert . Was Sie gerade gesehen haben, war ein vorab aufgezeichnetes Video weil ich das bereits gemacht habe. Stellen Sie sicher, dass Sie Node und NPM installiert haben. Wenn Sie TypeScript nicht installiert haben, folgen Sie den Befehlen, die ich gerade erwähnt habe. Ich werde das schließen und ich werde das schließen. Wenn das installiert ist, können wir tatsächlich unsere erste TypeScript-Datei erstellen. Eigentlich müssen wir vorher hier eine tsconfig.json-Datei erstellen, die nur unsere TypeScript-Konfigurationsdatei ist. Hier können Sie sehen, dass es in diesem Format namens JSON ist, das nur eine Möglichkeit zum Speichern von Daten ist. Lassen Sie mich nur die Einbuchtung hier korrigieren. Sie können sehen, dass wir dieses Objekt geöffnet haben. Wir haben dieses Compileroptionsobjekt hinzugefügt und dann es5 für Ziel, commonjs für Modul und die Quellzuordnung auf true gesetzt. Wie Sie in diesen Kommentaren sehen können, habe ich versucht zu erklären, was die einzelnen tun. Dieser erste legt die Zielversion von JavaScript fest, auf die wir kompilieren möchten. Die zweite legt den Stil des Moduls fest. auch eine Zuordnungsdatei , wird an dem Punkt, Wenn Sie dann die Quellzuordnung auf true setzen , wird an dem Punkt, an dem wir unser TypeScript transpirieren, generiert , und diese Datei ordnet die transpilierte JavaScript-Datei der ursprünglichen TypeScript-Datei zu, sodass der ursprüngliche TypeScript-Code beim Debuggen rekonstruiert werden kann. Wie gesagt, das wird ein bisschen technisch und ein bisschen anspruchsvoll, aber wir werden sehen, dass das ziemlich bald funktioniert. Was wir jetzt mit unserer TypeScript-Konfigurationsdatei hier machen können , ist den TSC-Befehl auszuführen , der für TypeScript Compile steht, aber natürlich benötigen wir zuerst eine TypeScript-Datei. Was ich tun werde, ist genau wie wir es mit styles.css gemacht haben. Benennen wir das einfach in ts um und jetzt wird daraus eine TypeScript-Datei. Denken Sie daran, dass TypeScript ein Superset von JavaScript ist und daher abwärtskompatibel ist. Wir können einfach reines JavaScript in eine TypeScript-Datei einfügen und es sollte funktionieren. Dann öffnen wir ein Terminal. Ich werde hierher wechseln, um das Terminal zu machen, und dann lassen Sie uns einfach tsc für die TypeScript-Kompilierung ausführen. Jetzt können Sie sehen, dass unsere Datei script.js und unsere scripts.js.map erstellt wurden. Wenn ich hier hineinschaue, werden Sie sehen, dass es genau dasselbe ist, abgesehen davon , dass vielleicht einige Leerzeichen gelöscht werden und dann dieser Kommentar hier diese Datei der Quellzuordnung zuordnet, was uns, wie gesagt, als wir die tsconfig-Datei eingerichtet haben, ermöglicht, die JavaScript-Datei der ursprünglichen TypeScript-Datei zuzuordnen was uns, wie gesagt, als wir die tsconfig-Datei eingerichtet haben, ermöglicht, die tsconfig-Datei eingerichtet haben, ermöglicht, die JavaScript-Datei der ursprünglichen TypeScript-Datei zuzuordnen die JavaScript-Datei der ursprünglichen TypeScript-Datei , und das hilft uns dabei Debuggen. Mach dir nicht zu viele Sorgen um die Karte. Wir werden mit dieser Datei arbeiten und dann werden wir natürlich genau hier sein und immer noch dieselbe Ausgabedatei scripts.js einladen , die derzeit genauso aussieht wie unsere TypeScript-Datei, aber das liegt daran, dass wir sie nicht wirklich geändert haben um mehr TypeScript E zu werden Der Grund, warum es TypeScript heißt, ist wir hier genauer sein können TypeScript, indem definiert wird, welche Objekte welche Typen sind, da JavaScript sehr locker typisiert ist, sodass oft nicht klar ist, um welchen Typ Objekte es sich handelt. Wir können tatsächlich bestimmte Objekte als bestimmte Typen angeben. Lass uns das jetzt wirklich machen. Wie Sie hier sehen können, verweise ich immer wieder auf ähnliche Objekte. Ich habe zweimal auf die Schublade verwiesen und dann auf die Schaltfläche „Schublade öffnen“ und „ Schublade schließen“. Verschieben wir diese in ihre eigenen Variablen. Lassen Sie uns sie eigentlich in Konstanten verschieben. Es gibt zwei Möglichkeiten, einen Wert festzulegen, obwohl es in JavaScript eigentlich die ursprüngliche Variable gibt, aber jetzt bevorzugen wir entweder const oder let. Nehmen wir an, ob wir erwarten, dass sich der Wert später ändert. Aber wenn wir auf bestimmte DOM-Elemente abzielen, erwarten wir nicht, dass sich etwas ändert. Wir erstellen nur einen Verweis auf dieses Element. Wenn ich lernen kann, richtig zu buchstabieren, kann ich es einfach kopieren und tatsächlich einfügen. Ich kann das nehmen und dann mit Pascal Case dort auf die Schaltfläche zum Öffnen setzen und dann kann ich die Schaltfläche zum Schließen anvisieren, indem ich sie hier anfasse. Wir überarbeiten hier nur unseren Code. Offensichtlich funktioniert dieser Code, aber wir machen ihn nur ein bisschen netter. Denken Sie daran, dass TypeScript und SASS für die Entwicklererfahrung bestimmt sind, nicht für den Endbenutzer, und dann ist dies die Schublade. Ich nenne das einfach die Schublade. Dann haben wir alle unsere Referenzen da oben. Was ich jetzt tun kann, ist das umzugestalten und die Stellen, an denen dies im Code auftaucht, durch diesen Variablennamen oder diesen Konstantennamen zu ersetzen . Ich gehe hier rein, ich öffne den Knopf. Wir werden auch den Event-Listener hinzufügen. Das wird einfach zur Schublade. Dies wird in Pascal-Fall zu CloseButton, CloseButton und dann wieder zur Schublade. Wir können das einfach durch eine Schublade ersetzen . Wenn wir nun den Mauszeiger über OpenButton bewegen, können Sie sehen, dass dort HtmlElement steht. Das ist der Typ. Wenn wir den Mauszeiger hier bewegen, erscheint HtmlElement und dann ist hier Element. Wir können genauer werden und anfangen, etwas TypeScript zu schreiben hier anfangen, etwas TypeScript zu schreiben, indem wir as sagen und spezifischer werden. Die Schaltfläche zum Öffnen der Schublade ist eigentlich ein HTML-Button-Element. Wir könnten hier reingehen und Folgendes eingeben: HtmlButtonElement. Wenn wir nun den Mauszeiger hier bewegen, werden Sie sehen, dass der Typ jetzt spezifischer ist. Anstelle von HtmlElement ist es jetzt auf HtmlButtonElement gesetzt. Wenn der Typ nicht automatisch erkannt wurde, können wir ihn hier als ButtonElement angeben. Dann ist dieser nur Element. Hier können wir HtmlDivElement sagen. Jetzt weiß unser Code genau, um welche Art von Element es sich handelt, aber das ist noch nicht besonders praktisch. Es war schwierig für mich ein wirklich praktisches, aber einfaches Beispiel Verwendung von TypeScript mit dem zu finden, was wir bisher erstellt haben, aber ich habe einen Weg gefunden, hier eine Funktion zu integrieren, und ich werde diese Funktion ToggleDrawer nennen. Je nach Zustand der Schublade wird sie geöffnet oder geschlossen, wird sie geöffnet oder geschlossen und wir können sogar eine Schaltfläche erstellen, wenn wir möchten , die mit dieser Methode sowohl geöffnet als auch geschlossen wird. Ich werde die Funktion auf eine neue Schulart erstellen und hier eine Variable einfügen , um anzugeben ob sie geöffnet werden soll oder nicht. iwAntiTopen nenne ich es und dann verwende ich die Pfeilsyntax, um die Funktion zu erstellen. Jetzt haben wir eine Funktion mit einem einzigen Argument. Hier mache ich ein einfaches Wenn dann. Ich sage, wenn iwantitOpen, dann setzen wir das Attribut von aria-hidden in der Schublade auf false. Andernfalls setzen wir es auf „Wahr“. Wenn ich nun auf Speichern klicke und den Mauszeiger darüber bewege, kannst du sehen, dass nach iwantiOpen alles steht. Hier heißt es, dass der Parameter iwAntiTopen implizit einen beliebigen Typ hat, aber aus der Verwendung kann ein besserer Typ abgeleitet werden. Anstatt dass der Parameter ein beliebiger Typ ist, können wir angeben, welcher Typ er sein soll. Offensichtlich verwende ich es hier als booleschen Wert, also setze ich hier einen Doppelpunkt ein und sage boolesch. Für diejenigen unter Ihnen, die in der Programmierung nicht so fortgeschritten sind, bedeutet Boolean nur einen wahren oder falschen Wert. Jetzt stellen wir sicher, dass bei der Ausführung dieser Methode definitiv ein boolesches Argument durch die Methode geht. Was ich hier unten tun werde , ist mit dem OpenButton-Klick diese Funktion namens ToggleDrawer auszuführen, und wir wollen, dass sie in dieser Instanz geöffnet wird, also gebe ich true durch und es werden keine Fehler angezeigt. Das ist gut. Dann setze ich ToggleDrawer hier auf false. Ich habe hier alles gut geschrieben, also wird nichts falsch angezeigt. Wenn ich das TypeScript kompiliere und Sie hier sehen können, wird es zu JavaScript kompiliert. Dann kann ich das öffnen und schließen. Wir erhalten genau das gleiche Ergebnis. Warum sollten wir TypeScript verwenden? Nun, sagen wir einfach, dass wir TypeScript nicht verwendet haben und ich versehentlich, sagen wir einfach, eine Zeichenfolge eingegeben habe. Wenn das eine JavaScript-Datei wäre, würden wir diese verschnörkelten Zeilen hier nicht durchbekommen , weil wir nicht angegeben hätten, dass das Argument ein boolescher Wert sein muss. Schnappen wir uns das einfach und ich werde es hier direkt in die scripts.js einfügen. Dann können wir das natürlich nicht schreiben, weil wir nicht mehr in TypeScript sind. Ich werde einfach den ganzen TypeScript-Code entfernen und einfach den JavaScript-Code belassen. Ich klicke auf Speichern. Den haben wir immer noch hier. Wir haben unsere scripts.js aktualisiert und den Zeichenkettenwert von true und den Zeichenkettenwert von false hier eingegeben. Das könnte für uns gut aussehen. Wenn wir die Seite hier aktualisieren, klicken Sie auf „Schublade öffnen“ . Sie wird geöffnet, aber nicht geschlossen. Warum ist das so? Das ist interessant. Wenn wir in unsere Konsole gehen, wird es keine Fehler geben, denn aus der Sicht von JavaScript haben wir nichts falsch gemacht. Das meine ich mit locker getippter Sprache. Es ist kein sehr striktes JavaScript, sodass Sie diese Fehler machen können und es gibt keinen Fehler, sodass Sie nicht wissen, was das Problem ist oder wie Sie es beheben können. Das Problem hier ist , dass wir hier nach einem booleschen Wert suchen , wenn ifWantitOpen. Die Wahrheit ist, dass sich beide als wahr herausstellen werden, weil es sich bei beiden nicht um leere Zeichenketten handelt . Wenn ich hier reingehe und davon ausgehe, dass es immer wahr wird, dann sollte dieses Konsolenprotokoll laufen. Ich sage nur, iwantiOpen ist wahr. Wenn ich dort auf Speichern klicke, geh hier rüber und lass uns unsere Konsole anschauen. Wenn ich auf „Schublade öffnen“ klicke, ist iwantiTopen wahr, ja, fair genug. Wenn wir jedoch auf Schublade schließen klicken, heißt es immer noch, dass iwantiTopen wahr ist. Das liegt an etwas in JavaScript, das als wahrheitsgemäße Werte bezeichnet wird. Eine nicht leere Zeichenfolge ist ein wahrheitsgemäßer Wert, daher ist sie wahr, obwohl der Textinhalt falsch ist. Das ist natürlich ein kleiner Bug , der in JavaScript schwer zu entziffern ist, aber wenn wir TypeScript ausführen würden, können Sie hier sehen, dass wir diese roten, verschnörkelten Linien bekommen. Es besagt, dass ein Argument vom Typ String dem Parameter vom Typ boolean nicht zugewiesen werden kann. Es wurde angegeben , dass es sich hier neben unserem Argument um einen booleschen Wert handeln muss , sodass nur ein boolescher Wert erwartet wird und wir daher eine Fehlermeldung erhalten, bevor wir die Kompilierung überhaupt ausführen. Wenn ich dann tsc drücke, können Sie sehen, dass es uns nicht einmal kompilieren lässt, weil es Fehler feststellt, bevor wir überhaupt zum Endergebnis kommen, bevor wir überhaupt zur Produktion kommen. Das ist gut. Wir erfassen unsere Fehler lieber zu Beginn unserer Entwicklung, als sie live gehen zu lassen und dann den Fehler herausfinden zu müssen. Das ist der Vorteil von TypeScript. Wie Sie sehen, können wir es erst kompilieren , wenn wir dieses Problem behoben haben. Wir hören uns einfach die Fehlermeldung in TypeScript und setzen diese dann wieder auf boolesche Werte zurück. Wir haben alle verschnörkelten Linien entfernt. Lass uns TSC erneut ausführen. Großartig. Es gab keine Fehler. Wenn ich meine Webseite erneut starte, können Sie dort sehen, dass alles wieder einwandfrei funktioniert. Da hast du es. Das ist TypeScript. Das ist alles, worauf ich heute eingehen werde. Auch hier ist TypeScript eines dieser Themen, zu denen Sie einen vierstündigen Kurs erstellen könnten einen vierstündigen Kurs erstellen und es ist eher Programm E, also nicht wirklich für Anfänger, aber wenn Sie es in einem Projekt verwenden sehen, wissen Sie zumindest, was es tut. Es ist heutzutage wirklich ein Haufen moderner Frontend-Webentwicklung , auch wenn es etwas schwieriger zu verstehen ist. Ich wollte es einbeziehen, damit ihr einige der Tools, die wir bei der Frontend-Webentwicklung verwenden , in Aktion sehen könnt einige der Tools, die wir bei der Frontend-Webentwicklung verwenden . Genau das ist wahrscheinlich eine der fortgeschritteneren Lektionen, wahrscheinlich die fortgeschrittenste Lektion in dieser Klasse. Ich komme hier sehr schnell durch. Herzlichen Glückwunsch, wenn Sie immer noch Schritt halten. Ich lasse es dort für TypeScript. Lassen Sie uns im nächsten Video über JavaScript-Frameworks sprechen . 9. Javascript Frameworks: Lassen Sie uns in diesem Video über Frontend-Frameworks sprechen. Ich habe gerade den Stand von JavaScript. Es ist eine jährliche Umfrage. Ich habe die Website dafür hier auf meinem Bildschirm, und wir werden über einige der populäreren JavaScript-Frontend-Frameworks sprechen der populäreren JavaScript-Frontend-Frameworks , die nur ein bisschen funktionieren. Aber bevor wir darauf eingehen, möchte ich einen Schritt zurücktreten und über jQuery sprechen. jQuery war die JavaScript-Bibliothek, über die ich in meinem ersten Skillshare-Kurs Understanding Web Development gesprochen habe meinem ersten Skillshare-Kurs , und jQuery war damals, 2018 und davor, sehr beliebt , weil das, was als Vanilla-JavaScript bezeichnet wird, also JavaScript ohne Bibliothek oder Frameworks, nicht so weit fortgeschritten war wie heute. Wie Sie in dem Video gesehen haben, das wir gerade mit TypeScript und JavaScript gemacht haben, konnten wir das alles ohne jQuery machen, und wir können jetzt so viele der Funktionen ausführen, die uns jQuery in den moderneren Versionen von JavaScript ermöglicht hat. jQuery ist immer veralteter geworden, aber das ist nicht der einzige Faktor. Es gibt noch einen weiteren Faktor, und zwar, dass wir uns jetzt mehr mit dieser Welt der Web-Apps befassen, in der Websites immer mehr Programmen ähneln , die in Ihrem Browser ausgeführt werden, und weniger wie Websites mit minimaler Funktionalität. Wenn Sie Erfahrung mit jQuery haben oder ich den Kurs schon einmal besucht habe, wissen Sie, wie jQuery funktioniert. Es ist dem, was wir hier gemacht haben, sehr ähnlich , wo wir verschiedene Elemente aufgenommen haben. Wir haben ihnen Event-Listener hinzugefügt, und wenn dann bestimmte Ereignisse ausgelöst würden, würden wir andere Dinge auslösen. Wir können alle Dinge mit dem DOM, auch bekannt als dem Document Object Model, machen, das im Grunde alle Elemente in unserem HTML-Dokument enthält. Wir können sie mit jQuery ändern, aber jetzt fast genauso einfach über Vanilla JS. Vanilla bedeutet wiederum, dass es an keine Bibliothek oder ein Framework angehängt ist. Es ist nur reines JavaScript. JavaScript als Sprache selbst hat in Bezug auf die Funktionalität aufgeholt. Aber für Dinge, bei denen wir den Staat verwalten, wie zum Beispiel Daten ins Frontend bringen und sie dann in Echtzeit am Frontend manipulieren, beginnen wir, von so etwas wie einem Frontend-Framework zu profitieren . Nun, ich weiß, das klingt im Moment sehr konzeptionell und theoretisch, aber Sie werden sehen, wenn ich in dieser Lektion etwas in Vue erstelle , wie es tatsächlich sinnvoll ist, ein Frontend-Framework zu verwenden. Bevor wir das tun, schauen wir uns einige der beliebtesten Frontend-Frameworks und -Bibliotheken an, die heute verwendet werden. Hier können Sie laut der Umfrage sehen, welche beliebt sind, welche rückläufig sind, welche auf dem Vormarsch sind, wenn Sie sich das ansehen. 2022 sind möglicherweise nicht die neuesten Umfragen. Schauen Sie also noch einmal das ansehen. 2022 sind möglicherweise nicht auf der State of JavaScript-Website vorbei und Sie können sehen welche Frameworks immer noch beliebt sind, weniger beliebt werden, immer beliebter werden. Aber die drei wichtigsten sind React, Vue und Angular, wie hier beschrieben. Aber wie Sie sehen können, hat Angular wirklich an Popularität gewonnen, und dieses namens Preact, das ich noch nie benutzt habe, ist anscheinend beliebter als Angular. Ember war damals beliebt , nimmt aber weiter ab. Svelte ist sehr beliebt geworden. Es tauchen ständig neue auf. Es ist wirklich verrückt. Es gibt einfach zu viele, um darüber zu sprechen. Aber diejenigen, die es schon eine Weile gibt, React, Vue und Angular, sind immer noch sehr beliebt. Offensichtlich ist Vue etwas rückläufig, aber React ist auch ein bisschen zurückgegangen, aber das liegt daran, dass die Konkurrenz zugenommen hat und es all diese neuen gibt, aber die drei wichtigsten waren React, Vue und Angular. Jetzt habe ich den Großteil meiner Erfahrung mit Vue JS gemacht. Ich denke, der Einstieg in Vue ist einfach und ich verwende es am häufigsten. In diesem Video werde ich demonstrieren, was ein Frontend-Framework in Vue macht, aber die gleichen Konzepte der Verwendung eines Frontend-Frameworks sollten für React, Angular oder eines dieser anderen Frontend-Frameworks gelten . Bevor wir nun einige Frontend-Interaktivität mit Vue erstellen , schauen wir uns ein Beispiel aus der realen Welt an. Hier ist eine E-Commerce-Website , an deren Erstellung ich mitgewirkt habe, und Vue wird hier an vielen Stellen verwendet. Wenn wir auf eine Sammlungsseite gehen, schauen wir uns die alte Stiefelkollektion an. Wenn wir hier nach unten scrollen, können Sie sehen, dass wir diese Filter hier haben. Wir können nach Männern, Frauen oder Kindern filtern , und dieser Filter wird hier hinzugefügt, und das alles, ohne die Seite neu zu laden. Wir haben hier viel Frontend-Interaktivität. Dabei wird tatsächlich eine API verwendet und die Backend-Daten durchsucht. Aber wie Sie hier sehen können, gibt es in diesen Preisklassen keine Produkte, und wir können nach Farben filtern, was uns Interaktivität im Frontend ermöglicht. Wir haben hier unseren Status , der den Status der Sammlungsfilter ist, und ich kann den Status im laufenden Betrieb aktualisieren und die Seite reagiert darauf. Das Gleiche gilt, wenn wir uns ein bestimmtes Produkt ansehen . Sie können hier die Variantenauswahl sehen. Hier ändert sich nicht viel, wenn wir die Variante ändern, aber wie Sie hier, bei der Größe 7, sehen können, ist nur noch eine übrig. Wenn wir zu 7,5 wechseln, wird automatisch der Lagerbestand ermittelt und wir erhalten eine Benachrichtigung über einen niedrigen Lagerbestand. Einige davon haben mehrere Varianten, ich denke, die schwarze hier. Wir können hier dynamischer laden. Los geht's, der von Kununurra, ich glaube, er hat mehrere Dimensionen. Sie können hier sehen, wenn wir einige Optionen auswählen und eine Variante finden, die es nicht gibt, wird angezeigt, dass diese leider nicht verfügbar ist, und Schaltfläche In den Einkaufswagen legen wird vor uns ausgeblendet. Aber wenn wir einen auswählen, der verfügbar ist, haben wir hier einen Warenkorb, und dieser Warenkorb ist auch Vue. Wir können die Anzahl der Artikel in diesem Warenkorb aktualisieren, und dann steigt die Zwischensumme hier und die Zwischensumme hier, und wir können diesen Einzelartikel sogar komplett entfernen, ohne die Seite neu zu laden. Sie können sehen, dass wir auf unserer Frontend-Seite einige App-Funktionen haben . Dies ist ein großer Fortschritt gegenüber Web 1.0, das nur Informationen auf der Seite anzeigt. Lassen Sie uns hier tatsächlich eine ähnliche Typfunktion erstellen. Lassen Sie uns den Schubladencode umgestalten und dann fügen wir etwas anderes hinzu. Lassen Sie uns für die Schublade diese Schaltfläche aus dem Hauptinhalt entfernen diese Schaltfläche aus dem Hauptinhalt und sie vielleicht in das Seitenleistenmenü einfügen. Lass uns sehen. Schubladen öffnen, Schublade geschlossen. Okay, cool und dann ersetzen wir das durch eine Produktseite. Geduld, ich werde eine Produkt-Div erstellen und innerhalb dieser Produkt-Div werde ich zwei Spalten haben, eine für die Produktinformationen und dann eine für das Bild, und lassen Sie uns das zunächst statisch machen. Ich schnappe mir ein paar Bilder und füge sie hier in unseren Ordner ein. Das fragliche Produkt wird ein Schuh sein, also haben wir Weiß mit schwarzen Streifen und die zweite Variante wird das gegenüberliegende Schwarz mit weißen Streifen sein das gegenüberliegende Schwarz mit weißen Streifen und das sind beide WebP-Bilder. Ich gehe zurück hierher und fangen wir mit Schwarz mit weißen Streifen an. Ich füge das Bild dort und dann gebe ich die Produktinformationen für diesen Schuh ein , der ein Nike-Schuh ist. Das ist ein Nike Air Force 107. Ich glaube, der Name Air Force besteht aus zwei Wörtern. Dann erstelle ich hier ein Div mit der Preisklasse. Ich lege den Preis von 170€ darunter. Ich füge ein Drop-down-Menü ein, um auszuwählen, welche Variante wir wollen. Das haben wir im Video auf HTML gemacht. Wir können es in die Option setzen, schwarz mit weißem Streifen. Das einzige, was wir beim letzten Mal nicht gemacht haben , ist, dafür einen Wert festzulegen. Der Wert ist, dass dies schwarz mit weißem Streifen sein wird. Los geht's, und dann wird der zweite Wert das Gegenteil sein. Weiß mit schwarzem Streifen und dann hier, weiß mit schwarzem Streifen. Ich klicke darauf auf „Speichern“. Schauen wir uns an , wie das in unserem Browser aussieht. Wie Sie hier sehen können, ist das Bild gigantisch und hier muss noch etwas gestylt werden. Gehen wir zurück. Wir verwenden hier immer noch SAS. Gehen Sie in styles.css und lassen Sie uns vor den Medienabfragen gehen. Das sollte nicht hier sein, das sollte nur im Ausgabe-CSS sein. Ich werde das loswerden, und dann können wir hier die Stile für das Produkt eingeben, und da wir SAS verwenden, können wir alle uns zur Verfügung stehenden Verschachtelungen verwenden. Was ich tun werde, ist, nicht zu viel über mein Denkmuster mit diesen Stilen zu sprechen , weil wir bereits über CSS gesprochen haben , aber ich werde hier einfach einige Styles hinzufügen, um uns auf den Weg zu bringen, denn in dieser Lektion werden wir versuchen, etwas über Vue zu lernen. Ich stelle das Produkt so ein, dass das Raster angezeigt wird, und dann haben unsere Vorlagenspalten 1FR, eine, also zwei gleich große Spalten. Ich werde die maximale Breite dieses Bereichs auf 100% erhöhen. Manchmal können die Bildgrenzen außerhalb des Containers liegen, also wollen wir das vermeiden. Ich werde diesem gesamten Bereich etwas Abstand geben, 20 Pixel und dann einen Spaltenabstand zwischen diesen beiden Spalten von ebenfalls 20 Pixeln, und dann, weil wir SA verwenden, kann ich das Bild, das sich innerhalb der Div befindet, einfach mit Produkten verschachteln und das kann ich auch beeinflussen. Auch hier möchten wir, dass die maximale Breite 100% beträgt, und ich denke nicht, dass wir Start und Ende angeben müssen. Wenn ich hierher gehe, ist das okay. Das sollte funktionieren. Ich bin mir nicht sicher , warum das so ist. Hier funktioniert es ein bisschen nicht. Lass mich es noch einmal laden. Da haben wir es. Los geht's. Wir können immer noch unsere Schublade öffnen oder auf unsere Produktseite schauen und dort unser Bild sehen. Ich denke, es ist sinnvoller , das Bild auf der linken Seite zu haben. Ich werde es verschieben. Bild links und dann Produktinformationen rechts. Hier kannst du sehen, wann wir unser Dropdown hier ändern, es passiert nichts, da wir natürlich das Bild, den Preis, falls erforderlich, und alle anderen Informationen aktualisieren müssen den Preis, falls erforderlich, , wenn wir hier aktualisieren. Lassen Sie uns das nun zuerst in Vanilla JavaScript ausprobieren und sehen, wie es funktioniert. Dieses Mal werde ich es hier nicht in die Drehbücher aufnehmen. Was ich tun werde, ist, es in eine Reihe zu stellen , damit wir es auf derselben Seite sehen können. Gehen Sie hier darunter, unter Produkte, und geben Sie das Skript ein. Bevor ich Event-Listener für die Interaktion auf der Seite schreibe , erstelle ich ein Varianz-Array, also sage ich product_variants. Ich glaube nicht, dass wir das jetzt brauchen. Gebt uns etwas mehr Platz. Das ist nett. Dann öffne ich ein Array, und das wird ein Array von Objekten sein. Lass uns die ersten Attribute machen. Also wird jede Variante eine ID haben, eine ID eines Stils zugewiesen wird. Das wird nur das sein, was in diesem Wertfeld steht, also wird das erste Feld schwarz mit weißen Streifen oder eher ein weißer Streifen im Singular sein . Das Bild wird auf die Bildadresse verlinken. Mit dem schwarzen mit weißen Streifen haben wir es geschafft. Kopieren Sie einfach diese Adresse und dann den Preis von 170. Ich werde dieses Objekt kopieren und darauf basierend die zweite Variante erstellen. Die ID wird zwei sein und dann statt Schwarz mit weißem Streifen weiß mit schwarzem Streifen. Dann lassen Sie uns den Preis etwas ändern, damit wir eine weitere Sache auf der Seite ändern können. Aber in Wirklichkeit haben beide auf der Website von Nike den gleichen Preis. Dann können wir jetzt anfangen, unsere Event-Listener zu schreiben. Wie ich Ihnen bereits gezeigt habe, möchte ich sicherstellen, dass die Elemente auf der Seite zuerst geladen wurden Deshalb füge ich einen Event-Listener für geladenen Event-DOM-Inhalt öffne dann hier eine Funktion. Jetzt läuft das nur wenn alles auf der Seite geladen ist, und wenn das der Fall ist, werde ich diese Auswahl hier anvisieren. Geben wir ihm eine Klasse, Produktklasse, eine Variantenauswahl. Nennen wir es einfach so. Ich gehe hier runter. Dokumente. Lassen Sie uns die eigentlich aufteilen. Du kannst es dir hier oben ansehen. Hier gibt es eine Auswahl, auf die wir abzielen. Dokumente, Abfrageselektor, und dann können wir ihn anhand dieser Klasse anvisieren. Denken Sie daran, dass wir dort zuerst den Punkt einfügen, um die Klasse und die Variantenauswahl zu kennzeichnen . erhalten wir das Select-Element , das die Dropdown-Liste ist, dann fügen wir einen Event-Listener für das Änderungsereignis hinzu. Wenn sich das geändert hat, schreiben wir hier eine Funktion ein. Ich werde das schließen. Wir wollen uns eigentlich das Element schnappen , in dem die Änderung stattfindet, also können wir das tun, indem wir hier ein Argument eingeben und dann können wir trösten und das abmelden. Bevor wir weiter vorankommen, überprüfen wir einfach , ob das funktioniert. Ich werde in der Lage sein, die aktuellen Ziele des Ereignisses zu finden, also das Element, das das Ereignis ausgelöst wurde. Öffnen wir unsere Konsole und wenn ich das ändere, können Sie sehen, dass wir den HTML-Code für die ausgewählte Rückkehr zu uns zurückbekommen . Ich werde den Wert hier verketten, auf „Speichern“ klicken und aktualisieren, und hier können Sie sehen, dass der Wert weiß mit einem schwarzen Streifen ist. Wenn ich Schwarz mit weißem Streifen auswähle, erhalten wir den Wert zurück. Was wir nun tun können, ist, das zu kommentieren und das Objekt aus dieser Varianz zurückzugeben , nachdem wir wissen, welches wir auswählen möchten. Zuallererst werde ich diesen Wert als eigene Konstante speichern , also werde ich sagen , dass der ausgewählte Stil dem Wert entspricht, der durchkommt. Dann wähle ich die Produktvariante mithilfe einer Find-Methode aus. Was wir tun können, ist das gesamte Array hier oben anzuvisieren, und dann können wir mit find ein bestimmtes Element im Array finden. Das sieht vielleicht ein bisschen funky , aber innerhalb der Funktion hier können wir jede Varianz durchgehen, also gebe ich Variante ein, nenne sie. Dann geben wir hier die Bedingung nach der Rückgabe des Variantenobjekts ein, zu dem wir zurückkehren möchten. Variantenstil zurück Dies ist das Attribut, das wir mit unserem aktuell ausgewählten Stil abgleichen möchten. Lassen Sie uns nun die Konsole protokollieren, um zu sehen , ob das Objekt erfolgreich zurückkehrt. Aktualisierung der Produktvarianten hier. Wenn ich jetzt hierher wechsle, können Sie sehen, dass wir das ganze Objekt jetzt zurückbekommen. Wir können dieses Objekt verwenden, um all die verschiedenen Dinge auf unserer Produktseite zu aktualisieren . Dann müssen Sie nur noch angeben , wo sich das ändern soll. Wir müssen alle verschiedenen Elemente auswählen und ihre Attribute manuell aktualisieren. Schauen wir uns das Bild an, also gehen wir zum Dokument, Abfrageauswahl und dann zu Produkten, Bild. Wir verwenden einen CSS-Selektor, um es hier zu finden, und dann aktualisieren wir das SRC auf die neue Produktvariante, die wir ausgewählt haben, und wir finden das Image-Attribut davon. Dann aktualisieren wir den Preis , der meiner Meinung nach der einzige andere ist bis wir anfangen mehr Produktpreis hinzuzufügen, und dann müssen wir für diesen nur den inneren HTML-Produktvarianten-Punkt ändern den inneren HTML-Produktvarianten-Punkt um den Preis des Objekts abzuziehen. Ordnung, klicken Sie auf „Speichern“, aktualisieren Sie, und jetzt können Sie sehen, wann das Änderungsereignis ausgelöst wird Wir ermitteln das Objekt, das alle Informationen enthält, und dann tauschen wir manuell den inneren HTML-Code dieses Elements und den SRC dieses Elements aus , um das Bild zu ändern das mit dem neu ausgewählten Objekt übereinstimmt. Bei einem einfachen Beispiel wie diesem gibt es nur zwei Punkte, an denen wir Informationen ändern. Es ist völlig in Ordnung, hier Vanilla JavaScript zu verwenden. Aber das Problem, das wir hier haben, es ist nicht wirklich ein Problem, aber es ist etwas, das verbessert werden kann , ist , dass wir es spezifizieren müssen. Das beginnt mit einer bestimmten SRC, mit einem bestimmten Bild, und das beginnt mit einer bestimmten ausgewählten Option, einem bestimmten Preis, und dann müssen wir bei jeder Auswahl die Variante aus der Liste hier finden, was in Ordnung ist. Aber dann müssen wir alle Elemente manuell aktualisieren. Hier gibt es nur zwei, also ist es keine große Sache. Aber wenn wir anfangen, ein größeres Projekt zu haben, wird es eine Produktbeschreibung geben, vielleicht verschiedene Varianten, Daten, die von den anderen Daten abhängen, kann unüberschaubar werden. Deshalb haben wir so etwas wie ein Frontend-Framework. Wir haben aus mehreren Gründen ein Frontend-Framework, aber einer der Hauptgründe ist die Reaktivität. Um das zu verstehen, müssen wir es nun in Aktion sehen. So wie ich es jetzt machen werde, werden wir diesen Code in Vue umgestalten. Lassen Sie uns jetzt über Vue sprechen. Vue ist eines der drei beliebten Frontend-Frameworks , die ich zu Beginn des Videos erwähnt habe. React Vue und Angular, und Vue ist das Frontend-Framework , mit dem ich die meiste Erfahrung gemacht habe, also werde ich Vue als Beispiel für dieses Video verwenden. Vue ist auch sehr einfach einzurichten und in jedes Projekt im Internet zu integrieren. Egal, ob Sie die CLI verwenden, um eine ganze App auf der Basis von Vue zu erstellen , oder ob Sie sie nur auf bestimmte Seiten bringen. Vue ist ziemlich flexibel und deshalb verwende ich es gerne und ich denke, es ist eine gute Wahl für dieses Video. Wenn Sie mehr darüber erfahren möchten, können Sie zu Vue js.org gehen. Es gibt verschiedene Möglichkeiten , es zu installieren, aber wir werden die CDN-Methode verwenden. CDN steht für Content Delivery Network. Wir können das Skript im Grunde aus einer externen Quelle importieren und dann beginnen, es in einer beliebigen HTML-Datei zu verwenden. werde ich tun, ich werde das hier nicht benutzen. Ich nehme an, wenn wir hierher zurückkehren, lassen Sie uns das jetzt kommentieren weil wir das in Vue machen werden. Vor dem Script-Tag füge ich unseren Verweis auf die neueste Entwicklungsversion von Vue ein, die wir von hier aus erhalten, https://umpkg.com/vue@next. Dann erstellen wir unten unsere Vue-App. Wir benötigen ein Optionsobjekt, also nenne ich es Optionen. Dies wird ein Objekt sein und hier geben wir alle unsere Einstellungen für die Vue-App ein, und dann werde ich hier Vue Creates App schreiben. Das erste und einzige Argument werden diese Optionen sein, das Objekt, das die Optionen enthält. Dann werde ich eine Methode zur Punktmontage verketten, und dann müssen wir herausfinden , wo wir das montieren. Gehen wir hier in diesen Hauptbereich und lassen Sie uns die App in diesem Abschnitt ausführen. Ich glaube, wir sind schon im Div, also lasst uns einfach nach draußen gehen. Hier ist das vollständige Div für den Hauptabschnitt, also werde ich das kopieren und einfügen oder es ausschneiden und einfügen, um es unter einzufügen. Wir wollen es außerhalb der Div halten , auf die wir abzielen, und nennen wir das Vue App. Dann können wir hier runter gehen Hash Vue App mounten. Innerhalb dieser Optionen können wir Daten speichern, also tun wir das, indem wir eine Methode eingeben, und dann gibt diese Methode ein Objekt zurück, und dann können wir dieses Objekt in unsere Produktvarianten einfügen. Wir können diese beiden Objekte einfach kopieren und sie hier reinwerfen. Sie sind derzeit auskommentiert, also werde ich diese Kommentare einfach entfernen, und jetzt haben wir einige Daten zu unserer Vue-Instanz, diesem Produktvarianten-Array, das das Array all der verschiedenen Produktvarianten enthält . Nach diesem Array möchte ich die aktuell ausgewählte Variante speichern . Ich mache das einfach über den aktuellen Stil und wir setzen das auf die Standardeinstellung, die schwarz mit weißen Streifen ist. Das sind unsere Daten, die aktuelle Auswahl und dann die beiden Objekte , aus denen unsere Varianten bestehen. Dies könnten sehr gut mehrere Objekte sein, dies ist nur ein einfaches Beispiel. Jetzt müssen wir nur noch außerhalb dieser Datenmethode etwas einfügen, das als berechnet bezeichnet wird. Öffnen Sie ein Objekt in computed, und hier geben wir berechnete Eigenschaften ein. Berechnete Eigenschaften sind reaktive Eigenschaften, im Grunde alle Daten, die wir innerhalb der Vue-Instanz verwenden, um diese zu erstellen. Wenn diese Daten aktualisiert werden, werden auch diese berechneten Felder aktualisiert. Dies ist ein perfekter Ort, um unsere aktuellen Varianten einzufügen, die hier als Methode gespeichert werden. Bei berechneten Varianten wollen wir nur einen einzelnen Wert zurückgeben. Ein einzelner Wert kann jedoch anderen Daten abhängen, die wir in unserer Vue-App haben. Genau wie wir es hier unten gemacht haben, wo wir eine Variante in diesem Produktvarianten-Array gefunden werden wir hier oben dasselbe tun, aber wir werden es auf die ES6-Art machen, also auf die modernere Weise. Was wir tun werden, ist das, was uns Zugriff auf die Vue-Instanz gibt, die wir dann in den Daten ausgraben können, und dann sagen wir productvariants.find und dann die Kurzversion von dem, was wir hier unten hatten, Varianten, bei denen der Variantenstil dem aktuellen Stil entspricht, aber wir müssen this.currentstyle sagen. Da haben wir es. Das sollte reichen. Nachdem wir diese Optionen festgelegt haben, nur die beiden Variablen hier in unseren Daten und die berechnete Eigenschaft, können wir jetzt unseren HTML-Code in dieser Vue-App mit speziellen Vue-Attributen aktualisieren . Dadurch wird sichergestellt, dass alle Daten in unserem HTML-Code hier aktuell sind. Um dies dynamisch zu gestalten, ersetze ich hier das src durch einen Doppelpunkt, und dann geben wir hier die Daten der aktuellen Variante ein. Ich sage currentvariant.image. Hier für den Preis werde ich das entfernen und hier ein Attribut namens v-html hinzufügen , und wir wollen das auf den aktuellen Variantenpreis setzen. Jetzt hier unten brauchen wir diese Klasse nicht mehr, wir müssen nur das spezielle Vue-Attribut des V-Modells hinzufügen. Alle Werte, die wir hier festlegen, werden direkt in die in unserer Vue-App gespeicherten Daten Daher werden wir die Daten des aktuellen Stils abrufen , um die Auswahl hier zu modellieren. Da drücke ich auf „Speichern“. Lassen Sie uns jetzt aktualisieren und zu unserer Seite hier gehen und sehen, ob es funktioniert. Wir wechseln um, und jetzt können Sie sehen, dass sich der Preis und das Image ändern, und das alles geschieht dynamisch. Wenn Sie Vue DevTools installiert haben, also wenn ich hierher gehe, denke ich, dass ich meine DevTools hier erneut öffnen muss. Sie können sehen, dass es einen Tab für Vue gibt. Ich habe Vue DevTools installiert und Sie können hier eine Live-Darstellung der Daten auf dem Computer sehen . Sie können hier sehen, dass die aktuell ausgewählte Variante Nummer 2 ist, was dem aktuellen Stil von Weiß mit schwarzem Streifen entspricht , und Sie können hier die Rohdaten für Produktvarianten sehen. Wenn ich das nur umgestellt habe, sieht man die aktuellen Style-Änderungen und damit auch die aktuelle Variante. Jetzt fügen wir hier Variablen für den src, für den Preis hinzu , und das wird aktualisiert, wenn wir unseren aktuellen Stil aktualisieren, jetzt mit dem verknüpft ist, was wir hier auswählen. Wir müssen hier nur ein paar grundlegende Einstellungen vornehmen, und jetzt haben wir diese automatische Reaktivität. Jetzt denken Sie vielleicht, dass das ungefähr genauso viel Code gekostet hat wie wir hier unten und genauso viel Zeit für die Einrichtung. Aber wenn die App immer komplexer wird, wird die Reaktivität noch wichtiger. Wenn wir hinzufügen würden, sagen wir einfach eine Beschreibung in jeder dieser Beschreibungen, und wir sagen, dass es sich um einen schwarzen mit weißen Streifen handelt, und dann ändern wir die Beschreibung hier, sodass es sich um einen weißen mit schwarzen Streifen handelt. Jetzt können wir einfach hier reingehen, ein neues Div erstellen, v-HTML eingeben und dann aus der aktuellen Variante die Beschreibung holen. Wirf das hier rein, jetzt, wenn wir hier aktualisieren und das ändern, ändern wir mehr Daten auf dem Bildschirm. Offensichtlich ist es nicht perfekt eingerichtet, das Styling ist nicht toll. Aber wie Sie sehen können, wird die Reaktivitätskomponente von Vue sehr praktisch, wenn wir anfangen, mehr Daten und mehr Status auf unserer Seite hier zu speichern , mehr Daten und mehr Status auf unserer Seite hier zu . Ich hoffe, Sie können sehen, dass ein Projekt natürlich umso mehr von Vue profitiert, je komplexer das Projekt wird . Aber wie Sie sehen können, ist es hier ein anderes Paradigma. Das Hinzufügen dieser dynamischen Werte mithilfe dieser Vue-Attribute in unserem HTML ist im Vergleich dazu , diese Event-Listener ausführen und den Inhalt dann manuell mit Vanilla-JavaScript aktualisieren zu müssen und den Inhalt dann manuell mit Vanilla-JavaScript aktualisieren , was wir hier unten hatten. Das ist ein Blick auf ein Beispiel ein Frontend-Framework in Form von Vue und wie sich die Reaktivität als nützlich erweist. Auch hier gilt: Wenn Sie es nicht verwenden möchten oder es nicht verstehen, müssen Sie es nicht. Dies ist eine optionale Funktion, aber etwas, das in der Frontend-Webentwicklung sehr beliebt ist, insbesondere wenn Sie anfangen, superinteraktive Websites und Web-Apps zu erstellen . Aber das ist natürlich nicht erforderlich. Sie können Vanilla JavaScript jederzeit verwenden, wie wir es Sie können Vanilla JavaScript jederzeit verwenden, wie wir zuvor in diesem Video getan haben, wenn Sie möchten, dass es das tut. Wenn Sie nicht das Bedürfnis verspüren oder den Vorteil darin nicht sehen, Sie es gerne überspringen. Glaub mir, wenn ich das sage, wenn du anfängst, dich mit komplexeren Projekten mit viel Interaktivität zu beschäftigen, fängst du an, etwas wie ein Vue oder eine Reaktion zu schätzen , wenn du anfängst, in diese Situationen zu geraten. 10. Tailwind CSS: In diesem Video werden wir über Tailwind CSS sprechen , ein Open-Source-CSS-Framework. Das Hauptmerkmal dieser Bibliothek ist, wie hier beschrieben, dass sie im Gegensatz zu anderen CSS-Frameworks wie Bootstrap keine Reihe vordefinierter Klassen für Elemente wie Schaltflächen und Tabellen bereitstellt. Wir haben über Bootstrap gesprochen um Webentwicklung zu verstehen. Es war damals sehr beliebt und ist immer noch beliebt, aber die Sache mit Bootstrap ist wenn Sie es auf Websites verwenden. Sie scheinen alle gleich auszusehen. Tailwind ist im Vergleich nicht so. Anstatt einer Komponentenbibliothek handelt es sich um eine Reihe von Hilfsprogrammen, und diese Hilfsprogramme ermöglichen es uns, weniger CSS zu schreiben und stattdessen diese Hilfsprogramme zu verwenden. Du wirst in nur einer Sekunde verstehen, was ich meine. Schauen wir uns die Website an und ihre Website ist ziemlich gut, wie Sie hier sehen können. Sie können hier in Echtzeit sehen, wie es passiert. Anstatt CSS zu schreiben , können Sie dem Div einfach spezielle Tailwind-Klassen hinzufügen und es wird dann im spezielle Tailwind-Klassen laufenden Betrieb aktualisiert. Hier können Sie sehen, dass wir die Texte aktualisieren, wir aktualisieren das Layout. Das alles passiert, ohne in das CSS zu springen , und Sie können hier sehen, dass wir sogar Medienabfragen innerhalb des HTML-Codes durchführen können. Wir können die Attribute basierend auf der Bildschirmbreite innerhalb des HTML-Codes ändern . Ich persönlich bin kein großer Fan davon , so viele Klassen in ein einziges Element zu integrieren. Sie können sehen, dass der HTML-Code etwas chaotisch wird, wenn Sie das verwenden, aber was Sie tun können, um dem entgegenzuwirken , ist, Ihre eigenen Klassen zu erstellen und diese dann in einer Klasse anzuwenden und diese dann hier durch eine einzelne Klasse zu ersetzen. Das werde ich dir auch in diesem Video zeigen. Hier kannst du mehr darüber erfahren. Mal sehen, worüber sie sonst noch sprechen. Ja, wie gesagt, es sind keine bestimmten Komponenten, es sind Hilfsklassen, also können Sie hier Ihre eigenen Komponenten erstellen, aber verwenden Sie diese Hilfsklassen die auch feste Definitionen haben, sodass Sie sehen, dass wir dadurch gezwungen sind, zu einem bestimmten Grid zu wechseln. Nun, es zwingt uns nicht, sondern ermutigt uns, auf bestimmte verschiedene Größenabstufungen zu setzen, und das hilft uns auch, ein einheitlicheres Design zu erstellen . Es ist gut, wenn du Design nicht verstehst, du kannst einfach Vermutungen anstellen. Es enthält auch Farbschemata, also glaube ich, ich habe hier etwas über die Farbschemata gesehen . Einer von ihnen heißt Slate. Das ist eigentlich eine wirklich schöne Titelseite. Sie können hier Text-Slate-500 sehen, damit Sie diese Farbschemata verwenden können. Einer von ihnen heißt Slate. Sie können Beispiele auf der Titelseite sehen, aber Sie müssen tatsächlich in die Dokumentation gehen . Los geht's. Wir können uns mit Dokumenten, Farbschemata oder Text-Decoration Color befassen. Wie kommen wir zu den Farbschemata, wenn ich Schiefer eintippe? Manchmal ist die Dokumentation etwas schwierig zu durchsuchen. Los geht's. Unter Anpassung kannst du zu Farben gehen und du kannst hier sehen, dass wir diese Farbpaletten hier haben , die nett sind Wenn wir also eine Farbpalette wählen, können wir unsere App in diesen verschiedenen Farbtönen dieser Farbe erstellen . Wie dem auch sei, wir werden das alles in Kürze in der Praxis sehen, also müssen wir dafür ein Node-Projekt erstellen. Wir können ein CDN verwenden, aber es ist nicht so einfach wie das, was wir gerade mit Vue gemacht haben. Sie haben hier gesehen, dass wir, anstatt das Vue-Paket zu installieren, einfach Vue, das auf dem Server einer anderen Person gespeichert ist, genommen und hierher gebracht haben. Dafür werden wir tatsächlich den Tailwind-Code einbauen, und das hat den Vorteil, dass wir uns nicht auf einen externen Server verlassen, insbesondere wenn wir so viele verschiedene Dinge gleichzeitig ausführen . Wenn wir hinzufügen, zu viele externe Anfragen zu stellen , um Bibliotheken abzurufen, verlangsamt das unsere App und könnte dazu führen, dass sie fehlschlägt Wir werden also hier ein Knotenprojekt erstellen. Der Vorteil, daraus ein Node-Projekt zu machen, besteht darin, dass wir mit der Installation von Knotenmodulen beginnen können , über die wir bereits gesprochen haben, als wir uns npm angesehen haben, und wir können beginnen, sie in unserem Code zu verwenden. Es wird mit dem Verzeichnis installiert und es ist ein standardisiertes System, sodass wir keinen externen Code aufrufen müssen oder der Code in unserem eigenen Projekt gespeichert wird. Lass uns das jetzt machen. Ich öffne ein Terminal, indem ich auf „Shift Control Backtick“ drücke. Ich öffne hier ein neues Terminal und führe dann npm init aus. Bevor ich das mache, müssen wir noch einmal überprüfen, ob wir npm installiert haben. Ja, das tun wir. Jetzt können wir npm init machen. Das funktioniert, sodass wir in jede dieser Optionen schreiben können , was wir wollen, aber ich drücke einfach die Eingabetaste. Wir müssen hier keine bestimmten Informationen angeben und dann erhalten wir eine package.json-Datei. Standardmäßig entspricht der Name dem Namen des Ordners. Die Standardversion wird 1.0.0 sein. Die Beschreibung wird leer sein und wie Sie hier alle anderen Standardeinstellungen sehen können. Einer der Vorteile dieser package.json-Dateien ist, dass wir hier unsere eigenen Skripte einrichten können , um den Tailwind-Build-Prozess zu verwalten, aber die Hauptsache, die diese package.json tut, ist die Liste der abhängigen Pakete zu speichern , die wir benötigen, um diese bestimmte App oder Webseite auszuführen. In Ordnung, also lassen Sie uns ohne weitere Umschweife Rückenwind installieren. Ich werde npm install schreiben. Ich füge das D-Flag ein, das es als Dev-Abhängigkeit installiert , und dann füge ich Tailwindcss ein, was der Name des Pakets ist. Ich drücke die Eingabetaste und jetzt wird es installiert, und wenn es installiert ist , werden zwei Dinge passieren. Wir werden hier diesen neuen Ordner namens node_modules bekommen , und dann können Sie in unserer package.json-Datei hier sehen, dass wir die Version von 3.2.7 von tailwindcss haben die Version von 3.2.7 von , die wahrscheinlich die neueste Version zum Zeitpunkt der Aufnahme ist . Wir werden das in unseren devDependencies haben und wir werden den gesamten Code, den wir für Tailwindcss benötigen, diese Version, in unserem Ordner node_modules speichern. Wenn wir in diesen Ordner gehen, können Sie hier Tonnen und Tonnen verschiedener Pakete sehen , einschließlich Tailwind.css, und der Grund, warum es all diese anderen hier gibt , ist es einen Abhängigkeitsbaum gibt, sodass Tailwind.css möglicherweise von anderen Modulen abhängig die auch ihre eigenen Abhängigkeiten haben und so alle Abhängigkeiten, die nach unten fließen, alle Pakete in Ihren Node-Modulen installiert. Wenn wir zur package.json-Datei von Tailwinds gehen , die Sie hier sehen können, schauen Sie sich alle devDependencies hier an, und so werden all diese devDependencies und die devDependencies von diesen auch installiert diese devDependencies und die devDependencies , also dafür ist die Ladezeit da. Jedes dieser Pakete hat seine eigene package.json, sodass sie übereinander gestapelt werden können, und das ist im Wesentlichen das npm-System. Wenn wir unser npm-Projekt später in diesem Kurs im Internet veröffentlichen , zeige ich Ihnen, wie das geht. Wir ignorieren diesen Ordner komplett weil dieses Dokument hier die devDependency aufzeichnet und jedes Mal, wenn wir dieses Projekt auf einem neuen Computer öffnen, auch wenn sie den Ordner node_modules nicht haben , können sie ihn einfach erstellen, indem einfach npm install eingeben und alle devDependencies werden installiert. Lass uns das jetzt machen. Lassen Sie uns diesen Ordner node_modules vollständig entfernen und dann führe ich einfach npm install aus. Ich habe die devDependency nicht aus der package.json entfernt aus der package.json Wenn ich also npm install ausführe, werden einfach alle Knotenmodule erneut installiert. Wir müssen diese Ordner nicht wirklich verfolgen oder an Dritte weitergeben. Wir können einfach die package.json weitergeben und jeder, der unsere Projekte ausführt, kann einfach npm install ausführen und dieselben Module erhalten, die wir haben. Hoffentlich trifft das zu. Es ergibt Sinn für dich. Jetzt werde ich den Live Sass Compiler ausschalten , da wir jetzt unser CSS mit Tailwind erstellen werden. Ich möchte dich nicht verwirren , indem ich Sass kombiniere und versuche, all das zu integrieren. Lassen Sie uns sie einfach getrennt halten, damit wir nicht mehr mit dieser SCSS-Datei arbeiten und was wir stattdessen tun, damit wir hier zu unserem Terminal zurückkehren können. Stattdessen erstellen wir hier eine Datei input.css und eine Datei output.css, und dann müssen wir nur diese output.css -Datei zu unserem Index hinzufügen , also gehen Sie hier rein und lassen Sie uns das einfach von Styles zu Output ändern , und im Wesentlichen habe ich das getan, weil wir unseren gesamten Tailwind-Code hier dann Tailwind Compile ausführen, es wird in diese output.css aufgenommen und das möchten wir in unser HTML-Dokument aufnehmen. Wenn ich hierher gehe, wirst du sehen, dass wir unser gesamtes Styling verlieren, aber wir werden das auf der Grundlage von Rückenwind neu aufbauen, also lass uns das jetzt machen. Wir können es kompilieren, indem npx tailwind -i input.css eingeben. Ich habe diese wirklich einfach benannt, damit Sie deutlich sehen können , was die Eingabedatei und die Ausgabedatei sind, und dann das -O-Flag, um die Ausgabe zu bestimmen , die einfach output.css heißt. Wenn ich das jetzt starte und wir uns dann output.css ansehen, haben wir noch nichts, weil ich haben wir noch nichts, weil ich vergessen habe, hier einige Direktiven einzugeben. Ich werde die Rückenwind-Basis hinzufügen, also fügen wir eine Basis-Stile , Rückenwind-Komponenten und Rückenwind-Utilities hinzu, das ist also ein bisschen Rückenwind-Code. Lassen Sie uns diesen Befehl erneut ausführen. Ich kann einfach App drücken und dann „Enter“ drücken, und wenn wir dann in output.css nachschauen, können Sie sehen, dass wir all das CSS haben , das durchkommt Wenn wir also hier nachschauen, aktualisieren und eines der Dinge, die Sie an Tailwindcss bemerken werden , ist, dass es tatsächlich ziemlich das gesamte Standard-HTML-Styling entfernt das gesamte Standard-HTML-Styling so ziemlich das gesamte Standard-HTML-Styling entfernt, über das wir in früheren Videos gesprochen haben. Es gibt dir hier ein wirklich rohes Setup, sodass selbst die Knöpfe nicht wie Knöpfe aussehen. Das einzige, was sie zu einer Schaltfläche macht , ist der Cursorzeiger, aber ansonsten sehen sie überhaupt nicht wie Schaltflächen aus, also müssen wir sie selbst gestalten. Nun, da dies ein etwas langwieriger Befehl war, obwohl wir ihn sehr einfach gemacht haben, werde ich ihn in ein Skript in unserer package.json verschieben , also werde ich diesen einen Rückenwind geben: build. Jedes Mal, wenn wir tailwind:build ausführen, wird es das tun, aber ich möchte hier auch einen anderen erstellen, tailwind:watch, damit wir nicht jedes Mal build ausführen müssen, wenn wir das tun. Was wir tun können, ist denselben Code erneut hinzuzufügen und dann hier die Watchflagge einzufügen. Jetzt können wir in unserem Terminal einfach npm run ausführen und dann jedes Skript ausführen , das wir hier einrichten, also tailwind:build wird es einmal erstellen oder tailwind:watch mit dem Watch-Flag wird es erstellen und dann weiter auf weitere Änderungen warten. Wenn ich hier reingehen und dem Körper eine rote Hintergrundfarbe geben und dann auf Speichern klicken würde, wird das verarbeitet und an die Ausgabedatei gesendet und wie Sie hier sehen können, ist unser Körper rot. Wir müssen nicht jedes Mal compilieren, wenn wir eine Änderung vornehmen. Jedes Mal, wenn wir eine Änderung vornehmen , wird sie aufgezeichnet und direkt an output.css gesendet, und da wir einen Live-Server betreiben, wird sie hier automatisch aktualisiert. Im Moment ist unser Setup fast abgeschlossen. Wir benötigen nur eine zusätzliche Datei in unserem Ordner hier. Es wird tailwind.config.js heißen und ich werde einfach eine Standardkonfiguration kopieren und hier einfügen. Ich klicke hier auf Speichern und lass uns unseren Prozess hier neu starten. Ich habe Control X gedrückt, um es herunterzufahren. Starten wir es neu, um sicherzustellen , dass es die richtige Konfigurationsdatei verwendet. Wechseln Sie zu hier und jetzt sollten wir in der Lage sein , die Hilfsprogramme in unserem HTML zu verwenden. Lass uns anfangen, unsere Seite mit Rückenwind neu aufzubauen. Hier im Seitencontainer haben wir diese Klassen verwendet und sind dann in unsere CSS-Datei gegangen. Wir können das immer noch tun, wir können in den Seitencontainer gehen und diese Klasse mit Klassen von Tailwind neu aufbauen, also können wir uns bewerben und dann kann ich verschiedene Tailwind-Klassen hinzufügen, und Sie können hier sehen, was diese verschiedenen Klassen tun, aber lassen wir das vorerst nicht. Lassen Sie uns das in eine Reihe bringen und dann werde ich es etwas später in den Unterricht verschieben. Gehen wir hier in den Index, und was wir tun müssen, ist , das Anzeigeraster zurückzubekommen . Wir können einfach das Raster eingeben und wie Sie hier sehen können , wird das Raster automatisch vervollständigt, Raster angezeigt und dann können wir ihm eine Lücke von 0,5 rem geben , was ungefähr 12 Pixeln entspricht . Das ist innerhalb einer Gap-3. Sie können hier sehen, wenn ich das erneut tippe, können Sie sehen, dass Rückenwind uns ermutigt , bestimmte Inkremente zu verwenden , also Null bis Viertel-Rem , bis Halbrem, Dreiviertel Rem, ein Rem und dann geht es einfach in diesen Schritten nach oben und Sie können im Kommentar daneben sehen , wie vielen Pixeln das ungefähr entspricht, also ist es gut. Es reduziert die Auswahlmöglichkeiten hier, was es für mich als Frontend-Webentwickler einfacher macht, herauszufinden , was ich hier eingeben soll. Wir können das Raster jetzt hier und dann angeben , wie Sie hier sehen können, Raster anzeigen, die Lücke sollte irgendwo gespeichert werden, vielleicht müssen wir es hier aktualisieren. Ja, also müssen wir uns jetzt leider auffrischen . Ich bin mir nicht sicher warum. Mal sehen, dass unser Live-Server läuft. Ja, ist es. Das ist interessant. Ich musste nur aktualisieren und dann müssen wir natürlich unsere Template-Spalten erneut einrichten, und leider für uns in unserem speziellen Fall dem, wenn wir hier zu unseren Styles gehen, dies für eine Standard-Tailwind-Klasse etwas zu spezifisch eine Standard-Tailwind-Klasse ist. Wir müssen also einen Hack innerhalb von Tailwind verwenden einen Hack innerhalb von Tailwind , der es uns ermöglicht, einen beliebigen Wert festzulegen. Um das zu tun, werden wir Grid-Cols machen und der Hack öffnet eckige Klammern, und ab hier wird der erste Anruf auf Minmax Auto 150 gesetzt? Wir können das hier einstellen, auto, 150px und dann können wir hier einen Unterstrich für die zweite Spalte erstellen , der, wenn wir zu den Stilen zurückkehren, 3fr war. Ich habe hier ein Leerzeichen eingefügt. Mal sehen, los geht's. Jetzt kannst du sehen, dass wir den gleichen Stil rüberkommen, aber er hat die Form einer Rückenwindklasse. Dann gehen wir hier runter zur Kopfzeile und ich setze den Col-Start auf 1, Col-End auf 3. Dann können wir hier beginnen, Schiefer zu verwenden , das Farbschema, über das ich zuvor gesprochen habe, nicht die zufälligen Farben, die wir für das, was zuerst auf der Liste stand, festgelegt haben . Hier verwende ich den Schieferton Hundert und dann stellen wir die Hintergrundfarbe darauf ein. Speichern Sie das, aktualisieren Sie es hier, und dann können Sie sehen, dass die Kopfzeile jetzt eine Hintergrundfarbe hat und und dann können Sie sehen, dass die Kopfzeile jetzt eine Hintergrundfarbe hat und sich über beide Spalten über die gesamte Breite der Seite erstreckt , also wollen wir das. Nach dem Header-Menü hier füge ich Flex für Display Flex list-none für den Listenstiltyp none ein. Ich gebe p-0 für Nullpolster sowohl auf der vertikalen als auch auf der horizontalen Achse ein. Justify-Center, um Justify Content auf Center zu setzen, gap-3, um den Rasterabstand auf drei Viertel rem zu setzen und nur damit ihr es wisst , Leute, all diese Klassen sind in der Dokumentation aufgeführt. Die Dokumentation zu tailwind.css ist ziemlich gut. Ich ermutige Sie, es sich anzusehen. Ich erwarte nicht, dass du dich an all das erinnerst und ich habe sie sogar notiert, sodass ich genau weiß, welche ich hier platzieren muss. Aber für euch geht zu tailwindcss.com, in die Dokumente und fangt an , mehr darüber zu lesen. Wir können auf die Anpassungsfarben eingehen und Sie können hier die verschiedenen Farbschemata, den genauen Farbcode für Slate 50, Slate 100, Slate 700 usw. und eine ganze Reihe anderer Informationen sehen den genauen Farbcode für Slate 50, Slate 100, Slate 700 usw. . Es erfordert eine kleine Lernkurve, um herauszufinden, was eine Klasse ist, aber nach genug Übung fängt man an diese Dinge einfacher zu verstehen, also lass uns hier weitermachen. Gehen wir jetzt zur Seitenleiste und für die Seitenleiste werde ich bg-slate-200 verwenden, also einen etwas dunkleren Farbton für das Sidebar-Menü. Ich mache pl-3, das ist die verbleibende Polsterung. Es wird auf 0,75 rem gesetzt , dann setze ich meine Flex-Attribute, also setze ich Grow, um Flex Grow auf Eins zu setzen. Ich setze Shrink-0, um Flex Shrink auf Null zu setzen, und dann basis-24, was ungefähr 100 ist, 96, und dann sollte es das sein. Speichern Sie das, aktualisieren Sie sich hier, sehen Sie sehr gut aus. Der Button hat jetzt sein Design komplett verloren. Lass uns hier reingehen und ihm eine ganze Reihe neuer PX-3-Styles geben, die ihm links und rechts Polsterung geben, also im Grunde genommen Polsterung auf der X-Achse, dann geben wir ihm Polsterung auf der vertikalen Achse, also oben und unten von zwei. Etwas weniger abgerundet, um dem Button einen Randradius zu geben pg-slate. Wir werden wieder die Schieferfarbpalette verwenden und einen dunkleren Farbton von 600 verwenden. Wir werden auch Schiefer für die Schriftfarbe verwenden. muss nur sicherstellen, dass hier genügend Kontrast vorhanden ist, also setze ich ihn auf 50, einen viel helleren Farbton und dann m-1, wodurch der Rand auf vier Pixel oder 0,25 rem festgelegt wird. Ich habe darauf auf Speichern geklickt. Schauen wir uns hier um, und jetzt haben wir das Design für den Button. Jetzt haben wir hier oben diese Spaltenlücke. Das wollen wir nicht, also lass uns hierher zurückkehren. Gap-3 wir wollen, dass es nur eine Spalte ist, also gibt es col-gap-1. Manchmal können Sie, anstatt die Dokumentation durchzusehen, eine Vermutung anstellen, also können wir vielleicht Gap-X machen. Da haben wir es. Spaltenabstand, was waren es drei? Da haben wir es und dann haben wir diese Lücke zwischen den Zeilen nicht mehr, nur zwischen den Spalten. Gehen wir nun in das Seitenleistenmenü. Lists-None für den Listenstil ohne, p-0 für kein Padding und dann wollen wir die gesamte Breite erweitern, also verwenden wir Höhen. Mal sehen, welche Optionen es gibt. Wir können all das durchblättern und schauen, ob es hier eine Option für 100%, h-4, gibt. Lass uns das versuchen. Speichern, aktualisieren Sie es hier. Nun zu 100% cool und wie ihr hier sehen könnt, müssen wir die Link-Stile nicht aktualisieren , weil sie bereits vom Rückenwind befreit sind. Wenn wir diesen Schwebezustand zurückbringen wollten, können wir das bei Rückenwind tun, indem wir diese Klasse machen und dann können wir die Pseudoklasse hier platzieren . hover:underlying sollte uns die Textdekoration geben, aber ich habe darauf auf Speichern geklickt. Lass uns einen Blick darauf werfen, auffrischen. Da hast du es, also funktioniert es. Wir müssen das nur für alle anderen kopieren , los geht's. Dann erstelle ich auch hier oben diesen hover:state. Spar dir das. Jetzt kannst du hier sehen, wie der hover:state passiert. Dafür müssen wir keine separate Klasse erstellen. Wir können das buchstäblich einfach auf das Element selbst setzen, also solche Sachen schätze ich wirklich. Das ist ziemlich cool, und nur der Zeit halber werde ich diese Ansicht hier oben entfernen, wir werden in dieser Klasse keine weiteren Ansichten machen. Ich werde diesen Abschnitt bei der Hauptklasse belassen. Befreien Sie sich hier von diesem ganzen View-Code. Zurück zu dem, was wir vorher gemacht haben. denke nicht, dass wir irgendwelche speziellen Stile in den Vordergrund stellen müssen, Ich denke nicht, dass wir irgendwelche speziellen Stile in den Vordergrund stellen müssen, aber für die Schublade müssen wir ihr einen Hintergrund aus 200 Schiefern geben . Wir wollen die volle Höhe des Bildschirms mit H-Bildschirm erreichen. Die Position muss absolut sein und ich kann das einfach tun, indem eine absolute Top-0 eintippe, um die oberen beiden Nullpixel festzulegen. Breite, ich möchte, dass es die Hälfte der Breite des Ansichtsfensters ist. Das ist ein willkürlicher Wert. Ich glaube nicht, dass Tailwind dafür eine Option hat, also öffne ich hier eckige Klammern, 50 Viewport-Breite, dann mache ich recht-0, um das richtige Attribut auf Null Pixel zu setzen , und dann mache ich es mir einfacher und setze einfach Transition all. Wie Sie hier sehen können, werden hier mehrere Parameter festgelegt, aber im Wesentlichen wird dadurch der Übergang erstellt. Wenn wir es zuvor in styles.css gesehen haben, haben wir den Übergang so angegeben, dass er nur für das richtige Attribut gilt, aber wir können ihn genauso einfach für alle festlegen, und dann werden sie alle abdecken , was ich für sinnvoll halte, und dann haben wir hier unseren Button, mit dem wir einfach dieselben Klassen kopieren können wie für die andere Schaltfläche. Da haben wir es. Leg das hier hin, richte den Abstand ein. Wenn ich dann auf Speichern klicke, lassen Sie uns das hier aktualisieren. Die Zeichnung wird standardmäßig angezeigt, wenn ich sie öffne und mir das ansehe. Sie können sehen, dass die Schublade derzeit auf die rechte Null gesetzt ist. Wir müssen ihm ein anderes Styling geben , wenn aria-hidden wahr ist. Zum Glück für uns in Tailwind ist dies eine Funktion, bei der Sie einfach einen Aria-Hidden-Dolon verwenden können und wir können eine Klasse festlegen, die nur gilt, wenn aria-hidden wahr ist. Dann kann ich hier rechts einen negativen Wert verwenden, um nach rechts zu setzen, ich denke, es ist zu 100% voll. Wenn ich hier nach unten scrolle, kannst du es vollständig sehen. Aktualisiere hier, die Schublade wird standardmäßig nicht geöffnet. Da ist es und ich kann es hier öffnen und schließen. Eigentlich muss das über die gesamte Höhe reichen. Vielleicht müssen wir die Höhe des Rasters auf 100% setzen. Wir haben vergessen, die Höhe des Rasters auf 100% einzustellen. Ich gehe hier rein, mach es einfach abseits der Startaufstellung und dann machen wir h4, ich denke zu 100%. Schauen wir uns das mal an. Höhe, 100% Dann haben wir vergessen, unseren Stil für die Zeilengröße einzugeben. Unsere Rastervorlagenzeilen bestanden aus 50 Pixeln, 1fr. Das wird wahrscheinlich ein bisschen schwierig sein. Rasterzeilen und dann geben wir hier einen beliebigen Wert ein, 50 Pixel, 1fr. Mal sehen, ob das funktioniert. Erfrischen Sie sich hier und siehe da, das tut es. Da hast du es, 50 Pixel, 1fr, was wir hier hatten. Wir haben jetzt unsere Header-Seitenleiste. Unsere Schublade funktioniert und alles wurde in Tailwind neu erstellt. Ich möchte hier nur einige Inhalte in den Hauptinhalt stellen, damit wir hier alles reinstellen können, was wir wollen. Wir haben den Hauptinhalt hier und vielleicht möchten wir dort auch etwas Polsterung anbringen. Vielleicht wird das ein H1-Hauptinhalt sein, aber auch hier Tailwinds Strips oder diese Standard-CSS. Nur indem man ihm das Element h1 gibt, heißt das nicht unbedingt , dass es noch größer sein wird . Was wir tun müssen, ist hier unsere Klassen anzugeben. Wir können Text 5xl und Schrift fett machen, um ihn größer und fetter zu machen, und jetzt können Sie sehen, dass wir hier einen größeren Titel haben. Es gibt jedoch keine Margen, das müssen wir selbst festlegen. Los geht's. Lass uns einfach my-2 machen, um es oben und unten zu polstern, und das sollte uns vorerst reichen. Dort funktioniert alles und wir haben unser Layout mit Tailwind CSS neu erstellt . Nun, hier gibt es ein großes Problem für mich, ich weiß nicht, manche mögen das, aber wir haben hier lächerlich lange Attribute für Klassen. Ich muss manchmal auf die andere Seite der Seite scrollen , nur um sie anzusehen Ich schreibe lieber beschreibende Namen in Klassen als nur in Hilfsklassen. Für eine Weile wollte ich Tailwind aus diesem Grund nicht benutzen. Ich dachte, das ist zu chaotisch. Ich schreibe gerne nette beschreibende Klassen wie Seitencontainer und Header-Menü, wie wir es in der Vergangenheit getan haben. Aber es gibt tatsächlich eine Möglichkeit, das Beste aus beiden Welten herauszuholen , und das zeige ich Ihnen jetzt. Wenn wir in das CSS unserer Eingaben gehen, können wir tatsächlich unsere Seitencontainerklasse mit all den Utilities rekonstruieren unsere Seitencontainerklasse mit , auf denen wir mit Tailwind einfach sitzen. Ich werde mir alle Klassen schnappen , die wir hinter dem Seitencontainer festgelegt haben. Ich werde den Seitencontainer nicht löschen. Ich spare mir das und komme her und ich kann einfach Apply schreiben und dann die ganzen Tailwind-Klassen danach legen. Dann wird es all dies auf die Seitencontainerklasse anwenden . Wenn wir hier aktualisieren, wirst du genau das gleiche Ergebnis sehen, aber jetzt haben wir nicht das ganze Chaos in unserem HTML. Sie können hier sehen, dass all diese Attribute zusammengepackt und in diese eine Klasse zusammengefasst wurden , was meiner Meinung nach viel sauberer ist. Lass uns das jetzt durchgehen und das für alles andere tun. Für unseren Header hier schnappe ich mir den Inhalt und lass uns den Header machen, anwenden und ihn hinzufügen. Da hast du es. Dann gehen wir in das Header-Menü. Schnappen Sie sich all diese Header-Menüs, richtig, wenden Sie sich an. Der gesamte Prozess ist derselbe. Ich nehme nur diese Hilfskurse und wende sie auf die Klassenseitenleiste an. Super einfach mit der angewandten Richtlinie hier. Gehen wir in den Listen weiter nach unten, Schaltflächen. Wir können auf alle Schaltflächen abzielen, sodass wir uns hier nicht für alle Schaltflächen wiederholen müssen . Anstatt auf ein Klassenziel oder Schaltflächen abzuzielen, stellen Sie „Anwenden“ davor. Da haben wir es. Dann kann ich diese Klassen von dieser Schaltfläche entfernen. Mal sehen, ob es soweit irgendwelche Brüche gibt, außer, ich muss nur sichergehen, dass das ein Knopf ist. Keine Brüche, also haben wir jetzt unsere Knöpfe rüber. Wir können uns das schnappen, es in das Seitenleistenmenü stellen und anwenden. Dann ist das auch hier gut , weil wir uns damit immer wieder wiederholen . Das wollen wir nicht. Stattdessen schnappen wir uns einfach alle unsere A-Tags in einer ungeordneten Liste und fügen dann die Unterstreichung durch unsere A-Tags in einer ungeordneten Liste den Mauszeiger hinzu. Jetzt können wir all das entfernen. Ich verwende Command D auf einem Mac, um sie alle auszuwählen, und ich kann sie einfach alle auf einmal entfernen. Dann können wir hier für unsere H1 reingehen. Lassen Sie uns diese Klassen für alle H1 verwenden. Gehen Sie hier rein, h1, wenden Sie sich an. Gehen wir hier rein, für die letzte, für die Schublade und dann erstelle ich die Klasse für die Schublade, verwende Apply und jetzt aktualisieren hier erhalten wir genau das gleiche Ergebnis. Aber jetzt kannst du sehen, dass unser HTML viel sauberer ist , so wie ich es mag. Hier kannst du sehen, dass alles nett benannt ist. Wir versuchen nicht, all diese Tailwind-CSS-Klassen zu entziffern , die es sonst getan hätten. Wenn Sie jetzt hier nachschauen, enthält das alles nur das Eingabe-CSS und ich finde es viel schöner es hier zu haben, als es im eigentlichen HTML ist . Das ist meine Präferenz. Ich fing erst an, mich mit Tailwind zu beschäftigen, als ich herausfand, dass du das kannst, du kannst immer noch Klassen gebrauchen. Sie können immer noch Elemente als Ziel verwenden, aber dann könnten Sie auch Tailwind-Klassen verwenden. Manche Dinge, die ich mag , sind, dass du diese Pseudo-Klassen hast. Du hast es wieder hier oben zum Unterstreichen mit dem Mauszeiger und das Verrückte ist, dass du hier auch Medienabfragen machen kannst . Was haben wir in unserer styles.css hier, wir hatten in Tailwind die Sidebar auf Mobilgeräten nicht angezeigt, es ist ein Mobile-First-System. Alle Medienabfragen werden eine Mindestbreite haben, sie sind also standardmäßig mobil, und dann verwenden wir die Medienabfragen, um Bildschirmgrößen über bestimmten Stufen zu beeinflussen . Ich zeige dir jetzt, was ich damit meine. Wenn wir einfach zur Tailwind-CSS-Dokumentation gehen und ich nach responsivem Design suche und mir diese Seite ansehen, können Sie die Breakpoint-Präfixe sehen. Hier sollte stehen, dass Tailwind CSS zuerst mobil ist. Es verwendet ein Mobile-First-Breakpoint-System, was nicht meine Präferenz ist. Ich bevorzuge es, zuerst einen Desktop zu verwenden. Aber ich habe erwähnt, dass viele moderne Systeme zuerst auf Mobilgeräten basieren. Wie Sie hier sehen können, wirkt sich das auf alles über 640 aus, wenn wir die kleine Pause nutzen . Dann reichen diese Breakpoints bis 1536. Lassen Sie uns damit tatsächlich hier reingehen. Zuallererst wollen wir es standardmäßig machen, weil die Standardeinstellung mobil ist, wir möchten, dass hier keine angezeigt werden, also setzen wir einfach auf versteckt. Aber wenn es kleiner ist, wollen wir nicht, dass es ausgeblendet wird, also fügen wir einen Block hinzu, wodurch es als Block angezeigt wird. Es ist nicht genau dasselbe wie hier weil es 640 und nicht 425 ist, aber es ist nah genug. Wenn wir hier rübergehen und ich zum iPhone 12 Pro gehe, können Sie sehen, dass wir ohne Medienanfragen die Seitenleiste entfernt haben. Da wir zuerst auf dem Handy sind, ist die Anzeige standardmäßig auf „Keine“ eingestellt. Lassen Sie mich zu diesem Weg zurückkehren. Wenn wir über 640 gehen, kannst du sehen, also verschiebe ich das. Wir sind über 640 gestiegen. Sie können sehen, dass diese Medienabfrage von Tailwind herauskommt, aber das müssen wir nicht selbst schreiben, wir müssen nur die Klasse in Tailwind schreiben , die wir nach diesem Breakpoint anwenden wollen. Ich finde es toll, wie wir in Tailwind, wenn wir es richtig installieren , hier den genauen Code sehen können , der in unser CSS eingefügt wird. Deshalb ist es wichtig, weiter zu laufen und hier zu kompilieren, denn jedes Mal, wenn wir das erstellen, erstellt es das notwendige Roh-CSS in unserer Ausgabedatei und macht all diese verrückten Dinge, um sicherzustellen, dass es optimal ist und nur das verwendet, was es braucht. Es ist ziemlich beeindruckend, wenn man die Macht von Tailwind erst einmal verstanden hat. Aber auch hier ist es ein Tool wie jedes dieser anderen Tools. Alles läuft auf HTML, CSS und JavaScript hinaus. Auch hier gilt: Wenn Sie dies nicht verwenden möchten , ist es völlig optional. Ich zeige Ihnen nur eines der beliebtesten Tools, die Frontend-Webentwickler heutzutage verwenden. Wenn Sie das interessiert, schauen Sie auf jeden Fall weiter an und erfahren Sie mehr über Tailwinds. Ich kann sogar einen Kurs über Tailwind für euch erstellen , wenn ihr mehr erfahren wollt, aber das ist alles in der Referenz hier dokumentiert. Sie benötigen nicht unbedingt einen Kurs, wenn Sie gesamte Dokumentation lesen können. Ich freue mich darauf, Tailwind weiterhin zu verwenden und es bei einigen größeren Projekten auszuprobieren. Ich persönlich mag es. Auch hier gilt: Wenn Sie sich nicht frei fühlen, können Sie dieses Video überspringen. Sie können die Verwendung überspringen. Es ist kein wesentlicher Bestandteil der Frontend-Webentwicklung, nur ein weiteres Tool. Aber nachdem das geklärt ist, lassen Sie uns über etwas sprechen, das für Ihr Webentwicklungsprojekt unerlässlich sein könnte , und zwar das Sammeln von Daten von einer externen API. Wir werden das im nächsten Video behandeln. 11. APIs verwenden: In diesem Video werden wir uns APIs ansehen. Insbesondere werden wir uns hier ein Beispiel für eine API ansehen , um einige gefälschte Store-Daten in unsere kleine App zu integrieren. Denken Sie daran, bevor wir diese Produktseite als Beispiel hatten. Ich arbeite hauptsächlich im E-Commerce, daher verwende ich gerne diese Beispiele für E-Commerce-Shops. In diesem Video werden wir Daten aus einer gefälschten Store-API importieren. Daten aus einer gefälschten Store-API importieren. Es gibt uns gefälschte Geschäftsdaten. Dann können wir mit diesen Daten, die von einer API stammen, eine Liste von Produkten im Frontend erstellen mit diesen Daten, die von einer API stammen, eine Liste von Produkten im Frontend . Was ist eine API? Es steht einfach für Application Programming Interface. Wenn Sie die Definition online nachschlagen, ist es möglicherweise etwas verwirrend , was sie tatsächlich tut, da sie eine Reihe verschiedener Dinge bedeuten kann. In diesem Zusammenhang ist eine API im Wesentlichen nur eine Möglichkeit für uns, eine Verbindung zu einem Backend herzustellen, um Daten abzurufen. In meiner ersten Klasse, Understanding Web Development, haben wir einen weniger modernen Ansatz gewählt, indem wir PHP geschrieben, uns mit unserer eigenen MySQL-Datenbank befasst und diesen Inhalt über PHP auf den Bildschirm ausgegeben haben. Aber jetzt, da das Frontend mit Frontend-Frameworks und dergleichen komplexer geworden ist, ist es jetzt ein üblicheres Muster, eine separate API und eine separate Frontend-App zu haben eine separate API und eine separate Frontend-App und beide zu verbinden. Die API ist im Grunde die Backend-App, die uns die Daten gibt. Sie können sich APIs in diesem Fall einfach als eine Datenquelle vorstellen , zu der wir eine Verbindung herstellen können. Um auf diese Daten zugreifen zu können, benötigen wir lediglich einen API-Endpunkt, dem es sich lediglich um eine Adresse handelt, die Daten zurückgibt, wenn wir eine Anfrage stellen . So wie wir hier eine Anfrage an diesen Server gestellt haben und unseren Seiteninhalt zurückgegeben hat, können wir eine Anfrage an einen Server stellen und einige Rohdaten zurückerhalten. Das werden wir in diesem Video machen. werde ich Ihnen ein einfaches Beispiel In dieser Lektion werde ich Ihnen ein einfaches Beispiel vorstellen. Öffnen wir fakeapi.platzi.com. Dies ist die Platzi Fake Store API. Wie hier steht, handelt es sich um eine Rest-API für Prototyp Ihrer E-Commerce- oder Shopping-Website. Wir werden dies verwenden, um eine Liste von Produkten zu erstellen und sie in unserer kleinen Web-App anzuzeigen. Sie werden hier feststellen, dass die API eine Rest-API ist. Dies ist die am einfachsten zu verstehende Form der API. Es gibt einen anderen , moderneren API-Stil namens GraphQL, jedoch ein Verständnis der Abfragesprache von GraphQL erfordert . Bei Rest-APIs müssen wir nur einen bestimmten Endpunkt erreichen , der genau hier ist. Wir müssen nur diese Adresse eingeben und dann werden Daten zurückgegeben. Wenn ich das einfach kopiere und einen anderen Tab öffne und das einfüge, werden Sie sehen, dass wir eine ganze Liste von Daten erhalten. Vorher hast du gesehen, dass es als unformatierter Rohtext auftauchte, und jetzt macht es das. Das liegt daran, dass ich eine Chrome-Erweiterung in meinem hier eine Chrome-Erweiterung in meinem Chrome-Browser habe, die das tut. Sie können sehen, wie die Daten im JSON-Format recht gut herauskommen. Aber wenn Sie diese Erweiterung nicht haben, werden Sie sehen, dass sie dort als Rohformat herauskommt. Wir können es einfach so direkt in unsere Adressleiste einfügen. Das könnte praktisch sein, um die Daten anzuzeigen, zumindest die Struktur, die von der API kommt. Aber was wir in unserer Web-App tun werden, ist diesen Endpunkt zu verwenden , um diese Daten in unser Frontend einzufügen , und dann können wir damit interagieren. Was ich tun werde, ist natürlich , dass wir hier eine Produktliste haben Ich werde mit Vue und dieser API eine kleine Sammlungsseite in unserer Web-App erstellen . Ich werde das in meiner Zwischenablage behalten, hierher gehen und dann zu unserem Code-Editor wechseln. Wir haben in einem früheren Video über Tailwind gesprochen. Lass mich das schließen. Lassen Sie mich das wieder in Vue verwandeln. Ich gebe dem eine ID der Vue App, damit wir unseren Vue-Code damit verknüpfen können. Ich muss auch den Verweis auf Vue über das CDN zurückbringen . Ich werfe das einfach rein. Lass es uns gleich hier machen. Scripts SRC, dann die Adresse der neuesten Entwicklungsversion, nämlich unpckg.com/vue @next. Ich habe mich vertippt. Ich habe Drehbücher statt Drehbuch gesagt. Dann füge ich hier einen weiteren ein und wir fügen einfach unseren Vue-Code hier ein. Auch hier werde ich einfach mein Optionsobjekt erstellen das Gerüst hier zum Laufen bringen. Dann erstellen wir die App Vue. Erstellen Sie eine App, laden Sie die Optionen und mounten Sie sie dann in das Div, dem wir die ID der Vue App gegeben haben. Wir können hierher gehen, Hash Vue App. Wenn wir dort auf „Speichern“ klicken und hier aktualisieren, sollten wir sehen, dass wir eine Entwicklungsversion von Vue ausführen. Wenn Sie die DevTools für Vue installiert haben, wenn ich sie schließe und erneut öffne, können wir die Vue DevTools hier herunterladen. Ich kann das nur empfehlen. Um die Vue DevTools zu installieren, können Sie im Chrome Extension Store Vue DevTools eingeben. Aus irgendeinem Grund dauert das Laden sehr lange. Ich tippe einfach Vue ein. Hier können Sie sehen, dass das, was ich verwende, dieses hier ist, Vue.js devtools von Developer Tools. Zurück zu dieser Seite, Sie können sehen, dass wir in diesem Abschnitt eine App ausführen. Sie können sehen, dass sie hervorgehoben ist. Ich werde einen Code schreiben, den ich ausführen möchte, wenn diese App gemountet ist. Das können wir über die Lifecycle-Methode mountet tun. Wenn ich einfach eine Methode namens mountet erstelle und sie in das Optionsobjekt einfüge, wird alles, was ich hier hineinschreibe , auf dem Bildschirm ausgegeben. Gehen wir zurück und kopieren diese API-Adresse. Stellen Sie sicher, dass es in unserer Zwischenablage ist. Dann schreibe ich einen einfachen Fetch. Diese Methode hier ist super einfach, aber super mächtig. Es führt lediglich eine Get-Anfrage an die Adresse aus , die in diesem ersten Argument enthalten ist. Wir werden dann einem/dann anketten. In this.then werde ich diesen Code einfügen, der nur das JSON verarbeitet und es uns ermöglicht, es in nur das JSON verarbeitet und es uns ermöglicht ein JavaScript-Objekt für die Verwendung in unserer App zu konvertieren. Mit dem zurückgegebenen JSON werde ich es zunächst einfach auf der Konsole protokollieren , damit wir beim Laden unserer App die Daten in unsere Konsole bekommen und dann sehen können, wie sie aussehen. Hier kannst du es sehen. Ich werde mich nochmal erfrischen. Sie können sehen, dass wir 177 Objekte in einem Array haben. Wir können innerhalb des Arrays nachschauen und es überprüfen und wir können all die verschiedenen Produktdaten sehen , die wir zuvor gesehen haben, indem wir sie einfach in unseren Browser eingeben. Jetzt haben wir das in Form von JavaScript, wir können es in unsere Vue-App laden. Ich werde hier rüber klicken. Ich werde einige Daten hinzufügen. Nach diesem Format geben wir ein Objekt zurück. Vergiss nicht, wir müssen hier unser Komma eingeben und ich werde ein Array namens products eingeben, das zunächst ein leeres Array sein wird . Dann werde ich hier drüben tun, weil das zurückgegebene JSON-Objekt ein Array ist. Wenn wir auf diese Seite zurückblicken, können wir dieses Array einfach in dieses Array in unserer App einfügen . Wir müssen nur damit beginnen , auf diese App zu verweisen, die wir uns gerade ansehen, auf diese Weise erfassen wir die Daten, und dann weisen wir den zurückgegebenen JSON einfach this.products zu, nicht dem Produkt. Los geht's. Wenn ich hier auf „Speichern“ klicke und hier aktualisiere, wirst du sehen, dass es in der Konsole nichts gibt , weil wir das Konsolenprotokoll entfernt haben, aber wenn wir es uns in unseren DevTools ansehen würden, kannst du sehen, dass dieses Array von Objekten jetzt hier geladen wurde. Jetzt können wir in unserer Vue-App damit interagieren. Ich gehe hier rüber und lass uns diese Daten tatsächlich nutzen. Ich gebe hier eine Produktsammlung ein, was auch immer wir wollen. Eigentlich überspringe ich einfach die Überschrift ganz und erstelle hier ein Div mit der Klasse der Sammlung, und innerhalb von hier starte ich eine For-Schleife mit Vue. Ich werde eine Produktkarte erstellen. Das wird ein Div für jedes Produkt sein, das auf den Markt kommt, und ich möchte, dass das für so viele Produkte gilt, wie es im Sortiment gibt. Wir können hier eine V-FOR-Schleife verwenden, und dann kann ich einfach Produkte in Produkte schreiben. Wir können das nennen, wie wir wollen, es wird einfach ein einzelnes Element aus diesem Array abrufen ein einzelnes Element aus , das hier unten passt. Ich klicke, um das zu beenden. Dann hier drinnen wollen wir ein Image-Tag, lassen Sie mich das product-image nennen und dann das src, wir aus dem zurückgegebenen Produktobjekt ziehen. Wenn wir hier zurückschauen, in eines dieser Objekte gehen, können Sie sehen, dass drei Bilder zurückgegeben werden, sodass wir eine Reihe von Bildern erhalten. Wir müssen hier eine Entscheidung treffen. Wählen wir einfach den ersten im Array aus , der sich an Position 0 befinden wird. Dann gehen wir einfach zu product.images und um das erste Objekt im Array an Position 0 auszuwählen, geben wir dort einfach Null ein. Dann geben wir hier den Produkttitel ein. Dann verwende ich v-html, um inneren HTML-Code einzufügen , der auf einer Variablen basiert. Ich entscheide mich für product.title. Wenn wir zum Objekt zurückkehren, können Sie sehen, dass hier ein Wert für den Titel erscheint, und dann klicke ich darauf auf „Speichern“. Erfrischen wir uns hier. Wie Sie sehen können, stellen wir beim Laden der Seite eine Anfrage an diese externe API und bringen die Bilder und den Text ein. Lass mich nochmal auffrischen. Es wird ziemlich schnell laufen weil es eine ziemlich einfache App ist, aber wie Sie hier sehen können, wird die Seite zuerst geladen. Wir haben die Kopfzeile und die Seitenleiste, die zuerst geladen werden, dann können Sie sehen, wie die Namen erscheinen, dann können Sie die Bilder sehen. Was passiert, ist, wenn wir genau hinschauen, passiert es tatsächlich zu schnell selbst die Vue-App es erkennen könnte, aber zunächst ist dieses Produktarray leer, und sobald die API-Anfrage abgeschlossen ist, wird es mit den 177 verschiedenen Produkten gefüllt. Wenn ich hierher gehe, können wir sehen das Produktobjekt zunächst leer ist und diese Produkte dass das Produktobjekt zunächst leer ist und diese Produkte erst dann in die Produktreihe aufgenommen werden, wenn dieser Vorgang abgeschlossen ist. Eine Sache, die ich tun möchte, bevor ich das ausführe, ist einfach sicherzustellen, dass das Produktarray nicht leer ist , bevor ich versuche, das alles auszugeben. Was ich tun möchte, um es ein bisschen schöner zu machen, ist wenn ich mich hier erfrische, siehst du, dass es einen Zeitraum gibt, in dem es leer ist. Ich möchte dort einen kleinen Ladeindikator einfügen, also werde ich bedenken, dass Vue reaktiv ist , und wenn sich die Daten ändern, ändert sich die Seite. Wir können hier eine einfache if-Anweisung eingeben, Wir können hier eine einfache if-Anweisung eingeben um die Länge des Arrays zu überprüfen. Wie Sie hier sehen können, habe ich hier ein Template-Tag eingefügt. Dies ist ein spezielles Vue-Tag , in das wir Logik einfügen können, das aber auf der Seite nicht wirklich gerendert wird. Ich gebe hier eine if-Anweisung ein und wir gehen, wenn products.length größer als Null ist, d. h., es ist nicht leer, dann führen wir das aus, aber wenn es leer ist also die Alternative dazu, füge ich einfach ein V-else ein. Wenn es leer ist, was es beim Laden der Seite sein wird, füge ich hier einfach eine einfache Ladeanzeige ein, wird hier einfach eine einfache Ladeanzeige ein, geladen... Wenn wir jetzt aktualisieren, können Sie sehen, dass für den Bruchteil einer Sekunde dort „ Wird geladen“ steht , bevor alle Produktdaten eingegeben werden. Die andere Sache, die ich machen möchte , ist natürlich, dass wir 177 Produkte haben, das ist ein bisschen zu viel. Ich werde diesen Betrag begrenzen. Was ich tun kann, ist dieses V-for hierher zu verschieben und dann kann ich sowohl den Index als auch das eigentliche Objekt in dieser Schleife abrufen , und dann kann ich hier nur eine Produktkarte anzeigen , wenn der Index, sagen wir, weniger als vier ist. Nur die ersten vier Artikel werden jetzt angezeigt. Ich klicke auf „Speichern“, aktualisiere es hier und du wirst sehen, dass die ersten vier Artikel angezeigt werden. Idealerweise möchten wir die Ladezeit verkürzen, indem wir die API darauf beschränken , uns nur die Menge zu senden, die wir benötigen. Diese 177 ist übertrieben. Es läuft immer noch superschnell, aber wenn wir unsere Dokumentation hier durchgehen, gibt es vielleicht eine Möglichkeit, also Produkte einzuschränken. Los geht's. Holen Sie sich ein einzelnes Produkt, erstellen Sie ein Produkt. Dies wird als API-Spezifikation bezeichnet. Wir können hier nachlesen , wie man die API benutzt. Wir können uns die Paginierung ansehen. Los geht's. Wir können ein Limit setzen. Lass uns das machen. Wir gehen runter bis hier und dann am Ende, legen wir? Grenzwert=4. Wir könnten das Limit auf API-Ebene setzen. Erfrischend. Ich kriege immer noch 177. Schauen wir uns das mal an. Vielleicht müssen wir auch den Offset setzen, also ja, Offset auf Null und Limit auf 10. Wir können diese Parameter mit dem Ampersand-Symbol trennen . Ich werde unsere Web-App hier aktualisieren. Wie Sie sehen, bekommen wir jetzt nur vier von der API zurück, was netter ist, weil wir keine Anfrage stellen, die länger ist als nötig. Vor diesem Hintergrund können wir diese if-Anweisung sogar einfach entfernen und wir erhalten immer noch dasselbe zurück, aber wir können das Frontend und das Backend einschränken . Ich möchte, dass das etwas stilvoller angezeigt wird, also kopiere ich etwas CSS und füge es ein. Moment sollten wir immer noch Tailwind verwenden, also füge ich es hier in meine Eingabedatei ein und klicke dort auf „Speichern“. Sie hier aktualisieren, können Sie sehen, dass es jetzt eher in einem Rasterformat angezeigt wird. Ordnung, also wenn ich jetzt dauernd aktualisiere und du sagst Laden, und dann bekommen wir jedes Mal neue Daten von der API und wir bekommen unsere schönen vier Karten. Aber lassen Sie uns darauf aufbauen und etwas Interaktivität einbauen. Wenn wir uns tatsächlich jedes dieser Objekte ansehen, können Sie sehen, dass jedes von ihnen eine ID hat. Das können wir verwenden, um jeden von ihnen zu identifizieren. Was ich tun werde, ist, hier einen weiteren Abschnitt zu erstellen , damit wir auf einen davon klicken und uns eingehender mit seinen Daten befassen können. Ich gehe hier zurück zu unserer App und füge in meinen Daten unter Produkte ein neues Feld für die ausgewählte Produkt-ID ein. Dann setzen wir das zunächst einfach auf Null. Was ich dann machen werde , ähnlich wie wir es mit der Varianz gemacht haben, ich erstelle ein berechnetes Feld und das wird einfach das ausgewählte Produkt sein. Alles, was es tut, ist, das ausgewählte Produktobjekt anhand der ausgewählten Produkt-ID zu ermitteln . Es durchsucht die Objekte der Produkte, sucht nach der ausgewählten Produkt-ID und gibt dieses Objekt dann zurück. Ich werde this.products hier erneut mit der Suchmethode zurückgeben . Wir werden nach dem Produkt suchen, bei dem die Produkt-ID mit der ausgewählten Produkt-ID in unseren Daten übereinstimmt . Dann benötigen wir jetzt eine Methode, um die gewählte Produkt-ID festzulegen. Ich gehe hier rein und erstelle das Objekt einer Methode. Hier können wir eine Methode namens set selected product erstellen , und wir nehmen einfach das Argument ID. Das wird eine sehr einfache Methode sein. Dadurch wird lediglich die übergebene ID dieser Produkt-ID zugewiesen. Ganz einfach. Um nun das Produkt auszuwählen, füge ich auf jeder dieser Produktkarten einen Event-Listener hinzu. Die Art und Weise, wie wir das in Vue machen, ist super einfach. Alles was wir tun müssen, ist hier ein Attribut hinzuzufügen. Es beginnt mit dem AT-Symbol und das Attribut wird der Name des Ereignisses sein. Es wird ein einfaches Klick-Event sein. Dann sagen wir also im Grunde, dass onclick die Methode, die wir ausführen möchten, darin besteht, ausgewählte Produkte festzulegen. Dann müssen wir natürlich die ID angeben , die wir für das Produkt einrichten möchten. Ich werde das hier erweitern. Das wird einfach die ID des Produkts sein, das wir gerade durchsuchen. Wenn ich darauf auf „Speichern“ klicke, müssen wir diesen Abschnitt hier noch erweitern, aber lassen Sie uns einfach überprüfen , ob im Vue DevTool bisher alles funktioniert. Sie werden sehen, wenn wir das Projekt zum ersten Mal laden, wir haben die gewählte Produkt-ID Null und daher haben wir einen undefinierten Wert für ausgewählte Produkt innerhalb von computed. Aber wenn ich auf eines davon klicken würde, scheint es nicht zu funktionieren. Lass mich hier auffrischen. Sie können hier sehen, dass es aus irgendeinem Grund in der eigentlichen App nicht aktualisiert wird. Aber wenn ich auf Suppentomate klicken würde, aktualisieren Sie es hier, Sie können sehen, dass die ausgewählte Produkt-ID 38 ist. Da wir in unserem Array ein Objekt mit dieser ID haben, tun wir das natürlich, weil wir dies als mögliche Option für die ausgewählte Produkt-ID verwendet haben, dann können wir das Objekt für das ausgewählte Produkt berechnen . Wenn ich darauf klicke und aktualisiere, haben wir jetzt die ausgewählte Produkt-ID 41 und erhalten daher das ausgewählte Produktobjekt zurück. Vor diesem Hintergrund müssen wir nur noch einen weiteren Abschnitt erstellen hier nur noch einen weiteren Abschnitt erstellen, der auf dem ausgewählten Produkt basiert. Nach dieser Sammlung hier, stellen Sie sicher, dass Sie diese in der Vue-App behalten. Sonst wird es nicht funktionieren. Wir erstellen hier ein Div und lassen Sie uns ein V if machen. Wir möchten dies nicht anzeigen, es sei denn das ausgewählte Produkt enthält Daten. Wenn es sich nur um ein leeres Objekt oder ein Nullobjekt handelt, wird der Wert false zurückgegeben, sodass es nicht angezeigt wird. Dann geben wir dem eine Produktklasse. Was brauchen wir hier, wir werden das Bild haben und wir werden die Produktinformationen haben. Ich fange hier mit dem Bild an und lade das SRC dynamisch ein. Dabei wird nur product.images ausgewählt, wird nur product.images ausgewählt denn denken Sie daran, dass jedes von ihnen mehrere Bilder hat. Wir nehmen einfach das erste Bild im Array, dann erstelle ich hier ein weiteres Div namens Product Info für den Rest der Informationen. Das wird auf der rechten Seite formatiert. Dann füge ich h1 hinzu, wir verwenden immer noch Tailwind, sodass wir hier einige Tailwind-Hilfsklassen eingeben können, Text 5xl, font , fett und randunten von ungefähr acht Pixeln, und dann setzen wir das als Titel, selected product.title. Dann gehen wir runter und legen hier den Preis fest, Preis, der nur ein Div sein wird. Dann fügen wir innerhalb von V, HTML, das den inneren HTML-Code auf der Grundlage einer Variablen festlegt, das den inneren HTML-Code auf der Grundlage einer Variablen festlegt, dann den ausgewählten Produktpreis ein. Dann endlich die Beschreibung des Produkts, die ich einfach div nenne wenn Sie eine Klasse für dieses Produkt einrichten. Aber ich werde das innere HTML auf die ausgewählte Produktbeschreibung setzen , die meiner Meinung nach mit der API übereinstimmen sollte . Schauen wir uns das mal an. Wählen wir hier einfach einen aus. Aktualisierung und Beschreibung. Ja, es hat eine Beschreibung. Okay, cool. Ich werde noch einmal denselben Teil rüberkopieren , damit wir uns darin nicht verzetteln. Dann zurück hierher, lassen Sie uns sehen, ob das funktioniert. Wenn ich darauf klicke, passiert nichts. Wenn ich das herausziehe und in die Konsole gehe, können Sie sehen, dass wir ein paar Fehler haben : „Eigenschaften von undefinierten Lesebildern können nicht gelesen werden.“ Wenn Sie auf Fehler stoßen, ist es wichtig , dass Sie die Fehlermeldungen lesen. Wir versuchen, Bilder auf etwas Undefiniertem zu lesen . Ich habe hier offensichtlich einen kleinen Fehler gemacht. Lassen Sie mich den Code anschauen. Wenn ich hier nach unten scrolle, können Sie sehen, dass ich das falsch geschrieben habe. Ich habe select product.images eingegeben, ich sollte selected eingeben. Das ist nur ein Tippfehler meinerseits. Wenn ich jetzt darauf klicke, siehst du, dass kein Fehler vorliegt, und du wirst sehen, dass ich jetzt das ausgewählte Produkt aktualisieren kann dass ich jetzt das ausgewählte Produkt dieser Abschnitt hier unten aktualisiert wird. Jetzt enthält der Preis nicht das Währungssymbol, also werde ich das schnell korrigieren. Ich gehe hier rüber. Was wir tun können, ist, dass ich hier einfache Anführungszeichen einfügen kann , um eine einfache Zeichenfolge einzufügen, und danach füge ich einfach ein Plus ein, damit ich die beiden kombinieren kann und auf „Speichern“ klicke. Wenn ich jetzt darauf klicke, wird ein Dollarzeichen vor ihnen stehen. Wir können Daten von einer externen API importieren, und sobald sie sich in unserer App befinden, haben wir Reaktivität von einem Frontend-Framework wie einer Ansicht, um mit diesen Daten interagieren zu können. Offensichtlich passt das nicht zum Bild. Es sind nur zufällige Bilder, wir haben zufällige Texte. Aber du verstehst, worum es hier geht. Wenn wir unser HTML, CSS und JavaScript im Frontend kennen und wissen, wie man auf APIs zugreift und sie in unser Frontend bringt, können wir eine voll funktionsfähige App erstellen. Dann haben wir alles, was wir brauchen. Als Frontend-Webentwickler benötigen Sie lediglich Zugriff auf eine Datenquelle. Sie müssen das Backend nicht selbst erstellen, was ich als Frontend-Entwickler bevorzuge, wenn ich Apps schreiben muss. Ich kann mich einfach auf das Frontend konzentrieren und wirklich coole Benutzererlebnisse machen. Zum Abschluss dieser Lektion über APIs möchte ich Ihnen nur einen weiteren Ort zeigen, an dem wir überprüfen können , ob die API-Anfrage eingeht. Wenn Sie jemals Probleme mit API-Anfragen haben, können Sie auf den Netzwerk-Tab gehen, hier aktualisieren, Sie können nach Fetch XHR filtern denn denken Sie daran, dass wir hier einen Abruf verwenden. Dadurch werden alle externen APIs überprüft denen wir eine Verbindung herstellen. Wenn ich darauf klicke, siehst du den API-Endpunkt. Wenn ich den Mauszeiger darüber bewege, sollte es Ihnen den gesamten API-Endpunkt anzeigen . Dann können Sie sich hier die Parameter ansehen , die gerade durchlaufen werden. Offset Null, Limit vier, und dann können wir die Antwort hier sehen , alles gut formatiert. Es gibt einige Stellen, an denen Sie sich die Antwort ansehen können. Wir können es hier von der Konsole abmelden, wir können in unseren Netzwerk-Tab schauen, oder wenn wir etwas wie Vue verwenden, können wir hier hineinschauen und sehen, was in unserem Produktarray gefüllt wird , wenn wir Daten von einer externen Quelle erfassen und in unsere Vue-App einfügen würden Daten von einer externen Quelle erfassen . Wir können es hier in unserem Netzwerk-Tab ansehen oder wir könnten es von der Konsole abmelden und es auch so ansehen. Aber damit wollte ich nur fertig werden. Sie können hier sehen, dass die Daten ankommen, und jetzt können wir sie in unserer App verwenden. Das ist im Grunde alles, was wir in der heutigen Klasse durchmachen werden. Im nächsten Video werde ich Ihnen zeigen, wie Sie Ihr Klassenprojekt einrichten, und dann werden wir diesen Kurs abschließen. 12. Kursprojektaufbau: Für Ihr Klassenprojekt möchte ich, dass Sie eine einfache Web-App mit den folgenden Anforderungen erstellen , die eine externe API verwendet, um Daten wunderschön anzuzeigen. Um Ihnen hier zu helfen, helfe ich Ihnen bei der Einrichtung Ihrer Entwicklungs- und Produktionsumgebung. Das ist eine ausgefallene Art , Projekte auf Ihrem Computer einzurichten und Schritte, um sie ins Internet zu bringen. Zunächst sollten Sie einen Ordner für Ihr Projekt erstellen. Ich nenne das ein Modernes Webentwicklungsprojekt, aber nenne es, wie du willst. In diesem Projekt werden wir hier NPM und Git einrichten. Was ich tun werde, ist Visual Studio Code zu öffnen. Ich erweitere es auf die Breite und Höhe Ihres Bildschirms. Dann verwende ich die Tastenkombination Command O, um unseren Codeordner zu öffnen und das Projekt zu öffnen. Jetzt haben wir einen leeren Ordner in Visual Studio Code geöffnet. Dann öffne ich das Terminal, also kontrolliere das Zurück-Häkchen. Jetzt haben wir ein Terminal in unserer Anwendung oder in unserem Projekt geöffnet . Was ich tun werde, ist git init auszuführen , um ein leeres Git-Repository zu erstellen. Dies wird uns helfen, die verschiedenen Versionen unseres Codes zu verwalten und unseren Code auch ins Internet zu bringen. Wir werden in diesem Video GitHub-Seiten verwenden, aber Sie können dies auch auf andere Weise tun, wenn Sie möchten. GitHub Pages ist einfach der einfachste Weg, dies zu tun. Dann werde ich hier auch ein NPM-Init einfügen. Sie können das Projekt benennen, wie Sie möchten. Ich drücke einfach bei allem die Eingabetaste , um alle Standardeinstellungen zu akzeptieren. Das wird uns eine package.json geben. Dann erstelle ich eine Datei mit dem genauen Dateinamen von git ignore. Diese Datei enthält eine Liste von Dateien und Ordnern, die ignoriert werden sollten, wenn wir unser Repository pushen. Wenn Sie sich an die Lektion erinnern, als wir NPM installiert und eine package.json erstellt und die NPM-Installation ausgeführt haben. Es hat einen Ordner für Knotenmodule erstellt. In diesem Ordner für die Knotenmodule befand sich der gesamte Code für die verschiedenen Module. Dieser Code ändert sich nie. Wir müssen diesen Code nicht wirklich auf GitHub übertragen. Wir können einfach, wo auch immer wir unseren Code hinschicken, er installiert einfach die Pakete, die in der Datei package.json aufgeführt sind. Wir benötigen den Ordner „Node Modules“ nicht wirklich , wenn wir dieses Projekt an einen anderen Ort schicken, wir benötigen nur die Datei package.json. Ich werde die Knotenmodule entfernen , wenn sie auftauchen. Wir wollen nicht, dass Knotenmodule in Git durchkommen. Jetzt füge ich meine Startdateien hinzu. Ich werde eine index.html erstellen. Hier werde ich den Boilerplate-Code verwenden , den ich zu Boilerplate-Code verwenden , den ich Beginn des Kurses in der Vorschau gesehen habe, erstelle hier einfach ein HTML5-Boilerplate-Dokument. Ich werde die Tabulatortaste wechseln , bis zwischen diesen beiden Titel-Tags ein Dokument erscheint. Ich nenne das, wie ich will. Nehmen wir an, dies ist eine To-Do-App oder meine erste Website oder etwas Ähnliches. Sie können den Titel hier aktualisieren. Wenn du erneut tippst, gelangst du in die Körpermarke. Dann erstelle ich einen Ordner für CSS. Erstellen Sie in diesem Ordner hier eine Datei styles.CSS. Dann erstelle ich einen JavaScript-Ordner. Im JavaScript-Ordner erstelle ich eine Main- oder App oder index.js. Das ist nicht wirklich wichtig. Ich nenne es in diesem Fall einfach Main. Dann müssen wir diese beiden Dateien natürlich mit unserer HTML-Datei verknüpfen . Hier werde ich ein Rel Stylsheet verlinken. Danach füge ich href ein und verlinke auf den Stil, der jetzt im CSS-Ordner verschachtelt ist . Ich werde sicherstellen, dass ich das dem Pfad hinzufüge. Dann füge ich in unser Body-Tag ein Skript-Tag und ein SRC-Attribut ein. Hier können Sie sehen, dass wir den Pfad zur Datei main.js durchgehen können . Jetzt, wo wir alle unsere Bausteine haben, das CSS, das JavaScript und das HTML, werde ich git add ausführen. um alles zu unserem ersten Git-Commit hinzuzufügen, alles, was außer Knotenmodulen ist, aber wir haben noch keine Knotenmodule. Ich werde hier einchecken. Dies sind alle unsere schrittweisen Änderungen. Wir können entweder unsere Commit-Nachricht schreiben und dann hier auf Commit klicken, oder wir können das in der Befehlszeile tun, Git commit -m für die Nachricht, und ich nenne diesen ersten Commit. Nun, das ist alles erledigt. Wir müssen nur ein Git-Repository erstellen. Aber zuerst möchte ich tatsächlich einige Inhalte auf die Seite stellen. Wahrscheinlich hätte ich das tun sollen, bevor ich mich verpflichtet habe. Aber sagen wir einfach, wir wollen eine H1 mit meiner ersten Website. Klicken Sie darauf auf Speichern. Sie können hier in unserem Quellcodeverwaltungsbereich nachsehen, welche Änderungen wir vorgenommen haben. Das ist während der Entwicklung sehr praktisch. Ich kann es nur empfehlen, wenn Sie sich wohl fühlen, Git zu verwenden. Aber natürlich haben wir in diesem Kurs nicht über Git gesprochen. Wenn Sie es nur verwenden möchten, um Ihre Website online zu stellen, wie ich es Ihnen hier zeige, dann können Sie es einfach dafür verwenden. Da gibt es kein Problem. Ich öffne hier ein Fenster für GitHub, und dann können wir uns für ein GitHub-Konto anmelden und unser Remote-Repository erstellen Auf diese Weise werden wir unsere Website im Internet veröffentlichen. Ich werde nicht alle Schritte ausführen , um ein GitHub-Konto zu erstellen. Ich habe bereits ein GitHub-Konto. Es ist ziemlich üblich bei Entwicklern, so ziemlich jeder Entwickler hat ein GitHub-Konto, es ist nur ein Ort, um Code online zu speichern. Sobald du dein Konto eingerichtet hast, kannst du einfach auf GitHub.com slash new gehen , um ein neues Repository zu erstellen. Ich nenne das meine erste Website, sagen wir mal, und ich werde sie veröffentlichen, weil wir das im Internet veröffentlichen werden . Wir müssen hier nichts davon hinzufügen, da wir es bereits zu unserem Projekt hinzugefügt haben. Ich klicke auf Repository erstellen und hier kannst du sehen, dass wir unser öffentliches Repository hier haben. Ich muss nur diesen Teil hier abrufen, wodurch der Remote-Origin zu unserem lokalen Projekt hinzugefügt wird. Ich kopiere den Befehl. Sie können es auch hier unter der Überschrift Ein vorhandenes Repository für die Befehlszeile übertragen sehen der Überschrift Ein vorhandenes . Dann gehe ich bis hier durch. Ich werde diesen entfernten Ursprung hinzufügen. Drücken Sie die Eingabetaste. Wenn es keine Fehler gibt, hätte es funktionieren müssen. Ich übernehme dann diese Überschrift, was ich beim letzten Mal nicht gemacht habe. Ich werde es diesmal über Visual Studio Code machen. Ich habe ein Überschrift-Tag hinzugefügt. Ich sage nur, ich habe eine Überschrift hinzugefügt. Ich klicke mit der rechten Maustaste und klicke auf Stage Change. Dann wird es in der Phase der Veränderungen sein. Ich klicke auf Commit und dann kann ich auf diese Schaltfläche für Publish Branch klicken. Ich klicke auf Veröffentlichen, und jetzt haben wir das auf unseren entfernten Ursprung verschoben . Hier siehst du meine erste Website. Hier ist nichts, aber wenn ich jetzt aktualisiere, können Sie sehen, dass sich unser Website-Code jetzt auf GitHub befindet. Um daraus eine Website zu machen, müssen wir nur GitHub Pages aktivieren. Ich gehe hier zum Tab Einstellungen. Dann gehe ich zu den Seiten unter Code und Automatisierung. Dann klicke ich auf „Deploy from a branch“ und wähle dann den Zweig aus, für den wir nur einen haben, nämlich den Master-Branch. Ich klicke darauf auf „Speichern“, und jetzt sollten wir in der Lage sein zu dieser Adresse zu gehen, die dein Benutzername.github.io ist. Öffne das in einem neuen Tab und dann füge ich Schrägstrich gefolgt vom Namen des Repositorys, meiner ersten Website, ein. Sie können sehen, dass es dort noch keine Seite gibt. Es wird wahrscheinlich immer noch geladen und wir können den Ladestatus überprüfen , indem wir hier auf Aktionen klicken. Wie Sie sehen können, entsteht hier ein Workflow. Es war erst vor einer Sekunde gelb, aber jetzt ist es gelaufen. Wenn wir hier etwas aktualisieren, sehen Sie meine erste Website. Der Prozess der Bereitstellung unserer Website, sobald wir eine Änderung vorgenommen haben , besteht einfach darin, das zu tun was wir gerade getan haben, als wir diese Überschrift hinzugefügt haben. Wir schaffen einfach die Veränderung. Wir haben die Änderung hier in unserer Befehlszeile inszeniert , indem wir git add ausgeführt haben. Sobald es hinzugefügt ist, führen wir git commit mit dem Bindestrich m für die Nachricht aus, oder wir verwenden die Benutzeroberfläche Visual Studio Code und dann klicken wir entweder auf diese Schaltfläche, klicken auf Veröffentlichen, oder wir können den Befehl git push origin ausführen, und dann sollte das funktionieren, genauer gesagt git push origin master. Lassen Sie uns jetzt ein Paket hinzufügen, um Ihnen zu zeigen , dass ich in Aktion hier Clear ausführen werde und den gleichen Befehl ausführen werde, den wir zuvor hatten , um Tailwind als Dev-Abhängigkeit zu installieren. NPM installiere Dash Capital D, Tailwindcss. Drücken Sie „Enter“ darauf. Wie Sie sehen können, wurde jetzt eine Paket-Dash-Datei loc.json hinzugefügt , die die genauen Versionen aller Abhängigkeiten aufzeichnet . Darüber müssen Sie sich keine Sorgen machen. Das wird alles automatisch für uns generiert, aber wir wollen es übernehmen. Sie können hier sehen, dass zu unserer package.json jetzt eine Zeile oder drei Zeilen für Dev-Abhängigkeiten hinzugefügt wurden und wir Tailwind hinzugefügt haben. Dann haben wir auch diesen Node Module-Ordner, aber er ist grau, was darauf hinweist, dass er nicht an Git übergeben wird und daher nicht zu GitHub geht. Aber wie gesagt, Github füllt diesen Ordner automatisch auf dem Server, sofern es weiß, welche Abhängigkeiten hier installiert werden dem Server, sofern es müssen Wir müssen also nur die Datei package.json pushen . Ich kopiere und füge die Datei tailwind.config.js, die wir zuvor hatten, ein und dann kopiere ich und füge sie in die von uns erstellten Skripts ein. Genau hier Tailwind Colon Build und Tailwind Colon Run, und wie Sie sehen können, sind unsere Pfade hier aktualisiert. Wir werden nach einer Datei tailwind.css suchen, die wir verarbeiten können und die zu styles.css kompiliert wird, was die Datei ist, die wir hier haben. Lass uns das machen. Wir richten hier eine neue Datei ein, nennen sie tailwind.css und schnappen uns die Basisprogramme von Tailwind. Dann waren die anderen Komponenten von Tailwind, was meiner Meinung nach in der Mitte liegt. Wir klicken darauf auf „Speichern“ und dann starten wir npm und führen Tailwind build aus. Wir werden es einmal ausführen , wodurch jetzt unsere styles.css vor dem Code von Tailwind aktualisiert wird , basierend auf dem, was wir hier geschrieben haben und was wir in unserer Konfigurationsdatei enthalten haben. Wenn wir dann auf Go Live klicken, um eine lokale Version davon zu starten, sollten wir feststellen, dass unsere Standard-HTML-Stile auseinanderfallen und durch Tailwind ersetzt werden , was nicht passiert ist. Gehen wir einfach hier in unsere index.html und überprüfen , ob unser Tag korrekt ist. Ich habe ein E there verpasst, Stylesheet. Wenn ich bei dieser Aktualisierung hier auf Speichern klicke, kannst du sehen, dass das Standardstyling für H1 jetzt entfernt wurde , weil wir jetzt Tailwind verwenden und du kannst hier sehen all das Tailwind-Zeug durchkommt. Was wir tun werden, ist, das Ganze über Tailwind noch einmal etwas zu stylen, genau wie zuvor, Text 5xl, Schrift, fett und geben ihm einen unteren Rand von ungefähr acht Pixeln. Ich klicke darauf auf „Speichern“. Es wirkt sich bereits auf das Element genau dort aus und so haben wir jetzt unser Projekt mit Tailwind installiert. Lassen Sie uns nun den Bereitstellungsprozess erneut durchführen. Wir haben hier einige Änderungen vorgenommen. Sie können hier sehen, dass wir das CSS-Tag dort repariert haben. Wir haben einige Tailwind-Hilfsklassen hinzugefügt. package/loc.json wurde hinzugefügt. Wir haben unsere package.json-Datei aktualisiert. Wir haben die Tailwind-Konfigurationsdatei und dann das ganze CSS-Zeug hinzugefügt . Wir können uns das alles schnappen und mit der rechten Maustaste auf „Stage Changes“ klicken, oder auf die andere Art, die unabhängig vom verwendeten Code-Editor ist , wir können einfach git add dot ausführen , um sie alle als Stufenänderungen hinzuzufügen. Da hast du es. Es wird hier aktualisiert, und dann können wir einen Git-Commit mit der Nachricht schreiben , dass Tailwind hinzugefügt wurde, der jetzt bestätigt ist. Wie Sie hier sehen können, können wir hier klicken, um das mit GitHub zu synchronisieren. Wenn wir nun hier wechseln, ist das unsere lokale Version. Das ist eine weitere lokale Version. Ich schließe das und dann gehen wir hierher. Sie können in unseren Workflows sehen, dass gerade unsere App bereitgestellt wird, also warten wir einfach, bis das abgeschlossen ist. Dies wird jedes Mal automatisch geschehen , wenn wir zu GitHub wechseln, da wir die Seiteneinstellung in den Einstellungen hier eingerichtet haben , und wie Sie sehen können, ist sie fast da. Da haben wir es. Nach einer Minute ist es jetzt fertig und wenn wir zu der Adresse zurückkehren, an der unsere Website gehostet wird, hier aktualisieren, dann kommen die Änderungen zum Vorschein, die wir gerade in unserer lokalen Version vorgenommen haben . Wie ich bereits erwähnt habe, wenn wir hier rübergehen und hier in den Code gehen, können Sie sehen, dass sich der Node Module-Ordner nicht in unserem GitHub befindet . Das liegt daran, dass GitHub bei der Bereitstellung unserer Website automatisch die richtigen Knotenmodule auf der Grundlage unserer package.json-Datei hier installiert , was dem Server mitteilt, dass wir ihn bereitstellen, um diesen Entwickler zu installieren Abhängigkeit und alle Entwicklungsabhängigkeiten, die auf dieser Abhängigkeit beruhen. Das ist ein Beispiel für einen Arbeitsablauf, den ihr durchgehen könnt, um euer Klassenprojekt oder zukünftige Projekte zu erstellen. Erstelle ein Git-Repository, verwandle dein Projekt in ein NPM-Projekt, erstelle deine Dateien, erledige deine Arbeit, pushe zu GitHub und dann kannst du dein Ergebnis hier sehen. Wenn du fertig bist und es mit der Klasse teilen möchtest, kannst du das im Abschnitt Klassenprojekte tun. Das war's. Im nächsten Video schließen wir den Kurs ab und ich zeige Ihnen, wie Sie sich eingehender mit einigen der Konzepte befassen können eingehender mit einigen der Konzepte befassen , über die wir im heutigen Kurs gesprochen haben. Stellen Sie sicher, dass Sie auf das nächste Video klicken und lassen Sie uns diesen Kurs abschließen. 13. Schlussbemerkung: Herzlichen Glückwunsch, Sie haben das Ende dieses Kurses über moderne Frontend-Webentwicklung erreicht . Ich weiß, dass wir in diesem Kurs eine Reihe von Tools und Sprachen behandelt haben , aber lassen Sie mich Ihnen versichern, dass Sie kein Experte für all diese Tools sein müssen , um mit der Frontend-Webentwicklung zu beginnen. Ziel dieses Kurses war es, einen Überblick über die Tools und Sprachen zu geben, die zur Erstellung von Frontend-Erlebnissen im Web verwendet werden . In diesem kurzen Kurs haben wir eine vollständige Palette von Frontend-Webentwicklungskonzepten behandelt , deren richtiges Erlernen viele weitere Stunden des Lernens und Übens erfordern würde . Ich hoffe, dass Sie durch diesen Kurs einen Überblick darüber erhalten haben, wo die einzelnen Technologien in den Frontend-Webentwicklungsprozess passen . Wenn du tiefer eintauchen möchtest, kannst du dir mein gesamtes Kursangebot auf christhefreelancer.com/courses ansehen. Wenn Sie Fragen oder Bedenken zu dem haben, was wir im heutigen Kurs behandelt haben, hinterlassen Sie wie immer Bedenken zu dem haben, was wir im heutigen Kurs behandelt haben, einen Kommentar im Diskussionsfeld unten. Ich werde mein Bestes tun, um Sie in die richtige Richtung zu weisen. Wie immer danke fürs Zuschauen und ich hoffe, wir sehen uns einigen meiner anderen Kurse wieder.