Responsive persönliche Portfolio-Website – mit HTML, CSS und JavaScript

1. Einführung: Hallo Jungs, Mein Name ist Peter und willkommen zu dem Kurs, in dem wir gehen, um eine moderne responsive Portfolio-Website zu bauen und dieser Präsident konvertieren, um digitale Welt. Es ist wirklich wichtig, sich von der Masse abzuheben und einzigartig zu sein. Wenn Sie sich für einen Job bewerben oder sich geneigt nähern, sollten Sie etwas haben, das einzigartig oder unverwechselbar ist, das auf Ihren Bot eingestellt ist. Mit diesem sagte, mit einem Portfolio Website, die zeigt, wer Sie sind, was sind die verschiedenen Fähigkeiten, die Sie verarbeiten diese plagen die verschiedenen Projekte, die haben , dass all diese Dinge können einen besseren Eindruck von Ihnen zu schaffen. Ordnung, jetzt über diesen speziellen Kurs zu sprechen, ist dieser Kurs für Anfänger kuratiert. Aber es wird besser sein, wenn Sie Grundkenntnisse in HTML und CSS haben. Und nun lassen Sie uns über die Kursstruktur sprechen. Also zuerst werde ich euch einen grundlegenden Überblick über unsere Website geben. Erklären Sie es entworfen und Funktionalitäten , so dass Sie Jungs ein besseres Verständnis davon bekommen, was wir bauen werden. Zweitens werde ich einige Best Practices teilen, die Sie während des Lernens umsetzen können, besonders während Sie programmieren lernen, so dass ich das maximale Potenzial dieser bestimmten Götter erhalten kann. Danach kommen wir unter den Hauptteil. Zunächst einmal werden wir das Projekt aufbauen. Und im Rahmen des Projekts erstellen wir die verschiedenen Dateien und Ordner, die benötigt werden. Die wählen oder wählen Sie die verschiedenen Farben, die wir diese bestimmte Website verwenden. Und auch wir importieren alle notwendigen Majors in ein Projekt. Danach beginnen wir, eine Website zu codieren. Also werden wir die Website Abschnitt für Abschnitt codieren und RB beginnen mit dem Heldenbereich, gefolgt von der Abbruchabschnitt, Geschicklichkeitsabschnitt, Projektabschnitt, Blog-Abschnitt und dem Kontaktbereich. Und sobald wir vollständig codiert Website, jetzt ist es Zeit für uns, unsere Website ansprechbar zu machen. Und wie wir heute wissen, surfen fast alle Nutzer über ihr Smartphone im Internet. Daher ist es wirklich wichtig, eine Website zu haben, die sich an verschiedene Bildschirmverhältnisse anpassen kann. Also haben wir zwei verschiedene Videos, in denen ich Schritt für Schritt gehe und erklärt, wie wir eine Website reaktionsschnell machen können. Das geht also um die Kursstruktur. Und wie ich bereits sagte, das ist es bedeutend natürlich, in dem ich über das grundlegende Zeug sowie den Entwicklungsteil auf einfachste Weise wie möglich spreche. Also das ist es, Jungs, vielen Dank fürs Anschauen und ich hoffe wirklich, euch in der nächsten Lektion zu sehen. 2. Website-Übersicht: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video werde ich euch den grundlegenden Überblick über unsere Website geben. Und gerade jetzt, was sehen Sie leicht Endprodukt. Und jetzt sind wir im Heldenbereich. Und im oberen Teil hier sehen Sie diese ESR-Navigationsleiste. Und in der Navigationsleiste haben wir ein Logo, verschiedene Links und eine Schaltfläche. Und diese Links sind völlig funktionsfähig. Also zum Beispiel, wenn ich wollte, um den Blog-Bereich wieder zu gehen, klicken Sie auf den Blog-Abschnitt und stirbt wollen uns direkt in den Blog-Bereich mit einer reibungslosen Animation zu bringen . Und hier im Heldenbereich, im zweiten Abschnitt haben wir Tau, das Heldenbild, wie beim letzten Text zusammen mit dem Button. Und der untere Teil, wir haben eine scharfe Struktur. So wird diese Struktur mit Clip-Pfad gemacht, und wir haben auch die Krümmung mit der Polygon-Funktion definiert. Also Leute, wenn Sie diese Begriffe nicht verstehen, keine Sorge, ich habe all diese Dinge in den kommenden Abschnitten ausführlich erklärt. Wenn Sie also diese Begriffe nicht verstehen, machen Sie sich keine Sorgen, am Ende jedes Abschnitts wird alles völlig klar sein. Gehen wir nun zum Abschnitt „Über“. Also im Board-Abschnitt haben wir ein Bild bekommen, und auf der rechten Seite haben wir einen Textabschnitt, der eine kleine Einführung hat. Und hier haben wir unsere Social-Media-Icons. Und diese Symbole haben einen Call-to-Action. Wenn ich also auf eines dieser klicke, diese, möchte ich uns zum jeweiligen Aufwärtsgang bringen und nun zum Fähigkeitsbereich bewegen. Also wieder im Skill-Bereich, wir haben die Krümmung hier. Wir haben die Überschrift als letzte Lügendetektorin. Und das ist der Autoabschnitt. Wir haben also insgesamt sechs verschiedene Karten und jede Karte hat einen Hover-Effekt. Also haben wir im Grunde CSS-Gitter verwendet, um diese Gottstruktur zu erreichen. Also, dass Video, in dem wir die Fähigkeiten Abschnitt zu bauen ist Value Pack begann, über die CSS-Gitter zu lernen, wie wir ein Gitter definieren können, wie wir Lücke zwischen Göttern und vieles mehr schaffen können. Jeder Wächter hat also ein Bild und eine Textinformation. Und das war's. Hier geht es um den Skill-Bereich. Gehen wir nun zum Projektabschnitt nach unten. Das ist also der Projektabschnitt. Wir haben eine Überschrift und hier haben wir einen Schieberegler. Also diese Feuerzeuge im Grunde mit einer externen JavaScript-Bibliothek als Slick Slide es bekannt gemacht . In diesem speziellen Video erfahren wir, wie wir eine externe Bibliothek verwenden können, wie wir auf bestimmte Eigenschaften der Bibliothek zugreifen können und vieles mehr. Und hier können Sie sehen, dass dies entweder aus einem Bild und einem Absatz besteht. Und im unteren Teil können Sie sehen, dass wir Türen gefangen haben und diese Punkte zeigen die aktuelle Folie. So werden Sie sehen, dass ein jetzt sind wir in der ersten Folie, so dass die Farbe des Bildschirms und es ist schwerer, breiter Bit. Wenn ich nun zum zweiten gehe, wird die zweite grundsätzlich mit einer anderen Farbe und einer breiteren Breite hervorgehoben. Hier geht es also um den Projektabschnitt. Und jetzt gehen wir zum Blockabschnitt. Das ist also der Blog-Bereich, und wir haben einen Hibbing Biograph, einen dunklen Hintergrund und drei verschiedene Karten. Und in jeder Karte haben wir Bild und Text Informationen. Also Farbstoffe oder Labor oder zum Blockabschnitt. Und nun gehen wir zum letzten Abschnitt, der die Maisrückmitte ist. Also hier haben wir eine Überschrift. Wir haben zwei verschiedene Karten. Und in jeder Karte haben wir ein Bild und einige Textinformationen. Und der untere Teil haben wir zum Eingabe-Abschnitt wo wir den Benutzernamen Eingabe, E-Mail sowohl in der Betreff-Nachricht als auch eine Schaltfläche bekommen haben . Es geht also darum. Der Abschnitt Verhalten Me und der Fußzeile, wir haben nur ein Logo, wie wir zuletzt gesehen haben, ein paar Informationen. Dies ist also der grundlegende Desktop oder die Ansicht unserer Website. Und dieser regelmäßige Aufwärtsgang ist völlig reaktionsschnell. Also, wenn ich hier zum Entwicklerwerkzeug komme, können Sie das sehen und ich verkleinere die Breite des Ansichtsfensters. Sie können sehen, dass diese bestimmte Navigationsleiste deaktiviert wird. Und stattdessen haben wir ein Hamburgermenü. Und wenn ich darauf klicke, haben wir am Ende dire Menü hier. Also wieder, ich kann auf eine bestimmte Dissektion klicken und die Dinge funktionieren perfekt. Und das Hamburgermenü ist gut angelegt. Wir haben alle Links als elastische Klausel Symbol. Und im Moment sind wir in ein bisschen 1988 von 1949. Also werde ich zum iPhone 678 gehen. So wird unsere Website auf einem Mobiltelefon aussehen. Es sieht ziemlich gut aus. Die Dinge sind gut angelegt, die Dinge sind lesbar. Und Website ist komplett Sponsor für eine mobile Ansicht. Das ist auch gut für eine iPad-Ansicht. Und wie Sie hier auch sehen können, ist der Kopf gut angelegt. Und für fast alle Bildschirmverhältnisse wird sich unsere Website basierend auf dem Bildschirmverhältnis anpassen. So können wir schließen, dass unsere Website vollständig reagiert und wir haben ein gründliches Video von zwei Teilen gesehen, in dem ich Schritt für Schritt gehen und erklären jeden Schritt der Herstellung einer Website responsive Aspirin. Und daraus haben wir auch einen Prototyp. Also habe ich diesen speziellen Prototyp in Figma gemacht, und während der Erstellung der Website werden wir diesen speziellen Prototyp als Referenz nehmen. Also, das ist es Jungs, das ist Saudi grundlegende Überblick über unsere Website. Und ich hoffe, dass ihr eine grundlegende Vorstellung davon habt was wir in diesem speziellen Video bauen werden. Also das war's, Leute, danke fürs Ansehen, und ich sehe euch in den nächsten Videos. 3. Best Lernende: Hallo, Jungs. In diesem Video werde ich einige Best Practices teilen, die Sie während des Lernens implementieren können , damit ich das maximale Potenzial aus diesem speziellen Kurs ausschöpfen kann. Und die Tipps, die ich teilen werde, wurden in meinem eigenen Lernprozess umgesetzt. Und ich denke, dass sie es wert sind, zu teilen. Zunächst einmal, wie Sie wissen, ist dieser spezielle Kurs in mehrere Abschnitte unterteilt und braucht Abschnitt. Grundsätzlich bauen wir einen bestimmten Teil der Website auf. Und was ich euch vorschlagen würde, ist, anzufangen, zuerst solltest du dir einen Abschnitt komplett ansehen. Und die Lügen, warum wir bauen, beobachten die Kursstruktur und den Problemlösungsansatz. Und sobald Sie Ihre Uhren Aktion abgeschlossen haben, dann sollten Sie versuchen, eine Website auf eigene Faust zu erstellen. Wenn Sie versuchen, eine Website auf dem Iran zu bauen anstatt nur zu replizieren, was der Lehrer tut. Du denkst Fähigkeiten, deine Problemlösungsfähigkeiten, alles wird auf eine viel bessere Art und Weise wachsen. Also das ist, was ich vorschlagen möchte, das ist, das tatsächlich vollständig zu beobachten und dann versucht, eine Website auf eigene Faust zu bauen. Zweitens, Benutzer setzen kleine Ziele und fragte mich heute viel von der Mischung Duolingo Kurs wissen, aber es gibt nur einen kleinen Bruchteil der Menschen, die den Kurs zu beenden. Um den Kurs erfolgreich abzuschließen, setzen Sie sich also kleine Ziele. In unserem Fall können Sie im Grunde ein Ziel setzen, Ich möchte einen Abschnitt jeden Tag zu vervollständigen. Und wenn Sie konsequent dieses besondere kleine Ziel oder Ihr größeres Ziel erreichen könnten, das heißt, den gesamten Kurs abzuschließen, werden Sie mit großer Leichtigkeit aufgebläht. Und schließlich ist es Zeit für uns, alle Arten von Ablenkungen zu beseitigen. Und Studien haben gezeigt, dass selbst ein paar Sekunden der Zerstörung, ob es eine Benachrichtigung auf einem Smartphone sein kann, Ihre Hauptkonzentration vollständig ruinieren können. Also, wenn Sie studieren, ist es wirklich wichtig, alle Destruction Set zu vermeiden oder ob es ein Smartphone oder andere Dinge sein kann, sollten Sie versuchen, alle möglichen Ablenkungen zu vermeiden und sich vollständig auf den Studienprozess zu konzentrieren. Dies sind also einige kleine Änderungen, die Ihren Lernprozess eindeichen und umsetzen, was Sie einen viel besseren Einfluss auf Ihren Lernprozess haben, was ihn effizienter und effektiver machen kann. Also, das war's, Leute. Vielen Dank für das Anschauen und ich sehe euch im nächsten Video. 4. Das Projekt anlegen: Hallo, Jungs. In diesem Video werden wir unser Projekt in VSCode einrichten. Visual Studio Code sind also die Texturdaten, die ich in diesem speziellen Web-Build verwenden werde. Und Sie können jeden Ihrer bevorzugten Texteditor verwenden. Das erste, was ich tun werde, ist, dass ich einen neuen Ordner auf meinem Desktop erstellen werde . Und ich werde diesen speziellen Ordner als Portfolio benennen. Danach werde ich VS Code öffnen. Und ich ziehe in den neu erstellten Portfolio-Ordner auf dem VS-Code. Und jetzt haben wir geschnappt, dass sich der Portfolio-Ordner hier geöffnet hat. Und jetzt lassen Sie uns alle grundlegenden Dateien erstellen, die benötigt werden. Also werde ich auf eine Schaltfläche „Neue Datei“ klicken direkt hier. Und die erste Datei, die wir ISA erstellen werden, die Datei index.html. In Ordnung, jetzt lassen Sie uns einen anderen Ordner erstellen, und ich möchte diesen bestimmten Ordner als CSS nennen. Und in diesem speziellen Ordner, lassen Sie uns unsere style.css Datei erstellen. Okay, jetzt lassen Sie uns einen anderen Ordner erstellen, um alle unsere Bilder zu speichern. Und schließlich, lassen Sie uns eine Datei dafür erstellen. Unser JavaScript. Oder Lai Jungs wissen, dass wir alle grundlegenden Dateien erstellt haben, um zu beruhigen. Und nun gehen wir zu unserer index.html Datei und generieren eine grundlegende Boilerplate. Dadurch bin ich ein NDR, das Ausrufezeichen und gefolgt vom Wasserhahn. Und das erzeugt die grundlegende Boilerplate. Das erste, was ich tun will, ist, dass ich den Namen des Upside to Portfolio ändern möchte . Und danach möchte ich HTML und CSS miteinander verknüpfen. Um das zu tun, möchte ich den Link eingeben. Und innerhalb der zusätzlichen Zeit werde ich den Punktschrägstrich eingeben, den CSS-Ordner auswählen. In dem ich diese Tyler CSS-Datei auswählen möchte, um zu bestätigen, ob die HTML- und CSS-Datei miteinander verknüpft ist, werde ich nicht zur CSS-Datei gehen. Und ich möchte sagen, wie der Körper unserer Website und ich möchte den Hintergrund in Rot ändern. Ich werde es retten. werde ich mit der rechten Maustaste auf die Datei index.html klicken und auf Öffnen mit dem Live-Server klicken. Und wie Sie sehen können, dass die Website perfekt funktioniert. Sowohl die HTML- als auch die CSS-Datei ist perfekt verknüpft. Also jetzt sind wir mit der grundlegenden Aufgabe fertig, das Projekt einzurichten. Nun lasst uns zur zweiten Stufe gehen, Jungs, jetzt werden wir alle verschiedenen Farben Daten auswählen , die wir auf dieser Website verwenden werden. Und wir werden in diesen Farben als Variablen speichern. Beim Erstellen der DevOps-Seite wird der Farbauswahlprozess viel einfacher und es kann uns helfen, viel Zeit zu sparen. Also jetzt gehen wir zu unserem Prototyp. Und genau hier habe ich alle verschiedenen Farben aufgelistet, die wir verwenden werden. Das heißt, wir werden drei verschiedene Farben verwenden. Und wählen wir die erste Farbe aus. Wählen wir die Farbe aus der Feldoption aus und kopieren Sie den Hex-Code. Und zurück zu VS Code. Gehen wir zur CSS-Datei. Und um diese Farben im Grunde als Variablen zu initialisieren, verwenden wir die Root-Funktion. Und jetzt geben wir den Namen der Variablen ein. Also für die erste Farbe werde ich es als primär benennen, gefolgt von Doppelpunkt. Und den Hashtag, den ich in den Hex-Code einfügen werde. Das ist also die erste Farbe. Lassen Sie uns nun den Hex-Code für die zweite Farbe kopieren. Und ich möchte diese besondere Farbe als rein nennen. Und ich werde den Hex-Code hier einfügen. Und die nächste Farbe wird als dunkel bezeichnet. Und lassen Sie uns den Hex-Code kopieren und ihn hier einfügen. Also, das sind ziemlich verschiedene Farben, die sind, verdienen wir ein Jahr seit webgl Website durch Initialisierung dieser Kurse zur Verfügung. So können wir uns leicht den Namen der Farbe merken und direkt die Farbe anwenden, indem wir den Variablennamen angeben. Und es kann in der Tat viel Zeit sparen und es ist viel einfacher, sich an Kilobyte zu erinnern, also Variablennamen anstelle des Hex-Codes. Und jetzt sind wir mit dem Farbauswahlprozess fertig. Und nun gehen wir auf die nächste Stufe, in der wir nicht im Grunde sind , was alle verschiedenen Bilder und andere Assets auf dem VS-Code. Alles klar Leute, jetzt ist es Zeit für uns, all die verschiedenen Bilder und Icons in unser Projekt zu importieren . Lassen Sie mich Ihnen vorher die verschiedenen Icons und Bilder zeigen , die wir auf dieser Website verwenden werden. Ich bin jetzt in dem Prototyp, den ich in Figma gemacht habe. Und wie Sie sehen können, haben wir hier das Heldenbild. Und wenn ich hier nach unten scrolle, haben wir die verschiedenen Social-Media-Icons. du hier runterziehst, wirst du all die verschiedenen Symbole sehen. Im Abschnitt „Fertigkeiten“. Wir haben zu den Projekt-Icons, Projekt-Bilder, die verschiedenen Blog-Bilder. Sie mögen mich nicht, Ikonen und vieles mehr. Dies sind also die verschiedenen Bilder und Symbole, die wir auf dieser Website verwenden werden. Und lernt, wo ihr Jungs, ich habe all das im Ressourcenbereich und ich kann all diese direkt von dort herunterladen. Also lassen Sie uns jetzt im Grunde all diese in unser Projekt importieren. - Darauf. Ich habe all diese Bilder hier, und ich werde sie kopieren. Danach gehe ich zu dem Portfolio-Ordner, den wir erstellt haben. Und wie Sie sehen können, haben wir zum Bilderordner und öffnen Sie ihn dann. Und ich werde sie alle hier einfügen. Nun, wenn ich zurück zum VS-Code-Editor und in den Majors gehe, wie Sie sehen können, haben wir alle verschiedenen Bilder bereit, verwendet zu werden. Also jetzt sind wir endlich fertig mit den Bildern und dem Icon-Teil. Ich schwitze. Und jetzt haben wir das Projekt komplett eingerichtet, um bereits codiert zu werden. Also, das war's, Leute. Wir sind mit der grundlegenden Projektsetup fertig. Und ich sehe euch das nächste Video, wo wir anfangen werden, unsere Website zu bauen. 5. Codieren der Hero: Hallo, Jungs. In diesem Video werden wir den Heldenbereich unserer Website erstellen. Und im vorherigen Video haben wir im Grunde zusammen mit all den verschiedenen Dateien erstellt oder geschützt. Wir haben alle verschiedenen Farben ausgewählt, die wir diese spezielle Website nutzen werden. Außerdem haben wir alle verschiedenen Bilder in ein Projekt importiert. Also, jetzt gehen wir zu unserem Prototyp hier. Und wie Sie sehen können, wird diese Enddissektion hauptsächlich als Heldenabteilung benannt. Und das ist, was wir in diesem speziellen Video bauen werden. Also lassen Sie uns im Grunde den Heldenbereich in zwei verschiedene Teile teilen. Lassen Sie uns zunächst den Navigationsbereich erstellen. Das ist also die Navigationsleiste. Und Sie können diese Navbar als eine Box betrachten. Und in dieser Box haben wir verschiedene Elemente wie das Logo sind verschiedene Links und die Zurück-Taste. Lassen Sie uns zunächst die grundlegende Boxstruktur erstellen. Um dies zu tun, gehen wir zurück zur Indexdatei und innerhalb der Textdatei, oder erstellen Sie einen Header. Und in der Kopfzeile werde ich ein Navigations-Tag erstellen. Wenn Sie zum Prototyp zurückkehren, werden Sie sehen, dass wir die Box erstellt haben. Und in der Box haben wir unsere verschiedenen Elemente. Also werde ich diese Elemente als linken Teil und den rechten Teil klassifizieren. Also im linken Teil haben wir das Logo und die verschiedenen Links. Und der richtige Teil haben wir den Münz-Back-Button. Lassen Sie uns also ein div für den linken Teil erstellen. Und ich werde ihm eine Klasse als Linke geben. Genau so werde ich ein anderes div erstellen. Und ich werde dieses spezielle div mit der Klasse als Recht benennen? Alles klar, jetzt gehen wir runter zum linken Teil. Hier sehen Sie, dass wir im linken Teil Dao haben, das Logo als letztes, das andere Element. Also müssen wir getrennte fällig für das Logo und für all diese verschiedenen Links haben. Also möchte ich ein div erstellen und ich werde ihm eine Klasse geben, die als Branding benannt ist. Und in diesem speziellen div werde ich das Bild-Tag öffnen. Und in der Quelle werde ich den Schrägstrich der Organisation eingeben. Gehen wir zum Bilderordner und ich werde das Logo beenden. Also nav gestricheltes Logo ist das Logo, das wir verwenden werden. Und lassen Sie uns ein anderes div für die verschiedenen Links erstellen. Also dafür werden wir Anker-Tag verwenden. Also werde ich eine rückgängig machen und TAB drücken. Also werde ich einfach den Hash hier beenden. So haben wir nach Hause ein Boot Fähigkeiten Projekte und Block. Also lasst uns zuerst nach Hause gehen. Und jetzt werde ich den Endfärber auswählen, Dyer hier. Und ich drücke noch vier Mal Alt, Shift und Abwärtspfeil. Das wird also genau dasselbe duplizieren. Und nach Hause haben wir etwa vier oder durch Fähigkeiten, Projekte und Block bekommen. In Ordnung, jetzt haben wir all diese unterschiedlichen Winkelsteuer geschaffen. Also gehen wir jetzt zum rechten Teil über. So wie Sie auf dem rechten Teil sehen können, haben wir einen Button namens Kontakt. Also werde ich nur ein Button-Tag und einen Namen erstellen. Es tut Verhalten. Alles klar, jetzt sind wir fertig, aber die Navbar, wir haben eine Box erstellt und in der Box haben wir zwei verschiedene Teile. Auf der linken Seite haben wir das Logo. Es gibt verschiedene Links und auf dem rechten Teil haben wir den Button. Also lassen Sie uns es speichern, und jetzt lassen Sie uns diese spezielle Header Stil. Um das zu tun, möchte ich zu dieser Tyler CSS-Datei gehen. Und genau hier werde ich den Header auswählen. Und ich werde den Hintergrund zu dunkel ändern. Also, um auf die Variable zuzugreifen, werde ich den Krieg in der runden Klammer beenden. Ich werde einen doppelten Bindestrich eingeben. Also lassen Sie es uns jetzt speichern. Und schauen wir uns im Grunde unsere Website an. Und wie Sie sehen können, dass es hier ist. Und wenn Sie oben rechts und oben bemerken, haben wir ein wenig Abstand. Dies ist aufgrund des Standard-Webbrowser-Styleheets. Also gehen wir zurück zu unserer CSS-Datei und hier lassen Sie uns beginnen. So Stern zeigt die gesamte Auswahl, so dass es das gesamte Element auswählt. Und lasst uns Marge 0 eingeben. Und Polsterung 0. Und Box-Dimensionierung, Border-Box. Okay, wenn du zurückkommst, siehst du, dass es keine Leerzeichen gibt. Es ist perfekt bündig mit Punkt-Punkt-Punkt Teil des Browsers. Also Leute, wenn es ein Unternehmen oder Typ hier ist, können Sie sehen, dass das nicht nav Bar ist im Grunde in der Mitte des Beats befindet. Um also unsere Navigationsleiste in die Mitte der Seite zu bringen, müssen wir einen Container erstellen. Also gehe ich zurück zu unserer style.css Datei. Und hier werde ich eine Klasse namens erstellen, wie sie enthalten. Und in dieser speziellen Klasse werde ich einen Mac-Geist von 11 52 Pixeln geben. Und episodisch für oben und unten wird 0 sein, und für links und rechts wird 15 Pixel sein. Und auch werde ich einen Rand von oben und unten von 0 geben und das nicht diagnostizierte vor dem Absender zu machen, sollten die linken und rechten automatisch sein. Also, wenn ich es speichere und wenn wir hier zu unserem Portfolio kommen, können Sie sehen, dass im Grunde nichts passiert ist. Das liegt daran, dass wir dieses spezielle neu erstellte Glas nicht auf unseren HTML angewendet haben. Also werde ich einfach den Namen der Klasse hier kopieren. Lassen Sie uns zu unserer HTML-Datei gehen und schreiben Sie ein sowohl das nav zurück oder direkt unter dem Header-Tag. Ich werde ein div mit einem Klassennamen des Containers erstellen. Und lassen Sie uns das Ending div Tag direkt unter dem nav Glossing-Tag platzieren und lassen Sie uns speichern. Also lassen Sie mich es jetzt schnell arrangieren oder speichern. Und wenn ich komme und nachsehe, können Sie sehen, dass es gerade in der Mitte ist. Nun, lassen Sie uns im Grunde die Farbe all dieser verschiedenen Links ändern. So befinden sich die Links offensichtlich direkt im linken div. Und so BIPAP, können wir sagen, dass es Header, das Navi und dann das linke Div darin ist, dass wir grundsätzlich auf das Anker-Tag zugreifen können. Also werde ich gehen, um unser CSS zu stylen. Hier. Ich werde den Header beenden, nav Punkt links und das Anker-Tag. Also hier werde ich die Farbe zu Ihrem ändern, sagen wir, wir nehmen dann einen Hund, wir können sehen, dass die Farbe in weiß oder rein geändert wurde. Und jetzt gibt es alle diese Unterstreichungen entfernen. Also lasst uns Textdekoration eingeben, keine. Und das wird im Grunde alle Unterstreichungen entfernen. Also im Grunde haben wir die Navigationsleiste an den Absender gebracht und die Farbe dieser Links zu weiß, sowie wir haben ihre zugrunde liegenden entfernt. Also Leute, wenn wir unseren Prototyp hier überprüfen, können Sie sehen, dass die Navbar im Grunde in einer einzigen Zeile ausgerichtet ist. Das heißt, wir haben jetzt das Logo, die verschiedenen Links gefolgt von der Schaltfläche. Aber der Vorteil ist im Grunde , dass alle diese verschiedenen Elemente in einer vertikalen Weise angeordnet sind. Also, um sie in einer ausgerichteten oder in einer Linie Weise zu machen , wenn sie die Flex-Eigenschaft verwenden. Und wir werden nutzen die Flexbox oder D entwickelt viel in dieser speziellen Website gebaut. Es ist also besser, im Grunde eine Utility-Klasse zu erstellen , damit es in Zukunft viel Zeit für uns sparen kann. Um das zu tun, gehen wir zu unserem Code und unserem innerhalb des CSS-Ordners, werde ich eine andere Datei erstellen. Und ich möchte es nennen, als Udemy CSS verzerrt und den Namen der Datei kopiert. Und lasst uns einfach enden. Bevor wir fortfahren, gehen wir zu unserer Datei style.css. Und zunächst einmal, lassen Sie uns hier auf unsere neue Versorgungsklasse einsteigen. Also möchte ich importieren, gefolgt von zwei einzelnen Akkorden. Und lassen Sie uns den Namen der Datei dot css und einen Doppelpunkt eingeben. So haben wir jetzt die Dienstprogramme Klasse importiert. Gehen wir nun zur Utilities Datei und erstellen Sie eine Klasse namens Flex. Und hier werden wir unter Display flex gehen. In Ordnung, also gerade jetzt auf einer Kopie der Name der Klasse hier. Lassen Sie uns zu unserer Indexdatei gehen und in unserem Nasdaq schreiben. Ich werde eine Klasse erstellen und den Namen unserer Utility-Klasse flex einfügen. Und lassen Sie es uns retten. Und wenn ich die Website hier überprüfe, können Sie sehen, dass der Kontakt-Button nach rechts verschoben wurde. Also, wenn eine Basis die gleiche Flex-Klasse innerhalb unserer linken div-Klasse und speichern Sie sie. Sie werden sehen, dass das Ende grausame Links und die Verhaltens-Taste wurde die leichte Art und Weise angeordnet. Also Leute, wenn Sie hier überprüfen, können Sie sehen, dass die Links und die ähnliche Schaltfläche nicht mit dem Logo ausgerichtet sind. Diese sind irgendwie verlegt. Also, um sie in einer einzigen Zeile zu machen, lassen Sie uns eine andere Dienstprogrammklasse erstellen. Und ich werde es als Artikel Absender nennen. Und wir werden eine weitere Zeile Artikel Absender und Leben setzen. Kopieren Sie einfach den Namen der Klasse. Und zuerst, lasst uns es in die Nav-Klasse platzieren. Speichern wir es und überprüfen Sie es. Und Sie können sehen, dass der Münz-Back-Button und das Logo jetzt in einer einzigen Zeile sind. Und lassen Sie uns die gleiche Formel über links div anwenden. Lassen Sie es uns einfügen. Und wir haben all das in einer einzigen Zeile. Jetzt ist die nächste Aufgabe, eine niedrigere Dosis basierte Video haben, wenn diese verschiedene Elemente sind, so dass, Das sieht gut aus. das zu tun, möchte ich eine andere Utility-Klasse erstellen und ich werde es als Leerzeichen dazwischen nennen. Lassen Sie uns Inhalt rechtfertigen, Abstand zwischen. Lass es uns retten. Also lassen Sie uns den Klassennamen kopieren. Lassen Sie uns zur Indexdatei gehen und fügen Sie es in die nav-Klasse ein, speichern Sie es. Und wie Sie sehen können, dass der Münz-Back-Button den ganzen Weg auf der linken Seite des Containers gegangen ist. Und nun lassen Sie uns ein wenig Abstand zwischen diesem Logo als Alaska zwischen diesen Links hinzufügen. Also Leute, wenn wir unsere Prototypen nehmen, fangen an zu sehen, dass es tatsächlich ein wenig Platz über der Navigationsleiste gibt. Es gibt also eine Art Trennung zwischen der Spitze der Debatte, dem Ende Durchfall, nav bar, Bar Dinah Fall. Wir haben keinen ausreichenden Abstand zwischen dem oberen Rand der Seite und der Navigationsleiste. Um das zu tun, gehen wir zu dieser Tyler CSS-Datei. Und hier werde ich im Grunde den Header und das nav auswählen. Und ich werde im Grunde ein wenig Polsterung zur Verfügung stellen. Also von oben und unten werden ihnen geben. Und für links und rechts wird 0 sein. Wenn ich es also speichere, können Sie sehen, dass es tatsächlich genügend Platz zwischen oben und unten gibt. Also jetzt möchte ich ein wenig Abstand zwischen dem Logo und dem Link geben. Um dies zu tun, können wir wieder den Header und das nav auswählen. Und wenn ich zu meiner Datei index.html gehe, haben wir einen Klassennamen, der Branding ist, in dem sich unser Logo befindet. So kann ich grundsätzlich das Branding Glas auswählen. Und ich kann eine Marge geben, oder? Bewegen Sie sich zehn Gramm. Mal sehen. Alles klar, es ist irgendwie das Zentrum. Und jetzt lassen Sie uns auch ein wenig Abstand zwischen all diesen verschiedenen Links hinzufügen. Also haben wir bereits unseren Link hier ausgewählt, das ist das Anker-Tag. Also kann ich tatsächlich den Berg hier zur Verfügung stellen. Sehen wir uns mal mit Durham an. Ja, es sieht irgendwie okay aus, also wenn wir ein bisschen mehr Stil hinzufügen, wird noch besser aussehen. Also für jetzt haben wir im Grunde die End-dire nav bar in einer Linie ausrichten, die Subregion Anzahl der Abstände. Jetzt gehen wir zur nächsten Stufe. Also Jungs, jetzt lasst uns im Grunde das Telefon ändern, das wir benutzen. Derzeit verwenden wir die grundlegende Telefonate unseres Browsers. Aber in unserem Prototyp hier können Sie sehen, dass wir im Grunde die Poppins-Schrift verwenden. So haben sie im Grunde Gebrauch von Google-Telefon gemacht, um diese besondere Form zu extrahieren. Gehen wir also zu Google Fonts. Und lasst uns, also ist es für Poppins hier. Lassen Sie uns hier auswählen. Und wir werden Licht in normalen 400 sowie halb fett 600 sehen. Und lassen Sie uns einfach den Link von hier kopieren. Gehen wir zu unserer Indexdatei und fügen Sie sie direkt unter dem Titel ein. Lass es uns retten. Gehen wir zu unserer style.css. Und ich werde die Barbie und die ausländische Familie auswählen. Es wird Poppins geben. Und wenn Poppins aus irgendeinem Grund nicht funktioniert, werden wir sensibel verwenden. Wenn Sie also unsere Website überprüfen, können wir sehen, dass der Fehler geändert wurde und das jetzt viel besser aussieht. Und auch werde ich diese in Großbuchstaben konvertieren. Also für dy, Lassen Sie uns nach unten und innerhalb des Tags scrollen, lassen Sie uns Text in Großbuchstaben umwandeln. Also jetzt haben wir all diese verschiedenen Links in Großbuchstaben, und es sieht viel besser aus, als sie in Kleinbuchstaben zu haben. Also Reis, jetzt lassen Sie uns ein ganzes Wort Zustand zu all diesen verschiedenen Link-Button hinzufügen. Wenn wir also den Mauszeiger über sie bewegen, ändert sich die Farbe. Also durch, Lassen Sie uns zu einer Stil-Datei gehen und lassen Sie uns den gesamten Link von hier kopieren und alarmiert einen Doppelpunkt und Eingabe Flur. Was wir also tun müssen, ist, dass wir die Farbe ändern müssen. Und die Farbe ist im Grunde die Primärfarbe. Wenn Sie es also hier überprüfen, können Sie sehen, dass, wenn ich über diese verschiedenen Links schwebt, die Farbe zur Primärfarbe wechselt. Aber es ist irgendwie schnell, im Grunde einen glatten Einblend- und Fade-Effekt zu haben. Lassen Sie uns zurück zu Stil-Datei und in unserem Header und nav linken Anker-Tag gehen, werde ich einen Übergang hinzufügen. Übergang. Für alle Elemente 0,3 Millisekunden und es ist 0s. Also jetzt, wenn ich über sie schwebe, können Sie sehen, dass es ein glattes Fade in und verblasst aus ihm. Und das sieht irgendwie gut aus. Also jetzt haben wir entweder den Ordnungseffekt auf all diese verschiedenen Links als auch. Also Jungs, jetzt lasst uns unseren Knopf und rechten Knoten stylen, aber es sieht ziemlich einfach aus. Also, wenn jedes Konto, unser Prototyp hier, können Sie sehen, dass unsere Schaltfläche hier ist ziemlich gestylt. Und wir haben zwei verschiedene Tasten, einen hier und einen anderen hier. Also ist es Zeit für uns, wieder Gebrauch von Utility-Klasse machen. Also lassen Sie uns zurück zu unserem Code. Und weiß hier auf der index.html Datei auf dem Button Abschnitt, ich werde eine Klasse erstellen. Also werde ich hier zwei verschiedene Klassen haben, das ist btn, btn-primär. Der Grund, warum ich hier zwei verschiedene Klassen habe, ist, dass die erste Klasse, also die BTN-Klasse, die grundlegenden oder die gemeinsamen Eigenschaften haben wird. Wenn Sie also diese beiden Tasten überprüfen, haben diese beiden Violinen die gleiche Breite, die gleiche Polsterung. Diese grundlegenden Eigenschaften werden also in der btn-Klasse angehalten. Und wenn Sie es betrachten diesen bestimmten Bereich, aber es hat verschiedene Eigenschaften wie einen soliden Hintergrund. Und dieser hier hat einen Sender, Baikonur. Diese Eigenschaften werden also mit der geordneten in der btn-primären Klasse für die erste Belastung sein. Und wir werden eine andere Klasse erstellen, die Median sekundär für diese bestimmte Klasse ist. So wird das schlagende Glas alle grundlegenden Eigenschaften haben und um individuelle Eigenschaften anzupassen oder zu haben, fügen Sie die Klassen wie btn-primary und btn secondary hinzu. Und ich hoffe, dass ihr ein grundlegendes Verständnis davon habt, warum ihr zwei verschiedene Zeilen habt. Also gehen wir zu Ihnen während dieser Klasse und lassen Sie uns zuerst die BTN-Klasse erstellen. So wird es eine Polsterung von 0,8 Läufen von oben und unten und drei Rum von links und rechts haben. Also, lassen Sie mich die Datei index.html speichern. Und wie Sie sehen können, dass wir haben Punkt ein von, von oben und unten und 3 sie von links und rechts. Also lassen Sie uns auch das Schriftgewicht auf 600 ändern. Ja. Und lassen Sie uns auch die Schriftgröße in einen Raum ändern. Und wir werden auch eine Grenze haben, die zwei Pixel sein wird, solide, transparent. Also der Grund, warum wir einen transparenten Hintergrund haben dies, weil zweitens, aber das wird eine Grenze haben, aber die erste wird es nicht haben. Aber da diese die gleichen Eigenschaften haben, werden wir eine Grenze haben, aber es wird standardmäßig Zeit verbracht. Und lassen Sie uns auch den Cursor ändern, um ihn zu zeigen. Also, wenn Sie Ihren Cursor in der Nähe der Schaltfläche zu bringen, wird auf den Zeiger-Cursor zu ändern. Und nun lassen Sie uns im Grunde die spezifische BTN-Primärklasse ansprechen. Und lassen Sie uns den Hintergrund in die Primärfarbe ändern. Alles klar, jetzt haben wir das erste Muster fertig. Und ich werde die Telefonwartung leicht verringern, weil ich denke, es ist ein bisschen zu dunkel. Lassen Sie es uns als 400 sagen. Sie sind jetzt es vordefiniert und auch werde ich den Text in Großbuchstaben ändern. Also, das ist Text transformieren Großbuchstaben. Also beachten Sie, dass es ziemlich gut aussieht. Also lassen Sie uns jetzt grundsätzlich einen Hover-Zustand dieser speziellen Schaltfläche anwenden. Also, wenn sie im Grunde Harvard oder diese spezielle Taste, sollte dieser spezielle Knopf im Grunde wie dieser aussehen. Wenn ich über diesen hier schwebe, sollte dieser so aussehen. das zu tun, lassen Sie uns im Grunde die primäre Schaltfläche hier kopieren. Und lassen Sie uns einen Flur anwenden. Lassen Sie uns nun den Hintergrund in transparent ändern. Und lassen Sie uns eine Rahmenfarbe von primär anwenden. Speichern wir es und überprüfen Sie es. Ja, lassen Sie uns auch die Textfarbe in rein ändern. Okay, und machen wir es auch ein bisschen glatter. Also, um das zu tun, gehen wir zum primären und entweder Übergang aller Elemente, das ist 0,3 Sekunden ist ja, das sieht viel besser aus. Also, jetzt haben wir eine ganze Überstaatung hinzugefügt oder Kleinheit zu führen. Wir werden jetzt sind wir im Grunde mit der Navigationsleiste unserer Website fertig. also einen Blick auf unseren Prototyp werfen, haben wir die zweite Flasche für den Heldenbereich, die das Heldenbild enthält, als wir diesen Text zuletzt sahen, die rechte Seite. Also können wir im Grunde zwei verschiedene divs haben. Man kann das Bild halten und der andere kann all diesen Text und die Taste halten. Gehen wir zurück zu unserer Indexdatei. Und direkt unter dem schließenden Tag des nav, Lassen Sie uns ein anderes div mit einem Klassennamen des Helden erstellen. Und in diesem speziellen div, Lassen Sie uns im Grunde zwei verschiedene Diff haben, eine nette genannt als Linkshänder, die andere wird als rechts benannt. Also div, der Klassenname von links. Und ein anderes div, ein Klassenname von Recht. Okay, jetzt gehen wir runter zum linken div. Und innerhalb des linken div haben wir dieses spezielle Bild. Öffnen wir ein Bild-Tag. Und in der Quelle werde ich Punkt Schrägstrich eingeben. Und lassen Sie uns zum Bilderordner navigieren und mich unter Helden Mann. Alles klar, jetzt haben wir den Hauptabschnitt. Und jetzt gehen wir zum richtigen div. Und rechts haben wir zwei verschiedene Texte. erste besteht aus dem Namen, also lassen Sie uns das kopieren. Und ich werde mich öffnen und es ist sechs hier. Und ich werde den Namen einfügen. Und zweitens haben wir AMA Creative Developer Titel, also das ist ein Haupttitel. Also lassen Sie mich es kopieren und lassen Sie uns ein H1-Tag erstellen und es einfügen. Tut mir leid, ich habe nicht kopiert und ich besitze. Also bin ich ein Schöpfer-Entwickler. Und wenn Sie bemerken, können Sie sehen, dass entwickeln pro Wort ist im Grunde eine andere Farbe. Also müssen wir das in einer Spannweite platzieren. Also lassen Sie mich kopieren es und das Innere der Tasche, und lassen Sie uns eine Spanne erstellen und das Entwicklerwort einfügen. Alles klar, jetzt schauen wir uns unsere Website an. Okay, wir können das Bild hier sehen. Das ist, was erlaubt die, Ich bin ein Creative Director pro Titel. Und wie Sie sehen können, brauchen wir auch einen Knopf. Gehen wir zurück zu unserem VS-Code. Und innerhalb des rechten div, Lassen Sie uns ein anderes div erstellen, das alle die Schaltfläche. Und die Schaltfläche ist als Download CB benannt. Speichern wir es und schauen wir uns die Website an. Ja, wir haben auch den Knopf hier. Also lassen Sie uns jetzt unseren Prototyp überprüfen. Und wie Sie sehen können, dass der gesamte Text und die Schaltfläche rechts von den Verknüpfungen und auch der Text und die Schaltfläche genau in der vertikalen Mitte des Bildes befindet. Und wie Sie sehen können, haben wir den ganzen Text und die Schaltfläche im unteren Bereich des Bildes. Also, um den Text und die Schaltfläche auf rechten Seite der Verknüpfungen zu machen und lassen Sie uns zurück zu unserer Indexdatei. Und da wir bereits eine Utility-Klasse haben, muss ich nur Daten innerhalb der Hero-Klasse tun. Ich muss nur die Flex-Dienstprogrammklasse eingeben. Lass es uns retten. Und dann schauen wir zurück. Genau so. Wir haben das Ende Diät-Text auf der rechten Seite des Fleisches. Und um es in der vertikalen Mitte des Bildes zu machen, wieder haben wir eine andere Dienstprogrammklasse, die Elemente Abstieg ist. Lassen Sie uns diese bestimmte Klasse anwenden. Und innerhalb einer Spanne uns dagegen haben wir den End-Diät-Text der rechten Seite als auch in der vertikalen Mitte des Bildes. Das ist also die Schönheit, eine Utility-Klasse zu haben. Es hat uns geholfen, viel Zeit zu sparen. Und jetzt gibt es im Grunde unser Bild zu modifizieren. also den Bildpfad auschecken, befindet sich das Bild im Helden innerhalb des linken div. Also lassen Sie uns zu unserer Stil-Datei und Ziel oder Bild gehen, das Dodd Held Punkt links und das Bild ist. Lassen Sie uns also im Grunde ein bisschen 100 Pixel und einen Grenzradius von 500 Pixeln geben . Speichern wir es und lassen Sie uns die Website überprüfen. Und wie Sie sehen können, dass das Bild ausreichend groß ist. Und auch haben wir eine leichte Krümmung in der Unterseite des Bildes, genau wie das aus oder Prototyp. Nun lassen Sie uns im Grunde unseren Text und die Schaltfläche stylen haben auch genügend Abstand zwischen dem Bild und verschiedenen Texten, sowie BDB im Text als auch. Also lasst uns zuerst den gesamten Text hier sterben. Also, wenn wir unsere Website überprüfen, können Sie sehen, dass am Ende von Texas im Grunde in schwarzer Farbe. Lassen Sie uns das zunächst ändern. Und wie wir wissen, dass sich der Inditex im richtigen div der Heldenklasse befindet. Also lassen Sie uns zu unserer Stil-Akte gehen, und ich werde Held Punkt richtig. Und innerhalb des rechten div werde ich die Farbe aller Elemente in weiß oder rein ändern. Lass es uns retten. Und wie Sie sehen können, dass die Farbe weiß geworden ist. Jetzt lassen Sie uns den Namen im Grunde besser definieren. Der Name ist also wieder ein H6-Tag, das sich rechts von der Heldenklasse befindet. Also lasst uns nochmal den Punkt des Helden kopieren, richtig? Und lasst uns den Stapel anvisieren. Und ich werde die Schriftgröße auf 1,6 Zimmer ändern. Lass es uns retten. Ja, es sieht ganz gut aus. Und jetzt lassen Sie uns auch das H1-Tag direkt hier ändern. Also wieder, es befindet sich im richtigen div der Hero-Klasse, so dass es kopiert wird. Ziel der H1-Tag, ändern Sie die Schriftgröße auf 4 rem, Mal sehen. Und lassen Sie uns auch das Schriftgewicht auf eine 100 ändern. Lass es uns retten. Ja. Das sieht gut aus bei uns gegen dich, dass zwischen der ersten und der zweiten Zeile viel Platz ist. Das liegt also an einer größeren Linienhöhe. Lassen Sie uns also auch die Zeilenhöhe auf 1,5 verringern. Mal sehen, 1.2. Ja, das sieht ganz gut aus. So haben wir jetzt eine ausreichende Menge an Platz zwischen der ersten, zweiten Zeile. Nun, wenn jeder auftreten pro Zeit, können wir sehen, dass Dalit Entwickler Wort ist in einer anderen Farbe. Wie wir wissen, haben wir eine bestimmte Spanne für den Entwickler gemacht. Also lasst uns das anvisieren. Das ist also wieder im richtigen div. Und lasst uns die Spannweite anvisieren. Und ich werde die Farbe in Primär ändern. Ja. Und ich werde auch ein bisschen Rand unten hinzufügen, so dass, Das, Das ist eine gute Trennung zwischen dem Knopf und diesem besonderen, Ich bin ein erstellt ein perverser. Und ich kann das in den Helden Punkt schreiben X1 tun. So margin-bottom. Lassen Sie uns eine Trommel geben. Ja, jetzt sind wir organisierte Trennung und ich will auch ein Gramm Marge zwischen dem Namen und dem Hammerklavier-Entwicklerwort geben . Also, gehen wir zu den 86 und bieten eine Marge unten von einem rem. Ja, jetzt funktioniert es einwandfrei. Lassen Sie uns nun zur nächsten Stufe gehen, in der wir unseren Knopf stylen. Wenn Sie also unseren Prototyp überprüfen, können wir sehen, dass der Knopf im Grunde einen transparenten Hintergrund und eine solide Grenze hat . Gehen wir zurück zu unserer Indexdatei. Und wir haben bereits eine Dienstprogrammklasse für eine grundlegende Schaltflächen erstellt. Also lassen Sie uns eine Klasse zu der Schaltfläche hinzufügen. Also wird es BTN sein. Und auch sollten wir einen anderen spezifischen letzten für diesen speziellen Knopf haben, und das wird btn sekundär sein. Also zweitrangig. Also speichern wir es und lassen Sie uns die Website überprüfen. Ja, jetzt müssen wir im Grunde knöpfen. Jetzt müssen wir es anpassen. Und so, wie wir wollen. Um das zu tun, gehen wir zu unserer Utilities Klasse und lassen Sie uns im Grunde eine sekundäre Klasse hier erstellen, das ist PTEN Bindestrich sekundär. Also hier brauchen wir den Hintergrund transparent zu sein, und wir brauchen die Farbe, um primär zu sein. Und wir brauchen auch die Grenze. So haben wir bereits die Grenze erstellt, wie Sie sehen können. Aber für den ersten Fall haben wir es transparent gemacht. Aber hier können wir eine Farbe zur Verfügung stellen, so dass es Grenze ist. Strichfarbe ist, wieder, machen Sie die Farbe primär. Speichern wir es und überprüfen Sie Ihre Website. Ja, es sieht ziemlich gut aus. Jetzt müssen wir auch einen Host-Status bereitstellen. Wenn wir also den Mauszeiger darüber bewegen, sollte es wie dieser spezielle Knopf hier aussehen. So ist es ein hübsches Symbol. Lassen Sie uns die gesamte sekundäre Wochenendklausel hier kopieren. Und lassen Sie uns einen Hover bereitstellen. Wir brauchen also den Hintergrund, um primär zu sein, und wir brauchen eine Farbe des Textes, um dunkel zu sein. Lass es uns speichern und sehen. Und lassen Sie uns auch eine Übergangsverzögerung bereitstellen. Also gehen wir zu unseren BTN Sekundärölen. Lassen Sie uns einfach diesen bestimmten Code von hier kopieren und ihn direkt hier drüben einfügen. Und ja, jetzt sieht es vordefiniert aus. Jetzt sind wir mit dem NDI rechten Abschnitt fertig. Also haben wir unser Design, den indict Text als auch letztes Jahr Button. Jetzt ist es an der Zeit, dass wir das gesamte Layout anpassen und den Heldenbereich auftauchen lassen. Also Jungs brauchen vier Beats oder den Prototyp, man kann sehen, dass es tatsächlich genügend Platz zwischen dem Bild und dem Text gibt. Aber auf unserer Website haben wir das nicht. Um das zu tun, gehen wir zurück zu unserer Indexdatei. Und direkt in der Hero-Klasse werde ich eine unserer zuvor erstellten Dienstprogrammklasse hinzufügen, die Raum dazwischen ist. Speichern wir es, und gehen wir hin und her. Jetzt ist nichts passiert und endete. Die Sache, die Sie bemerken können, ist, dass Puppe sie Text und die Bilder tatsächlich nicht nehmen. Gleiche Menge an Platz. Dieser Text nimmt im Grunde viel mehr Platz als das Bild ein. Und wir müssen sie unter dem Raum ausgleichen, der durch das Bild und den Text aufgenommen wird. So wahr, dass Tau eine andere Versorgungsklasse anzeigt. Und die Klasse kann auf der linken Div angewendet werden. Und der Name der Klasse ist Flex Dash eins. Lassen Sie mich es kopieren und wir müssen das auch auf dem richtigen Gerät anwenden. Nun, speichern wir es und lassen Sie uns zu einer Dienstprogrammklasse gehen und im Grunde diese spezielle Klasse erstellen, die Flex eins gelehrt wird. Und alles, was wir tun, ist, dass wir einen Fluss von einem anwenden. Lass es uns retten. Gehen wir zu einer Website. Und Sie können sehen, dass jetzt sowohl das Bild als auch der Text den gleichen Platz einnehmen. Und eine andere Sache, die Sie sehen können, dass das Bild leicht nach rechts sein sollte. Grundsätzlich bemerken die Bilder in der Mittelposition seines Containers, wie Sie wissen, das Bild und der Text befinden sich in ihrem jeweiligen div, aber er machte nicht in der Mitte seines div. Um das zu tun, gehen wir zurück zu unserer index.html Datei. Und rechts innerhalb der linken, Dave, lassen Sie uns eine andere Dienstprogrammklasse erstellen, die nur aufschieben, Absender, gerechtfertigter Asche-Absender ist . Lassen Sie mich den Namen hier kopieren. Gehen wir zur Dienstprogrammklasse und fügen Sie sie ein. Und alles, was wir tun müssen, ist Content-Center zu rechtfertigen. Lass es uns retten. Und lassen Sie uns auch die Indexdatei speichern. Und jetzt haben wir das Bild leicht nach rechts bekommen, was es zum Zentrum seines eigenen perspektivischen div macht. So haben wir jetzt einen anderen Heldenbereich angelegt. Und die andere Sache, die rückgängig macht, dass ich ein wenig mehr Spielraum zwischen diesem bestimmten bieten werde , bin ich eine kreative Entwicklung und die Schaltfläche. Es scheint dem Wort viel näher zu sein. Gehen wir also zur Datei style.css. Und genau hier haben wir das H1-Tag. Ich werde eine Marge Boden des Tourismus bieten. Ja, jetzt haben wir eine gute Trennung zwischen dem ganzen Text. Also Jungs, jetzt ist es an der Zeit, auf den interessanten Teil zu kommen, wo wir dieses besondere Shop-Design im unteren Teil unserer Website machen werden . Damit dies geschieht, müssen Sie ein grundlegendes Verständnis von Polygon haben. Nun, wenn Sie sich eine Website ansehen, können Sie sehen, dass der obere Teil, dies ist die erste Website. Dies ist die zweite Seite, die dritte Seite, die vierte Seite und die fünfte Folie. Also dieser besondere Punkt, dies ist der erste, wir werden die Kombination von x- und y-Koordinate haben. Hier. X und y werden 0 sein. Und wenn ich von hier den ganzen Weg nach rechts hier reiste, wird x ein 100 sein und y wird 0 sein. Der Grund, warum x eine 100 ist, ist es, weil X horizontal von diesem Punkt bis zu diesem Punkt gereist ist ist. Es ist also eine 100 und y ändert sich, wenn es eine vertikale Bewegung gibt, aber bis jetzt gibt es keine vertikale Bewegung, also y ist 0. Nun, wenn ich mich von oben nach unten bis hier bewege, und an diesem bestimmten Punkt wird x eine 100 sein und y wird auch eine 100 sein , weil es sowohl eine horizontale, gut weniger vertikale Bewegung gibt . So werden sowohl die x- als auch y-Koordinate eine 100 Nerven grundsätzlich Schnur bis zu diesem Punkt sein. Also gehen wir zurück zu unserer Style-Datei und scrollen den ganzen Weg bis wir das Header-Tag finden, wo wir die Tasche hier unten angewendet haben, ich werde einen Clip-Pfad eingeben. Und wählen wir Polygon aus. Also in der ersten Stufe, der Anfangspunkt, wo wir sowohl x als auch y als 0 haben, also ist es 00. Und in der zweiten hat x diesen bestimmten Punkt erreicht, wo x ein 100 und y 0 ist. Also x wird jeweils 100 Prozent sein, und y wird 0 sein. Und in der nächsten Stufe wird X von hier bis zum Boden reisen , wo x und y, beide werden ein 100 Prozent braucht 100 Prozent, d ist ein 100 Prozent jeder. Also, an diesem bestimmten Punkt, die organischen Jungs zu erraten, was der Prozentsatz von x und y sein wird. Also x wird von hier nach hier reisen. Also bis hier wird es 100 Prozent Dates sein. Also, wenn es bis zu diesem Punkt sagen soll, wird es etwa 70 Prozent sein. Und für den Fall von y wird es von hier bis zum Boden reisen. Wenn es hier reicht, wird es zu 100 Prozent H. Und wenn es bis hier reichen wird, wird es etwa 80 Prozent sein. Also lassen Sie uns diesen Wert hier schreiben , der fast 70 Prozent für x und 80 Prozent H für y. Und dann ist x und y an diesem bestimmten Punkt, x wird 0 sein und y wird ein 100 sein weil X nicht jede horizontale Bewegung, aber warum hat eine vertikale Bewegungen? Also x ist 0 und y wird ein 100 Prozent H sein, das ist 0 Koma 100 Prozent jeder. Speichern wir es und schauen wir uns die Website an. Ja, wie Sie sehen können, dass wir Tau haben, die angegebenen auftreten, die genau hier. Aber wir müssen etwas geringfügige Änderungen vornehmen. Das heißt, die Ausbreitung von scharfen Kanten zu hoch. Also lassen Sie uns es verringern und dass wir das tun können, indem wir den y-Wert anpassen. Also lasst uns das y auf 87 erhöhen und sehen. Ja, jetzt ist es ein bisschen nach unten und auch leicht nach rechts geworden. Nun lassen Sie uns auch einige leichte Modifikationen machen, um es ein wenig besser zu machen. Also Leute, wir können tatsächlich ein bisschen mehr Platz zwischen dem NDI Heldeninhalt und dem Herzen haben . Es ist so wahr, dass wir im Grunde den Helden auswählen, den gesamten Helden div. Und lassen Sie uns im Grunde eine Patty gekauft Begriff von 5 ihnen. Entschuldigung. Lass es uns retten. Jetzt haben wir eine ausreichende Menge an Abstand zwischen den n grausamen Helden Inhalt und die schärfsten. Und lassen Sie uns auch sehen, was passieren wird, wenn Sie versuchen, das Ende zu bewegen, Diät-Techs können ein wenig an die Spitze alarmieren. Also, um das zu tun, lassen Sie uns den Ende grausamen Helden wählen, richtig? Also hier haben wir die NDA hier oder rechts, und lassen Sie uns eine Marge, oben. Wenn Sie es also an die Spitze bringen möchten, müssen Sie einen negativen Wert angeben. Versuchen wir es mit minus Phi Urin. Ja, ja. Jetzt ist es leicht an der oberen Seite geworden und es sieht irgendwie schön aus. Also jetzt haben wir Tau genannt, der End Dyer Text und das Bild perfekt ausgerichtet. Und auch wir haben eine D scharfe Krümmung und insgesamt sieht der Heldenbereich ziemlich schön aus. Also Jungs, wir sind endlich fertig mit dem Heldenbereich unserer Website. Und unsere Heldenabteilung sieht dem unseres Prototyps ziemlich ähnlich aus. Und so die Säure. Und ich hoffe wirklich, dass ihr die Grundentwicklung von Tarde verstanden habt, die ich in diesem Video gemacht habe. Und die Nasa-Jungs im nächsten Video werden wir den Heldenbereich bauen. Und ich sehe euch dort. 6. Entwerfen des Abschnitts zu the: Hallo Jungs, willkommen zu einem anderen Video. Und in diesem speziellen Video werden wir den About Bereich unserer Website erstellen. Also im vorherigen Video haben wir den Heldenbereich komplett ausgebaut, der die Navigationsleiste und die End-dire Held kondensiert Abschnitt enthält. Also jetzt lasst uns den Abbruchabschnitt erstellen. Und wie Sie sehen können, haben wir eine Kiste. Und in der Box haben wir zwei verschiedene Elemente, die auf der linken Seite haben wir das Bild bekommen, und auf der rechten Seite haben wir den gesamten Text, die Überschrift, den Hauptinhalt, als letzte andere enthält Symbole für soziale Medien. Also sollten wir zwei verschiedene divs haben. Ein Grad wird das Fleisch halten und der andere ist weg. Ich habe all diese verschiedenen Textelemente gehört. Also lassen Sie uns zu unserer index.html Datei gehen. Und lassen Sie mich hineinzoomen. Also gleich nach dem End-Tag des Headers werde ich einen neuen Abschnitt mit einer Klasse von ungefähr erstellen. Und in diesem Abschnitt müssen wir eine Box erstellen. Also werde ich ein div mit einer Klasse von Containern erstellen. Und in der Box, wie Sie sehen können, werden zwei verschiedene Elemente haben, das Bildelement und das Textelement. Also lasst uns das erste live erstellen. Und ich werde eine Klasse von Recht geben. Und ich werde das zweite div haben, das die Klasse von links haben wird. Also werde ich das linke div oben platzieren. Also innerhalb der linken Seite, wenn wir den Image-Stapel haben, öffnen wir das und innerhalb der Quelle, navigieren wir zum Bilderordner. Und ich werde den Heldenmann benutzen. Es bedeutet genau das gleiche Bild, das wir im Heldenbereich verwendet haben. Also sind wir mit dem richtigen Teil fertig, das ist der Bildteil. Jetzt gehen wir zum nächsten Platz. Also zuerst haben wir das H1, das ist das Tastaturfleisch und das me Wort ist eigentlich eine andere Farbe. Also müssen wir eine Spanne verwenden. Also gehen wir zurück und lassen Sie uns das richtige div eingeben. Zuallererst werden wir das H1-Tag haben, das die über haben wird. Und innerhalb der Spanne werden wir das Wort „Ich“ haben. Und danach haben wir die Einführung bekommen. Also lasst uns das kopieren. Also lassen Sie uns das in ein h3-Tag einschließen, und fügen Sie es hier drüben ein. Und danach haben wir ein wenig zufälligen Text gefüllt. Also lassen Sie uns im Grunde einen Absatz hier erstellen. Entschuldigung. Und lasst uns Lauren 10 enden, nur für einen gefüllten Text. Oder gerade jetzt ist es Zeit für uns, all diese verschiedenen Social Media Icons hinzuzufügen. Und lasst uns das machen. Also Leute, um all diese verschiedenen Social-Media-Symbole einzuschließen, werde ich ein weiteres div direkt im richtigen Div erstellen und ihm keine Klasse als Social geben. Und in diesem div werden wir Anker-Tag verwenden, um all diese verschiedenen Symbole zu halten , weil alle diese Symbole einen Aufruf zur Aktion haben. Also, wenn ich drauf drücke, sollte es uns tatsächlich auf eine andere Website bringen. Es ist also besser, ein Anker-Tag zu verwenden. Also werde ich ein Anker-Tag erstellen und die Oberfläche wird jetzt null bleiben. Und Einsicht daga, daga gehen, um ein Bild zu platzieren. Gehen wir also zum Bilderordner. Und das erste von allen, wir haben das Website-Logo, das ist das weltweit, aber dash B und G. Also lassen Sie uns tatsächlich kopieren die Aufregt ein Manga-Tag für vier weitere Male. Also lassen Sie uns es auswählen. Und während ich Alt und Shift gedrückt halte, drücke ich noch vier Mal den Abwärtspfeil. Und das kann uns helfen, den bestimmten Text, den wir wollen, einfach zu kopieren. Und jetzt wählen wir das zweite Bild, und das ist das Logo. Dann haben wir die Instagram one, LinkedIn und GitHub. Im Moment haben wir, was alle Majors an Ort und Stelle. Lassen Sie es uns speichern und lassen Sie mich es öffnen und Live-Server noch einmal. Und wie Sie sehen können, haben wir das gesamte Bild und all die verschiedenen Symbole, und ich werde einige leichte Modifikationen einführen, um es kleiner zu machen. Also, bevor ich weitermache, werde ich ein wenig einen Abstand zwischen dem oberen Teil bereitstellen, das ist Hero-Teil unter dem Abbruchteil, wie Sie sehen können, dass es ziemlich nah ist. Um dies zu tun, lassen Sie uns im Grunde diesen Abschnitt direkt hier auswählen, weil der gesamte Code im Abschnitt über eingeschlossen ist. Also lasst uns zum Stil gehen. Und ich werde den Kurs zurückschicken. Und ich werde eine Polsterung von drei Jahren geben kommen von oben und der Boden ist 0 von links und rechts. Ja, jetzt haben wir natürlich offiziell Monospace von oben. Und jetzt lassen Sie uns im Grunde reduzierte Größe und machen sie in das Baby nicht ausgerichtet. Das erste, was ich tun möchte, ist, in der sozialen Klasse anzufangen. Wir haben bereits die Flex-Utility-Klasse und gelten starb genau hier. Lass es uns retten. Und wie Sie sehen können, ist jetzt alles in einer einzigen Zeile ausgerichtet. Und jetzt lass es uns im Grunde ein bisschen kleiner machen. Es befindet sich also im Abschnitt über innerhalb der richtigen Klasse. Das ist die richtige Teilung. Und wir haben ein anderes div darin bekannt asocial. Also lassen Sie uns zu unserer Style-Datei gehen und ich werde den Abschnitt über Ziel. Und darin haben wir das Soziale. Unser div. Und im Inneren haben wir den Anker-Tag und die Bilder und Glanz im Inneren des Anker-Tags. Also lassen Sie uns das Bild auswählen. Und ich werde im Grunde die Höhe ändern, 250 Pixel. Die 25 sollten gut aussehen. Ja, trotzdem, machen Sie es im Grunde kleiner und WWL stylen es später. Und dann auch eine Marge geben, richtig? Rand rechts von 10 Pixel. Jetzt haben wir die Logosäge in meiner kleinsten Größe und auch wir haben genügend Abstand zwischen ihnen. Und ich fühle mich wie ein Prototyp. Wir können sehen, dass der Text rechts neben dem Bild Saison. Um das zu tun, gehen wir zurück zu unserer index.html. Und direkt im Container werde ich wieder die Flex-Utility-Klasse und den vorgestellten Bug spielen. Wir können sehen, dass die Textur nicht das Recht des Bildes ist. Und machen wir es auch zum vertikalen Zentrum. Also haben wir eine andere Dienstprogrammklasse gefangen, die Elemente sind, die ich es sende und jetzt ist es nicht absteigend. Und lassen Sie uns auch den Flex-Strich nach links und rechts def anwenden, so dass das Bild und der Text Basel gleich viel Platz einnehmen. Also lassen Sie uns Flex Strich einen über die linke anwenden, wenn makellos für den rechten Diff. Ja, jetzt nehmen die beiden den gleichen Platz ein. Und jetzt lassen Sie uns einige leichte Modifikationen machen, um sie besser aussehen zu lassen. Also Jungs, jetzt lasst uns im Grunde die Größe unseres Bildes ändern. Diese Art sieht ein bisschen klein aus. Also lassen Sie uns im Grunde das Bild auswählen. So befindet sich das Bild in der linken Klasse, das ist die linke Teilung. Also lassen Sie uns zu einer Stil-Datei gehen und wollen wir die über Abschnitt Ziel. Wir haben das linke Div in der linken Seite gefangen, wenn wir das Bild haben, und ich werde die Höhe auf 500 Pixel ändern. Außerdem möchte ich den Randradius ändern. Grenzradius bis 1000 Pixel. Lass es uns retten. Und mal sehen. Ja, jetzt sieht es viel besser aus. Und auch bekannt als einige leichte Modifikationen an unserem Bild. Also lassen Sie uns jetzt im Grunde die About Me ändern und die Farbe, die spezifische Farbe ist, auf das me Wort anwenden, genau wie das in unserem Prototyp. Also die über mich, wo es sich innerhalb der richtigen Abteilung der Klasse befindet. Also Punkt, Punkt, Punkt, richtig. Und sie abbrechen mich ist ein H1-Tag. Und lassen Sie uns die Schriftgröße ändern, 250 Pixel. Und lassen Sie uns auch die Farbe in primäre ändern, das ist die Spanne. Also lasst uns die Farbe in Variable primär ändern. Schauen wir uns die Website an. Ja. Ja. Jetzt wurde der Abbruch von mir verändert. Jetzt wollen wir das H3 anvisieren. Das ist die Einleitung. Lassen Sie mich es kopieren. Ändern wir also die Schriftgröße auf 20 Pixel. Und es gibt auch Zeilenhöhe von drei hinzufügen. Lass es uns retten. Ja, jetzt sieht es ziemlich besser aus. Und sie werden auch ein paar weitere Absätze oder Sätze zu diesem speziellen Einführungsbereich hinzufügen , weil es irgendwie aussehende MD ist. Also gehen wir zu unserer index.html. Und genau hier werde ich eine Menge Dundee hinzufügen. Lass es uns retten. Und offensichtlich genügend Platz über diesem speziellen Logo zu haben. Also lasst uns gehen, um unser CSS zu stylen. Sie haben das Logo bereits hier ausgewählt. Also lassen Sie uns einen Rand hinzufügen. Oben von einem Rem. Ja. Natürlich ausreichende Menge an Abstand zwischen dem Logo sowie der enddiastolischen genug. Also Jungs, im Moment werde ich die Größe unseres Absatzes erhöhen , weil ich irgendwie das Gefühl, dass es ein bisschen schwer zu lesen ist. Also lasst uns in unsere style.css gehen. Lassen Sie mich erneut die Info und die richtigen Divisionen auswählen. Und ich werde den Lügendetektor anvisieren und ich möchte die Telefongröße auf 20 Pixel erhöhen. Ja, jetzt ist es viel lesbar und auch ich möchte in der Größe dieser Symbole leicht vergrößern. Also haben wir bereits die verschiedenen Social-Media-Symbole ausgewählt, und ich werde ihre Höhe auf 30 Pixel erhöhen. Lass es uns retten. Ja, jetzt sieht es viel besser aus. Also Leute, wir sind auch mit der Vorstandsabteilung fertig. Und es sieht ziemlich ähnlich wie unser Prototyp. Und bei dieser speziellen Krümmung werden wir im Grunde erreicht I dub und BR Sie arbeiten, Lassen Sie uns Abschnitt töten, weil es einfach sein muss, den oberen Teil des Fertigkeitsabschnitts an Land zu ändern, den unteren Teil des über mich Abschnitt. Also machen wir das im nächsten Video, wenn wir den Abschnitt Fähigkeiten aufbauen. Also das ist es Jungs mit Libor Abschnitt, wir haben den Build erfolgreich abgeschlossen. Und ich seh euch nächstes Video. Danke. 7. Codieren des Skillings: Hallo Jungs, willkommen zu einem anderen Video. Und in diesem speziellen Video werden wir den Kompetenzbereich unserer Website aufbauen. Also in den vorherigen Videos haben wir den Heldenbereich sowie den Abbruch in aufgebaut. Und jetzt ist es Zeit für uns, auf den dritten Teil zu gehen, in dem wir die Qualifikationsabteilung aufbauen werden. also über unseren Designprozess sprechen , werden wir zunächst das H1-Tag erstellen. Danach wird w0 von all diesen verschiedenen Göttern einen Absatz vorwärts haben. Also haben wir unsere sechs verschiedenen Karten hier, und jeder Gott hat ein paar Informationen darin, wie ein Logo, eine intelligente Überschrift und einen Absatz. Und wir werden CSS-Gitter verwenden, um dieses Kartenbild zu erreichen. Das wird also ein wirklich informatives Video sein. Und jetzt, Lasst uns auf unsere Indexdatei springen. Das erste, was ich tun möchte, ist, dass ich unseren Code etwas bereinigen möchte. Das ist unser Indexwert. Und wie Sie sehen können, dass es tatsächlich auf große Daten gesammelt suchen und ich werde aktuell tatsächlich einen Abschnitt identifizieren, der leicht. Also, was ich tun werde, ist, dass dieser schlimme Abschnitt hier im Grunde unsere Heldenabteilung ist. Also schreib einen Ball, unsere Kopfzeile. Ich werde einen Kommentar erstellen, der ein Indexdateikommentar ist. Um das zu tun, werde ich ein MD-Tag öffnen gefolgt von einem Ausrufezeichen und zwei Bindestrichen. Das wird also ein leeres Tag erstellen, und das wird im Grunde als Kommentar bezeichnet. Und was auch immer Sie in einem gemeinsamen abgenutzten schreiben, wird hingerichtet. Also hier werde ich in Helden-Sektion beginnt zu schreiben und ich werde es kopieren. Und der Leadspace am Ende der Kopfzeile, und ich möchte ihn umbenennen. Hat der Heldenbereich endet. Lassen Sie uns dasselbe für den Abbruchabschnitt tun. Fügen Sie es hier ein und lassen Sie mich es in Abschnitt Über umbenennen. Und lassen Sie mich es kopieren. Und lassen Sie uns das gleiche am Ende unseres Abbruchabschnitts einfügen. Dadurch sieht unser Code viel sauberer aus. Und auch wenn in der Zukunft, wenn Sie unter Debug oder Gott sind, können wir leicht die verschiedenen Abschnitte in der Indexdatei identifizieren. Also jetzt gehen wir runter zu unserem Kompetenzbereich. Also nochmal, ich werde hier einen Würfel erschaffen. Und ich möchte es nennen, wie Skills Abschnitt beginnt. Also zuerst hier und ich werde einen Abschnitt erstellen. Also lassen Sie mich hineinzoomen. Lassen Sie uns einen Abschnitt mit einer Klasse von Fähigkeiten erstellen. Und in diesem Abschnitt werde ich ein div mit einem Klassencontainer haben, so dass wir alle Elemente in der Mitte des Seitencontainers platzieren können. Also in diesem speziellen Container wird eine Überschrift und den Absatz haben. Die Überschrift besteht also aus zwei verschiedenen Teilen. Der Hauptteil und der Fähigkeiten-Spot. Und Skill-Spot ist in einer anderen Farbe, also müssen wir Schläge beenden, die innerhalb einer Spanne. Also lassen Sie uns hier ein H1-Tag erstellen, und Mäuse und Hörfähigkeiten innerhalb der Spanne. Gefolgt von haben wir einen Absatz, also gehe ich unter etwas Füllstoff Text. Alles klar, jetzt haben wir sowohl die Überschrift als auch den Absatz. Wenn wir also jetzt den Kartenabschnitt überprüfen, wie Sie sehen können, dass wir sechs verschiedene Anleitungen haben und wie ich bereits sagte, werden wir CSS-Gitter verwenden. Also brauchen wir tatsächlich eine Schachtel und in der Box werden all diese verschiedenen Karten haben. Lassen Sie uns also einen Wrapper oder eine Box erstellen. Also lassen Sie mich es hier erstellen. Aber eine Klasse von Karte Wrapper, Wache gestrichelte Wrapper. In diesem speziellen Wrapper werden wir unsere einzelne Karte haben. Lassen Sie uns also ein div mit der Klasse der Karte erstellen. Also, um die Karte zu öffnen, und wie Sie sehen können, dass innerhalb der Wache VR hyping ein Logo. Also lassen Sie uns ein Bild-Tag direkt hier erstellen. Also in der Quelle werde ich Punktschrägstrich machen. Gehen wir zu unserem Bilderordner und lassen Sie uns Code-Bild ausgewählt. So haben wir jetzt das Logo an Ort und Stelle. Dann brauchen wir einen Schlag, damit wir ein H2-Tag verwenden können. Und ich werde in Entwicklung gehen. Und wir haben ein Tortendiagramm. Wenn ich lorem eingeben, nicht d für einige füllen als nächstes. So haben wir jetzt alle grundlegenden Elemente, die in einem Auto sind. Also Jungs, bevor wir weitermachen, lassen Sie uns schnell etwas leichtes Styling zu unserem Geschick machen, raum-ähnlichen Stil. Unsere Überschrift hat elastisch, polygonal, und auch lassen Sie uns wählen ist einzelne Karte , so dass wir das gleiche für alle anderen Karten kopieren können. Gehen wir also zu unserer Indexdatei. Und das erste, was ich tun möchte, ist, dass ich unseren H1-Tag eine Klasse anbieten möchte. Das ist die Überschrift der Fertigkeiten, weil wir noch keine gegeben haben. Also werde ich es als Abschnittsstrich benennen, der verletzt wird. Ich will es retten. Gehen wir zu unserer style.css. Das erste, was ich tun werde, ist, diesen speziellen dunklen Hintergrund zu versorgen. So wie Sie sehen können, dass wir alle diese Fähigkeiten Klasse für diesen Abschnitt haben. Also werde ich das anvisieren, das sind gespeicherte Fähigkeiten. Und ich möchte einen Hintergrund von dunkler Farbe geben, die Punkt ist. Lass es uns retten. Und jetzt lassen Sie uns im Grunde Stil Überschrift, also Überschrift als CTO, verschiedene Teile. Also lassen Sie uns im Grunde auf die Überschrift zielen. Also haben wir eine Klasse von Abschnitt Bindestrich gegeben. Lasst uns kopieren. Und ich werde Fähigkeiten eingeben und dann Abschnitt Strich Überschrift. Lassen Sie uns zunächst die Farbe in rein ändern. Das ist die weiße Farbe. Und lässt uns grundsätzlich die Telefongröße 2, 3 Zimmer ändern. Und lassen Sie uns auch den Text in der Mitte der Seite machen, indem Sie einen Text ausrichten Zentrum. Und lassen Sie es uns speichern und sehen, wie es im Browser aussehen wird. Ja, er sieht vordefiniert aus. Und lassen Sie uns auch ein wenig Rand unten zur Verfügung stellen , so dass es gut vom Absatz getrennt ist. Also eine Marge Grund des Staunens, sollte Gutes tun. In Ordnung, keine Fähigkeiten. Die Überschrift sieht gut aus. Und lassen Sie uns auch die Farbe des Skills Wortes ändern, weil wir es hier in grün haben. Also haben wir bereits eine Spanne auf die gesamte Fertigkeit angewendet , so dass wir leicht darauf zugreifen können über unseren Abschnitt, dass vergießen. Also lasst es uns kopieren. Und lasst uns die Spanne anvisieren und die Farbe in primär ändern. Ja, ja. Ziemlich gut. Also Jungs, jetzt lasst uns unseren Absatz binden. Das heißt, lassen Sie uns seine Farbe in Weiß ändern und bringen Sie sie in die Mitte der Seite. Also, was ich tun werde, sagte er, ich werde diesen Abschnitts-Strick kopieren , der hier drüben geht. Dann werde ich plus v tun. Also das coole Ding an CSS ist, dass WEF diesen Abschnitt Bindestrich Überschrift bekam, was im Grunde eine Klasse für dieses bestimmte H1-Tag ist. Und durch die Angabe von Plus b bedeutet es, dass ich sagen möchte, wie es nicht nächstes Element war. Und das nächste Element, das ich auswählen möchte, ist im Grunde ein Absatz. Durch die Angabe von Plus p bedeutet dies, dass ich das nächste Element nach diesem bestimmten S1-Tag auswählen möchte. Und das ist im Grunde Epigraph. Also in diesem speziellen Absatz, Ich möchte die Farbe zu weiß ändern, dass diese Kraftstoff. Und auch möchte ich es in der Mitte der Basis machen, also extra Zeilensender. Also will ich auch einen Rand unten von acht Zimmern. So sind der Absatz und die Artikel gut getrennt. Lass es uns speichern und sehen. Und ich sehe vollkommen gut aus. Wenn wir also nach unten scrollen, können Sie sehen, dass am Ende dieser Autoabschnitt ein Walross ist. Und jetzt versuchen wir, das zu beheben. Also Leute, jetzt lasst uns unseren Wach-Styling-Prozess beginnen. Also lasst uns auf Tür HTML springen. Und wie Sie sehen können, dass in unserem Gott Wrapper sind, seien Sie vier. Jetzt haben wir nur eine einzige Karte. Was, wie Sie im Design sehen können, brauchen sie im Grunde sechs Karten. Also lassen Sie uns jetzt sechs von ihnen erstellen. Also werde ich die gesamte Karte hier auswählen. Und während ich Alt und Shift gedrückt halte, drücke ich noch fünf Mal die Nach-unten-Taste. Und das machte im Grunde insgesamt sechs verschiedene Karten. Speichern wir es und sagen wir jetzt Bordsteinkante. Und wie Sie sehen können, haben wir uns sechs verschiedene Karten. Also jetzt lasst uns auf den Styling-Prozess gehen. Und davor, lassen Sie mich schnell die Größe dieses bestimmten Symbols verringern , so dass es während des Entwurfsprozesses irgendwie besser aussieht. Lassen Sie uns also einfach den Kartenwickler und die darin enthaltenen Bilder ausrichten. Gehen wir also zu einer Stildatei. Und hier gehe ich unter Punktkarten-Papier und all die Majors in diesem speziellen div. Und ich werde seine Höhe auf 100 Pixel ändern. Lass es uns retten. Ja, jetzt sehen wir nur irgendwie gut aus und lassen Sie es uns während des Entwurfsprozesses weiter ändern. Also, jetzt, was ich tun werde, ist diese Puppe, es ist im Grunde ausgewählt Karte Wrapper. Also die Wache Bradbury speziell in den Fähigkeiten. Und wählen wir den Karten-Wrapper aus. Also hier werde ich im Display tippen. Hol es dir. Wie ich schon sagte, ihr werdet ein Gitter benutzen, um den Wagen zu erreichen, wie sie so gut aussehen. Es ist ein absolut leistungsfähiges Werkzeug und ich kann Ihnen helfen jede Art von komplexem Layout so zu erreichen, wie Sie wollen. Wenn ich es also speichere und wir auf unsere Website gehen, können Sie sehen, dass im Grunde nichts passiert ist. Es liegt daran, dass wir das Gitter nicht definiert haben. Also stellen wir vor, definieren die Gildenähnliche, ah, wie viele Zeilen oder Spalten, die Dhabi wollen. So können wir hier in unserem Prototyp sehen, dass wir zwei verschiedene Reihen und an drei verschiedenen Spalten haben. Also müssen wir die Anzahl der Spalten genau hier angeben. Also werde ich Rastervorlagenspalten eingeben. Und hier werde ich einen FR-Raum eingeben, einen FR-Raum, einen FR. Also, wenn jedes Training, wie Sie sehen können. Ich habe drei verschiedene Spalten und jede Spalte haben wir zwei verschiedene Elemente. Und das ist die Magie der Gitteruntätigkeit. Und jetzt lasst uns diese Karten weiter stylen. Also Jungs sahen wissen, wenn es sagte Pre-Prototyp, Sie können sehen, dass die Karte im Grunde einen weißen Hintergrund hat. Und jetzt lassen Sie uns im Grunde die Hintergrund-Angebotskarte ändern. Also vorher, wie ich bereits sagte, müssen Sie ein Raster angeben oder definieren. Und wir haben das Gitter durch Eingabe in 1543 mal spezifiziert. Wir haben also drei verschiedene Säulen. Aber es wird ein langer Prozess sein. Und wenn wir mehr als fünf oder sechs verschiedene Säulen haben. Es gibt also eine andere Möglichkeit, das zu tun. Das heißt, Sie können einfach eine Wiederholung angeben. Der Beat. Und der erste Parameter wird sein, wie oft diese Bindung ein bestimmtes Element wiederholen möchte. Also in unserem Fall sind es drei. Und der nächste Parameter ist, was möchten Sie dreimal wiederholen? In unserem Fall ist es ein F5. Und wenn ich es speichere und wenn Sie unsere Website überprüfen und aktualisieren, können Sie sehen, dass nichts passiert ist. Das bedeutet, dass die Wiederholungsfunktion einwandfrei funktioniert. Und jetzt lasst uns die Hintergrundfarbe des Autos ändern. Und wie wir wissen, dass Gott im Grunde in der Karte Verpackung befindet. Also lassen Sie uns dann den Kern von hier kopieren und hier einfügen. Und lassen Sie uns auch eine Punktkarte hinzufügen und den Hintergrund in weiß ändern. Also zurück zu reinen. Speichern wir es und sehen Sie, wie das Diagramm geändert wurde. Und wie Sie sehen können, dass alle diese Karten sind Punkt überlastet zusammen. Wir müssen also genügend Platz zwischen ihnen haben, genau wie in unserem Prototyp. Also, da wir Grid verwenden, Es ist ein einfacher Prozess, ist ein einfacher Prozess. Oder wir müssen tun, ist, dass wir die Lücke angeben müssen, das heißt Gitter, Strich, Spalte Strich Lücke. Lassen Sie uns einen Raum von Turin angeben. Lass es uns retten. Und wie Sie sehen können, dass wir F2 Remote-Raum zwischen all diesen Karten haben. Und wie Sie sehen können, brauchen wir auch ein wenig Platz im Boden, aber in diesem speziellen Teil. Also lassen Sie uns eine Zeilenlücke angeben. Jetzt haben wir eine Spaltenlücke angegeben. Jetzt lassen Sie es uns kopieren. Und ich werde die Spalte in Zeile ändern. Und lassen Sie uns eine Pfeillücke von 67. Lass es uns retten. Und wie Sie das sehen, haben wir jetzt natürlich genügend Platz zwischen diesen Karten. Und wie Sie sehen können, dass die, all diese Elemente in der Karte Sartre überlastet. Und wenn Sie Ihren Prototyp überprüfen, können Sie sehen, dass alles so zwischen ihnen oder keinen Platz von der Grenze der Wache hat. Also lassen Sie uns ein wenig Polsterung in den Warenkorb. Also gehen wir zu unserer Karte hier und bieten eine Polsterung der Freiheit von oben und unten und zwei Zimmer von links und rechts. Lass es uns retten. Und wenn Sie das sehen, weiß ich, dass unsere Karte ziemlich gut aussieht. Wir haben natürlich ausreichende Menge an Polsterung und Einreichung Menge an Abstand zwischen den Karten. Jetzt wie im Grunde gehen innerhalb der Karte und machen diese Elemente in ihrer jeweiligen Position. Also Leute, wenn wir unseren Prototyp nehmen, können Sie sehen, dass das Logo irgendwie auf der Karte schwebt. Und jetzt ist es Zeit für uns, diese Art von Blick zu erreichen. Wenn wir also die Indexdatei überprüfen, können wir sehen, dass sich das Erstaunen im Grunde in der Karte befindet. Gott ist vollständig um die Karten-Wrapper Division gewickelt. Also, wenn wir zu Style-Datei gehen, so das erste, was ich tun möchte, ist, dass ich im Grunde den Bild-Selektor für bloße schneiden möchte , weil wir zuvor die Höhe des Bildes geändert haben. Und ich habe es hier eingefügt , damit wir leicht zwischen dem Bild und der Wache in Beziehung setzen können. Das erste, was ich tun möchte, ist, dass ich die Position des Bildes zu absolut ändern werde . Und ich möchte die Position der Karte ändern, um sie in Beziehung zu setzen. Lass es uns retten. Und jetzt können wir sehen, dass das Bild im Grunde in der Karte ist. Und indem man absolute und verzögerte div angibt, bedeutet dies, dass der Gott im Grunde als Elternteil fungiert und das Bild als Typ fungiert. So zum Beispiel, innerhalb der erstaunlichen, wenn ich oben 0 angeben, können Sie sehen, dass angekündigt, die Majors gehen auf den oberen Teil der Karte. Zum Beispiel, wenn ich links 0 angeben möchte. Jetzt können Sie sehen, dass das Bild den ganzen Weg links vom Auto ging, nicht links von der Seite. Jetzt wird der Wächter als Elternteil fungieren und die Bilder können als Kind fungieren. Nun, wenn es so ist, als könnte das Proton sehen, dass die Bilder tatsächlich auf der Karte schweben. Also müssen wir das Bild aus den Wachen bringen, also müssen wir negativen Wert verwenden. Also, was ich tun werde, ist, dass ich die Spitze auf minus 3,5 M ändern werde und wir es speichern. Und wenn Sie den Kopf gegen Sie überprüfen, dass es jetzt autistisch ist. Und jetzt müssen wir es in die Mitte dieses speziellen Autos bringen. Um das zu tun, lassen Sie uns die Linke ändern. Also jetzt links ist 0. Deshalb sind die Bilder ganz links vom Darm. Also, wenn ich es bringen 50 Prozent Datum. Jetzt sollte das Haupt in der Mitte sein, aber es ist nicht im Absender der Wache. Es liegt daran, dass der linke Rand sehen kann, dass sich der linke Rand im Grunde in der Mitte der Karte befindet. Der NOR-Abstieg der Bilder bei den 50 Prozent der Karte, das linke Ende dieses bestimmten Bildes liegt bei D 50 Prozent der Karte. Jetzt müssen wir den Absender des Kumpels in die Mitte oder die 50 Prozent der Karte bringen . Um das zu tun, gehen wir wieder zu unserem Bild zurück. Und wir werden Transformieren Zeit solide verwenden. So Zeitauswahl wird im Grunde verwendet, um die Haupt online für die X-Achse, Y-Achse zu bewegen, wie wieder, verschieben Sie sie horizontal, vertikal in der Art, wie Sie wollen. Jetzt verwenden wir nur Translate X, weil wir das Bild in den horizontalen Pfad verschieben wollen. Also, wenn ich einfach sage, dann werden 50 Prozent das Bild nach rechts bewegen. Aber wir wollen die Masse nach links bewegen, weil wir dies in einen Teil der Dienstmädchen bringen müssen in diesem Ende auf der Karte. Also lassen Sie uns ein minus 50% setzen. Und wenn ich es speichere, können Sie sehen, dass sich das Bild jetzt genau in der Mitte befindet oder die 50 Prozent der Tasse, 50% des Autos und 50 Prozent des Bildes genau in der oberen horizontalen Kante der Spalte ausgerichtet ist . So erreichen wir diese Art von schwebendem Look für das Symbol. Und jetzt sieht der Autoabschnitt vordefiniert aus. Und wie Sie sehen können, dass wir einen Arbeitsbereich zwischen den Absätzen und einem Gott haben, werde ich den Rand unten unserer Tasche leicht verringern genug. Wenn wir also nach oben scrollen, können wir das p-Tag sehen und es auf sechs von ihnen reduzieren. Und mal sehen, wie es aussehen wird. Jetzt sieht es eigentlich viel besser aus. Jetzt gehen wir zum nächsten Teil. Also Jungs, jetzt lasst uns Stil erkennt in der Karte. Also zuerst, lassen Sie uns zu unserer styles.css gehen. Und in den Karten werde ich die zusätzliche Linie als Absender machen. Also dann schreiben Text ist im Grunde in der Mitte ausgerichtet. Zweitens möchte ich auch einen Raum zwischen den beiden und dem Absatz lassen. Also wieder, lassen Sie uns dann direkt Karte Abschnitt von hier kopieren. Lassen Sie uns es hier einfügen und lassen Sie uns das H2-Tag auswählen. Und ich werde eine Marge unten an einer Trommel geben. Lass es uns retten. Ja, nein, es sieht vordefiniert aus. Also schließlich, lassen Sie uns auch einen Hover-Zustand hinzufügen. Also, wenn ich überhaupt, auf dieser speziellen Karte, bekommen wir im Grunde Daddy mit der Farbe zu spielen. Also lassen Sie uns wieder wählen Sie die Karte Abschnitt von hier, und ich werde es hier einfügen. Lass uns eine ganze Stunde geben. Und ich möchte, dass der Hintergrund mit der Farbe spielt. So schön zu sehen. Ja, ist es. Wir können auch definieren, dass wir brauchen, dass glatte Fade in und verblassen oder Defekt. Also lassen Sie uns wieder auf unsere Karte gehen hier drüben und bieten einen Übergang aller Elemente, 0,3 Millisekunden. Und es ist, ja, es sieht jetzt ziemlich gut aus. Nun lassen Sie uns alle diese verschiedenen Symbole auch hier ändern. Es ist ziemlich einfach, sie zu ändern. Und lasst uns zu unserer index.html gehen. Also lasst uns die zweite Karte ändern. Das hier ist also die Postkarte. Und jetzt gehen wir in den zweiten Garten, ändern Sie das Bild. Also haben wir Dui, Yu x, dann haben wir das iPhone, denke ich, dann Videografie. Und schließlich haben wir einen GitHub. Also, wenn ich es speichere, Mal sehen wir unsere Website. Wie Sie sehen können, dass alle verschiedenen Symbole an seinem Platz sind und es sieht ziemlich gut aus. Das Letzte, was wir tun müssen, ist diese besondere Krümmung hier drüben. Also haben wir das bereits im vorherigen Video gemacht, ein Angreifer bittet euch, nur auszuprobieren, wenn ihr das auf eigene Faust erreichen könnt , weil wir bereits im vorherigen Abschnitt getan haben, nur Radios Elefant. Sehen Sie, ob wir herausfinden können, wie wir jetzt diese besondere Ära scharfe Krümmung machen können , die ich hier mache. Also geben sie auf, Minute zu schauen und versuchen, es selbst herauszufinden. Also hoffe ich, dass ihr es ausprobiert habt. Und wenn Sie nicht in der Lage waren, herauszufinden, wie wir das tun können, schauen Sie sich bitte das vorherige Video an, in dem ich den Designprozess ausführlich erklärt habe. Also jetzt wollen wir im Grunde versuchen, diese besondere Krümmung auf unserer Website zu erreichen. Gehen wir also zu unserer Indexdatei. Und wie Sie sehen können, dass der gesamte Skill-Abschnitt befindet sich in diesem speziellen Abschnitt , der eine Klasse von Fähigkeiten hat. Also, wenn wir gehen, um Stil-Datei in den Hund Teil wieder, sehen Sie die Fähigkeiten Teil, wo wir den Hintergrund angewendet haben. Also genau hier werde ich Clip-Pfadpolygon eingeben. Und ich habe bereits verschiedene Werte getestet. Und dy kam schließlich mit ein paar Werten heraus und ich werde es einfügen. Ich gehe hierher und lass es uns retten. Wenn wir also unsere Website überprüfen, können Sie sehen, dass wir eine leichte Krümmung haben. Aber Sie können sehen, dass unser Logo durch diese besondere Krümmung überschrieben wurde. Also haben wir ein wenig Polsterung auf unserem Kopf gemacht. Also hier haben wir unseren Container. Also im Container haben wir all das andere Zeug. Wenn Sie also ein wenig Polsterung auf dem Behälter bereitstellen könnten, wird BOB in der Lage sein, diese spezielle Überschrift zu senken. Also werde ich zu einer Stil-Datei gehen und direkt unten als Kills, Ich werde wieder Ziel oder Fähigkeiten und den Container. Und ich werde eine Polsterung von 100 Pixeln geben. Und das bringt dann im Grunde das Dissement-EBIT nach unten, und jetzt ist alles klar sichtbar. Und wir konnten diese besondere Krümmung auch nach unserem Prototyp erreichen. Also, das war's Jungs. Also haben wir in diesem speziellen Video einiges gelernt. Vollständig gebaut werden die, die Geschicklichkeitsabschnitt. Und das war's. Ich hoffe, dass ihr die grundlegenden Dinge verstanden habt , dass wir Schulden in diesem Video haben. Also, das war's, Leute. Im nächsten Video, lassen Sie uns zum nächsten Teil unserer Website bewegen. 8. Der the erstellen: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video, v wird das Projekt Abschnitt unserer Website bauen. In den vorherigen Videos müssen wir also den Heldenbereich, den Abschnitt „Über“ und den Abschnitt „Fertigkeiten“ erstellen . Und jetzt ist es an der Zeit, auf den Projektabschnitt zu springen. Und wenn Sie einen Projektabschnitt analysieren, können Sie sehen, dass wir hier eine Hauptüberschrift haben. Und unter der Überschrift hier können Sie das Bild sehen. Dies ist im Grunde das Projektbild. Und wir haben auch einen kleinen Absatz, der definieren wird, was das Projekt ist. Und hier können Sie verschiedene Punkte sehen. Diese Türen hängen also von der Anzahl der Objektträger ab, die Sie haben. Und dieser grüne Punkt hier zeigt die aktuelle Folie, die Sie bereits. Also im Grunde haben wir eine Überschrift. Und der zweite Teil ist diese Rutsche auseinander. So können wir die Folie grundsätzlich in zwei verschiedene Abschnitte einordnen. So kann der erste Abschnitt das Bild und Biograf sein, und der zweite Abschnitt kann diese besonderen verschiedenen Punkte sein. Das ist also alles über die Teilnahme. Und jetzt ist es an der Zeit für uns zu programmieren und den Produktbereich über Ihr Leben zu bringen. Also Reis, richtig? Nein, Lassen Sie uns zu unserer Indexdatei gehen und das ist wieder, siehe diese E-Unter-Skills Abschnitt. Also, wenn wir nach unten scrollen rechts unter dem schließenden Tag unseres Abschnitts, werde ich einen Kommentar, der anzeigt, dass unsere Haut Abschnitt beendet ist und Mittellinie es. Und hier erstelle ich keinen weiteren Kommentar, der anzeigt, dass der Projektabschnitt begonnen hat. Und hier werde ich hineinzoomen. Und lassen Sie uns einen Abschnitt mit einer Klasse von Projekten erstellen. Und innerhalb des Abschnitts möchte ich ein anderes div mit einer Klasse von Containern in diesem speziellen div erstellen . Zuallererst haben wir einen Zoll, der den Namen von Projekten hat. Also lasst uns so tun, als wäre es eins, und lasst uns die Projekte eingeben. In Ordnung, jetzt haben wir das H1-Tag an Ort und Stelle. Jetzt gehen wir auf die Hauptrutsche auseinander. Also Leute, wir brauchen im Grunde einen Wrapper, um all die verschiedenen Folien zu halten , die wir erstellen werden, so dass der Wrapper alle verschiedenen Folien umschließt. Also lasst uns zuerst 1 erstellen. Um das zu tun, gehen wir zu unserer Indexdatei. Und direkt unter unserem H1-Tag werde ich ein anderes div mit einer Klasse von Schieberegler erstellen. Und in dieser speziellen Folie, eine Division werden wir unsere erste Folie erstellen. Also wieder, ich werde ein anderes div mit einer Klasse von Folie erstellen. Also in der Folie, wie Sie sehen können, haben wir zuerst ein Bild bekommen. Lassen Sie uns also ein Bild-Tag erstellen. Und in der Quelle werde ich dorsolateral betreten. Gehen wir zum Bild-Ordner. Und ich habe ein Bild mit einem Namen der Datenvisualisierung erstellt. Wählen wir also den ersten aus. Und zweitens haben wir hier auch einen Absatz. Also lassen Sie uns ein Absatz-Tag erstellen und ich werde einen Text eingeben. Lass es uns retten. So haben wir jetzt das Bild als Geschwindigkeitsabsatz in ihren jeweiligen Positionen bekommen. Also Jungs, ab jetzt haben wir Schwung ist einzelne Folie, aber wir brauchen tatsächlich ein paar weitere Dias. Also, um das zu tun, möchte ich unsere Singles Light wählen. Und während ich Alt und Shift auf meiner Tastatur gedrückt halte, drücke ich noch drei Mal den Abwärtspfeil. Und das schafft im Grunde insgesamt vier verschiedene Dias. Also lassen Sie es uns speichern und unsere Website überprüfen. Und wie Sie sehen können, haben wir jetzt vier verschiedene Bilder und für verschiedene Absätze. Das erste, was ich tun möchte, ist, dass ich die Größe des Bildes reduzieren möchte. Um das zu tun, gehen wir zu unserer Indexdatei. Also im Grunde der Major, der sich in dieser Führungsabteilung befindet, innerhalb dieser Dia Division, können sie auf den Kumpel zugreifen. Also lassen Sie uns in style.css Datei gehen. Hier werde ich den Schieberegler auswählen. Also in Zelle Schieberegler können wir auf diese Folie zugreifen, die Vision, und in befriedigen Teilung neben unserem Bild. Also lassen Sie uns das Bild auswählen und ich werde eine Breite von 500 Pixeln und eine Höhe von etwa 280 Pixeln zur Verfügung stellen . Alles klar, jetzt ist dieses Eis viel besser. Also jetzt ist es Zeit für uns, auf unserem Schieberegler zu gehen, denn jetzt haben wir nur ein Bild und einen Absatz. Also lasst uns das jetzt tun. Also Jungs, um unseren Schieberegler zu erstellen, werden wir eine Bibliothek verwenden, die als Slick Slider bekannt ist. Also, um das zu bekommen, gehen wir zu Google und suchen nach glatten Schieberegler. Und wir werden die erste Option genau hier wählen. Und lassen Sie uns zum Abschnitt Verwendung navigieren. Und wenn Sie den ganzen Weg nach unten scrollen, können Sie das Skript sehen. Also lasst uns kopieren dann stirbt Clip von hier. Und danach gehen wir zu unserer Indexdatei. Und direkt über dem schließenden Tag ihres Körpers, lassen Sie uns die ganze Partitur platzieren. Lassen Sie mich es ausrichten. Und lassen Sie es uns retten. Also jetzt haben wir ein JavaScript, aber wir brauchen auch das CSS für unseren Schieberegler. Also, um das zu bekommen, lassen Sie uns zurück auf die Website gehen und klicken Sie auf die Option Jetzt erhalten hier. Und lassen Sie uns das CSS kopieren. Es ist also im Grunde ein CDN. Es ist kopiert. Lassen Sie uns zurück zu unserer Indexdatei und scrollen Sie den ganzen Weg nach oben und schreiben Sie einen Bot, unsere CSS-Verknüpfung, lassen Sie uns diese spezielle Folie CSS platzieren, und lassen Sie es speichern. Also, wenn wir jetzt unsere Website überprüfen, können Sie sehen, dass im Grunde nichts passiert ist. Es liegt daran, dass wir den Schieberegler nicht definiert haben und jetzt machen wir das. Also Jungs, bevor Sie sich auf Sie bewegen, um eine leichte Änderung zu machen. Also lassen Sie uns sagen, in öffnen diese Slicks Bibliothek Website, Lassen Sie uns zu dieser Website gehen und lassen Sie uns auf die Get it now Option hier klicken. Also lassen Sie uns das JavaScript hier kopieren, weil wir eine CD und CSS verwenden. Daher müssen wir auch ein CDN JavaScript verwenden. Also lassen Sie es uns von hier kopieren. Gehen wir zurück zu unserer Datei index.html. Und wenn Sie den ganzen Weg nach unten scrollen, so ist dies so der Code, den wir zuvor von der glatten Schieberegler kopfüber kopiert haben. Lassen Sie uns also die letzte Codezeile von hier ersetzen und den neuen Code einfügen. Und lassen Sie es uns retten. Und wie Sie wissen, haben wir bereits die Datei app.js während des ersten Videos erstellt, in dem wir das Projekt eingerichtet haben. Daher müssen wir auch unseren Index oder HTML-Datei mit JavaScript verknüpfen. Hier werde ich Skript-Punktquelle rendern, und anstelle der Quelle gehe ich unter Punktschrägstrich. Und wählen wir die Datei app.js aus. Also jetzt haben wir verlinkt oder die unnötige Datei. Also jetzt lassen Sie uns zu unserer app.js Datei gehen. Also hier werde ich jQuery verwenden. Also lassen Sie mich Dollar eingeben und B werden das Dokument auswählen. Und ich wähle die Tür bereit. Und hier in der runden Klammer werde ich eine Callback-Funktion erstellen. Und dieser spezielle Code bedeutet, dass document.ready anzeigt, dass, wenn die Seiten im Grunde geladen werden, ich den Code in dieser speziellen Funktion nicht ausführen werde. Deshalb bedeutet dieser spezielle Code. Also hier müssen wir den Wrapper unserer Folie auswählen. So hier können Sie sehen, dass die Datei index.html, der Wrapper als Folie benannt wird. Also lassen Sie mich das kopieren und lassen Sie uns zurück zu unserer JavaScript-Datei. Also in jQuery Biao gehen, um ein Element mit dem Dollarzeichen auszuwählen, gefolgt von dem Namen der Klasse. Also werde ich Punkt eingeben, gefolgt von dem Namen der Klasse, die Schieberegler. Also hier werde ich Dot Slick betreten. Öffnen wir eine offene Halterung und öffnen Sie diese glatte Funktion. Also, als ich es retten wollte. Und wenn wir die Website hier überprüfen, können Sie sehen, dass wir jetzt eine Folie haben, aber wir haben nicht viel Stil jetzt. Aber wie Sie sehen können, dass die grundlegenden Funktionalitäten angewendet werden, wie wir haben was für eine nächste Taste, die im Grunde Satelliten auf die nächste Folie. Sie haben auch einen vorherigen Button direkt hier. Also im Moment haben wir eine ziemlich grundlegende Blick für eine Folie es. Und jetzt entwerfen wir für uns zu modifizieren und anpassen Slided und machen es so, wie wir wollen. Also Leute, bevor wir unser Sonnenlicht stylen, ließ es uns einige grundlegende Dinge wie das Styling des Projekts machen. Und auch möchte ich ein wenig Polsterung unten zu unserem Abschnitt, so dass der Wagen so gut von diesem speziellen weißen Hintergrund getrennt ist. Lassen Sie uns diese grundlegende Aufgabe zuerst abschließen. Also das erste, was ich tun möchte, sagte er, ich gehe in die style.css. Und wenn Sie die Indexdatei überprüfen, können wir sehen, dass der Skill-Abschnitt einen Abschnitt von Fähigkeiten hat. Also lassen Sie uns im Grunde eine Polsterung unten auf den Skill-Abschnitt bieten. Gehen wir also zur Stildatei. Und wenn Sie hier den ganzen Weg nach oben scrollen, können Sie sehen, dass wir bereits die Fähigkeiten und die Container-Klasse ausgewählt haben. Also lassen Sie uns eine Polsterung unten von einem 100 Pixel. Speichern Sie es. Und fragt Sie, dass wir jetzt in alten und den unteren Teil der Karte zurück haben und die nächste Seite oder der nächste Abschnitt nicht kollidiert. Nun, das sieht gut aus. Nun lassen Sie uns Tyler Projekte in Richtung. Wenn wir also die Indexdatei überprüfen, können Sie sehen, dass sich das H1 im Grunde im Projektabschnitt befindet. Also gehen wir zu unserer CSS-Datei. Hier werde ich bei DOT-Projekten enden. Und ich möchte das H1-Tag auswählen. Zuallererst werde ich die Schriftgröße auf drei rem ändern, ich möchte den Text in die Mitte der Seite bringen. Also lasst uns text-align center eingeben und auch einen Rand bereitstellen. Oben von einem Rem. Und lassen Sie es uns retten. Ordnung, jetzt ist die Überschrift des Projekts in der Mitte der Seite. Und jetzt sind wir damit fertig. Lassen Sie uns jetzt auf diese Kachelzwecke oder für Schieberegler gehen, das erste, was ich tun möchte, ist, dass ich ein wenig Platz im unteren und oberen Teil des Bildes zur Verfügung stellen ein wenig Platz im unteren und werde, so dass es genauso aussieht wie unser Prototyp. Um das zu tun, lassen Sie uns zu unserer style.css gehen und wir haben bereits die Mittel ausgewählt. Also hier möchte ich einen Rand oben von drei rem geben, und einen Rand unten von 38, bin ich auch. Lass es uns retten. Und jetzt, wenn Sie auf unsere Website gehen, können Sie sehen, dass es genügend Monospace gibt. Die Oberseite und die Unterseite. Und wenn Sie den Prototyp überprüfen, können Sie sehen, dass sich das gesamte Bild und der Absatz in der Mitte dieses bestimmten Abschnitts befinden. Also, um das zu tun, lassen Sie uns wählen oder einen Schieberegler. Und im Inneren des Schiebereglers haben wir die Dias. Und vor allem, lassen Sie uns Text-Align-Zentrum zur Verfügung stellen. Also, wenn Sie es speichern und wenn Sie die Website überprüfen, können Sie sehen, dass der Text im Grunde im Absender ist. Und jetzt müssen wir das Bild zum Absender bringen. Um das zu tun, werde ich einen Displayflex zur Verfügung stellen. Jetzt haben wir dann das Element in horizontaler Weise bekommen. Lassen Sie uns nun ausrichten Elemente, Mitte, Zeilenelemente, Absender bereitstellen . Nun befindet sich dieser Text in der vertikalen Mitte des Bildes. Jetzt können wir eine Flex-Richtungsspalte zur Verfügung stellen, um diese bestimmte Tasche es im unteren Teil des Bildes abzubringen . Also hier lassen Sie uns eine Flexrichtung der Spalte zur Verfügung stellen. Wenn ich es jetzt speichere, werden Sie sehen, dass sich dieser spezielle Absatz jetzt in den unteren Flaschen für das Bild befindet. Und ich möchte den unteren Rand des Bildes leicht verringern. Und ich bringe es auf zwei oder m jetzt sieht es gut aus. So haben wir einige leichte Änderungen an unserem Bild vorgenommen, und wir haben auch das Labyrinth und die Absätze in den Mittelpunkt dieses speziellen Projektabschnitts gebracht . So wie jetzt, lassen Sie uns diese Tasten entfernen. Also, um diese Schaltflächen zu entfernen, Lassen Sie uns zu unserer app.js Datei gehen. Und hier in unserer Auswahlfunktion werde ich Pfeile eingeben, Doppelpunkt falsch. Ich werde es retten. Wenn wir nun die Website überprüfen und sehen, dass die Buttons nicht mehr sichtbar sind, aber wir brauchen tatsächlich Punkte, genau wie die unseres Prototyps. Also als ein erster Schritt oder ein unangemessener Schritt ist, dass ich hier Punkte nach wahr eingeben werde. Und wenn Sie es hier speichern, können Sie sehen, dass wir jetzt die grundlegenden Punkte haben, aber das sind nicht die Punkte, die wir wirklich wollen. Also diese sind ungeordnete Liste. Um also einen benutzerdefinierten Punkt zu erstellen, müssen Sie tatsächlich eine benutzerdefinierte Division erstellen. Gehen wir also zu unserer index.html Datei, genau hier, direkt unter dem Ende unseres Schiebereglers. So können Sie sehen, dass hier unsere Schieberegler Division endet. Hier werde ich ein anderes div mit einer Klasse von Schieberegler Bindestrich Punkt erstellen. Also jetzt haben wir ein leeres div erstellt. Aber ab sofort weiß unser JavaScript nicht, dass wir tatsächlich einen benutzerdefinierten Punkt benötigen, also müssen wir diese speziellen Punkte auswählen. Also werde ich den Klassennamen kopieren. Lassen Sie uns es speichern und gehen Sie zu unserer JavaScript-Datei. Und hier werde ich Anfügepunkte erstellen, gefolgt von Doppelpunkt, ein einzelnes Anführungszeichen darin erstellen. Ich werde unseren Schieberegler Bindestrich Punkt auswählen. Stellen Sie also sicher, dass Sie vorher in einen Hund legen. Und lassen Sie uns den Klassennamen platzieren, der Slider Bindestrich Punkt ist. Jetzt haben wir im Grunde erstellt oder benutzerdefinierten Punkt. Und wenn Sie es speichern, dann DFE überprüfen. Ab sofort können wir nicht viele Gene sehen. Nun müssen wir einige weitere Änderungen vornehmen, um es so zu machen, wie wir es wollen. Also Jungs, das nächste, was ich tun werde, ist anfangen. Lassen Sie uns diese spezielle Ende dire Kontrollabschnitt ändern. Also, wenn man es so aussieht wie ein Prototyp. Das erste, was ich tun will, ist, dass die Hylton all diese verschiedenen Punkte sieht. Und wie ich bereits sagte, diese Türen sind ungeordnete Liste. Also jetzt lassen Sie uns eine benutzerdefinierte Klasse für all diese verschiedenen Punkte erstellen. Und durch die Verwendung dieser benutzerdefinierten Klasse, können wir im Grunde ändern dann Diät-System genau hier. Um das zu tun, gehen wir noch einmal zu unserer JavaScript-Datei. Und hier werden wir eine andere Eigenschaft verwenden, die Türen Klasse ist. Und wir möchten eine Klasse mit dem Namen Punkte erstellen und sicherstellen, dass Sie keinen Punkt hinzufügen. Das liegt daran, dass wir kein Element auswählen, wir deklarieren einfach eine Klasse. Also tippe ich Punkte ein und lass es uns speichern. Wenn Sie auf die Website zurückkehren, wird es keine Änderung geben. Also warum nein, und sind die Chrome-Entwickler-Tools geöffnet. Um es zu öffnen, klicken Sie mit der rechten Maustaste und klicken Sie auf die Option Prüfen hier. Und wenn ich nach unten scrollen und wie ich auf Auswahloption klicke und ich kämpfe, wählen Sie unsere ungeordnete Liste hier. Hier können Sie sehen, dass die ungeordnete Liste jetzt die Punkteklasse haben wird , die wir in unserer JavaScript-Datei angegeben haben. Und hier können Sie all die verschiedenen Verbündeten sehen. Das sind also die verschiedenen Listen. Was wir also tun werden, ist, dass w0, ich möchte einen Flex auf diese speziellen Punkte anwenden , so dass all diese verschiedenen Kontrollen in einer einzigen Zeile kommen werden, genau wie wir in unserem Prototyp wollen. Und auch wir können diese Punkte deaktivieren. Also, das werden wir jetzt tun. Um das zu tun, gehen wir zurück zu unserer style.css. Also hier werde ich die Projekte auswählen. Stattdessen die Projekte haben wir den Slider Strich, Punkt. Und jetzt lassen Sie uns auch unsere benutzerdefinierte Punkteklasse auswählen. Und das erste, was ich tun will, ist, dass ich diesen besonderen schwarzen Punkt hier deaktivieren werde . Also, um das zu tun, Lassen Sie uns in Liste eingeben, Stil, Typ, und lassen Sie uns das zu keiner ändern. Wenn ich es rette. So können Sie sehen, dass die schwarzen Punkte verschwunden sind. Und jetzt machen wir es in einer einzigen Zeile. Jetzt ist es das eine oder das andere gestapelt, das sich in einer vertikalen Position befindet. Jetzt müssen wir es horizontal machen. Um dies zu tun, lassen Sie uns einfach einen Displayflex anwenden. Display Flex. Und wenn ich es hier speichere, wirst du sehen, dass im Grunde nichts passiert ist. Es ist wegen, es ist wirklich schwierig zu überschreiben oder die glatte Folie ist ein Code. Um das zu tun, müssen wir ein Ausrufezeichen eingeben und wichtige eingeben. Jetzt, wenn ich es speichere, können Sie sehen, dass wir es jetzt in einer einzigen Zeile haben. Also Leute, so können wir ein bestimmtes Element so verändern, wie Sie es wollen. In unserem Fall haben wir eine benutzerdefinierte Klasse erstellt. Sie sehen diese Folie ist Eigentum. Dann haben wir mit dieser Klasse unser Steuersystem direkt hier modifiziert. Nun lassen Sie uns das gesamte System ändern. Also, um es in die Mitte unseres Abschnitts zu schaffen, werde ich Rechtfertigungs-Content-Center anwenden. Und jetzt haben wir einen Abkömmling. Lassen Sie uns nun weitere Stile bestimmte Steuerungssystem. Also Leute, wenn wir unseren Prototyp hier überprüfen, können Sie sehen, dass dieser spezielle Controller oder dieser Schieberegler im Grunde in Punkten angezeigt wird. Aber derzeit in unserer Seite haben wir Zahl in diesen verschiedenen Punkten. Also, wenn ich mit der rechten Maustaste und öffne unsere Chrome-Entwicklertools. Und wenn wir unsere Punkte von hier auswählen, können Sie sehen, dass dies die ungeordnete Liste ist. Die ungeordnete Liste besteht also aus all den verschiedenen Folien. Und wenn ich die ungeordnete Liste öffne, können Sie die vier verschiedenen Verbündeten sehen. Also, wenn ich durch diese Verbündeten im oberen Teil wieder nach unten gehe, siehe die Auswahl. Also zeigen diese vier Verbündeten die vier verschiedenen Folien an, die wir haben. Und jetzt, wenn ich einen dieser Verbündeten öffne, kann man einen Knopf sehen und der Knopf hat im Grunde einen Wert von eins. Also, jetzt muss ich diesen bestimmten Wert entfernen. Also lasst uns das machen. Also gehen wir zurück zu unserer style.css. Und hier werde ich diesen speziellen Code von hier kopieren. Jetzt haben wir im Grunde den Wrapper ausgewählt, dass es Schieberegler Bindestrich Punkt ist. Dieser Wrapper besteht also aus all den verschiedenen Folien. Also werde ich es Taste aller verschiedenen Folien auswählen. Und ich werde die Schriftgröße auf 0 ändern. Also, wenn ich die Schriftgröße auf 0 ändere, die Elemente, wird diese Platte keine sein. Die Elemente sind nicht sichtbar. Also werde ich die Schriftgröße auf 0 ändern. Wenn ich es jetzt speichere, kannst du das Element nicht sehen. Lassen Sie mich etwas hineinzoomen. Wir könnten tatsächlich eine kleine Markierung des Elements sehen, aber sie sind immer noch hier drüben vorhanden. Nun lassen Sie uns diese verschiedenen Schaltflächen weiter ändern. Das erste, was ich tun werde, ist, dass ich unseren Punkten etwas Breite und Höhe zur Verfügung stellen werde . Also werde ich eine Breite von fast acht Pixeln und eine Höhe von 50 Pixeln bereitstellen. Lass es uns retten. Und jetzt sind diese leicht sichtbar. Und das nächste, was ich tun werde, ist, dass ich kein bisschen Raum zwischen diesen verschiedenen Punkten zur Verfügung stellen werde. Also lassen Sie uns einen Rand, rechts, von fünf Pixeln. Lass es uns retten. Jetzt haben sie Kursoption Nummer des Leerraums zwischen ihnen. Lassen Sie uns nun deren Rahmen und Umrisse entfernen. Also werde ich eine Grenze von keiner schaffen. Und auch unsere Männerlinie. Lass es uns retten. Und jetzt sind sie einfache Elemente. Also lasst uns ihren Hintergrund ändern, ihn färben, also zurück. Und ich werde den Hex-Code einfügen. Speichern wir es und lassen Sie uns überprüfen. Ja, die Hintergrundfarbe wurde angewendet. Und ich werde einen Grenzradius zur Verfügung stellen, so dass diese Menschen sehen, genau wie der unseres Prototyps. Lassen Sie uns also einen Rahmenradius von 50 Pixeln bereitstellen. Und jetzt haben sie ein gekrümmtes Aussehen. Und auch werde ich den Cursor ändern, um ihn Cursorzeiger zu zeigen. Wenn wir also unseren Cursor über diese unerlaubter Handlung bringen, änderten sie sich auf den Punkt, der aussieht, und diese Punkte funktionierten tatsächlich perfekt. Jetzt müssen wir einige leichte Änderungen an diesen Punkten tun, so dass R, diese Anzeige eine grüne Farbe in der aktuellen Folie es sitzt. Jetzt machen wir das. Also das, was wir jetzt tun mussten, ist, dass ich die aktive Folie differenzieren muss. Hier können Sie sehen, dass das Licht eine andere Farbe als ein breiteres Bit hat. Also richtig, Nein, Lassen Sie uns auf unsere Website gehen und ich werde mit der rechten Maustaste klicken und klicken Sie auf Inspect Option genau hier. Wenn ich jetzt nach unten scrolle und wenn wir Punkte hier ausgewählt haben , werde ich hier die gesamte Liste öffnen. Und eine Sache, die euch auffällt, ist diese spezielle, glatte aktive Klasse. Die ausgewählte aktive Klasse ist nur am 1. Termin vorhanden. Jetzt möchte ich die zweite lebendig auswählen. Und Sie können sehen, dass das ist glatte aktive Klasse hat sich in die zweite Enlight bewegt. Jetzt werde ich es dritte und Licht auswählen, und es hat sich auf die dritte Liste bewegt. Also dieser spezielle glatte Aktivist dynamisch auf den aktuellen Punkt oder die aktuelle Liste angewendet , die wir auswählen. So verwendet bestimmte slick aktive Klasse. Wir können unseren aktuellen Punkt im Grunde ändern. Also lasst uns das jetzt tun. Lassen Sie mich das Entwickler-Tool schließen und gehen Sie zurück zu unserer style.css. Hier werde ich die Projekte auswählen. In den Projekten haben wir die Punkte. Und jetzt werde ich den Verbündeten auswählen. Und sie leben, dass ich diese auswählen möchte. So das aktive und Licht, das glatte Bindestrich aktiv ist. Und was ich ändern möchte, ist der Knopf. Und die Sache, die ich ändern wollte, dass ich den Hintergrund ändern werde, war 24. Und das Muster, das ich anwenden möchte, ist die Primärfarbe. Speichern wir es und schauen wir es uns an. Wie Sie jetzt sehen können, haben wir eine grüne Farbe für die aktuelle oder die aktive Folie. Lassen Sie mich zum ersten übergehen. Ja, der Coloristen steht vollkommen in Ordnung. Und ich möchte auch, dass die Breite für den aktiven Punkt erhöht wird. Also möchte ich die Breite auf fast 16 Pixel erhöhen. Lass es uns retten. Ja, der aktuelle Punkt hat ein höheres Wort und die Farbe wird ebenfalls geändert. Lassen Sie mich also schnell die Margenuntergrenze unserer Projekte erhöhen. Also werde ich einfach den Projektabschnitt und den darin enthaltenen Container auswählen. Und ich werde einen Rand unten von 100 Pixeln zur Verfügung stellen. Lass es uns retten. So, jetzt haben wir Rezeption Platzierung der Boden und Sie können die verschiedenen Türen klar zu sehen. unserem Partnertyp haben wir also die Punkte. Und auch für den aktiven Punkt haben wir ein Unterscheidungsmerkmal, das eine andere Farbe und einen breiteren Schuss hat. Alles, was wir hier getan haben, ist, dass wir grundsätzlich die aktuelle oder die aktive Liste ausgewählt haben. Du hast einen Rutsch-Strick aktiven Kurs. Und wir verändern einfach die Eigenschaften dieses bestimmten Lebendigen, das derzeit aktiv ist. Also, das war's Jungs. Wir haben den Projektabschnitt komplett aufgebaut. Das heißt, wir haben bald ein Ende und voll funktionsfähig Slide es und ihr könnt diese Bilder leicht sehen. Wenn Sie also zur Indexdatei gehen, können wir einfach das Bild hier ändern. Und die andere werde ich direkt, um es in diesem speziellen schieben es als auch verkaufen. So können wir nun auch auf diese verschiedenen Schaltflächen klicken, um durch die Folie zu navigieren. Und wir haben auch unabhängig von Absatz für jede Folie es als auch. Also, das war's Jungs. Und ich hoffe wirklich, dass ihr das grundlegende Konzept der Folie verstanden habt und wie wir auf eine andere Eigenschaften einer Bibliothek zugreifen können und vieles mehr. Also danke fürs Ansehen und ich sehe euch im nächsten Video. 9. Der Blog erstellen: Hallo Leute, willkommen zurück zum Video. Und in diesem speziellen Video werden wir den MyBlock Abschnitt unserer Website erstellen. Und Eve, wir analysieren diesen speziellen Abschnitt. Sie können sehen, dass wir eine meine Blog-Überschrift und einen Absatz haben. Und in der unteren Leiste haben wir drei verschiedene Karten. Und in jeder Wache haben wir ein paar Informationen, wie ein Bild, eine Überschrift. Wir haben das Datum, dass der Hauptinhalt und lesen Sie mehr Text. Also kondensieren diese anderen verschiedenen innerhalb der Karte. Also im Grunde haben wir die Überschrift Teil als Alaska zu drei verschiedenen Göttern. Und jetzt lass uns unsere Indexdatei machen und anfangen, den meinen Blog-Abschnitt zu bauen. Also in der Indexdatei, vor allem, lassen Sie mich kopieren diesen speziellen Kommentar und lassen Sie uns es direkt unter dem Schließen des Abschnitts einfügen und lassen Sie uns umbenennen es schützt die Abschnittsenden. Und wieder werde ich einen weiteren Kommentar öffnen, der anzeigt, dass der MyBlock Abschnitt gestartet wurde. Und hier, im Grunde werde ich hineinzoomen und lassen Sie uns einen Abschnitt mit einer Klasse meines Blocks erstellen . Und in diesem speziellen Abschnitt, Lassen Sie uns eine andere Division mit der Klasse des Containers erstellen. Und in diesem speziellen Container haben wir im Grunde unsere Überschrift und den Absatz. Also werde ich ein H1 erstellen und ich möchte es uns, meinem Blog, geben. Und wie Sie sehen werden, dass das Blogwort in einer anderen Farbe ist. Also Fenster und schließen Sie das in einer Spanne. Und fügen wir es in die Spannweite ein. Alles klar, und nachdem sie annehmen, wir haben, wo der Absatz, also lassen Sie uns in irgendeinem zufälligen Text darin setzen. Alles klar, jetzt haben wir das H bald als elastischer Absatz erstellt. Und jetzt ist es Zeit für uns, zum Kartenabschnitt zu kommen. Also im Grunde brauchen wir einen Karten-Wrapper. In der Kartenhülle befinden sich also alle unsere Karten. Also zuerst, rechts, unter dem Absatz-Tag, erstelle ich kein weiteres div mit einer Klasse von Kartenstrich für APA. Also in diesem speziellen Kartenwickler, haben wir unsere Karten. Also möchte ich unseren ersten Gott erschaffen. Also, lassen Sie uns ein div mit einer Klasse von Karte erstellen und eine bestimmte Karte innen. Zuallererst haben wir unser Image. Also für das Bild möchte ich eine andere Division mit einer Klasse von Image-Dash-Wrapper erstellen. Also in seinem speziellen Image-Wrapper haben wir unser Bild bekommen. Also werde ich ein Bild-Tag öffnen und in der Quelle möchte ich einen Punktschrägstrich eingeben. Und lasst uns schon Majors machen. Und hier habe ich Artikel pH ein Foto gefangen und ich möchte das auswählen. Und das ist für den Bildbereich hier. Gehen wir nun zum Inhaltsbereich. Also für den Inhalt werde ich hier eine weitere Division mit einer Klasse von Kartenstrichinhalten erstellen . Und in diesem speziellen Gott Strich Koordinate Abteilung B wird alle verschiedenen Texte Materialien haben. Also zuerst haben wir unser H1. Also werde ich hier ein Elektron erschaffen. Und hier. Ich werde diesen speziellen Schlag von hier kopieren. Und ich werde es hier drüben einfügen. Lass es uns retten. Und unter dem H1 haben wir das Datum gegen C. Also möchte ich enden leuchtet ein Datum in einer Spanne. Und lassen Sie mich das Datum von hier kopieren. Und kleben wir es hier drüben ein. Und danach haben wir tief genug. Lassen Sie mich also ein p-Tag für einen Fülltext erstellen. Und schließlich haben wir auch einen Lese mehr Text. Also diese bestimmte Texas Ecke, ich habe einen Aufruf zum Handeln, also werde ich das in einem Anker-Tag einschließen und ich möchte es als gelesen benennen. Speichern wir es, und lassen Sie uns unsere Website überprüfen. Also in der unteren Leiste haben wir die Überschrift, den Absatz, den Gott Bild und die verschiedenen Materialien. Also lasst uns jetzt all diese stylen. Also Leute, wenn wir unseren Prototyp nehmen, können Sie sehen, dass wir drei verschiedene Karten gelernt haben. Und um diese spezielle Karte zu duplizieren, zwei weitere Zeit, gehen wir zu unserer index.html. Und wie Sie wissen, besteht diese besondere N dy Division aus einer einzigen Karte. Also, während Sie Alt und Shift gedrückt halten, werde ich zwei weitere Male nach unten drücken , um insgesamt drei verschiedene Karten zu erstellen. Lass es uns retten. Und wenn wir die Website überprüfen, können Sie sehen, dass wir jetzt insgesamt drei verschiedene Karten haben. Im Prototyp. Sie können sehen, dass die, mein Blog-Abschnitt ist mit einem dunklen Hintergrund. Lassen Sie uns also auch im Hintergrund sagen. Und hier können Sie sehen, dass am Ende schrecklich, mein Blog-Abschnitt befindet sich in diesem speziellen Abschnitt mit einer Klasse von meinem Blog. Also lasst uns das kopieren. Gehen wir zu unserer style.css hier. Ich will es. Ender Punkt meinen Blog und ändern Sie den Hintergrund zu dunkel. Lassen Sie uns es speichern und sehen, ob es Eclipse IDE ist. Sie können sehen, dass der Hintergrund dunkel geworden ist. Und jetzt lassen Sie uns im Grunde unsere Überschrift und den Absatz stylen. Also hat es das vermasselt. Gehen wir zu unserer Indexdatei. Und ich möchte unserem H1 eine Klasse geben. Also werde ich es nennen Us Abschnitt Bindestrich Überschrift, speichern Sie es, und kopieren Sie dann auch den Klassennamen und hier, aber ich möchte Inter Punkt MyBlock Tür Abschnitt Überschrift. Und ich werde die Farbe zu rein ändern. Wenn Sie also den Kopf erneut überprüfen, sehen Sie, dass die weiße Farbe nicht nur auf die angrenzende angewendet wurde, sondern auch auf unseren Absatz und auch die H-Zone und der Absatz wurde automatisch an der Mitte von ausgerichtet den Abschnitt. Könnt ihr raten, warum das passiert ist? Also der Grund, warum dies passiert ist, ist, dass Dhabi haben k1, der Klassenname Abschnitt, Niederländische Überschrift tun unsere Gegend, wie in meinem Blog Abschnitt gezeigt. Und wenn Sie sich erinnern, haben wir unserem s1 in diesem Fähigkeitsabschnitt den gleichen Namen gegeben , wie Sie sehen können. Deshalb ist diese Abschnitts-Strichüberschrift tatsächlich zu einer Dienstprogrammklasse geworden. Also, wenn wir die gleichen Namen auf unsere meine Blog-Abschnitt anwenden, die Eigenschaften, die sie zu diesem bestimmten Absatz aktiviert werden, den ich geschrieben. Also wurde unsere Arbeit tatsächlich ein bisschen einfacher. Nun lassen Sie uns im Grunde die Farbe dieses speziellen Blogs ändern. Wie Sie wissen, haben Sie bereits eine Spannweite. Also lassen Sie uns wählen, dann grausame Sachen von hier. Fügen Sie es ein, wählen Sie die Spanne und ändern Sie den Hintergrund. Entschuldigung, ändern Sie die Farbe in Primär. Lass es uns retten. Und da gehst du. Wir haben die ETC1 und den Absatz alle gesetzt. Lasst uns nun diese Karten in einer einzigen Zeile machen, genau wie in unserem Prototyp. So wie Sie wissen, können wir CSS-Gitter verwenden, um dieses Aussehen zu erreichen. Also lasst uns zu unserer style.css gehen. Und genau hier werde ich den Karten-Wrapper auswählen. So dot mein Blog Raum Punkt Karte Wrapper. Lassen Sie uns das auswählen und ich werde ein Anzeigeraster anwenden. Und jetzt definieren wir das Raster wie gute Strichvorlage, Nash Spalten. Also lassen Sie uns die Wiederholfunktion verwenden. Ich möchte dies dreimal wiederholen und Parameter ist wunderbar. Also, wenn ich es speichere, können Sie sehen, dass wir jetzt alle diese drei Karten in einer einzigen Zeile haben. Und wie Sie sehen können, werden alle diese Wachen zusammen gesammelt. Wir brauchen einen Raum zwischen ihnen. Also gehen wir zurück. Und genau hier werde ich Strichspalte Gap erwähnen. Spalte Strich Lücke von 30 Satz. Lass es uns retten. Und jetzt haben wir einen drei Lemma Raum zwischen all diesen verschiedenen Karten. Und wenn wir das Protokoll überprüfen, können wir sehen, dass der kondensierte Abschnitt, der Auto-Armaturenbrett-Kondom Abschnitt ist im Grunde eine weiße Tasche unten. Und jetzt lasst uns das machen. Also hier werde ich diesen Code von hier kopieren. Und jetzt lassen Sie uns auch die Karte Kanban-Karte Dash kondensiert. Und hier lassen Sie uns den Hintergrund zu rein ändern. Speichern Sie es. Wie Sie sehen können, dass wir hier eine kleine Teilung haben, ist es weil wir gerade im Hintergrund auf unsere Auto Armaturenbrett verurteilt angewendet, aber wir haben die Tasche bis zum Ende direkt Gott angewendet, also ist das meine schlechte. Also komm zurück und lass mich den ganzen Kern von hier kopieren. Lassen Sie es uns einfügen. Und lassen Sie uns auch Ziel dann direkt Karte und ändern Sie den Hintergrund rein. Und wenn wir es speichern, können Sie sehen, dass jetzt für den Hintergrund erstreckt sich den ganzen Weg bis zum Bild und bis zum unteren Rand der Karte. Also lassen Sie uns jetzt ein bisschen Polsterung zur Verfügung stellen. Wie Sie sehen können, ist der gesamte Text innen überladen. So, jetzt haben wir bereits das Auto Armaturenbrett verurteilt ausgewählt. Also lassen Sie mich eine Polsterung von 20 aus diesem Diagramm wird sowohl oben als auch unten und links und rechts angewendet werden. Also lasst es uns retten. Und wie Sie sehen können, haben wir jetzt genügend Abstand innerhalb der Karte als auch. Also Jungs, vor allem, lassen Sie uns ein wenig Marge unten zu diesem speziellen Schlag hier bieten . Also gehen wir zurück zu unserer style.css und Admins zoomen ein wenig. Und genau hier drüben, werde ich unsere meine, mein Blog-Bereich auswählen. Und innerhalb meines Buchabschnitts müssen wir Kartenstrichinhalte lassen und im Inneren des Auto-Armaturenbretts Condon haben wir das H1-Tag. Also werde ich das auswählen und ich werde einen Margenunterschied von einem Rem liefern . Lass es uns retten. Und wie Sie sehen können, haben wir einen unteren Rand des Staunens gehört. Und als nächstes können wir im Grunde diesen bestimmten Absatz stylen. Wieder werde ich diesen speziellen Code von hier kopieren. Lassen Sie es uns einfügen. Und anstelle von H1, lassen Sie uns Ziel Absatz. Und ich werde einen Rand oben von einem Rem und einen Rand unten von einem Rem als auch liefern. So haben wir jetzt die ausreichende Menge an Platz oben auf dem Absatz und im unteren Teil des Absatzes. Und nun lasst uns dieses besondere Anker-Tag binden. Also wieder, ich werde diesen speziellen Code von hier kopieren. Und lasst uns das Anker-Tag anvisieren. Und ich werde die Farbe in unsere dunkle Farbe ändern. Und lassen Sie uns auch die Textdekoration entfernen. Textdekoration keine. Und das sieht ziemlich gut aus. Also jetzt sind wir im Grunde mit unserer Wachabteilung fertig. Wenn Sie also bemerken, können Sie die anderen eine Menge Lücke in diesem speziellen Bereich sehen. Und es ist, weil wir viel Marge unten zu unserem Absatz haben. Also genau hier werde ich den Abschnitt Mein Blog und mein Buch auswählen. Wir haben unser H1. Das H1 hat also eine Klasse von Abschnittsstrich Überschrift. Also lassen Sie mich das kopieren. Und hier lassen Sie uns Ziele Abschnitt tut Schattierung. Und nach diesem Abschnitt Strich Überschrift, wir haben die Absätze. Also lassen Sie uns einfach plus verwenden, plus b. Und was auch immer Code, den ich in diesem speziellen Block schreiben werde, wird jeden Code darin überschreiben, einen Abschnitt Bindestrich Überschrift. Also werde ich einen Margenunterschied von 30. Wenn ich es rette. Wie Sie jetzt sehen können, haben wir ausreichend und Moldawien Marge unten zwei sind sehr Absatz und es gab keine bieten auch ein bisschen Polsterung an der Unterseite dieses besonderen mein Blog-Abschnitt. Lassen Sie uns den ganzen Weg nach oben scrollen. Hier können Sie den Abschnitt Mein Blog sehen. Hier werde ich eine Polsterung unten von 100 Pixeln zur Verfügung stellen. Also jetzt haben wir Kurs Einreichung Nummer 2 Platz im unteren Teil unseres Blog-Abschnitts. Und wenn Sie nach oben scrollen, können Sie sehen, dass die Überschrift, mein Blog ist wirklich nah an unserem Projektabschnitt. Also lassen Sie uns ein wenig Polsterung oben geben. Also hier werde ich im Grunde den meinen Blog-Abschnitt Bindestrich schlagen kopieren , weil dieser Abschnitt jetzt Schattierung eine Klasse für Ihr H1 ist. Also hier werde ich eine Polsterung oben aus einem Rem zur Verfügung stellen. Und wenn wir es sparen, und jetzt haben wir unsere Lösung Menge an Platz und lassen Sie uns mit Tourismus sehen. Ja, ja. Sieht jetzt ziemlich gut aus. Also, das war's, Leute. Wir sind fertig mit meinem Blog-Abschnitt und es war ziemlich einfach, weil wir bereits das Wissen über Gitter hatten. Und wir haben den Absatz und die verschiedenen Karten getroffen, und sie können diese speziellen Bilder leicht aus der Indexdatei ändern. Und wir haben auch eine Lese mehr Funktion, die für jetzt nimmt uns nirgendwo. Und das war's. Und ich hoffe wirklich, dass ihr Jungs und zerstören dieses spezielle Video als auch. Und danke fürs Ansehen, und ich sehe euch im nächsten Video. 10. Codieren des Kontaktbereichs: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video werden wir den Kontaktbereich unserer Website aufbauen. Und wenn wir vor Dissektion analysieren, können Sie sehen, dass wir hier eine Überschrift haben. Und darunter haben wir zwei verschiedene Götter. Und in jedem Gott haben wir alle Mittel, eine Überschrift und einen Informationstext. Lassen Sie uns zunächst den ersten Teil hier bauen. Gehen wir also zu unserer Indexdatei. Und das erste, was ich tun werde, ist, dass ich diesen Coleman von hier kopieren möchte . Und ich werde es hier am Ende eines Abschnitts einfügen, und ich werde es nennen, wie mein Blog-Abschnitt endet. Wieder hier werde ich einen weiteren Kommentar öffnen und ich werde es nennen, wie der Kontaktabschnitt beginnt. Und hier werde ich einen Abschnitt mit einer Klasse von Verhalten eröffnen. Und lasst uns zum Abschnitt gehen. Und davor, lassen Sie mich ein wenig hineinzoomen. Und hier werde ich eine Division mit einer Klasse von Containern erstellen. Und in diesem Container haben wir zuerst unsere Überschrift. Das ist Verhalten mich und das Ich Wort ist in einer anderen Farbe. Also lassen Sie es mich kopieren. Also hier in einem geöffneten und H1-Tag und eingefügt sah Gott Dao das Verhalten. Und in der Spanne haben wir das Wort. Also, das ist es für Dürre, der Überschrift Teil. Und jetzt gehen wir auf den Kartenabschnitt. Also begann im Grunde eine Karte Wrapper erstellen. Und in der Kartenhülse können wir diese beiden Karten im Grunde aufbewahren. Also werde ich ein anderes div mit einer Klasse von Auto-Armaturenbrett erstellen, arpa. Und in diesem speziellen Kartenhüllen haben wir im Grunde alle unsere Karten. Also werde ich eine weitere Division mit einer Klasse Gottes schaffen. Also im Inneren des Gottes haben wir zuerst das Bild. Also werde ich ein Bild-Tag öffnen und innerhalb der Quelle werde ich einen Punktschrägstrich machen. Und gehen wir zum Bilderordner. Und suchen wir nach iPhone. Und das ist das Bild. Also im Grunde unter dem Bild haben wir keine Überschrift. Also werde ich das kalte Fleisch x in ein H2 einschließen. Öffnen wir also ein H2-Tag und lassen Sie mich den Text hier einfügen. Und darunter haben wir eine Anzahl Informationen. Also lassen Sie mich das kopieren und ich werde es in und H4 einfügen. Alles klar, jetzt haben wir das, der gesamte Kartenabschnitt fertig. Und wie Sie sehen können, haben wir zwei verschiedene Karten. Und ab sofort haben wir nur ein einziges Auto. Also werde ich diese spezielle Division hier kopieren und sie noch einmal einfügen. Und jetzt haben wir 12 verschiedene Götter. Also lassen Sie es uns speichern und unsere Website überprüfen. Und wenn Sie den ganzen Weg nach unten scrollen, jetzt haben wir zwei verschiedene Karten, aber ihre jeweiligen zusätzlichen Informationen. Also, genau hier werde ich das Bild des zweiten Gottes zu mir ändern. Und lassen Sie uns auch diese speziellen Informationen von hier kopieren und direkt hier einfügen. Speichern wir es und überprüfen Sie unsere Website noch einmal. In Ordnung, jetzt kommen wir auf die weitere Vereinfachung all dieser verschiedenen Karten. Und lassen Sie uns auch das Layout anordnen. Also Jungs, als ersten Schritt, lasst uns unser H1 hier wählen. Gehen wir also zurück zu unserer Indexdatei und schreiben in unser H1-Tag. Ich möchte eine Klasse von Abschnitt Bindestrich Überschrift geben. Und lasst es uns retten. Und wenn Sie die Website überprüfen, können sie sehen, dass wir mich leiten können, wo sie tatsächlich fehlt. Aber es fehlt tatsächlich. Es ist immer noch hier. Also, wenn du es im vorherigen Video nicht weißt, habe ich euch gesagt, dass die Schattierung eine Utility-Klasse ist. Und standardmäßig, Dienstprogrammklassen, die eine Farbe eines reinen oder weißen haben. Also müssen wir diese Farbe ändern. Also gibt es zu index.html gehen. Und hier werde ich P den Abschnitt Bindestrich Überschrift nennen, Klassenname. Und jetzt bin ich in style.css. Also lassen Sie uns auch den Abschnitt Verhalten wählen, Asset-Abschnitt, Strich Überschrift Glas. Und ich werde die Farbe in dunkel ändern. Lass es uns retten. Und lasst uns auch die Farbe unseres, MEIN Wortes ändern , das ist diese Pfanne. Und ändern Sie seine Farbe in die Primärfarbe. Also lasst es uns retten. Und wenn wir zurück zum Upsell gehen, können Sie sehen, dass die Überschrift jetzt perfekt aussieht. Also, jetzt lassen Sie uns im Grunde bekommen, tun Sie nicht unsere Karten. Also das erste, was ich tun werde, ist, dass ich Display-Gitter zur Verfügung stellen werde. So wie Sie sehen können, dass Gott grundsätzlich horizontal ausgerichtet ist. Also lassen Sie uns nutzen für Display Raster. Und hier werde ich den Abschnitt Verhalten auswählen. Innerhalb der Kegeldissektion. Wir sind zum Auto-Armaturenbrett-Wrapper. Und hier werde ich unser Display-Raster zur Verfügung stellen. Und jetzt definieren wir das Raster, das ist Strichvorlage, Strichspalten. Also hier werde ich die Wiederholungsfunktion verwenden. Und ich möchte, dass das zwei Mal wiederholt wird. Und der zweite Parameter ist wunderbar. Und wenn Sie es speichern, und wenn wir zurück zur Website gehen, können Sie sehen, dass diese beiden in einer horizontalen Weise ausgerichtet sind. Und jetzt lassen Sie uns auf Türkarte und ändern Sie die Größe unserer Symbole. Und lassen Sie uns auch unsere Textinhalte in der Karte stylen. Also Jungs, das erste, was ich tun werde, ist, dass wir die Größe dieser Symbole reduzieren lassen . Also gehen wir zurück zu unserer style.css. Und wenn Sie die Bilder im Grunde in der Auto-Abteilung, die im Grunde innerhalb der Karte Armaturenbrett Wrap-up befindet sehen können. Also, wenn unsere Kopays bestimmten Code von hier, und lassen Sie es uns einfügen und lassen Sie uns die Karte und die unmittelbare darin auswählen. Und ich werde ihm einen hohen TOEFL bieten, fast 100 Pixel. Und lassen Sie uns auch eine Marge bereitstellen. Unten 04 die meisten ein Zimmer. Und lasst es uns retten. Und wenn jede aktive Website, und Sie können sehen, dass die Größe im Grunde befürworten und der Text ist nicht im Grunde in der Mitte. Wie Sie sehen können, ist es verlegt. Also, um die Texturen und Dulles zu bringen, gehen Sie zurück zur style.css. Und hier werde ich die Karte auswählen. Also innerhalb der Karte haben wir den Text und wir werden Text ausrichten Sie ihn an den Absender. Und jetzt haben wir den gesamten Inhalt in die Mitte des Bildschirms gegangen. Und auch haben wir den Text auch in der Mitte des Autos ausgerichtet. Und wie Sie sehen können, haben wir nicht viel Platz unter unserer H-Zone. Diese Karten sind zu nah an unserer int1, also brauchen wir ein bisschen Polsterung unten und genau hier in der Abschnittsüberschrift, werde ich eine Polsterung mehr thermo in erster Linie anbieten, um rem, speichern Sie es. Und jetzt haben wir genügend Platz. Und wie Sie sehen können, haben wir nicht viel Platz für diesen speziellen Kegelrückenteil. Also lassen Sie uns auch ein wenig Polsterung zur Verfügung stellen. Also hier werde ich das Verhalten als letzter den Container auswählen. Und lassen Sie uns eine Polsterung Boden von fast 100 Pixel. Lass es mich retten. Und die lassen mich es ausrichten. Und jetzt natürlich auch Optionen basierend auf dem Boden. Also, jetzt haben wir den Ende schrecklichen ersten Teil der Kontakt-mich Abschnitt. Das ist der Gott sowie die Information an Ort und Stelle. Und jetzt ist es Zeit für uns, den Formularabschnitt oder den Eingabe-Abschnitt zu erstellen. Und jetzt kommen wir dazu. Also Jungs, im Prototyp können Sie sehen, dass diese Enddissektion als Eingabesektion bekannt ist. Also in der ersten Zeile haben wir zwei verschiedene Eingänge. Und die zweite Zeile, Namen Gott und andere Input. Und in der dritten Zeile haben wir einen Textbereich gefolgt von einem Sende-Button. Diese Enddissektion ist also unser Eingangsbereich. Also jetzt gehen wir zu unserer Indexdatei und entwerfen die Struktur des Eingabeabschnitts. Also genau hier am Abschlussetikett unseres Kartenwicklers , der hier drüben ist. Ich werde ein Formular erstellen. Und innerhalb des Formulars werde ich eine Division mit einer Klasse von Eingabe-Bindestrich Wrap erstellen. Also in diesem Eingang Armaturenbrett-Division wird mit den ersten beiden Eingängen, Solarmedien, der erste Eingang direkt hier. Lassen Sie mich das Zeug löschen. Also haben wir für den Tipptext und wir brauchen auch einen Platzhalter. Und das wird dein Name sein. Ich kopiere es und füge es hier ein. Also lassen Sie mich diesen speziellen Code kopieren. Und ich werde es hier einfügen. Und zweitens haben wir die E-Mail-Eingabe bekommen. Lassen Sie mich also den Platzhaltertext von hier kopieren. Und genau hier werde ich unseren Platzhalter durch Ihre E-Mail ersetzen, und ich werde den Typ auch in E-Mail ändern. Das ist also unsere erste in Bootstrap. Jetzt haben wir diese beiden Eingaben und ich möchte Daten in eine andere Abteilung einschließen. Also I2 und ich wollen unsere zweite Division mit einer Klasse von Eingabe-Wrap Dash T2 erstellen . Und in dieser speziellen Division werde ich einen weiteren Eingang haben , der den Typ als Text und den Platzhalter als Subjekt haben wird. Und schließlich haben wir auch x Daten direkt hier. Und lassen Sie mich den Platzhalter kopieren. Und hier werde ich einen Textbereich öffnen. Und ich werde Ihnen einen Platzhalter Ihrer Nachricht zur Verfügung stellen. Und schließlich haben wir auch einen Knopf. Und für die Schaltfläche werde ich eine weitere Division direkt unter dem schließenden Direktor unseres Eingangs erstellen , Strich rad zwei. Und in dieser speziellen Abteilung werden wir unseren Knopf haben. Und der Knopf heißt Cent. Lassen Sie mich es kopieren und fügen Sie es ein. Also haben wir bereits eine Utility-Klasse für jetzt Schaltfläche. Also lassen Sie uns ein Glas-Tag öffnen und btn und btn primär. Also lassen Sie es uns speichern und schauen wir uns unsere Website an. Wie Sie jetzt sehen können, haben wir alle definierten Elemente wie den yourname in beiden URI Million, aber der Nachrichtenabschnitt, dieses Objekt hat die größte Senden Schaltfläche. Jetzt ist es Zeit ersten Stil, der gesamte Eingabe-Abschnitt. Als ersten Schritt gehen wir zurück zu unserer Indexdatei. Und genau hier werde ich P die Eingabe nennen, den Azure-Grab-Klassennamen, und lassen Sie uns zu unserem CSS gehen. Und hier werde ich die Verhaltensklasse auswählen, sowie wie der Eingabe-Dash Rapper. Und ich werde ein Anzeigeraster zur Verfügung stellen. Und die Rastervorlage ist Spalte. Und ich will, dass es vier Mal wiederholt wird, und du speicherst es. Und wenn Sie die Website überprüfen und Sie sehen können, dass der Name und Ihre E-Mail in einer einzigen Zeile ist und Sie brauchen auch ein wenig Platz zwischen ihnen. Um dies zu tun, lassen Sie uns eine Rasterlücke von fast zu Raum schaffen. Lass es uns retten. Und jetzt haben wir ziemlich viel Platz zwischen ihnen und auch Platz in der Unterseite benötigt werden, Bartlesville. Also hier werde ich eine Marge zur Verfügung stellen. Unten auf einer Trommel. Lass es uns retten. Jetzt haben wir Einreichung, aber ISPs im unteren Teil als auch. Und wie Sie sehen können, dass der Betreff und die Nachrichten in einer einzigen Zeile, aber im Prototyp können wir sehen, dass diese in zwei verschiedenen Zeilen sind. Also, um das zu tun, was ich tun werde, ist, dass ich werde die zweite Eingabe VR-App wählen, die im Grunde die zweite in Bhutan umschließt, die nächste Idee. Und auch hier werde ich den Abschnitt Verhalten sowie in Burdash R2 auswählen. Und ich werde eine Display-Flex zur Verfügung stellen. Also, wenn ich es jetzt speichere, können Sie sehen, dass diese beiden in der gleichen Zeile sind. Jetzt muss ich die Flexrichtung in Spalte ändern. Also Flex Richtung Spalte. Und jetzt haben wir diese beiden in zwei getrennten Zeilen. Und jetzt brauchen wir die entferntesten ILDs in Boots. Wenn wir also den Rahmen überprüfen, können Sie sehen, dass die Eingabe im Grunde viel Polsterung im Inneren hat. Aber unsere, jeder hat nicht das Gleiche. Die Platzhalter liegen wirklich nahe am Rand der Eingabe. Und jetzt lasst uns das reparieren. Um das zu tun, gehen wir zurück zu unserer style.css und weiß hier, ich werde unseren Mais zurück und innerhalb des Leiters auswählen und die gesamten Eingabetags auswählen. Und ich werde eine Polsterung von fast einem Traum für oben, unten und links und rechts zur Verfügung stellen. Und jetzt haben wir eine ausreichende Anzahl von Polsterungen oben, unten und links, rechts von unserer Eingabe. Und hier können Sie sehen, dass das Betreff Boot und die Nachrichteneingabe oder der Nachrichtentext UDL wirklich nahe beieinander. Und jetzt ist es ein bisschen Marge unten zu unserem Thema oder wirklich bieten Marge oben zwei sind MRSA als gut. Also hier werde ich mit diesem speziellen Akkord fertig werden. Und ich möchte die Eingabe auswählen. Und lassen Sie uns einen Rand unten von fast einem Raum bieten. Und jetzt haben wir natürlich, welche Zahlen Stück. Und Sie können auch sehen, dass wor Nachricht Ort Ordnung ist wirklich nah an der Grenze. Und selbst wenn ich etwas tippe, das wirklich nahe am Rand ist, brauchen wir auch ein bisschen Polsterung innerhalb des Textbereichs. Also hier wieder, ich werde diesen speziellen Code kopieren. Und lassen Sie uns unsere ADR anvisieren und bieten eine Polsterung von fast einer Felge. Und es bietet auch einen Rand unten von einem oder vielleicht zwei von ihnen, so dass die Textdaten und die Batterien gut getrennt sind. Und jetzt sieht es perfekt aus. Also müssen wir auch ein wenig Rand unten, um diese Karten bieten. Wie Sie sehen können, der Kabeljau und die in buddhistischen wirklich nah beieinander oder Freisetzung. Wir können ein bisschen Marge dotiert mit diesem speziellen Gesetz in Bootstrap möglich. Also, das werde ich tun, ist, dass ich diesen speziellen Code von hier kopieren werde. Und lassen Sie es hier einfügen und die Eingabe auswählen und einen Rand bereitstellen. Oben von ihnen. Oder vielleicht sollten drei von ihnen gut aussehen. Ja, jetzt haben wir Kern gute Trennung von dem, was die Karten als auch. Und jetzt über invertieren Abschnitt sieht vordefinierte deaktivieren Sie die unseres Prototyps. Und jetzt lassen Sie uns eine feinere Textur machen, damit es noch besser aussieht. Und wenn Sie bemerken, können Sie sehen, dass das Muster im Grunde falsch platziert ist. Und im Prototyp haben wir den Knopf in der Mitte. Um dies zu bringen, NLS, gehen Sie zurück zu unserer Indexdatei. Und für die Division hier, lassen Sie uns eine Klasse von BTN Dash Harappa bieten. Und lassen Sie mich diesen speziellen Klassennamen kopieren. Lass es uns retten. Also lassen Sie mich zu unserer style.css gehen. Und hier werde ich das Verhalten auswählen, sowie unsere Taste Dash Rapa. Und lassen Sie uns Text-Align-Zentrum zur Verfügung stellen. Also, wenn ich es speichere, können Sie sehen, dass das Muster jetzt in der Mitte ist. Aber es gibt ein kleines Problem, dass, wenn ich schwebte über sie wieder und sehen, dass es nimmt dies noch sichtbar. Also in der Indexdatei können Sie sehen, dass ich eine Eigenschaft von BTN primär gegeben habe. So in den Dienstprogrammen wieder sehen, dass wir den Strand und Würfel Grundklasse haben. Und im Flur oder Effekt haben wir im Grunde die Farbe unseres Textes in rein geändert. Und ich werde das etwas zu primär ändern. Ich rette es. Jetzt können wir sehen, dass der Text deutlich sichtbar ist und es auch eine Änderung gibt. Also hier, vorher diese reguläre Maisdoktrin war weiß, wenn wir über sie jetzt schweben, hat es sich geändert oder grün Asbell. Und ich habe irgendwie das Gefühl, dass dies viel besser aussieht als der weiße Conduct Punkttext, wenn die Halle, in der es angewendet wird. Also kein Diabetes auch fixiert. Ich kann sehen, dass der Abschnitt „Verhalten Me“ tatsächlich in Ordnung ist. Und wir brauchen auch ein bisschen Polsterung oben, um die Überschrift als auch. Also lasst uns das machen. Also lasst uns zu unserer styles.css gehen. Und genau hier werde ich eine Polsterung bieten, top off fast ein rem. Und lassen Sie uns das auf die Römer erhöhen. Sehen Sie, was ein Unterschied ist. Und jetzt haben wir eine gute Trennung. Also Leute, das war's. Wir haben endlich auch den Abschnitt „Verhalten Me“ gebaut, und es sieht genauso aus wie der unseres Prototyps. Und noch einmal, ich hoffe, dass ihr die grundlegende Entwicklung verstanden habt , die wir in diesem speziellen Video gemacht haben. Also das war's, Leute, danke fürs Ansehen und ich sehe euch im nächsten Video. 11. Den Fußträger entwerfen: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video, v gehen Standard-Tag aus unserer Website zu bauen. So haben wir endlich den unteren Teil unserer Website erreicht. Wenn Sie also die Grenze analysieren, können Sie sehen, dass B hier ein Logo und eine Spitze hat. Und auch wir haben einen dunklen Hintergrund zu unserer Mappe. Also lassen Sie uns zu unserer Indexdatei gehen und lassen Sie mich auf Öffnen Sie diesen bestimmten Text von hier, und lassen Sie uns es am Ende unseres Verhaltens Abschnitt einfügen. Und hier werde ich wieder einen Coleman öffnen, der anzeigt , dass die Fußzeile begonnen hat. Hier. Lassen Sie mich vergrößern und öffnen Sie ein Fußzeilen-Tag. Und in diesem speziellen Tag, vor allem, haben wir das Logo. Also werde ich ein Bild-Tag öffnen. Und innerhalb des Medius, wir haben gefangen, dass die Nav-Jungs Logo unten und wählen Sie das. Zweitens, wir haben dieses besondere X hier. Also lassen Sie es mich kopieren. Und hier werde ich eine andere Division öffnen , die eine Klasse von Fußzeile Bindestrich Text. Und innerhalb dieser Abteilung können wir einfach den Code einfügen. Und lasst es uns retten. Lassen Sie uns unsere Website besuchen. Und hier können Sie sehen, dass wir das Logo sowie den Text hier haben. Jetzt müssen wir einen dunklen Hintergrund bereitstellen. Gehen wir also zu style.css. Und hier werde ich die gesamte Fußzeile auswählen. Und lassen Sie uns einen Hintergrund der Dunkelheit bieten. Und wir müssen auch, dass der lokale SQL den Text zuletzt in der Mitte der Fußzeile sah. So gibt es auch zusätzliche Linie zentriert. Nun, wenn ich speichern und zurück auf die Website gehen, können Sie sehen, dass wir vierteljährliche Logo sowie das X hier haben. Also lassen Sie uns nun die Polsterung sowie ändern Sie die Farbe unserer Fußzeilen. Also, um das zu tun, gehen wir zurück zu unserer style.css zuerst leisten hier, ich werde das Bild auswählen. Und lassen Sie uns einen Rand oben auf fast den Urin liefern. Und Kinn kaufte sie fast eine Trommel. Und hier werden Sie sehen, dass wir jetzt unseren Lösungsraum oben und unten haben. Und ich werde den Rand leicht reduzieren, weil er ein bisschen zu hoch ist. Und jetzt betrachtet es vordefinierte. Und lassen Sie uns auch die Farbe unseres Textes hier ändern. Also hier werde ich die Fußzeile kopieren. Also lasst uns den Fußzeilentext anvisieren. Und darin haben wir unseren Fußzeilentext bekommen. Also werde ich die Farbe zu rein ändern. Lass es uns retten. Ja, ja. Und Sie können sehen , dass wir nicht viel Polsterung unten zwei über x Kriterien haben. Es ist wirklich nah am unteren Teil dieses bestimmten Ordners. Also lassen Sie uns eine Polsterung Boden von fast Platz, so dass es Lichttrennung. Nun haben wir auch eine recht gute Trennung für das Lesen von Texten. Also, das ist es, Jungs. Jetzt arbeitet das Photon vordefiniert, genau wie das unseres Prototyps. Danke fürs Ansehen, und ich sehe euch im nächsten Video. 12. Zuordnung der Scroll: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video werden wir Scroll-Animation auf unserer Website zur Verfügung stellen. Also genau hier auf der Navbar können Sie sehen, dass wir verschiedene Links zur Verfügung gestellt haben. Und ab sofort, wenn Sie auf einen Link drücken, können Sie sehen, dass im Grunde nichts passiert. Aber nach der Bereitstellung von Scroll-Animation, wenn Sie auf eine dieser Belastungen drücken, wird es Sie an den jeweiligen Ort bringen. Wenn ich zum Beispiel auf ein Brett klicke, wird es mich automatisch an Bord 16 bringen. Und wenn ich auf den Projektabschnitt drücke, wird es mich automatisch zum Projektabschnitt bringen. Das ist es, was Unterstriche Animation ist. Und jetzt lassen Sie uns Scroll und Dimension auf unsere Website anwenden. Also lassen Sie uns zu unserer Indexdatei gehen. Und zunächst einmal, lassen Sie mich diesen Kommentar kopieren und lassen Sie uns auch unseren Fußzeilenkommentar schließen. Und jetzt, wenn wir den ganzen Weg nach oben gehen, bis zu unserem Heldenbereich. Im Held Abschnitt wieder alle Links sehen, die wir angegeben haben und innerhalb seiner Shift ziehen, Sie können sehen, dass wir einen Hash zur Verfügung gestellt haben und es gibt keine angegebene Position oder Pot. Also jetzt gehen wir zu unserem Bolzenabschnitt und lassen Sie uns im Grunde etwas ändern. Also gerade jetzt sind wir in der Board-Abteilung und in diesem speziellen Abschnitt werde ich eine ID zur Verfügung stellen. Also ID ist im Grunde ein eindeutiges Schlüsselwort. So zum Beispiel, in diesem speziellen Abschnitt, werde ich eine Vorstellung von über bieten. Dies bedeutet, dass ich eine andere ID mit einer ID eines Bootes irgendwo anders in dieser speziellen Datei erstellen kann . IDs sind also eindeutige Elemente. Wie Sie sehen können, haben wir eine ID für unseren Abschnitt About erstellt. Und ich werde diesen speziellen Ausweis kopieren. Und genau hier innerhalb des Anker-Tags, innerhalb dieses speziellen Graphen, werde ich die a bout ID einfügen. Also haben wir Hash und den Namen der ID, die ein Bot ist. Also jetzt, wenn ich speichern und ich, wenn wir zurück zu Ihrer Website gehen und wenn ich auf den über Link rechts hier oder die ein Boot Anker Tag klicken und sehen, dass bis auf die Teilnehmer der über Abschnitt. Aber wie Sie sehen können, dass es keine Animation gibt. Die Bereitstellung von Animation ist also ein hübsches Symbol. Also die Programmanimation, lassen Sie uns zu unserer CSS-Datei gehen. Und wenn ich den ganzen Weg zum Anfang der CSS-Datei scrolle, werde ich den HTML auswählen und ich werde ein Scrollverhalten von glatt bereitstellen , wenn ich es speichere. Und wenn ich noch einmal auf das Über Anker-Tag klicke, können Sie sehen, dass wir jetzt eine glatte Scroll-Animation haben. Hier geht es also darum, eine Scroll-Animation auf unserer Website bereitzustellen. Und jetzt lasst uns das Gleiche für all diese anderen Links machen. Und lasst uns zu unserer Indexdatei gehen. Und hier in unserem Kopf habe ich einen Hausausweis zur Verfügung stellen. Kopieren wir das und fügen Sie es direkt hier in das Anker-Tag ein. Und lasst uns zu unserem Fähigkeitsbereich gehen. In diesem Abschnitt werde ich eine andere ID mit Fähigkeiten als den Namen zur Verfügung stellen. Und lassen Sie uns auch zum Abschnitt „Produkte“ gehen und dasselbe tun. Die Vielfalt der Projekte. Und schließlich, es ist auch zu gehen oder mein Buch Abschnitt und geben Sie eine ID meines Blogs. Und lassen Sie uns dasselbe auch für die Maisdissektion mit einer ID of Conduct tun. Das war's also. Gehen wir nun zurück zu unserem Anker-Tag und geben Sie die ID auch hier an. Jetzt haben wir Fähigkeiten erworben. Für deinen Fähigkeitsbereich. Setzen Sie sechs für den Projektabschnitt und meinen Blog für den Blog-Bereich. Und lassen Sie uns es speichern und schauen wir uns unsere Website an. So auf unsere persönlichen Projekte. Und es wird uns zum Projektabschnitt bringen. Wenn ich auf einem Blog drücke, ist es eins. Bringen Sie uns zum Blog-Bereich. Was für ein Boot. Ja, alles funktioniert einwandfrei. So können wir uns bieten, unsere Animation auf unserer Website wachsen. So kann jeder, der mit der neuen Website ist, direkt zu einem dieser jeweiligen Abschnitt mit nur einem Klick gehen . Und sie werden mit einer glatten Animation behandelt. Das ist also alles für diesen Einbruch, die Jungs. Im nächsten Video werden wir unsere Website vollständig reaktionsfähig für alle Arten von Bildschirmgrößen machen . Und das war's. Ich seh euch das nächste Video. Danke fürs Zuschauen. 13. Responsive Website – Navigationsmenü: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video werden wir unsere Website reaktionsschnell machen. Das ist also der erste Teil davon. Und in diesem speziellen Video werden wir eine mobile Navigation erstellen. Bevor ich auf das Video kam, wollte ich euch ein grundlegendes Verständnis für ein Wort geben , das wir in diesem speziellen Video machen werden. Um das zu tun, werde ich mit der rechten Maustaste klicken und das Entwickler-Tool öffnen. So ist das Entwickler-Tool, und wie Sie sehen können, wird diese Enddissektion als View-Port-Abschnitt bekannt. Und wir können im Grunde nur die Breite und Höhe des Ansichtsfensters als auch. Also im Moment werde ich das Bit selbst verringern, das Ansichtsfenster. Und wie Sie sehen können, wenn ich den ganzen Weg bis nach links gehe, sehen Sie, dann tauchen Sie Zyklopsen hoch. Wir können viele Whitespaces sehen. Und wenn Sie die Navbar bemerken, haben wir gottaddy Links in verschiedene Zeilen und es sieht eigentlich ziemlich schlecht aus. Also, wenn sich eine Person auf Ihrer Website mit dieser Art von Bildschirmverhältnis wie 9018949 anmeldet. Das werden sie sehen. Also müssen wir das ganze Zeug reparieren. So können Sie sehen, dass, wenn wir um 998 lesen, Sie sehen können, dass sich die Navigationsleiste oder die Links in zwei geteilt. Also müssen wir das in Ordnung bringen. Und anstelle dieser besonderen Ende Diagnose, Barbie gehen, um ein Navigationsmenü zu erstellen. Für eine kleine Bildschirmgröße werden wir die Navbar deaktivieren. Stattdessen stellen wir einen Hamburger zur Verfügung. Also, wenn der Benutzer auf Hamburger klickt, das Ende starb nav bar angezeigt werden. Das ist also, was wir in diesem speziellen Video tun werden. Es wird also wirklich interessant sein. Wir werden eine Menge darüber lernen, wie man eine Website reaktionsschnell macht , weil unsere Desktop-Version sieht ziemlich genial aus. Aber wie die heutigen Trends sagen, werden fast alle Verwendungszwecke ein Smartphone verwenden und sie werden Ihre Website über ein Smartphone besuchen. So sieht unser Smart for Viewpoint ziemlich schlecht aus und jetzt ist es Zeit für uns, es zu beheben. Also lasst uns anfangen. Also Leute, wenn Sie bemerken, werde ich die Größe des Ansichtsfensters verringern. Das ist die Breite des Ansichtsfensters. Und an diesem Punkt, wenn die Klammern um 988 wieder sehen , dass sich die Links in zwei verschiedene Zeilen aufgeteilt haben. Und was wir brauchen, ist, dass in diesem bestimmten Stadium, Links werden sich in zwei verschiedene gesündere deaktivieren die gesamte nav bekam aufteilen. Damit das passiert, werden wir Medienabfrage verwenden. Also die Medienabfrage, wir werden eine Break-even angeben, oder in unserem Fall ist es eine Breite des Ansichtsfensters. Also, wenn diese Break-even Wie erreicht v, Ich möchte die Navigationsleiste deaktivieren. Und du wirst sehen, dass WIR eine Menge Leerzeichen gehört haben, und lasst uns das bewegen. Also bin ich jetzt in der CSS-Datei und weiß hier, ich werde HTML und den Körper auswählen. Und ich werde Überlauf x als versteckt bereitstellen. Jetzt, wenn ich es speichere, können Sie sehen, dass der y-Raum verschwunden ist. Und nun lassen Sie uns den Break-even oder die Breite identifizieren , in der die Navbar deaktiviert werden soll. Also, ich werde die Breite des Ansichtsfensters verringern. Und hier werden Sie sehen, dass um diesen bestimmten Punkt herum, um 1988 ist, wo die Links Abschnitt in zwei Teile geteilt ist. Ich werde es nicht bis zu diesem bestimmten Punkt nehmen weil Sie sehen können, dass das Verhalten und die Links ziemlich nah sind. Und ich werde mit dem sicheren Wert unserer meisten um die, die 204 sind, gehen. Und die Frage der Einnahme alles liberale Linie 88 ist, dass, wenn eine Person mit dieser Art von einer Ansichtsfensterachse, Sie sind verärgert und sehen das Verhalten und die Ende Diät-Links sind ziemlich nah. Und es sieht nicht so toll aus. Wenn es also 1024 ist, sieht es auch in dieser Art von Breite und Höhe des Ansichtsfensters gut aus. Was wir also tun werden, ist, dass wir zu unserer styles.css gehen. Und ich werde den ganzen Weg nach unten scrollen. Und hier, die US-Medienabfrage werde ich mit der Rate der Medien eingeben. Und die Einsicht auf Klammer, ich möchte die Breite angeben, das ist maximale Breite. Und wie wir diskutiert haben, gehen wir sogar mit 1024 Pixel. Und hier werde ich die Leiche öffnen. Also, was ich in diesem speziellen Block angeben werde, wird anwendbar sein, wenn der Scheitelpunkt hier 1024 kreuzt. Also hier lassen Sie uns deaktivieren die navbar. Also lassen Sie uns zur Indexdatei gehen. Und im Navi, werde ich eine ID von Hauptstrich f zur Verfügung stellen. Lassen Sie mich das kopieren und speichern Sie es. Gehen wir zurück zu style.css. Und hier lassen Sie uns unsere Navigationsleiste auswählen. Also, das ist in der Kopfzeile, wir werden die navbar auswählen. Also werden wir die navbar über die ID auswählen. Also müssen wir Hashtag bereitstellen, um die ID auszuwählen. Und hier werde ich keine anzeigen. Jetzt, wenn ich es speichere, und Sie können sehen, dass die Navbar fehlt. Lassen Sie mich das demonstrieren. So ist jetzt der gegenwärtige Reichtum fast 1054. Und ihr könnt diesen besonderen Wert überprüfen, wenn er fast 10 bis vier ist. Wenn es 10 bis vier kreuzt, können Sie sehen, dass die Navigationsleiste deaktiviert ist. Das meinte ich also mit Break-even. Wenn also der Break-even von 1024 erreicht ist, an diesem bestimmten Punkt unser Code innerhalb unserer Medienabfrage mit Ebert 0, wird an diesem bestimmten Punkt unser Code innerhalb unserer Medienabfrage mit Ebert 0, 1, 0 bis vier Pixel aktiviert. Und innerhalb der Medienabfrage deaktivieren wir die Navbar, und das ist im Grunde passiert. Also Jungs, das erste, was ich tun werde, ist, dass wir unseren Hamburger bauen müssen. Also sind wir irgendwo in einem Ort oder Hamburger hier drüben. Um das zu tun, gehen wir zu unserer Indexdatei und lassen Sie uns den gesamten Code innerhalb des Körpers kopieren. Also werden wir die gesamten Abschnitte auswählen. Lassen Sie mich also die Größe verringern und den gesamten Code aufheben , der sich innerhalb des Körpers bis zum Foto befindet. Also lassen Sie es uns schneiden. Also, wenn Sie auf Windows sind, können Sie steuern und x, und wenn Sie ein Mac sind, können Sie empfehlen und x. so lassen Sie mich jetzt ein wenig vergrößern. Und hier im Körper, werde ich eine Division mit einer Klasse von Website-Bindestrich erstellen, Strich Harappa. Und in dieser speziellen Abteilung, lassen Sie uns den Code einfügen. Also alles, was wir getan haben, ist, dass wir im Grunde eine neue Division erstellt haben, die als unsere Website Dash Main Dash Wrapper benannt wird. Und in diesem speziellen Rapa haben wir den gesamten Code eingefügt, der sich im grausamen Körper befindet. Und jetzt lassen Sie mich es ausrichten. Alles klar, das nächste, was ich tun werde, ist, dass in unseren Nebenwürfeln bedeutet, dass das Wrapper ist. Wir werden eine weitere Abteilung mit einer Klasse von Hamburger schaffen. Und in dieser speziellen Abteilung möchte ich einen Knopf erstellen. Und dieser Button wird ein Bild haben, das als Hamburger Punkt SVG benannt wird. Nun, wenn ich es speichern und wenn Sie auf unsere Website gehen, hier im oberen Teil wieder, sehen Sie unseren Hamburger Ich bezweifle hier. Und jetzt müssen wir es stylen, und wir müssen seine Position ändern , und wir müssen es dorthin transportieren, genau hier drüben. Also, um das zu tun, lassen Sie uns im Grunde unsere Website Dash, Dash Wrapper wählen. Gehen wir zu unserer style.css. Und hier, lassen Sie uns so sagen, ich stash Mendes Wrapper und ändere seine Position, um dv zu beziehen. Und jetzt wählen wir unseren Hamburger aus. So ist der Hamburger in unserer Website Armaturenbrett Mendes Wrapper. Also wählen wir zuerst das aus, gefolgt von unserem Hamburgermädchen. Und hier werde ich seine Position zu absolut ändern. Und ich werde neu sein, irgendwo hier drüben zu wohnen. Also lassen Sie uns es eine Spitze von fast 40 Pixel. Und gleich wieder um 40 Pixel. Und wenn ich es speichere, und du siehst, dass jetzt der Hamburger im Radius hier drüben fehlt, aber hinter der Tasche raus. Jetzt müssen wir es vor der Tasche runterbringen. Um dies zu tun, lassen Sie uns einen Insert-Index von 11. Wenn ich es rette. Hier können Sie sehen, dass wir jetzt eine Hamburger-Symbol hier haben. Der Hamburger ist also im Grunde ein eingeschlossener Knopf. Standardmäßig wird es einen Hintergrund haben, den ich gesäumt habe und einen Rahmen. Und jetzt werden wir für den Stylet tun. Also, genau hier auf der style.css, werde ich den gesamten Code von hier kopieren, der die Hamburger Division auswählt. Also in der Hamburger Division haben wir den Knopf. Also hier werde ich einen Hintergrund zu keiner bieten. Nun, wenn ich es speichere, werden Sie sehen, dass der Hintergrund im Grunde der Behinderte ist, aber wieder, sehen Sie die Grenze hier. Also, was ich nur eine Grenze, keine. Wenn ich es jetzt speichere, ist die Grenze grundsätzlich deaktiviert. Aber wenn ich darauf klicke, wird es im Grunde einen Überblick darüber geben. Lassen Sie uns also auch einen Umriss von keiner geben. Wenn ich es jetzt rette, ist der Hamburger weg und sieht gut aus. So gibt es auch leicht in Griechenland die Größe des Hamburgers. Also, um das zu tun, lassen Sie uns dann direkt Port von hier kopieren. Fügen Sie es ein und wählen Sie das Bild aus. Und lassen Sie uns eine sehr harte fast 30 Pixel. Lass es uns retten. Und jetzt können Sie sehen, dass der Hamburger deutlich sichtbar ist und das ist auch ändern Sie den Cursor um den Faltknopf zu zeigen und ihn zu speichern. Jetzt ist der Hamburger völlig in Ordnung. Lassen Sie uns das Entwickler-Tool schließen. Und jetzt sieht man, dass der Hamburger auch in der normalen Ansicht grundsätzlich sichtbar ist. Und wir müssen das reparieren, und das wird es in einer Sekunde tun. Und hier können Sie sehen, dass alle anderen Eigenschaften des Hamburgers perfekt funktionieren. Das ist in der richtigen Position und es sieht auch ziemlich gut aus. Jetzt lassen Sie uns runter, um die Anpassung des Hamburger zu verschieben. Also Jungs, im Moment bin ich in meinem Entwickler-Tools-Bereich. Und hier können Sie sehen, dass wir das Hamburgermenü hier drüben nicht haben. Und ich glaube an mich, drauf zu drücken. Wir brauchen ein Menü zu springen und dass Meno sollte alle Links wie zu Hause über Fähigkeiten und nicht anzeigen. Das ist es, was wir jetzt bauen werden. Gehen wir also zu unserer Indexdatei. Genau hier, das ist unsere Hamburger Division, und genau darunter möchte ich eine andere Division schaffen, aber ein Glas mobiles, nettes Navi. Und dann entscheiden Sie diese bestimmte Abteilung, ich werde eine ungeordnete Liste erstellen. Also in dieser bestimmten ungeordneten Liste werde ich eine andere Liste erstellen. Und diese Liste besteht aus einem Anker-Tag. Also im Grunde, wenn wir auf zu Hause oder auf einem Brett drücken, ist es, uns zu diesem oberen Abschnitt zu bringen, richtig, also brauchen wir einen Anker-Tag dafür. Und hier werde ich diesen Anker-Tag als Zuhause benennen, genau wie die unserer Navigationsleiste. Und wir brauchen insgesamt vier weitere Links. Also werde ich das noch vier Mal kopieren. Und ich werde das einfach umbenennen. Also hier werde ich aus dem Heldenbereich kopieren und es hier einfügen. Dieses reichlich tötet und fügt es hier ein. Projekte. Und schließlich der Block. Und jetzt lassen Sie es uns retten. Und wenn wir unsere Website hier im Hundeteil noch einmal überprüfen, sehen Sie das Ende Durchfall. Mobile stirbt nie Division mit all den verschiedenen Links. Und jetzt lass es uns wählen. Also Leute, im Moment nimmt unser Hamburger tatsächlich Platz auf einer Website ein. Wie Sie dies sehen können oben auf unserer Website angezeigt, was wir tatsächlich benötigen diese Daten, sollte dieser spezielle Abschnitt auf der linken Seite ausgeblendet werden. Und dann klicken wir auf das Hamburger-Menü. Diese und Dissektion sollte herausspringen und alle diese Menüs anzeigen. Und das Hamburger-Menü sollte auch die gesamte Breite und Höhe des Bildschirms einnehmen. Das ist also unsere Grundvoraussetzung, und jetzt fangen wir an, das zu bauen. Also davor lassen Sie mich zur Datei index.html gehen. Und hier können Sie sehen, dass das mobile Wort falsch geschrieben ist. Also werde ich es in MOBI-Allel umbenennen und speichern wir es. Und es kann auch diesen speziellen Klassennamen von hier kopieren. Danach geht es zu unserer style.css. Und hier lassen Sie uns die mobile nav Klasse auswählen. Also zuerst werde ich Position als fixiert geben. Und ich werde eine Spitze von 0 und eine linke von 0 als auch geben. So wird es so links wie möglich auf dem Bildschirm sein. Nun, wenn ich es hier speichere, können Sie sehen, dass das Hamburgermenü jetzt nicht sichtbar ist. Es liegt daran, dass wir keinen festgelegten Index zur Verfügung gestellt haben. Es ist jetzt hinter unserer Website. Jetzt müssen wir es vor sich bringen. Also hier lassen Sie uns einen Index zur Verfügung stellen. Also müssen wir einen höheren Wert bereitstellen, zum Beispiel auf einem 1001. Und mal sehen. Und jetzt können wir sehen, dass unsere Hamburgerkarte sichtbar ist. Also lassen Sie uns es wieder hinunterbringen. So gibt es einen Hintergrund von reinem. Lass es uns retten. Und wie Sie jetzt sehen können, ist die Hamburgerkarte sichtbar. Und ich sagte schon, das Hamburger-Menü sollte den gesamten Bildschirm einnehmen. Wir müssen also eine Breite von 100 Prozent sowie eine Höhe von 100 Prozent bereitstellen. Nun, wenn ich es hier speichere, können Sie sehen, dass der Hamburger den gesamten Bildschirm einnimmt. Da wir es mit einem höheren Indexwert versehen haben, steht es auf allen verschiedenen Ebenen und Abschnitten der Website. Und jetzt können Sie hier sehen, dass am Ende schlimme Verbindungen wirklich nah an der Grenze sind. Lassen Sie uns also eine Polsterung von zwei Rems nach links, rechts und oben und unten bereitstellen. Entschuldigung. Lassen Sie uns es speichern, denn jetzt haben wir eine Polsterung von zwei REM zur Verfügung gestellt. Also Leute, ab sofort haben wir nichts, um unsere Hamburgerkarte zu schließen. Wir haben es geöffnet, aber wir müssen es auch schließen, oder? Also müssen wir eine Krähe erstellen, die ich hier auf der rechten Seite schreiben kann , damit Darwin wir darauf klicken, das Hamburger-Menü verschwindet und geht auf die linke Seite. Also, um das zu tun, wie gehen Sie zurück zu unserer Indexdatei und schreiben Sie in unsere mobile Dash nav Division. Ich werde einen Knopf mit einer Klasse von Zeiten öffnen. Und in diesem speziellen Knopf werde ich ein Bild öffnen und lassen Sie uns unter Punkt Schrägstrich, gehen Sie zum Ordner Bilder und wählen Sie ein Bild mit dem Namen von mal 30 SVT. Lass es uns retten. Und wenn du hier wieder nach oben gehst, siehst du, dass wir ein Kreuzsymbol haben, aber wir müssen das auf der rechten Seite sein. Also, um das zu tun, lassen Sie uns im Grunde den Klassennamen von hier kopieren, gehen Sie zu style.css. Und hier wählen wir diese spezielle Abteilung aus. Und zuallererst werde ich Position als fixiert geben. Und lassen Sie uns auch oben als 30 Pixel. Und bringen wir es ganz nach rechts. Das ist richtig. Für die meisten 100 Pixel. Wenn ich es also speichere, wirst du sehen, dass jetzt das Symbol fast rechts ist. Und das ist im Grunde ein Knopf. Standardmäßig wird es einen Hintergrundumriss und einen Rahmen haben. Und lassen Sie uns all diese Dinge deaktivieren. Also hier werde ich einen Hintergrund von keiner zur Verfügung stellen, sorry, bekannt als bieten einen Umriss von keiner als Grenze. Keiner. Jetzt, wenn ich es speichere, können Sie ein Flugzeug Kreuz Symbol sehen. Und lassen Sie uns auch Cursor als Punkt nach oben zur Verfügung stellen, damit WIR unseren Mund bringen. Es wird wie das eines Cursors aussehen. Und jetzt haben wir auch hier ein Klausel Icon. So Jungs hier können Sie sehen, dass unser Kreuz Symbol ist viel kleiner und retten sauberes Fett seine Größe. Also, um das zu tun, werde ich die Zeitklasse kopieren. Und hier werde ich das Bild auswählen und es auf 1,5 m ändern lass es mich speichern. Und wie Sie jetzt sehen können, ist es ausreichend groß und unzulässig. Lassen Sie uns nun all diese verschiedenen Links wählen. Also, um das zu tun, werde ich unsere More Pi, Dash NADPH Division wählen . Und lassen Sie uns zuerst die gesamte ungeordnete Liste auswählen, und Sie können sehen, dass wir was haben? Punkte genau hier. Lassen Sie uns das deaktivieren. So wahr, dass ich nicht in der Liste Bindestrich Stil, Bindestrich als keine eingeben. Jetzt, wenn ich es speichere, können Sie sehen, dass die Punkte nicht mehr sichtbar sind. Zweitens, lassen Sie uns auch diese verschiedenen Links stylen. Also der Text. Also hier werde ich die ungeordnete Liste, die Liste und das Anker-Tag darin auswählen . Also zuerst werde ich seine Farbe zu dunkel ändern. Jetzt haben wir hier dunkle Farbe. Und Sie können sehen, dass wir haben, was unterstreicht. Lassen Sie uns das deaktivieren, indem Sie Textdekoration angeben. Keiner. Jetzt haben wir keine Unterstreichungen sowie ich werde ihre Telefongröße zu ihnen erhöhen, so dass sie deutlich sichtbar sein werden. Jetzt haben wir die Links gestylt, und wie Sie sehen können, sind diese Ringe wirklich nahe beieinander, also müssen wir ein wenig Rand unten zur Verfügung stellen. Dafür werde ich den Link kopieren. Das ist die Ausrichtung. Und ich werde ihnen eine Marge unten oder die meisten zur Verfügung stellen. Jetzt haben wir eine Wahrnehmungslücke zwischen ihnen. Hier können Sie sehen, dass die Enlil-Liste wirklich ganz oben auf der Seite ist. Das ist also ein bisschen Polsterung. Also, um das zu tun, lassen Sie uns zu unserem mobilen nav gehen. Und hier werde ich eine Polsterung oben von fünf rem zur Verfügung stellen. Und jetzt haben wir Kursoptionen basierend auf der Spitze. Und auch werde ich diese in der schrecklichen Liste in die Mitte der Seite bringen. Also hier lassen Sie uns Text-ausrichten Zentrum. Jetzt haben wir den Inditex Thema Ascender. Also Jungs, jetzt sind wir fertig mit der grundlegenden Navigation kann Design wissen. Und nun lassen Sie uns die grundlegenden Funktionalitäten unseres Navigationsmenüs zur Verfügung stellen. Wie wenn wir auf den Close-Button klicken, sollte diese spezielle Navigation geschlossen werden und dann klicken wir auf das Hamburger-Symbol. vertikale Navigationsfenster sollte geöffnet werden. Und jetzt lassen Sie uns diese grundlegenden Funktionalitäten zur Verfügung stellen. Dafür werden wir unsere app.js für die Bereitstellung der Funktionalität verwenden. Zuvor lassen Sie uns zu unserer Indexdatei gehen und lassen Sie uns eine Klasse zu unserer Schaltfläche geben, die der Hamburger-Button ist. Also lassen Sie mich den Namen von hier kopieren. Und lassen Sie uns eine Klasse von Hamburger Dash-Button bieten. Und hier werde ich diesen speziellen Klassennamen Asphalt kopieren und speichern. Jetzt gehen wir zu unserer app.js. Und genau hier werde ich eine Variable erstellen. So können wir eine Variable mit Blei, Watt oder Kegel erstellen. Und ich werde einen variablen Namen von Hamburger geben. Also genau hier werde ich erneut auswählen, das ist Dokument Punkt QuerySelector. Und in der runden Klammer werde ich die Klasse der Zitrone angeben, die ich auswählen möchte. In unserem Fall möchten wir die Schaltfläche auswählen. Also müssen wir den Klassenanbieter auf die Schaltfläche angeben, das ist Hamburger Dash Button. Und vergessen Sie nicht, den Punkt bereitzustellen, da VR im Grunde auf das Element zugreift. Also jetzt haben wir den Hamburger-Button ausgewählt und wir müssen auch das Kreuzsymbol auswählen. Also hier werde ich eine andere Variable mit dem Namen der Zeit erstellen. Und hier wieder, Ich werde zu dokumentieren und wählen Sie über Kreuz Symbol. Und wenn ich mich nicht irre, haben wir eine Klasse von Zeiten gegeben. Also lassen Sie es uns überprüfen. Also hier haben wir eine Klasse mal auf unsere Schaltfläche gegeben. Also lassen Sie es uns kopieren und einfügen. Also Jungs, jetzt haben wir diese beiden Elemente ausgewählt, und gerade jetzt ist es Zeit für uns, einen Ereignis-Listener zur Verfügung zu stellen. Also haben wir die Schaltfläche ausgewählt, und jetzt müssen wir der Schaltfläche sagen, was zu tun ist, wenn wir darauf klicken. Um das zu tun, werde ich den Hamburger Variablennamen von hier kopieren. Und wir werden einen Ereignis-Listener hinzufügen. Und die Auszeichnung sollte der Veranstaltungshörer hören, das ist im Grunde ein Klick. Und wenn eine Person auf das Hamburger-Symbol klickt , diese spezielle Funktion, wird diese spezielle Funktion ausgeführt werden. Zusammenfassend wird der Code zusammengefasst, wenn jemand auf das Hamburger-Symbol klickt, diese spezielle Funktion ausgelöst und der darin enthaltene Code wird ausgeführt. Das ist also das grundlegende Fundament für diesen bestimmten Ereignis-Listener. Und wir brauchen das gleiche für unsere Zeit ich oder die Times Taste auch. Also werde ich den Code duplizieren und ich möchte den Variablennamen 2 mal 0 ändern. Richtig? Jetzt geben wir nur an, was passieren soll, wenn wir auf dieses besondere Hamburger-Symbol klicken. Also Jungs, bevor wir weitermachen, lasst uns unsere Website besuchen. Und wie Sie sehen können, dass in dem vorliegenden Szenario, wenn BB Zeta Website, das einzige, was wir sehen können, östliche Navigationsmenü , aber standardmäßig, und wenn wir unsere Website erhalten, sollten wir beachten Sie das Navigationsmenü. Dies sollte nur sichtbar sein, wenn wir auf das Hamburger-Menü klicken. Also müssen wir das Navigationsmenü ausblenden. Was wir also tun werden, ist, dass wir das NDI-Navigationsmenü nach links transportieren werden. Wenn wir also auf das Hamburger-Menü klicken, sollte es auftauchen. Um das zu tun, gehen wir zu unserer style.css. Und genau hier in der mobilen Punkt, lassen Sie uns im Grunde eine übersetzen X anwenden. Also, um das zu tun, werde ich zu öffnen transformieren. Und hier werde ich angeben. Übersetzen X. So übersetzen X oder übersetzen wird im Grunde verwendet, um Objekte zu verschieben. Und wir haben bereits verwendet übersetzen in den Geschicklichkeitsbereich, wo wir das Logo und die Karte in den Absender bringen müssen und übersetzen es gibt an, dass wir das Element in der horizontalen Achse bewegen müssen. Und wenn ich einen positiven Wert eingebe, wird es das Element vielfältig nehmen, oder? Aber jetzt werden wir nicht dieses spezielle Navigationsmenü auf der linken Seite sein. Also müssen wir einen negativen Wert liefern, und ich werde minus 100 Prozent liefern. Also minus 100 Prozent wird das Element aus dem Bildschirm nehmen. Wenn ich es also speichere, ist das Navigationsmenü nicht mehr sichtbar. Es ist eigentlich nicht weg. Es ist irgendwo auf der rechten Seite. Wenn ich also den Wert auf fast 80 Prozent ändere, kann man die Hälfte davon sehen. Also ist es eigentlich auf der linken Seite, aber wir können es tatsächlich sehen. Also werde ich das auf 100 Prozent zurückbringen. Oder wie jetzt haben wir standardmäßig ein Navigationsmenü ausgeblendet. Das nächste, was wir tun werden, ist, dass Darwin mich auf das Hamburger-Symbol hier klicken. Das Navigationsmenü sollte an seine ursprüngliche Position zurückkehren. Also, um das hier zu tun, werde ich eine andere Klasse erstellen, die US dot open genannt wird. Und hier werde ich diesen speziellen Code von hier kopieren. Lassen Sie es uns einfügen. Und hier werde ich die Übersetzung x als 0 angeben. Indem Sie also translate x 0 angeben, wird es unser Navigationsmenü wieder an seine ursprüngliche Position bringen. Also, wenn ich es speichere und wenn ich zurück zu unserer Website hier gehe, werde ich die Breite dieses speziellen Abschnitts erhöhen. Und wenn ich unseren Hamburger wähle. Und hier werden wir die mobile gestrichelte Nav-Klasse sehen und dann öffnen wir sie. Und E Fi stellt hier die offene Klasse zur Verfügung. Hier wird also das Öffnen unser Navigationsmenü wieder an seine ursprüngliche Position bringen. Also, wenn ich einfach offen in der Nav-Klasse angeben, werden wir sehen, dass wir Tau haben, das Navigationsmenü zurück zu seiner Position. Und wenn ich es entferne, können Sie sehen, dass es versteckt ist. Also mit Hilfe von JavaScriptmüssen wir dynamisch, müssen wir dynamisch, ich lokalisieren unsere Klasse zu diesem bestimmten mobilen gestrichelten NADPH. Es ist also ziemlich einfach, das zu tun. Gehen wir zurück zu unserer app.js. Und hier in der Indexdatei können Sie sehen, dass dies das mobile Lord nav ist. Im Inneren ist es, wo wir das Ende Durchfall Navigationsmenü haben. Deshalb werden wir hier in dieser speziellen Klasse offen hinzufügen. Also hier werde ich den Klassennamen kopieren. Zuallererst müssen wir unsere mobile nav Klasse auswählen. Also hier in der app.js werde ich eine andere Variable erstellen, die als nav bekannt ist. Und nochmal, ich werde diesen speziellen Code kopieren. Und hier werde ich unser mobiles nav plus 4 auswählen, richtig? Also hier haben wir im Grunde unsere mobile nav Klasse ausgewählt. Und jetzt, wenn wir auf unseren Hamburger-Button klicken, müssen wir unser Navigationsmenü sichtbar sein. Um das zu tun, werde ich mobile nav, Punkt-Klassenliste, dot add eingeben . Und welche Klasse wir hinzufügen müssen, das ist die offene Klasse. Also Anstiftung Glukose, werde ich offen angeben und schließen. Dieser spezielle Code besagt, dass, wenn wir auf den Hamburger-Button klicken, wir diese spezielle Funktion benötigen, um auszuführen. Der Funktionskörper sagt also, dass wir, wenn wir auf den Hamburger-Button klicken, eine bestimmte Klasse zu unserem mobilen nav plus hinzufügen müssen, das wir genau hier ausgewählt sind. Wenn wir also zurück zu unserem Code gehen und wenn ich auf dieses spezielle rohe Hamburger-Symbol klicke, können wir sehen, dass wir jetzt unser Navigationsfenster geöffnet haben. Und hier sehen Sie, dass der Operand automatisch dynamisch zur mobilen App hinzugefügt wurde. Also, wenn ich wieder aktualisiere, und hier können Sie sehen, dass wir jetzt keine offene Klasse zusammen mit dem mobilen nav haben. Aber die Dynamik, und ich werde auf den Hamburger-Button klicken hier können Sie sehen, dass unser JavaScript dynamisch diese besondere offene Klasse hinzufügt, das heißt Klassenliste dot add open macht diesen besonderen Job. So erreichen wir grundsätzlich die Funktionalität des Öffnens des Navigationsmenüs, wenn wir auf das Hamburger-Symbol klicken. Also jetzt müssen wir auch Funktionalität für unsere Klausel bereitstellen, die ich kann, so dass, wenn wir darauf klicken, brauchen wir andere spezielle Navigationsmenü, um auf die linke Seite zu gehen. Hier können Sie sehen, dass der Moment, in dem ich die offene Klasse entferne, wir werden sehen, dass Dow, das Navigationsmenü ist versteckt. Indem wir also das Operandenglas entfernen, können wir das Navigationsmenü grundsätzlich entfernen. Also hier haben wir bereits unser Kreuz Icon ausgewählt, und hier in unserem Event Listener für Ihr Kreuz Icon. Und ich werde kopieren ist speziell für Akkord von hier. Und ich werde es einfügen. Und anstatt das offene Glas hinzuzufügen, werde ich das operative Glas entfernen. Das ist Klassenliste Punkt entfernen offen. Jetzt, wenn ich es und die andere speichere, gehen Sie zurück zur Website. Hier möchte ich auf das Hamburger-Menü klicken, das unser Navigationsmenü öffnet. Und hier können Sie sehen, jetzt haben wir offene Klasse in der mobilen Armaturenbrett Na plus, und ich werde auf das Kreuz Symbol klicken sie zuletzt geöffnet wurde entfernt, und dass versteckt haben ein Navigationsmenü. So haben wir jetzt im Grunde die beiden grundlegenden Funktionalitäten erreicht. Das heißt, wenn wir auf den Hamburger-Button klicken, haben wir das Navigationsmenü geöffnet und klicken dann auf das Kreuzsymbol. Das Navigationsmenü wurde deaktiviert oder ausgeblendet. Also Jungs, wenn wir auf den Hamburger-Button klicken, können Sie sehen, dass es im Navigationsmenü nur blinkt und ausspült. Es gibt keine glatte Animation. Also, um eine gleitende Animation, Gehen wir zurück zu unserem style.css und weiß in unserem mobilen Punkt. Lassen Sie uns nun einen Übergang für alle Elemente bereitstellen und es wird 0,5 Sekunden dauern und es ist leicht ein- und aussteigen. Jetzt, wenn ich es rette. Und jetzt, wenn ich auf den Hamburger-Button klicke, können Sie sehen, dass es eine glatte und glatte Animation gibt. Also, jetzt haben wir den Hamburger-Button als Elastic Claus-Taste und dann starb Funktionalität zusammen mit Animation, alle gesetzt. 14. Responsive Website Teil – 2: Hallo Jungs, willkommen zum Video. Und in diesem speziellen Video werden wir unsere Website vollständig reaktionsschnell machen. Also im vorherigen Video, als ein erster Schritt, um unsere Website reaktionsschnell zu machen, haben wir tatsächlich unser Navigationsmenü erstellt. Dies ist also eines der wichtigsten Videos unserer Website. Weil eine Website-Antwort zu verwenden wirklich wichtig in dieser bestimmten Person Phase. Denn unsere Website sollte in fast allen Bildschirmgrößen perfekt aussehen. Also, wenn ich unter f, L auf meiner Tastatur, die unser Entwickler-Tool öffnen wird. Sie werden sehen, dass wir jetzt in fast 13, 25 Bit mal 949 Höhe sind . Und jetzt, wenn ich ein Wort produziere , können Sie hier sehen, dass wir jetzt unsere Hamburgerkarte haben. Die Navigationsleiste wurde deaktiviert. Aber jetzt, wenn ich eine 10-Tage-Höhe eines iPhone-Turns hier wähle , können Sie sehen, dass unsere Website völlig kaputt ist. Die Dinge sind nicht auf der Suche nach Erkenntnissen oder nicht sichtbar. Einige von ihnen überlappen und ist vollständig gebrochen. Und jetzt ist es Zeit für uns, all diese Probleme zu beheben und unsere Website in fast allen Bildschirmgrößen perfekt aussehen zu lassen . Und lasst uns anfangen. Also Leute, wenn wir unsere style.css hier überprüfen, können wir einen Container sehen. Diese Bedingung hat also einen Mathematik-Experten, eine Polsterung und den Rand. Also ist dieser Container im Grunde für unseren Desktop. Also dieser Container stellen Sie sicher, dass unser Vorsprung auf der Desktop-Version gut aussieht. Aber wir brauchen tatsächlich eine Menge Bequemlichkeit wie diese, um unsere Website gut aussehen in Radius oder eine Bildschirmgröße als auch. Also, wenn wir hier nach unten scrollen, können Sie sehen, dass wir im Grunde eine Medienabfrage direkt hier angewendet haben. Also werde ich das schneiden und es unten einfügen. Und lassen Sie uns im Grunde alle Medienabfragen am Ende der Datei haben. So hier können Sie sehen, dass dieses spezielle Medium, wird er aktiviert, wenn die fällt unter 1024 Pixel. Und jetzt, Für jetzt haben wir nur eine einzige Modifikation. Das heißt, wir machen oder deaktivieren Anzeige aus unserer Navigationsleiste. So Eve Feature Bordsteinkante jetzt, lassen Sie uns im Grunde machen die iPad-Version unserer Website responsive. Aber sie hat eine Rechnung zu 768 und Höhe von 1024. Das erste, was ich tun werde, ist, dass Sie nicht gesehen haben, dass das Bild und der Text hier ziemlich groß sind. Also lassen Sie uns im Grunde ihre Größe verringern. Also hier werde ich auf den Elementselektor klicken, und ich werde das Bild auswählen. Lassen Sie mich die Breite des Abschnitts leicht vergrößern. Und die coole Sache ist, dass man hier sehen kann, dass w0 den Pfad zu diesem bestimmten Bild hat. Wir müssen nicht gehen Tür Index von Land manuell den Standort unserer Ära Bild finden. Die Bildauswahl stellt automatisch den Teil dieses bestimmten Bildes zur Verfügung. Also werde ich einfach diesen speziellen Pfad von hier und hier in unserer Medienabfrage kopieren , fügen Sie ihn ein. Und ich werde seine Breite auf 260 Pixel verringern. Wenn ich es speichere, können Sie sehen, dass die Größe verringert wurde und jetzt gibt es auch die Größe unserer Röntgenaufnahme hier ändern. Es sieht eigentlich ziemlich groß aus. Auch hier möchte ich unseren Text auswählen. Und hier können Sie sehen, dass wir den gesamten Weg zu diesem speziellen Bereichstext haben. Ich werde es kopieren. Gehen wir zurück zur style.css. Und hier werde ich es einfügen. Und ich werde die Schriftgröße auf fast Platz reduzieren. Und wenn ich es hier speichere, können Sie sehen, dass die Knotengröße ziemlich lustig aussieht. Aber Sie können sehen, dass das Bild und der Text wirklich nah am oberen Teil der Seite ist. Wir müssen ein B liefern sagt oben Polsterung, oben. So wissen wir, dass diese besondere Ende schrecklichen elementaren Seiten innerhalb des Helden Abschnitt. So ähnlich können wir ein wenig Polsterung oberen Tür Held Abschnitt bieten. Also hier werde ich den Heldenbereich auswählen und das ist eine Polsterung oben von 10 rem. Lass es uns retten. Und jetzt sehe ich, dass wir genügend Platz im oberen Teil unseres Bildes und des Textes haben. Also Jungs, Sie können sehen, dass das Bild und der Text 3D-Klausel am linken Rand unserer Seite ist. Und lassen Sie uns auch ein wenig Polsterung auf unserem Heldenbereich bereitstellen , so dass sich mindestens zwei Elemente in der Mitte dieser bestimmten Seite befinden. Also hier werde ich eine Polsterung zur Verfügung stellen. Links hätte ihn fast gefeuert. Und wenn ich es speichere, können wir sehen, dass jetzt das Bild und der Text am Bett Sender dieses bestimmten Abschnitts ist. Und nun lassen Sie uns zum zweiten Abschnitt gehen, der so der Abschnitt Über mich ist. Und hier werde ich die Größe des Bildes leicht reduzieren. Also wieder möchte ich das Bild auswählen. Und hier können Sie dann diesen Pfad sehen, ich werde ihn kopieren. Also, genau hier, lassen Sie uns auseinander kleben. Also hier werde ich die Höhe auf fast 400 Pixel reduzieren. Und ich möchte dieses besondere Bild auch leicht nach rechts bringen , denn hier gibt es viel Freiraum. Also werde ich morgen eine Polsterung zur Verfügung stellen. Ja. Nun, wenn das Bild perfekt aussieht und der Text bereits gut aussieht, ist es lesbar und befindet sich auch in der entsprechenden Position. Und wir sind fertig mit dem Abbruchteil, Aspirin. Also Jungs, jetzt lasst uns zu meinem Fähigkeitenabschnitt hier gehen. In der Mäuse-Kills Sektion können Sie sehen, dass wir drei Karten in einer Reihe haben, so dass die Wachen nicht genügend Platz haben. Lassen Sie uns nun versuchen, zwei Karten in einer einzigen Zeile zu machen. Also zuerst möchte ich sagen, wie das Endokard hier. Und hier können Sie sehen, dass wir ein Raster zur Verfügung gestellt haben und WAS drei Elemente in einer einzigen Zeile angegeben. Und lassen Sie uns versuchen, das auch zu benutzen und zu sehen. Und wie Sie jetzt sehen können, sieht es ziemlich gut aus. Das sind zwei Karten in einer einzigen Zeile. Und beachten Sie, dass. Also werden wir den Code von hier kopieren, das ist der Pfad. Lassen Sie es uns hier einfügen. Wieder. Ich werde auch die Rastervorlagenspalten und den Platz kopieren, um es zu speichern. Ja, ja. Jetzt ist der Skill-Abschnitt sieht ein Schlüssel in Ordnung. Und nun gehen wir zum Projektabschnitt. Für diesen Abschnitt sieht auch beide gleich gut aus. Nun, wenn Sie wieder in den Blog-Bereich gehen, sehen Sie, dass wir im Grunde drei Karten hatten, aber jetzt nur zwei Karten, die sichtbar sind. Wieder werde ich dieses spezielle Gebiet Wachen von hier aus wählen. Und ich werde die Rastervorlagenspalten als eins angeben. Weil wir nicht wirklich drei Karten haben. Und wenn ich spezifiziere, wird man einen Gott in einer Reihe haben. Das ist wieder, sehen Sie, so sieht es jetzt aus. Also eigentlich müssen wir einige leichte Änderungen an diesem speziellen Bereich, meinem Blog-Abschnitt, vornehmen. Also zuerst werde ich P den Weg von hier nennen. Lassen Sie es uns hier drüben kleben. Und das ist auch Kopie. Die Vorlagenspalte wird kopiert und eingefügt. Und lassen Sie uns auch eine Gitterlücke von fast vier rem bereitstellen. Lass es uns retten. Und da er die Daten hat, dehnt sich das Bild nicht bis zum Ende des pH-Wertes aus. Also müssen wir einige leichte Änderungen in unserem CSS vornehmen, um das zu erreichen. Also Jungs, jetzt gehen wir zu unserer CSS-Datei und lassen Sie mich den ganzen Weg nach oben scrollen auf dem Blatt finden meinen Blog-Abschnitt. Hier beginnt also der MyBlock Abschnitt. Und wenn wir unseren Index überprüfen, während Sie sehen können, dass sich das Bild in der Auto-Armaturenbrett-Wrapper befindet. Also lassen Sie es mich kopieren. Und hier möchte ich im Grunde meinen Block, den Kartenwickler, die Karte und das Bild darin auswählen . Und ich werde eine Breite von 100 Prozent und einen hohen Trog zu 100 Prozent liefern. Und wenn ich es hier speichere, können Sie sehen, dass jetzt das Problem behoben ist. Wir haben das Bild bis zum Ende dieser Karte gestreckt. Das macht den MyBlock Abschnitt auch perfekt. Jetzt haben wir die Kontakt-Me-Sektion, die auch perfekt ist. Und die Standardergebnisse sehen perfekt aus. So haben wir jetzt das responsive Design unseres iPad-Viewports abgeschlossen, das ein bisschen von fast 768 und eine Höhe von 12 bis 24 hat. Es sieht ganz gut aus. Das Navigationsmenü funktioniert einwandfrei. Und insgesamt sieht die Website in diesem besonderen Seitenverhältnis wirklich gut aus. Und nun gehen wir weiter, um unsere diskreten Verhältnisse reaktionsschnell zu machen. Also Jungs, jetzt kommen wir auf das responsive Design unseres mobilen Geräts. Hier werde ich iPhone 6, 7 und 8 wählen. Und hier können Sie sehen, dass unsere Website wieder ein vollständiger Mythos ist. Die Dinge sind überall herum. Schutzseite, verlegt. Hälfte der härtesten, im Grunde nicht einmal sichtbar. Und jetzt lassen Sie uns im Grunde diesen speziellen mobilen View-Port unserer Website stylen. Also jetzt gehen wir zu unserer style.css. Und gleich am Ende unserer ersten Medienabfrage. Und wir erstellen unsere zweite Medienabfrage, die eine maximale Breite von fast 576 Pixeln haben wird. Und lassen Sie uns die Medienabfrage öffnen. Also, wenn unser View-Port einen Burritos von weniger als 576 erreicht, wird dieser spezielle Akkord ausgelöst, also speichern wir ihn. Und wenn wir unsere Website überprüfen, können Sie sehen, dass das Heldenbild und der Text in einer einzigen Zeile sind. Und wenn ich das Bild hier auswähle, können Sie sehen, dass die Heldendivision eine Flex-Eigenschaft angewendet hat. Wenn wir also die Flex-Richtung in Spalte ändern könnten, können wir diesen bestimmten Text in den unteren Teil des Bildes bringen. Also, was ich tun werde, ist, dass ich den gesamten Heldenbereich auswählen werde. Und ich werde eine Flexrichtung der Spalte zur Verfügung stellen. Wenn ich es jetzt speichere, befindet sich der Text im unteren Teil des Bildes. Und hier können Sie sehen, dass wir im Hundenteil viel Freiraum haben. Lassen Sie uns dieses Bild ein wenig auf die Oberseite bringen. Also werde ich das Bild auswählen. Hier sehen Sie, dass sich das Bild in der linken Teilung befindet. Also unsere Kopie, dieser spezielle Code von hier, diese Basis tat. Und ich will eine Margenspitze von fast minus fünf Rem geben. Und wenn ich es hier speichere, können Sie sehen, dass das Bild an der Oberseite etwas bekannt ist. Und jetzt lassen Sie uns im Grunde diesen speziellen Text stylen. Also zuerst werde ich den Text auswählen. Hier können Sie sehen, dass sich der Text im Wesentlichen in der richtigen Teilung befindet. Also werde ich den Code von hier kopieren und ihn einfügen. Also das erste, was ich tun möchte, ist anfangen. Sie werden sehen, dass der Text wirklich nah am Bild ist. Ich will ein bisschen Polsterung oben geben. Also werde ich eine Polsterung Darpa in erster Linie geben, die Trommel. Nun hat der Text etwas Abstand zwischen dem Bild. Und ich werde den Text im Absender so ausrichten, dass er viel besser aussieht. In diesem Fall können Sie sehen, dass der Text Selbstmord ist und der Boden auf die andere Seite muss. Also, wenn ich Text-Align-Zentrum zur Verfügung stelle, sollte es tatsächlich gut aussehen. Ja, ja. Jetzt für den Text und die Schaltfläche ist alle in einer Sender-Minute mit wollen, noch DC Totalität und schreckliche Teilung Knie in Richtung dieser rechten Seite des Bildschirms skizziert . Und lassen Sie uns tatsächlich ein bisschen Polsterung richtig bieten, um es in der Mitte dieses Abschnitts zu machen. Es wird also bereitgestellt, indem der richtige Standard am meisten ausgeführt wird. Und wenn ich es speichere, werden Sie diese Null sehen, wenn der Text in der Mitte des Abschnitts ist. Und es wurde auch auf eine Einbettung in das Bild als auch angewendet. Also werde ich ein leitendes Licht bis fast RAM zur Verfügung stellen. Alles klar, jetzt für das Bild und der Text ist irgendwie in der Mitte. Jetzt hier können Sie sehen, dass dieser spezielle Clip-Pfad, müssen wir leicht den Wert senken. Also, wenn ich diesen bestimmten Abschnitt auswähle, und wenn ich den Header hier wähle, können Sie sehen, dass dies der Clip-Topt ist. Lassen Sie uns also grundsätzlich Ihre unterschiedlichen Werte ausprobieren. Also werde ich diesen besonderen Wert erhöhen. Also, was Sie sehen werden, dass 95 im Grunde eine gute Krümmung bietet. Also werden wir den Header auswählen und ich werde diesen bestimmten Wert kopieren. Also hier lassen Sie uns den Header auswählen und lassen Sie uns den Clip-Pfad zur Verfügung stellen. Wenn ich es rette. Jetzt haben wir die perfekte Krümmung. Also, jetzt gehen wir zum Flughafenabschnitt. So hier können Sie sehen, dass wieder, wir haben eine Flex und dass die Flex-Richtung ist nicht wachsen in sind die Gene, die eine Säule. Also wieder, ich werde diesen bestimmten Abschnitt auswählen. Und hier können Sie sehen, dass wir einen Flex angewendet haben. Also, wenn ich den Container von hier aus wähle, gehen wir zurück zu unserer style.css. Und wir werden den Container auswählen und wir werden die Flex-Richtung in Spalte ändern . Speichern Sie es. Sie können sehen, dass wir das Bild oben und der Flughafen kann Text und unten. Aber jetzt sollten wir diese Texte in der Mitte ausrichten. Also lassen Sie uns es von hier aus wählen. Der Text befindet sich also in der rechten Teilung des obigen. Also werde ich diesen speziellen Code von hier kopieren. Und fügen wir es hier ein. Und ich möchte unseren Text ausrichten Zentrum. Nun, wenn die Texte in der Mitte sein sollten, ja. Jetzt haben wir den Text in der Mitte. Und eine andere Sache zu beachten ist, dass wir diese sozialen Symbole nach links haben. sollten wir auch in der Mitte tun. Jetzt wählen wir das aus. Und du wirst sehen, dass wir eine Klasse sozialer haben. Also wieder, die grausamen Symbole befinden sich in der richtigen Abteilung. Also lassen Sie uns einfach diesen bestimmten Code von hier kopieren, ihn einfügen und auch die soziale Teilung Aspirin wählen. Und lassen Sie uns diese definieren Inhalt zentriert. Jetzt sind sie zentriert. Okay, jetzt, wenn das Board Me Abschnitt sieht vordefinierte VM-Kabel, das Bild, der Text z ist in der Mitte. Die Symbole sehen auch gut aus. Jetzt gehen wir zum Skills Abschnitt direkt hier. Und das erste, was ich tun werde, ist zweifellos diese besondere Krümmung zu reparieren. Also wieder, ich möchte die Fähigkeiten plus auswählen, und hier wieder, um den NDI Clip-Pfad zu sehen. Und zuerst, lassen Sie uns diesen speziellen Code von hier kopieren. Und wir werden die Fähigkeiten auswählen. Also, hier, wählen wir die Fähigkeiten und basierend auf, und jetzt lassen Sie uns versuchen, einige Werte hier und sehen, wie wir im Grunde die Krümmung ausrichten können. Faszikel, ich möchte hier den ersten Wert auswählen. Dies verringert es im Grunde auf 70. Und lassen Sie uns auch den zweiten Wert auf fast zwei ändern. Okay, nein, das funktioniert nicht perfekt. Das ist also 70 N2 für die ersten beiden Werte, 70. Und um es zu retten, und die Krümmung sieht perfekt aus. Jetzt in Skill Abschnitt, können Sie sehen, dass wir müssen verschiedene Farben in einer einzigen Zeile zu tun. Bartleby kann den zweiten Gott nicht sehen. Was wir also tun können, ist, dass wir eine Karte auswählen können und wenn wir die Rastervorlage in eine ändern könnten, sollte sie tatsächlich gut aussehen. Lasst uns eins versuchen. Ja, es sieht vollkommen gut aus. Also wieder, lassen Sie uns dieses bestimmte Teil auswählen. Und hier, dass der Umfang die Rastervorlagenspalten sein. Und die Wiederholung für nur einen Cent. Also, um es zu retten. Und das sieht auch perfekt aus. So ist der Fähigkeitsabschnitt fertig. Nun, wenn Sie zum Block gehen, sorry, der Projektabschnitt, müssen wir grundsätzlich die Größe des Bildes ändern. Also nochmal, ich werde das Bild auswählen. So befindet sich das Bild in Schiebereglern Licht UND mich. Also lasst uns das kopieren und es hier drüben einfügen. Also werde ich die Höhe auf 200 Pixel ändern. Und lassen Sie uns das auf 300 Pixel ändern. Es rettet es, und das sieht ziemlich gut aus. So ist die Produktion Abschnitt im Grunde auch getan. Gehen wir nun zum Abschnitt „Mein Blog“. Dass mein Blogbereich jetzt auch vordefiniert ist. Und dass die Münze zurück Mittelteil. Hier müssen wir einige leichte Änderungen vornehmen. Sie können sehen, dass die E-Mail noch vollständig sichtbar ist. Also haben wir im Grunde eine großartige Formel zur Verfügung gestellt. Diese beiden Soldaten waren alle getickt. Also lassen Sie mich es auswählen. Und hier wirst du sehen, dass wir FOR zur Verfügung gestellt haben, das heißt, das wird sich für zwei Mal wiederholen. Und wenn ich entfernen, und deshalb, jetzt können wir sehen, dass Daten URI Milhouse in die zweite Zeile gegangen ist und lassen Sie uns einige leichte Änderungen, um diese spezielle Lücke hier zu beheben. Also lassen Sie mich das kopieren, fügen Sie es hier drüben ein. Und ich werde diesen Code von hier kopieren und einfügen. Und auch weniger reduzieren Sie die Gruppe Strichlücke auf 0. Speichern Sie es. Und wenn ich das zweite Element hier auswähle, können Sie sehen, dass wir einen Rand oben fast dreimal haben. Also kopieren Sie einfach diesen speziellen Topf eingefügt. Und lassen Sie uns den Rand oben auf ein Rem reduzieren. Und wenn ich es speichere, jetzt haben wir eine ausreichende Menge an Platz auf unsere Jungs wissen, dass wir im Grunde mit dem kompletten responsiven Build aus unserer mobilen Version fertig sind. Und das sieht meiner Meinung nach vollkommen gut aus. So können Sie auch einige leichte Verbesserungen machen, um es so zu machen, wie Sie wollen. So können Sie auch die Größe dieser Bilder reduzieren, die Sie bieten können. Wir können viele andere Dinge tun, um es noch besser zu machen. Also liegt es an dir. Und das ist wieder, siehe, der Kopf sieht ziemlich gut aus. Die Dinge sind an Ort und Stelle. Wir haben die schlechteste durchschnittliche Anzahl von Abständen. Der gesamte Text kann leicht sichtbar sein, n, die leicht gelesen werden kann. Und die Augen sehen ziemlich gut aus. Wenn ich also auf den Hamburger hier klicke, kann man sehen, dass dieses besondere Symbol viel auf der linken Seite ist. Lassen Sie uns also auch leicht seine Position anpassen. So in unserem ausgewählten. Also werde ich die Zeiten nur einen Cent speichern das Bild auswählen. Also werde ich es nach rechts auf fast 30 Pixel verschieben. Ich rette es. Ja, jetzt ist es in der perfekten Position, obwohl Jungs, es sieht eigentlich perfekt aus. Jetzt gehen wir zur nächsten Stufe. Also Jungs, im Moment bin ich in der Desktop-Ansicht unserer Website und Sie können sehen, dass wir den Hamburger-Button sichtbar haben, aber es sollte nicht hier sein. Ich weiß, dass der Hamburger-Button deaktiviert sein sollte oder standardmäßig ausgeblendet werden sollte, dies sollte sichtbar oder lib und die Breite des Ansichtsfensters kurtosis 1024 Pixel sein. Um diesen Fehler zu beheben, gehen wir zu style.css. Und direkt in unserer Website Dash, Dash Rapper Dot Hamburger, werde ich Anzeige keine bieten. Wenn ich es jetzt rette, wirst du sehen, dass alle Hamburger nicht mehr sichtbar sind. Und ich werde diesen speziellen Topf kopieren. Gehen wir zu unserer Medienabfrage, wo das Maximum 1024 ist. Und hier, lassen Sie uns auseinander kleben. Und das ändert die Anzeige zu blockieren. Jetzt, wenn ich es speichern und ich, wenn ich das Entwickler-Tool hier öffne, können Sie sehen, dass das aktuelle Budget 12 57 ist und der Moment, wenn die nächste 1024. Und wieder sehen, dass der Hamburger aber dann genau so spezifisch ist und es wird nicht sichtbar sein. Linda hemmt die Daten dann, wenn 0 bis vier Pixel. Beachten Sie also, dass der Fehler auch behoben ist und alles perfekt funktioniert. Und das nächste, was wir reparieren müssen, ist gefesselt. Wenn wir das Navigationsmenü öffnen, klicken wir auf einen dieser Links. Im Grunde passiert nichts. Jetzt Ort das Vlies, dieses besondere Thema als auch. Also richtig, Nein, Gehen wir zu index.html. Und hier können Sie sehen, dass dies die Navigationsmenüs, Links sind. Und Sie haben keinen Standort in unserem HF. Und wenn Sie hier nach unten scrollen, können Sie sehen, dies sind die Navigationsleisten Links. Und wenn Sie sich erinnern, haben wir ID obwohl diese verschiedenen Abschnitte zur Verfügung gestellt. Und lassen Sie uns einfach diese IDs auf diesen speziellen Link im Navigationsmenü Aspirin kopieren. Also lassen Sie es mich kopieren. Lass es uns retten. Und jetzt, wenn wir auf unsere Website gehen und wenn ich das Navigationsmenü öffne und wenn ich auf Fähigkeiten klicke, ist im Grunde nichts passiert. Aber wenn ich dieses spezielle Navigationsfenster schließe, können Sie sehen, dass wir im Abschnitt Fähigkeiten sind. Und das ist eigentlich ein kleines Problem. Das heißt, wenn ich auf einen dieser Links klicken , die Navigation Bürgermeister noch auf eigene Faust schließen, aber das bringt uns tatsächlich an den gewünschten Ort. Lassen Sie uns nun auch dieses spezielle Problem beheben. Also, um dieses regelmäßige Shoeing zu beheben, verwenden Sie JavaScript läuft wieder. Also vorher, lassen Sie uns eine Klasse zu all diesen verschiedenen Links geben , so dass wir diese verschiedenen Links auswählen können, Euler Winkel, Tags, Art und Weise ich JavaScript. Also hier werde ich ein Glas Klick geben. Und jetzt zweitens, in diesem speziellen und Daten zu erhalten, werde ich ein Glas Glick Strich eins geben. Lassen Sie mich es kopieren. Lassen Sie uns dasselbe für den dritten Hunger DAG-Klassennamen des Klickstrichs T2 für verheddert Tag mit der Klasse von Glick Strich drei und das letzte Anker-Tag mit der Klasse des Klick-Dashboard tun Klickstrichs T2 für verheddert Tag mit der Klasse von Glick Strich drei . Jetzt speichern wir es, und jetzt gehen wir zu unserem JavaScript und wählen Sie jeden einzelnen Anker-Tags. Also lasst uns zu app.js gehen. Und genau hier werde ich einen Unterbauch unter vier Klicks erstellen. Und wir werden zu dokumentieren und QuerySelector. Wir werden unsere Klasse wählen sollte fallen. Und zweitens werde ich eine andere Variable für unseren zweiten ewig zweiten Anker-Tag erstellen. Also lassen Sie es uns runterlegen, es, benennen Sie es um. Also werde ich auf Strich T2 klicken, um vielleicht auf Strich eins zu klicken. Und sie wollen das Glas hier ersetzen. Und ich werde genau dasselbe für all diese verschiedenen Links tun. Also haben wir hier einen kleinen Tippfehler gemacht. Ich werde diese Klasse umbenennen hat Klick Dashboard. Und jetzt lassen Sie es uns retten. Speichern Sie das JavaScript, wie wir wissen, lassen Sie mich dies in diesen bestimmten Bereich bringen. Und hier, was wir tun wollen, ist, dass, wenn wir auf diesen speziellen Link klicken, wir wollen, dass dieses spezielle Navigationsmenü Glanz. Und wir haben eine blau gewichtete, genau die gleiche Folie, Alberta brutto pro Jahrzehnt auch. Das ist, wenn wir auf über Kreuz klicken, wir sind im Grunde entfernen das offene Glas aus der mobilen jetzt dunklen Klassenliste. Es gibt also ein Gleichgewicht, das gleiche Konzept für all diese verschiedenen Cliquen. Also werde ich diesen speziellen Code von hier kopieren. Lassen Sie es uns einfügen. Und ich werde das erste Element auswählen. Lassen Sie uns es dort einfügen, eine Kopie des Codes erhalten. So venial love 1234 mehr gut. So sind sie ausgewählt und während Drücken und Halten und alle Zeitverschiebung Demo, Placido nicht leisten vier weitere Male. Und jetzt lasst uns einfach ändern. Der Variablenname Wird geklickt Strich eins. Jetzt müssen wir klicken, um drei und vier Woche auszuwählen. Wenn ich es nun speichere, gehen wir zurück zu unserer Website und öffnen dann das Navigationsmenü. Und wenn ich auf Projekte klicke, können Sie sehen, dass das Navigationsfenster automatisch geschlossen wird und wir uns im Projektabschnitt befinden. Lassen Sie uns das für unseren Blogbereich tun. Und es funktioniert perfekt. Also, das war's, Leute. Endlich haben wir unsere Website fertiggestellt. Es ist völlig reaktionsschnell für jede Art von Bildschirmgrößen, und sie können im Grunde mehr Medienabfrage hinzufügen und diese Website als auch anpassen. Ich habe Formel im Grunde zwei verschiedene Bedingungen datiert. Jetzt ist die ADB-Porthöhe kleiner als 1024 Pixel und kleiner als von ISMB, sechs Pixel. Wenn Sie also bestimmte Stiefel haben, können sie im Grunde das gleiche Konzept implementieren. Und Sie können Ihren Vorsprung anpassen und letztlich Ihre Website für jede Art von Bildschirmverhältnissen reaktionsschnell machen. Ich habe Ihnen im Grunde eine grundlegende Vorstellung davon gegeben, wie Sie Ihre Apps reaktionsschnell oder eine bestimmte Ansichtsfensterbreite machen können . Also, das war's, Leute. Danke fürs Ansehen und ich sehe euch im nächsten Video. 15. CV erstellen: Hallo Leute, willkommen zum Video. In diesem Video werden wir unseren Download-Button zum Funktionieren bringen. Wie Sie das jetzt sehen können, passiert im Grunde nichts, wenn wir auf den Download-Button klicken wenn wir auf den Download-Button klicken. Aber in diesem speziellen Video werden wir unserer Abwärtsschaltfläche Funktionalität hinzufügen unserer Abwärtsschaltfläche Funktionalität , so dass eine Belastungsnummer, wir klicken darauf, ich werde fortfahren, sie wird automatisch heruntergeladen. Es ist im Grunde ein Symbol Impulse. Das erste, was ich tun werde, ist, dass ich meinen Lebenslauf im Grunde meiner Projekthäufigkeit hinzufügen werde Projekthäufigkeit , dass dies im Grunde mein Projekt ist. Wir haben die Indexdatei, CSS-Dateibilder, JavaScript und all das Zeug genannt . Was ich tun werde , ist, dass ich meinen Lebenslauf einfach per Drag & Drop ziehen möchte . Es ist im Grunde eine PDF-Datei auf mein Projekt. Im Moment habe ich meinen Lebenslauf oder mein Projekt und kann ihn hier neu definieren. Wir haben mein Dezimeter-PDF genau hier. Jetzt sind wir in unserer Indexdatei. Wenn du einen Blick darauf wirfst, sind wir gerade in unserer Heldenabteilung und im Fiscal Down. In unserer rechten Abteilung haben wir unseren Download-CPE-Button. Wir werden unseren Download-Prozess mit Hilfe des Anker-Tags durchführen lassen. Was ich also tun werde, ist innerhalb der Division zu beginnen, ich möchte ein Anker-Tag erstellen. Also gebe ich eine ein und drücke die Tabulatortaste im Extra, ich gebe den Namen meiner PDF-Datei an, da sie sich im selben Verzeichnis befindet. Also muss ich nur den Namen der Datei angeben. Der Name meines PDFs ist also meine Adresse. Sie können PDF-Dateien erstellen. Also habe ich schon Aufruhr bekommen, also wurde ein 100% meines Körpers meine Akte ausgewählt. Das nächste, was ich tun werde, ist, dass ich ein Diagnose-Download-Tag verwenden möchte , tut mir leid, das Tag herunterladen. Download-Tag ist also im Grunde ein HTML5-Tag. Was auch immer ich im Dollarsterben angebe, wird zum Beispiel der Name sein , der zum Herunterladen der Datei angezeigt wird, und rendern, vorausgesetzt, wenn ich auf den Dollar-Button klicke, der Name der Datei, die dieses WOW ist, sind wir vorausgesetzt, diese Woche wird klarer, wenn Sie die praktische Umsetzung sehen. Jetzt in unserem Anker-Tag und ich füge unseren w dot cv Button ein. Lassen Sie uns das Leerzeichen entfernen und speichern. Wenn ich jetzt auf die Website zurückkehre und auf eine Bestellschaltfläche doppelklicke, können Sie sehen, dass unsere Datei überlastet wurde. Und wie ich bereits sagte, haben wir den Download-Namen als Fortsetzung angegeben. So wird der Name der herunterladbaren Datei erneut einreichen oder PDF sein. Es ist so einfach wie diese Domain-Download-Button-Funktion. Das sind also die Jungs, danke fürs Zuschauen und wir sehen uns im nächsten Video. 16. Schlussbemerkung: Hallo, Jungs. Vielen Dank für das Tuning, um bis zum Ende. Wenn Sie nicht über all diese Videos zu diesem speziellen finalen Video gekommen sind, zeigt es Ihre Hingabe und Ihre Leidenschaft für Technologie ist lobenswert. Und das erste, ich hoffe wirklich, dass ihr diesen speziellen Kurs genossen habt. Und mehr als das, dachte ich, dass ich in der Lage war, den gewünschten Wert zu liefern. Also nochmals vielen Dank für das Anschauen, und ich hoffe wirklich, euch in einem anderen Video unter der beschleunigten Onsen Abmeldung zu sehen.