So entwickelst du 3 Projekte mit HTML und CSS!

1. Willkommen! Das bauen wir hier auf: Willkommen, um HTML und CSS zu lernen, indem Sie drei Projekte erstellen. Mein Name ist Chris, und ich freue mich, Ihr Lehrer für diesen Kurs zu sein. Ich werde Sie Schritt für Schritt durch den Prozess des Aufbaus freier, echter Website-Projekte führen, die jeweils auf dem aufbauen, was Sie in den letzten Jahren gelernt haben. Es wird ein lustiger und praktischer Weg für jeden, der lernen möchte, wie man Websites baut. Zunächst werden wir mit der Erstellung einer rezeptbasierten Website beginnen. Dies wird eine statische Website sein, wir werden Ihnen die Grundlagen von HTML und CSS vorstellen. Sie erfahren, wie Sie die grundlegende Datei- und Ordnerstruktur erstellen, wie Sie eine grundlegende Indexseite erstellen. So erstellen Sie dann alle Abschnitte der Website, wie die Kopfzeile, den Hauptteil und die Fußzeile. Wir werden dann CSS verwenden, um eine Website zu gestalten und auch für das Layout und die Positionierung aller verschiedenen Elemente, wie die Positionierung der Bilder und auch des Textes und das Hinzufügen der Hintergrundbilder. Wir gehen dann zu einer College-basierten Website über, die Projekt zwei sein wird. Dies wird eine vollständig reaktionsfähige Website sein, was bedeutet, dass die Website auf Smartphones, Tablets oder Computern gut aussieht und auf die Bildschirmgröße reagiert, auf die sie angezeigt wird. Wenn Sie den Browser nach unten verkleinern, werden Sie sehen, dass die beiden divs, die nebeneinander stehen, übereinander gestapelt werden, übereinander gestapelt werden um das Projekt auf kleineren Geräten besser aussehen zu lassen, und alle Bereiche, wie das Logo und die Navigation, alle reagieren auf einen Blick zurück auf eine andere Größe Gerät. Lassen Sie uns den Browser wieder nach oben erweitern. Außerdem werden Ihnen einige neue Konzepte vorgestellt, wie Medienabfragen und Haltepunkte, Mobiltelefon-Styling und sogar einige modernere fortschrittliche Techniken, wie die CSS Flexbox. Project drei ist eine hotelbasierte Website, die Sie in das beliebte Bootstrap-Framework aus den Wiegen von Twitter einführt. Jetzt haben wir ein gutes Verständnis dafür, wie Websites von Grund auf neu erstellt werden können, nachdem die ersten beiden Projekte erstellt wurden. Die Einführung des Bootstrap-Frameworks wird Ihre Entwicklungszeit wirklich beschleunigen und es Ihnen ermöglichen, Ihren Websites einige wirklich großartige Funktionen hinzuzufügen. Am Ende dieses Kurses werden Sie alle drei dieser Websites erstellt haben, die Ihren Webdesign-Fähigkeiten wirklich einen Schub geben. Der ideale Schüler für diesen Kurs ist jemand, der neu ist, Websites zu erstellen , oder jemand mit etwas Erfahrung, nach einer strukturierten, projektbasierten Methode sucht, ihr Wissen zu erweitern. Es wird Ihnen eine großartige Grundlage geben, wenn Sie in den Aufbau von Websites für eine Karriere suchen oder auch wenn Sie nur eine Website für einen persönlichen oder geschäftlichen Gebrauch erstellen möchten. Vielen Dank für Ihr Interesse und ich freue mich darauf, Sie an Bord zu haben. 2. Was du für diesen Kurs brauchst: Um an diesem Kurs arbeiten zu können, brauchen wir keine Software zu kaufen oder zusätzliche Einkäufe zu tätigen. Alles, was wir brauchen, ist ein Webbrowser, den Sie wahrscheinlich im Moment für diesen Kurs verwenden. Ich werde Google Chrome verwenden, aber Sie können jeden modernen Browser verwenden. Darüber hinaus werden wir etwas Software benötigen, um unseren Code zu schreiben. Ich werde ein Programm namens Visual Studio Code verwenden. Wenn Sie dies in einer Suchmaschine suchen, stoßen Sie auf die Homepage, die unter code.visualstudio.com verfügbar ist. Wenn Sie hier hineingehen, können Sie einige weitere Informationen erfahren, wenn Sie möchten. Oder Sie können dies für Ihr Betriebssystem herunterladen. Es ist ein kostenloser Download für Mac, Windows und Linux. Gehen Sie weiter und laden Sie die entsprechende Installation für Ihren Computer herunter. Ich habe das bereits heruntergeladen und geöffnet auf der linken Seite. Gehen Sie los und laden Sie es herunter, und ich sehe Sie im nächsten Video, wo wir beginnen werden, einige Dateien und Ordner für unser erstes Projekt zu erstellen . 3. Deine Arbeit Am Skillshare-Kurs teilen!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen, dem nur zu folgen um eine weitere Vorlesung abzubrechen. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den Inhalt , den Sie schreiben, zu überprüfen und darüber nachzudenken, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Du musst dich nicht zu sehr verirren und vom Unterricht ablenken. Sie können sogar einen Schritt zurücktreten, nachdem Sie den Kurs beendet haben , und anschließend zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das, was du im Unterricht gelernt hast, praktisch anzuwenden. auch daran, Ihr Projekt 2 hier auf Skillshare zu teilen. Ich werde es mir nicht nur ansehen, sondern es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie hier auf Skillshare erstellen und hochladen. 4. Datei- und Ordnerstruktur: Willkommen zurück. Inzwischen aus dem vorherigen Video sollten wir aus dem vorherigen Video Visual Studio Code oder einen Texteditor Ihrer Wahl erfolgreich heruntergeladen haben . Ich habe meine auf der linken Seite geöffnet. Ich werde in diesem Video beginnen, indem ich einen Projektordner für unser erstes Projekt erstelle. Nun, während dieses Kurses, werden wir drei separate Projekte erstellen. Sie können diese überall auf Ihrem Computer speichern, kann in einem bestimmten Laufwerk gehen, einen bestimmten Ort, wie Dokumente, die ich werde meine auf dem Desktop speichern. Diese drei Projektordner für unser Projekt können sogar direkt auf den Desktop gehen, aber um die Dinge schön und organisiert zu halten, werde ich einen neuen Ordner erstellen und diese Projekte umbenennen. Wenn wir das öffnen, hier drinnen, wird unser erster Projektordner für unsere Rezeptseite sein. Erstellen wir hier einen neuen Ordner namens My Recipes. Nun, wenn Sie einen Website-Projektordner so erstellen, gibt es keine strenge Struktur, wie wir genau unsere Dateien und Ordner auslegen. Wir sind frei, diese in so ziemlich jeder Art zu organisieren, wie wir wollen. Im Allgemeinen erstellen wir hier einige Unterordner, um Dinge wie unsere JavaScript-Dateien, unsere Bilder, unsere Stylesheets zu speichern . Sie können in der Regel alle verwandten Inhalte gruppieren , um die Dinge schön und organisiert zu halten. Wir werden in diesem Kurs nicht wirklich mit JavaScript zu tun haben, also werde ich keinen JavaScript-Ordner erstellen. Auch für dieses Projekt werden wir nur ein Stylesheet haben. Ich werde diese auch nicht zusammenfassen, aber wir werden es mit mehreren Bildern in diesem Projekt zu tun haben. Mit diesem Kurs ist ein Bilderordner, den Sie verwenden können, oder Sie können auch Ihre eigenen Bilder verwenden, wenn Sie es bevorzugen. Ich habe diese Bilder heruntergeladen und auf dem Desktop hier gespeichert. Ich werde das packen und das in unseren Projektordner ziehen. Hier drinnen haben wir alle Bilder, die wir für dieses Projekt verwenden werden. Dann können wir dies in Visual Studio Code öffnen. Wir brauchen auch einige andere Dateien, die wir in einem Moment erstellen werden, aber ich werde diese innerhalb des Texteditors erstellen. Was wir tun werden, ist, den Projektordner „Meine Rezepte“ zu greifen und diesen dann innerhalb von Visual Studio Code zu legen. Wir können sofort sehen, dass wir links eine Seitenleiste haben, das ein bisschen größer macht. Dann haben wir alle My Recipes Projekt geöffnet. Das erste, was wir tun werden, ist eine neue HTML-Datei zu erstellen, die unsere Index-Seite sein wird. Die Indexseite ist in der Regel der Einstieg in die Hauptseite unserer Website. Wenn Sie den Mauszeiger über die Seitenleiste bewegen, können wir auf dieses Symbol „Neue Datei“ klicken oder wir können auch mit der rechten Maustaste auf eine „Neue Datei“ klicken. Dies würde der Index genannt werden, und dies erfordert die Erweiterung the.html, da dies eine HTML-Seite ist. Die zweite Datei wird für unsere Stylesheets sein, und so können wir etwas Styling und Layout auf unsere Projekte anwenden. Dies wird die Styles sein und dann hat diese Erweiterung the.css. Wir können diese auch sehen, wenn wir unseren Projektordner auf dem Desktop öffnen. Nun, hier drinnen, neben unseren Bildern, sehen wir unseren Index und unsere Styles.css. Wir haben noch keine Inhalte auf unseren Seiten gespeichert, aber wir können mit der rechten Maustaste auf den Dateinamen klicken, gehen Sie zu Copy Path. Dann können wir dies als eine neue Browser-Tab einfügen. Dadurch wird unser Projekt innerhalb des Browsers geöffnet. Natürlich haben wir noch keine Inhalte auf dieser Seite zu zeigen, aber wir werden dies im nächsten Video beheben, in dem wir beginnen, unsere HTML-Struktur für unsere erste Seite zu erstellen . 5. Grundlegende HTML-Struktur: Schauen Sie in unsere index.html Seite, die wir im letzten Video erstellt haben, und ich werde an die Arbeit gehen, indem ich eine Struktur zu diesem HTML-Dokument hinzufüge. Nun, alle Inhalte, die in HTML-Seiten gehen, sind in der Regel unterschiedlich und abhängig davon , welche Art von Website, die Sie erstellen werden. Allerdings gibt es eine allgemeine Grundstruktur, die Sie für jede HTML-Seite benötigen. Um zu beginnen, müssen wir eine DOCTYPE-Deklaration hinzufügen, und dies teilt dem Browser genau mit, welche Art von Dokument es lesen wird. Wir tun dies, indem wir unsere eckigen Klammern wie folgt hinzufügen, ein Ausrufezeichen, und dann fügen wir den DOCTYPE hinzu. Dies ist ein HTML-Dokument, daher fügen wir HTML hinzu. Da dies HTML ist, wickeln wir den gesamten Rest des Inhalts innerhalb des HTML-Elements ein. Wie viele Elemente in HTML, hat dies ein öffnendes Tag und auch ein schließendes Tag, das wir mit diesem Schrägstrich sehen können. Nun muss alles andere, was wir zu diesem Dokument hinzufügen , innerhalb dieser HTML-Tags platziert werden. Der nächste Teil der Struktur, die wir zu diesem HTML-Dokument hinzufügen werden , ist, indem wir dies in zwei Abschnitte aufteilen. Genau wie eine Person hat ein HTML-Dokument einen Kopf und auch einen Körper, also lassen Sie uns diese hinzufügen. Wir haben den Kopfteil, der die öffnenden und schließenden Tags hat, und dann haben wir auch den Körperteil. Der Unterschied zwischen diesen beiden Abschnitten ist der Kopfbereich wird in der Regel verwendet, um Informationen über unsere Websites hinzuzufügen, die den Namen, die Seitentitel, ihre Beschreibungen, Inhalte für Suchmaschinen, und auch Links auf andere Seiten. Dies ist also mehr wie Informationen über unsere Website, und im Allgemeinen nichts, was wir auf dem Bildschirm sehen. Der Body-Abschnitt enthält den tatsächlichen Inhalt, der im Browser angezeigt wird. Der Kopfabschnitt ist also für Informationen und Links zu anderen Seiten, und der Hauptteil ist, was Sie tatsächlich im Browser angezeigt sehen werden. Eine andere Sache, die wir mit jedem dieser Elemente tun können, ist das hinzufügen, was ein Attribut genannt wird. Attribute sind einige zusätzliche Informationen, die in das öffnende Tag übergeben werden sollten. Zum Beispiel möchten wir mit einem HTML-Dokument erklären, welche Art von Sprache dieses Dokument Routing ist. Wir tun dies mit einem lang-Attribut, das kurz für Sprache ist. Meiner wird auf Englisch sein. Wenn Sie Ihre in einer anderen Sprache schreiben, können Sie auch eine Suche nach HTML-Sprachcodes durchführen, und wir können eine vollständige Liste mit diesem Link nur hier sehen. Wenn wir nach unten scrollen, sehen wir eine Sprachtabelle, in der wir eine bestimmte Sprache auswählen können, und wählen Sie dann den kurzen Code, den wir innerhalb dieser Sprachattribute platzieren werden. Fühlen Sie sich frei, dies zu ändern, wenn Sie möchten, aber ich werde jetzt zu diesem Kopfteil übergehen. Denken Sie daran, dass der Kopfbereich Informationen über unsere Website enthält, und das erste, was ich im Inneren von hier platzieren werde, ist der Titel. Dieser Titel ist der Seitentitel für diese bestimmte Seite. Wenn wir also eine Kontakt-Us-Seite haben, wird dies mit uns in Verbindung treten. Wenn wir eine „Über uns“ -Seite hätten, wäre dies etwa, und so weiter. Da dies die Homepage ist, werde ich das Meine Rezepte nennen. Nun, wenn wir dies speichern und unsere Index-Seite aktualisieren, sehen wir jetzt den Seitentitel im Browser oben angezeigt. Unmittelbar unter dem Titel, werden wir einige zusätzliche Informationen über unsere Website hinzufügen , indem wir die Meta-Tags verwenden. Im Gegensatz zu Dingen wie unserem Titel und unserem Kopfteil und dem Körper, hat dies keine Öffnung und ein schließendes Tag. Wir haben nur so ein öffnendes und schließendes Tag , wenn wir Inhalte darin verschachteln wollen. Der Titel hat also diesen Text im Inneren, der Kopfbereich hat mehrere Inhalte, aber für unsere Meta-Tags werden wir nur einige Attribute hinzufügen, genau wie wir es gerade oben getan haben. Diese Attribute erklären, welche Art von zusätzlichen Informationen wir für unsere Website hinzufügen möchten. Diese erste wird die besondere Menge von Zeichen sein , die wir für unser Projekt verwenden wollen. Mit Zeichen verstehen wir, welche Art von Buchstaben, Zahlen und Symbolen wir auf unserer Website verwenden möchten. Der HTML5-Standard ist UTF-8, und dies deckt fast alle Zeichen und Symbole auf der Welt ab. Wir tun dies, indem wir das Zeichensatzattribut hinzufügen und dies auf UTF-8 setzen. Ihre nächste Information in einem Meta-Tag wird das Ansichtsfenster-Tag sein. Wir erstellen ein neues Meta-Tag genau wie oben, und geben diesem dann den Namen des Ansichtsfensters. Dies wird es uns ermöglichen, unsere Seite für verschiedene Bildschirmgrößen einzurichten. Der Grund, warum wir dieses Viewport Tag brauchen, ist, weil Menschen unsere Websites auf mehreren Bildschirmgrößen, neben Monitoren, aber wir müssen auch für Tablet-Größe und auch mobile Größe Geräte zu berücksichtigen . Wo wir dies als zweites Attribut tun, ist es, den Inhalt zu setzen, und dann innerhalb der Zitate, setzen wir die Breite gleich der Gerätebreite. Was wir hier im Wesentlichen tun, ist, dass wir die Breite der Seite so einstellen , dass sie dem Gerät entspricht, auf dem wir sie sehen, und trennen sie durch Komma. Die nächste, die wir tun werden, ist, die anfängliche Skala auf eins zu setzen. Dies ist die anfängliche Skala oder die anfängliche Zoomstufe, wenn unsere Seite zum ersten Mal geladen wird, und das ist wirklich wichtig, dass unsere Website auf allen Bildschirmgeräten gut aussieht. Wenn wir dies nicht hinzufügen, kann ein Benutzer versuchen, unsere Website auf einem mobilen Gerät zu besuchen , und dieses mobile Gerät versucht möglicherweise, unsere Website in Desktopgröße zu nehmen und dann verkleinern, um alle Inhalte auf den kleineren Bildschirm zu passen was dann dazu führt, dass Dinge wie unser Text wirklich klein aussehen. Wir möchten nicht, dass dieses Zoomen oder Skalieren wirksam wird, da wir das Aussehen unserer Website auf allen Bildschirmgrößen behandeln werden , indem wir einige CSS hinzufügen. Eine Menge davon mag zunächst verwirrend aussehen, aber denken Sie daran, dass all dies für jede HTML-Seite wichtig ist, die wir erstellen werden, so dass Sie viel mehr vertraut mit dem Hinzufügen dieses. Neben all diesen zusätzlichen Informationen über unsere Website können wir auch den head-Bereich verwenden, um auch auf andere Seiten zu verlinken. Zum Beispiel haben wir die styles.css. Dies wird das gesamte Styling, alle Farben, das gesamte Layout, die Schriftgrößen und vieles mehr für unsere HTML-Seite enthalten gesamte Layout, die Schriftgrößen . Damit dies wirksam wird, müssen wir auf diese Datei verlinken, und wir tun dies mit dem Link-Element. Auch hier enthält dies nur die Attribute im Inneren, so dass wir kein öffnendes und schließendes Tag haben. Die Beziehung ist ein Stylesheet, da dies der Dateityp ist, mit dem wir verknüpfen. Dann haben wir diese href, wo wir diese bestimmte Seite sagen, wo wir dieses Stylesheet finden können. In unserem Fall befindet sich dieses Stylesheet neben unserer Index-Seite, also müssen wir nur den Dateinamen hinzufügen, der styles.css ist. Wenn diese bestimmte Datei innerhalb eines CSS-Ordners gespeichert wurde, müssen wir nur den Dateipfad wie folgt hinzufügen. Dies sind alle Informationen, die ich im Kopfbereich hinzufügen werde. Von nun an werden wir innerhalb des Körperabschnitts arbeiten. Dieser Körperabschnitt, wie ich bereits erwähnt habe, wird den gesamten Inhalt enthalten, den wir auf dem Bildschirm sehen. Zum Beispiel, wenn wir etwas Text hinzufügen möchten, können wir diese in das p-Element hinzufügen, die für Absatz ist. Nun sagen wir hallo, sagen Sie dies, aktualisieren Sie den Browser, und all dieser Körperinhalt wird dann im Browser angezeigt, genau wie wir hier sehen. 6. Nützliche Ressourcen: Beim Aufbau von Websites in jeder Phase Ihrer Entwicklungskarriere, wird es einen Punkt geben, an dem Sie einen Blick einige wertvolle Ressourcen nehmen müssen , um Ihnen auf Ihrer Reise zu helfen. Eine dieser großartigen Ressourcen, die ich regelmäßig verwende, ist die Mozilla Developer Website. Dies ist eine Ressource für die meisten Kern-Web-Technologien, wie HTML, CSS, JavaScript und auch viele andere Dinge wie Spieleentwicklung, und hat auch einige Anleitungen zu einigen Back-End-Technologien mit Python, Express JS, und vieles mehr. Im Moment werden wir uns jedoch nur auf HTML und CSS konzentrieren. Wir werden JavaScript während dieses Kurses nicht wirklich abdecken, aber das ist wahrscheinlich etwas, auf das Sie sich nach dem Lernen von HTML und CSS konzentrieren möchten. Wenn wir uns eine dieser Technologien ansehen, können wir mehr Informationen über den Hintergrund und darüber erfahren, was es tut. Aber eines der wirklich nützlichen Dinge ist die HTML-Elemente Referenz. Hier können wir einen Blick auf alle verfügbaren Elemente werfen, die wir in unserem Projekt verwenden können. Bisher haben wir mit unserem Projekt nicht sehr weit gekommen, alles, was wir hinzugefügt haben, ist ein einfacher Text, und wir haben diese innerhalb der P-Elemente hinzugefügt. Als Beispiel, wenn wir nach unten scrollen und dies auswählen, können wir sehen, dass dies einen Absatz von Text darstellt, wir haben die öffnenden und die schließenden Tags mit dem Text im Inneren. Wir können herausfinden, wie Sie eines dieser Elemente genau verwenden können, indem Sie darauf klicken. Dies ist wirklich nützlich, wenn Sie an einem beliebigen Punkt in diesem Kurs stecken bleiben, und auch wenn Sie sich in Ihre eigenen Projekte bewegen. Und das, innerhalb der Technologien, wenn wir auf die CSS gehen. Wir werden ziemlich viel mit CSS in diesem Projekt arbeiten, CSS ist die Art, wie wir Styling hinzufügen können, wir können Farben hinzufügen, wir können ein Layout, Animationen und vieles mehr hinzufügen. Es kann unser einfaches HTML nehmen und es in etwas wirklich Schönes und Visuelles konvertieren. Auch hier können Sie kleine Informationen durchlesen und herausfinden , oder Sie können zur CSS-Referenz gehen. Dies wird uns eine Menge der Syntaxbeispiele geben, die wir verwenden werden. Wir können einen Blick auf diese Selektoren werfen, was eine Möglichkeit ist, einen Teil unseres HTML auszuwählen, dem wir etwas Styling hinzufügen möchten. Aber wir werden viele dieser Techniken während des gesamten Kurses anwenden. Als Nächstes haben wir die W3 Schools Website. Dies ist auch eine nützliche Referenz für HTML, CSS und JavaScript, neben einigen anderen Dingen, wie einige serverseitige Technologien, einige Programmiersprachen, künstliche Intelligenz, viele andere Themen. Auch hier, für diesen Kurs und beim Starten des HTML, wird nur CSS-Abschnitt wirklich nützlich sein, wenn Sie dies als Referenz für eines der Elemente verwenden oder sogar einige Codebeispiele finden möchten . Es ist ziemlich einfach zu bedienen. Wenn wir zum Beispiel nicht sicher sind, wie man ein Bild hinzufügt, können wir zum Abschnitt Bilder gehen, wo wir verschiedene Beispiele sehen, auf die wir klicken können, und wir können mit dem Code spielen, und auch die Ausgabe über auf der Seite. Bis wir einen Code haben, wollen wir auch sicherstellen, dass wir ihn richtig schreiben. Eine Möglichkeit, dies zu tun, besteht darin, einen Validierungsdienst wie den W3-Validator zu verwenden. Wenn wir eine Live-Website online haben, können wir in der Web-Adresse nur hier hinzufügen. Wir haben noch keine unserer Websites auf einem Live-Server veröffentlicht, also können wir dies tun, indem wir auf den Datei-Upload-Validator klicken, und dann können wir unsere HTML-Seiten aus unseren Projekten auswählen. Überprüfe das. Wir können sehen, dass dies die Überprüfung des Dokuments abgeschlossen hat und wir haben keine Fehler auf dieser Seite, obwohl wir im Moment noch nicht viel Inhalt hinzugefügt haben. Als Nächstes werden wir einen Blick auf einige nützliche Ressourcen werfen, um Bilder, Videos und auch Audio zu unserer Website hinzuzufügen . Eines davon ist pixabay.com, das Tausende von kostenlosen Bildern enthält, die wir auf unseren Webseiten verwenden können. Wir können eine Suche durchführen, wir können diese nach Fotos, Illustrationen, Vektoren, Videoclips und auch Musikdateien filtern Illustrationen, Vektoren, Videoclips . Es ist ziemlich einfach zu bedienen, wir müssen nur auf eines dieser Bilder klicken, die wir mögen, und dann können wir auf die „Free Download“ klicken. Sie müssen sich nicht registrieren, es sei denn, Sie möchten eines der großen Bilder verwenden , es ist kostenlos zu verwenden. Wir müssen dem Autor oft keine Zuschreibungen hinzufügen, obwohl es geschätzt wird. Auch wenn Sie einige eigene Bilder haben, die Sie hochladen und beitragen möchten, können Sie dies auch tun. Darüber hinaus haben wir auch unsplash.com, die eine weitere beliebte Website für Stockfotografie ist. Auch hier gibt es Tausende von qualitativ hochwertigen Bildern, die Sie kostenlos nutzen können, und wenn wir auf diesen Link klicken, können wir hier sehen, dass die Fotos eine kostenlose Lizenz für kommerzielle und auch nicht-kommerzielle Projekte haben . Wir brauchen nicht um Erlaubnis zu bitten, dies in unseren Projekten zu verwenden, obwohl natürlich die Zuweisung geschätzt wird. Die nächste Ressource, die wir uns ansehen werden, ist caniuse.com. Dies ist eine wirklich, wirklich nützliche Website, um zu überprüfen, ob eine Funktion in einem bestimmten Browser verfügbar ist. Während wir diesen Kurs durchlaufen, werden wir viel HTML und auch viel CSS schreiben . Für dieses CSS möchten wir sicherstellen, dass es in allen Browsern unserer Benutzer gleich aussieht. Zum Beispiel können wir die neuesten CSS-Funktionen in unseren eigenen Projekten verwenden, und es könnte in unserem aktuellen Browser erstaunlich aussehen. Aber wir müssen auch bedenken, dass einige Benutzer einige ältere Browser haben, vor allem vielleicht in Dingen wie Schulen oder einige größere Unternehmen, die ihren Browser nicht so regelmäßig aktualisieren. Es ist einfach von der Homepage aus zu verwenden, alles, was wir tun müssen, ist eine CSS-Funktion einzugeben, die Sie verwenden möchten. Wenn wir zum Beispiel die CSS Flexbox in einem unserer Projekte verwenden möchten, können wir dies eingeben und wir können genau herausfinden, welche Browser und welche Versionen die Flexbox unterstützen. Hier können wir sehen, dass Internet Explorer nur teilweise unterstützt, obwohl dies im moderneren Edge-Browser unterstützt wird. Es ist völlig in Ordnung, in Firefox, Chrome, Safari, Opera, und auch alle beliebten mobilen Browser zu verwenden , in allen der neuesten Versionen. Das bedeutet, dass dies in unserem Projekt ziemlich sicher ist. Dies ist wirklich nützlich, um zu überprüfen und auch herauszufinden, welche Art von Erfahrung unsere Benutzer haben werden, wenn sie einen älteren Browser verwenden. Als nächstes, neben einigen Bildern und Videos, können wir auch nur einige einfache Symbole hinzufügen. Dies ist die unicode-table.com eine wirklich nützliche Ressource. Wir können einige Symbole wie Pfeile hinzufügen, und wir können durch den Katalog von Tausenden von verschiedenen, die wir wählen können, überprüfen. Zum Beispiel, wenn wir einen Pfeil nach rechts wollten, könnten wir in diesen klicken. Wir können diese innerhalb unseres HTML mit dem HTML-Code nur hier hinzufügen. Wir werden einen Blick darauf werfen, wie dies in unserem Projekt zu tun ist. Als nächstes haben wir auch eine dedizierte Icon-Bibliothek, die Font Awesome genannt wird. Natürlich gibt es auch viele andere Icon-Bibliotheken zur Verfügung, aber Font Awesome ist ein wirklich beliebtes. Es hat auch eine kostenlose Version, die viele verschiedene Symbole hat, und es gibt auch eine kostenpflichtige Version zu, wenn Sie die kostenlose Bibliothek entwachsen. Wie Sie erwarten würden, ist dies nur eine Handvoll von einigen beliebten Ressourcen, es gibt Hunderte und sogar Tausende von mehr online zur Verfügung. Ich bin sicher, dass Sie auf Ihrer Entwicklungsreise auf viele davon stoßen werden. Aber im Moment ist dies nur eine Handvoll Ressourcen, um Ihnen den Einstieg zu erleichtern. Als nächstes gehen wir zurück in unser Projekt und beginnen mit dem Header-Abschnitt. 7. HTML5 Header Abschnitt: Derzeit haben wir eine ziemlich leere Website, wir haben nur diesen Text von Hallo oben, der mit diesem Absatzelement erstellt wurde. Für den Rest dieses Videos werden wir einige weitere Inhalte hinzufügen, indem wir unseren Header-Abschnitt oben auf unserer Seite erstellen. Um einen Blick auf genau das zu werfen, was wir schaffen werden, ist dies die endgültige Version. Der Header-Abschnitt wird dieser graue Abschnitt über die ganz oben sein und dies wird in drei Teile aufgeteilt werden. Wir haben die beiden Links auf der linken Seite. Wir werden das Website-Logo und auch das Bild in der Mitte haben, und dann einige zusätzliche Links auf der rechten Seite. Um diese drei Abschnitte zu erstellen, werden wir verwenden, was ein div genannt wird. Ein div ist ein Abschnitt oder eine Abteilung innerhalb unserer Website, wo wir Inhalte innerhalb platzieren können. Um mehr darüber zu erfahren, können wir auf die Mozilla Developer Website gehen, die wir uns im Ressourcen-Video angesehen haben. Unter den Technologien können wir entweder zum HTML gehen, aber ich werde eine Suche nach div machen. Hier haben wir das div, das das Inhaltsbereichselement innerhalb unseres HTML-Abschnitts ist. Dies ist ein generischer Container. Es hat keine besondere Bedeutung. Es wird nur zwei Gruppeninhalte verwendet. Wir können hier sehen, wir haben ein div, das das öffnende und das schließende Tag hat, und dann können wir unseren Inhalt innerhalb platzieren. Dieses spezielle Beispiel hat ein Bild und auch ein p-Element für einen Text. Wir werden dies für alle drei Abschnitte und auch für einige Abschnitte später verwenden. Lassen Sie uns beginnen, und das erste, was wir tun werden , ist, einfach auf dieses Symbol oben zu klicken, schließen Sie unsere Seitenleiste, und dann werden wir diesen Hallo Text innerhalb des Körpers verschieben, sowie Container wie ein div, das ziemlich generisch ist. In HTML-Version 5 haben wir auch einige beschreibende Elemente, oft als semantische Elemente bezeichnet werden. Diese semantischen Elemente werden verwendet, um den Inhalt zu beschreiben, der innen verschachtelt ist. Einer dieser nützlichen, die wir verwenden können, ist die Header-Elemente. Dies hat ein öffnendes und ein schließendes Tag und wir können innerhalb des gesamten Header-bezogenen Inhalts platzieren. Wie wir gerade gesehen haben, werden wir das div-Element verwenden und der gesamte Inhalt für unseren ersten Abschnitt auf der linken Seite wird innerhalb dieses div platziert. Bei Verwendung von Visual Studio Code kommt dies auch komplett mit einem Plugin namens Emmet. Emmet wird verwendet, um unseren Code in zu beschleunigen. Wenn wir ein div eingeben und dann „Enter“ drücken, können wir sehen, dass dies automatisch wie folgt mit dem schließenden Tag geschlossen wird, und es fügt auch die Klammern um jeden Abschnitt hinzu. Also, wenn Sie die Praxis wollen, können Sie dies entweder manuell eingeben oder Sie können Emmet verwenden. Dies gibt jetzt unsere ersten zwei div-Abschnitte und ich werde den dritten erstellen, der für unsere Links auf der rechten Seite ist. Aber wie gehen wir über die Erstellung dieser Links? Wenn wir wollten, könnten wir ziemlich einfach gehen und nur die P-Elemente haben, wie wir es vorher gesehen haben. Aber im Allgemeinen, wenn wir mehrere Textstücke wie diesen haben, ist es eine gute Idee, in eine Liste zu platzieren. Mit HTML, zwei der beliebtesten Arten von Listen, die wir verwenden können , ist die geordnete Liste und die ungeordnete Liste. Eine geordnete Liste ist eine Möglichkeit, mehrere Elemente genau so aufzulisten, und diese sind nach Zahlen sortiert. Dies würde Nummer 1, Nummer 2, und fahren Sie für jeden Artikel fort. Ungeordnete Liste auf der anderen Seite, anstatt Zahlen neben jedem Listenelement zu platzieren, wird es einen Aufzählungspunkt auf der linken Seite platzieren. Derzeit sehen wir dies für unsere Artikel nur hier nicht , da wir dies mit diesem CSS entfernt haben. Sehen, wie man eine Liste zu verwenden, gehen wir zurück auf die Mozilla-Website und machen eine Suche nach ungeordneter Liste, die das ul Tag ist. Das ist die, die wir gerade hier brauchen. Wie viele Elemente haben wir die ungeordnete Liste, die der Wrapper ist, und dann innerhalb verschachtelt, haben wir jedes unserer Elemente in diesem li-Tag umgeben. Dieses spezielle Beispiel ist etwas komplexer. Es hat auch eine weitere ungeordnete Liste, die innerhalb dieses Käselistenelements verschachtelt ist. Sie können an dem Beispiel oben auf der rechten Seite sehen, dies wird eine verschachtelte ungeordnete Liste zur Verfügung stellen. Aber alles, was wir für unser Beispiel interessieren, ist diese einzige ungeordnete Liste, die unsere Listenelemente enthält. Zurück zum Projekt werden wir unseren ersten Abschnitt innerhalb unseres ersten div erstellen. Erstellen Sie die ungeordnete Liste für den Wrapper, und platzieren Sie dann in alle unsere Listenelemente. Der erste, genau wie wir hier sehen werden, ist populär, und dann der zweite ist das, was neu ist. Also werden wir das Listenelement erstellen. Der Text der populären. Dann wird der zweite sein, was neu ist. Speichern Sie dies, aktualisieren Sie den Browser, und es gibt unsere beiden Listenelemente. Genau wie bereits erwähnt, da dies eine ungeordnete Liste ist, werden wir einen Aufzählungspunkt neben jedem dieser sehen, aber wir werden diese seltsamen CSS sehr bald entfernen. Wenn Sie diese Seite index.html derzeit nicht geöffnet haben, denken Sie daran, dass Sie mit der rechten Maustaste auf den Seitennamen , den Pfad kopieren und in die Registerkarte einfügen können. Stattdessen können Sie in die Projekte gehen, in den Rezepteordner, und doppelklicken Sie dann auf die Seite Index. Alternativ können Sie aucheine Live-Servererweiterung verwenden, wenn Sie diesen Browser nicht nach jeder der gespeicherten Änderungen aktualisierenmöchten eine Live-Servererweiterung verwenden, wenn Sie diesen Browser nicht nach jeder der gespeicherten Änderungen aktualisieren . Die Möglichkeit, dies innerhalb von Visual Studio Code zu tun, besteht darin, auf die Erweiterungsschaltfläche zu gehen und dann nach Live-Server zu suchen. Das hier ist eine. Ich habe dies bereits in Visual Studio Code installiert, aber wenn Sie dies nicht tun und Sie diese Erweiterung verwenden möchten, müssen Sie oben installieren und aktivieren. Sobald dies erledigt ist, müssen Sie möglicherweise auch Visual Studio Code neu starten. Sie sollten dann eine „Go Live“ -Taste am unteren Rand haben. Klicken Sie darauf. Dies öffnet dann die Seite innerhalb des Browsers, und jetzt wird jedes Mal, wenn wir eine Änderung an einer unserer Websites vornehmen, diese automatisch aktualisiert. Als Nächstes gehen wir zum mittleren Abschnitt über, der ein Bild und auch unseren Website-Titel enthält. Dazu werden wir auf eines der Bilder verlinken, die mit diesem Kurs zur Verfügung gestellt worden waren, und dann unseren Titel als Überschrift festlegen. Nach unserem ersten div springen Sie in unseren zweiten div Abschnitt, und dann fügen wir unsere Elemente von oben nach unten hinzu. Das erste ist unser Bild, das das img-Element ist, und ein Bild ist eines der Elemente, das kein schließendes Tag hat. Dies liegt daran, dass wir keine Inhalte darin verschachteln. Alles, was wir tun müssen, ist, diese Attribute zu nutzen. Das erste Attribut ist die Quelle, und das ist der Ort unseres Bildes. Dies ist alles relativ zu unserer aktuellen Indexseite. Derzeit sind wir innerhalb der index.html, und nebenbei haben wir unseren Bilderordner. Schritt 1 ist es, in die Bilder zu gehen und dann Schrägstrich, und wir können jetzt jedes der Bilder innerhalb dieses Ordners wählen. Was wir brauchen, ist der Chefs-Hat, und das ist eine SVG-Datei, und das ist wirklich nützlich, um unsere Bilder nach oben und unten zu skalieren, ohne jegliche Qualität zu verlieren. Danach haben wir auch den ALT-Text , der ein alternativer Text ist, der angezeigt werden kann, wenn dieses Bild nicht angezeigt werden kann, und dies ist aus mehreren Gründen nützlich. Wenn das Bild beispielsweise aus irgendeinem Grund nicht heruntergeladen werden kann, wird dieser ALT-Text an Ort und Stelle angezeigt. Auch für die Barrierefreiheit, wenn Benutzer einen Screenreader anstelle eines herkömmlichen Browsers verwenden , wird dieser Alt-Text an Ort und Stelle ausgelesen, also stellen Sie sicher, dass dies beschreibend ist. Ich werde Chef-Hut-Logo sagen, schließen Sie die Seitenleiste, und das ist speichern und alt in den Browser. Da ist, wo Chefs-Hut jetzt erscheinen. Jetzt, im Moment, machen Sie sich keine Sorgen um die Positionierung und auch das Layout. Wir werden das alles in ein wenig aufstellen, wenn wir auf unser Stylesheet gehen. Als nächstes, kurz nach unserem Bild, knapp darunter, aber immer noch innerhalb unseres div-Abschnitts, werden wir jetzt eine Level-1-Überschrift verwenden. Dies ist die h1, und mit HTML können wir Überschriften von Level 1 bis Level 6 hinzufügen. H1 ist die wertvollste der wichtigsten Überschrift auf unserer Website, wir sollten diese nur auf unserer Seite verwenden, bis hin zu h6, was der am wenigsten wichtige Kopf für unsere Website ist. Persönlich benutze ich am häufigsten h1 bis h4, aber das liegt ganz an dir. Drinnen hier, der Titel meiner Rezepte, speichern Sie dies, und es gibt unseren Website-Titel innerhalb dieses Abschnitts. Der letzte Abschnitt in diesem Header ist genau wie der erste Abschnitt. Auf der rechten Seite haben wir zwei zusätzliche Links. Dies ist für einreichen Rezept und auch die Mahlzeit Ideen. Sie sollten bereits wissen, wie Sie dies aus dem ersten Abschnitt machen, gehen Sie in das dritte div am unteren Rand, erstellen Sie unsere ungeordnete Liste, unseren Listeneintrag. Die erste war einreichen Rezept, der zweite Listenpunkt war für die Mahlzeit Ideen. Geben Sie dies ein Speichern und überprüfen Sie dies im Browser. Derzeit bestätigen diese Kugeln auf der linken Seite, die wir in unserem CSS entfernen werden. Wenn wir einen Blick auf die endgültige Version werfen, sehen wir, dass wir zwischen jedem dieser Abschnitte eine kleine Kugel haben. Dies ist nur, um eine Trennlinie zwischen diesen beiden Listenelementen zu platzieren, und die Art und Weise, wie wir diese hinzufügen können, besteht darin, eine HTML-Entität zu verwenden. Aus den Ressourcen des Videos schauten wir uns eine Website namens unicodetable.com an. Dieser Kerl war eine Liste von vielen verschiedenen Symbolen wie Pfeile, wie Text, Emojis, und eine dieser Entitäten ist dieser Punkt. Um dies zu sehen, können wir zu unserer Unicode-Tabelle gehen. Lassen Sie uns eine Suche nach Punkt machen, und das ist derjenige, den wir oben verwenden werden. Dies ist ein Punkt, der senkrecht in der Mitte platziert wird. Schnappen Sie sich den HTML-Code, fügen Sie das kaufmännische Und-Zeichen am Anfang und das Semikolon am Ende ein. Gehen Sie zu unserer Liste, und dann zwischen unseren ersten beiden Links, werden wir dies innerhalb eines Span-Elements platzieren. Ein span Element ist so ziemlich nur ein grundlegender generischer Container. Wir können in alles, was wir wollen, wie Text oder sogar diese HTML-Entitäten platzieren. Eine Spanne fällt auch in ein, was als Inline-Element bezeichnet wird. Ein Inline-Element nimmt natürlich etwas Platz im Browser auf der Seite ein. Das bedeutet, ihm Raum dafür zu geben. Wenn nicht, würde es in die nächste Zeile fallen. Dies ist das Gegenteil von etwas wie einem div, das ein Block-Level-Element genannt wird. Das bedeutet, unabhängig von der Größe des Inhalts, würde er natürlich auf eine eigene Zeile fallen. Wir können dies sehen, wenn wir unseren ersten Abschnitt betrachten, und dann ist der zweite Abschnitt auf seiner eigenen Linie und das gleiche für den dritten Abschnitt auf der Unterseite. Kurz bevor wir das einpacken, fügen wir diese Punkte auch dem dritten Abschnitt unten hinzu. Platzieren Sie in unserer Spanne, platzieren Sie in den Entitätscode, und unser Punkt erscheint in unseren beiden Abschnitten. Gut. Dies ist nun der HTML für unseren Header Abschnitt abgeschlossen. Es sieht im Moment nicht so toll aus, aber das wird alles behoben sein, wenn wir zum Stylingbereich kommen. Aber kurz bevor wir unser Styling und Layout zu diesem Abschnitt hinzufügen, werden wir im nächsten Video einen Blick darauf werfen, wie wir einige zusätzliche Seiten hinzufügen und auch unsere Listenelemente in Links umwandeln können . 8. Links und zusätzliche Seiten: dieser endgültigen Version unseres Projekts Wenn wir indieser endgültigen Version unseres Projektsden Mauszeiger über einen dieser Listenelemente bewegen, können wir auch auf diese klicken und auf eine andere Seite weitergeleitet werden. Nun hat jede dieser Seiten, auf die wir verlinken werden, keinen bestimmten Inhalt. Aber wir können sehen, dass dies eine beliebte Rezepte-Seite ist. Wir haben die Neuheiten, wir haben die Seite Rezept einreichen und auch die Essensideen. Aber derzeit, wenn wir zu unserer Version nur hier gehen, können wir nicht auf einen dieser Listenelemente klicken. Um dies zu tun, müssen wir jeden unserer Listenelemente in einen Link verwandeln. Ein Link oder ein Hyperlink wird in HTML erstellt, indem wir unseren Abschnitt in das ein Element von auf der Mozilla-Website umschließen , können wir in dem Beispiel sehen, dass wir eine ungeordnete Liste haben. Dies hat einige Listenelemente nur innerhalb, genau wie wir in unserem Projekt haben, aber der Unterschied liegt innerhalb dieses Listenelements, wir haben auch in einem Element verschachtelt. Dies ein Element hat auch dieses href Attribut. Dies ist der Schlüssel zum Erstellen eines Links, da wir dem Browser genau mitteilen müssen, wo wir verlinken möchten. Gehen wir zu unserem Projekt und replizieren dies in unserem Header. Zuallererst müssen wir den Text aus dem Listenelement ausschneiden und dann ein Element erstellen. Es wird automatisch das href-Attribut hinzufügen. Da dies innerhalb der a Elemente Öffnen und Schließen Tag erforderlich ist, können wir zurück in den populären Text hinzufügen und dies wird im Browser angezeigt. Nun, für die href, können wir jeden Link innerhalb von hier hinzufügen, den wir als Link zu einer Website wechseln möchten, sagen wir Wikipedia, und standardmäßig wird ein Link unterstrichen und mit einer anderen Farbe erscheinen. Wir können auch den Mauszeiger darüber bewegen und der Cursor ändert sich zu einem Zeiger. Wenn wir darauf klicken, wird es jetzt mit unserer externen Seite verlinkt. Gehen wir zurück. Aber natürlich wollen wir nicht auf Wikipedia verlinken. Wir möchten auf einige Seiten innerhalb unserer Website verlinken. Wenn wir die Seitenleiste öffnen, haben wir derzeit nur diese eine Indexseite. Was wir neben unserer index.html tun müssen ist einige neue HTML-Seiten zu erstellen, auf die wir verlinken. Lassen Sie uns auf die neue Schaltfläche „Datei“ klicken. Ich werde für jede dieser vier Seiten einen Link erstellen. Der erste, wir können ihm einen beliebigen Namen unserer Wahl geben. Dies wird für die beliebte Seite sein, und dies muss die Punkt-HTML-Erweiterung haben. Wir brauchen auch drei weitere. Der nächste ist für new.html. Nummer drei ist für die meal-ideas.html. Das letzte ist, unser Rezept einzureichen. Lassen Sie uns diesem einen Namen submit.html geben. Jetzt haben wir einige verschiedene Seiten Link zu. Stellen Sie nur sicher, dass alle diese Seiten neben der Indexseite sind und nicht innerhalb des Image-Ordners oder anderer Ordner verschachtelt sind. Sie können voran gehen und so viele Inhalte auf jeder dieser Seiten erstellen, die Sie möchten. Aber im Moment werde ich nur einen einfachen Text hinzufügen, damit wir sehen können, welche Seite im Browser geladen wurde. Für die Seite „Senden“ werden wir nur einen einfachen Text hinzufügen, aber zuerst fügen wir die grundlegende HTML-Struktur hinzu. Sie könnten fortfahren und die gleiche Struktur hinzufügen , die wir innerhalb dieser Indexseite verwendet haben. Sie können dies alles manuell eingeben, oder wenn Sie Visual Studio Code verwenden, können wir die Emmet-Verknüpfung verwenden. Um dies zu tun, geben wir html:5 ein, drücken „Enter“. Dies wird für uns geschaffen. Alles, was wir tun müssen, ist, den Titel des Dokuments zu ändern. Dies ist Senden Sie ein Rezept. Dann fügen Sie im Körper etwas Text im p-Element hinzu, nur damit wir sehen können, welche Seite geladen wurde. Ich werde sagen, Rezeptseite einreichen. Speichern Sie diese Datei mit Command oder Control S. Gehen wir nun zu Meal Ideas. Wieder, html:5, drücken Sie „Enter“. Ändern Sie den Titel, fügen Sie unseren Text hinzu. Speichern Sie diese Datei und dann die Schaltfläche Neu, die für unsere Seite Was ist neu, fügen Sie die grundlegende Struktur, den Titel und etwas Text, also Was ist neu Seite. Speichern Sie dies und dann unsere letzte, die die popular.html ist. Der Dokumenttitel der populären Rezepte, und dann der Text. Speichern Sie diese und jetzt zurück zu unserer index.html. Jetzt haben wir vier verschiedene Seiten, auf die wir verlinken können. Runter zu unserem acht Element und innerhalb der href. Da diese Seiten neben unserer Index-Seite sind, können wir einfach den Namen eingeben, und in diesem Fall ist es die popular.html. Als nächstes haben wir What's New, setzen Sie dies auf das A-Element. Die Seite dafür war die new.html. Sie dann zwischen dem öffnenden und schließenden Tag den Text ein. Gehen wir runter, und wir machen das noch zwei Mal. Der nächste war Rezept einreichen, ziehen Sie das heraus. Platzieren Sie in unserem Link, der auf submit.html zeigen wird, fügen Sie in unserem Text hinzu. Endlich haben wir die Essensideen. Dies ist meal-ideas.html, fügen Sie den Text ein und speichern Sie diese Datei. Rüber zum Browser. Wir haben jetzt vier Links im Inneren von hier. Lassen Sie uns das beliebte probieren. Dieser jetzt gut verlinkt, popular.html. Als nächstes, Was ist neu, wir können sehen, dass das in Ordnung ist. Senden Rezept, und dann schließlich die Mahlzeit Ideen. Das letzte, was ich tun werde, ist auch dieses Rezept Titel nur hier zurück zu unserer Index-Seite zu verlinken . Um dies zu tun, lassen Sie uns unsere Ebene ein Kopf in mit Command oder Control X, fügen Sie in unserem Link. Dies wird zurück auf die index.html zeigen, fügen Sie es in unsere Ebene ein Kopf ein, klicken Sie darauf. Dies wird nun auf unsere Index-Seite zurückverlinken. Wenn wir wollten, könnten wir unseren Header-Abschnitt greifen. Lassen Sie uns all dies hervorheben und kopieren Sie mit Command oder Control C, gehen Sie zu der beliebten Seite, und wir könnten dies auch innerhalb jeder unserer anderen Seiten hinzufügen. Wenn wir dies einfügen, klicken Sie auf „Beliebt“ Link. Wir sehen nun auch diesen Header im Inneren von hier. Klicken Sie auf „Meine Rezepte“. Dies wird uns dann wieder auf unsere Homepage zurückkehren. Wie bereits erwähnt, können Sie durch jede dieser zusätzlichen Seiten gehen und auch weitere Inhalte hinzufügen, wenn Sie möchten. Aber als nächstes werden wir fortfahren, um diesen Header viel schöner aussehen zu lassen, indem wir etwas CSS hinzufügen. 9. So gestaltest du den Header: Jetzt haben wir einige HTML zu unserer Seite hinzugefügt und insbesondere diesen Header-Abschnitt oben. Wir werden nun mit dem Hinzufügen von CSS fortfahren, um diesem Header-Abschnitt etwas Styling und Layout hinzuzufügen. Wenn wir uns die endgültige Version gerade hier ansehen, wird dies der Abschnitt oben sein, an dem wir arbeiten werden. Am Ende dieser Lektion sollte unser Kopfzeilenabschnitt genau so aussehen. Um dies zu tun, werden wir das Layout unserer freien Div-Abschnitte ändern, um über die Seite zu gehen , anstatt übereinander gestapelt zu werden, wie wir es derzeit haben. Um zu beginnen, gehen wir über unsere styles.css, die wir bereits erstellt haben, gehen, und wir haben dies bereits mit unserer Indexseite verknüpft. Wir wollen nicht nur hier verlinken, also was wir tun müssen, ist auf einen dieser Selektoren im Körperabschnitt zu zielen. Wenn wir den Header-Abschnitt anvisieren wollen, können wir, das div, die Listen, die einzelnen Listenelemente, wir können alles auf dieser Seite anvisieren. Aber zuerst werden wir bei dem sehr äußeren Element beginnen, das dieses HTML-Element gerade hier ist. Eine Möglichkeit, eines dieser Elemente anzusprechen, besteht darin, es genau so zu schreiben, wie wir es in HTML tun. Dann öffneten wir die geschweiften Klammern genau so. Dann gelten alle Stilregeln, die wir dazwischen anwenden, für unser HTML. Das erste, was wir tun werden, ist, eine Hintergrundfarbe zu setzen. Diese Hintergrundfarbe wird auf das vollständige Dokument angewendet. Ich werde das einfach halten und dies auf eine weiße Farbe setzen. Wenn wir dieser Datei ein Mitspracherecht geben, sollten wir keine Änderungen am Browser sehen, da dies bereits eine weiße Farbe ist. Aber das ist die Hintergrundfarbe, die wir auf der linken Seite sehen können, auf der rechten Seite. Das ist auch ganz weiß, aber der Unterschied liegt in der Mitte. Wir werden jetzt alle HTML-Inhalte im Hauptteil enthalten zu greifen. Ändern Sie dann die Farbe für den Abschnitt. Denken Sie daran, dass dieser Körperteil innen verschachtelt war, so dass dieser auf einem weißen Hintergrund sitzt. Dies unten, auf dem Körperteil. Dann drinnen hier, wenn wir dann die Hintergrundfarbe auf eine andere Farbe einstellen, sagen Sie dies, alles zum Browser und aktualisieren. Aber jetzt sehen, der Körper hat eine andere Hintergrundfarbe, meist gegangen, um den Live-Server durch Klicken auf „Go Live“ setzen, schließen Sie diese erste Version nach unten. Dies erspart uns nur, den Browser nach jeder Änderung zu aktualisieren. Neben diesen Farben, die Sie hier gesättigt haben, können wir auch verschiedene Farbcodes verwenden. Um dies zu tun, wenn wir zu Google gehen und eine Suche nach HTML Color Picker, haben wir verschiedene Optionen, die wir verwenden können, um eine Farbe zu setzen. Wir können entweder diesen Farbwähler verwenden, der nur hier auftaucht, oder es gibt auch eine gute auf den W3Schools Websites. Die Werte sind auf der rechten Seite vorbei, die mit diesem Hash beginnen. Dies sind sechsstellige Codes, die einen Hex-Wert ausmachen. Wir können jede Farbe auswählen, genau wie dieses Blau. Wir können dann den Hex-Wert an der Spitze sehen. Wir können auch eine RGB-Farbe sehen , die die roten, grünen und blauen Werte alle gemischt sind. Auch ein HSL Wert , der den Farbton, die Sättigung und die Helligkeit darstellt. Dies sind alle gültige CSS-Werte. Aber für diese Farbe werde ich mich an den Hex-Wert halten. Der Hash und das Volumen, das ich verwenden werde, werden ede6e6 sein. Dies gibt uns die unterschiedliche Hintergrundfarbe. Wenn Sie Visual Studio Code verwenden, können Sie auch den Mauszeiger über diese Hintergrundfarbe bewegen, und wir können einen anderen Wert aus dieser Farbauswahl auswählen. Oben sehen wir, dass dies ein Hex-Wert ist oder wir können auch auf diesen klicken, um auf den HSL Wert, einen RGB Wert, genommen zu werden , wenn Sie ein anderes Format bevorzugen. Weiter mit dem Körper, das nächste, was wir tun wollen, ist, die Schriftfamilie für dieses Projekt zu setzen. Die Schriftfamilie ist der Stil von Texten, die wir verwenden werden. Ich werde Arial holen. Dies ist eine ziemlich einfache Schriftart, die ich für dieses Projekt auswählen werde. Wir können verschiedene auswählen, wenn Sie es vorziehen. Dies ist der erste Auswahlwert und dann durch Komma getrennt können Sie verschiedene Werte hinzufügen, die Sie hinzufügen möchten. Wenn die vorherigen Schriftfamilien nicht gefunden werden, sind die nächste Helvetica und dann serif. Was hier passiert, ist, dass wir nach der Arial-Schriftart suchen , wenn diese auf dem Benutzersystem verfügbar ist. Wenn nicht, wird es auf die Helvetica zurückfallen, und wenn dieses nicht gefunden werden konnte, wird es auch auf eine generische sans-serifen-Schriftart zurückgreifen. Darüber hinaus können wir auch die Standardschriftgröße festlegen , die Sie für dieses Projekt verwenden möchten. Sobald Sie für 18 Pixel gehen, können wir dies ändern, um einen beliebigen Wert zu sein, oder wir können diesen Wert auch für jeden unserer Abschnitte überschreiben. Dies ist nur im Grunde ein Ausgangspunkt. Als nächstes wird der Rest des Inhalts wollen wir die Breite dieses Abschnitts auf einen bestimmten Wert beschränken . Ich werde für dieses Beispiel 960 Pixel gehen, das ein fester Wert ist, der sich nicht ändert. Wenn wir den Browser verkleinern, sehen wir, dass dies von der Kante geschoben wird. Aber wir werden uns sehr bald ein Responsive Design ansehen. Wir möchten auch, dass sich der Abschnitt in der Mitte der Seite befindet. Die Art und Weise, wie wir dies tun können, ist eine gewisse Marge. Rand ist der Raum, in dem außerhalb eines Elements angezeigt wird, so dass alles, was Sie innerhalb des Körperabschnitts hinzufügen, außerhalb dieses farbigen Abschnitts angezeigt wird . Lasst uns das mal aussuchen. Wenn wir 10 Pixel hinzufügen, wird dies auf alle vier Seiten wirksam. Natürlich wollen wir das im Moment nicht, weil diese gegeneinander kämpfen werden. Wir haben die gleichen Mengen oben, unten und auch links und rechts. Was wir tun können, ist vier separate Werte hinzuzufügen. Dies wird im Uhrzeigersinn von oben, rechts, unten und links verlaufen . Von oben ändern wir dies in 50 Pixel, eine rechte, eine untere und die linke. Wenn also nur 50 Pixel jetzt auf den oberen Teil des Körperabschnitts angewendet werden, aber was wir genau wie die endgültige Version tun wollen , ist, keinen Rand oben und unten zu haben, sondern den ganzen Raum gleichmäßig auf der linken und rechten Seite aufzuteilen. Die Art und Weise, wie wir dies tun können, ist, indem wir Nullmarge auf der Oberseite anwenden , Nullmarge unten, und dann können wir den anderen Wert für die linke und die rechte festlegen, die den Raum gleichmäßig aufteilen. Die obere, wir wollen Null, das Recht von Auto, Null auf der Unterseite, und dann automatisch auf der linken Seite, und diese Auto-Werte werden jetzt drücken Sie dies in die Mitte. Wenn wir wollen, können wir auch eine kürzere Version nutzen, die zwei Werte anwenden soll. Der erste wird oben und unten sein, und dann ist der zweite Wert der linke und der rechte. Sie dies speichern, ergibt sich genau der gleiche Effekt. Als nächstes werden wir den Header-Abschnitt und die freien divs ansprechen, die innen verschachtelt sind. Also dieser Header umhüllt alle drei unserer Abschnitte, dann haben wir ein div, das jedem folgt. Das erste, was zu tun ist, ist, diesen Header-Abschnitt zu greifen, der der Wrapper ist, dann werden wir den Anzeigetyp einstellen. Der Anzeigetyp ermöglicht es uns, die Standardanzeige für jedes Element zu ändern. Wir haben bereits erwähnt, dass bestimmte Elemente in eine Kategorie fallen können. Ich werde den Blocktyp und auch den Inline-Typ erwähnen. Wenn Sie sich erinnern, wird Block die volle Breite der Seite aufnehmen und auf einer neuen Zeile beginnen, genau wie diese drei Abschnitte, die wir bereits haben. In der Reihe, wie es klingt, platzieren wir die Elemente nebeneinander auf der Seite, wenn Platz dafür vorhanden ist. Aber wir werden einen Anzeigetyp namens flex nutzen. Dadurch wird die CSS-Flexbox genutzt, um das Auslegen unserer Zitronen viel einfacher zu machen. Wenn wir dies speichern, werden wir sofort sehen, dass alle drei dieser div-Abschnitte auf der Seite platziert werden. Dies geschieht, weil wir mit der Flexbox den Inhalt einstellen können, der sogar in horizontaler oder vertikaler Richtung ausgelegt ist. Standardmäßig verwendet das Flexbox die Flexrichtung für den Wert der Zeile. Dies bedeutet, dass alle Elemente auf der Seite in einer Zeile platziert werden. Wenn Sie eine Sprache von links nach rechts verwenden, so wie Englisch wird dies von links nach rechts sein. Wir können auch die Flex-Richtung ändern, um Spalte zu sein. Dadurch werden alle Elemente vertikal gestapelt. Da Zeile standardmäßig ist, können wir dies auslassen und davon ausgehen, dass dies bereits gesetzt ist. Als nächstes werden wir die Höhe dieses Headers auf einen bestimmten Wert beschränken. Wir können dies mit der hohen Eigenschaft tun. Dann werde ich den Wert von 150 Pixeln verwenden. Dann müssen wir sicherstellen, dass alle drei Abschnitte gleichmäßig verteilt sind. Wir möchten, dass sie alle den gleichen Breitenwert haben. Wir können dies tun, indem wir zurück in unser Stylesheet gehen. Auch hier werden wir den Header anvisieren. Aber dieses Mal verwenden wir das Größer-als-Symbol und wählen dann das div. Dies bedeutet, dass alle Stile, die wir hier anwenden, nur für irgendwelche div-Elemente gelten, die sofort unserem Header folgen. Wir können sehen, wenn wir auf die Index-Seite gehen, haben wir unseren Header. Dann wunderbar innen verschachtelt haben wir diesen div Abschnitt. Wir haben auch diese Seite, und dann unseren dritten Abschnitt. Das Styling gilt für alle drei dieser Abschnitte mit diesem Code. Da wir bereits den Header-Abschnitt haben, der die übergeordnete Menge ist , um die Flexbox zu verwenden, können diese untergeordneten Elemente, die innerhalb verschachtelt sind, auch Flex-Werte verwenden. Einer davon ist einfach Flex. Wenn wir den Wert auf eins setzen, wird dieser Flex-Wert von eins jetzt für alle drei unserer divs gelten. Dies bedeutet, dass alle drei dieser Abschnitte den gleichen Platz haben. Wenn wir es ändern würden, um einen unserer Werte zu sein, der zwei ist, werden wir genau die gleiche Wirkung haben, da sie alle gleich sind. Allerdings wird die Differenz auftreten, wenn wir einen anderen Flex-Wert auf einen anderen Abschnitt anwenden würden. Wenn wir zum Beispiel diesen Logoabschnitt in der Mitte anvisieren und dann einen Flex-Wert von zwei platzieren, würde dies den doppelten verfügbaren Platz wie in diesem Abschnitt nur hier übernehmen. Aber wir wollen, dass diese gleich sind, also ist das vorerst in Ordnung. Danach werden wir auch die Textausrichtung so einstellen, dass sie in der Mitte liegt. Dies bedeutet, dass alle Texte, die in diesem div enthalten sind, in diesem Abschnitt zentriert werden. die endgültige Version ansehen, wollen wir auch, dass diese beiden nach unten geschoben werden. Ein Weg, wie wir dies tun können, und da wir immer noch die Flexbox mit den Eltern hier verwenden, können wir keine Eigenschaft namens align-self verwenden. Kurz nach dem Text ausgerichtet, fügen Sie im Align-Selbst-Selektor hinzu, und wir haben die verschiedenen Werte, die wir wählen können. Jetzt wird der Wert, den wir hier hinzufügen werden, vertikal angewendet. Dies liegt daran, wie wir bereits gesehen haben, ist die Standard-Flexrichtung Zeile. Dies ist quer über die Seite horizontal. Align-self wird auf das Gegenteil angewendet, d. h. die vertikale Richtung, die auch als Querachse bezeichnet wird. Da wir vertikal arbeiten, wird der Flex-Stil oben sein, die Mitte wird in der Mitte sein, und das Flex-Ende wird unten sein. Dies schiebt diese jetzt auf den Grund unseres div. Wir müssen diese auch ändern, um auf der ganzen Seite zu sein, aber wir werden in einem Moment darauf zurückkommen. Wir müssen auch diese Links über die Seite gehen, und die Art und Weise, wie wir dies tun können, ist, indem wir den Wrapper, der das Listenelement ist, ausrichten . Genau wie zuvor, wenn wir den Anzeigetyp des Headers so einstellen , dass Flex-Box verwendet wird, werden wir dafür die Standard-Anzeigezeit für alle Listenelemente der Wert von Inline ändern . Wenn wir dies speichern, werden wir sofort sehen, dass sich diese zu einem Inline-Anzeigetyp ändern , anstatt wie zuvor übereinander zu stehen. Als nächstes gehen wir zu diesem mittleren Abschnitt und wir werden das Bild ein wenig kleiner machen, also greifen Sie unseren Header-Abschnitt. Dann werden wir einen anderen Selektor verwenden, der genau so aussieht. Zuvor haben wir erwähnt, dass, wenn wir diesen Größer-als-Pfeil verwenden, dies jedes div auswählen wird, das unmittelbar unseren Header-Elementen folgt. Wir konnten nicht genau dasselbe für diesen Abschnitt tun, da das Bild kein direkter Kanal unseres Headers ist. Dieser Header-Abschnitt enthält nur unsere divs, was wir stattdessen tun können, ist, dies zu verlassen und dies wird jedes Bildelement greifen, das sich innerhalb des Header-Abschnitts befindet. Dazu beschränken wir die Größe des Kopfzeilenbildes auf eine maximale Breite von 100 Pixel. Wir können jetzt sehen, dass das Bild jetzt fast die richtige Größe hat, aber ein Teil der Abstände und auch die Größe des Website-Titels schiebt dies immer noch von oben auf der Seite. Anstatt dies kleiner zu machen, gehen wir zu unserer Überschrift der Ebene eins, die unser Website-Titel ist, der innerhalb dieses mittleren div platziert ist, also nur hier. Für diesen Abschnitt möchten wir zunächst den Standardabstand entfernen, der direkt darunter liegt. Wenn wir mit der rechten Maustaste klicken und zum Inspektor gehen, öffnen wir die Entwicklertools, klicken Sie auf den Pfeil in der Ecke. Wir können den orangefarbenen Abschnitt oben und unten sehen. Nun, wenn wir darauf klicken und dann auf der rechten Seite und dann innerhalb des Elementabschnitts schauen , gehen Sie in die Stile. Dann unten können wir sehen, dass wir einige Marge haben , die oben und unten angewendet wurde. Die Überschrift der Ebene eins, zusammen mit anderen Elementen, haben oft einige Standard-Rand und Padding durch den Browser angewendet. Wir können dies auch überschreiben, indem wir unsere eigenen Margenwerte festlegen. Wir können dies auf Null zurücksetzen und wir können sehen, dass dies jetzt entfernt wurde. Allerdings möchten wir ein wenig Rand auf der Unterseite und auch oben anwenden, so dass wir dies auf zehn Pixel ändern können. Jetzt haben wir den Abstand entfernt, wir haben fast das Bild wieder auf der Seite. Das nächste, was wir tun werden, ist, die Schriftgröße auf 20 Pixel zu setzen. Dies reduziert dann die Schriftgröße und lässt jetzt genügend Platz für unser Bild. Als nächstes gehen wir zu diesem linken und rechten Abschnitt und stylen unsere ungeordnete Liste. Wenn Sie bemerken und insbesondere, wenn wir in die Entwickler-Tools gehen, wenn wir auf den Inspektor klicken und dann den Mauszeiger über einen der Abschnitte bewegen, können wir sehen, dass diese ungeordneten Listenelemente nicht in der Mitte unseres div platziert werden. Dies liegt daran, dass, wenn wir unsere ungeordnete Liste auswählen, wir durch den grünen Abschnitt oben auf der linken Seite sehen können, wir haben einige Standard-Polsterung, und genau wie die Ebene eins Überschrift mit dem orangefarbenen Abschnitt, wir haben auch einige -Marge auch angewendet. Wieder, wenn wir darauf klicken, können wir auf das Diagramm unten rechts gehen. Wir können die Größe der Elemente in der Mitte sehen, eine Polsterung, die auf der linken Seite angewendet wird, die derzeit 40 Pixel, und dann den Rand, der oben und unten ist. Was wir tun werden, ist, zunächst, setzen Sie den Rand auf einen Wert von 10 Pixel. Dies ergibt dann den gleichen Abstand von unten wie die Überschrift. Dann verschieben wir diesen Standard-grünen Padding Abschnitt so dass unsere Links in der Mitte platziert werden. Tun Sie das. Wie wir gerade gesehen haben, wird dies auf die ungeordnete Liste angewendet. Zuerst setzen wir den Rand auf 10 Pixel oben und unten und dies sollte dann mit unserer Überschrift ausrichten. Wir setzen Null auf der linken und rechten und entfernen dann alle Standard-Polsterung mit einem Wert von Null. Dies und zurück zum Browser, können wir jetzt sehen, ob wir den Mauszeiger über den Padding bewegen, wir haben keine Werte angewendet. Der Rand, dieser wurde nun auf 10 Pixel oben und unten reduziert, was dann mit unserer Überschrift ausgerichtet wird. Als Nächstes, da alle diese Elemente Links sind, haben diese eine Standardfarbe und sie haben auch diese unterstrichen. Um dies zu entfernen, müssen wir unseren Link auswählen, dieses A-Element ist, das unseren Titel umgibt, und auch unsere Listenelemente. Schnappen Sie sich das. Um die Unterstreichung zu entfernen, müssen wir zuerst die Textdekoration einstellen. Wir haben Optionen, um Dinge wie die Farbe zu ändern, aber ich werde dies nur mit dem Wert von keiner entfernen. Als nächstes werden wir die Textfarbe einstellen. Ich werde das auch im Körperbereich einrichten. Dies gilt auch für andere Elemente. Die Art und Weise, wie wir Farbe zu unserem Text hinzufügen können, ist einfach die Farbe Eigenschaft. Von hier aus möchten wir wieder einen Hex-Wert von 373535 verwenden. Dies gilt für den Rest der Website, wenn wir unser neues Element erstellen. Wie wir sehen können, gilt dies nicht für unsere Links, daher müssen wir dies auch auf unsere A-Elemente anwenden, indem wir genau dasselbe tun. Der Wert war 373535, speichern Sie diesen. Dies gilt nun für alle unsere Links. Das allerletzte Stück Styling, das ich für diesen Header verwenden werde, besteht darin, die Farbe dieses Links zu ändern, wenn die Maus über bewegt. Genau wie wir in der endgültigen Version hier sehen, wenn wir den Mauszeiger über einen dieser Links bewegen, erhalten wir eine Farbänderung. Um dies zu tun, müssen wir eine Pseudo-Klasse auf unser A-Element anwenden. Genau wie oben wählen wir unsere Elemente aus, verwenden einen Doppelpunkt und eine Pseudo-Klasse wird ein anderes Styling für einen anderen Zustand anwenden. Mit Staat meinen wir Dinge, wie wenn ein Link besucht oder geklickt wurde, wenn er nicht besucht wurde, wenn die Maus über einen dieser Links schwebt, und auch verschiedene Hover. Dafür werden wir den Hover-Zustand verwenden, also wenn die Maus über einen dieser Links schwebt, aber ich werde die Textfarbe ändern. Auch hier sind wir frei, verschiedene Typen oder Werte zu verwenden , die Sie möchten, aber für dieses Beispiel werde ich es mischen und einen RGB-Wert verwenden, wo wir innerhalb von drei separaten Werten platzieren. Die erste ist rot, das ist 226, das Grün von 74 und der blaue Wert von 74. Wir können an der Vorschau sehen, dass dies uns diese rote Farbe gibt. Über das Projekt, und unser Hover wirkt für jeden dieser Links. Dies ist jetzt das gesamte Styling, das auf unseren Header-Abschnitt angewendet wird. Wenn Sie möchten, können Sie diese Werte und Farben umspielen und Dinge ändern, wenn Sie möchten. Als nächstes werden wir die Seite nach unten bewegen und einige weitere diese Inhaltsabschnitte erstellen. 10. Hauptinhaltsbereich: Wenn wir von diesem Header-Abschnitt, an dem wir gearbeitet haben, nach unten gehen wir nun den Inhalt direkt unten hinzufügen. Wenn wir einen Blick auf die endgültige Version nur innerhalb der anderen Browser-Tab werfen, wird dies die beiden Abschnitte sein, die wir erstellen werden. Der erste Abschnitt wird ein Hintergrundbild haben, und dann wird eine Überschrift haben, und auch eine Chance, eine E-Mail einzugeben und diese dann einzureichen. Natürlich wird dies im Moment nicht, weil dies nur HTML ist, und Sie würden einen Back-End-Dienst benötigen, damit dies funktioniert. Aber im Moment konzentrieren wir uns nur auf das Aussehen und das Gefühl der Website mit HTML und CSS. wir nach unten gehen, haben wir einen zweiten Abschnitt direkt darunter, der diese drei verschiedenen Abschnitte hat. Dies gibt uns die Möglichkeit, einen Blick auf verschiedene Arten zu werfen, wie wir Elemente positionieren können. Wir überlagern diesen Text oben auf dem Bild. Werfen Sie einen Blick auf einige dieser Techniken. Um zu beginnen, gehen wir zurück zu unserer index.html Seite. Wenn wir dann knapp unterhalb des Kopfzeilenabschnitts nach unten scrollen und etwas Platz machen, stellen Sie sicher, dass dies immer noch über dem Körper liegt. Dies werden wir eine neue Elemente namens Abschnitt verwenden. Der Abschnitt wird der Wrapper für alle unsere ersten Abschnitt sein, die Sie gerade hier sehen. Jetzt könnten wir ein Bild hinzufügen, genau wie wir in der Kopfzeile für das Logo mit dem Bildelement verwendet werden. Aber für dieses Hintergrundbild zeige ich Ihnen eine andere Möglichkeit, ein Bild einzufügen. Wir werden uns das im nächsten Video über CSS ansehen. Wir fangen mit unseren Überschriften an und das wird eine Level-2-Überschrift sein, dann wird diese Ebene 3 sein. Die h2, und drücken Sie dann die Eingabetaste, und dann den Text der wöchentlichen Rezepte in Ihren Posteingang. Ich werde diese Datei speichern und dann den Live-Server öffnen, genau wie wir es in früheren Videos angeschaut haben. Es gibt unsere Texturen hier, und es sieht aus, als wäre es innerhalb des Kopfzeilenabschnitts wegen der Hintergrundfarbe. Dies befindet sich jedoch in einem eigenen Abschnitt unterhalb der Kopfzeile. Wenn wir schauen unsere style.css und dann scrollen Sie nach oben zum Körperbereich, hier haben wir die Hintergrundfarbe für den ganzen Körper eingestellt. Dies gilt für alle unsere Inhalte, aber dies wird durch ein Hintergrundbild im kommenden Video ersetzt. Als nächstes wird der Text, der jetzt Anmelden sein wird, in die Indexseite. Dieser wird eine Stufe 3 Überschrift sein, setzen Sie den Text von Jetzt anmelden. Da wir einen Live-Server verwenden, wird dieser automatisch aktualisiert, wenn wir speichern. Um die Eingabe des Benutzers einzugeben, werden wir ein Formular verwenden. Das Formular ist eine Möglichkeit für den Benutzer, mit unserer Website zu interagieren und einige Werte einzugeben. Sie können Formulare in der Vergangenheit verwendet haben, wo Sie sich per E-Mail anmelden, können Sie Ihren Namen hinzufügen, Sie können alle Arten von Informationen wie Nachrichten, Ihr Geburtsdatum hinzufügen. Aber dieser wird einfach sein, es wird nur eine E-Mail-Eingabe und dann eine Submit-Button sein. Um dies zu tun, werden wir all diesen Abschnitt in ein Formular einschließen. Wir können dieses Aktionsattribut entfernen, da wir es während dieses Kurses nicht senden werden. Aber was wir tun werden, ist in einem Input zu platzieren. Wenn wir Enter drücken, ist der Standardtyp, den wir gegeben sind, die textbasierte Eingabe. Wie es sich anhört, ist dies eine Möglichkeit für den Benutzer, einen Textwert einzugeben, z. B. einen Benutzernamen oder vollständigen Namen. Wir werden von einer E-Mail-Eingabe Gebrauch machen. Nun, diese Art von Eingabe, die wir eingeben, wird dem Browser einen Hinweis darauf geben, welche Art von Daten wir erwarten eingegeben werden. Es kann diese Daten überprüfen und auch einige Nachrichten an den Benutzer senden, wenn der Typ der Daten ungültig ist. Wenn wir dies zum Beispiel in einen Zahlentyp ändern und dann der Benutzer einen Text eingegeben hat, würde der Browser dies auf die Annahme von Zahlen beschränken. Da dies eine Art von E-Mail ist, wenn der Benutzer auf diese Eingabe klickt, kann es auch mit einigen zuvor verwendeten E-Mails erscheinen. Gehen Sie weiter. Das nächste Attribut, das wir hinzufügen werden, ist das Aria-Label. Sobald Sie dies festgelegt haben, um gleich E-Mail zu sein. Dieses Aria-Label wird für Eingabehilfen wie Bildschirmlesegeräte verwendet. Wenn wir einen Blick auf unsere endgültige Version werfen, nur hier, sehen Sie, dass wir keine Etiketten neben unseren Eingaben haben. Oft würden Sie bei Formularen eine Beschriftung wie diese sehen, und vielleicht einen Text wie diesen, der neben der Formulareingabe angezeigt wird. Nun, wie unsere endgültige Version, wollen wir diesen Text nicht anzeigen. Wir könnten diesen Text mit CSS aus dem Browser entfernen. Es gibt jedoch einen Grund, warum wir dies nicht tun wollen, und das liegt daran, wenn ein Benutzer sehbehindert ist und diese Texturen hier nicht lesen kann, und kann ein Gerät wie ein Screenreader verwenden und ihnen mitteilen, welche Art von Eingabe dies ist. Wenn wir dies entfernen würden, würde sein Aria-Label dieses Element beschriften, um dem Bildschirmlesegerät oder Eingabehilfen einen Hinweis darauf zu geben , welche Art von Eingabe es ist. Danach ist das nächste Attribut der Platzhalter , der in diesem Feld platziert wird, bevor der Benutzer einen Wert hinzufügt. Dazu sagen wir Geben Sie Ihre E-Mail mit wenig Platz auf der linken Seite. Dieser Raum wird auch innerhalb der Eingabe reflektiert. Als nächstes wird die zweite Eingabe, die den Typ des Übermittlungsvorgangs hat. Wenn wir ein Formular wie dieses hinzufügen, müssen wir auch eine Schaltfläche Absenden hinzufügen, die dieses Formular an den Server senden wird. Hier ist nur ein ganzes. Dies ist ein ziemlich einfacher Abschnitt und alle Visuals werden im nächsten Video mit CSS erstellt werden, einschließlich dieses Hintergrundbildes. Als nächstes gehen wir nach unten, um unseren Abschnitt zu tun, der direkt darunter. Dazu erstellen wir einen neuen Abschnitt als Wrapper. Der Abschnitt wird drei divs innerhalb mit jedem dieser Bilder mit dem Text platziert haben . Das erste div, und jedes dieser divs wird zwei Elemente enthalten. Das erste ist das Bild, das Sie für den Hintergrund verwenden möchten, und die Quelle befindet sich innerhalb des Ordners Images. Dieses Bild ist eine vegatarian.jpg. Der ALT-Text. Denken Sie daran, dass dies im Browser angezeigt wird, wenn das Bild nicht geladen werden konnte. Es wird sagen, vegetarische Sektion. Dann können wir danach in den Text einfügen. Nun, wenn wir wollten, könnten wir ein p-Element verwenden oder wir könnten eine Überschrift verwenden. Dafür will in einer Level 3 Überschrift platzieren, da dies einigermaßen wichtige Abschnitte sind. Der Text ist vegetarisch. Speichern Sie das und schauen wir uns das im Browser an. Gut. Das ist unser erster Abschnitt. Mach dir keine Sorgen darüber, wie das im Moment aussieht. Wir werden das im nächsten Video viel verbessern. Das zweite div, direkt darunter, ist dies für den mittleren Abschnitt. Dies ist genau wie der Abschnitt oben mit dem Bild und auch eine Ebene 3-Überschrift. Wenn Sie wollten, gehen Sie weiter und pausieren das Video und geben Sie uns einen Sprung auf eigene Faust, wenn Sie sich dabei wohl fühlen. Wenn nicht, werde ich mit den Bildern weitermachen. Das Bild ist diesmal die quick.jpg. Der Alt-Text wird die fünfminütige Mahlzeit Abschnitt sagen. Die h3 ist die meisten fünf Minuten Mahlzeiten. Überprüfen Sie, dass alles im Browser gut aussieht. Im Moment werden diese übereinander gestapelt anstatt über die Seite zu gehen. Weil, wie bereits erwähnt, ein div ein Element auf Blockebene ist, was bedeutet, dass jedes div auf seiner eigenen neuen Zeile beginnt. Das dritte div, dieses ist für die gesunden Optionen. Platzieren Sie in das Bild. Auch hier heißt dieser Ordner im Ordner Images healthy.jpg. Der Alt-Text, sagen gesunde Optionen Abschnitt. Dann die h3 an der Unterseite, die gesunde Optionen ist. Geh runter. Da ist unser dritter Abschnitt unten. Beachten Sie, dass sich dieser Inhalt immer noch im Hauptteil befindet. Dieser graue Hintergrund gilt für alle unsere Inhalte. Es sieht im Moment nicht so toll aus, aber wir werden dies im nächsten Video beheben, wo wir etwas Stil in unsere beiden neuen Abschnitte anwenden werden. 11. So gestaltest du den Hauptinhalt: Willkommen zurück. Wir haben jetzt einige Inhalte auf der Seite, auf die wir einige CSS anwenden müssen. Nicht nur Ihr Styling, sondern wir müssen auch viel Layout-Arbeit erledigen. Wir müssen all diesen Text in der Mitte der Seite positionieren. Wir müssen ein Hintergrundbild, etwas allgemeines Styling hinzufügen, und dann in diesem Abschnitt und direkt unten mit unseren kostenlosen Bildern, und auch den Text, müssen wir diese über die Seite platzieren und auch einen Weg finden , damit dieser Text ersetzt jedes dieser Bilder, genau wie wir es in der endgültigen Version haben, gerade hier. Von oben möchten wir mit dem Anmeldebereich von in der styles.css beginnen. Aber kurz bevor wir dies tun, brauchen wir eine Möglichkeit, diesen Abschnitt tatsächlich zu greifen, damit wir etwas Styling anwenden können. Dieser gesamte Inhalt wird innerhalb dieses Abschnittelements platziert. Aber wenn wir den Abschnitt mit einem CSS packen würden, würde dies auch für den folgenden Abschnitt gelten. Was wir hier tun werden, ist das ID-Attribut hinzuzufügen. Diese ID ist ein eindeutiger Wert für dieses einzelne Element Bei der Verwendung von IDs ist es wichtig, dass wir dies nur einmal auf unserer Seite hinzufügen. Geben Sie ihm den Namen „anmelden“. Jetzt haben wir eine Möglichkeit, diesen Abschnitt in unserer CSS-Datei zu greifen. Bevor wir nun unsere Selektoren so hinzugefügt haben, haben wir sie über den Tag-Namen hinzugefügt. Wir benutzten die a, ungeordnete Liste, die h1. Aber wenn wir eine ID auswählen, verwenden wir die # gefolgt von der ID Name, die registriert wurde. Dann im Inneren von hier können wir in alle unsere CSS-Regeln einfügen, genau wie wir es oben getan haben. Das erste, was wir tun müssen, ist ein Hintergrundbild hinzuzufügen. Nun früher haben wir die Hintergrundwerte hinzugefügt. Jetzt zuvor oben haben wir die background-color Eigenschaft gerade hier verwendet. Dies ist, um die Farbe des Hintergrunds zu setzen. Aber dieses Mal, was wir tun werden, ist, das Hintergrundbild zu setzen. Dann können wir es in einer URL platzieren, die der Speicherort des Dateipfades dieses Bildes ist. Unseres befindet sich im Bilderordner und das Bild für diesen Abschnitt ist die main.jpg. Wir können sofort sehen, sobald wir speichern, dass dieses Bild jetzt als Hintergrund für diesen Abschnitt erscheint. Wir müssen auch die Höhe Eigenschaft hinzufügen, um es ein wenig größer zu machen, und ich werde meine auf 500 Pixel setzen. Dies wird uns genügend Platz geben, um den gesamten Inhalt abzudecken. Als nächstes möchten wir auch, dass dieser Text und auch die Formulareingabe in der Mitte unseres Bildes platziert werden. Eine einfache Möglichkeit, dies zu tun, ist die Verwendung der CSS-Flexbox. Genau wie zuvor setzen wir den Anzeigetyp auf „ flex“ ein und denken Sie daran, dass die Standard-Flex-Richtung Zeile ist, sodass der gesamte Inhalt auf der Seite platziert wird. Allerdings möchten wir, dass diese vertikal gestapelt werden, so dass wir die Flex-Richtung Spalte ändern können. Jetzt nutzen wir die Flexbox, wir müssen zwei neue Eigenschaften hinzufügen, um diese Elemente in der Mitte zu platzieren. Der erste ist align-items und der Wert befindet sich in der Mitte. Wenn also die Flex-Richtung auf Spalte festgelegt ist, werden die Zeilenelemente diese horizontal über die Seite zentriert. Das nächste, was wir tun müssen, ist das genaue Gegenteil, das ist, unseren Inhalt vertikal zu zentrieren. Die Art und Weise, wie wir dies tun können, besteht darin, Rechtfertigungsinhalte zu verwenden und diese in die Mitte zu legen. Okay, jetzt, wenn wir genau hinschauen, sind diese ziemlich in der Mitte, aber es sieht aus, als ob es ein bisschen mehr Abstand auf der Oberseite als unten. Der Grund dafür ist, dass es mit Browser-Standardeinstellungen zu tun hat. Wenn wir in die Inspect gehen, klicken Sie auf diese, und wir können sehen, dass die Ebene 2 Überschrift hat einige Standard-Rand oben und unten. Das gleiche mit der Überschrift Level 3, wir sehen keine auf dem Formular. Was wir jetzt tun wollen, ist, mit unseren beiden Überschriften zu arbeiten. der Indexseite wurden diese beiden Abschnitte in der Überschrift der Ebene 2 und auch in der Ebene 3 platziert. Wir können mehrere Elemente zielen, indem wir diese durch ein Komma trennen. Die h2 und auch h3, alle Stile im Inneren hier gelten für diese beiden Überschriften. Erstens, die Hintergrundfarbe, und früher haben wir erwähnt, gibt es verschiedene Arten von Farben, die wir hinzufügen können. Wir können die RGB-Werte verwenden, die wir gerade hier haben, und wir können auch einen Hex-Wert verwenden. Wir können diesen RGB-Typ auch auf rgba erweitern. Werfen wir einen Blick darauf, wie wir das hier machen können. Wenn wir rgb hinzufügen, können wir unsere regulären Werte hinzufügen, ich werde für 46 für das Rot, 39 für das Grün und auch 39 für das Blau gehen . Wenn wir dies wie erwartet speichern, sehen wir eine dunkle Hintergrundfarbe. Nun, dieser Hintergrund ist ziemlich solide und verdeckt das Bild. Was wir also tun werden, ist ein wenig Deckkraft anzuwenden. Das bedeutet, dass wir ein gewisses Maß an Transparenz anwenden können. Um dies zu tun, fügen wir den vierten Kanal, das ist ein, und das ist für Alpha, und dann zwischen Null und eins, können wir einen Wert setzen. Wenn wir dies als eins festlegen, wird dies ein solider Hintergrund ohne Transparenz sein, genau wie wir es bereits getan haben. Aber wenn wir dies auf Null ändern, wird dies vollständig transparent sein. Ich möchte platzieren, dass dies irgendwo in der Mitte ist, wie 0,05, das bedeutet, dass wir immer noch eine leichte Hintergrundfarbe haben. Wir sehen auch ein Teil des Hintergrundbildes. Dies kann uns einen schön aussehenden Effekt geben. Um dies zu vergrößern, werden wir einige Polsterung von fünf Pixeln oben und unten und Null auf der linken und rechten. Um etwas Platz im Inneren dieses Elements anzuwenden, machen Sie den Hintergrund ein wenig größer, in der Tat werden wir dies auch auf der Seite hinzufügen. Wir entfernen einfach den Nullwert, also gilt für alle vier Seiten. Als nächstes wird der Text, werden wir dies leichter machen, indem Sie die Farbe Eigenschaft. Dieser Wert ist ein RGB-Wert von zwei 235, 222 und dann 222. Geben Sie uns diese hellere Farbe, die wir gerade hier sehen. Wenn wir dies mit der endgültigen Version vergleichen, können wir sehen, dass der Text auf diesen beiden Überschriften etwas heller ist als unsere Version. Dies liegt an der Schriftstärke. Ich werde dies ändern, um einen helleren Wert von 300 zu sein, also ist es nicht ganz so fett wie der Standard. Als nächstes die Ebene 3 Überschrift Ebene können wir einige der Browser-Standardeinstellungen entfernen. Denken Sie daran, dass wir einige Standard-Marge hatten, und ich werde dies entfernen. Wenn wir das auf Null setzen, würde dies für alle unsere Seiten gelten, oder stattdessen, wenn wir das nur auf eine bestimmte Seite anwenden wollten, könnten wir das auch in platzieren, damit wir es oben, unten platzieren können, rechts und links, und dies gilt jetzt nur für eine Seite. In der Tat will es nur ein Level 2 sein. Dies gilt also für die oberste. Jetzt wurde der Rand von unserer obersten Überschrift entfernt, dies wird dies mehr in der Mitte platzieren. wir nach unten gehen, haben wir jetzt diesen Formularbereich mit der Eingabe und auch die Schaltfläche Senden. Wenn wir wollten, könnten wir zu unserer Indexseite gehen und eine eindeutige ID oder sogar eine Klassenlisteneingabe hinzufügen . Oder wir könnten diese Eingabe auch nach dem Typ anvisieren. Die Möglichkeit, dies zu tun, besteht darin, die Eingabe gefolgt von den eckigen Klammern hinzuzufügen. Von hier aus können wir den Eingabetyp der E-Mail einstellen. Jetzt gelten alle Stile, die wir hier hinzufügen, nur für die E-Mail-Eingabe. Erstens, die Breite, können wir dies auf einen festen Wert von 250 Pixel setzen, was dies ein wenig breiter machen wird. Ich bin Padding, die sich daran erinnern, dass der Abstand innerhalb des Elements ist. Alle Werte, die wir innerhalb von hier hinzufügen, machen es entweder größer oder breiter. Lassen Sie uns für fünf Pixel auf allen Seiten gehen. Der Grenzradius und dies wird uns eine Rundung an den Ecken geben. Genau wie bei der Verwendung von Marge und Padding könnten wir auch mehrere Werte hinzufügen. Oder wenn wir das auf allen Seiten anwenden wollten, fügen wir einfach den einzelnen Wert hinzu, die Schriftgröße von 14 Pixeln. Dadurch wird der 18-Pixel-Wert aus dem Körperbereich überschrieben. Als nächstes können wir nach der Schriftgröße auch diesen Rahmen entfernen, der alle vier Seiten umgibt. Das ist ziemlich einfach zu tun. Alles, was wir tun müssen, ist, die border-Eigenschaft so zu setzen, dass sie gleich keiner ist. Wir können das Gleiche für unsere Schaltfläche „Senden“ tun. Denken Sie daran, dass dies die Art der Übermittlung hat. Genau wie beides zielt auf alle Eingaben ab und schränken Sie dies dann auf den Typ ein, der dem Senden gleich ist. Zuerst legen wir eine Hintergrundfarbe fest. Dafür könnten wir entweder die Hintergrundfarbe verwenden, die wir oben verwendet haben oder diese auf einen einfachen Hintergrund verkürzen. Auch hier haben wir Zugriff auf alle gleichen Farben wie RGB oder auch die Hex-Werte. Ich werde für cccccc gehen, und das ist die graue Farbe, die wir gerade hier sehen. Als nächstes etwas Polsterung auf der Innenseite. Der erste Wert gilt für den oberen und unteren Bereich und wir wollen den Füllwert aus der E-Mail übereinstimmen. Genau so setzen wir dies auf fünf Pixel, und dann, um es breiter zu machen, fügen wir 15 Pixel links und rechts hinzu. Auch die E-Mail passen, müssen wir auch die Ecken abrunden und auch die Grenze zu entfernen. Genau wie oberhalb der Grenze keine, dann der Grenzradius, um die Ecken, alle fünf Pixel, und auch die gleiche Schriftgröße, die 14 Pixel. Gut. Das ist jetzt unser oberster Abschnitt komplett. Wir werden jetzt zu diesen freien Bildern und auch dem Text hinuntergehen. Dazu benötigen wir auch eine Möglichkeit, den Abschnitt auszuwählen, und wenn wir zu diesem Abschnitt scrollen, können wir ihn auch in einer ID platzieren, die ich Ideen nennen werde. Wenn Sie CSS verwenden, gibt es mehrere Möglichkeiten, unsere Bilder auf der Seite zu platzieren, genau wie wir es zuvor verwendet haben, werden wir die CSS-Flexbox verwenden. Zuallererst werden wir den Container anvisieren, der die ID der Ideen hatte. Legen Sie den Anzeigetyp auf Flex fest, und wie bereits erwähnt ist die Standard-Flexrichtung Zeile, die diese horizontal auf der Seite platziert. Wenn wir einen Blick auf die endgültige Version werfen, sehen wir, dass es einige Abstände um diesen ganzen Abschnitt gibt. Um dies zu tun, können wir einen Füllwert verwenden, der, denken Sie daran, wird auf der Innenseite des Abschnitts erscheinen. Das wird Padding sein, und lassen Sie uns für 15 Pixel gehen und es gibt einige Abstände um den Rand. Das nächste, was wir tun müssen, ist, die Größe dieser Bilder zu reduzieren, also wieder, greifen Sie die Idee Abschnitt, und dann werden wir alle Bilder auswählen, die in diesem Abschnitt platziert werden. Im Inneren von hier, wenn wir die width Eigenschaft auf 100 Prozent setzen, werden alle diese Bilder entweder nach oben oder nach unten skaliert, um in den Container passen. Jetzt müssen wir alle diese technischen Abschnitte über jedem dieser Bilder platzieren. Dies kann schwierig sein zu verstehen, wenn Sie die Positionseigenschaften in der Vergangenheit nicht verwendet haben , aber wir werden zwei Positionswerte verwenden, die relativ und absolut genannt werden. Zuallererst, bevor wir dies tun, müssen wir eine Klasse auf jeden dieser Abschnitte anwenden. Jetzt, genau wie hier, wo wir es in einer ID platziert haben, könnten wir stattdessen eine Klasse innerhalb eines dieser Elemente platzieren. Eine Klasse ist auch eine andere Möglichkeit, eines dieser Elemente mit unserem CSS zu greifen. Aber der Unterschied zwischen einer Klasse und einer ID ist, dass eine ID nur einmal verwendet werden sollte, aber wir können eine Klasse mehrmals verwenden. Dies ist perfekt, wenn wir die gleichen CSS-Werte zu mehreren Elementen hinzufügen möchten. Dafür werde ich diesem einen Namen des Verwandten geben, ich werde dies auch auf unser zweites und auch unser drittes div anwenden. Wir greifen das im CSS auf, gehen zu unserem Stylesheet, und anstatt den Hash zu verwenden, den wir für unsere ID gesehen haben, verwenden wir einen Punkt für eine Klasse. Das war relativ. Dann werden wir den CSS-Positionswert auf relativ setzen. Wir werden einen Blick darauf werfen, was das bedeutet, in nur einer Sekunde , aber für den Moment gehen wir auf diesen Titel. Der Text innerhalb unserer Indexseite ist in dieser Überschrift der Ebene 3 enthalten. Es gibt mehrere Möglichkeiten, wie wir das greifen könnten, wir könnten die Ideen anvisieren und dann die Überschrift der Ebene 3 auswählen, oder wir könnten auch eine Klasse innerhalb jeder von ihnen platzieren. Ich werde für die Klassenoption gehen und diesen den Kategorientitel nennen. Kopieren Sie dies und platzieren Sie dies auch in unseren zwei anderen Abschnitten. Zurück zum Stylesheet. Wir werden den Punkt verwenden und das war der Kategorientitel. Dieses Mal setzen wir den Positionswert auf absolut. Jetzt haben wir zwei verschiedene Positionswerte nur hier festgelegt, wir haben die Bilder so eingestellt, dass sie die Position des relativen haben, und der Titel, um die Position des absoluten haben. Eine relative Position ist die ursprüngliche Position des Elements. Es wird im Fluss der Dokumente bleiben und nehmen den ursprünglichen Raum, den es beabsichtigt war. Wir könnten auch diese Abschnitte mit einem oberen, rechten, einem unteren oder einem linken Wert genau so herumschieben . Aber ich werde das so lassen, wie es ist. Nun, der Grund, warum wir dies als relativ festgelegt haben, ist weil, wenn wir einen anderen Wert innerhalb als absolut setzen. Hier können wir auch die oben, rechts, unten und links verwenden , aber diesmal ist der Unterschied, dass der Abschnitt von unserem relativen Bild referenziert wird. Wenn wir einen Spitzenwert von 20 Pixeln setzen, sagen wir dies, wird dieser absolute Abschnitt nach dem nächstgelegenen relativen Container suchen , der unser Bild ist. Der oberste Wert von wird von oben referenziert werden, wir haben die rechte, die untere und die linke. Wie wir sehen können, werden die 20 Pixel von oben diese 20 Pixel vom Bild nach unten schieben. Wir könnten auch mit dem linken Wert arbeiten, um dies in die Mitte zu schieben. Aber alternativ könnten wir die Breite auf 100 Prozent einstellen. Dies wird nun den Titel auf die volle Breite unseres Bildes dehnen. Dann wird es uns ermöglichen, die Textausrichtung so anzuwenden, dass sie in der Mitte ist und diese genau dort platziert werden, wo wir sie haben wollen. Wenn wir die Position so einstellen, dass sie absolut ist, wie wir es hier getan haben, wird das Element aus dem Fluss des Dokuments entfernt. Natürlich nimmt es keine Position auf der Seite ein, es wird so aussehen, als ob es aus den Dokumenten entfernt wurde, was bedeutet, dass wir die oben, rechts, unten und links verwenden müssen, um die genaue Positionierung festzulegen. Wenn wir diesen relativen Abschnitt entfernen, sagen wir dies, wird dies jetzt 20 Pixel vom oberen Rand der Seite platziert. Dies liegt daran, wie bereits erwähnt, ein absolutes Element nach dem nächstgelegenen relativen Container sucht und wenn es keinen hat, wird es stattdessen auf die vollständigen Dokumente verweisen. Lassen Sie uns das wieder reinlegen. Das letzte, was zu tun ist, ist, auch etwas Platz in beiden Seiten dieses mittleren Bildes anzuwenden , wie wir es mit diesem Bild gerade hier getan haben. Um dies zu tun, zurück zu unserer Indexseite. Für diesen mittleren Abschnitt können wir auch eine zweite Klasse hinzufügen, die durch ein Leerzeichen getrennt ist. Nennen wir das die Mitte, speichern Sie diese Datei und über in unser Stylesheet. Schnappen Sie sich den Mittelteil. Um etwas Platz außerhalb dieses div anzuwenden, müssen wir für den Rand gehen. Wir haben bereits den Abstand oben und unten, also lassen wir dies als Null, und platzieren 15 Pixel links und rechts. Gehen Sie zum Browser, wir sehen, wir haben einige Abstände auf der linken und rechten Seite, aber wir haben jetzt auch ein Problem mit unserem Titel. Gehen wir zu den Entwicklertools, klicken Sie mit der rechten Maustaste auf „Inspect“, klicken Sie auf den „Inspector“ und wir werden sehen, was los ist. Dies ist die Überschrift der Ebene 3, also klicken Sie auf diese. Wenn wir den Mauszeiger über den Padding Abschnitt bewegen, können wir sehen, dass wir einen grünen Umriss um unseren Titel haben. Diese Polsterung fügt auch etwas überschüssigen Speicherplatz hinzu, in dem wir nicht brauchen. Um dies zu entfernen, gehen wir zurück zu unserem Stylesheet, und wir haben bereits eine Ebene 3-Überschriftenauswahl. Zurück zu unserem h3 Abschnitt, das ist die Polsterung gerade hier. Wir könnten diesen Abschnitt überschreiben, aber dies gilt auch für diesen Abschnitt in der Kopfzeile. Stattdessen gehen wir zurück zum Kategorientitel , der nur für diesen Abschnitt gilt, und setzen die Polsterung auf Null. Dies löst das Problem nun horizontal, aber wir müssen auch den vertikalen Abstand beibehalten. Dafür fünf Pixel oben und unten und wir werden nur diese Null auf der linken und rechten Seite anwenden. Gut, das ist jetzt das Styling komplett für alle Hauptinhalte. Im kommenden Video werden wir mit unserem letzten Abschnitt arbeiten, dem Fußzeilenbereich. 12. HTML Fußzeilenbereich: Die meisten der wichtigsten Inhalte jetzt auf dieser Seite, und jetzt werden wir nach unten gehen und den allerletzten Abschnitt dieses Projekts erstellen . Dieser Abschnitt wird ein Fußzeilenbereich sein. Es wird nicht allzu schwierig sein. Es wird nur eine Fußzeile als Wrapper sein, der ein HTML 5 semantisches Element ist. Dieser Wrapper enthält dann eine Navigation mit verschiedenen Links. Sie können diese Links alles machen, was Sie wollen, und Sie können auch zusätzliche Seiten erstellen, wenn Sie diese beiden auch verknüpfen möchten. Genau wie wir auf der endgültigen Version sehen, wird es auch ein kleines Bild darüber geben, und dieses ist im Bilderordner enthalten. Wenn Sie sich zuversichtlich fühlen, können Sie dies selbst erstellen. Wenn nicht, dann folge einfach mit mir. Wir werden dies jetzt ganz unten erstellen, direkt über dem schließenden Körper-Tag. Ausgestattet mit HTML 5, war ein neues semantisches oder beschreibendes Element, das als Fußzeile bezeichnet wird. Genau wie wir es früher getan haben, als wir den Header-Abschnitt mit diesem Element gerade hier erstellt haben, geht der gesamte Inhalt für die Fußzeile zwischen diesen Tags, und wir werden ein Bild und auch eine neue ungeordnete Liste erstellen. Zuallererst befinden sich die Bildelemente und die Quelle alle im Bilderordner. Wir brauchen die cutlery.svg und auch einen alten Text. Lassen Sie uns das speichern und sehen Sie es im Browser. Aktualisieren, und als unsere svg, die im Moment ein wenig groß ist, aber im kommenden Video werden wir dies mit einem Abschnitt mit CSS stylen. Als nächstes werden wir, wie wir es früher getan haben, auch eine ungeordnete Liste erstellen, die unsere Navigationslinks enthält. Kurz bevor wir dies tun, werden wir auch einen Blick auf andere semantische oder beschreibende Elemente werfen, die nav genannt werden. Nav ist ein Element, das eine mögliche Seite darstellen soll, die Navigationslinks enthält. Dies ist keine obligatorischen Elemente, die wir vor den Browsern und Bildschirmlesegeräten, die in diesem HTML gelesen werden, einschließen müssen . Es bietet eine bessere Beschreibung dessen, welcher Inhalt in verschachtelt ist. Von hier aus erstellen wir eine geordnete Liste, genau wie früher. Ich werde Elemente auflisten, die ein Element für einen Link enthalten können. Wie bereits erwähnt, können Sie auch einen Link zu einer anderen Seite erstellen. Aber ich werde das hier in diesem Video leer lassen. Der erste, sagen wir dazu. Die zweite, die einen Artikel mit einem Link auflistet, ist dieser für Auftragnehmer. Der dritte, dieser hier werde ich ein Rezept vorschlagen. Der vierte, dieser hier wird Privatsphäre sein. Dies wird Links unten unten folgen. Das CSS wird auch angewendet, wenn wir den Mauszeiger über jedes dieser Elemente von den frühesten [unhörbaren], die wir hatten. Wenn wir nach oben gehen, haben wir auch einige Navigationsabschnitte gerade hier oben. Was wir tun werden, ist, auch an den Anfang der Seite zu gehen und nach unserer ungeordneten Liste innerhalb der Kopfzeile zu suchen. Lassen Sie uns alle diesen Abschnitt auswählen, und dann Befehl oder Control X. Wir können diese fehl am Platz ausschneiden und auch den Abschnitt mit dem nav Element umgeben. Gleiches gilt für den zweiten Satz von Links direkt darunter, schneiden Sie den Abschnitt aus, platzieren Sie ihn in das Navigationselement und fügen Sie dann den Inhalt wieder hinein. Wir sollten keinen Unterschied innerhalb des Browsers sehen. Dies ist nur, um den Inhalt zu beschreiben, der sich innerhalb dieses Elements befindet, genau wie wir es mit den Kopf- und Fußzeilenabschnitten getan haben. Schließlich, um den HTML-Code für diese Seite zu beenden, ist das letzte, was wir tun werden, diese Mitte Punkt zwischen den Fußzeilenlinks zu platzieren. Wir können dies tun, indem wir die span Elemente kopieren, die die HTML-Entität enthält. Lassen Sie uns diese greifen, wir Befehl oder Kontrolle C. Gehen Sie zurück zu unseren Fußzeilenlinks und wir können diese zwischen jedem dieser Listenelemente einfügen. Schauen wir uns das an. Da haben wir es. Schließlich wird das letzte, was für dieses Projekt zu tun ist, im nächsten Video sein. Wir werden unser CSS-Styling für den Fußzeilenbereich anwenden. 13. So gestaltest du die Fußzeile: Ich werde alle HTML-Inhalte auf dieser Seite haben. Das letzte, was zu tun ist, um dieses Projekt zu beenden, ist etwas CSS-Styling es in der Fußzeile anzuwenden, es wird ziemlich einfach sein. Alles, was wir tun müssen, ist die Größe dieses SVG reduzieren wird alle Inhalte in der Mitte platzieren und auch eine etwas andere Hintergrundfarbe spielen. Dann werden wir es für den Rest des Körperabschnitts verwenden. Also rüber zur styles.css. Denken Sie daran, dass der Wrapper für all diesen Abschnitt die Fußzeile war. Wir können jetzt mit diesem über in unserem Stylesheet arbeiten. Lasst uns das zuerst schnappen. Dann im Inneren von hier werden wir den Anzeigetyp einstellen, um die Flexbox zu nutzen. Wie bereits erwähnt, ist die Flex-Richtung standardmäßig die Zeile, die diese Elemente auf der Seite platziert. Wir müssen das wieder ändern, um die Flexrichtung der Spalte zu sein. Dies gilt auch für den Fußzeilenabschnitt, bei dem es sich um den Wrapper handelt. Die Flex-Richtung ist jetzt Spalte, die diese wieder vertikal platziert wird. Sie denken vielleicht gerade: „Nun, das lässt uns einfach genau dort, wo wir am Anfang sind.“ Aber jetzt nutzen wir die Flexbox. Wir können jetzt eine Flex-Eigenschaft namens align Items verwenden, wo wir dies in der Mitte setzen können. Dies wird dann nun unsere Links unten drücken, in die Mitte und auch diese SVG, wenn wir die Größe auch nach unten reduzieren, haben wir derzeit die Flex-Richtungsspalte, die vertikal ist, und dies wird als Hauptachse. Wenn Sie eine Zeile verwenden, genau wie hier, funktioniert dies auf dem Gegenteil, was als Querachse bezeichnet wird. diesem Grund richtet die center-Eigenschaft diese Elemente horizontal auf der Seite aus. Das Gegenteil würde gelten, wenn wir die Flex-Richtung auf die Zeile setzen. Dies würde dann bedeuten, dass unsere Hauptachse über die Seite liegt, was bedeutet, dass ausrichten Elemente das Gegenteil wäre, und dies wird die vertikale Ausrichtung festlegen. Wenn du jetzt anfangen würdest, mag das ein wenig verwirrend aussehen, aber das braucht nur ein wenig gewöhnungsbedürftig zu werden. Als Nächstes ändern wir die Hintergrundfarbe für diesen Fußzeilenabschnitt. Gesicht leicht dunkler Schatten, die E5 sein wird. Einfache Reihe, einfache Reihe, sparen. Wir können einen etwas anderen Farbton als der Rest des Körperinhalts sehen. Einige Pollen, die innerhalb dieses Fußzeilenabschnitts gehen und bietet etwas Platz in, um das Innere. Lassen Sie uns für 20 Pixel gehen. Dies wird unseren Raum auf alle vier Seiten anwenden. Schließlich müssen wir die Größe dieses Bildes reduzieren. Wir können dies nur auf den Fußzeilenbereich und dann auf jedes Bild anwenden, das im Inneren sein soll. Alles, was wir tun müssen, ist, die maximale Breite dieses Bildes, die 80 Pixel, einzustellen . Da haben wir es. Dies sind meine Rezepte, Websites alle jetzt abgeschlossen. Ich hoffe, Sie haben dieses Projekt und Ihre ersten Schritte zum Erstellen von Websites genossen. Im kommenden Projekt werden wir die Dinge noch weiter nehmen, indem wir ein neues Projekt erstellen und auch Responsive Design einführen. 14. Einrichtung des College-Projekts: Willkommen zurück zu diesem neuen Projekt und diesem neuen Abschnitt. Während dieses kommenden Abschnitts werden wir in diesem College Thema Website bauen, die Sie hier sehen. Wir werden dies nicht nur replizieren und viel mehr Übung beim Erstellen von HTML- und CSS-Websites bekommen , wir werden auch einige neue Tricks lernen. Insbesondere eine der größeren, die wir in diesem Abschnitt lernen werden, ist Responsive Design. Responsive Design ist eine Möglichkeit, unsere Website zu erstellen und sie an verschiedene Bildschirmgrößen anzupassen. Zum Beispiel, auf einem größeren Desktop-Monitor, genau so, wird unsere Website aussehen. Aber wenn wir dies auf eine kleinere Breite reduzieren, sehen wir, dass diese Website reagiert oder sich an die aktuelle Größe des Browsers anpassen, und dann ändert es das Layout entsprechend. Dies wird auch wirksam, wenn sie auf einem kleineren Tablet oder einem mobilen Gerät angezeigt werden. Oben wird unser Header vertikal gestapelt. Wir sehen die Links direkt unter der Kopfzeile, anstatt neben jedem davon, wie sie hier sind. Dies ist ein allgemeines Thema für einen Großteil des Inhalts. Wir können hier mit diesem Raster sehen, dass anstatt freie Gegenstände Seite zu haben, dies jetzt vertikal gestapelt wird und die volle Breite des Bildschirms sein wird. Für dieses spezielle Projekt haben wir nur eine Layoutänderung, wir haben die kleine Bildschirmansicht oder die größere Bildschirmansicht, aber wir können so viele Änderungen oder so viele Haltepunkte hinzufügen, wie wir möchten, auch wenn wir nur Feinabstimmung eines bestimmten Abschnitts der Seite. Das ist, was wir in diesem Abschnitt lernen werden. Wir werden loslegen, wie immer, indem wir einen Projektordner erstellen. Über auf den Desktop, einen neuen Ordner. Das hier, wir wollen das Tech-College nennen. Sie können diesem einen beliebigen Namen geben, den Sie wollen. Auch mit diesem Projekt ist der Bilderordner zur Verfügung gestellt, und Sie können die gleichen Bilder verwenden, die ich verwenden werde, oder Sie können Ihre eigenen herunterladen, wenn Sie es bevorzugen. Danach können Sie dies, wenn Sie möchten, auch innerhalb des Projektordners platzieren und dann über den Ordner tech-college in Visual Studio Code ziehen. Im Moment haben wir hier nur unsere Bildermappe mit den mitgelieferten Bildern. Was wir tun müssen, um zu beginnen, ist unsere neue Seite zu erstellen, die die index.html sein wird. Wie immer können Sie die HTML-Struktur eingeben, wenn Sie möchten, oder Sie können den integrierten HTML5-Befehl Emmet verwenden , der mit Visual Studio Code geliefert wird. Geben Sie html:5 ein, drücken Sie die Eingabetaste. Jetzt haben wir all diese Struktur, die wir für unsere Website brauchen. Der Titel, platzieren Sie diesen innerhalb des Kopfabschnitts, speichern Sie diese Datei und öffnen Sie diese im Browser. Wir können entweder auf die index.html innerhalb des Projektordners doppelklicken, oder als Verknüpfung können wir mit der rechten Maustaste auf den Dateinamen klicken, den Pfad kopieren und dann in eine neue Browserregisterkarte einfügen. - Gut. Alles, was ich jetzt für den Rest dieses Videos tun werde, ist, ein wenig Setup-Arbeit hinzuzufügen, und das ist eine Schriftart, die wir für dieses Projekt verwenden werden, und auch etwas, das die normalisierte CSS-Datei genannt wird, zur Verfügung zu stellen. Beginnen wir mit unseren Google Fonts. Wir machen eine Suche nach Google Fonts, und die erste, die wir hier brauchen, ist fonts.google.com. Fügen Sie hier hinzu, und wir können jede Schriftart wählen, die wir für dieses Projekt verwenden möchten. Die, die ich verwenden werde, heißt Vollkorn. Das ist V-O-L-L-K-O-R-N. Gehen wir für die Reguläre, wählen Sie dies aus und schließen Sie dies auch und wir gehen für den mittleren ein. Öffne das Backup, und dann können wir all diesen Link kopieren und diesen in unseren Kopfbereich einfügen. Dies muss auch mit unserem Stylesheet verknüpft werden, also lassen Sie uns diese neue Datei innerhalb des Hauptverzeichnisses von styles.css erstellen, und wir werden in einem Moment darauf zurückkommen. Aber für den Moment, lassen Sie uns einfach kopieren und fügen Sie dies ein, und wenn wir Befehl oder Steuerung mit Schrägstrich, wird dies nur kommentieren Sie dies für die spätere Verwendung. Das nächste, was zu tun ist, ist, die so genannte normalisierte CSS-Datei einzuschließen. Wenn wir O2, die Suchmaschine hatten und eine Suche nach einer normalize.css machen, sollte es der erste Link sein, den wir gerade hier brauchen. Wir können hier sehen, dass die normalisierte Datei wird uns helfen, unsere Website konsistenter über verschiedene Browser zu rendern. Es gibt etwas, das als CSS-Reset bezeichnet wird, das verfügbar ist, und dies wird alle Browser-Standardeinstellungen auf Null zurücksetzen. Zum Beispiel, wenn bestimmte Browser einige Padding oder Ränder zu unseren Elementen hatten, wird dies alle auf Null zurückgesetzt. Allerdings werden diese Standardwerte oft aus einem bestimmten Grund hinzugefügt. Eine Alternative besteht darin, diese normalisierte Datei zu verwenden, und dadurch werden nicht alle Browsereinstellungen vollständig entfernt. Stattdessen, was es tun wird, ist, bestimmte Werte anzupassen, so dass unsere Websites ein viel konsistenteres Aussehen über verschiedene Arten von Browsern. Es ist wirklich hilfreich, um unser Projekt hinzuzufügen. Wir können dies auch mit MPM verwenden, wenn Sie Knoten verwendet haben. Aber da wir es nicht sind, werden wir nur diese Datei herunterladen, alle mit Befehl oder Control A auswählen, mit Befehl oder Control C kopieren, und dann innerhalb unseres Projekts haben wir jetzt ein zweites Stylesheet, das wir fügen Sie hinzu. Ich werde dies besser organisieren, indem ich auf einen neuen Ordner namens CSS klicke. Ziehen wir über unsere Stylesheets, und öffnen Sie diese dann, erstellen Sie eine neue Datei namens normalize.css und fügen Sie diese dann ein. All dies tut im Wesentlichen ist die Bereitstellung einiger vernünftiger Standardwerte, die wir auf unsere Elemente anwenden werden, damit sie über verschiedene Arten von Browsern besser aussehen. Wir müssen nun beide Stylesheets innerhalb unseres Indexes verknüpfen. Als nächstes lassen Sie uns in unserem Stylesheet verlinken, das die normalize.css ist. Denken Sie daran, da wir einen CSS-Ordner erstellt haben, müssen wir dies auch innerhalb unseres Dateipfades hinzufügen. Finden unserer benutzerdefinierten Stylesheets und unser benutzerdefiniertes Stylesheet sollte immer das letzte sein, so dass Keiner dieser oben genannten Werte unsere benutzerdefinierten Styles im CSS-Ordner styles.css überschreibt. Jetzt sind wir ziemlich gut, mit unserem neuen Projekt zu gehen. Dies ist die gesamte Setup-Arbeit jetzt abgeschlossen, und im kommenden Video werden wir mit dem Header-Abschnitt arbeiten und auch einen Blick darauf werfen, wie wir unsere reaktionsfähigen Bilder hinzufügen können. 15. Die Kopfzeile und Bilder mit automatischer Anpassung: Wenn wir zu einigen Inhalten weitergehen, werden wir nun etwas HTML und auch etwas Stil in es zu unserem Projekt hinzufügen . Beginnend von oben mit dem Kopfzeilenabschnitt. Dann folgt danach ein Abschnitt, der knapp darunter das Bild ist, und auch der Text über dem Bild überlagert. Dies wird auch einige nützliche Techniken demonstrieren , wie die Zentrierung des Abschnitts über das Bild und auch, wie wir unser Bild reaktionsschnell machen können. Mit Responsive meine ich nicht nur, dass dies kleiner oder größer so schrumpfen wird. Es ist in der Tat, auch zwei Versionen desselben Bildes zu verwenden, eine kleine und auch eine große, und nur die entsprechende Größe Bild wird heruntergeladen. Werfen wir einen Blick darauf, wie dies zu tun ist, beginnend mit dem Header im Körper. Erstellen Sie die HTML5-Header-Elemente als Wrapper. Dann werden wir nur zwei Abschnitte erstellen, das ist der Titel in der oberen linken, und dann über auf der rechten ungeordneten Liste. Erstens, die h1, und wir können auch in einem Element platzieren, um dies auf der Homepage zu verlinken, wenn wir diesen Header auf mehreren Seiten wiederverwenden möchten. Lassen Sie uns für die index.html gehen, dann werde ich Text innen Titel. Als nächstes, unsere Links, können wir diese innerhalb des Elements platzieren <nav>, um die Dinge semantisch zu halten, die ungeordnete Liste. Das erste Listenelement wird für die Anmeldung sein. Ich habe meins in ein leeres <a> Element geschrieben. Sie können auch die separaten Seiten erstellen, die mit jeder dieser beiden Verknüpfungen verknüpft werden sollen. Wenn Sie eine „Anmeldeseite“, eine „Register-Seite“ und auch eine „Get in Touch Page“ oder ein wenig zusätzliche Übung erstellen möchten . Dann verlinken Sie auf diese Seiten innerhalb der href, das ist die erste. Das zweite Listenelement, wieder, ein Link mit dem Text des Registers. Der dritte, dieser ist in Kontakt zu treten. Ok. Geben Sie dies ein Speichern und wir können im Browser überprüfen, wenn dies funktioniert. Natürlich sieht es nicht gut aus, aber wir werden dies mit CSS in nur ein wenig beheben. Nach dem Header-Abschnitt ist dies alles nun abgeschlossen. Wir können einen neuen Abschnitt erstellen, und dies wird der Wrapper für das Bild und auch die Text-Overlay sein. Platzieren Sie mit dem CSS in eine Klasse von apply. Dann wird dies zwei separate Abschnitte enthalten. Zuallererst haben wir das Bild, das das Hintergrundbild ist, und dann ein separates div, das dieser Textabschnitt gerade hier sein wird. Die Quelle im Bilderordner, lassen Sie uns einen Blick werfen. Wir haben zwei separate Bilder im Inneren von hier. Wir haben die college.jpeg und auch die College-small. Wir werden einen Blick darauf werfen, was das in nur einer Sekunde tun wird. Aber für jetzt zeigen wir die Bildquelle mit dem Bilderordner und dann in die college-small.jpeg. Als nächstes wird das div, und dies wird eine Klasse von Text-Overlay haben, die wir in einem Moment innerhalb des Stylesheets verwenden werden, und dann die beiden technischen Abschnitte , der erste nimmt jetzt Online-Anwendungen, die wir Wrap in einem <p> Element. Beachten Sie hier eine Schaltfläche mit dem Text anwenden. Über zum Browser haben wir das Bild und auch den Text direkt darunter. Wie Sie vielleicht erwarten, dies über dem Bild zu platzieren, wird dies einige CSS-Arbeit erfordern. Also, das einfach unter das Bild zu platzieren, ist vorerst in Ordnung. Aber worauf wir uns zuerst konzentrieren werden, ist zwischen unserem College-Image zu wechseln. Wir werden die College-small auf einem mobilen Gerät oder einem kleinen Bildschirm herunterladen. Sobald wir eine bestimmte Größe erreicht haben, wechseln wir zur college.jpeg, die eine größere Version ist. Wenn wir darauf klicken, können wir sehen, dass die College-klein 1280 Pixel breit ist, während die college.jpeg größer ist, und es hat die Breite 1920 Pixel. Warum sollten wir zwei separate Bilder einbinden wollen? Nun, der Grund dafür liegt an der Downloadzeit und auch an der Bildqualität. Wenn Sie daran denken, ein mobiles Gerät zu haben, wenn Sie dieses Projekt auf einem kleinen Bildschirm besuchen, wenn wir eine langsamere Mobilfunkverbindung haben, möchten wir das große Bild nicht herunterladen. Stattdessen wäre es viel schneller, diese kleinere Version herunterzuladen. Von der anderen Seite, wenn wir einen großen Monitor verwenden, wenn wir nur ein kleines Bild wie dieses einschließen würden, und dann dehnt sich zu einer größeren Größe, würde es eine Menge an Qualität verlieren. Um damit umzugehen, werden wir die Verwendung eines HTML-Elements namens Bild zu machen. Dies wird es uns ermöglichen, mehrere Bildquellen zur Verfügung zu stellen, und dann kann der Browser entscheiden, welche am besten geeignet ist. Nun, um dies zu tun, werden wir die Bildelemente einbeziehen. Wir schließen zuerst die Bildelemente als Wrapper ein, wir müssen immer noch die Bildquelle einschließen, und dann direkt darüber werden wir das HTML-Quellelement verwenden. Das Quellelement enthält kein öffnendes und schließendes Tag. Stattdessen übergeben wir einige Attribute. Der erste wird eine Medienabfrage sein. Eine Medienabfrage ist auch etwas, das wir innerhalb unseres CSS verwenden werden, um verschiedene Stile auf verschiedene Bildschirmgrößen anzuwenden. Aber wenn es mit der Quelle verwendet wird, wird es uns ermöglichen, Bilder unterschiedlicher Größe für verschiedene Medientypen oder Geräte bereitzustellen . Einer der häufigsten Anwendungsfälle für eine Medienabfrage besteht darin, den Inhalt mit einer bestimmten Bildschirmbreite zu wechseln. Wenn wir innerhalb der Klammern übergeben, eine minimale Bildschirmbreite von 1100 Pixel. Dieser Abschnitt gilt nur, wenn der Browser über 1100 Pixel breit ist. Dann, wenn es über die Größe ist, können wir dann das Quellsatzattribut verwenden, es stellt diesen Dateipfad zu unserem großen Bild bereit. Es gibt viele verschiedene Medienbedingungen, die wir hinzufügen können. Wir können die maximale Breite einschließen. Wir können die Geräteausrichtung überprüfen, um zu sehen, ob es sich um Quer- oder Hochformat handelt. Wir können das Pixelverhältnis eines Monitors überprüfen, und viele andere verschiedene Dinge. Dies wird unser größeres Bild anwenden, wenn die Breite des Browsers über 1100 Pixel beträgt. Aber wenn die Browserbreite unter dieser Größe liegt, wird es auf dieses Bildelement zurückgreifen, das die kleine Version enthält. Wenn wir wollten, könnten wir so viele Quellelemente einfügen, wie wir wollten. Wir könnten verschiedene Medienbedingungen aufstellen und diese auch auf verschiedene Bilder verweisen. Darüber sind unsere beiden Bildgrößen in Ordnung. Genau als Randnotiz müssen wir dieses Bildelement immer einschließen. Dies liegt daran, dass dies letztlich das Element ist, das immer innerhalb des Browsers gerendert wird. Alles, was wir tun, ist, um die verschiedenen Bildquellen zu wechseln. Stellen Sie sicher, dass dies immer enthalten ist. Die Art und Weise, wie wir dies testen können, besteht darin, den Browser zu aktualisieren und die Entwicklertools mit Rechtsklick zu öffnen und zu überprüfen, und in die Registerkarte Netzwerk. Was wir hier zuerst tun müssen, ist, den Browser auf eine kleine Bildschirmgröße zu verkleinern , die unter 1100 Pixel liegt, und dann zu aktualisieren. Von hier aus haben wir die kleine Version unseres Bildes heruntergeladen, und das sind 361 Kilobyte. Wenn wir das breiter machen und über die 1100 Pixel gehen, ist es ein bisschen größer. Reload, und jetzt stattdessen wird dies unsere größere Version herunterladen, die die College-jpeg ist. Wie Sie erwarten würden, ist dies eine größere Dateigröße, daher ist es besser, das kleinere Bild auf den kleineren mobilen Geräten herunterzuladen. 16. So gestaltest du die Kopfzeile: Jetzt wissen wir, dass dies funktioniert, können wir das schließen und zu unserem Styling übergehen, also in unser benutzerdefiniertes Stylesheet, das die styles.css ist. Wir haben bereits unsere Schriftfamilie von Google Fonts heruntergeladen, und wir können dies innerhalb des HTML-Abschnitts hinzufügen. Ich ziehe das nach oben und entferne dann den Anfang. Was ich hier tun werde, ist, die Schriftfamilie eine Basisgröße von 10 Pixeln zu setzen. Jetzt bedeutet das nicht, dass ich möchte, dass der Text innerhalb des Projekts alle 10 Pixel hat. Dies wird nur eine einfache Berechnung bieten, die wir in einem Moment sehen werden. Als Nächstes die Farbe. Dies gilt für alle Texte. Der RGB-Wert wird 62 für das Rot, 61 für das Grün und 61 für das Blau sein. Überprüfen Sie, dass dies in Ordnung ist. Jetzt sehen wir unseren Unterschied, Schriftart angewendet hat. Die Farbe der Basisschriftart wurde nicht auf alle Verknüpfungen angewendet. Aber wir werden das in einer Sekunde reparieren. Als nächstes wird der Header-Abschnitt. Im Header-Abschnitt, werden wir den Anzeigetyp von Flex zu verwenden. Wir werden die Flexrichtung von Zeile und Spalte basierend auf der Größe des Bildschirms umschalten . Was wir in diesem Video tun werden, ist, den Browser auf einen kleinen Bildschirm zu schrumpfen, und auf der mobilen Version, genau wie wir hier sehen. Wir möchten, dass dieser Inhalt als Spalte angezeigt wird. Dann später wenden wir eine Medienabfrage an, um die Flex-Richtung in Zeile zu wechseln. Aber im Moment bleiben wir nur bei der kleinen Bildschirmansicht bleiben. Legen Sie die Flexrichtung als Spalte fest. Richten Sie dann auch Elemente in der Mitte aus, die von links nach rechts zentriert wird. Der Seitentitel ist in eine Überschrift der Ebene 1 eingewickelt. Lassen Sie uns also so und ändern Sie den Cursor zu einem Zeiger. Dies ändert sich jedes Mal, wenn wir den Mauszeiger über diesen Abschnitt bewegen. Danach wird die Schriftgröße und der Wert von zwei rems. Ein Rem ist eine relative Größe, und das bedeutet, dass es größer oder kleiner wird, abhängig von der Basisschriftfamilie, die im HTML eingerichtet wurde. Zwei rems bedeuten, dass dies doppelt so groß ist, also wird dies 20 Pixel sein. Wenn wir dies auf ein rem setzen, wären das dann 10 Pixel. Wenn Sie diese Basisgröße als eine schöne gerundete Zahl festlegen, ist es wirklich einfach, die genaue Schriftgröße zu berechnen, die wir wollen. Wenn wir zum Beispiel möchten, dass diese Größe 16 Pixel beträgt, könnten wir dies auf 1,6 Rems setzen. Die Alternative ist, dass wir dies 16 Pixel haben. Wenn wir dann vielleicht wollen, dass das hier unten 18 Pixel ist, wären die Berechnungen etwas komplexer. Lasst uns das einfach als 10 behalten. Dies muss auch die Schriftgröße sein, nicht die Schriftfamilie, die Sie bereits oben festgelegt haben. Nun, wenn wir das speichern, wird das jetzt alles korrekt angewendet. Als nächstes können wir an diesen Links arbeiten. Dies ist das A-Element. Zunächst einmal die Textdekoration, die keine ist, und dies wird die Unterstreichung von allen unseren Links entfernen. Außerdem möchten wir, dass die Linkfarbe die gleiche wie diese Farbe gerade hier ist. Um dies zu tun, müssen wir auch die Farbe einstellen. Wir könnten diese Farbe überschreiben und diese hier hinzufügen. Oder stattdessen könnten wir das erben, und das wird die Farbe von den Eltern erben, was diese hier ist. Aktualisieren. Dies gilt auch für alle Links und auch für die Überschrift der Ebene 1, die ebenfalls in einen Link eingeschlossen ist. Um auch den Gleichgewichtszeiger über eines dieser Elemente zu ändern, können wir einen Hover-Zustand hinzufügen. Also ein und dann du Dickdarm. Wir können den Hover-Zustand hinzufügen, der die Farbe des Textes jedes Mal ändern wird , wenn der Mauszeiger über diesen Abschnitt bewegt. Sie können mit Farbe spielen, wenn Sie wollen. Ich werde für 104, 114 und dann 166 gehen . uns die Wenn wiruns dieendgültige Version ansehen, wollen wir hier die Punkte oder die Aufzählungszeichen aus unseren Listenelementen entfernen. Platziert auch über die Seite und macht auch die Schriftgröße ein wenig größer. Aus dem Wrapper, der die ungeordnete Liste ist, die Möglichkeit, diese Aufzählungszeichen zu entfernen, darin, den List-Stil auf none zu setzen. Damit wir alle diese Elemente richtig zentrieren können, können wir auch die Standardeinstellung des Browsers verschieben. Innerhalb der Entwickler-Tools, wenn wir auf den Inspektor klicken und dann den Mauszeiger über die ungeordnete Liste bewegen, können wir auf der linken Seite sehen wir diesen grünen Abschnitt, der Polsterung ist. Dies wurde vom Browser angewendet oder Macondo verschoben, indem der Wert des Auffüllens auf Null gesetzt wurde. Oh, noch eine Liste. Diese Option wurde jetzt entfernt. Als Nächstes werden wir die Schriftgröße etwas größer machen. Dann können wir die Listenelemente und Orte horizontal über die Seite auswählen. Legen Sie dazu den Anzeigetyp auf flex fest. Standardmäßig wird die Flex-Richtung Zeilenplatzierung dieser Elemente auf der Seite, bis die Listenelemente. Die Schriftgröße von 16 Pixeln, die wir berechnen können rom bei 1.6 REMs und auch etwas Abstand zwischen jedem von ihnen anwenden. Das ist ein Rand von Null oben und unten und dann 10 Pixel links und rechts. Dies ist alles, was wir für den Header-Abschnitt tun müssen, bis wir zum größeren Bildschirm gelangen. Bis zu diesem Bildabschnitt und wir können das Bild mit img anvisieren. Legen Sie dann die Breite des Bildes fest. Wir wollen 100 Prozent. Dadurch wird nun sichergestellt, dass sich unser Bild nicht weiter dehnt als bei der Breite des Browsers von früher, als wir den HTML-Code hinzugefügt haben. Gehen wir zurück zu diesem Abschnitt. Wir geben diesem eine Klasse von gelten. Diese Klasse wird es uns ermöglichen, diesen vollständigen Abschnitt auszuwählen und dies als Bezugspunkt zu verwenden , um diesen Abschnitt und direkt darunter zu zentrieren, und dies zu tun. Dies ist eine Klasse, also verwenden wir den Punkt. Um dies zu einem Bezugspunkt für unseren Text zu machen, müssen wir den Positionstyp so einstellen, dass er relativ ist. Wir werden einen Blick darauf werfen, was das in ihm nur eine Sekunde tut. Wir sollten im Moment keinen Unterschied sehen. Aber der Unterschied wird deutlich, wenn wir dieses Text-Overlay auswählen. Dies war die Klasse, die wir diesem Abschnitt geben. Schnappen Sie sich das. Damit dies funktioniert, setzen wir auch einen Positionswert für diesen Abschnitt, um absolut zu sein. Wenn wir uns erfrischen, so sieht es im Moment nicht anders aus. Aber was wir hier effektiv getan haben, ist, diesen Text-Overlay-Abschnitt aus dem Fluss des restlichen Inhalts herauszuziehen . Jetzt müssen wir dem Browser genau sagen, woher wir das positionieren wollen. Wir können dies tun, indem wir in unserem Stylesheet die oberen, rechten, unteren und linken Werte hinzufügen. Was wir tun wollen, ist, diese 50 Prozent von der linken Seite des Bildes und dann 50 Prozent von oben zu positionieren . Der linke Wert von 50 Prozent und der gleiche für den oberen Wert. „ Aktualisieren“. Jetzt kommen wir irgendwo hin, das ist fast in der Mitte des Bildes. Der Grund, warum diese beiden 50-Prozent-Werte aus dem Bild angewendet wurden , ist, dass wir den Positionstyp auf relativ festgelegt haben. Wenn wir einen Abschnitt festlegen, genau wie dieser absolut ist, wenn wir die Werte für die Positionierung festlegen, wird er alle diese Größen im nächstgelegenen relativen Container referenzieren. In unserem Fall ist der nächste relative Container der Image-Abschnitt-Wrapper. Wenn wir das hier nicht hätten, werfen wir einen Blick darauf, was passieren würde. „ Aktualisieren“. Da wir jetzt keinen relativen Container haben, wird er stattdessen den Körperabschnitt als Referenz verwenden. Der linke Wert von 50 Prozent wird dies über die Hälfte der Breite des Körpers und dann 50 Prozent von ganz oben drücken . Aber sein relativer Container ist wirklich wichtig. Wie wir hier sehen können, ist die Zentrierung noch nicht ganz in der Mitte. Wir können sehen, warum besser, wenn wir die „ Entwickler-Tools“ öffnen , klicken Sie auf den „Inspektor“ und wählen Sie unseren Textüberlagerungsbereich. Wir können besser mit diesem Text-Overlay-Abschnitt hervorgehoben sehen , wenn wir die Position in mit der oberen und der linken. Dadurch wird dieses Element von der oberen linken Ecke positioniert. Anstatt dies von oben links zu referenzieren, möchten wir, dass dieses div von der Mitte referenziert wird. Die Art und Weise, wie wir dies tun können, besteht darin, eine CSS-Transformationseigenschaft zu verwenden, was bedeutet, dass wir dieses Element 50 Prozent der Breite nach links und auch um 50 Prozent nach oben verschieben können , was effektiv bedeutet, dass wir uns im Bezugspunkt bewegen von oben links in die Mitte dieses Elements. Um dies zu tun, setzen wir die CSS-Transformation und verwenden dann Translate, die es uns ermöglichen wird, die Position von HTML-Elementen zu verschieben. Dann platzieren wir innerhalb von zwei Werten, die die x-Achse ist, die von links nach rechts ist, und dann die y-Achse, die von oben nach unten ist. Wenn wir die x-Achse auf negativ eingestellt 50 Prozent und auch die gleiche für die y-Achse. Diese „Aktualisieren. Jetzt wurde dieses volle div in das Zentrum umgewandelt. Das einzige, was wir tun müssen, um dies auszugleichen, ist, den Text auszurichten, um in der Mitte zu sein. Wir können dies und den Wrapper tun, jetzt sieht das viel besser aus. Nur um zusammenzufassen, wenn Sie immer noch sicherstellen könnten, wenn wir die linken und die oberen Werte setzen, lassen Sie diese von der Außenseite des Bildes ab. Anstatt den Mittelpunkt des Elements des Referenzpunkts zu verwenden, wird jedoch die obere linke Ecke verwendet. Das bedeutet, dass das Element immer noch nicht ganz in der Mitte des Bildes erscheint. Wir müssen dies manuell um 50 Prozent sowohl in der vertikalen als auch in der horizontalen Richtung verschieben . Dies ist alles die Positionierung aller Setup. Was wir jetzt tun werden, ist, die Farben und auch die Schriftgröße zu setzen. Die Schriftgröße von 20 Pixeln, das ist zwei Rems. Der Hintergrund von RGBA, 40 für das Rot, 40 für das Grün, 40 für das Blau und dann der vierte Wert ist der Alphakanal. Dies ist die Deckkraft der EG durch Wert. Wenn wir dies auf 0,7 setzen, wird dies 70 Prozent transparent sein. „ Aktualisieren.“ Dieser Alpha-Wert bedeutet, dass unser Hintergrund leicht transparent ist. Das Bild wird beginnen, durch zu zeigen. Wenn wir das auf eins setzen, wäre das völlig undurchsichtig, was bedeutet, dass wir nichts durchkommen sehen konnten. Der Grenzradius wird uns eine schöne abgerundete Ecken von drei Pixeln geben, die Sie auf allen vier Seiten sehen können. Dann etwas Polsterung, um Ihnen einige Abstände innerhalb von zwei Rems oben und unten zu geben, und dann 10 Rems auf der linken und rechten Seite. Schließlich, die Schriftfarbe werde ich 195,191,191 verwenden. Der letzte Stil und die Eigenschaft für dieses Video wird diese „Hier anwenden Button sein. Das Button-Element, um so viel die endgültige Version zu machen, können wir die Hintergrundfarbe entfernen, fügen Sie einen Rahmen, einige abgerundete Ecken, um auch diesen Overlay-Abschnitt entsprechen. Dann schließlich der Hover-Zustand der Schaltfläche, entfernen Sie den Hintergrund, indem Sie dies nicht die Grenze, die Breite von zwei Pixeln, dann die Rahmenfarbe von RGB, 169, 252, 169, dann drei Pixel des Randradius, , die eine Übereinstimmung für diesen Text-Overlay-Abschnitt sein wird, und aktualisieren Sie den Browser. Wir sind fast fertig damit. Wir haben den Rahmen, aber wir wollen nur sicherstellen, dass die Textfarbe auch übereinstimmt und die Art und Weise, wie wir dies tun können, besteht darin, die Farbe genauso wie der obige Abschnitt zu setzen, oder wir können dies auch erben, genau wie wir es mit dem -Links. Dies erbt nun die Farbe vom übergeordneten Element. Schließlich wird der Hover-Zustand für die Schaltfläche, so dass die Maus wird diese Farbe ändern, und auch genau wie die endgültige Version, es wird es jedes Mal etwas größer machen, wenn der Benutzer schwebt über. Wir können dies tun, indem Sie die Schaltfläche und den Hover-Zustand auswählen. Anschließend können Sie die Rahmenfarbe ändern, um einen RGB-Wert von 220, 237, 255 zu sein. Dann wieder können wir die Transformationseigenschaft nutzen. Anstatt übersetzen auszuwählen, die wir gerade hier verwenden, ist eine andere Methode, die wir verwenden können, das Element zu skalieren. Dies bedeutet, dass wir die Elemente größer oder kleiner machen können. Zum Beispiel, wenn wir wollen, dass es genau dasselbe ist, wäre dies eins. Ich sehe hier keinen Unterschied. Wenn wir wollen, dass es halb so groß ist, wäre es 0,5. Aber ich werde das ein bisschen subtiler machen. Ich setze das auf 1,05. Auf der eigentlichen Schaltfläche können wir auch den Cursor als Zeiger festlegen. Schauen wir uns das an. Wir haben einen Cursor, die Transformation findet statt. Ich ändere auch die Rahmenfarbe. Wir haben nun den Inhalt des Header-Abschnitts an Ort und Stelle und auch das CSS-Styling für die kleine Bildschirmansicht. Wir werden später darauf zurückkommen und einige kleine Änderungen für eine größere Ansicht vornehmen. Aber als nächstes werden wir mit dem Projekt fortfahren und einige weitere Inhalte hinzufügen. 17. In diesem Abschnitt findest du eine Reihe von beliebten Kursen: Hey, willkommen zurück zu diesem nächsten Abschnitt. Wir werden weiter mit unserem Projekt nach unten bewegen und den Rasterabschnitt direkt unter diesem Header-Bild erstellen . Dies ist derjenige, wenn Sie dies ausdehnen, wird es ein Rasterlayout mit allen Abschnitten des beliebten Kurses sein. Dies wird das CSS-Rasterlayout verwenden, und dies wird uns ermöglichen, alle Abschnitte nebeneinander mit einer Lücke dazwischen und auch bis hin zur kleinen Bildschirmansicht zur Verfügung zu stellen. Dies wird in die volle Breite des Bildschirms mit der kleineren Bildschirmansicht umgewandelt. Ich werde auch diesen Tippfehler von früher beheben. das HTML wird dieser Abschnitt in die Abschnittselemente eingewickelt werden. Dann eine Level-3-Überschrift, die der Titel der Populären Kurse sein wird. Die Klasse für unser CSS wird Kurs-Titel sein. Dann unten ein neuer div-Abschnitt, der der Container für alle unsere Kurse im Raster-Stil sein wird. Da wir derzeit mit der kleinen Bildschirmansicht arbeiten, werden wir sicherstellen, dass alle unsere Artikel vertikal gestapelt sind. Später ändern wir das Layout in einen Rasterstil. Dieses erste div wird der Wrapper für alle diese Kurse sein. Also lasst uns ihm eine Klasse von Kursen geben. Dann ein neues div für jeden unserer Abschnitte , der das Bild und auch den Text enthält. Dieser wird eine Klasse von Grid-Item haben. Jetzt müssen wir für jedes dieser Raster-Elemente tun, ist es, das richtige Bild auszuwählen und auch in den Text zu platzieren. Ihre erste, dies ist die law.jpg. Sie können alles Text hinzufügen. Dann unten, das p Element für unseren Rechtstext. Um ein wenig Tippen zu sparen, können Sie diese eingeben, wenn Sie möchten, aber ich werde dies nur für jeden unserer Artikel duplizieren. Die zweite ist das Bild der Konstruktion, gesamte Text, der anzuzeigende Text. Dann wird der nächste für unsere Technik sein. Der vierte ist für die Wissenschaft. Das hier ist eine. Nummer 5 ist der Architekt. Und zuletzt haben wir das Geschäft. Lassen Sie uns das speichern und sehen, wo wir im Browser sind. Aktualisieren. Also haben wir Recht, Bau , Ingenieurwesen, Wissenschaft, Architekt und Wirtschaft, und alle Bilder korrekt verknüpft. Wie Sie erwarten würden, sieht dies nicht zu toll aus, wenn wir den Browser dehnen, aber im Moment werden wir nur auf diesen mobilen ersten Ansatz konzentrieren. Auf die endgültige Version. Wir brauchen nicht viel Styling für diese kleine Bildschirmansicht zu tun, da die Bilder bereits auf die volle Breite des Bildschirms gestreckt sind. Was wir tun müssen, ist, die Schriftgröße größer zu machen und auch einen Hover-Effekt hinzuzufügen. Beginnen wir mit der Auswahl unseres individuellen Rasterelements. Dann können wir den Text in der Mitte ausrichten und die Schriftgröße größer machen. Jetzt unten, unterer Knopf, war dein Rapper das Gitterelement. Markieren Sie den Text. Dann können Sie dies in die Mitte drücken und auch die Schriftgröße auf 1.8rems einstellen. Gut, das sieht jetzt besser aus. Als Nächstes wenden wir den Hover-Effekt an. Wenn der Mauszeiger über jeden dieser Abschnitte bewegt wird. Dafür könnten wir viele verschiedene Effekte anwenden, aber alles, was ich tun werde, ist, die Helligkeit und auch die Skala einzustellen. Wieder einmal wenden wir dies auf das vollständige Raster an, das die Klasse von Grid-Item hat. Ich habe den Schwebeeffekt. Dann können wir einen CSS-Filter anwenden, wo wir die Helligkeit anpassen werden. Die Helligkeit ist ein Wert zwischen Null und Eins. Also eine Null. Dies wird den Abschnitt wirklich dunkel machen. Wenn wir dies auf eins setzen, ist dies nur der ursprüngliche Zustand. Nur um dies eine leichte subtile Änderung zu geben, setzen wir dies auf 0,9, so dass es jedes Mal, wenn wir den Mauszeiger über diese Bilder bewegen, ein wenig dunkler wird. Zusätzlich zu diesem, auch eine Transformation, wo wir die Skalierung auf 1,01 setzen. Schließlich wird der Cursor des Zeigers durch. Auch unsere Transformation funktioniert auch, wenn wir den Mauszeiger über einen dieser Abschnitte bewegen. Um diesen Abschnitt zu beenden, müssen wir mit dem beliebten Kurs-Titel arbeiten. Wenn wir nach oben scrollen, war dies in einer Überschrift der Ebene 3 enthalten. Lasst uns das schnappen, h3. Wie bei anderen Arten von Überschriften haben wir auch einen Standard-Browserrand , den wir entfernen können, indem wir diesen Wert auf Null setzen. Wenn wir aktualisieren, wird nun der Rand von oben und unten entfernt. So können wir jetzt unseren eigenen Abstand von 2rems oben und unten und Null auf der linken und rechten Seite hinzufügen . Die Textausrichtung des Mittelpunkts und auch die Schriftgröße. Das erhöht sich auch auf 1.8rems. Gut. Wir können sehen, dass die Überschrift der Stufe 3 standardmäßig fett ist. Wenn wir wollen, könnten wir auch das Schriftgewicht auf normal einstellen. Dies würde den Fetteffekt entfernen. Gut. Dies ist unser Abschnitt jetzt fertig für die mobile Ansicht. Später werden wir darauf zurückkommen und es in ein Rasterlayout mit einer größeren Ansicht umwandeln . Aber vorerst ist das alles in Ordnung. Wir fahren weiter mit den restlichen Abschnitten. Also sehe ich dich im nächsten Video. 18. Abschließende HTML-Inhalte: Unterhalb dieses Rasterabschnitts, den Sie in den vorherigen Videos erstellt haben. Wir werden hinzufügen, dass der Rest der HTML-Inhalte, die wir für dieses Projekt auf der endgültigen Version benötigen , genau wie hier. Dies ist der Sportbereich, das Bild auf der linken Seite und den Text auf der rechten Seite und dann den Fußbereich unten haben wird. Wie bei den anderen Abschnitten wird dies auch voll reaktionsfähig sein. Wenn wir dies auf einen mobilen Bildschirm verkleinern, wird der Inhalt vertikal gestapelt und auch oben auf dem Fußzeilenabschnitt platziert. In diesem Video werden wir nur den HTML-Inhalt erstellen und im kommenden Video fügen wir den CSS-Stil hinzu, um dies gut aussehen zu lassen. Danach fügen wir einige Medienabfragen hinzu, um dies auf dem größeren Bildschirm gut aussehen zu lassen. Gehen wir zurück zu unserer index.html und unter dem letzten Abschnitt, den wir erstellt haben, erstellen Sie einen weiteren Abschnitt. Das wird die Klasse des Sports haben. Dies ist für den Sportbereich. Das wird ziemlich einfach sein. Es wird nur ein div an der Spitze haben, das ein Bild enthalten wird. Dann ein zweites, das den Text enthält. Mit diesen beiden Abschnitten unten sollte ich die CSS-Flexbox verwenden, um das Layout auf verschiedenen Bildschirmgrößen zu steuern. Das erste div und dann das zweite div. Der erste wird ein Bild enthalten. Ein Bild, das wir brauchen, wurde im Bilderordner zur Verfügung gestellt. Dies ist die volleyball.jpg und auch der alt-Text. Das ist alles, was wir für diesen ersten Abschnitt brauchen. Das ist ziemlich einfach. Im nächsten Abschnitt wird dies eine Überschrift der Ebene 3 sein. Mit dem Text entdecken Sie unsere neuen Sportanlagen. Wenn wir einen Blick auf die fertige Version werfen, sehen wir, ob wir den Mauszeiger über das Wort hier zeigen. Dies wird ein Link zu einer Sportanlagenseite sein. Wir haben diese Seite nicht, aber Sie können erstellen, wenn Sie möchten, und machen Sie dies zu einem Link. Wir können dieses Wort innerhalb des „a“ -Elements einwickeln. Platzieren Sie das in und es ist immer noch in unserem h3. Der Text hier ab. Jetzt verlinken wir das einfach zurück zu unserer Homepage. Über zum Browser und scrollen Sie nach unten und wir können jetzt unsere neuen Inhalte unten unten sehen. Standardmäßig sieht diese Art von Layout auf einem mobilen Gerät gut aus , da das Bild über dem Text gestapelt ist, so dass Sie im CSS für diesen Abschnitt nicht zu viel Arbeit haben. Aber genau wie der Rasterabschnitt oben, müssen wir auch einige verschiedene Stile anwenden. Aber das, wenn wir zu einem größeren Bildschirm kommen. Als nächstes wird der Fußbereich knapp unterhalb des Sportabschnitts, die h3, und das ist der Text der Suche nach mehr. Dann wird dieser Fußbereich nur eine Reihe von Links enthalten, die wir direkt darunter platzieren können und wir werden diese Seite an Seite auf der größeren Ansicht platzieren. Dies kann innerhalb einer ungeordneten Liste und unserem ersten Listenelement gehen , tatsächlich werden alle Listenelemente in einem Link-Element platziert. Der erste ist der Text von, virtuelle Tour. Genau wie bei diesen Sportanlagen, könnten Sie auch alle diese zusätzlichen Seiten erstellen, wenn Sie möchten. Ich gebe Ihnen noch mehr Übung, neue Seiten zu erstellen. Aber ich werde diesen Listeneintrag einfach kopieren und direkt unten einfügen. Der zweite Link steht zum Download unseres vollständigen Leitfadens. Danach war dieser, hören Studenten Zeugnisse. Die vierte und letzte ist, buchen Sie eine Informationssitzung. - Gut. Geben Sie dies ein Speichern und auch den Browser, auf den Boden, und standardmäßig werden alle diese Elemente in Linie sein, da wir bereits einige CSS in den vorherigen Videos erstellt haben. Aber wir werden das im kommenden Video beheben. Alles, was wir für den letzten HTML-Code tun müssen , ist, diesen Copyright-Abschnitt unten unten zu erstellen. Wir können dies in einem einfachen p-Element tun. Wir brauchen diesen Text von, Tech College. Aber wenn wir uns die endgültige Version ansehen, sehen wir dieses Copyright-Symbol gerade hier. Dies ist, was eine HTML-Entität genannt wird. Eine HTML-Entität ist ein Shortcode, der es uns ermöglicht , in einem Symbol innerhalb unserer HTML-Datei zu platzieren. Wenn Sie mehr dieser Symbole sehen möchten, die verfügbar sind, gibt es eine praktische Website namens unicode-table.com, und wir können für viele verschiedene Arten von Symbolen suchen, die Sie wollen, wie Emojis, können wir nach Pfeilen suchen und alle von verschiedenen Charakteren, die wir in unseren Projekten brauchen. Wenn wir zum Beispiel einen Pfeil brauchten , könnten wir nach diesem suchen. Dann können wir diejenige auswählen, die Sie wollen, und wir werden sehen, über auf der rechten Seite haben wir einige verschiedene Codes, die wir zu unserem Projekt hinzufügen können. Dies ist, was wir für unser HTML nur hier brauchen, das ist das kaufmännische Und-und und es endet in einem Semikolon. Der spezielle Code, den wir für das Copyright-Symbol benötigen, beginnt auch mit dem kaufmännischen Und-Zeichen ist einfach das Wort Kopie gefolgt von einem Semikolon. Auch unsere Projekte, und wir können dies einfach unten am unteren Rand der Fußzeile sehen. Dies ist jetzt der gesamte Inhalt, den wir für dieses Projekt benötigen, und in den restlichen Videos für diesen Abschnitt. Wir werden uns auf das Styling konzentrieren und auch wir haben gerade alle CSS-Regeln gesehen, die unterschiedlich großen Geräte. 19. Abschließende CSS: Was wir bisher haben, ist der gesamte HTML-Inhalt auf dem Bildschirm. Wir haben die letzten beiden Abschnitte beendet, das ist dieser Sportbereich gerade hier, und auch den Fußbereich mit den Links unten unten. Dieses Video wird sich auf das Styling für diese beiden neuen Abschnitte konzentrieren. Denken Sie daran, der erste Abschnitt der Klasse ist Sport, und dies enthält das Bild und auch den Text. Wir müssen den Text in die Mitte des div zentrieren , unabhängig davon, welche Bildschirmgröße verwendet wird. Um dies zu erleichtern, werden wir eine Klasse zu diesem Abschnitt hinzufügen, den Wrapper. Dies wird der Sport-Text sein. Speichern Sie das. Über zu unseren Stylesheets, das allererste, was ich für diesen Abschnitt tun werde, ist, eine neue Hintergrundfarbe hinzuzufügen, es wird ziemlich einfach sein. Ich werde nur eine helle Farbe hinzufügen, die eee ist. Über zum Browser, das ist nur eine hellgraue Farbe, die dies nur von mir andere Abschnitte trennen wird. Dann die Klasse, die wir gerade hinzugefügt haben, die der Sport-Text war, brauchen wir den Anzeigetyp Flex zu sein, wodurch wir die Flex-Richtung vertikal und auch horizontal einstellen können. Dies bleibt unabhängig von der Bildschirmgröße in der Mitte des div. Erstens, nur durch Inhalt in die Mitte. Richten Sie dann auch Elemente in der Mitte aus, indem Sie beide Eigenschaften festgelegt haben. Dies bedeutet, dass, wenn wir die Flex-Richtung entweder Zeile oder Spalte haben, der Text immer in der Mitte dieses div zentriert sein wird. Etwas Polsterung, um dies ein bisschen größer von zwei Rems zu machen. Selbst mit diesem zusätzlichen Abstand sehen wir immer noch, dass der Text vertikal und horizontal zentriert ist. Wir können diese Stufe 3 etwas größer machen. Wenden wir dies nur auf den Abschnitt des Sport-Textes an. Schnappen Sie sich die Überschrift der Stufe 3 und erhöhen Sie die Schriftgröße auf 2,2 Rems. Nur um den Link zu betonen, sehen Sie, dass ich dies kursiv machen werde und um dies zu tun, können wir diesen speziellen Abschnitt greifen. Dies war der Link, nur hier sind die Klasse von kursiv. Dann können wir uns das in unserem CSS ansehen. Dies war eine Klasse, also verwenden wir den Punkt. Nun, was wir hier tun müssen, ist, den Schriftstil zu setzen, geben Sie diesem einen Wert von kursiv. Da gehen wir. Dies wurde nun angewendet. Das ist alles, was wir für diesen Abschnitt tun müssen, es ist ziemlich einfach. Jetzt können wir nach unten in den Fußzeilenbereich gehen. Zunächst greifen Sie das Fußzeilenelement, das der Wrapper ist. Was wir hier hören werden, ist, den gesamten Text in der Mitte des Abschnitts auszurichten. Wir können auch die Hintergrundfarbe und auch die Textfarbe ändern. Um zu beginnen, die Text-Ausrichtung der Mitte. Gut, wir machen diese Links in nur einem Moment vertikal gestapelt, aber wir müssen dies auf die ungeordnete Liste anwenden. Bevor wir dies tun, werden wir mit dem Hintergrundabschnitt fortfahren , der ein RGB-Wert von 62, 61, 61. Jetzt kann ich den Text nicht sehen, weil unsere Textfarbe jetzt die gleiche ist wie dieser Hintergrund, den wir gerade festgelegt haben. Um dies zu versetzen, legen Sie die Farbe für diesen Abschnitt fest, der auf den Text von ddd angewendet wird . Da gehen wir. Wir brauchen auch etwas Polsterung unten an der Unterseite, um uns etwas Abstand zu geben. Fügen Sie einen Füllwert an der Unterseite eines Rem hinzu. Als nächstes können wir die Fußzeile ungeordnete Liste auswählen und sicherstellen , dass alle Links vertikal auf der Seite platziert werden. Die Fußzeile ist wie die ungeordnete Liste im Inneren. Alles, was wir dafür tun müssen, ist, den Anzeigetyp so einzustellen, dass er Flex gleich ist. Standardmäßig ist die Flexrichtung Zeile, daher müssen wir dies ändern, um eine Flexrichtung der Spalte zu sein. Genau wie bei der endgültigen Version, werden wir dies in einem späteren Video wieder in eine Flexrichtung der Zeile umschalten. Diese gehen in der größeren Ansicht über die Seite. Lassen Sie uns nun mit der kleinen Bildschirmansicht fortfahren und fügen Sie einige Abstände zwischen jedem dieser Links hinzu. Als nächstes wird die Schriftgröße von 1,8 Rems. Die ungeordnete Liste wird auch einen Standardrand haben, so dass wir dies entfernen können. Wir können sehen, dass das, sobald wir das entfernen, jetzt wieder näher an unseren Titel herangezogen ist. Wenn wir dies nur auskommentieren und aktualisieren, können wir sehen, dass oben mehr Abstand angewendet wird. Aber der Abstand zwischen jedem dieser Elemente, müssen wir das Listenelement Ziel. Auch hier gilt diese Auffüllung innerhalb des Fußzeilenabschnitts nur für diesen Bereich. Denken Sie daran, dass dies nicht für alle unsere Listenelemente gilt , da wir diese auch im Kopfzeilenbereich haben. Dafür ist etwas Polsterung in Ordnung. Damit dies für den oberen und unteren Bereich gilt, fügen wir bei 1,6 REMs für den ersten Wert und dann 0 auf der linken und rechten Seite hinzu. Da gehen wir. Das letzte, was wir für diesen Abschnitt tun müssen , ist, die Schriftgröße des Urheberrechtsbereichs zu vergrößern. Innerhalb der index.html. Unten ganz unten wenden wir dies innerhalb des P-Elements an. Beschneiden Sie für die Fußzeile die p-Elemente und die Schriftgröße. Gehen Sie für 1.6 Rems. Dies ist nun alles für die mobile Bildschirmansicht abgeschlossen. In den kommenden Videos werden wir einen Blick darauf werfen, wie wir Medienabfragen auf beide Seiten anwenden können, wodurch unser Projekt auf allen Bildschirmgeräten gut aussieht. 20. CSS Medienfragen und abschließende Gestaltung: Um uns beim Hinzufügen von zusätzlichem Styling und Layout für unsere größere Ansicht zu helfen, werden wir einige CSS-Medienabfragen verwenden. Eine Medienabfrage ist eine Möglichkeit für uns, verschiedene CSS-Eigenschaften mit verschiedenen Medientypen anzuwenden . Mit Bildschirmen können wir angeben, auf welche Bildschirmgrößen wir dies anwenden möchten. Wenn Sie möchten, dass sie nur auf eine Quer- oder Hochformat angewendet werden, wenn die Bildschirmauflösung eine hohe Dichte hat, und viele andere Optionen. Um dies innerhalb unseres Stylesheets zu tun, verwenden wir die @media -Regel, und dann werden wir unsere Bedingungen innerhalb der Klammern hinzufügen. Eine gemeinsame ist, diese CSS-Regeln nur anzuwenden, wenn die Bildschirmbreite eine minimale oder eine maximale Größe ist. Genau wie wir es mit den reaktionsfähigen Bildern betrachteten, könnten wir so etwas wie die Mindestbreite auf einen bestimmten Wert wie 900 Pixel setzen, und innerhalb dieser geschweiften Klammern müssen wir nur unseren CSS-Code genau so schreiben, wie wir zuvor erledigt. In diesem Beispiel wird das gesamte CSS innerhalb von hier nur angewendet wenn die minimale Breite des Browsers 900 Pixel breit ist. Wie bereits erwähnt, könnten Sie auch Dinge tun, die sicherlich maximale Breite sind. Wir könnten die Orientierung festlegen. Dies ist mehr für mobile oder tragbare Geräte, aber wir könnten überprüfen, ob das Gerät im Hoch- oder Querformat gedreht wird. Wir haben eine Online-Suche nach CSS Medienabfragen, wenn Sie mehr über die verschiedenen verfügbaren Typen erfahren möchten. Mit diesem Projekt werde ich bei der Bildschirmbreite bleiben, da dies wirklich allgemein ist und für viele verschiedene Anwendungsfälle gilt. Alles, was wir derzeit oben gerade hier haben, wird dies immer für die kleine Bildschirmansicht gelten. Dann, was wir tun werden, ist, dies für den größeren Bildschirm zu überschreiben. Ausgehend von der Spitze unseres Projekts, schreiben wir einfach dieses CSS, wie wir es normalerweise tun würden. Wenn wir dies für diese Kopfzeile etwas breiter machen, möchten wir, dass dieses Symbol oder dieses Logo auf der linken Seite erscheint. Dann haben sie auf der rechten Seite verlinkt. Um dies zu tun, wenn wir zurück zu unserem ursprünglichen Header-Abschnitt gehen, haben wir bereits den Anzeigetyp auf flex gesetzt. Wir müssen das nicht nochmals einstellen, da wir dies hier bereits angegeben haben. Aber was wir tun müssen, ist, jeden dieser Werte zu überschreiben, die Sie ändern möchten. Eines der Dinge, die wir ändern müssen, ist diese Flexrichtung. Anstatt es in der Richtung der Spalte zu sein, wie wir hier haben, müssen wir dies als eine Reihe setzen. Gehen Sie runter zu unserer Medienabfrage. Lasst uns das zuerst machen. Die Flex-Richtung, die Zeile. Dies tritt nun in Kraft, da wir die Bildschirmgröße von über 900 Pixeln erreicht haben. das nach unten schrumpfen, können wir sehen, wenn wir unter 900 gehen, ist es jetzt zurück in unsere ursprüngliche Flexrichtung umgekehrt. Um unseren Abstand dazwischen hinzuzufügen, können wir die Eigenschaft justify Inhalt festlegen und einen Wert namens Leerzeichen zwischen verwenden. Dadurch wird nur der gesamte verfügbare Leerraum zwischen allen Elementen verteilt . Dies funktioniert unabhängig davon, wie viele Elemente wir in unserem Header haben. Wenn wir drei verschiedene Elemente hätten, würden alle Abstände gleich zwischen allen drei dieser Abschnitte gelten. Das letzte, was für diesen Header zu tun ist, wenn wir auf der rechten Seite schauen, haben wir einige Abstände rechts von unseren Links und wir müssen dies auch auf der linken Seite abgleichen. Geh zurück nach oben. Scrollen Sie nach unten zu unseren Listenelementen und wir können sehen, dass wir 10 Pixel Rand auf der linken und rechten Seite hinzugefügt haben , Ihr Guthaben ist nach oben, gehen Sie nach unten zu unserem Header-Abschnitt und dann können wir diese 10 Pixel Rand setzen , um nur auf die Anwendung linke Seite. Speichern Sie, und über in den Browser. Das stimmt nun auf beiden Seiten überein. Als nächstes, bis zum Overlay-Abschnitt, haben wir nicht zu viel zu tun. Wir haben bereits ein reaktionsfähiges Bild im Hintergrund eingerichtet. Alles, was ich tun werde, ist die Schriftgröße und machen diesen Abschnitt ein wenig größer. Dies sind die Klasse der Textüberlagerung. Die Schriftgröße. Versuchen wir es mit 2.2 rems. Machen Sie es ein bisschen größer, 3,4. Wir können auch den [unhörbaren] Wert erhöhen, um etwas mehr Platz im Inneren hinzuzufügen. Gehen wir für acht Rems. Scrollen Sie nach unten zu unserem Popular Courses Abschnitt, was wir tun müssen, ist, den CSS-Anzeigetyp auf Raster zu setzen und dies wird uns dieses Raster-Stil-Layout geben , das wir in der endgültigen Version sehen. Um dies zu tun, müssen wir zuerst die Elemente des übergeordneten Elements für alle unsere Rasterelemente auswählen. Dies hat diese Klasse von Kursen. Dann hat jeder einzelne Abschnitt die Klasse des Rasterelements. Zuerst gehen wir zu den Eltern, die die Klasse von Kursen haben, und dann setzen wir den Anzeigetyp auf Gitter. Wenn wir den Browser neu laden, sehen wir im Moment keine Änderungen. Dies liegt daran, dass wir dem Browser genau sagen müssen, wie viele Spalten und Zeilen wir verwenden möchten, um unser Raster für die Spalten zu erstellen. Wir müssen die Rastervorlage hinzufügen, Spalten Eigenschaft. Die Anzahl der Werte, die wir hier hinzufügen bestimmt, wie viele Spalten wir auf unserer Seite haben. Die endgültige Version hat drei verschiedene Spalten. Was wir tun können, ist, drei separate Größen festzulegen, wie 200 Pixel, 100 Pixel und 300. Aktualisieren. Wir können hier für unsere erste Spalte sehen, wir haben den Wert von 200 Pixel breit. Wir haben dann 100 und dann 300, die wir gerade hier eingestellt haben. Wir könnten diese auch den gleichen Wert machen, oder stattdessen, um die Dinge noch einfacher zu machen, können wir eine Wiederholungsfunktion verwenden. Dann können wir zwei Werte übergeben. Die erste ist die Anzahl der Spalten, die Sie erstellen möchten , und dann der zweite Wert ist die Breite jeder unserer Spalten. Wenn wir wollen, dass jede dieser Spalten eine gleiche Menge an Breite haben, können wir dies auf 1fr setzen. Die Brucheinheit, wenn sie mit dem Gitter verwendet wird, bedeutet, dass sie automatisch die Breitenfotos berechnet und sicherstellen, dass alle unsere drei Spalten gleich sind. Aktualisieren, und dies wird jetzt wirksam. Wir können genau das gleiche für Gittervorlagenzeilen tun und wir können die genaue Höhe festlegen , die wir für jeden dieser Abschnitte wollen. Aber wir müssen dies nicht tun, denn wenn wir nur die Spalten hinzufügen, wie wir hier haben, jedes Mal, wenn wir einen neuen Abschnitt oder ein neues Rasterelement hinzufügen, wird dies dann einfach automatisch in die nächste Zeile fließen. Wenn Sie etwas Abstand zwischen jedem dieser Rasterelemente haben möchten, können wir auch die Rasterlücke hinzufügen. Setzen Sie dies auf einen beliebigen CSS-Wert wie zwei rems. Diese Rasterlücke wird nur zwischen jedem dieser Rasterelemente angezeigt. Es gilt nicht links und rechts oder oben und unten. Wenn Sie einige Abstände um die Außenkante anwenden möchten, müssen wir einen gewissen Rand oder eine Polsterung anwenden. Das ist, was ich ganz unten machen werde. Es sagt etwas Polsterung, nur bis zum Ende dieser Elemente und wir halten es das gleiche von zwei Rems aktualisieren. Neben dem Styling für jeden dieser Kurse, und jeder von ihnen hat die Klasse des Rasterelements. Platzieren Sie dazu einen Rahmen um jedes einzelne Pixel, eine durchgezogene Linie und die Farbe Hellgrau. Wir können die Ecken mit einem gewissen Randradius abrunden. Nur ein kleiner Wert ist in Ordnung, also lassen Sie uns drei Pixel versuchen. Das sieht gut aus. Was wir tun wollen, können wir den Randradius unten sehen, aber oben oben wollen wir auch die abgerundeten Ecken für dieses Hintergrundbild anpassen. Wo wir dies tun können, ist wieder das Rasterelement auszuwählen und dann auf alle Bilder in diesem Abschnitt anzuwenden. Wir können die einzelnen Randradius Eigenschaften festlegen, und wir können in vier einzelne Werte von oben links, oben rechts, unten rechts und unten links hinzufügen oben rechts, unten rechts . Zunächst einmal die obere linke von drei Pixeln. Drei Pixel oben rechts, und wir wollen nicht, dass die untere rechte oder die untere linke abgerundet wird, also setze ich die letzten beiden Werte auf Null. Auch dies würde die Ecken auf allen vier Seiten unseres Rasterartikels runden. Danach haben wir den Sportbereich direkt unten, und dafür werden wir die Flex-Richtung nutzen. Fügen Sie das Bild neben diesem Text ein. Wenn wir gehen über zu unserem Index oder html, und scrollen Sie nach unten ist voller Abschnitt hat die Klasse der Sport, stellen Sie die Anzeigezeit, um flex zu sein. Denken Sie daran, wenn wir die Flex-Box verwenden, wird die Standard-Flexrichtung Zeile sein. Wir müssen dies nicht einschließen, da dies standardmäßig ist, wird unser Inhalt automatisch in einer Reihe platziert. Wenn wir den Browser verkleinern, können wir sehen, dass dieser Anzeigetyp von Flex nur auf diesem großen Bildschirm angewendet wird. Schauen Sie genau nach unten am unteren Rand des Bildes, wir können diese weiße Linie hier sehen. Dies ist etwas, das [unhörbar] sein kann, wenn Sie gerade anfangen, Websites zu erstellen. Es kann auch schwer zu diagnostizieren sein, da der Abstand nicht mit irgendeinem Rand oder Padding angewendet wurde. In der Tat habe ich tatsächlich einen Blogbeitrag dazu geschrieben, und wenn wir zu meiner Website gehen, können wir genau sehen, warum dieser weiße Abstand gelten wird. Dieses Bild hat auch das gleiche Leerraumproblem unten. Dies geschieht, weil standardmäßig ein Bildelemente als inline bezeichnet wird. Inline-Elemente werden standardmäßig auf der Seite angezeigt. Wenn wir 10 verschiedene Bilder einrichten, würden diese versuchen, den gesamten verfügbaren Platz in derselben Zeile zu beanspruchen und dann zur nächsten Zeile zu wechseln. Das Gegenteil ist ein Element auf Blockebene, das automatisch in einer neuen Zeile angezeigt wird. Der Grund, warum der Browser diesen Leerraum am unteren Rand von Inline-Elementen hinzufügt , liegt darin, dass viele Inline-Elemente, wie z. B. eine Spanne, ebenfalls Text enthalten können. Wenn wir diesen Text betrachten, Sie gerade hier mit dem Buchstaben P sehen und auch das G fällt unter die Grundlinie des restlichen Textes, und es ist dieser untere Abschnitt, der den Abstieg genannt wird, was der Grund ist warum der Browser etwas Platz in ihm unten hinzufügen wird. Wenn der Browser keinen Platz am unteren Rand der Elemente hinzugefügt hat, der Boden dieses P und auch das G abgeschnitten werden. Aber in unserem Fall verwenden wir ein Bild anstelle von Text, also müssen wir diesen Leerraum unten nicht zulassen. Es gibt ein paar verschiedene Möglichkeiten, wie wir diese umgehen können, und eine der einfacheren Möglichkeiten besteht darin, den Anzeigetyp so zu verwenden, dass er Block ist. Dies wird den Inline-Typ überschreiben, den wir standardmäßig haben, aktualisieren, und jetzt bedeutet, dass der Browser den Leerraum am unteren Rand dieses Elements nicht zulässt. Dies ist nur etwas, auf das Sie achten müssen, wenn Sie einen weißen Raum am unteren Rand eines Bildes sehen . Zurück zur Medienabfrage und knapp unterhalb des Sportabschnitts müssen wir sicherstellen, dass sowohl das Bild als auch der Textbereich eine gleiche Menge an Platz hat oder spezifischer ist, eine gleiche Breite. Um dies zu tun, können wir unseren Sportbereich greifen, und die Flex-Box hat eine Flex-Eigenschaft, die es uns ermöglicht, eine gleiche Menge an Breite auf beide dieser untergeordneten Elemente anzuwenden . Zuerst greifen Sie den Wrapper, der der Sportabschnitt ist, und dann jedes div, das sofort diesen Elementen folgt, setzen Sie den Flex-Wert auf eins, und da dieser Flex-Wert von eins auf Sie angewendet wird beide unserer Kind-Div's, also sowohl diese als auch diese, sollten Sie jetzt eine gleiche Menge an Speicherplatz haben. Wenn wir nur das 1. div den Flex-Wert von eins setzen und wir das zweite div so setzen, dass es einen Flex-Wert von 2 hat, würde das zweite div versuchen, den doppelten verfügbaren Platz als das erste div einzunehmen, aber da wir diese als gleiche Werte haben, sie sollten nicht im Browser reflektiert werden. Aber immer noch sehen wir das Bild ist etwas kleiner als dieser Abschnitt oben auf der rechten Seite. Lassen Sie uns in die Entwickler-Tools gehen. Wählen Sie diesen Abschnitt nur hier aus, und der Grund, warum dieser grüne Bereich um die Außenseite dieses div ist. Wählen Sie dies und über auf den berechneten Bereich, wir können sehen, dass wir 20 Pixel Polsterung auf alle vier Seiten angewendet haben. Um dies gleich zu machen, könnten wir diese Polsterung für den großen Bildschirm entfernen. Abschnitt hat die Klasse der Sporttexte, also könnte es entweder innerhalb der Medienabfrage entfernen oder wir könnten bis zum ursprünglichen Sporttextbereich scrollen, und wir konnten diese Polsterung nur oben und unten anwenden. Holen Sie sich den Wert von Null links und rechts, aktualisieren Sie, und dies sieht jetzt viel gleichwertiger aus. Mal sehen, wie das auf dem kleinen Bildschirm aussieht. Das sieht immer noch gut aus, da wir bereits die Erkennung mithilfe der Flex-Box zentriert haben. Der letzte Abschnitt, um den man sich kümmern muss, ist der Fußbereich. Das wird ziemlich einfach sein. Wir müssen nur die Fußzeilenabschnitte auf der geordneten Liste greifen und die Flex-Richtung ändern, um Zeile zu sein. Diese Fußzeile, ungeordnete Liste, Flex-Richtungen gleich Zeile zu sein, und fügen Sie den Raum gleichmäßig über die Seite, werden wir die Verwendung von rechtfertigen Inhalt machen. Wählen Sie Raum gleichmäßig, und da gehen wir. Wir können auch einfach überprüfen, dass dies auf dem kleinen Bildschirm gut aussieht. Von oben haben wir immer noch alle ursprünglichen CSS-Eigenschaften, die wir in den frühen Videos angewendet haben. Wenn wir nun den Browser auf über 900 Pixel Breite dehnen, werden unsere Inhalte nun an den größten Bildschirm angepasst. Wir haben Inhalte nebeneinander, wir haben einen Rasterbereich für unsere Kurse, größeren Text und auch etwas zusätzlichen Platz in. hoffe, Sie haben es genossen, ein reaktionsfähiges Projekt zu erstellen, indem Sie die CSS-Medienabfragen, reaktionsschnelle Bilder und auch relative Größen für unsere Texte nutzen. Wir müssen noch ein Projekt weitermachen, wo wir ein Framework nutzen werden. Wir sehen uns im nächsten Abschnitt. 21. Einführung in Bootstrap und Einrichtung: Hallo an alle, und willkommen zurück zu Lernen HTML und CSS durch Erstellen von 3 Real Projects. Herzlichen Glückwunsch zum dritten Projekt. Mittlerweile haben wir eine statische Website und auch eine voll responsive Website erstellt. Als nächstes wollen wir zu einem Hotelprojekt übergehen, das mit dem beliebten Twitter Bootstrap-Framework gebaut wird. Dies ist ein Blick auf das, was wir einbauen wollen. Es ist wieder eine voll responsive Website, was bedeutet, dass wir sie verkleinern können und es sieht gut aus auf verschiedenen Geräten. Es wird ein Schiebe-Karussell enthalten, das verschiedene Bilder zeigt. Im oberen Bereich wird ein Suchfeld und eine Navigation angezeigt. Wir werden auch die Dropdown-Menüs in den verschiedenen Abschnitt unten hinzufügen. Ich werde zeigen, wie wir eine schön aussehende Website wie diese wirklich schnell und einfach mit Bootstrap erstellen können . Das erste, was wir tun müssen, ist, wenn wir zu getbootstrap.com gehen. Wir werden einen Blick durch die Website werfen, aber zuerst klicken wir einfach auf die Schaltfläche „Bootstrap herunterladen“ und den Bootstrap-Link auf der linken Seite. Werfen wir einen Blick über die Website, während sie heruntergeladen wird. Im Abschnitt „Erste Schritte“ gibt es verschiedene Informationen, Vorlagen, die Sie verwenden können, um schnell loszulegen. Es zeigt Ihnen alle Datei- und Ordnerstrukturen für die verschiedenen Downloads, die Sie verwenden können, und auch die grundlegende Vorlage. Dies wird die Vorlage sein, die wir für unsere Indexseite verwenden werden. Weiter unten gibt es mehr Beispiele und kleine Vorlagen, mit denen Sie wirklich schnell loslegen können . Zurück an der Spitze gibt es auch den CSS-Abschnitt. Jetzt gibt Ihnen das CSS einen Überblick über alle verfügbaren Komponenten. Wir können zum Beispiel Tabellen, Formulare, Schaltflächen betrachten , und wenn Sie einfach auf eine dieser klicken, zeigt es Ihnen, wie Sie eine Schaltfläche in Bootstrap tun. Es ist sehr einfach und das gesamte CSS ist bereits vorkompiliert. Sofort erhalten Sie eine gut aussehende Website. Im Komponentenabschnitt können wir uns die Glyphicons ansehen. Bootstrap kommt bereit mit all diesen verfügbaren Icons, die ohne zusätzliche Kosten verwendet werden können. Es gibt auch Beispiele für Navigationsleisten und die verschiedenen Komponenten wie Beschriftungen und Kopfzeilen. Wir werden uns den Beispielcode ansehen. Vieles davon ist dem, was wir bereits gelernt haben, sehr ähnlich. Wir müssen nur die Bootstrap-Klassen anwenden, um sie mit dem CSS zu verknüpfen. Wir werden einen Blick auf das enthaltene JavaScript werfen. Jetzt bietet das JavaScript alle Arten von Effekten. Es gibt Dinge wie Übergänge, und was wir uns ansehen werden, ist das Karussell. Wir werden den folgenden Code verwenden, um das Karussell auf unserer Website hinzuzufügen. Bootstrap sollte längst heruntergeladen haben. Wenn Sie zu den Downloads gehen, entpacken wir es. Wenn wir nur den vollständigen Ordner kopieren, und wenn wir zurück in das Projekt gehen, und wir fügen das in das Projekt und wir werden das umbenennen. Wir rufen diesen Ordner MyHotel auf, und wenn wir den Ordner öffnen, müssen wir unsere Bilder dorthin ziehen. Sie sollten die Bilder, die Sie für dieses Projekt benötigen, bereits heruntergeladen haben. Wenn nicht, gehen Sie zurück und laden Sie sie jetzt herunter. Da die meisten Dateien und Ordner für das Bootstrap-Projekt eingerichtet sind, müssen wir nur die Indexseite hinzufügen. Wenn Sie in Ihren Texteditor gehen und wir müssen Datei und öffnen Ordner, und auf unserem Desktop, haben wir die Projekte. Ich werde zu MyHotel gehen, und das erste, was wir tun müssen, ist, gehen Sie zu Datei und Neu, und wir speichern das als unsere Index-Seite, index.html. Gehen wir zurück auf die Bootstrap-Website, und wenn wir zurück zum Abschnitt „Erste Schritte“ gehen, wenn wir nach unten zur grundlegenden Vorlage scrollen, und wir werden das nur kopieren, und dann fügen wir es in unsere Index-Seite ein. Wie Sie sehen können, wenn wir nur einen Blick nach oben und unten werfen, enthält es die gleiche Struktur, die wir in den ersten beiden Websites aufgenommen haben, und es gibt einen Link zu den Bootstrap Stylesheets. Es gibt auch das Ansichtsfenster-Tag für die Reaktionsfähigkeit. Das erste, was wir tun werden, ist, dass wir den Seitentitel ändern und es MyHotel nennen. Der Link zum Bootstrap CSS ist bereits enthalten, daher brauchen wir noch nichts damit zu tun. Ebenfalls standardmäßig enthalten ist das HTML5 Shiv, das wir in den ersten beiden Projekten aufgenommen haben, also ist das alles vorhanden. Wir werden uns das nur in der Vorschau ansehen. Das ist das Bootstrap-Framework alles Setup und bereit zu gehen. Als nächstes betrachten wir das Hinzufügen der Navigationsleiste. 22. So fügst du die Toolbar für adaptive Navigation hinzu: Hallo, alle, und willkommen zurück. Wir haben jetzt unser Bootstrap-Projekt eingerichtet. Was wir tun wollen, ist mit der Arbeit an der oberen Navigationsleiste dort beginnen. Wenn wir nur mit dem Löschen der Hallo, Welt Header beginnen. Wir gehen zurück zu getbootstrap.com. Wenn wir oben den Abschnitt Komponenten auswählen, müssen wir die Liste nach unten schauen und den Navbar-Abschnitt finden. Was wir tun werden, ist die Standard-Navbar dort zu kopieren. Wenn Sie den Coder dort kopieren, füge ich ihn in den oberen Bereich des Body-Abschnitts ein. Das erste, was wir tun wollen, ist, dass wir nur den Behälter von Flüssigkeit auf den Standardbehälter wechseln . Ich werde auch die Kommentare löschen, und wie Sie sehen können, liefert Bootstrap am Ende jedes Schließens dort einen Kommentar, so dass wir genau sehen können, wo wir gerade sind. Also das erste, was ich tun möchte, wenn wir uns unser Beispiel ansehen, müssen wir unseren, MyHotel Namen dort einfügen und alle vier Links an der Spitze starten. Derzeit ist die Marke der Platzhaltertext. Also ändern wir das in MyHotel. Die vier Links oben, was wir tun müssen, ist, wenn wir nach der ungeordneten Liste suchen, die da ist, und die einzelnen Listenelemente, die es gibt. Die erste, wenn wir den Linktext zu „STAY WITH UNS“ ändern. Dann wird der zweite Link „RESTAURANTS“ sein. Wenn Sie unsere Vorschau überprüfen und das sieht gut aus. Sie werden feststellen, dass es dort eine Dropdown-Navigation gibt. Wir wollen das für dieses Beispiel loswerden. Also, was wir tun werden, ist, wenn wir nach der Liste mit der Klasse der Dropdown-Liste suchen und wir werden nur die löschen, Ich suche nur nach dem schließenden Listenelement dort, vor den letzten ungeordneten Listen. Also, wenn wir das auswählen und diesen Abschnitt verlassen, was wir tun werden, ist, dass wir das Listenelement kopieren und wir fügen es zweimal ein. Okay, es ist ganz in Ordnung. Wir werden den Text ändern. Der nächste möchte „SPA EINRICHTUNGEN“ sein. Der letzte möchte der Link „HOCHZEITEN“ sein. Ich möchte das ein wenig trennen, damit wir es klarer sehen können. Also als nächstes haben wir das Formular. Dieser Formularabschnitt ist das Suchfeld dort. Sie können sehen, dass es den Eingabetyp von Text gibt , in den wir den Suchtext einfügen. Es gibt auch die Schaltfläche „Senden“, die wir im ersten Projekt verwendet haben. Dann sehen wir ungeordnete Listen auf der rechten Seite, die die Navbar richtige Klasse hat. Wenn wir die Seite nur breiter ausstrecken, werden wir sehen, dass der Fluss richtig ist. Auf kleineren Bildschirmen werden sie auf die Position unten fallen. Auch hier ändern wir den Namen unserer Links. Also der Link auf der linken Seite gezeigt, werden wir in der ungeordneten Liste zu finden, das erste Listenelement. Der erste Link, wenn wir uns unser endgültiges Projekt anschauen, wird „KONTAKT UNS“ sein. Wir möchten die Dropdown-Texte ändern. Gehen, um das in „ENTDECKEN“ zu ändern. Schauen Sie sich unsere Vorschau an. Okay, das sieht toll aus. Unser nächstes ist die Änderung der Namen, die Listenelemente befinden sich im Dropdown-Menü. Wir müssen den ersten Listeneintrag finden, der mit Action beginnt, gerade da ist , und wir wollen unseren auf den Link „NATÜRLICHE UMGEBUNG“ und dann „WO ZU BESUCHEN“, „TAKE EINE TOUR“ ändern . Schließlich der Abschnitt „CORPORATE“. Okay, so alle unsere Listengegenstände an Ort und Stelle. Als nächstes müssen wir das kleine Bild des Telefons dort platzieren und unser Projekt verkaufen. Also machen wir das, indem wir auf die bootstrap.com Website zurückgehen. Wir gehen zum Abschnitt Komponente und wir scrollen nach unten und schauen uns die Glyphe Symbole an. Was wir tun müssen, ist die Beispiele zu finden. Wenn Sie auf den Beispielcode dort klicken, und wir wollen ihn direkt vor dem Text KONTAKT US platzieren. Lassen Sie uns das auf eine neue Linie setzen und wer das Beispiel antreibt. Wenn wir unsere Webseite früher überprüfen, ist es eine Lupe, das ist nur das Beispiel, in dem wir auf der Website verwendet haben. Wenn wir das Telefon ausfindig machen, das ich benutzen möchte. Das ist Glyphicon, Glyphicon-Ohrhörer. Also, wenn wir zurück in unsere Klasse gehen, ist es Glyphicon, Glyphicon Suche. Also müssen wir nur die Suche in Kopfhörer umstellen. Schauen Sie sich unsere Vorschau an. Da gehen wir hin. Es gibt ein Foto des Telefons. Also, das ist unsere Navbar fertig. Es sieht gut aus, weil all das Bootstrap CSS, das bereits voreingestellt ist, wir können alle Preset Stile außer Kraft setzen, aber wir lassen es so, wie es für jetzt ist. Als Nächstes schauen wir uns das Karussell an. 23. So fügst du den Slider und den Marketingbereich hinzu: Willkommen zurück. Im letzten Video haben wir die Navigationsleiste beendet. Als nächstes werden wir anfangen, auf unserer Webseite zu arbeiten und den Schieberegler einzufügen. Wenn wir zurück zu getbootstrap.com gehen, müssen wir den JavaScript-Abschnitt auswählen. Im Menü auf der rechten Seite, wenn wir nur nach dem Karussell auf unserem Text suchen, bis zum Karussell Beispiel. Zuerst, wenn wir den Code kopieren, und dann unter unserem schließenden NAV-Typ, fügen wir ihn einfach ein und schauen Sie sich unsere Vorschau an. Es sieht jetzt nicht viel aus, aber wir werden das CSS ändern und wir werden einige Bilder hinzufügen, um das besser aussehen zu lassen. Lassen Sie uns beginnen, indem Sie unsere Bilder hinzufügen. Wenn wir zum Wrapper für Folien gehen, was wir tun müssen, ist in der Bildquelle dort zu treffen, Pfad zu unseren Bildern. Im Bilderordner sind die beiden Bilder, die wir verwenden werden, der Eingang und der Pool. Wir wählen die Pool-Bilder aus. Wir werden nur den Pool-Bildtext verwenden. Im zweiten div unten, in der Bildquelle, werden wir genau das gleiche tun. Im Ordner images wird dieser die entrance.jpg sein. Wir ändern das Alt in das Eingangsbild, das die Punkte entfernen wird, und dann die Stelle des Textes, damit wir eine Beschriftung auf das Bild einfügen können, aber das brauchen wir nicht. Außerdem haben wir freie Kreise, um freie Bilder anzuzeigen. Wir verwenden in diesem Beispiel nur zwei Bilder, daher ändern wir das mit den Listenelementen. Auf dem Indikatorbereich gibt es drei verschiedene Listenelemente, wir werden einfach den dritten entfernen. Das wird das zu zwei Hinweisen dort ändern. Es sieht so aus, als ob es gut funktioniert. Wir haben auf die Pfeile geklickt, und Sie können sehen, dass wir das Bild ändern können, und das funktioniert gut. Eine weitere Sache, die ich Ihnen zeigen möchte, ist, wenn wir auf eine mobile Ansicht schrumpfen, können Sie tatsächlich sehen, dass das Menü auf eine Box fällt. Dadurch sieht es bei mobilen Ansichten viel sauberer und kompakter aus. Wir müssen den gesamten Schieberegler in einem Bootstrap-Container umgeben. Wir müssen diesem eine div-Klasse gleich Container geben, und wir werden das einfach schließen. Ich werde nur das schließende div kopieren. Wir legen das unten auf der Seite. Es gab auch einen Container, den wir für den Navigationsbereich dort oben verwenden. Wir starten den Container erneut. Alle Bootstrap-Inhalte müssen sich innerhalb dieses Containers befinden. Wir werden nur ein paar Kommentare eintragen. Das wird das Karussell sein, und es wird das Ende des Karusells sein. Dies ist das schließende div für den Container. Lassen Sie uns unseren Schieberegler zu beenden. Wenn wir zurück auf die getbootstrap-Website gehen, und wenn wir zurück in den Abschnitt „Erste Schritte“ gehen. Wenn im Abschnitt unter dem Karussell hier, wenn wir in den Abschnitt „Erste Schritte“ von Bootstrap gehen und wir nach unten zu den Beispielen scrollen, was wir wollen, ist das Karussell. Wenn wir in dieses Beispiel gehen und mit der rechten Maustaste klicken und Seite Quelle anzeigen, was wir tun müssen, ist, unter der Zahl ist das Karussell. Unter dem Karussell kopieren wir die drei Textspalten unter dem Karussell. Wir gehen zurück in unseren Texteditor. Unter dem schließenden Karussell div fügen wir das in. Wir werden nur eine Beute in unserer Vorschau machen. Wir werden nur diese drei kreisförmigen Bilder entfernen. Wenn wir uns den Bildbereich auf allen drei Bildern ansehen, dann gehen wir. Zuerst ändern wir die drei verschiedenen Überschriften dort in den H2-Tags. Wir machen sie genauso wie unsere fertigen Projekte. Der erste wird sein, Nie weit weg. Das zweite H2-Tag ist, Häufiger Besucher. Die dritte ist, Zimmer, die zu Ihnen passen. Wir ändern den Text, also der erste ist, Nie weit weg. Zwischen den P-Tags möchten wir diesen Absatz ändern Mit über 150 Standorten weltweit sind Sie nie weit von uns entfernt. Der zweite Absatz wird sein, beitreten Sie meinem Hotelclub für fantastische Ersparnisse und Treue-Belohnungen. Der dritte Absatz ist, Pakete sind für jeden Geschmack und Budget verfügbar. Rufen Sie unser freundliches Team an. Nun, lassen Sie uns das in unserer Vorschau überprüfen. Als nächstes möchten wir die drei Schaltflächen am unteren Rand ändern. Wenn Sie das fertige Projekt bemerken, haben sie einen blauen Hintergrund. Wir gehen zurück in den Getbootstrap, zurück zum CSS-Abschnitt. Wenn wir nach dem Schaltflächenbereich auf der rechten Seite suchen, werden Sie feststellen, dass wir die Standardschaltfläche verwenden. Wenn wir zurück in die Indexseite schauen, schauen wir uns die Klasse an und sie ist Button-Standard, die gerade oben dort ist. Was wir wollen, ist die primäre Schaltfläche, also müssen wir sie in button-primär ändern. Das ändern wir auf allen drei Knöpfen. Wir werden das in der Vorschau überprüfen. Ok. Genau das, was wir wollen. Wir müssen auch den Text der Schaltfläche ändern, also überprüfen wir die fertigen Projekte. Wir müssen den Abschnitt „Details der Ansicht“ ändern. Der erste wird Standorte sein, zweite ist unser Club beitreten, und der dritte wird den Namen der Ansichtsdetails haben, also behalten wir das einfach so, wie es ist und wir werden die Änderungen überprüfen. Das hat gut geklappt. Alle Texte in der Minute sind auf der linken Seite schwebt. Wir möchten, dass es in allen drei der divs zentralisiert wird. Wir tun das durch [unhörbare] Klasse in die Reihe. Wir tippen einfach in Textcenter, und das macht alles schön zentriert. Ich bin gerade mit diesem Abschnitt fertig. Wenn du uns beim nächsten Video beitrittst, schauen wir uns die folgenden Features an. Wir sehen uns dort. 24. So stellst du alles mit dem Beitragsbereich und der Fußzeile fertig: Hallo alle, willkommen zurück. Im letzten Video haben wir uns das Karussell angeschaut und wir haben auch die drei Schaltflächen unten hinzugefügt, so dass wir diese Website beenden werden, indem die Features und auch den Fotobereich unten hinzufügen. Wenn wir also auf die Website getboostrap.com im Abschnitt „Erste Schritte“ zurückgehen, werden wir das gleiche Beispiel verwenden, das wir für das Karussell verwendet haben, welches das Karussell Beispiel ist. Wenn Sie mit der rechten Maustaste auf „View Source“ klicken, werden wir den Abschnitt unten kopieren, die wir das letzte Mal kopiert haben, also wenn wir den Anfang der Featurettes Kommentar finden, und dann gehen wir den ganzen Weg nach unten vorbei am Ende der Featurettes und werden wir auch in der Fußzeile kopieren. Wir müssen den letzten Container nicht kopieren , weil wir das bereits auf unserer Website haben, also kopieren Sie das, und dann müssen wir direkt unter die letzte Zeile dort über dem schließenden Container gehen , und wir fügen das in. Also alle Inhalte jetzt an Ort und Stelle in der Website gibt. Bevor wir weiter gehen, möchte ich nur über das responsive Grid in Bootstrap sprechen. Sie werden feststellen, dass es verschiedene Klassen wie col-md-7 und fünf gibt, was sie sind, ist die Anzahl der Spalten. Wenn Sie auf der ersten Featurette bemerken, ist die Bildgröße ein Fünf-Spalten-Raster, und der Text links davon ist ein Gitter mit sieben Spalten. Es ist also ein 12-Säulen-Raster, das wir verwenden, also die sieben auf der linken Seite und die fünf sind die volle Breite, und wenn wir uns den letzten Abschnitt ansehen, den wir im letzten Video gemacht haben, sind die drei gleichen Teile in jeweils vier Spalten unterteilt. So legen wir Dinge in Bootstrap fest, Sie können die Dinge schmaler oder breiter machen, indem Sie die Anzahl der Spalten im Raster ändern. Also werde ich auf unsere fertige Website umschalten, damit wir sehen können, was wir eingeben müssen. Also wollen wir zuerst mit der Überschrift beginnen, also wenn wir die Featurette Überschrift suchen und den ersten Featurette Überschrift Abschnitt löschen, und wir werden diese Hochzeitspakete nennen, und dann den Spanabschnitt danach, werden wir ändern Sie das zu, maßgeschneidert, um Ihnen zu entsprechen. Dann schauen wir uns die Absatz-Tags an, die gerade da sind, und wir werden nur den Text der endgültigen Website dort einfügen. Ich versuche nur, das zu kopieren und einzufügen. Wir werden unsere Vorschau überprüfen, sehen, dass alles in Ordnung ist. Als nächstes werden wir das Bild dort einfügen, und wenn wir den Speicherort des Bildes ändern, und wir sind alle im Ordner Images, und tatsächlich lassen Sie mich einfach die Datenquelle ändern. Also images/wedding.jpg für die erste, wir werden das zweite Bild auch ändern. Also Bilder Ordner und wir werden das Bild restaurant.jpg hinzufügen, und das dritte Bild, wieder, löschen Sie die Datenquelle, und das dritte Bild ist die spa.jpg. Okay, das sind alle Bilder an Ort und Stelle, wir müssen nur den Text jetzt ändern. Das ist also der erste Abschnitt, und der mittlere, Vorschau-Backup, und wir kopieren einfach den Text dort hinein, wir werden das in den Absatz Abschnitt einfügen. Also für die Überschrift, es ist erstklassiges Essen, und wir werden die sehen für sich selbst Teil in den Span-Tags ändern, wie von Weltklasse-Köchen betreut werden, und dann die dritte und letzte, Ich werde einfach in die fotografieren, und wir werden die Überschrift ändern. Entdecken Sie unsere Spa-Einrichtungen, und dann werden Sie nie wieder gehen wollen. Welches ist die einzige Vorschau in unserem Schläfer. Okay, also gehen wir in einer Minute zu Styling, wir wollen nur, dass der Text ein bisschen größer ist. Zunächst einmal werden wir den Fußbereich beenden, also ändern wir einfach den Text dort, und wir ändern diesen in 2015, My Hotel. Um die Stile für den Text dort hinzuzufügen, ist der am meisten bevorzugte Weg, dies in Bootstrap zu tun, indem überschreiben, dass wir Ihr benutzerdefiniertes CSS erstellen. Also, wenn wir zurück in die Seitenleiste gehen und wenn wir in Datei, Neu gehen, werde ich ein neues Stylesheet erstellen. Also werden wir das sofort speichern, und wir werden diese style.css nennen, und wir werden das in den CSS-Ordner des Bootstrap-Themes ablegen wollen. Also werden wir das speichern, und dann gehen wir zurück in unsere Indexseite, und wenn wir zurück nach oben gehen, wollen wir unser eigenes CSS direkt unter dem Bootstrap-Board aufnehmen, also überschreibt es. Also ändern wir den Kommentar in benutzerdefiniertes CSS, und es ist auch im CSS-Ordner. Wir müssen nur den Namen in style.css ändern. Also, wenn wir zurück in unsere style.css gehen, das erste, was wir tun wollen, ist, dass wir die Schriftgröße erhöhen wollen. Also, wenn wir zurück in die Index-Seite gehen und wir finden die Schnittmenge Notwendigkeit für die Featurette, also das ist die erste, und dann der Text, die erste Klasse Essen hat eine Klasse von Featurette Überschrift. Also kopieren wir das einfach, und in unseren Stilen, und fügen Sie das in. Ich möchte nur einen Punkt vor dort hinzufügen, wenn seine Klasse. Wir werden die Schriftgröße ausprobieren, wir werden das mit 4ems versuchen. Okay, es sieht besser aus, und wir haben mit ein wenig Polsterung an der Spitze begonnen, nur um den Text ein wenig nach unten zu drücken, und wir setzen das auf fünf Prozent, nur ein bisschen mehr, setzen Sie es auf acht. Okay, das sieht besser aus. Sie werden feststellen, wie viel schneller und einfacher es ist, eine Website mit einem Framework wie Bootstrap zu erstellen , und fühlen Sie sich frei, diese Website oder andere so viel wie Sie möchten mit der benutzerdefinierten CSS-Datei anpassen , aber wir werden lassen Sie die Website an, dass, haben wir jetzt eine voll reaktionsfähige und eine gut aussehende Website. Vielen Dank, dass Sie sich uns angeschlossen haben, und das ist das Ende des Messeprojekts. 25. Vielen Dank und was jetzt?: Herzlichen Glückwunsch zum Abschluss dieses Kurses. Ich hoffe, Sie haben viel über HTML, CSS und Webdesign im Allgemeinen gelernt . Wenn Sie lernen, eine persönliche Website für ein Hobby oder eine Website für Ihr Unternehmen zu bauen, sollten Sie jetzt über die erforderlichen Fähigkeiten verfügen, um dies zu vervollständigen. Oder wenn Sie nach einer neuen Karriere suchen, sollten Sie jetzt eine gute Grundlage haben, auf der Sie aufbauen können. Wenn Sie weiter lernen möchten, empfehle ich jetzt, auf JavaScript und jQuery zu wechseln. Dann möglicherweise eine serverseitige Sprache wie PHP. Es ist auch nützlich, sich mit einem Content-Management-System vertraut zu machen, das auf Ihrer Website wie WordPress oder Drupal verwendet werden kann. Nochmals vielen Dank für die Teilnahme an diesem Kurs, bitte hinterlassen Sie eine Bewertung. Es würde wirklich helfen. Ich hoffe, du begleitest mich in der Zukunft auf einen Kurs. 26. Folge mir auf Skillshare: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und haben etwas Wissen daraus gewonnen. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für alle Updates und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Also, nochmals vielen Dank, viel Glück, und hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.