1 00:00:01,090 --> 00:00:02,290 ‫Kursleiter: Beginnen wir 2 00:00:02,290 --> 00:00:04,750 ‫nun damit, unsere Basisvorlage wirklich zu erstellen. 3 00:00:04,750 --> 00:00:07,490 ‫Also die Vorlage, auf der später 4 00:00:07,490 --> 00:00:09,360 ‫alle anderen Vorlagen basieren. 5 00:00:09,360 --> 00:00:12,723 ‫Im Grunde werden wir also eine normale HTML-Datei, 6 00:00:12,723 --> 00:00:16,163 ‫die sich in den Starterdateien befindet, in eine Pug-Vorlage konvertieren. 7 00:00:17,840 --> 00:00:19,830 ‫Im Grunde beginnen wir also 8 00:00:19,830 --> 00:00:21,850 ‫mit der Erstellung des Layouts dieser Seite. 9 00:00:21,850 --> 00:00:26,450 ‫Also diese Kopfzeile hier und auch die Fußzeile. 10 00:00:26,450 --> 00:00:28,650 ‫Okay, nicht der Inhalt natürlich, 11 00:00:28,650 --> 00:00:31,710 ‫denn das bauen wir dann etwas später 12 00:00:31,710 --> 00:00:33,440 ‫dynamischer auf, okay. 13 00:00:33,440 --> 00:00:35,220 ‫Aber wir lassen alles 14 00:00:35,220 --> 00:00:38,920 ‫bereit, damit wir dann all diese echten Inhalte in 15 00:00:38,920 --> 00:00:41,053 ‫diese allgemeine Basisvorlage einfügen können. 16 00:00:43,030 --> 00:00:45,440 ‫Also, lass uns das jetzt tun. 17 00:00:45,440 --> 00:00:47,650 ‫Und fangen wir damit an, all 18 00:00:47,650 --> 00:00:50,090 ‫diese Inhalte, die wir hier hatten, loszuwerden. 19 00:00:50,090 --> 00:00:51,810 ‫Dies war also wirklich nur, 20 00:00:51,810 --> 00:00:54,550 ‫um Ihnen die verschiedenen Funktionen von Pug zu zeigen. 21 00:00:54,550 --> 00:00:58,070 ‫Und jetzt öffnen wir diese Übersicht. html-Datei, sodass wir 22 00:00:58,070 --> 00:01:01,463 ‫sie hier grundsätzlich in Pug konvertieren können. 23 00:01:02,420 --> 00:01:05,370 ‫Okay, das war die ursprüngliche HTML-Datei, die ich 24 00:01:05,370 --> 00:01:08,360 ‫erstellt habe, um die Übersichtsseite zu entwerfen, die wir 25 00:01:08,360 --> 00:01:10,610 ‫gerade dynamisch gerendert gesehen haben. 26 00:01:10,610 --> 00:01:13,810 ‫Okay, das haben wir also im Kopf 27 00:01:13,810 --> 00:01:17,950 ‫und lasst uns eigentlich diesen ganzen Code kopieren, damit wir 28 00:01:17,950 --> 00:01:21,053 ‫dann umwandeln können, was hier fehlt. 29 00:01:22,610 --> 00:01:26,573 ‫Okay, der Inhalt unseres Titels ist also dieser, also 30 00:01:27,420 --> 00:01:29,973 ‫kopieren wir ihn, dann entfernen 31 00:01:33,460 --> 00:01:37,980 ‫wir ihn, und das ist der Inhalt der Hauptseite, richtig. 32 00:01:37,980 --> 00:01:42,150 ‫Dann haben wir schon das Favicon und auch den Style. 33 00:01:42,150 --> 00:01:44,980 ‫Was uns also fehlt, ist im 34 00:01:44,980 --> 00:01:46,990 ‫Grunde dieses Zeug hier 35 00:01:46,990 --> 00:01:51,143 ‫für die Reaktion der Webentwicklung und auch dieser Google-Font-Link, okay. 36 00:01:52,210 --> 00:01:53,563 ‫Beginnen wir 37 00:01:58,280 --> 00:02:00,123 ‫also damit, ein Stylesheet zu 38 00:02:02,830 --> 00:02:05,610 ‫installieren, und dann greifen wir einfach diese 39 00:02:09,040 --> 00:02:11,803 ‫Referenz und ersetzen sie durch einfache Anführungszeichen. 40 00:02:13,970 --> 00:02:18,650 ‫Okay, dann möchte ich diese beiden auch definieren, also schneiden 41 00:02:18,650 --> 00:02:21,273 ‫wir sie hier ab und 42 00:02:23,890 --> 00:02:28,323 ‫wandeln wir einfach alles um, was wir hier haben. 43 00:02:40,099 --> 00:02:40,932 ‫Gut. 44 00:02:42,960 --> 00:02:44,473 ‫Oh und auch die einfachen Anführungszeichen. 45 00:02:50,470 --> 00:02:54,223 ‫Okay, lasst uns das hier tatsächlich ans 46 00:02:55,780 --> 00:03:00,730 ‫Ende setzen, und das ist unser Hut für unsere Vorlage. 47 00:03:00,730 --> 00:03:03,993 ‫Schauen wir uns als nächstes die Kopfzeile an. 48 00:03:05,640 --> 00:03:09,143 ‫Okay, im Grunde haben wir also dieses ganze Element 49 00:03:10,100 --> 00:03:14,600 ‫hier, mit nur einer Kopfzeile, also dem dunkelgrauen Balken, den Sie dort 50 00:03:14,600 --> 00:03:17,140 ‫oben auf der Seite gesehen haben. 51 00:03:17,140 --> 00:03:18,430 ‫Also lasst uns 52 00:03:20,500 --> 00:03:22,530 ‫das kopieren und gleich hier platzieren. 53 00:03:22,530 --> 00:03:24,180 ‫Das ist also eine Menge 54 00:03:24,180 --> 00:03:27,800 ‫Code, und Sie werden sehen, wie wenig Code es später tatsächlich sein 55 00:03:27,800 --> 00:03:29,920 ‫wird, wenn wir dies in Pug übersetzen. 56 00:03:29,920 --> 00:03:33,480 ‫Okay, und hier lassen Sie uns jetzt einen 57 00:03:33,480 --> 00:03:37,370 ‫sichtbaren Kommentar in unseren HTML-Code einfügen, der HEADER sagt. 58 00:03:37,370 --> 00:03:41,070 ‫Okay, und das ist eigentlich ohne Bindestrich. 59 00:03:41,070 --> 00:03:44,020 ‫Wenn ich also im VS-Code auf die Kommentarverknüpfung 60 00:03:44,020 --> 00:03:46,860 ‫drücke, wird automatisch ein Pug-Kommentar erstellt. 61 00:03:46,860 --> 00:03:49,320 ‫Aber hier möchte ich wirklich nur einen 62 00:03:49,320 --> 00:03:51,833 ‫Kommentar, der auch in der HTML-Ausgabe verfügbar ist. 63 00:03:53,470 --> 00:03:56,690 ‫Wie auch immer, erstellen wir jetzt das Header-Element und sehen 64 00:03:56,690 --> 00:03:59,040 ‫wir uns an, was wir hier haben. 65 00:03:59,040 --> 00:04:02,120 ‫Wir haben also header mit der Klasse von header. 66 00:04:02,120 --> 00:04:04,680 ‫Und alles, was wir tun müssen, um 67 00:04:04,680 --> 00:04:07,330 ‫eine Klasse anzugeben, ist DOT und dann der Klassenname. 68 00:04:07,330 --> 00:04:09,410 ‫Also nochmal Kopfzeile. 69 00:04:09,410 --> 00:04:12,530 ‫Dann haben wir dort eine Elementnavigation. 70 00:04:12,530 --> 00:04:17,480 ‫Und so, Einrückung und dann nav. nav, was hier wieder der Klassenname 71 00:04:17,480 --> 00:04:19,537 ‫ist, und dann haben wir 72 00:04:19,537 --> 00:04:22,200 ‫auch noch einen anderen Klassennamen und damit 73 00:04:22,200 --> 00:04:23,880 ‫einen weiteren Punkt. 74 00:04:23,880 --> 00:04:24,713 ‫Und das ist es. 75 00:04:25,850 --> 00:04:28,550 ‫Also Navi-Touren. 76 00:04:28,550 --> 00:04:32,290 ‫Wenn Sie also ein wenig mit der CSS-Architektur vertraut sind, 77 00:04:32,290 --> 00:04:35,620 ‫sehen Sie vielleicht, dass ich die BEM-Architektur verwende. 78 00:04:35,620 --> 00:04:37,660 ‫Also, nav ist der Block 79 00:04:37,660 --> 00:04:40,260 ‫und dann ist diese Tour hier ein Modifikator. 80 00:04:40,260 --> 00:04:42,500 ‫Und hier bedeutet dieser Unterstrich Unterstrich, dass 81 00:04:42,500 --> 00:04:44,180 ‫dies ein Block oder eigentlich 82 00:04:44,180 --> 00:04:45,560 ‫ein Element ist. 83 00:04:45,560 --> 00:04:49,293 ‫Also Block, Element und Modifikator. 84 00:04:50,160 --> 00:04:52,290 ‫Okay, das ist nicht wirklich 85 00:04:52,290 --> 00:04:54,890 ‫wichtig, aber ich wollte es nur erwähnen. 86 00:04:54,890 --> 00:04:57,120 ‫Wie auch immer, innerhalb der Navigation 87 00:04:57,120 --> 00:04:59,270 ‫haben wir ein Link-Element. 88 00:04:59,270 --> 00:05:02,920 ‫Also, a, mit der Klasse von nav__el. 89 00:05:07,130 --> 00:05:10,330 ‫Dann haben wir hier dieses href-Attribut, und denken Sie 90 00:05:10,330 --> 00:05:12,973 ‫daran, dass wir Klammern und dann href 91 00:05:14,230 --> 00:05:15,063 ‫verwenden 92 00:05:16,930 --> 00:05:18,890 ‫und es auf nichts setzen. 93 00:05:18,890 --> 00:05:22,020 ‫Das ist also im Grunde das, was dieser Hash hier bedeutet. 94 00:05:22,020 --> 00:05:23,470 ‫Und dann einfach der Inhalt, 95 00:05:24,690 --> 00:05:25,673 ‫also alle Touren. 96 00:05:27,150 --> 00:05:29,450 ‫Als nächstes haben wir dieses Formular hier, 97 00:05:29,450 --> 00:05:31,720 ‫aber wir werden es an dieser 98 00:05:31,720 --> 00:05:33,240 ‫Stelle nicht implementieren. 99 00:05:33,240 --> 00:05:34,543 ‫Also lass es uns loswerden. 100 00:05:36,260 --> 00:05:39,090 ‫Alles klar und das ist unsere Navigation. 101 00:05:39,090 --> 00:05:41,230 ‫Dieser Code hier 102 00:05:41,230 --> 00:05:44,200 ‫ist also im Wesentlichen äquivalent dazu. 103 00:05:44,200 --> 00:05:46,993 ‫Als nächstes haben wir dieses Header-Logo. 104 00:05:48,730 --> 00:05:51,350 ‫Also, neue Zeile, aber eine Ebene zurück, in 105 00:05:51,350 --> 00:05:54,100 ‫der Einrückung, damit sie auf der gleichen Ebene 106 00:05:54,100 --> 00:05:55,680 ‫wie die Navigation ist. 107 00:05:55,680 --> 00:05:58,930 ‫Also, genau wie hier, richtig. 108 00:05:58,930 --> 00:05:59,980 ‫Wenn es jetzt 109 00:05:59,980 --> 00:06:04,980 ‫ein div ist, müssen wir nicht einmal div sagen. Headerlogo, in diesem Fall. 110 00:06:07,150 --> 00:06:08,350 ‫Wenn es sich 111 00:06:08,350 --> 00:06:11,820 ‫also um ein div handelt, das eine Art Standardblockelement in 112 00:06:11,820 --> 00:06:13,980 ‫HTML ist, brauchen wir nur den 113 00:06:13,980 --> 00:06:16,873 ‫Punkt und dann wird automatisch ein div-Element erstellt. 114 00:06:18,930 --> 00:06:20,713 ‫Da drin haben wir dann dieses 115 00:06:22,030 --> 00:06:24,980 ‫Bild, und das braucht natürlich ein paar Attribute, das 116 00:06:24,980 --> 00:06:26,693 ‫ist zuerst die Quelle. 117 00:06:27,560 --> 00:06:31,937 ‫Also Bild, Logo, weiß. png, und dann 118 00:06:33,850 --> 00:06:36,433 ‫auch der Alternativtext, okay. 119 00:06:40,910 --> 00:06:44,690 ‫Als nächstes haben wir diese andere Navigation hier, und damit 120 00:06:44,690 --> 00:06:46,820 ‫wieder auf der gleichen Ebene 121 00:06:46,820 --> 00:06:49,293 ‫wie die erste Navigation und dieses Div. 122 00:06:51,030 --> 00:06:53,750 ‫Also eine Ebene zurück in 123 00:06:53,750 --> 00:06:57,680 ‫die Einrückung und ein neues nav-Element mit der 124 00:06:57,680 --> 00:07:00,763 ‫Klasse nav und dem Klassennav-Benutzer erstellen. 125 00:07:02,120 --> 00:07:03,950 ‫Dann gibt es dort einen Link, 126 00:07:03,950 --> 00:07:05,130 ‫der diesem sehr 127 00:07:05,130 --> 00:07:09,160 ‫ähnlich ist, also kopieren wir ihn einfach, um uns etwas Zeit zu sparen. 128 00:07:09,160 --> 00:07:11,293 ‫Und dann heißt es hier: Meine Buchungen. 129 00:07:16,170 --> 00:07:20,470 ‫Dann noch eins, und eigentlich kopieren wir es einfach noch 130 00:07:20,470 --> 00:07:23,380 ‫einmal mit dem Unterschied, dass es 131 00:07:23,380 --> 00:07:27,070 ‫diesen Inhalt nicht hat, sondern etwas mehr Inhalt enthält. 132 00:07:27,070 --> 00:07:28,470 ‫Also das. 133 00:07:28,470 --> 00:07:30,023 ‫Also, wieder ganz einfach, Bild, mit 134 00:07:31,170 --> 00:07:33,633 ‫der Quelle, . jpg. 135 00:07:42,100 --> 00:07:43,853 ‫Und es hat auch einen Klassennamen, 136 00:07:45,060 --> 00:07:47,420 ‫also lassen Sie uns hier mit dem Punkt bearbeiten. 137 00:07:47,420 --> 00:07:51,713 ‫Also, Navi, Benutzerbild. 138 00:07:53,290 --> 00:07:56,810 ‫Und dann einfach eine Spanne, die Jonas sagt. 139 00:07:56,810 --> 00:07:58,120 ‫Und wie 140 00:07:58,120 --> 00:08:00,960 ‫Sie sehen können, wird dies tatsächlich der dynamische 141 00:08:00,960 --> 00:08:02,350 ‫Teil dieses Headers sein. 142 00:08:02,350 --> 00:08:05,000 ‫Und so wird all das hier eigentlich am 143 00:08:05,000 --> 00:08:06,675 ‫Anfang zu einem Punkt. 144 00:08:06,675 --> 00:08:11,675 ‫Okay, aber egal, lassen Sie uns diesen Teil jetzt hier fertig codieren. 145 00:08:13,160 --> 00:08:14,620 ‫Also im Grunde diese 146 00:08:14,620 --> 00:08:17,520 ‫beiden Buttons, also der Login-Button und der Sign-Up-Button. 147 00:08:17,520 --> 00:08:20,120 ‫Sie haben also natürlich nicht 148 00:08:20,120 --> 00:08:22,920 ‫gleichzeitig den Login- und den Anmelde-Button, 149 00:08:22,920 --> 00:08:25,680 ‫wenn Sie diese Benutzerführung hier haben. 150 00:08:25,680 --> 00:08:29,590 ‫Also meine Buchungen und dann der Name des Benutzers, okay. 151 00:08:29,590 --> 00:08:32,250 ‫Aber noch einmal, lassen Sie uns das erst einmal hier 152 00:08:32,250 --> 00:08:34,553 ‫setzen und dann auskommentieren, was wir nicht brauchen. 153 00:08:36,860 --> 00:08:41,860 ‫Also, button, nav element und auch nav element und 154 00:08:44,440 --> 00:08:49,043 ‫dann der Modifikator cta für die Anmeldung. 155 00:08:50,290 --> 00:08:54,847 ‫Und eigentlich gibt es auch davor eine zum Login, richtig. 156 00:08:56,850 --> 00:08:58,837 ‫Das ist also dieser. 157 00:09:03,010 --> 00:09:05,730 ‫Okay und das wars dann eigentlich. 158 00:09:05,730 --> 00:09:06,940 ‫Das ist 159 00:09:06,940 --> 00:09:09,010 ‫also der Header, und Sie 160 00:09:09,010 --> 00:09:12,550 ‫sehen, dass dieser Code hier all dem entspricht, was wir 161 00:09:12,550 --> 00:09:15,070 ‫hier haben, was viel verwirrender aussieht, wenn 162 00:09:15,070 --> 00:09:16,653 ‫Sie mich zumindest fragen. 163 00:09:18,010 --> 00:09:20,690 ‫Also, lösch das, und wie gesagt, 164 00:09:20,690 --> 00:09:22,920 ‫diese Benutzerführung hier, dieser Teil 165 00:09:22,920 --> 00:09:25,200 ‫wird nur verfügbar sein, wenn 166 00:09:25,200 --> 00:09:27,010 ‫jemand eingeloggt ist. 167 00:09:27,010 --> 00:09:30,123 ‫Lassen Sie uns das alles jetzt komplett auskommentieren. 168 00:09:31,370 --> 00:09:36,370 ‫In Ordnung, als nächstes haben wir den Inhalt und fügen wir hier und 169 00:09:36,500 --> 00:09:38,350 ‫in unserem HTML-Code einen 170 00:09:42,130 --> 00:09:44,050 ‫weiteren Kommentar hinzu, eigentlich alles, 171 00:09:44,050 --> 00:09:46,010 ‫was wir jetzt hinzufügen werden, 172 00:09:46,010 --> 00:09:49,350 ‫ist dieser Abschnitt hier mit der Klasse der Übersicht. 173 00:09:49,350 --> 00:09:51,430 ‫Denn dort haben wir 174 00:09:51,430 --> 00:09:53,160 ‫all diese Inhaltskarten, 175 00:09:53,160 --> 00:09:56,070 ‫die wir vorerst nicht dort aufnehmen werden. 176 00:09:56,070 --> 00:09:57,400 ‫Also noch einmal, was 177 00:09:57,400 --> 00:09:59,623 ‫wir jetzt tun, ist sozusagen nur ein Skelett. 178 00:10:00,729 --> 00:10:03,123 ‫In Ordnung, also Abschnitt. Überblick. 179 00:10:07,410 --> 00:10:08,243 ‫Überblick. 180 00:10:09,574 --> 00:10:12,500 ‫Und jetzt setzen wir hier einfach ein 181 00:10:12,500 --> 00:10:16,040 ‫h1 mit dem Namen der Tour, die als Variable hereinkommt. 182 00:10:16,040 --> 00:10:18,270 ‫Okay, und natürlich muss dieser 183 00:10:18,270 --> 00:10:22,103 ‫Abschnitt hier auf der gleichen Ebene wie dieser Header sein, großartig. 184 00:10:24,130 --> 00:10:26,820 ‫Jetzt fehlt uns also nur noch die Fußzeile 185 00:10:26,820 --> 00:10:28,700 ‫am Ende der Seite. 186 00:10:28,700 --> 00:10:32,690 ‫Also lass uns dorthin gehen und los gehts. 187 00:10:32,690 --> 00:10:35,790 ‫Lass uns das alles packen. 188 00:10:35,790 --> 00:10:38,040 ‫Und dies sollte eigentlich ein Fußzeilenelement sein, nicht 189 00:10:39,040 --> 00:10:40,393 ‫nur ein normales div. 190 00:10:45,510 --> 00:10:49,730 ‫Also ein footer-Element mit der Klasse des footer, dann ein 191 00:10:49,730 --> 00:10:52,573 ‫div mit der Klasse des footer-Logos, 192 00:10:53,850 --> 00:10:57,493 ‫und wieder muss ich das div-Element nicht einmal angeben. 193 00:10:58,870 --> 00:11:00,323 ‫Dann haben wir hier ein Bild. png und ich 194 00:11:07,917 --> 00:11:12,810 ‫hoffe, dass Sie das Wissen darüber behalten, wie all dies funktioniert, ein bisschen 195 00:11:12,810 --> 00:11:16,820 ‫besser, wenn Sie all dies selbst, im Grunde von Hand, eingeben. 196 00:11:16,820 --> 00:11:20,030 ‫Okay, das ist alt und jetzt diese 197 00:11:20,030 --> 00:11:22,330 ‫Fußzeilennavigation, also eine ungeordnete 198 00:11:23,560 --> 00:11:26,520 ‫Liste, und jetzt haben wir ein 199 00:11:26,520 --> 00:11:28,033 ‫paar Listenelementelemente. 200 00:11:31,260 --> 00:11:35,483 ‫Listen Sie also ein Element auf, und dann gibt es in 201 00:11:36,580 --> 00:11:38,620 ‫jedem von ihnen einen Link. 202 00:11:38,620 --> 00:11:41,470 ‫Also, a mit dem href von nirgendwo im Grunde. 203 00:11:41,470 --> 00:11:46,470 ‫Und dann Über uns. 204 00:11:48,410 --> 00:11:51,490 ‫Hier in dieser Situation ist es nicht 205 00:11:51,490 --> 00:11:53,170 ‫wirklich ideal, diese 206 00:11:53,170 --> 00:11:57,298 ‫zusätzliche Zeile nur zur Angabe dieses li zu benötigen. 207 00:11:57,298 --> 00:11:58,640 ‫Was wir hier also 208 00:11:58,640 --> 00:12:00,010 ‫tun können, ist einen Doppelpunkt wie 209 00:12:00,010 --> 00:12:03,310 ‫diesen zu verwenden und dann im Grunde alles in dieselbe Zeile zu setzen. 210 00:12:03,310 --> 00:12:05,840 ‫Dies funktioniert dann immer noch so, als ob es eine 211 00:12:05,840 --> 00:12:07,730 ‫neue Zeile mit einer Einrückung gäbe, aber 212 00:12:07,730 --> 00:12:10,570 ‫im Grunde erlaubt es uns, alles in derselben Zeile zu tun. 213 00:12:10,570 --> 00:12:13,910 ‫Okay, aus irgendeinem Grund funktioniert die 214 00:12:13,910 --> 00:12:15,810 ‫Syntaxhervorhebung nicht mehr, 215 00:12:15,810 --> 00:12:19,180 ‫aber das ist nicht so wichtig. 216 00:12:19,180 --> 00:12:21,343 ‫Also Bewerbungen herunterladen, Wegweiser 217 00:12:22,910 --> 00:12:24,453 ‫werden, Karrieren. 218 00:12:26,300 --> 00:12:29,873 ‫Und das ist es tatsächlich. 219 00:12:39,630 --> 00:12:41,053 ‫Als nächstes haben wir diese 220 00:12:43,770 --> 00:12:46,520 ‫Fußzeile, das Copyright, und hier haben wir nur einen Haufen Text. 221 00:12:50,540 --> 00:12:53,100 ‫Also hier das Copyright-Symbol 222 00:12:53,100 --> 00:12:56,943 ‫angeben, und das ist von Jonas Schmedtmann. 223 00:12:58,860 --> 00:13:02,670 ‫Also, das bin ich und wie in allen meinen anderen Kursen 224 00:13:02,670 --> 00:13:06,100 ‫möchte ich Sie wissen lassen, dass Sie dieses Projekt grundsätzlich 225 00:13:06,100 --> 00:13:08,290 ‫für sich selbst nutzen können. 226 00:13:08,290 --> 00:13:11,120 ‫Also im Grunde, um es in Ihr Portfolio aufzunehmen 227 00:13:11,120 --> 00:13:13,550 ‫oder jedem zu zeigen, dass Sie dieses Projekt 228 00:13:13,550 --> 00:13:15,270 ‫in meinem Kurs gebaut haben. 229 00:13:15,270 --> 00:13:18,630 ‫Was Sie jetzt nicht tun können, ist Ihren eigenen Kurs basierend auf 230 00:13:18,630 --> 00:13:20,030 ‫diesem Projekt zu erstellen. 231 00:13:20,030 --> 00:13:23,310 ‫Und es ist traurig, dass ich das überhaupt sagen muss, 232 00:13:23,310 --> 00:13:25,970 ‫aber natürlich hat es Leute gegeben, die 233 00:13:25,970 --> 00:13:28,980 ‫mein Projekt genutzt haben, im Grunde um einige kostenlose Kurse 234 00:13:28,980 --> 00:13:32,270 ‫auf YouTube zu stellen, wo sie meine Projekte nacheinander kopiert haben. 235 00:13:32,270 --> 00:13:35,410 ‫Okay, lassen Sie mich das hier einfach aufschreiben. 236 00:13:35,410 --> 00:13:38,473 ‫Für Ihre eigenen Zwecke, außer natürlich, 237 00:13:42,160 --> 00:13:45,593 ‫Ihre eigenen Kurse oder Tutorials zu produzieren. 238 00:13:49,850 --> 00:13:54,850 ‫Okay und das ist es tatsächlich. 239 00:13:59,230 --> 00:14:01,213 ‫Alles klar, das 240 00:14:06,130 --> 00:14:09,500 ‫ist die Übersetzung des Skeletts, das 241 00:14:10,990 --> 00:14:14,400 ‫wir hier haben, natürlich abgesehen vom Inhalt. 242 00:14:14,400 --> 00:14:17,560 ‫Okay, das brauchen wir nicht mehr. 243 00:14:17,560 --> 00:14:20,753 ‫Und zum Schluss werfen wir einen kurzen Blick darauf 244 00:14:21,960 --> 00:14:25,000 ‫und hier geht es zu unseren Inhalten. 245 00:14:25,000 --> 00:14:27,640 ‫Das hier sieht jetzt etwas fehl am Platz aus, weil 246 00:14:27,640 --> 00:14:29,650 ‫dieser Copyright-Text hier so lang ist. 247 00:14:29,650 --> 00:14:31,883 ‫Also diese Fußzeilennavigation im Grunde. 248 00:14:33,950 --> 00:14:37,330 ‫Aber da es sich um einen Flex-Container handelt, 249 00:14:37,330 --> 00:14:39,540 ‫sollten wir das mit 250 00:14:39,540 --> 00:14:42,270 ‫gerechtfertigtem Inhalt beheben können, Flex-End, nicht dieser. 251 00:14:42,270 --> 00:14:47,270 ‫Okay, und machen Sie sich keine Sorgen, wenn Sie mit 252 00:14:48,660 --> 00:14:53,660 ‫CSS oder sogar Flexbox nicht vertraut sind. Dies dient nur 253 00:14:53,870 --> 00:14:56,180 ‫dazu, das kleine Problem, 254 00:14:56,180 --> 00:15:00,200 ‫das wir hier hatten, einfach visuell zu beheben. 255 00:15:00,200 --> 00:15:01,050 ‫Suchen wir also hier nach der Fußzeile. 256 00:15:02,820 --> 00:15:04,723 ‫Hier sind wir. 257 00:15:08,590 --> 00:15:09,893 ‫Beheben Sie das hier, und 258 00:15:11,210 --> 00:15:12,303 ‫wenn wir jetzt 259 00:15:13,690 --> 00:15:15,790 ‫neu laden, ja, dann sind wir gut, perfekt.