Willkommen zurück.
Wir haben also die Grundlagen von Flask erlernt, wir verstehen, was Server tun und wir wissen auch, was Browser
tun.
Aber seien wir hier ehrlich.
Das ist irgendwie langweilig.
Ich meine, das ist nicht beeindruckend.
Wenn Sie das einem möglichen Arbeitgeber zeigen, wird er Sie wie einen Verrückten ansehen.
Lassen Sie uns also ein gut aussehendes Portfolio aufbauen, nur basierend auf dem, was wir bisher gelernt haben.
Jetzt habe ich ein kleines Geschenk für dich.
Das liegt daran, dass Sie kein eigenes HTML und JavaScript schreiben müssen, da dies wiederum kein
Webentwicklungskurs ist.
Und zum Glück für uns, wenn Sie Google und online nach kostenlosen Vorlagen oder HTML-freien Vorlagen
suchen, finden Sie einige wirklich gut aussehende Websites, die Sie einfach kostenlos verwenden können.
Schauen wir uns zum Beispiel das Universum hier drüben an und ich werde auf diese Ressource verlinken, damit Sie sich auch selbst einen
Überblick verschaffen können, wenn ich es in der Vorschau sehe.
Überprüfen Sie, ob Sie eine nette kleine Website oder Portfolio-Seite haben, die Sie einfach verwenden können.
Wie cool ist das, und es ist eigentlich schon Tablet- und Handy-freundlich, also ist alles bereits für Sie
vorgefertigt.
Das ist ziemlich cool, oder?
Wie können wir das also nutzen?
Nun, laden wir es einfach herunter und übrigens, während Sie weitermachen, können Sie tatsächlich jedes
davon verwenden.
Aber für den Moment verwenden wir einfach das Universum eins, nur weil hier ein kleiner Astronaut ist, sieht es ziemlich
cool aus.
Laden wir das einfach herunter und sehen, was passiert.
Gut.
Ich bekomme eine kleine Frage, die besagt, wie möchten wir die Vorlage herunterladen?
In unserem Fall möchten wir HTML auswählen.
Und los gehts, wir bekommen einen netten kleinen Zeph-Ordner und jetzt haben wir diesen heruntergeladen, also lasst uns diesen
öffnen.
Und oh, Junge, das sind eine Menge Dateien und Ordner.
Also, was sollten wir von hier aus holen?
Nun, es gibt ein paar Dinge.
Erstens, dies ist die Beispielseite, die wir eigentlich nicht brauchen, also verschieben wir sie einfach in den Papierkorb.
Als nächstes haben wir Vermögenswerte.
Dies sind, nun ja, verschiedene Ressourcen, damit unsere Seite funktioniert, wie zum Beispiel die Astronautenseite.
Also behalten wir das bei.
Und dann haben wir unsere HTML-Seiten.
Was wir unbedingt brauchen.
Und dann sieht es so aus, als hätten wir einige JavaScript- und CSS-Dateien.
Jetzt gibt es hier eine Punktverwaltung, die wir eine komprimierte Datei nennen, eine komprimierte G-komprimierte Datei.
Dies ist also nur eine Möglichkeit für den Server, eine Datei oder die JavaScript-Datei zu senden, die, wie Sie
sehen, einhundertachtunddreißig Kilobyte groß ist, jedoch in komprimierter Form, also vierundvierzig Kilobyte.
Auf diese Weise senden wir weniger Daten an das Frontend.
Und dann haben wir auch noch so etwas wie map, was uns beim Debuggen tatsächlich hilft.
Aber in unserem Fall brauchen wir uns darum vorerst keine Sorgen zu machen.
Lassen Sie uns also einfach alle Gipped- und Map-Dateien entfernen.
Also verschieben wir diese in den Papierkorb, sodass wir nur eine Datei und eine JavaScript-Datei haben und alle
anderen HTML-Dateien für unsere verschiedenen Seiten sind.
Was wir jetzt tun werden, ist, dies zu kopieren und in unseren Projektordner zu verschieben.
Erinnerst du dich an diesen Ordner hier?
Idealerweise verschieben wir die ASML-Dateien in die Vorlagen und die statischen Dateien.
Das sind die CSIS- und JavaScript-Dateien und vielleicht die Assets hier.
Das sind also die Bilder hier.
Also machen wir das.
Ich habe meinen Webserver hier.
Ich werde zuerst einfach kopieren und einfügen, was wir gerade kopiert haben.
Und verschieben wir alle unsere HTML-Dateien.
In unsere Vorlagen.
Und wissen Sie was, entfernen wir auch unsere bestehenden Vorlagen, da wir sie nicht mehr brauchen,
haben wir das hübsche HTML-Fana.
Und dann haben wir all dies, wir haben ein neues Index-HMO, das viel schöner sein wird als unsere alte
Website, also wollen wir das verwenden.
Lassen Sie uns das alles in Vorlagen verschieben.
Und dann machen wir die Jobs und erfolgreich sowie den Assets-Ordner in den statischen.
Fantastisch.
Nun, da wir das eingerichtet haben, gehen wir zurück zu unserem Projekt und sehen uns das an.
Wir haben viel mehr E-Mails, die wir noch nicht hatten, aber zum Glück ist sie bereits für uns erstellt.
Als letzte Einrichtung müssen wir die Links zwischen HTML, CSS, JavaScript und allen Asset-Dateien
anpassen, da wir unsere Dateien verschoben haben.
Wenn wir also scrollen, gehen wir zu indiziertem HTML.
Wir sehen, dass wir in den Assets Vatikan nach dem Vatikan suchen, aber da sich dieser in einem statischen Ordner befindet,
müssen wir hier statische hinzufügen.
Lassen Sie uns herausfinden, wo wir die Assets hier sonst noch verwenden.
In Ordnung, es sieht also so aus, als würden wir das ein bisschen größer machen.
So sieht es hier für unser Hintergrundbild aus.
Wir suchen noch einmal nach dem Space-Image, aber das ist, wie wir wissen, im statischen Ordner und
mal sehen, wo wir noch hier haben, sowie statisches Bild.
Bleiben wir statisch.
Alles ist gut.
Jetzt haben wir den statischen Ordner und müssen sicherstellen, dass wir vor dem Punkt einen Schrägstrich hinzufügen.
Punkt bedeutet nur aktuelles Verzeichnis und dann in den statischen Ordner schauen.
Gehen wir also zurück, stellen Sie sicher, dass wir das für alles tun.
Na, bitte.
Und los gehts.
Lassen Sie uns das jetzt speichern, und ich denke, wir sind noch nicht ganz fertig, aber für den Moment gehen
wir zu unserem Server DCPI.
Und für unsere Heimroute entfernen wir das, was wir zuvor hatten.
Und nennen wir es einfach meine Home-Funktion, die keine Parameter benötigt und stattdessen für uns zurückkehrt.
Unsere Index-E-Mail ohne Pastan-Parameter.
Also sparen wir uns zurück zu unserer Seite.
Oder meine Website und sehen Sie, was wir erhalten, wenn wir aktualisieren.
Okay, das ist eine hübsche, ziemlich hässliche Website, aber es sieht so aus, als würden wir zumindest etwas anzeigen, aber wir bemerken
sofort, dass, hm, es sieht so aus, als ob die Anwendung nicht erfolgreich war.
Es sieht so aus, als hätten wir einige E-Mails, aber die Links funktionieren auch nicht.
Dies liegt wiederum daran, dass wir die Links zwischen den Dateien aktualisieren müssen.
Was wir also tun werden, ist zurück zum Indexstudium und im Head-Tag sehen wir, dass wir unser Stylesheet als unsere
Zugriffsdatei haben.
Aber auch hier müssen wir dies aktualisieren, um es in der Statik zu haben.
Ordner.
Neben der JavaScript-Datei, die, wenn wir ganz nach unten scrollen, wir hier die Datei haben,
die sich wieder im statischen Ordner befindet.
Alles klar, sparen wir.
Und geh zurück und schau, ob das die Dinge besser macht.
Und sieh dir das an, das ist ziemlich cool.
Wohlgemerkt, das sieht ein wenig zu groß aus, weil ich die Größe meiner Website mit den Befehlen Plus und Minus
vergrößere, nur damit wir besser sehen können.
Aber das ist ziemlich toll.
Wenn ich jetzt auf Sagen wir, es funktioniert, klicke, bekomme ich Arbeitsstudie HTML existiert nicht.
Wie können wir das also beheben?
Wir wissen bereits, wie das geht, oder?
Alles, was wir tun müssen, ist, diese verschiedenen Routen so zu aktualisieren, dass sie auf die entsprechende Vorlage zeigen.
Im nächsten Video zeige ich euch jetzt, wie das geht.
Aber ich möchte, dass Sie versuchen, dies selbst zu tun, denn wir haben dies inzwischen gelernt.
Versuchen Sie also, die Website so zu gestalten, wie wir sie hatten.
Hier bei unseren Mash-Up-Vorlagen und wir sehen uns im nächsten Video.