‫Kursleiter: Beginnen wir
‫nun damit, unsere Basisvorlage wirklich zu erstellen.
‫Also die Vorlage, auf der später
‫alle anderen Vorlagen basieren.
‫Im Grunde werden wir also eine normale HTML-Datei,
‫die sich in den Starterdateien befindet, in eine Pug-Vorlage konvertieren.
‫Im Grunde beginnen wir also
‫mit der Erstellung des Layouts dieser Seite.
‫Also diese Kopfzeile hier und auch die Fußzeile.
‫Okay, nicht der Inhalt natürlich,
‫denn das bauen wir dann etwas später
‫dynamischer auf, okay.
‫Aber wir lassen alles
‫bereit, damit wir dann all diese echten Inhalte in
‫diese allgemeine Basisvorlage einfügen können.
‫Also, lass uns das jetzt tun.
‫Und fangen wir damit an, all
‫diese Inhalte, die wir hier hatten, loszuwerden.
‫Dies war also wirklich nur,
‫um Ihnen die verschiedenen Funktionen von Pug zu zeigen.
‫Und jetzt öffnen wir diese Übersicht. html-Datei, sodass wir
‫sie hier grundsätzlich in Pug konvertieren können.
‫Okay, das war die ursprüngliche HTML-Datei, die ich
‫erstellt habe, um die Übersichtsseite zu entwerfen, die wir
‫gerade dynamisch gerendert gesehen haben.
‫Okay, das haben wir also im Kopf
‫und lasst uns eigentlich diesen ganzen Code kopieren, damit wir
‫dann umwandeln können, was hier fehlt.
‫Okay, der Inhalt unseres Titels ist also dieser, also
‫kopieren wir ihn, dann entfernen
‫wir ihn, und das ist der Inhalt der Hauptseite, richtig.
‫Dann haben wir schon das Favicon und auch den Style.
‫Was uns also fehlt, ist im
‫Grunde dieses Zeug hier
‫für die Reaktion der Webentwicklung und auch dieser Google-Font-Link, okay.
‫Beginnen wir
‫also damit, ein Stylesheet zu
‫installieren, und dann greifen wir einfach diese
‫Referenz und ersetzen sie durch einfache Anführungszeichen.
‫Okay, dann möchte ich diese beiden auch definieren, also schneiden
‫wir sie hier ab und
‫wandeln wir einfach alles um, was wir hier haben.
‫Gut.
‫Oh und auch die einfachen Anführungszeichen.
‫Okay, lasst uns das hier tatsächlich ans
‫Ende setzen, und das ist unser Hut für unsere Vorlage.
‫Schauen wir uns als nächstes die Kopfzeile an.
‫Okay, im Grunde haben wir also dieses ganze Element
‫hier, mit nur einer Kopfzeile, also dem dunkelgrauen Balken, den Sie dort
‫oben auf der Seite gesehen haben.
‫Also lasst uns
‫das kopieren und gleich hier platzieren.
‫Das ist also eine Menge
‫Code, und Sie werden sehen, wie wenig Code es später tatsächlich sein
‫wird, wenn wir dies in Pug übersetzen.
‫Okay, und hier lassen Sie uns jetzt einen
‫sichtbaren Kommentar in unseren HTML-Code einfügen, der HEADER sagt.
‫Okay, und das ist eigentlich ohne Bindestrich.
‫Wenn ich also im VS-Code auf die Kommentarverknüpfung
‫drücke, wird automatisch ein Pug-Kommentar erstellt.
‫Aber hier möchte ich wirklich nur einen
‫Kommentar, der auch in der HTML-Ausgabe verfügbar ist.
‫Wie auch immer, erstellen wir jetzt das Header-Element und sehen
‫wir uns an, was wir hier haben.
‫Wir haben also header mit der Klasse von header.
‫Und alles, was wir tun müssen, um
‫eine Klasse anzugeben, ist DOT und dann der Klassenname.
‫Also nochmal Kopfzeile.
‫Dann haben wir dort eine Elementnavigation.
‫Und so, Einrückung und dann nav. nav, was hier wieder der Klassenname
‫ist, und dann haben wir
‫auch noch einen anderen Klassennamen und damit
‫einen weiteren Punkt.
‫Und das ist es.
‫Also Navi-Touren.
‫Wenn Sie also ein wenig mit der CSS-Architektur vertraut sind,
‫sehen Sie vielleicht, dass ich die BEM-Architektur verwende.
‫Also, nav ist der Block
‫und dann ist diese Tour hier ein Modifikator.
‫Und hier bedeutet dieser Unterstrich Unterstrich, dass
‫dies ein Block oder eigentlich
‫ein Element ist.
‫Also Block, Element und Modifikator.
‫Okay, das ist nicht wirklich
‫wichtig, aber ich wollte es nur erwähnen.
‫Wie auch immer, innerhalb der Navigation
‫haben wir ein Link-Element.
‫Also, a, mit der Klasse von nav__el.
‫Dann haben wir hier dieses href-Attribut, und denken Sie
‫daran, dass wir Klammern und dann href
‫verwenden
‫und es auf nichts setzen.
‫Das ist also im Grunde das, was dieser Hash hier bedeutet.
‫Und dann einfach der Inhalt,
‫also alle Touren.
‫Als nächstes haben wir dieses Formular hier,
‫aber wir werden es an dieser
‫Stelle nicht implementieren.
‫Also lass es uns loswerden.
‫Alles klar und das ist unsere Navigation.
‫Dieser Code hier
‫ist also im Wesentlichen äquivalent dazu.
‫Als nächstes haben wir dieses Header-Logo.
‫Also, neue Zeile, aber eine Ebene zurück, in
‫der Einrückung, damit sie auf der gleichen Ebene
‫wie die Navigation ist.
‫Also, genau wie hier, richtig.
‫Wenn es jetzt
‫ein div ist, müssen wir nicht einmal div sagen. Headerlogo, in diesem Fall.
‫Wenn es sich
‫also um ein div handelt, das eine Art Standardblockelement in
‫HTML ist, brauchen wir nur den
‫Punkt und dann wird automatisch ein div-Element erstellt.
‫Da drin haben wir dann dieses
‫Bild, und das braucht natürlich ein paar Attribute, das
‫ist zuerst die Quelle.
‫Also Bild, Logo, weiß. png, und dann
‫auch der Alternativtext, okay.
‫Als nächstes haben wir diese andere Navigation hier, und damit
‫wieder auf der gleichen Ebene
‫wie die erste Navigation und dieses Div.
‫Also eine Ebene zurück in
‫die Einrückung und ein neues nav-Element mit der
‫Klasse nav und dem Klassennav-Benutzer erstellen.
‫Dann gibt es dort einen Link,
‫der diesem sehr
‫ähnlich ist, also kopieren wir ihn einfach, um uns etwas Zeit zu sparen.
‫Und dann heißt es hier: Meine Buchungen.
‫Dann noch eins, und eigentlich kopieren wir es einfach noch
‫einmal mit dem Unterschied, dass es
‫diesen Inhalt nicht hat, sondern etwas mehr Inhalt enthält.
‫Also das.
‫Also, wieder ganz einfach, Bild, mit
‫der Quelle, . jpg.
‫Und es hat auch einen Klassennamen,
‫also lassen Sie uns hier mit dem Punkt bearbeiten.
‫Also, Navi, Benutzerbild.
‫Und dann einfach eine Spanne, die Jonas sagt.
‫Und wie
‫Sie sehen können, wird dies tatsächlich der dynamische
‫Teil dieses Headers sein.
‫Und so wird all das hier eigentlich am
‫Anfang zu einem Punkt.
‫Okay, aber egal, lassen Sie uns diesen Teil jetzt hier fertig codieren.
‫Also im Grunde diese
‫beiden Buttons, also der Login-Button und der Sign-Up-Button.
‫Sie haben also natürlich nicht
‫gleichzeitig den Login- und den Anmelde-Button,
‫wenn Sie diese Benutzerführung hier haben.
‫Also meine Buchungen und dann der Name des Benutzers, okay.
‫Aber noch einmal, lassen Sie uns das erst einmal hier
‫setzen und dann auskommentieren, was wir nicht brauchen.
‫Also, button, nav element und auch nav element und
‫dann der Modifikator cta für die Anmeldung.
‫Und eigentlich gibt es auch davor eine zum Login, richtig.
‫Das ist also dieser.
‫Okay und das wars dann eigentlich.
‫Das ist
‫also der Header, und Sie
‫sehen, dass dieser Code hier all dem entspricht, was wir
‫hier haben, was viel verwirrender aussieht, wenn
‫Sie mich zumindest fragen.
‫Also, lösch das, und wie gesagt,
‫diese Benutzerführung hier, dieser Teil
‫wird nur verfügbar sein, wenn
‫jemand eingeloggt ist.
‫Lassen Sie uns das alles jetzt komplett auskommentieren.
‫In Ordnung, als nächstes haben wir den Inhalt und fügen wir hier und
‫in unserem HTML-Code einen
‫weiteren Kommentar hinzu, eigentlich alles,
‫was wir jetzt hinzufügen werden,
‫ist dieser Abschnitt hier mit der Klasse der Übersicht.
‫Denn dort haben wir
‫all diese Inhaltskarten,
‫die wir vorerst nicht dort aufnehmen werden.
‫Also noch einmal, was
‫wir jetzt tun, ist sozusagen nur ein Skelett.
‫In Ordnung, also Abschnitt. Überblick.
‫Überblick.
‫Und jetzt setzen wir hier einfach ein
‫h1 mit dem Namen der Tour, die als Variable hereinkommt.
‫Okay, und natürlich muss dieser
‫Abschnitt hier auf der gleichen Ebene wie dieser Header sein, großartig.
‫Jetzt fehlt uns also nur noch die Fußzeile
‫am Ende der Seite.
‫Also lass uns dorthin gehen und los gehts.
‫Lass uns das alles packen.
‫Und dies sollte eigentlich ein Fußzeilenelement sein, nicht
‫nur ein normales div.
‫Also ein footer-Element mit der Klasse des footer, dann ein
‫div mit der Klasse des footer-Logos,
‫und wieder muss ich das div-Element nicht einmal angeben.
‫Dann haben wir hier ein Bild. png und ich
‫hoffe, dass Sie das Wissen darüber behalten, wie all dies funktioniert, ein bisschen
‫besser, wenn Sie all dies selbst, im Grunde von Hand, eingeben.
‫Okay, das ist alt und jetzt diese
‫Fußzeilennavigation, also eine ungeordnete
‫Liste, und jetzt haben wir ein
‫paar Listenelementelemente.
‫Listen Sie also ein Element auf, und dann gibt es in
‫jedem von ihnen einen Link.
‫Also, a mit dem href von nirgendwo im Grunde.
‫Und dann Über uns.
‫Hier in dieser Situation ist es nicht
‫wirklich ideal, diese
‫zusätzliche Zeile nur zur Angabe dieses li zu benötigen.
‫Was wir hier also
‫tun können, ist einen Doppelpunkt wie
‫diesen zu verwenden und dann im Grunde alles in dieselbe Zeile zu setzen.
‫Dies funktioniert dann immer noch so, als ob es eine
‫neue Zeile mit einer Einrückung gäbe, aber
‫im Grunde erlaubt es uns, alles in derselben Zeile zu tun.
‫Okay, aus irgendeinem Grund funktioniert die
‫Syntaxhervorhebung nicht mehr,
‫aber das ist nicht so wichtig.
‫Also Bewerbungen herunterladen, Wegweiser
‫werden, Karrieren.
‫Und das ist es tatsächlich.
‫Als nächstes haben wir diese
‫Fußzeile, das Copyright, und hier haben wir nur einen Haufen Text.
‫Also hier das Copyright-Symbol
‫angeben, und das ist von Jonas Schmedtmann.
‫Also, das bin ich und wie in allen meinen anderen Kursen
‫möchte ich Sie wissen lassen, dass Sie dieses Projekt grundsätzlich
‫für sich selbst nutzen können.
‫Also im Grunde, um es in Ihr Portfolio aufzunehmen
‫oder jedem zu zeigen, dass Sie dieses Projekt
‫in meinem Kurs gebaut haben.
‫Was Sie jetzt nicht tun können, ist Ihren eigenen Kurs basierend auf
‫diesem Projekt zu erstellen.
‫Und es ist traurig, dass ich das überhaupt sagen muss,
‫aber natürlich hat es Leute gegeben, die
‫mein Projekt genutzt haben, im Grunde um einige kostenlose Kurse
‫auf YouTube zu stellen, wo sie meine Projekte nacheinander kopiert haben.
‫Okay, lassen Sie mich das hier einfach aufschreiben.
‫Für Ihre eigenen Zwecke, außer natürlich,
‫Ihre eigenen Kurse oder Tutorials zu produzieren.
‫Okay und das ist es tatsächlich.
‫Alles klar, das
‫ist die Übersetzung des Skeletts, das
‫wir hier haben, natürlich abgesehen vom Inhalt.
‫Okay, das brauchen wir nicht mehr.
‫Und zum Schluss werfen wir einen kurzen Blick darauf
‫und hier geht es zu unseren Inhalten.
‫Das hier sieht jetzt etwas fehl am Platz aus, weil
‫dieser Copyright-Text hier so lang ist.
‫Also diese Fußzeilennavigation im Grunde.
‫Aber da es sich um einen Flex-Container handelt,
‫sollten wir das mit
‫gerechtfertigtem Inhalt beheben können, Flex-End, nicht dieser.
‫Okay, und machen Sie sich keine Sorgen, wenn Sie mit
‫CSS oder sogar Flexbox nicht vertraut sind. Dies dient nur
‫dazu, das kleine Problem,
‫das wir hier hatten, einfach visuell zu beheben.
‫Suchen wir also hier nach der Fußzeile.
‫Hier sind wir.
‫Beheben Sie das hier, und
‫wenn wir jetzt
‫neu laden, ja, dann sind wir gut, perfekt.