Website Design Erstellen einer einzigen Seite Website Parallax | Laurence Svekis | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Website Design Erstellen einer einzigen Seite Website Parallax

teacher avatar Laurence Svekis, Best Selling Course Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

24 Einheiten (2 Std. 13 Min.)
    • 1. Website Design Erstellen einer einzigen Seite Website Parallax

      2:04
    • 2. 1 Parallax Seite Site Einführung

      2:53
    • 3. 2 Kursressourcen

      7:35
    • 4. 3 Erstellen eines Wireframe der Website

      6:08
    • 5. 4 HTML-Struktur Navmenu erstellen

      5:28
    • 6. 5 HTML erstellen

      5:08
    • 7. 7 Placeholder

      3:18
    • 8. 8 CSS auf HTML anwenden

      4:26
    • 9. 9 So erstellen Sie eine Navbar aus UL

      8:08
    • 10. 10 Full und background Standardwerte

      6:05
    • 11. 11 Hintergründe hinzufügen

      4:46
    • 12. 12 Machen Sie Ihren Text hervorragend.

      4:59
    • 13. 13 Verändern der Navbar für reaktionsschnelle Effekte

      8:02
    • 14. 14 Responsive Updates und Korrekturen

      8:23
    • 15. 15 Navbar für kleine Bildschirme

      3:25
    • 16. 16 Hinzufügen von Footer und updating

      7:36
    • 17. 18 Hinzufügen von jQuery erstellen von event

      7:09
    • 18. 19 jQuery binding Ereignisse

      3:12
    • 19. 20 Symbolbibliothek hinzufügen

      2:33
    • 20. 21 Animate Scrollen mit jQuery

      8:31
    • 21. 22 Slidemenu oben jQuery

      3:08
    • 22. 23 Parallax-Effekt hinzufügen

      6:37
    • 23. 24 Kontaktformular erstellen

      9:56
    • 24. Zusammenfassung der 25 Einzelseiten der Parallax

      3:14
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

330

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Schritt für Schritt Anleitung zum Erstellen einer modernen single von Grund auf neu

Du möchtest dein Web-Portfolio aufstellen und dein Wissen über das Webdesign erweitern?

Vor kurzem das Trendthema der Parallaxe beinhaltet, dass der Hintergrund in einer anderen Rate zum foreground bewegt wird. Dadurch entsteht ein interessanter Effekt, wenn der Besucher die Website herunterscrollt.

In diesem Kurs stellen wir das Konzept des Webdesigns für moderne Websites vor. Erstellen eines HTML-Frame, Hinzufügen von CSS-Styling und dann Anwendung dynamischer Interaktion über jQuery.

Dieser Kurs ist perfekt für alle, die sich über das Webdesign informieren und wie du moderne benutzerdefinierte Websites von Grund auf erstellen kannst. Alles, was du brauchst, ist in diesem Kurs enthalten. Lerne in diesem einzigartigen projektbasierten Lernkurs heraus, wie alles zusammenpasst.

Erstellen Sie ein echtes Webprojekt und fügen Sie coole Animationseffekte hinzu. Dieser Kurs ist so konzipiert, dass du Schritt für Schritt beibringst, was jede Codezeile tut, wie und wo du den Code anwenden kannst, um die gewünschten Ergebnisse zu erzielen.

  • Dieser Kurs bietet alles, was du brauchst, um mit dem Webdesign zu beginnen.
  • Projekteinführung und -planung
  • Schritt für Schritt lernen über das Webdesign
  • HTML-Seite Strukturieren der Gestaltung deiner Website-Vorlage
  • Erstellen der richtigen Struktur für die Vorbereitung auf CSS
  • CSS auf die styling anwenden
  • Creating in deiner Website
  • jQuery für dynamische interaktive Inhalte hinzufügen
  • Hinzufügen von Animationen zum Scrollen
  • jQuery zum Überprüfen des viewer für den Betrachter zum Erstellen von aktiver navbar
  • CSS verändern und aktualisieren

Was du bekommst

  • Schritt für Schritt lernen
  • Quellcode ist enthalten
  • Die besten Ressourcen bereitgestellt
  • Arbeiten mit den Kursen
  • HD-Qualität video
  • Professioneller erfahrener Lehrer

Dieser Kurs umfasst Webdesign mit einer Einführung in die Verwendung von jQuery für fortgeschrittene
web Ende des Kurses hast du die Fähigkeiten und wissen, wie du eine Website erstellen
kannst.Ich bin hier, um dir dabei zu helfen, wie du deine eigenen Websites erstellen und bereit bist, alle Fragen zu beantworten, die du vielleicht
have.Want mehr wissen, worauf du warten kannst, wenn du den ersten Schritt hast. Beginne jetzt, um zu lernen, wie du auch heute Websites erstellen kannst.

Triff deine:n Kursleiter:in

Teacher Profile Image

Laurence Svekis

Best Selling Course Instructor

Kursleiter:in

Web Design and Web Development Course Author - Teaching over 1,000,000 students Globally both in person and online.    Google Developer Expert since 2020 GDE

I'm here to help you learn, achieve your dreams, come join me on this amazing adventure today
Google Developers Expert - GSuite

Providing Web development courses and digital marketing strategy courses since 2002.

Innovative technology expert with a wide range of real world experience. Providing Smart digital solutions online for both small and enterprise level businesses.

"I have a passion for anything digital technology related, enjoy programming and the challenge of developing successful digital experiences. As an experienced developer, I create... Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Website Design Erstellen einer einzigen Seite Website Parallax: Sie möchten Ihr Web-Portfolio aufbauen und Ihr Wissen über Webdesign erweitern. Kürzlich trendende Web-Design-Konzepte wie Parallax, die Hintergründe bewegen sich mit unterschiedlichen Raten im Vordergrund Content erzeugt einen interessanten Effekt. In diesem Kurs zeigen wir Ihnen, wie Sie diesen Webeffekt in Ihrem eigenen Webprojekt erstellen können. Wir werden das Konzept der Web-Design für moderne Websites vorstellen, in jedem Team l Frame erstellen CSS Styling hinzufügen und dann dynamische Interaktion mit Jay Query anwenden . Dieser Kurs ist perfekt für alle, die etwas über das Webdesign lernen und wie man moderne benutzerdefinierte Websites von Grund auf neu erstellen möchte . Alles, was Sie brauchen, ist in diesem Kurs enthalten. Erfahren Sie, wie alles in diesem einzigartigen Projekt zusammenpasst. Face Lernerfahrung. Erstellen Sie ein echtes Website-Projekt und bei coolen Animationseffekten. Dieser Kurs soll Ihnen Schritt für Schritt beibringen, was jede Codezeile tut, wie und wo Sie den Code anwenden, um die gewünschten Ergebnisse zu erzielen. Dieser Kurs bietet alles, was Sie brauchen, um mit Web-Design, Projekteinführung und Planung zu beginnen , Schritt für Schritt Lernen des Web-Design jeder Seite Strukturierung schmelzen, Gestaltung Ihrer Website Vorlage. Erstellen einer richtigen Struktur, um sich auf CSS vorzubereiten, dann CSS und Stil auf Ihre Website anzuwenden. Erstellen von Effekten innerhalb Ihrer Website, Hinzufügen von J. Cree für dynamische interaktive Inhalte, Hinzufügen von Animationen zu Eichhörnchen und dann mit J. Coury, um die Position des Betrachters zu überprüfen, um eine aktive Now-Bar Tweaking und Aktualisieren Sie Ihr CSS. Sie erhalten in diesem Kurs Schritt für Schritt lernen. Der Quellcode ist enthalten. Talk-Ressourcen arbeiten neben den Lektionen HD-Qualität Video professionelle erfahrene Unterricht. Dieser Kurs behandelt das Webdesign in einer Einführung in die Verwendung von Jake Worry für erweiterte Funktionen. Am Ende des Kurses wirst du die Fähigkeiten haben und wissen, wie man eine Website erstellt. Ich bin hier, um Ihnen zu helfen, Ihre eigene Website zu erstellen und bereit, alle Fragen zu beantworten die Sie mehr wissen möchten. Worauf wartest du? Machen Sie den ersten Schritt, schließen Sie sich jetzt an und lernen Sie, wie auch Sie Ihre eigenen Websites heute erstellen können 2. 1 Parallax Seite Site Einführung: Willkommen zu unserem Kurs über die Erstellung und Gestaltung einer einzigen Seite Parallax-Website von Grund auf neu . Mein Name ist Lawrence, und ich werde Ihr Lehrer für diesen Kurs sein. Und ich bin so aufgeregt, die Möglichkeit zu haben, Ihnen diesen Kurs vorzustellen. Dies wird eines meiner Lieblingsprojekte sein, an denen ich gearbeitet habe. Und das wird eine wirklich ansprechende Website sein, die auch Sie erstellen können. Ich werde Ihnen zeigen, wie Sie dies Schritt für Schritt in diesem Kurs tun, wir werden beginnen, indem wir mit einem neuen originellen Design für die Website beginnen. Also werden wir das skizzieren, verdrahten frei, Mitte und bestimmen, wie wir es aussehen wollen und wie wir diese Website präsentieren wollen, die wir in unseren HTML-Code bekommen, entwerfen unsere HTML-Struktur und präsentieren unsere Struktur in einer Weise, dass wir es vorbereiten und bereit machen, unser CSS und unser Styling zu unserer Website hinzuzufügen und dann CSS hinzuzufügen, wird es all diese HTML-Struktur in eine tatsächliche Funktionsweise und eine tatsächliche -Site, die wie eine Website aussieht. Das ist also die Website, die wir von Grund auf neu aufbauen werden. Und wie Sie hier sehen können, ist diese Website voll ansprechbar. Also, wenn wir die Website neu dimensionieren, können wir sehen, dass es wird, um zwei verschiedene Bildschirmgrößen zu ändern. Es spielt also keine Rolle, ob es sich um einen kleinen Bildschirm oder einen großen Bildschirm handelt. Wir haben verschiedene Möglichkeiten, das Menü zu präsentieren, und wir sehen, dass die Scrolling-Funktionalität funktioniert. Und ich werde Sie Schritt für Schritt durch, wie man eine Website wie diese von Grund auf neu erstellt. Wir werden uns CSS und HTML anschauen, die zusammen arbeiten, und dann werde ich Jake vorstellen. Sorge A. J. Coury ist, wo wir diese erstaunliche animierte Funktionalität bekommen, wo wir diese zusätzliche Menüfunktionalität bekommen , wo es nach oben rutscht und einige wirklich schöne coole Effekte, die Ihre Benutzer und Ihre Website-Zuschauer wird wirklich zu schätzen s Oh, das ist alles innerhalb des Kurses zur Verfügung. Und wenn du mit Jay Query nicht vertraut bist, dann mach dir keine Sorgen, denn es wird wirklich leicht für die Jake Sorge sein. Ich werde nicht zu viel ins Detail kommen, und ich werde erklären, was jeder einzelne der J-Abfragebefehle tun wird und wie es sich auf unsere Website auswirken wird und ich werde Ihnen in Echtzeit zeigen, was es tut. Eso. Und wenn wir diese hinzufügen, werde ich Ihnen zeigen, welche verschiedenen Effekte innerhalb der Website und des Webprojekts sowie des CSS stattfinden werden. Als ein Nick im neuen CSS, werden Sie sehen, dass sich diese Website in eine tatsächlich nutzbare Website verwandelt. Also all das alles von Quellcode ist enthalten, dass ich Sie ermutige, es selbst auszuprobieren und zu sehen, was Sie aus dem, was Sie während des Kurses lernen, erstellen können. Also, wenn Sie bereit sind, lassen Sie uns beginnen, diese erstaunliche Website von Grund auf neu zu erstellen. 3. 2 Kursressourcen: Willkommen zu unserem Kurs zum Aufbau einer einzigen Seite Website von Grund auf neu. In diesem Kurs werden wir also eine Website aufbauen, die eine Parallaxe sein wird, die einen Parallax-Effekt für die Hintergrundbilder hat. Also einige der Ressourcen, die wir in diesem Kurs nutzen werden. Also werden wir Klammern als Editor verwenden. Wenn Sie also bereits einen Editor haben, können Sie diesen verwenden. Wenn du willst. Versuchen Sie etwas. Du kannst immer Klammern auschecken, aber ich werde Klammern verwenden und ich habe das hier auf der linken Seite innerhalb des Bildschirms s geöffnet Oh, das ist ein Open-Source-Editor von Adobe, und es ist ein wirklich netter Editor verwenden, um eine Website auf HTML-Inhalt, CSS und so weiter zu erstellen. Und das wirklich schöne Ding an Klammern. Es hat diese Lebensvorschau. Was es also tut, ist es mir erlaubt, Inhalte hier hinzuzufügen, und dann kann ich es in Echtzeit sehen. Es gibt eine wirklich nette Funktion, die in Klammern verfügbar ist, und ich werde dies auch innerhalb des Kurses verwenden. Eine andere Ressource, die ich verwenden werde, ist, dass ich jetzt Zampa benutzen werde. Sie müssen dies nicht unbedingt installieren. Dies ist nur für die Zwecke dieses Kurses, und ich habe es im Hintergrund laufen. Und was im Wesentlichen Beispiel ist, dass es mir erlaubt, einen Server im Hintergrund auszuführen, und dies gibt mir die Möglichkeit, zum lokalen Host zu gehen, der, , wenn auf das richtige Verzeichnis verwiesen wird, diesen Index automatisch anzeigt Seite. Also werde ich es benutzen. Ich habe den ganzen Kurs. Es wird nur im Hintergrund laufen. Wenn Sie daran interessiert sind, dies einzurichten, ermöglicht es Ihnen, eine PHP-Umgebung mit einer Datenbank und all den Schnickschnack zu erstellen , die Sie normalerweise auf einem Server in Ihrem lokalen Kreditrechner haben. Es ist also Windows, Linux und OS X verfügbar , und es hat viele Optionen. Und wie wir wissen, Sie bei der Entwicklung von HTML JavaScript und CSS brauchenSie bei der Entwicklung von HTML JavaScript und CSSnur einen Browser zum Ausführen, nicht Code, so dass Sie es nicht unbedingt installieren müssen. Aber es ist eine gute Sache, die Zehe haben, wenn Sie Websites entwickeln. Und was den Browser betrifft, den wir verwenden, werden wir Chrome verwenden. Und der Grund, warum ich Chrome verwende, ist, dass es diese Dev-Tools hier hat. Und was Tiefenduelle tut, ist, dass es uns zusätzliche Informationen über die Webseite gibt. So sehen Sie, wir haben das Box-Modell hier, so dass wir jedes Element auf unserer Webseite auswählen können, und wir können zusätzliche Styling-Informationen erhalten. Wir können Quellcode bekommen, haben Stil. Wir können sehen, welche Ereignis-Listener wir die Morgendämmerungspunkte sehen können, und wir können Eigenschaften sehen . Also Dawn Eigenschaften von der Website selbst, und wir sehen, dass wir alle diese Ereignis-Listener hier haben. Und im Wesentlichen, was Dawn Eigenschaften sind, ist, dass sie in JavaScript verwendet werden. Und das ist etwas, das Domus etwas, das vom Browser gebaut wird. Also, wenn es auf Ihre Website geht, also für diese Instanz Index dot html, liest es all diesen HTML-Code durch, und dann rendert es und erstellt, was das Dokumentobjekt genannt wird, das sich auf die Seite bezieht . Im Wesentlichen hat es alle Elemente, alle Eigenschaften jedes einzelnen Elements, und dann kommen wir in JavaScript zusammen und wir können das manipulieren. Also, das ist der Browser, den ich dieses Chrome verwenden werde und ich werde auch einige zusätzliche Ressourcen verwenden . Eso Ich werde hier einige Platzhalterbilder verwenden, weil wir einen Parallax-Effekt erzeugen . Also möchte ich ein Bild verwenden, weil dies der sichtbarste Teil dieses Parallax-Effekts sein wird. Wir werden es auch für Bilder mit der Polizei halten. Also finde ich, dass mit Loren Pixeln manchmal die Bilder ein wenig langsam geladen werden. S Also hier sind wir auf Platz gewechselt. Halten Sie es. Also machen beide dasselbe. Sie geben uns Platzhalterbilder und das ist ideal, wenn Sie Ihre Website entwickeln da dies Ihnen die Möglichkeit gibt, Platzhalter zu erstellen, wo, wenn Sie die Bildressourcen nicht zur Hand haben , dann könnten Sie einfach die Platzhalter in, und Sie können Ihre Website um das zu entwickeln und dann, wenn Sie die Assets erhalten, können Sie sie einfach in Ihre Website entlang der gleichen Zeilen wie Platzhalterbilder ablegen. Wir brauchen auch Platzhaltertext, also generiere ich nur etwas Laura itsu Text pro Bang Dot DK hat hier einen wirklich schönen Generator . Eso dort finden Sie eine Reihe von diesen online und diejenigen, die ich immer suchen, haben unsere Fähigkeit, es in HTML anzuzeigen. Quelle. Eso Wir sehen, dass einige von ihnen sie nicht in jeder 10 meisten Quelle angezeigt werden, so ist es ein wenig ärgerlich, wenn Sie diese Option nicht haben. Und deshalb wähle ich normalerweise die Generatoren, die es in HTML anzeigen können. Quelle. Wir haben hier einige Optionen für Absätze, Sätze, Wörter. Also diese Luft typischen Optionen und es schafft wirklich nur einen schönen Effekt, denn wenn wir in diesem nur Standard-leerer Text hinzufügen, ist es ein weiterer Platzhalter für unsere Website und lässt unsere Website aussehen wie eine echte Website anstelle von Nur ein leerer, leerer Campus. Und es ist auch schwieriger, um diese Leerzeile und eine der anderen Ressourcen zu entwerfen, die wir verwenden werden. Also habe ich eine Reihe von verschiedenen Tools so ziemlich jede Bildsoftware verwendet, in der Sie dies tun können . Ich meine, hier schaffen wir unsere Drahtrahmen. Sie können sogar ein Stück Papier nehmen und es mit einem Bleistift darauf schreiben. Skizzieren Sie einfach grob, wie Ihre Website aussehen sollte, wenn Sie anfangen, sie zu erstellen. So erstellen Sie das Mock up Ihrer Website s, so dass Sie eine bessere Gliederung haben können. Und wenn Sie Ihren Website-Code erstellen, den Sie in diesem Kurs in dieser Lektion entwerfen können , werde ich diesen hier verwenden. Mockups dot com app dot mark ups dot com Eso diese ein, ich glaube s ich bin gerade mit einer kostenlosen Version gerade jetzt. Einige sind sich nicht sicher, wie viel Energie ich damit habe, aber wieder, es spielt keine Rolle, welche Ressource Sie verwenden, wenn Sie die gleiche verwenden möchten, die ich verwende. Das ist also die Website. Sie werden das hier oben in der linken Ecke in der Adressleiste sehen können. Eso das ist es für die Ressourcen, die wir brauchen, um loszulegen, und dann ist der Rest nur HTML und CSS-Code, und wir werden das auf unserer Website platzieren und unsere grundlegende Website ausbauen. Von dort aus werden wir auch in J - Abfrage und Javascript hinzufügen, um einige zusätzliche Funktionen zu fördern , wenn wir scrollen. Also diese schönen animierten Scroll-Effekte und das ist alles in einer Abfrage verfügbar. Es ist wirklich einfach und unkompliziert Toe Anzeige Also, wenn Sie nicht vertraut mit Jake Sorge, ich werde Es wird wirklich einfach und unkompliziert sein und Sie können so ziemlich ist kopieren und einfügen, was ich in den Lektionen als auch tun. Eso dies ist optional Teil Ihre Website wird auch ohne sie funktionieren. I Es tut die Reaktionsfähigkeit der Website für die Menüs behandeln. Also, um das in hinzuzufügen, ist dies eine gute Sache, um innerhalb Ihrer Website zu haben. Also ist Oh, das wird die Navigationsleiste umschalten und das wird G-Abfrage sein. Also fügen Sie diese G-Abfragebibliotheken hinzu und richten Sie das ein. Und keine Sorge, ich werde Ihnen zeigen, wie Sie all dieses HTML-CSS machen und dann Ihre Bäckerei für zusätzliche Funktionalität innerhalb des Kurses hinzufügen . Wenn du bereit bist, öffne deinen Editor und lass uns anfangen, unsere Website von Grund auf neu zu erstellen 4. 3 Erstellen eines Wireframe der Website: Wir werden anfangen, eine Website von Grund auf mit einer Indexpunkt-HTML-Seite zu erstellen, und das wird eine einzelne Seite Website sein. Eso werden wir nur Index dot html verwenden. Wir werden keine zusätzlichen HTML-Seiten erstellen, so dass der gesamte Inhalt in dieser einen Datei enthalten sein wird. Außerdem werden wir auf Style Dot CSS verlinken. Dies ist also optional, da dies eine einseitige Website ist, aber nur Form oder Lesbarkeit und für Sauberkeit unserer Website und Best Practices verlinken wir auf Style dot CSS. Also habe ich die hier unten komplett leere Datei geöffnet und wir werden alle Styling-Elemente nach Bedarf hinzufügen , während wir die verschiedenen Lektionen durchlaufen. Das erste, was wir tun wollen, wenn wir unsere Website erstellen, ist, dass wir mit einem Plan beginnen wollen . Um also einen Plan für eine Website zu erstellen, gibt es eine Reihe von verschiedenen Ressourcen. Sie könnten einen Stift und Papier verwenden, es auf ein Stück Papier schreiben und nur eine allgemeine Idee haben, um Ihnen zu helfen, wie Sie Ihre Website jetzt gestalten möchten . Sie könnten in eine ganze Menge Detail in diesem gehen, eine Quelle, die Sie alles beschriften könnte. Wenn Sie Formulare erstellen, gibt es viele Optionen, mit denen Sie festlegen können, wie alle Ihre Seiten zusammenpassen usw. Es gibt viele verschiedene Möglichkeiten, wie Sie Ihre Website erstellen können. Aber ich werde nur einen groben Umriss für die Präsentation dieses Kurses machen, damit wir eine gute Vorstellung davon haben, wie wir unsere Inhalte präsentieren wollen. Nun, das wird eine einseitige Website sein, also könnte es ein bisschen schwieriger sein, hier draußen im Design zu skizzieren. Im Wesentlichen, was wir haben werden, ist, dass wir eine Reihe von Abschnitten haben werden, also werden wir unsere Hauptwebsite haben, die im Browser sichtbar sein wird. Und der andere Teil, den wir hinzufügen wollten, ist, dass ich in der Navigationsleiste und dieser Navigationsleiste hinzufügen wollte. das Oh,daswird etwas, das wir schaffen können, das auf einem mobilen Gerät anders aussehen wird . Also haben sie hier eine Navigationsleiste und wir werden wahrscheinlich mit fünf Seiten gehen klingt ziemlich gut für mich. Also werden wir unsere ursprüngliche Navigationsleiste hier oben einrichten, einige machen es ein wenig kleiner, so dass sie in die Seite passt. Jetzt können Sie sich auch wirklich daran beteiligen, wie viele Pixel und welche Dimensionen Sie haben. Also, wenn Sie es schreiben, wenn Sie es in einem Raster wie Mode zeichnen, gibt es viel mehr Möglichkeiten und Sie könnten wirklich detailliert, wie alles zusammenpasst . Aber ich werde nur schaffen, sind im Wesentlichen eine ziemlich grobe Umrisse. Eso werden wir nicht wirklich durch das Pixel gehen, weil wir diese Seite reaktionsschnell machen , und es wird höchstens 100% sein. Vielleicht wird nehmen 12 80 Picks auf den größeren Bildschirmen und dann nach unten von 12. 80 werden wir nur voll mit dem Inhalt haben, der präsentiert wird. So wird es auf einem mobilen Gerät anders aussehen, wo ich im Wesentlichen möchte, dass dieses Navigationsmenü sich nach unten skaliert und nur ein anklickbares Symbol dort ist, und dann werden wir das Navigationsmenü präsentieren. Wenn es angeklickt wird, werden wir es horizontal präsentieren. Also werden wir es so auf dem mobilen Gerät präsentieren. Ohne diesen Bildschirm. Also vielleicht werde ich tun, damit wir alles auf einer Seite haben können, ist, dass ich es verkleinern werde wenn ich etwas mehr kann. Und ich musste den Text dort verkleinern. Die Schriftgröße, um dies zu bekommen, um eso aufzunehmen, was ich tun möchte Kopieren Sie diese Paste , so dass wir im Wesentlichen Bildschirm haben. Das wird also der Todesstopp schreien sein. Und ich kann eigentlich nur ein weiteres Rechteck herausbringen. Und das ist was? Wie wir wollen, dass es auf mobilen Geräten angezeigt wird. Und ich werde das hier bewegen, Teoh die Spitze nach vorne bringen und so auf ein mobiles Gerät. Wir werden unser kleines Menü-Symbol haben, und wir werden ein Pop-Up haben, aber das wird den ganzen Weg hindurchgehen, und ich sollte die Breite hier verkleinern, weil wir wollen, dass unser mobiler Bildschirm vollständig ist reaktionsschnell. So im Wesentlichen wird es auf einem mobilen Bildschirm aussehen und schnell sehen, ob wir unser kleines Symbol für das Handy haben . Es wird hier zu Symbolen kommen und schnell einen Blick werfen und sehen, ob wir unser typisches Menü-Symbol haben, so dass Sie normalerweise die drei Balken mögen würden. Es gibt also zwei Bars und nur zu sehen, ob wir hier tatsächlich eine drei Bar haben, die verfügbar ist und da ist es. Da ist unser Menü-Symbol, der sagt, dass ein Drache dies fallen lässt. Im Wesentlichen ist dies unser mobiles Design eso Es ist ein einseitiges Design, so dass der gesamte Inhalt wird dort unter sein. Und dann, wenn wir scrollen, wird ein Teil der Inhalte in einem Parallax-Effekt funktionieren. Dies ist das geöffnete Menü. Und vielleicht können wir Ihnen sogar zeigen, dass Sie dieses Menü hier oben oben nach oben bewegen, weil ich will, dass es oben links sitzt und dann aus ihren gehen wir einfach tun, und wir können gehen und in ein Rechteck dort hinzufügen, um anzugeben, wo wir platzieren werden den Inhalt. Also wird es das loswerden und fügen Sie einfach ein anderes Rechteck hinzu. Und dann ist dies im Wesentlichen, wo der Inhalt sitzen wird. Und wenn wir scrollen, werden wir unser Menü hier ganz oben halten. Das ist also dieses grundlegende Design und das ist im Wesentlichen das, was wir bekommen, um unsere Website aussehen zu lassen, wenn sie läuft und vollständig ist. In der nächsten Lektion werden wir damit beginnen, diese Website zu entwerfen. Also im Wesentlichen hier ist der Inhalt und dann scrollen wir einige dieser Bilder und wir werden Hintergrundbilder verwenden und sie werden im Hintergrund bleiben, um unseren Effekt zu erzeugen. Also in der nächsten Lektion, lasst uns anfangen, unsere Website zu programmieren. 5. 4 HTML-Struktur Navmenu erstellen: Lassen Sie uns unsere Editoren öffnen und beginnen Sie mit der Erstellung unseres HTML. In der letzten Lektion haben wir uns also angesehen, wie wir einen Drahtrahmen erstellen können und im Wesentlichen einen Plan erstellt , wie wir unsere Website Toe aussehen wollen. Also die mobile Ansicht hier auf der linken Seite die Desktop-Ansicht, wo die größere Bildschirmgröße Ansicht hier auf der rechten Seite. Das ist also also ziemlich einfach. Es gibt nur ein paar Abschnitte, die sichtbare Abschnitte sind, und das ist die Navigationsleiste und dann der Rest des Inhalts. Und das ist typisch für eine Seite Websites, auf denen Sie genau diesen einen Hauptinhaltsbereich und Navigationsbereich haben würden . Also lassen Sie uns unsere Website entsprechend aufbauen. Im Wesentlichen, wenn wir uns das anschauen, können wir sehen, dass wir einen Kopfbereich und dann einen zweiten div-Bereich haben. Also zweite Hauptinhaltsbereiche, so im Wesentlichen zwei verschiedene Inhaltsbereiche und dann, wenn es wieder Größen, wir haben immer noch zu Content-Bereiche. Wir haben unseren Kopf und wir haben unsere Hauptinhalte. Dies ist also ziemlich einfach zu tun und ziemlich einfach, und deshalb ist Drahtrahmen wichtig, weil Sie in der Lage sein wollen, Ihre Website zu planen, es entsprechend. Und wenn u Abschnitt diese off, Wenn Sie sich die beiden verschiedenen im Wesentlichen die zwei verschiedenen Abschnitte Ihrer Website, Sie können dies tun ziemlich einfach jetzt. Eine andere Sache, auch, dass die meisten Websites haben werden. Sie werden einen Fußbereich haben. Das ist also optional. Eso Ich werde es normalerweise nicht in mein ursprüngliches Design einbeziehen. Ich könnte es am Ende des gesamten Inhalts setzen, weil ich, wenn ich meine Hauptnavigation hier oben habe , meinen Fußzeilenbereich nicht mit einer Reihe von Inhalten überladen möchte, damit ich eine davon mit dem unteren Bereich und dann würde nicht alle Fußzeileninhalte hochziehen. Und das hängt davon ab, wie Sie Ihre Website gestalten möchten. Dafür gibt es verschiedene Ansätze. Aber im Wesentlichen, was ich für diese Lektion tun werde, ist, dass ich mit diesem zwei Hauptinhaltsbereich arbeiten werde . Das erste, was wir hier oben bemerken, ist, dass wir hier ein Menü haben und wir haben eine Navigationsleiste und Design aus der mobilen ersten Perspektive, wir sehen, dass wir unser Navigationssymbol hier haben, und wir haben unsere Hauptnavigation. So haben wir im Wesentlichen zwei Abschnitte innerhalb des Menüs. Also lasst uns weitermachen und diese erschaffen. Erstellen eines Diffs und der Steif wird also den gesamten Inhalt des Hauptmenüs enthalten. Also nennen wir es einfach Menü und schließen das ab, und dann werden wir hier ein weiteres DIV erstellen, und das wird das Knave-Icon oder das kleinere Icon sein, das auftauchen wird. Also jetzt mit Mais, und dann hier haben wir unsere Ikonen. Also, jetzt werde ich einfach einen Platzhalter Großsymbole dort lassen und dann werde ich einen weiteren Abschnitt erstellen und das wird nicht unser Navigationsbereich sein. Also werde ich die HTML-Fünf-Struktur verwenden, um Websites zu entwickeln, wo wir anstelle von Dibs knaves verwenden können und wir Header hier oben verwendet haben. Ein Swell Seles sind semantische Namen für Elemente, und dies gibt mehr Bedeutung für die verschiedenen Elemente, die wir innerhalb unserer Webseite haben. Und in der Regel, wenn Sie ein Navigationsmenü aus Gründen der Lesbarkeit einrichten, haben wir in einem Format erstellt, in dem wir Listen haben. Also haben wir eine neue geordnete Liste, und dann wird jedes der Navigationselemente ein Listenelement sein. Also werden wir Listenelemente haben, und dann werden sie zu verschiedenen Teilen der Webseite verlinken. Also werden wir verschiedene Abschnitte haben, die die verschiedenen Bereiche unserer einseitigen Websites darstellen . Wurden nicht tatsächlich h Rafto Link zu einer anderen Datei verwendet. Wir werden nur Teoh auf der Webseite heraushilfen. Also im Wesentlichen können wir sie nennen oder wir könnten einfach kick gefangen, erstellen sie als Abschnitte. Also, die 1. 1 könnten wir vielleicht fangen, wir könnten ihm einfach einen Namen von zu Hause geben und diesen hier einfach zu Hause nennen , um konsequent zu sein, okay? Und ich werde sie einfach kopieren und einfügen. Wir könnten hier etwas haben, das wir vielleicht haben damit wir das ein Boot nennen können. Wir haben vielleicht auch etwas namens Dienstleistungen und Portfolio. Und schließlich werden wir in unserem Kontaktbereich hinzufügen, also werde ich das in Kleinbuchstaben ändern, nur um konsistent zu sein. also im Wesentlichen Das ist also im Wesentlichenunser Navigationsteil unserer Website. Und ich weiß, dass es im Moment nicht wirklich nach irgendetwas aussieht. Es ist nur eine Liste, aber wir werden es tun. Wenn wir das Styling hinzufügen, wird es wirklich Gestalt annehmen und anfangen, mehr wie eine ganze Website zu suchen. der nächsten Lektion werden wir weiter unsere HTML-Struktur aufbauen, wo wir in den verschiedenen Abschnitten für die Inhaltsbereiche hinzufügen, zu denen wir die Links hier oben im Navigationsbereich erstellt haben , so dass es in der nächste Lektion. 6. 5 HTML erstellen: in dieser Lektion werden wir weiterhin unsere HTML-Struktur für unsere Websites aufbauen. Und der letzte, den wir uns angeschaut haben, wie wir Teoh im Wesentlichen verknüpfen können, werden wir zu verschiedenen Abschnitten unten in diesem div hier verlinken. Und ich werde dieses div auf i d von Rocker geben. Das ist also im Wesentlichen s, so dass ich innerhalb des CSS darauf verlinken kann. Und ich weiß, dass alle Abschnitte innerhalb der Rocker als vollständige Abschnitte innerhalb unserer Webseite gedacht sind . Und so werden Sie all diese verschiedenen Bereiche innerhalb der Website aufteilen. Ich werde sie als Abschnitte benennen und dann den Inhalt darunter in diesem Abschnitt Elemente einschließen . Also nennen wir es einfach Abschnitt und wir geben ihm ein I. D. und hier verlinken wir auf das bestimmte I d, das wir hier oben im Navigationsmenü angegeben haben . Also werden wir ihm ein I D geben und ich möchte ihm auch eine Klasse geben, damit ich diese wieder ausbrechen und sie wirklich in CSS besser auswählen kann . Und dies ist einer der wichtigsten Teile über, wenn Sie Ihre Website und Ihren Auswahlprozess innerhalb des CSS erstellen , die Sie tun, die Fähigkeit haben, diese Auswahl zu machen und es ziemlich einfach zu machen. natürlich Wenn Sie mit CSS fortfahren, können Sienatürlichkomplexer werden, indem Sie das übergeordnete Element durchlaufen und heruntergehen und alle verschiedenen Elemente isolieren, die Sie wollen. Tragen Sie auch Styling auf. So können wir innerhalb des Abschnitts innerhalb des Home-Bereichs eine Reihe von verschiedenen kleineren Bereichen erstellen, kleinere Abschnitte. Also könnten wir so etwas haben, wie wir dort eine Überschrift haben könnten, also nennen wir es vielleicht vorerst zu Hause. Und dann haben wir vielleicht nur Artikel eso ersten Artikel, und wir haben eine Reihe von Inhalten hier drin bla, bla Block. Und wir werden das später mit einigen Standard-Inhalten aktualisieren. Also habe ich das gespeichert, und wir könnten ein weiteres Paar einen anderen Artikel dort haben, wo diese auch Absätze sein könnten , oder wir könnten Absätze innerhalb der Artikel haben und so weiter. Also alles abhängig davon, welche Art von Inhalt Sie auf Ihrer Website präsentieren möchten. Also für jetzt, was ich tun werde, ist und werde auch einen Hyperlink dort reinwerfen, nur um es interessanter zu machen . Also, dieser hier wird tatsächlich Hyperlink rausgehen, also haben wir welche. Also, jetzt kann ich diese Abschnitte kopieren und ich muss tatsächlich fünf verschiedene Abschnitte erstellen , die meine Website bilden werden, und dann werden wir in der Lage sein, durch sie zu blättern, während wir auf die Website fortschreiten. Also wird dieser hier drüben etwa sein, und ich werde das auf eine Abstimmung aktualisieren. Und vielleicht hat dieser nur einen Artikel, und vielleicht hat er ein paar Absätze drin. Also könnte ich das mit Absätzen aufteilen und das mit einem Absatz aufteilen, A swell“. Und das ist es, was Klammern hier tun. Es schließt das automatisch ab. Wenn Sie sich also fragen, wie es geschlossen wird, passen Sie Klammern automatisch an, das tut das . Eso nächsten Abschnitt hatten wir Dienstleistungen, so vielleicht nennen Sie es einfach Dienstleistungen hier oben, und wir können einige Informationen davon Dienstleistungen haben, die wir auf unserer Website anbieten s Oh, vielleicht hat dieser eine ganze Liste von einer Reihe von verschiedenen Dienstleistungen, die wir Angebot als nächstes. Wir schauen uns unser Portfolio an. Vielleicht könnte dies ein Siris von Bildern oder anklickbaren Links sein, und so weiter. So gegossen, voller Deal und geben Sie ihm einfach das gleiche Namenskonvention-Portfolio. Und so haben wir hier vielleicht einen Siris von Bildern. So Bild und wird dies jetzt verlassen ist ein Platzhalter. Wir könnten also ein u. L und eine Reihe von Listenelementen haben , und jedes dieser Listenelemente ist ein Bild. Also werde ich einfach das hier kopieren und es dort auflisten. Das ist also unser Portfoliobereich hier. Und dann, schließlich, müssen wir unseren Kontaktbereich erstellen... Oh, das wird ein weiterer Abschnitt sein, ähnlich dem, was wir vorher gemacht haben. Und hier drin haben wir vielleicht ein Kontaktformular oder so etwas. Also vielleicht ist es nur ein Absatz oder ein div und kontaktieren Sie uns Kontaktformular, und dann können wir unser Kontaktformular html innerhalb ihrer hinzufügen So jetzt gehen wir zurück auf unsere Webseite und aktualisieren Sie es. Im Wesentlichen haben wir ein ziemlich gutes Layout, wie wir unsere Website präsentieren, und der nächste Schritt wird sein, all dies in eine tatsächlich funktionierende einseitige Website ISA verwandeln unsere HTML-Struktur in eine Webseite, und das kommt in der nächsten Satz eine Lektion. Und natürlich werden wir auch Inhalte hinzufügen. Also kommt das alles auf sich. 7. 7 Placeholder: in dieser Lektion wollte ich einfach unsere grundlegende HTML-Seite aktualisieren und einige zusätzliche Inhalte hinzufügen, weil wir gerade jetzt ein paar bla, bla, bla , und selbst wenn wir es transformieren, ist es wird nicht genau richtig aussehen. Also lassen Sie uns unseren Browser hier öffnen und lassen Sie uns einige Bilder erstellen. Also werde ich kopieren, was die Platzhalterbilder hier drin sind. Diese Dinge werden also ein Hinweis auf vielleicht unterschiedliche Portfolios sein. Es ist eine andere Website, die wir haben, die wir präsentieren wollten. Vielleicht haben wir sogar einige Inhalte hier drin unter Dienstleistungen. Also haben wir hier kein Bild, also werde ich die 600 von 2 50 auf verwandeln. Außerdem brauche ich einen Dummy-Text. Also, wenn ich zu meinem Generator hier gehe, werde ich es kürzer machen. Generieren Sie es und wir werden kopieren und einfügen das und eso, anstatt all das zu haben. Wir werden nur hinzufügen, dass emittieren, dass Inhalt s ein weiterer hier, dass wir vielleicht zwei Absätze generieren wollen , vielleicht Medium. Also generieren Sie das aus. Okay, das ist ein bisschen lang geworden, aber eso nein, wir haben unsere zwei Absätze. Ich werde es ein bisschen abschneiden, weil ich denke, dass das vielleicht ein bisschen zu viel für das ist was wir brauchten. Wir haben den Abschnitt über, also werde ich nur zwei Absätze haben, die sie kurz halten und nur das generieren und eine Kopie von meinen Hyperlink dort, entfernen Sie das und fügen Sie dann einige zufällige Hyperlinks hier auf meiner Seite hinzu, weil Hyperlinks eine andere Sache ist. Wenn Sie das entwerfen, sollten Sie immer in Ihr Design s aufnehmen, so dass Sie einfach ein besseres Gefühl bekommen wie Ihre Website-Inhalte präsentiert werden. Lassen Sie uns nun einen Blick auf unsere Website werfen und nun, es sieht ganz anders aus. Wir haben eine Menge Zeug hier drin und es sieht eher wie eine eigentliche Website aus. Also haben wir dort einige Abstandsprobleme zwischen dem Ankertext. Also werde ich mich gerade darum kümmern. Also werde ich eine Suche machen und ersetzen, und ich werde es durch ein Leerzeichen dort ersetzen, so dass es ein bisschen besser präsentiert. Das war also eine Sache, die ich dort beim Kopieren vermisst habe. Also, jetzt haben wir etwas, das mehr wie eine Website aussieht, und das ist, was ich getroffen habe, indem ich diesen Platzhalter Inhalt habe, weil es wirklich hilft mit der Struktur in Ihrer Website und in der nächsten Lektion, schwächen Sprung in unser HTML und tatsächlich beginnen, den Anzug zu bauen und es darzustellen, wie es wäre, wenn wir unsere fertige Website haben. Und dann müssten wir nur diese Inhalte aktualisieren, ältere Sachen mit echten Inhalten über unsere Website und dann wären wir bereit, die Website zu starten . Also in der nächsten Lektion werden wir in die interessanteren Dinge bekommen, wenn wir CSS Styling auf unserer Website anwenden . 8. 8 CSS auf HTML anwenden: Also diese Lektion möchte ich mich auf unser HTML konzentrieren und unsere Website aufbauen, damit es tatsächlich mehr wie eine Website aussieht. Lassen Sie uns also unsere CSS Datei öffnen. Und denken Sie daran noch einmal, wir haben es hier oben verlinkt wurden Link rehl Style Sheet Style dot CSS getan haben. Also, was immer wir innerhalb des Stylesheets tun, wird sich auf unsere Hauptindexpunkt-HTML-Seite und jede andere Seite, die tatsächlich Links zu diesem Stylesheet. Also zuerst wollten wir uns unseren Header ansehen und etwas Styling auf den Header anwenden. Und die Art und Weise, wie ich normalerweise mit CSS arbeite, ist, dass ich mit den Talk-Level-Tanks beginnen werde, also Körper. Und dann vielleicht, wenn wir ein paar Hyperlink-Zeug hatten, hatten wir einige grundlegende Absätze und so weiter. Wir könnten das ganze Styling hier aufstellen. Sie sehen auch oft nur Leute, die ihre H-Tags setzen. Sie überschreiben Tags. Also die H ein h zwei und so weiter. Also all das könnte hier an der Spitze gemacht werden. Eso für den Moment. Ich werde das jetzt nur leer behalten, und ich werde die aktualisieren, während wir den Kurs durchlaufen. Also, im Moment, nichts da drin. Und auch werde ich hier einige Abstände hinzufügen, damit unser neues Styling nicht automatisch auf den Boden schrumpft, wenn wir es speichern. Und das ist etwas, das Klammern wieder tun, weil es den Code verschönert, während wir speichern und wir ihn dort eingeben. Also nun lasst uns mit unserem Header-Bereich S O r Header beginnen. Wir haben nur einen Haupt-Header. Eso kann ich auf diesen Header zugreifen. Wenn Sie den Header irgendwo in Ihrer Website wiederverwenden, dann geben Sie ihm vielleicht eine Idee. So, nur damit wir Header wiederverwenden können, wenn die Notwendigkeit vorhanden ist. Lassen Sie uns also auf Header zugreifen und etwas Styling auf den Header anwenden. Vielleicht können wir ihm eine Standardhöhe geben, weil wir es nach oben fixieren wollen. Hier müssen wir also die Anzahl der Pixel angeben. Wir wollen, dass der Header aufnimmt. Wir wollen eine Position, die es so Position fixiert ist. Dies wird also den Header an der Spitze halten, egal was mit ist. Also sagten wir unsere Höhe und wir wollen unsere mit, also wollen wir, dass es vollständig über die Lead-Seite geht und weil wir eine feste Position haben, also werde ich diese einfach aktualisieren, damit sie zusammen sind. Also, wenn es darum geht, Position zu fixieren, schwächen gesetzt, wo wir eine Position wollen, die eso wir Idealerweise, wir wollten an der Spitze Null Picks sitzen. Wir wollten links Nullpicks sitzen und s Also das ist, wo wir diesen Header positionieren, dieser Header. Also lasst es uns auffrischen und wir sehen, dass da rüber auf der linken Seite gezogen wird. Und jetzt, sofort, sofort, gibt es nicht viel, was wir mit dem Header sehen können, weil es nur diese Höhe nimmt und mit Also lasst uns ihm eine Hintergrundfarbe geben, damit wir es sehen können, wo wir sogar eine Grenze gegeben hatten für jetzt. Und wir werden das wahrscheinlich entfernen wollen, wenn wir Fortschritte machen. Aber für jetzt, lasst uns einfach außerhalb der Grenze um sie herum, so dass wir tatsächlich sehen können, wo unser Header sitzt . Und auch habe ich es eine Hintergrundfarbe so Hintergrundfarbe zu geben, und ich hatte eine Arbeit von stimmen Skala s. So ist dies eines der Dinge, die Sie tun können, wenn Sie Ihre Websites entwerfen, um von einem Graustufen-Farbschema arbeiten , so dass, wenn wir sind, wenn wir unser Styling anwenden, dass wir sehen, dass wir die Farben und die Schattierungen später hinzufügen können. Speichern wir unseren Header. Vergessen Sie also nicht, dass wir unsere HTML-Datei aktualisiert haben. Also müssen wir sagen, dass Ritz es auffrischen und jetzt können wir sehen, wie es aussieht. Also nicht genau wie der Header aus unserem Design, aber es wird dorthin kommen. Ich verspreche Ihnen, dass wir es genau so aussehen lassen, wie wir es in unserem ursprünglichen Design wollen . Wir müssen also aktualisieren, wie das Navigationsmenü präsentiert wird, weil wir letztendlich wollen, wollen wir das Symbol ausblenden. Wir wollen es auf die rechte Seite ziehen und wir wollen einen Stil. All diese Listen Elemente auf eine vorzeigbare Art und Weise. Es sieht also tatsächlich wie ein Navigationsmenü aus. Das kommt also auf und wendet dieses CSS an, wir können es magisch mit CSS transformieren. Und das kommt in der nächsten Lektion auf. 9. 9 So erstellen Sie eine Navbar aus UL: in dieser Lektion. Ich möchte unsere Navigationsleiste angehen. Also haben wir ein neues i d hören von Menüs, so dass wir davon abarbeiten können, um diesen ganzen Container dort von all diesem Menüinhalt zu identifizieren Und hier können wir einige Menüeigenschaften dort anwenden , also arbeiten Sie vom Body Header und Wir haben unsere Speisekarte. Jetzt möchte ich mich also auf diese Navigation konzentrieren. Also ist das Nav-Auto, das Now-Icon, das Now-Icon,etwas, das wir verstecken müssen, und wir werden von dort nach unten arbeiten. Sehen wir uns das zuerst an. So klassisch jetzt Ikone. Also wählen wir Klassen mit der Periode aus, und was wir tun wollen, ist, dass wir keine darauf anzeigen möchten. Und wir wollen auch die Schriftgröße ziemlich groß machen, weil wir auf Symbol dort und eso standardmäßig verwenden werden. Es wird wahrscheinlich nicht zu groß sein, also könnten wir es vielleicht mit E. M. also wird das helfen, die Größe zu ändern. Aber ich habe keine angezeigt. Und standardmäßig möchte ich nicht, dass es angezeigt wird, wenn unser Bildschirm groß ist und über das Schreiben in diesem Menü. Also, wenn ich es hier aktualisiere und ich muss das auch speichern, und ich muss nur schnell in einem Raum hinzufügen , da auch Eso Jetzt sehen wir, dass das verschwunden ist und wir können weiter unsere Navigationsleiste im Menü aufbauen . Eso, das wird einfach über Knave zugegriffen und wir werden den Knave rüber zu den Seiten der rechten Hand schweben . Wir werden Schwimmer benutzen. Dies wird also das Navigationsmenü nach rechts ziehen, und genau dort wollen wir es positionieren. Und jetzt sind wir bereit, etwas Styling anzuwenden. Also, was hat das verändert? Befreien Sie sich von diesen Listenelementen und transformieren Sie sie in ein tatsächliches Navigationsmenü? Eso Schauen wir uns an. Also werde ich es wieder auf diese Weise auswählen. Und du l So Travers den ganzen Weg runter. Und natürlich könnte ich die Idee von Knaven geben. Ich könnte dem U l I. D.geben D. und auch auf diese Weise zugreifen. Es gibt eine Reihe von verschiedenen Möglichkeiten, um standardmäßig auf eso zuzugreifen. Ihre A Norden Liste wird einige Standardeigenschaften haben, also werde ich nur diejenigen entfernen, die ich diese Ränder loswerden würde. Wahrscheinlich wird jetzt keinen großen Unterschied sehen, aber sie werden diese Standard-Margen loswerden. Wenn du es nach links gezogen hättest, würden wir wahrscheinlich sehen, dass es jetzt umkippen würde und wir diese Standardwerte loswerden. Eso der nächste, den wir einen Blick auf die Listenelemente werfen wollen. Also, jetzt, uh, Liste Elemente und wir wollen einige Eigenschaften setzen. Also hier machen wir tatsächlich all diese Transformation, wie wir sie präsentieren wollen. Wenn wir also wollen, dass sie links voneinander stapeln, kann ich sie nach links schweben. Ich wollte diesen Listenstil aktualisieren, und ich möchte den Listenstiltyp loswerden, und ich werde ihn auf keinen setzen. Das sind also diese kleinen runden Punkte da. Sobald wir das gespeichert und aufgefrischt haben, sehen wir, dass wir jetzt die Punkte losgeworden sind, die wir losgeworden sind. Wir haben sie nach links geschoben, so dass sie horizontal statt vertikal ausgerichtet sind. Und jetzt müssen wir vielleicht eine Grenze hinzufügen, damit wir sie differenzieren können. Und das könnte gegen etwas sein, das wir irgendwann loswerden wollen. Also es hängt alles davon ab, wie Sie Ihre Website stylen. Also, jetzt haben wir ein schönes Bedürfnis präsentiert Menü, und es gibt ein paar Dinge, die immer noch nicht richtig aussehen. Und weil wir alle Hyperlinks in haben, gibt es, so dass wir tatsächlich darauf zugreifen und etwas Styling auf diese Hyperlinks anwenden können. Und das ist wahrscheinlich der beste Weg, dies zu tun, weil dies diese Eigenschaft direkt auf dieses Element anwendet . Also nicht zum Elternteil, sondern dem darin. So arbeiten wir gerne mit dem letzten Element, das wir nutzen wollten und den ganzen Weg nach unten. Also wollen wir es als Block anzeigen, und dies wird es mehr von einer Box Gefühl und Blick auf It s so wenig von einem Unterschied geben. Das ist ein merklicher Unterschied. Aber es hilft mit dem Styling eso, wann immer wir auch in Padding hinzufügen werden, damit es ein wenig mehr Textdekoration herausspringt. Dies wird das zugrunde liegende loswerden. Also, wenn ich aktualisieren Okay, so denke ich, dass es ein Problem gibt mit dem Leben vorherige Seite wieder Link, dass. Also jetzt haben wir Textdekoration. Keiner hat diesen Grund losgeworden. Lassen Sie uns hinzufügen, in einigen Topfmedien gehen mit 10 Picks, Eintopfen. Und jetzt, wenn ich sage, dass so jetzt es beginnt, mehr und mehr wie ein tatsächliches Navigationsmenü s. So eine andere Sache, die vielleicht sollten wir anwenden, ist eine Hintergrundfarbe, so dass sich von dem Rest der Navigationsleiste abhebt. Also lassen Sie uns bei unseren Standardeinstellungen bleiben hier, Standard-Farbschemata und vielleicht mit einer dunklen Farbe gehen und dann die Farbe der Schriftarten in eine weiße Farbe verwandeln . Also, jetzt haben wir diese Listenelemente transformiert, aber eines fehlt noch. Es verhält sich nicht wirklich wie ein Navigationsmenü. Wenn Sie den Mauszeiger darüber bewegen, können Sie sehen, dass sie anklickbar sind, und es geht tatsächlich zu den verschiedenen Abschnitten. Aber das Problem hier ist, dass sie nicht wirklich sind. Normalerweise passiert, wenn Sie etwas sehen, das auf einer Webseite aktiv ist, etwas, wenn Sie den Mauszeiger darüber bewegen, damit wir diesen Stil auch hinzufügen können. Und das ist wirklich einfach zu tun, um in diesen wirklich schönen dynamischen Effekten hinzuzufügen und etwas Interessantes für Ihren Benutzer passiert, wenn sie kommen, dass, wenn sie über schweben. Also hier, Normalerweise, was ich gerne tun, ist die Umkehrung der Farben. Eso machen eine ziemlich drastische Veränderung. Vielleicht machen Sie das blau oder so etwas. So sticht es wirklich hervor. Ich weiß, ich habe gesagt, groß, aber es hängt davon ab, wie wir es präsentieren wollen. Vielleicht könnten wir es in der Tat als weiß präsentieren oder das abnehmen. Und dann, wenn wir darüber schweben, machen Sie es weißer. Also machen wir das vielleicht. Lasst uns die rückgängig machen. Und anstelle von Weiß werde ich es auf Cremeweiß machen. Das ist also ein weißes Dee Dee Dee. Vielleicht so. Sie zeichnen sich nicht sofort aus, aber wenn wir über sie schweben, heben sie sich ab. Aber wir können den Text auch fett formatieren, wenn wir es wollten. Es ist eine Reihe von verschiedenen Optionen, die uns zur Verfügung stehen, wenn wir über sie schweben . Es sieht jetzt wie ein aktuelles Menü aus. der nächsten Lektion werden wir das weiter ausbauen, und wir sehen, dass es bereits funktioniert, wenn wir auf die Links klicken. Und das meinte ich damit, wenn wir es nicht tun, bevor wir das JavaScript anwenden, wir sehen, dass wir diese schöne Funktionalität haben, wenn wir klicken, es bringt es automatisch zum Anker, und das ist alles standardmäßig innerhalb des HTML. Es gibt also nichts, äh, wirklich passiert hier außer dem Straßen-HTML, wo wir zu den Hyperlinks verlinken und die Webseite klug genug ist, um zu wissen, dass jedes Mal, wenn Sie darauf klicken, indem Sie den Hash und weiß, dass wir nach einem Nye Urkunde Element innerhalb der Webseite suchen und dann geht es einfach dazu, dass es es nach oben wächst. Also, wenn ein Koch über, wir sehen, dass die Spitze von über trifft die Spitze der Dienste ist versteckt, so müssen wir einige Anpassungen daran vornehmen. Aber wir sehen, dass wir jetzt haben wir einige Funktionalität in unserem Web gebaut. der nächsten Lektion werden wir das weiter twittern und bauen das aus und machen es wirklich zu einer netten, reaktionsschnellen Website, fügen Sie einige Hintergrundbilder hinzu und fügen Sie diesen reaktionsschnellen Website, Parallax-Effekt hinzu, den wir präsentieren möchten innerhalb unseres Website-Build. Also all dies kommt in der nächsten Reihe von Lektionen 10. 10 Full und background Standardwerte: Also schaue ich mir nur unsere Navigationsleiste an, die wir in der letzten Lektion gebaut haben. Und vielleicht will ich es etwas nach links schieben. Also möchte ich einige Abstände hinzufügen, einige Randabstände auf der linken Seite. Und so können wir das tun, weil wir tatsächlich isolieren können, was auch immer man das letzte Kind ist . So können wir dies durch einen Pseudo-Stil tun, der das letzte untergeordnete Element der Listenelemente auswählt. Und von hier aus können wir eine Marge dazu hinzufügen. Also werde ich weitermachen und das tun, und ich werde auf der rechten Seite einen Rand hinzufügen. Und wir können diesen Spielraum auf das setzen, was wir wollen, und wir sehen, dass er ihn ein wenig überlagert . Und das ist nützlich, weil ich nicht will, dass es genau bis zum Ende hängt. Eso wollte ich ein wenig Abstand platzieren. Wir können sogar in einigen Rändern oben hinzufügen, wenn wir alle Listenelemente tun wollten und so weiter . Es gibt also viele verschiedene Möglichkeiten, wie wir diesen Inhalt präsentieren können. Wir können sogar diese Navigationsleiste verkleinern, vielleicht 2 50 Picks. Eso Es nimmt nicht viel Platz ein, wo man es sogar noch schrumpft, wenn wir es wollten. Eso nicht eine andere Optionen hier, die uns eso vorgestellt werden Jetzt, in dieser Lektion, Ich möchte einen Blick nehmen und springen in diese Abschnitte. Also in der Regel, wenn Sie eine einseitige Website haben, mögen wir toe, dass der gesamte Abschnitt den gesamten verfügbaren Platz in Anspruch nimmt. Und weil ich sie so genannt habe, dass ich hier Rapper-Sektion hinuntergehe, kann ich all diese verschiedenen Elemente innerhalb meiner Webseite isolieren , so dass ich sie einfach anrufen konnte. Ich habe ihnen alle Abschnittsklassen gegeben, also werde ich sie identifizieren und in meinem CSS eine Auswahl treffen. Was ich also tun möchte, ist, dass ich ihnen eine minimale Höhe geben möchte, also möchte ich ihnen vielleicht eine Mindesthöhe von 100% geben. Also lasst uns das auffrischen. Also, vielleicht ist es sogar noch besser, es nur als Pixelhöhe zu setzen. , Je nachdem,welche Größe ich Bilder im Hintergrund habe, möchte ich vielleicht auf 800 Picks Mindesthöhe einstellen, also ist der Unterschied zwischen Prozentsätzen und tatsächlichen Verstand, dass, wenn ich einen Prozentsatz feststelle , Wenn jemand es auf einem kleineren Bildschirm öffnet, kann er im Allgemeinen nicht den gleichen Effekt erzielen. Und wenn sie wieder Größe es so wieder, je nachdem, wie Sie möchten, dass Ihre Website präsentieren, so können Sie die verschiedenen Abschnitte präsentieren. Ich möchte einen Überlauf hinzufügen, und ich möchte den gesamten Überlauf ausblenden. Also, was dies tut, ist, dass dies alle Inhalte verbergen, die über dem Rand des Abschnitts hängen . Also sehen Sie jetzt, dass dieses Bild, weil es über dem Rand hängt, und ich werde mich auch darum kümmern, wenn wir es reaktionsschnell machen. Aber im Moment hängt es über den Rand, weil es eine größere Größe ist, so können wir sehen, dass, wenn wir Größe neu, es wird einfach versteckt. Dies ist eine Möglichkeit, zu verhindern, dass Ihre Inhalte tatsächlich über der Standardkante hängen. Eine andere Sache, die wir hinzufügen müssen, ist ein Klopfen an der Spitze, und das wird daher wichtig sein, weil wir diesen Abstand oben für die verschiedenen Abschnitte erstellen wollen , und wir haben gesehen, wie früher, wenn wir auf die Seiten klicken, Wir waren nicht Wir sahen nicht aus, wie die Seiten tatsächlich an die Spitze kamen, denn erinnern Sie sich wieder, dass wir 50 Picks Header Platz hier reserviert haben So können wir, je nachdem, wie viel klopfte wir zwischen wollen. Wir können sogar mit etwas wie 60 Plektren gehen. Und jetzt, wann immer ich klicke, versteckten diese Links den Inhalt unter dieser Navigationsleiste nicht. Und das ist wichtig, weil dies eines der Dinge ist, die manchmal übersehen wenn Sie diesen Inhalt verstecken. Sie möchten also keinen Ihrer Inhalte im Idealfall verstecken. Eso wollen wir auch eine Position, die es also will ich eine Position bei Verwandten. Geben Sie ihm also eine relative Positionierung zum Rest des Inhalts. Und das wird nützlich sein, wenn wir Parallax-Effekte erzeugen. Und im Moment wollen wir vielleicht eine Grenze hinzufügen, damit wir tatsächlich erkennen können, wo das Ende jedes einzelnen dieser Abschnitte ist. Also erhalten Sie einen schwarzen Rahmen und aktualisieren Sie das jetzt die Probleme, weil ich es relativ gemacht habe und darüber in diesem Rahmen können wir tatsächlich sehen, wo der Inhalt des Abschnitts ist. Also, wenn wir hier drüben sind, wurden tatsächlich auf, wo das Ende der Seiten geklickt. Also stellen wir es nicht richtig vor. Eso vielleicht vorerst, Was ich tun werde, ist, dass ich diese Verwandten entfernen werde, und ich werde das später aktualisieren, weil wir diesen Effekt brauchen, wenn wir unseren Parallax-Effekt erzeugen. So im Moment wirf die Art und Weise, wie die Websites arbeiten. Also werden wir nur kommentieren, dass es für jetzt und fügen Sie das später bei Bedarf hinzu, und Sie werden in der Lage sein, die verschiedenen Effekte zu sehen, wenn wir das hinzufügen. Lassen Sie uns auch unsere Hintergrundgröße kümmern, so dass die Hintergrundfarbe Abdeckung ist. Das gibt uns also im Wesentlichen Stabilität. Bedecken Sie den gesamten Hintergrundbereich mit einem Hintergrundbild. Und für jeden Abschnitt, wollen wir in verschiedenen Bildern und vielleicht sogar verschiedene Farben hinzufügen und wie wir es darstellen wollen . Also werde ich die in Abschnitt für Abschnitt eso für die ganzen Männer hinzufügen und so weiter eso Eine andere Sache, die wir mit Hintergrund tun wollen, wollen wir unsere allgemeine Hintergrundposition uns gut in einer Position in der Mitte und Mitte setzen , so dass es absolut positioniert ist in der Center, so dass es nicht wirklich so aussieht, als gäbe es irgendwelche Änderungen. Aber wenn wir in einigen Hintergrundbildern hinzufügen, werden Sie in der Lage sein zu sehen, was wir hier mit der Hintergrundgröße Abdeckung und Mitte eso in der nächsten Lektion tun. Wir werden weiterhin diese Abschnitte innerhalb unserer Website aufbauen und unterschiedliche Styling anwenden , um sie wirklich zum Leben zu erwecken. Also, das kommt alles in der nächsten Reihe von Lektionen. 11. 11 Hintergründe hinzufügen: Also in dieser Lektion möchte ich mich um die verschiedenen Abschnitte kümmern, die wir bemerkt haben, dass wir hatten, ich hatte über und so weiter. So können wir in verschiedenen Styling für jeden einzelnen hinzufügen. Und das ist ideal, wenn wir diesen Parallax-Effekt kreieren, weil wir wahrscheinlich ein anderes Hintergrundbild für jedes haben wollen und dieses Hintergrundbild aufsetzen wollen. Richten Sie also Hintergrundbild ein. Sie sind l. Und jetzt müssen wir die u R L angeben, die wir erstellen und als Hintergrundbild hinzufügen möchten . Also lassen Sie uns zu unserem Laura ipso Generator oder Laura um, Pixelgenerator und werfen einen Blick auf ein grundlegendes Hintergrundbild, so dass wir Sport angeben können, wenn wir wollen. Also werde ich diesen Link kopieren. Also vielleicht, wenn wir eine Sport-Themen-Intro-Seite hätten, also würden wir vielleicht eine von denen wollen. Also lasst uns das aufmachen. Und ich wusste nicht, dass du ich bist und wir wollen es groß genug machen, damit es den Platz einnimmt, so dass es hoffentlich nicht zu langsam geladen wird. Und vielleicht wollen wir das Absolute mit unserem Wrapper auf einen Max setzen mit Also lassen Sie uns Rapper hier identifizieren , und wir werden ihm ein Maximum mit 1200 Bildern geben, also wollen wir nicht, dass unsere Website größer als das wird. Selbst wenn der Benutzer eine riesige Seite hat, wollen wir nicht, dass sie größer wird. So können wir hier sehen, dass, wenn wir eso scrollen, ihre Homepage jetzt dies als unseren Hintergrund hat . Und natürlich müssen wir noch etwas Styling auf den Inhalt dort anwenden, weil es jetzt nicht wirklich lesbar ist, und wir haben ein Bild im Hintergrund. Also, was? Also lassen Sie uns voran und fügen Sie in einigen anderen anderen Hintergrundbildern zu Ihnen hinzu. Einige andere Seiten und wir können auch einige Hintergrundfarben einstellen. Also einige Standardfarben als auch, so dass ich es wirklich schön und bunt machen kann. Und dies geschieht wieder durch Klammern, wo es mir meine Standardfarben gibt, die ich auswählen kann . Der nächste ging um, und wir können sogar ein anderes Bild dort verwenden, da ein Sport, ich denke, ein anderes, diese Stadt oder so etwas, und lasst uns die Farbe aktualisieren, damit es die Farben nicht wirklich sehen wird, wenn wir tatsächlich bekommen die Bilder in. Aber weil diese Luft ziemlich große Bilder, sie könnten ein wenig Zeit bis zu der Last. Also der nächste ist die Dienste. Vielleicht werden wir für dieses ein Hintergrundbild nicht verwenden, weil wir möchten, dass der Benutzer sich auf unsere Inhalte konzentrieren anstatt auf das, was im Hintergrund passiert. Also lass uns einfach ein Dunkelblau machen und als nächstes haben wir unser Portfolio. Also nochmal, vielleicht wollen wir kein, äh, also Portfolio haben äh, . Und wir werden dieses Hintergrundbild loswerden. Und für diesen hier werden wir vielleicht mehr gräulichen Hintergrund haben werden wir vielleicht mehr gräulichen Hintergrund habenund du könntest buchstäblich, wiedu es willst, Zehenblick setzen. und du könntest buchstäblich, wiedu es willst, Zehenblick setzen du es willst, Aber wir sehen, dass wir jetzt, wenn wir dort durchblättern, all diese Abschnitte bekommen, die sich auseinanderteilen, und wir können tatsächlich beginnen, die Teilung zwischen all den verschiedenen Abschnitten zu sehen. Und für das hier werde ich ein anderes Bild hinzufügen. Vielleicht sehen Sie hier so schnell nach, und so haben wir Leute. Vielleicht werden wir in Menschen hinzufügen, weil es ein Kontakt-Me-Abschnitt ist und wir werden nur unsere doc braune Farbe Zehe weiß halten . Das ist für den Fall, dass das Bild nicht geladen wird. Damit wir tatsächlich einen Unterschied zwischen dort sehen können und etwas passiert ist, aber ja, das lag daran, dass ich nicht im Kontaktbereich hinzugefügt habe. Also fügen wir es in das Portfolio ein. Also lasst uns ah, unterstützen Folio. Und eigentlich, was hier passiert ist, ist, dass ich es nicht als separaten Abschnitt identifiziert habe. Also brauchen wir Zehe, identifizieren, dass das Kontakt ist. So, jetzt Portfolio. Also haben wir nach Hause über Dienstleistungen Portfolio und Kontaktabschnitt. Also sind wir bereit, weiter zu gehen, um auf dieser Website zu bauen und einige nette Funktionalität hinzuzufügen. Also stellen wir fest, dass der Text schwer zu sehen ist, also werde ich mich auch darum kümmern und wir werden jetzt ein anderes Styling auf den Text anwenden und ihn wirklich herausbringen. So ist es mehr präsentiert und besser und einfacher auf unserer Website zu sehen. Also all das kommt in der nächsten Adoleszenz 12. 12 Machen Sie Ihren Text hervorragend.: in dieser Lektion. Ich möchte mich darauf konzentrieren, diesen Text zu stylen, weil er so nicht wirklich lesbar ist. Ich weiß, wir haben ein paar nette Hintergrundbilder und wir haben nicht wirklich die Kontrolle darüber, welche Hintergrundbilder, weil sie nur zufällig kommen. Eso möchte ich etwas Styling auf das s O anwenden, dass es tatsächlich lesbarer ist und auch auf die H zwei. Also hatten wir das Format relativ ST Ford und nur eines, das ich nicht hatte. Das hier ist der Artikel dieser Kontaktabschnitt. Also werde ich das einfach aktualisieren und Styling, das ich verwenden werde, ist, dass ich durch Abschnitt und Artikel gehen werde, damit es Abschnitt sein wird, uh und so können wir die Klassenabschnitte verwenden , die wir vorher verwendet haben. Also, vielleicht werde ich es gleich hier setzen. Also Klassenabschnitt und jeder der H zwei. Also werden wir etwas Styling dort und Abschnitt anwenden und eine eine Anwendung Styling auf alle Artikel als auch. Also, was ich für diese tun möchte und wir können sehen, dass manchmal der Text ziemlich schwer zu lesen ist . Also lassen Sie uns einfach eine Hintergrundfarbe hinzufügen und wir werden einen RGB A machen, mit dem wir eine Alfa Farbe erstellen können . Also werde ich es auf 55 zu 55 zu 55 machen. Und hier setzen wir unsere Werte so ein, dass wir vielleicht etwas wie eine 0,7 versuchen. Also lasst uns das auffrischen. Und wir sehen, dass wir jetzt einige haben, oder die Absätze stehen tatsächlich heraus und wir können den Inhalt dort sehen. Selbst wenn da hinten ein Bild ist, können wir sehen, wie sie herauskommen. Wir werden dasselbe für diese Header tun, aber vielleicht für die Header, weil wir wollen, dass sie wirklich herauskommen. Wir werden nur eine Hintergrundfarbe aus Weiß machen, damit sie es wirklich dort platzieren können. Okay, so dass jeder Zweier es wirklich aushalten wird, also müssen Sie immer noch einige zusätzliche Formatierung hinzufügen. Also lassen Sie uns hier etwas Polsterung hinzufügen, vielleicht 10 Picks klopfen, so dass es den Text ein wenig von den Seiten bringt, so erfrischend es, so präsentiert es es es ein wenig besser. Vielleicht können wir auch klopfen eso wir tun, klopfen ganz rechts um fünf Picks Polsterung. Wir können auch verwandeln oder schwächen Set Ah gekämpft Stil s schwächen Stellen Sie es auf verschiedene zu strecken heute. Welche Größe es und so weiter. Also das ist etwas, das wir vielleicht kümmern wollen, dass wir es wirklich groß und wirklich Pop machen wollen , es ist ein bis e m. So sehen, wie das aussieht auf Auch, wir wollen es Text zu tun. Also haben wir einige Optionen mit Text. Lassen Sie uns einen Text machen, transformieren und ändern Sie sie alle in Großbuchstaben. Das wird also ein netter Effekt für jede dieser h twos sein. Das sind diese H-zwei Abschnitte. Eso bringt das raus. Und vielleicht eine andere Sache, die wir mit dem Text tun wollen, ist vielleicht wollen wir zentrieren. Es ist Oh, ich bin mir nicht sicher, wie das aussehen wird, aber wir werden es einfach ausprobieren. Und wir können es immer entfernen, wenn es uns nicht gefällt. So können wir alle diese Abschnitte so zentrieren, dass sie wirklich hervorgehoben sind und sie auffallen . Also, jetzt können wir auch, wenn wir das noch sichtbarer machen wollen, können wir es in eine Acht ändern, damit es noch mehr herausbringt. Und manchmal für ältere Browser, vielleicht möchten Sie so etwas tun, nur um sicherzustellen, dass, wo wir kümmern die Hintergrundfarbe. Also in den älteren Browsern wird es sowohl Eigenschaften als auch diejenigen, die RGB nicht verstehen, werden einfach weiß spielen. Dadurch wird sichergestellt, dass unser Text immer lesbar ist. Aber ich mag in der Regel diesen Effekt, wo wir ein wenig von den Hintergrundbildern sehen können, besten Raum, weil diese Arten von Websites Luft wirklich Bild schwer in der wirklich Bild intensiv . Die Idee ist also wirklich, diese Bilder wirklich schön dem Webbenutzer zu präsentieren. Das ist also unsere Website so weit, wir sehen, dass, wenn wir wieder Dimensionierung, Also gibt es einige Probleme hier, wenn wir wieder Dimensionierung. Also müssen wir den Rapper einstellen, den wir brauchen, um das zu zentrieren. Das ist also eines der Dinge, die wir sehen können, wenn wir es wirklich in größeren Größen auf scrollen . Natürlich müssen wir es immer noch reaktionsschnell machen, weil unser Menü nicht aussieht, keinen Streitkolben enthält und ein paar Korrekturen. Wir sehen, dass die Bilder eso einige dieser Bilder sind zu groß für die Abschnitte, wenn wir sie nach unten verkleinern. Also all dies müssen wir kümmern, um es reaktionsschnell und verfügbar für jedes Gerät, jede Gerätegröße Bildschirm. Also all dies und diese Optimierungen und Transformationen Luft kommt in der nächsten mehreren Essenz. 13. 13 Verändern der Navbar für reaktionsschnelle Effekte: Es sind ein paar andere Dinge, die ich hinzufügen wollte und zurück zu diesem Artikel. Ich mag die Randradius-Option wirklich, und dies ermöglicht es uns, abgerundete Ecken zu machen. Das ist also ein wirklich Bedarfseffekt. Und das ist etwas, das ich immer liebe, auf Webseiten zu setzen, besonders. Wir haben Inhalte wie folgt präsentiert. Sie abgerundet zu machen, hat wirklich eine schöne Wirkung. Und auch, was ich tun wollte, ist, in Margen hinzuzufügen. Vielleicht wollten Sie also Ränder ganz herum hinzufügen, so dass es einige zusätzliche Abstände hat und wir einige Abstände von den Seiten sehen können. Vielleicht wollen wir sogar Marge 10 machen. Oder wir wollen vielleicht, äh, Null für oben und unten und dann 10 4 links und Rennen. Wir werden sehen, wie das aussieht. Also jetzt haben wir alle unsere Abschnitte und es sieht sehr schön aus und Niedere. Und deshalb mag ich diese abgerundeten Optionen, weil es eine wirklich schöne Wirkung ist, die Sie innerhalb Ihrer Webseite haben können. Eso sehen wir hier, dass es abgerundet präsentiert sich wirklich schön. Wir haben hier oben ein Problem, weil wir Artikel zweimal verwenden. Eso Vielleicht, was ich tun werde, ist nur das zu aktualisieren und entfernen und den Artikel nur einmal verwenden , oder wir könnten die Rundung entfernen und es könnte ein wenig komplizierter werden. Also, was ich tun werde, ist, dass ich einfach den Artikel entfernen werde, die beiden Artikel dort, und sie nur als separate Absätze. So passt es besser zu diesem abgerundeten Styling, so einfach aktualisieren, dass, so dass präsentiert sich besser. So können wir jetzt unseren Inhalt viel klar sehen. Wir haben die abgerundeten Ecken, das ist etwas, das ich wirklich mag. Und wir sind bereit. Teoh, weiterhin bauen unsere Website s. Oh, jetzt schauen wir uns an, es reaktionsschnell und reaktionsschnell Websites ist ein ziemlich viel ein Muss haben . Und die Art und Weise, wie die Responsive oder welche Websites funktionieren, ist, dass wir können. Also werde ich es einfach hier raufholen. Also eines der Dinge, die tatsächlich vergessen wurden, bevor wir weitermachen, ist, dass ich in einem Zentrum dieses, äh, diesen Rapper geben wir es auf automatischen Rand von links nach rechts von Null und unsere oben nach unten von Null und einen Rand von links und rechts von automatisch und dies wird es tatsächlich zentrieren , Also Marge Und dies wurde in der Regel sehen, den besten Weg, um Ihre Inhalte zentriert zu machen und wir sehen, dass sofort bekommen wir das Content-Center-Datum und wir könnten auch die ganze, dass ganze Header-Bereiche Nun, also vielleicht könnte das eine bessere Idee sein. Also haben Sie den Rapper für alles und haben dann ein Maximum mit ihrem für den Header-Bereich, so dass wir das in Einklang mit dem Rest der Website bringen könnten. Ich denke, ich muss das speichern, also aus dem Grund, warum das nicht an Ort und Stelle fällt, liegt daran wir es als feste Position haben. Also lasst uns das einfach zurückziehen und es so behalten, wie es mit dem Rapper war. Und das ist etwas, das wir auch anpassen könnten. Aber es wird ein wenig knifflig, wenn wir versuchen, eine feste Position Punkt zu zentrieren. Eso Für jetzt, lassen Sie uns einfach oben lassen, wie es ist, und wir werden mit unserem Navigationsmenü von ihrem uh arbeiten Also, jetzt ist dies unsere Website. Wir sehen, wenn wir klicken, können wir zu den verschiedenen Seiten gehen und so weiter. Also werde ich Ihnen auch zeigen, ich schätze schnell, wie wir aktualisieren können. Das ist also das Problem hier. Ist das dieses Navigationsmenü? Eso Dieses Navigationsmenü befindet sich in einer festen Position und es ist ziemlich schwierig, diese Navigationsmenüs mit fester Position zu zentrieren . Aber es gibt einen Weg eso lassen Sie uns einige Updates dazu machen. Und das ist wieder etwas, das hier optional sein könnte, also müssen wir eine Rate von Null setzen. Also haben wir eine Linke von Null, eine Rate von Null. Also lasst uns das auffrischen. Ich möchte auch säubern, dass Max mit. Es wird also dasselbe sein, was wir hier im Rapper hatten. Und natürlich könnten wir das auch entfernen, wenn es nötig ist. Also lasst uns einfach sparen. Das ist jetzt haben wir unser Maximum mit, aber immer noch auf die linke Seite verschoben. Also hier brauchen wir Zehe. Fügen Sie diese Marge Null und Auto hinzu, so dass es automatisch die gleiche Sache zentriert, die wir mit dem Rapper gemacht haben . Und da haben wir es. Also haben wir jetzt ein zentriertes Menü. Eso Dies funktioniert mehr als eine zentrale Option innerhalb unserer Website. Also lasst uns jetzt unsere Website öffnen. Wir werden es uns ansehen und wir werden es sehen. Also das Schöne an Chrome ist, dass es diese reaktionsfähige Fähigkeit hat, wo wir verschiedene iPhones und unterschiedlich große Bildschirme simulieren können . So hilft es uns wirklich bei unserer mobilen Entwicklung, denn das gibt uns wirklich eine bessere Vorstellung davon, wie es auf mobilen Geräten aussehen wird. Wir können auch die Bildschirme drehen. So wirklich schöne Wirkung. Wir können eine andere Größe Geräte eso bauen 6 80 kaufen, was wir hier durch die Höhe wollen. Wenn es darum geht, mobiles Design und reaktionsschnell zu gestalten, müssen wir wissen, wo wir diese Bruchpunkte setzen wollen. Und wir sehen, dass, sobald wir eine bestimmte Größe erreicht haben, also sobald wir buchstäblich unter 400 Plektren bekommen, unser Menü nicht verändert Nun, so letztendlich, ich will etwas zusätzlichen Platz haben und vielleicht, wenn wir unter 600 Bilder brechen, möchten wir dieses Navigationsmenü anpassen. Also wollen wir unser Icon auftauchen und es dann als Dropdown-Option präsentieren. Also lassen Sie uns unser CSS öffnen. Und das ist, wo wir in der Medien-Bildschirm-Option hinzufügen können, die uns erlaubt, diese Bruchpunkte innerhalb unserer Website so Medien-Bildschirm und und wir verwenden von Desktop nach unten. Also setzen wir ein Maximum mit und lassen es uns bei 6 40 machen, damit das unser Bruchpunkt ist . Und sobald es diesen Bruchpunkt erreicht hat, werden wir es anders zeigen. Eso wollen wir Zeh tatsächlich zeigen unsere Nav-Symbol. Also lasst uns anstatt zu verstecken, dass es jetzt zeigen wird, dass wir Display-Block tun , die Sie könnten. Also, jetzt lasst uns die Seite aktualisieren. Und wann immer wir die Größe abnehmen, wenn wir unter einen bestimmten Punkt kommen, wir sehen, dass wir dieses Symbol wieder auftauchen. Ich denke, wir müssen das auffrischen und speichern. Vielleicht werden wir in unsere Now-Bar eintauchen und diese vorerst verstecken. Also unsere Speisekarte knave. Also werden wir das gesamte Navigationsmenü verstecken, weil ich denke, dass das auch stört , dass wir es sehen können. Also werden wir nur eine Anzeige nicht zu tun und geben ihm eine Breite von 100%. Okay, also lasst uns das jetzt nochmal auffrischen. Und wir können sehen, wenn wir unseren Bruchpunkt treffen, dass unser Navigationsmenü verschwinden wird und das Symbol dort oben erscheinen sollte. Also müssen wir etwas Styling dafür anwenden, damit es wirklich funktioniert und richtig funktioniert. Also glauben, dass, wenn wir uns das ansehen, Also unser Menü ist es nav Symbol und unser Menü nav wird angezeigt. Keine, aber dieser sollte angezeigt werden, Block. Wir werden uns darum bemühen, dies zu aktualisieren, während wir in die nächste Lektion gehen. Also kommt es hoch. 14. 14 Responsive Updates und Korrekturen: in dieser Lektion. Ich möchte beenden und einige zusätzliche Verbesserungen in das CSS hinzufügen, um unsere Website wirklich effektiv zu machen . So sehen wir, dass, wenn wir auf die Website kommen, wir haben gesagt, es mindestens, klopft Höhe von einem von 800 Pixel. Eso Ich möchte eine Anpassung dafür vornehmen, so dass es tatsächlich den gesamten verfügbaren Bildschirmgrößenbereich einnimmt , und das ist wirklich einfach innerhalb von CSS anzuwenden. Also müssen wir nur diesen Abschnittsbereich auswählen, so Abschnitt und wir haben. So haben wir unsere Männer Höhe auf 800, so können wir unsere Standardhöhe auf 100 VH setzen. Und so bedeutet das nur vertikale Höhe. Also 100% vertikale Höhe und wir sehen, wenn wir das tun, dann nehmen wir tatsächlich den vollen verfügbaren Platz. Also, je nachdem, wie viel vertikale Höhe auf dem Bildschirm verfügbar ist, wenn wir es neu Größe , wird es nehmen 100% davon. Wenn wir also eine kleinere vertikale Höhe haben, können wir sehen, dass es ihre entsprechend so anpassen, was auch immer die vertikale Höhe ist, dann ist es, was es seine automatische Größe auch. Und das wird wirklich gut funktionieren, weil dies eines der Dinge war, die nicht genau funktionieren, wenn wir unterschiedliche Bildschirmgrößen hatten. Eso dieser Zusatz wird es viel effektiver und reaktionsschnell machen, wenn wir mit verschiedenen Bildschirmgrößen zu tun haben. Die andere Sache, die ich zurückgehen möchte, und ich möchte auf den Körper und die HTML schauen, so innerhalb des Körpers und html Ich möchte eine Standard-gekämpft Familie setzen und ich werde gehen über Google Fonts und ich werde einen Google-Gedanken aussuchen, um innerhalb der Website zu verwenden. Jetzt Google Fonts ist ein Dienst von Google angeboten, mit dem Sie wirklich leicht in gekämpft Styling in Ihre Website bringen können, so dass Sie hier gehen können, um Fonts dot google dot com. Sie haben 800 verschiedene Schriftfamilien benötigen, alle bereit zu gehen. Also alles, was Sie brauchen, um eine angeben, welche Art von Spaß Sie wollen. Also im Moment behaupten wir es, indem wir populär sind und so weiter. Und Sie haben eine Menge von Optionen hier, um Art von Art durch und wirklich zu finden , dass bekämpft , dass Augen machen Ihre Website stehen acht eso die vielen verschiedenen Optionen hier auf diese Auswahl. Eso wird vielleicht etwas nehmen, das wirklich herausstechen wird. Vielleicht werden wir es tun, um die Schriftart zu wählen, wie diese geschrieben kämpfte. Es wird also den größten Unterschied machen. Wenn wir darauf klicken, erhalten wir diese Schriftfamilie ausgewählt, und jetzt können wir in unsere Website eingebettet werden, so dass wir sie entweder einbringen können, wie wir es mit einem Stylesheet tun und es in unser Web-Projekt bringen und es dann innerhalb unserer CSS. Aber der bessere Weg, es einzubringen, ist tatsächlich, es direkt in den Stil zu importieren, da wir ein verknüpftes Stylesheet haben. Und das ist nützlich, wenn wir von anderen Webseiten mit dem Stylesheet verknüpfen, als wir über mehrere Stylesheets verlinken können . Also werde ich einfach die Vorschau da drüben öffnen. Und sobald ich in die Standard-Gedankenfamilie gesetzt habe, sehen wir, dass wir sofort diesen Gedanken auf unsere Website gebracht bekommen. So legen wir unsere Schriftfamilie standardmäßig fest. Und ich denke, das ist nicht 100%, wo es 100% s Oh, da gehen wir. Damit wir in die Front bringen konnten. Und natürlich, wenn dieser Pont nicht genau das ist, wonach wir suchen, können wir ganz einfach einen anderen auswählen und ein Update vornehmen. Eso vielleicht das. Es kommt nicht so klar heraus, wie wir wollten. Also kann ich diese bekämpfte Familie auswählen, und ich kann einige weitere Details darüber sehen, wenn ich darauf klicke und ich tatsächlich darauf zugreifen konnte . Wählen Sie also diese Schriftart aus. Also, jetzt habe ich diese Schriftfamilie ausgewählt, und wir können beide Schriftfamilien auch einbringen. Also, diesen Import zu tun. Vielleicht werde ich beide importieren und sie an verschiedenen Orten nutzen . Also mag ich die Art und Weise, wie dies nach dem Nicht- oder dem Abschnittskopfbereich sucht. Also vielleicht lasse ich es dabei stehen. Aber dann für den Rest der Website, vielleicht werde ich nur diesen regulären Standard-Furz innerhalb des Körpers im HTML verwenden. Schauen wir uns das an und sehen, wie sich das herausstellt. Das sieht also eigentlich ein bisschen besser aus. Es ist viel lesbarer und wir sehen, wie unsere Schrift präsentiert wird. Also, das ist wirklich nett. Und das hat eine wirklich schöne Wirkung auf unsere Website. Also eines der anderen Dinge zu, ist, dass ich den See zu setzen, ist Ich mag die tatsächlichen die Hyperlinks s setzen. Also das ist etwas, das wir normalerweise standardmäßig innerhalb der Website gesetzt. Also werde ich nur den Textdecker aktualisieren, die Textdekoration, und standardmäßig werde ich es als keine haben. Und dann, wenn wir den Mauszeiger über die Hyperlinks bewegen, dann kann ich das in zwei Textdekorationen hinzufügen und ich kann es in den zugrunde liegenden. Wenn ich also will, dass es auf Lee auftaucht, wenn wir darüber schweben, dann können wir es innerhalb dieser Art von Effekt tun. Mal sehen, wie das funktioniert. Also jetzt, wenn wir darüber schweben, bekommen wir diesen schönen Effekt, Teoh unsere Hyperlinks und das ist eine modernere Styling Toe Hyperlinks als was? Aber die Standardwerte sind innerhalb von HTML und wir können auch in unseren Farben hinzufügen. Und ich habe vorher über Farbschemata gesprochen, also das ist etwas, das wir mit den Schriftfamilien hinzufügen können. Je nachdem, welche Art von Farbschema verwendet wurden. können wir nutzen. Wenn wir also dunkelblau haben wollten und vielleicht wollten wir oder dunkelblau und rot, wann immer sie gehypt werden, über schwebte, können wir sehen, dass wir jetzt einen wirklich schönen Effekt haben. Und natürlich müssen Sie dies an Ihr Farbschema anpassen. Eso. Eine der anderen Verbesserungen, die ich gerade betrachte, ist, dass diese Bilder eso sie nicht reagieren. Es ist nicht richtig dimensioniert, also möchte ich mich auch darum kümmern. Und so werde ich nur ein Bild festlegen, und ich werde Max mit dem Bild machen und es auf 100% setzen. Also, was wird jetzt passieren? Wann immer ich die Größe ändere, sehen wir, dass das Bild jetzt es zusammen mit dem verfügbaren Abstand innerhalb dieses Elements neu Größe, so dass wir es nach unten verkleinern können. Wir können es größer machen, wenn es über die Größe kommt. Dieser ist bei 6 50 eso. Immer wenn wir über diese Größe kommen, sehen wir, dass es nur da sitzt und es ist nicht. Es ist nicht in Anspruch nehmen oder gehen über den verfügbaren Abstand, der für unsere Website s 01 der anderen Dinge zur Verfügung steht, auch. Wir müssen dieses Navigationsmenü reparieren, weil es scheint nicht wirklich zu funktionieren. Nun, es funktioniert an dieser Antwort, aber wenn wir , sie verkleinern, sehen wir nicht wirklich unser Icon-Menü. Also, das ist etwas anderes, das mit dem Knave-Symbol s repariert werden muss, wenn wir es zeigen und es anzeigen, wir müssen dies aktualisieren, um das nav Symbol anzuzeigen. Fügen wir das hier drüben hinzu. Wir werden eine Ausstellung machen. Keiner. Und dann müssen wir auch eine gekämpfte Größe so einstellen, dass gekämpft Größe, zu e. M. Als Größe so anzeigen, keine auf dem größeren Bildschirm. Und dann wollen wir es als Block auf dem kleineren Bildschirm anzeigen. Und wenn wir das Javascript anwenden, dass nicht so werden wir diese Funktionalität erhalten, wo wir das Menü auf verschiedenen Größen aktualisieren. Also für jetzt, wenn wir an diesem Menü arbeiten, lassen Sie uns dieses Display keine loswerden. Und wir werden ein Update stylen. Unsere Menüspitze erscheint tatsächlich, weil wir die Größe ändern müssen, wann immer es schrumpft, dass es den vollen Platz beansprucht, es wird horizontal gehen und eso es könnte sein, Ah, horizontale Dropdown-Menüs. Also werde ich Ihnen zeigen, wie Sie das in der kommenden Lektion tun, und wir müssen etwas von dem Styling entfernen, das wir auf den größeren Bildschirmen gemacht haben . Das kommt also in der nächsten Lektion. 15. 15 Navbar für kleine Bildschirme: Also diese Lektion. Ich möchte dieses Menü optimieren und abschließen und es einfach aktualisieren und sehen, wie es in Vorbereitung auf unsere nicht für unsere Javascript-Ergänzung funktioniert . Eines der Dinge, die ich bemerkt habe, ist, dass das Symbol nicht jetzt nicht richtig angezeigt wird. Also das Problem hier ist, ich bin mir nicht sicher, ob Sie das Problem erkennen könnten, aber ursprünglich hatte ich es Now-Symbol genannt und habe einige Eigenschaften dort gesetzt. Eine wichtige Sache ist also, Sie beim Erstellen dieses Stylings und bei Verwendung der Medienabfrage sicherstellen, dass Sie diese Eigenschaften innerhalb des gleichen Formats definieren. Jetzt haben wir also das Knave-Icon, und das sollte besser funktionieren. Eso Nun, wenn ich es aktualisiere, lass es uns einfach überprüfen und sehen, ob unser Symbol auftaucht, was es so genau tut, was wir brauchen Zeh passieren. Eines der Dinge, die wir jetzt tun müssen, ist, dass wir unser Menü hier stylen und einrichten müssen, um nach rechts oder rechts zu fallen und voll mit sein. Lassen Sie uns also einen Blick auf die Listenelemente für den Naff werfen und diese jetzt aktualisieren. Also werden wir Menü jetzt Liste Artikel tun, und wir werden tatsächlich die UL machen. Also die UN bestellt Liste Elemente, und wir werden eine Breite von 100%, die verfügbar ist zu erhalten. Lassen Sie uns sehen, was das tut, wenn wir es auffrischen. Also jetzt haben wir das Menü genau so eingerichtet, wie wir es wollen, und wir können auch eine Möglichkeit haben, den Text zu zentrieren, wenn wir wollen. Manchmal ist dies eine gute Idee, diesen Text für das Knave-Symbol zu zentrieren. Vielleicht müssen wir das nach rechts ziehen, um es auch nach rechts zu schweben, damit wir das in Esso Float hinzufügen können, richtig? Also aktualisieren wir das einfach. Also, das näht sich immer noch an derselben Stelle. Also, wenn wir neu dimensionieren, sehen wir, dass wir das bekommen, das Symbol erscheint dort oben, und vielleicht können wir es sogar verschwinden lassen. Wenn wir eso wollen, sehen wir, dass die Links immer noch die gleichen Dinge sind, so dass es immer noch auf die gleichen Seiten geht, und das ist genau die Art, wie wir wollen, dass die Website ausführen, also werde ich es einfach aktualisieren, Also um diese Uh los zu werden oh. Bezahlen Sie die Stadt gleich rüber. Es ist also, was wir letztendlich wissen, was wir tun wollen, ist, dass wir wollen, wenn einer dieser Links angeklickt wird, wir wollen, dass es tatsächlich dieses Menü schließt und so weiter. Es gibt also eine Reihe von Dingen, die wir wollen, dass wir jetzt auf unserer Website passieren, wann immer wir reagieren. Und natürlich, natürlich, wenn es uns so gefällt, wenn wir unsere Speisekarte so mögen, können wir es so lassen. Wir können diese Symbole sogar loswerden. Wir brauchen nicht einmal ein anklickbares Symbol, das das Menü öffnet und schließt, und so weiter, viele Optionen an dieser Stelle, die uns präsentiert werden. Aber wenn wir diese J-Abfrage einbringen, wird es wirklich einige nette Effekte innerhalb der Art und Weise, wie die Websites behandelt werden, machen. Also denke ich, du wirst wahrscheinlich all das Zeug in dir behalten wollen. Und eine andere Sache, die wir jetzt gerade betrachten, ist, dass wir das Portfolio auch stylen müssen , um dies besser präsentieren zu können. Vielleicht können wir sie dazu bringen, ein komplettes Quadrat oder so etwas aufzunehmen und Polsterung um diese hinzuzufügen . Also ist es eine andere Sache, die wir aktualisieren und optimieren müssen eso. Wir werden in der nächsten Lektion darauf eingehen und das aktualisieren. 16. 16 Hinzufügen von Footer und updating: diese Lektion. Ich möchte das Portfolio aktualisieren und wie dieser Inhalt präsentiert wird. Wir wollen also nur, dass diese Effekte unter dem Portfolio stattfinden. Vielleicht wollen wir sie woanders benutzen. Es ist eine Reihe von Optionen, die wir in Klassen hinzufügen könnten. Aber im Moment, was wir tun werden, ist, wo er entsprechend dem Portfolio auswählen wird. Also haben wir unser Portfolio dort, und hier ist, wo wir ein zusätzliches Styling für dieses Element setzen können. Also Portfolio und ich möchte dies auf die UN-geordnete Liste und die Listenpositionen unter dem Portfolio-Element anwenden . Und was ich tun möchte, ist, dass ich sie in der Reihe zeigen möchte. Also werden wir das neu schreiben. So zeigen Sie in der Linie. So sehen Sie, ob welcher Unterschied das macht, so dass bereits sofort präsentiert es. Viel besser s. So können wir auch einige Polsterung hinzufügen. Also werde ich etwas hinzufügen, um die UN-geordnete Liste auch ein bisschen besser zu präsentieren . Vielleicht brauchen wir also etwas Polsterung und ein paar Ränder und so weiter. Also lassen Sie uns einfach in Padding von 10 Picks hinzufügen und ich werde List-Style-Typ tun, nur um sicherzustellen , dass wir loswerden, dass es auf keine gesetzt wird, obwohl diese nicht mehr sichtbar sind. Und wir können das Portfolio auch aktualisieren. Die Listenelemente, so dass jedes Listenelement Wochenende diese aktualisieren, so dass wir einige Polsterung um sie hinzufügen können . Sieh mal, wie das jetzt aussieht. Es wurde also ein wenig Polsterung hinzugefügt. Es gibt ein Ausbrechen dieser Elemente und wir können auch Augen Ränder an den oberen Rändern auf der Unterseite setzen . Manchmal haben Sie vielleicht auch einen Text, also kann ich dort etwas Text hinzufügen. Vielleicht können wir das als Absatz oder so machen, damit wir irgendeine Art von Informationen haben , um die es geht. Also normalerweise, ich denke, das Bild wäre oben. Mal sehen, wie das funktioniert. Jetzt haben wir den gleichen Effekt. Aber wir haben unser Inline-Styling verloren, weil wir die Polsterung dort haben, und jetzt haben wir den Listenelement-Text. Also, wenn wir das aktualisieren, als wir es immer noch auflisten und wenn es Ihnen wirklich so gefällt , dann können Sie es so behalten. Eso brauchen Sie im Allgemeinen nicht zu aktualisieren. Aber lasst uns unser Eintopf wieder dazu bringen. Und ich werde auch die Größe der Listenelemente anpassen. Vielleicht könnten wir es sogar mit 70% tun. Und wir könnten auch einige Anpassungen vornehmen. Wahrscheinlich ist das Beste, was zu tun ist, eine Grenze dort hinzuzufügen, damit wir sehen können, womit wir arbeiten. Das gibt uns also einen besseren Hinweis darauf, wo unsere Grenzen sind. Wir sehen, wir haben eine Breite, wir haben eine Höhe. Vielleicht möchten wir also sogar einige Standardhöhen festlegen, so dass sie eine bestimmte Containergröße einnehmen und ich muss dies immer noch in Zeilenblock ändern. Also habe ich es hier in Blind Block geändert. können wir jetzt sehen. Es gibt einen Unterschied darin, dass... Also nehmen wir das Klopfen hier auf. Wenn ich das Klopfen Null machen will, kann ich diese aktualisieren. Also bin ich mir nicht sicher, warum das, wenn ich tatsächlich entfernen kann, dass auf Schwächen? Stellen Sie es ein, Teoh. 45%, wenn wir wollen, und wir können sehen, wie sich das zeigt. Ich denke, wenn wir 50 gehen, sollten wir auch für dieses in Ordnung sein, weil wir an der Polsterung entfernt haben . Also manchmal ist es ein wenig schwierig, mit dem Padding zu arbeiten, um all diese Prozentsätze zu erhalten , richtig, weil es dort einige eingebaute Polsterung hat. So können Sie sehen, ob wir zum 48. gehen und wir sind ziemlich gut damit. Unsere Standardhöhen, vielleicht auch ein Problem. Das ist also etwas, das wir vielleicht genauso gut wollen. Vielleicht wollen wir also nur mit 200 oder einer minimalen Höhe von 200 darüber bleiben. So aktualisieren, dass, egal was, es wäre ein Minimum von 200 eso, egal wie viel wir es ändern. Und dann eine andere Sache hier ist, dass wir vielleicht, wenn wir die Größe ändern, die withs s aktualisieren möchten, damit wir hier zu unserer Medienabfrage gehen und diesen Verstand auf 100% aktualisieren können. Und wir brauchen nichts von dem Rest von diesem Zeug hier und wir werden sehen, wie sich das herausstellt. Also, jetzt, wenn wir Größe wieder , wir nehmen diese voll mit eso viele verschiedene Optionen. Es hängt davon ab, wie Sie Ihre Inhalte und Ihr Portfolio präsentieren möchten. Das ist also nur eine schnelle Lösung für diesen Anhang. Ich will diese Grenze loswerden, weil ich nicht mag, wie diese Grenzen so schnell angezeigt werden , um diese loszuwerden und die Eidechse zu entfernen. Natürlich könnten wir es zu einer Graustufe machen, einem Schwung oder du könntest es punktiert machen. Aber so oder so, s O, das ist unser Portfolio jetzt, Also, das ist Inhalt wird ein wenig besser präsentiert. Wir können auch in Ah hinzufügen, Fußzeile hier ein unten. Das ist also etwas, das wir unter dem Abschnitt hinzufügen können und es in diesem Div behalten können. Danke für Ihren Besuch. Also haben Sie normalerweise eine Kopie, richtig und so etwas innerhalb, nicht Fußzeile s. Also werfen wir einen Blick auf das jetzt. So ist das Copyright dort unten. Jetzt müssen wir etwas Styling für die Fußzeile s hinzufügen, damit wir hier hineingehen und diese Fußzeile und wieder aktualisieren können , genau wie die Kopfzeile. Wenn wir Hatters wiederverwenden, wurden Fußzeilenelemente verwendet, die diese Tags verwendet haben. Wir sollten ihnen Ideen geben, um sie zu identifizieren. Aber ich werde den Fuß nicht wiederverwenden oder nirgends. Also werde ich es einfach als Fußzeile und Farbe festlegen und ihm vielleicht eine schwarze Farbe geben. Es hebt sich also wirklich hervor. Gekämpft kann weißer Text ausrichten. Normalerweise werden sie auf Band zentriert, um zu sehen, wie das aussehen wird. Wir sollten auch die Höhe dafür einstellen. So kann das sein, ah, Höhe von 200 Bildern, weil wir wollen, nehmen einige Immobilien eso Dank für den Besuch Urheberrecht und bla, bla, bla , bla, was auch immer Inhalte, die wir dort setzen wollen. So können wir wahrscheinlich auch besser dran, es als Absätze zu tun. Und ich habe gerade eine Kopie und fügen Sie Absätze hier ein. Also gehen wir hin. Also, jetzt haben wir unsere Fußzeile eingerichtet. Wir haben alle unsere Inhalte eingerichtet und wir sind bereit, in RG-Abfrage hinzuzufügen. Und das ist, was wird die wirklich Keule cool Parallax-Effekte und nicht bewegen Effekt zu machen . Und was Parallaxe ist, ist es im Wesentlichen, wenn sich die Bilder zu verschiedenen, unterschiedlichen Zeiten bewegen verschiedenen, , so dass sie nicht wirklich miteinander verbunden sind, ist, wo Sie diesen Effekt bekommen, wo Sie vielleicht eine -Bild und Sie scrollen nach unten. Aber dann dieses Bild werde ich statisch eso Es wird nicht mehr scrollen, wenn es oben trifft und so weiter. Auf diese Weise, wenn Sie nach unten scrollen, werden diese Bilder eine wirklich schöne Wirkung im Hintergrund haben. Also werde ich dir zeigen, wie du das alles in der kommenden Lektion erledigen kannst. 17. 18 Hinzufügen von jQuery erstellen von event: Also jetzt der Teil des Kurses, auf den ihr alle gewartet habt, und das ist, wenn wir Ghee hinzufügen. Abfrage. G Query ist also eine JavaScript-Bibliothek, und es macht im Wesentlichen das Hinzufügen von JavaScript und das Ausführen allgemeiner JavaScript-Funktionalität viel einfacher. Und das ist die gemeine Sache für J. Query ist, weil der Hauptgrund dafür ist, dass die Leute es verwenden, weil es wirklich einfach ist. Es ist intuitiv, und es macht nur Sinn. Und wenn Sie mit CSS vertraut sind als Jake Worry und das Hinzufügen von G-Abfrageaktionen ist CSS sehr ähnlich , weil Sie die Elemente in Ihrer HTML-Seite mit in ähnlicher Weise und in der Reihenfolge aufrufen , um ungerade J Steinbruch. Also Jake Sorge ist eine JavaScript-Bibliothek, also ist es nur eine Js-Datei, und Sie können sie entweder herunterladen, lokal mit Ihrer Website verknüpfen, wo innerhalb Ihrer eigenen Domain, oder Sie könnten das Web Cdn verwenden. Also gehe ich über zu gehosteten Bibliotheken von Google, und sie geben uns eine neue Option hier, um die G Abfrage, Bibliothek, Quelldateien und Standortdateien zu kopieren Bibliothek, , und wir können einfach auf diese Online-Version von J Query verlinken. Und natürlich, natürlich, wenn Sie sich lokal entwickeln und wenn Sie keine Internetverbindung haben, dann müssen Sie Jake herunterladen oder um es auf Ihrer Website funktionieren zu lassen und acht testen zu können. Es ist also einfach, dies zu kopieren, einzufügen und Sie sind bereit zu gehen und bereit, Ghee, Abfrage und J Abfragefunktionalität in Ihre Website hinzuzufügen . Jetzt versteht jede Website, jeder Webbrowser JavaScript, und deshalb müssen Sie nicht wirklich etwas laden. Darüber hinaus in Ihrer Anwendung müssen Sie in Ihrer Anwendungnichts kompilieren. Es ist alles da, bereit zu gehen. Und Jake Sorge ist nur ein Weg, um das Hinzufügen von JavaScript in Ihre Website zu vereinfachen. Und für diejenigen von Ihnen, die mit Jack JavaScript vertraut sind, werden Sie all das Potenzial verstehen, das in J Query und J verfügbar ist. Query ist es nur eine einfachere Möglichkeit, JavaScript hinzuzufügen, und Sie können das gleiche tun Funktionalität auch in Javascript. Es ist also nicht notwendig, dass Sie tun können, dass Sie es in Job-JavaScript nicht tun können, aber es braucht ein wenig mehr Aufwand. Uh, und wir wollen nicht eine Basis zu viel von diesem Kurs rund um JavaScript, und deshalb werden wir Geek Worry und s O bringen. Dies ist die neueste männliche Version von G Steinbruch, also M I n ist eine min ified Version. Men ified Immersion bedeutet im Wesentlichen, dass, wenn Sie auf diese Webseite gehen, es ohne Leerzeichen sein wird. Wenn ich also hier zur Website gehe, sehen wir, dass dies die J Query Library ist, also ist sie komprimiert und bereit, schnell in Ihre Webseite zu laden. Um JavaScript hinzuzufügen, verwenden wir die Skript-Tags. So Skript-Öffnen und Schließen und dann zwischen. Hier ist, wo wir in unserer JavaScript- oder RJ-Abfrage hinzufügen. Jetzt, um auf Geico zugreifen zu können, funktioniert R E J Corey von der Morgendämmerung. Und das ist das Dokumentobjektmodell, was im Wesentlichen bedeutet, dass dies geladen wird, wenn Ihre Website immer dann, wenn Ihr Webcode in den Browser geladen wird. Und das nennt man das Dokument. Dies ist etwas, das vom Browser gerendert und erstellt wird, und J. Query und JavaScript haben Zugriff auf alle Elemente innerhalb der Webseite. Durch den Zugriff auf das Dokumentobjekt, es ist ein Dokument bereit nur im Wesentlichen bedeutet, dass, wenn der Browser fertig ist Laden der Website Inhalt und das Dokument ist bereit zu gehen. Dann können wir abfeuern und beginnen, Maßnahmen mit RJ Query zu ergreifen. Das ist alles, was diese Aussage hier bedeutet. Also eines der Dinge, die wir mit dem Navigationssymbol tun wollen, ist, dass wir es klickbar eso machen wollen. Moment haben wir unser Navigationssymbol und wann immer wir es nach unten verkleinern, na ja, ImMoment haben wir unser Navigationssymbol und wann immer wir es nach unten verkleinern, na ja, es ist nicht anklickbar und eso Um es klickbar zu machen, können wir es mit JavaScript und J. Corey tun , und ich werde eine anklickbar über G Abfrage. Und weil J. Crew nur so einfach ist, Aktionen und Ereignisse zu machen, Hot Trigger-Events, muss ich nur die Klasse auswählen, in meine Skriptdatei gehen, und wir beginnen alles mit dem Dollar. Unterschreiben Sie dort, um anzuzeigen, dass dies ein Element ist, das wir auf die gleiche Weise greifen, wie wir zwischen Klassen unterscheiden und ich ds ist das gleiche, was wir in Jake Sorgen tun können. Wir nehmen für eine Klasse ah Hash für, uh, uh, ich würde Element und auch schwächen zeigen, die Tagger gut und so die Funktionalität, die wir wollen tod. Wir möchten einen Ereignis-Listener hinzufügen, der ein Klick ist. Im Wesentlichen Boynes der Ereignishandler klickt auf das JavaScript-Element auf die Elemente , wenn es angeklickt wird, dann wird es ausgelöst und diese Funktion ausgeführt. Also Funktionen sind in sich geschlossene Codestücke in Javascript eso wir brauchen keine separate Funktion zu erstellen . Wir können diese Funktion einfach innerhalb dieses Klick-Ereignis s ausführen. Das ist also etwas, das wir tun können, wenn gewünscht. Wir könnten diese Klick-Funktionalität einfach vereinfachen. Also, was wird jetzt passieren? Jedes Mal, wenn auf das geklickt wird, werden wir diese Funktion ausführen und initiieren. Was wollen wir also, dass diese Funktion tut? Also wollen wir tatsächlich eine eingebaute Funktion in J. Corey ausführen . Und das meinte ich damit, wenn Jaqui die Dinge einfach macht, dass wir einfach die gesamte Navigationsleiste umschalten wollen . Also gehen wir zurück zu unserer Navigationsleiste und vielleicht sogar eine Klasse geben, so dass wir es leicht in Jake Arbeit identifizieren können . Und das war nur, um die Dinge zu vereinfachen. Also geben Sie ihm einfach eine Klasse von Knave und dann können wir dieses bestimmte Element identifizieren, wenn wir es im Code verwenden möchten. So ist alles bereits eingebaut und in der Morgendämmerung eingestellt. Also, wenn das geladen wird, haben wir Zugang zum Knave. die gleiche Weise, wie wir diese Klick-Funktionalität hinzugefügt haben, fügen wir eine eingebaute Funktion namens Slide Toggle hinzu, und dies wird die übereinstimmenden Elemente anzeigen oder ausblenden, je nachdem, wo es positioniert ist. Schauen wir uns das jetzt an und sehen, was passiert. Also jetzt, wenn ich darauf klicke, sehen wir, dass wir dieses Menü öffnen und schließen. Und so wird das wirklich nützliche Funktionalität sein, weil dies unser Klick-Menü ist. Das einzige Problem hier ist, dass, wenn ich größer bin, es tatsächlich verschwindet. Dies ist also definitiv ein Problem, das wir auch aktualisieren müssen, und wir können diese eso aktualisieren. Normalerweise würden Sie Ihr Browserfenster nicht neu dimensionieren, so dass dies normalerweise nicht als Problem aktiviert wird. Aber wir wollen auch sicherstellen, dass wir es nicht zu jeder Zeit im Menü verstecken. Also wollen wir nicht, dass die Zehe in einer Situation landet, in der jemand versehentlich darauf klickt und dann Größe ändern, und dann haben sie kein Menü. Eso Das ist etwas, was wir uns in der kommenden Lektion ansehen werden, wie man damit umgeht und wie man 18. 19 jQuery binding Ereignisse: in der letzten Lektion. Wir haben euch gezeigt, wie wir dort ein Click-Event zum Trigger machen können. Aber wir fanden heraus, dass es ein Problem gab, wenn wir neu dimensionieren. Also klicken wir auf dieses Symbol, unser Menü verschwindet und wir versuchen, zu einem größeren Bildschirm zu gehen. Dann ist unsere Speisekarte immer noch weg. Aber zum Glück J. hat J. Cory eine Lösung dafür und genauso, wie wir dies getan haben, wo wir das Element ausgewählt haben. Wir können auch für Fensterereignisse und Fenster sind so dass es anders ist als das Dokument weil Windows ist, dass Browser-Fenster und wir können hören und binden etwas passieren, wenn ein bestimmtes Fensterereignis passiert. Immer wenn der Benutzer Größe ändern ist ihr Browser, können wir das gleiche tun, was wir getan haben, und wir können eine Funktion abfeuern. Also, wenn sie es neu dimensionieren, können wir eine Funktion erstellen, und diese Funktion wird eine weitere dieser in sich geschlossenen sein. Also, wenn die Person Größe ändern das Fenster ist, können wir durch diese Funktion laufen, und hier können wir überprüfen, ob dieses jetzt Symbol ausgeblendet ist, so dass wir eine bedingte Anweisung tun können , im Wesentlichen eine bedingte Anweisung ist. Wenn das wahr ist, dann tun Sie dies. Und wenn nicht, dann tun Sie das. So neuartige Ikone. Wir wissen also, dass wir einen Wert dafür haben. Wir haben einen CSS-Wert dafür und wir können nach der display-Eigenschaft suchen, so dass wir im Wesentlichen sehen können , ob dies wahr oder falsch ist. Oder wenn wir sehen können, dass der Wert der Anzeigeeigenschaft, was sein Wert, dass wir gehen um zu sehen, ob sein Wert, dass keine. Und wenn es so ist, dann werden wir eine Art von Aktion machen. Und die Aktion jetzt wird Toe tatsächlich zeigen, so dass eine andere eingebaute J Coury-Funktion und ich habe nicht gesehen, dass es viel einfacher macht. Also hat es diese eingebauten Funktionen, um Elemente zu verstecken und anzuzeigen. Also muss ich tun, ist die Show und die geschweiften Klammern. Schauen wir uns das jetzt an und sehen, wie das funktioniert, damit wir die Größe ändern und uns erinnern können, jetzt haben wir es versteckt. Aber sehen Sie, wenn ich die Größe neu anpasse, überprüft es tatsächlich, ob es versteckt ist. Und wenn es so ist, dann schaltet es tatsächlich die Ansicht von diesem Knave, das jetzt Element und wieder zeigt es. Jetzt sehen wir, dass wir diesen wirklich schönen interessanten Effekt haben, bei dem es egal ist in welchem Zustand es war. Wann immer wir Größe wieder, es schließt dieses Menü und wir können dies eine swell nutzen, wenn einer von ihnen angeklickt wird , dass wir das Menü als auch verstecken wollen. Es ist also etwas, das wir tun wollen und wir wollen auch umsetzen. Werfen wir einen Blick auf das, und wir können überprüfen, um zu sehen, wie der Status dieser auch ist, und verstecken und zeigen Sie nach Bedarf. Das alles kommt also in der nächsten Lektion auf. Und auch werde ich dieses Wortsymbol loswerden, und ich werde es tatsächlich durch ein sichtbareres Typmenü-Symbol ersetzen. Also, das kommt alles in der nächsten Reihe von Lektionen. 19. 20 Symbolbibliothek hinzufügen: in dieser Lektion, Ich wollte in einem tatsächlichen Symbol hinzufügen, Stover es Schreiben Symbol. Ich wollte tatsächlich ein bestimmtes Symbol anzeigen, und hier werde ich die Schriftart verwenden. Ehrfürchtige Bibliothek. Dies gibt mir die Möglichkeit, genau wie ich es mit den Google-Schriften getan habe, eine CSS-Bibliothek einzubringen und Zugriff auf alle Goodies in der CSS-Bibliothek zu erhalten. Und es gibt eine ganze Menge von ihnen im Vordergrund. Ehrfürchtig. Und im Wesentlichen, was es tut, ist es wirklich nur macht Sie gibt Ihnen die Möglichkeit, Zugriff auf und und in der Lage , alle diese Symbole zugreifen, so gibt es Ihnen Zugriff auf 634 verschiedene Icons. Eso Wir haben Beispiele für die Symbole hier, und wir können im Wesentlichen einfach darauf klicken und wir können den Weg sehen, das zu bringen. Die, nach der ich suche, wird ein Menü-Symbol sein. Sieh mal, ob es so genannt wird oder vielleicht ist es vielleicht nur Bars s genannt wird. Also das ist diejenige, nach der wir eigentlich suchen. So erkennen Sie wahrscheinlich, dass dies ist, dass das Standardsymbol für die Menüleiste verwendet wird, also alles was ich tun muss, ist diesen Code zu greifen. Jetzt, wo ich possum finden muss, habe ich Zugriff auf all diese Symbole eso dies, speichern Sie das und gehen zurück in meine Webseite. Dann, wenn ich es aktualisiere, sehen wir, dass wir jetzt ein Standard-Menü-Symbol haben, und ich sehe, es ist immer noch über ein wenig für Sie, die rechte Seite. Also möchte ich mich darum kümmern, und ich möchte es auf der rechten Seite ein wenig Marge geben. Also werde ich eine Marge Recht geben und ihm eine 10 Picks geben. Also, nur um das über zu bringen, damit es nicht direkt an der Stelle dort hängt, wollen wir vielleicht sogar, vielleicht 15, nur so dass es nicht hängen und direkt über die Website. Also sieh mal, das funktioniert wirklich gut. Wann immer wir die Größe des Menüs ändern, haben wir ein reguläres Navigationsmenü zurück und wir sehen, dass alles richtig funktioniert. Eso können wir jetzt in einigen G Koury Effekte hinzufügen. Wir können hinzufügen, dass ein sofortiger Effekt, bei dem die automatisch auf die Seite scrollt und das alles in G-Abfrage gemacht wird, und das kommt alles in der nächsten Lektion. 20. 21 Animate Scrollen mit jQuery: Das wird die Lektion sein, auf die ihr alle gewartet habt. Und das ist die Lektion, in der ich das Web-Projekt tatsächlich animieren werde. Und ich werde Ihnen zeigen, wie einfach und wie wirklich nette und coole Effekte, die Sie hinzufügen können indem Sie nur ein paar Zeilen G-Abfrage hinzufügen. So wie das, was wir vorher getan haben, wo wir an diesem Menü-Symbol arbeiten, und wann immer wir darauf klicken, können wir auf diese Klick-Events hören. Wir werden das Gleiche hier machen, wo wir auf Cliques in diesem Menü hören werden , damit wir es so identifizieren können, wie wir es mit jedem anderen mit CSS tun, wo wir verschiedene Elemente auf ihrer Webseite identifizieren können, damit ich es jetzt identifizieren kann weil ich ihm die Klasse des jetzt Listenelements und jeden Ankertext gegeben habe, auf den geklickt wird. Dann möchte ich diese Funktion ausführen und dasselbe, was wir hier oben gemacht haben, werden wir hier und jetzt tun , wenn Sie sich schleichen, um ihm eine Reihe von Anweisungen zu geben, was wir eigentlich tun wollen , und eines der Dinge, die ich tun möchte, ist, dass ich wollen den Standard verhindern, denn wenn wir einen Standard-Anker haben, bedeutet das, dass es standardmäßig die Website nach unten verschieben wird. Mal sehen, was das bewirkt. Also, wenn ich darauf klicke, sehen wir tatsächlich nichts passiert, wenn ich auf diese Seiten klicke. Und das liegt daran, dass ich die Standardeinstellung verhindert habe. Die Standardaktion ist, dass automatisch zu dieser Seite blättert. Jetzt, da wir diese Aktion entfernt haben, müssen wir sie wieder hinzufügen. Lassen Sie uns also einen Blick auf das Ziel werfen, das beabsichtigte Ziel, das wir innerhalb der typischen Aktion einrichten. Und wir wollen herausziehen, wo wir wollen, was bezahlt zu welchem Teil der Website tatsächlich scrollen wollen . Das ist also wichtig, und das ist etwas, das wir aufgreifen müssen. Also, vielleicht können wir Abschnitt I D oder so etwas bekommen. Und das Gute an G Query und der Morgenröte ist, dass all diese Informationen in diesem Klick enthalten sind . Also, wenn jemand darauf klickt, erhalten wir tatsächlich Ereignisinformationen, damit ich das dort ausgeben kann, und ich kann Ihnen tatsächlich zeigen, was darin enthalten ist. Und so wollen wir das Attribut h ref erhalten und diesen Wert erhalten und es in Abschnitt I D platzieren . Und ich werde diese Informationen ausloggen, damit wir sie besser betrachten können. Das heißt also Abschnitt I D Console Log ist eine eingebaute Funktion in Javascript. Es ermöglicht uns, vom Browser aus dem Code zum Browser hin und her zu kommunizieren. Und auch, vielleicht kann ich diese Ereignisinformationen konsolen, protokollieren oder konsul Verzeichnis aus. Und das ist etwas, das wir bekommen können, und wir können sehen, wann immer wir auf die Morgendämmerung schauen. Also gehen wir rüber zu unserer Website und aktualisieren die Seite, und ich zeige Ihnen, wo die Konsul-Informationen erscheinen werden. So genau wie das, was wir früher mit Chrom angeschaut haben. Also haben wir diese Fähigkeit, wo wir diese Pop-up-Box hier haben und Sie können tatsächlich umschalten wo eine Quelle angezeigt wird, also muss nicht unbedingt dort auftauchen. Wir können es auf der rechten Seite des Bildschirms platzieren, also ist das vielleicht ein besserer Ort dafür. Also, wenn ich anklicke, sehen wir, dass wir tatsächlich den Ort abholen, das Ziel, zu dem wir gehen wollten. Und wir haben dies ein Ereignis eso das ein Ereignis ist im Wesentlichen dieses Ereignisobjekt und Sie können jede dieser Variablen in Ihrer Jake-Sorgenformel verwenden. Eso Wir haben unser Ziel dort und wir haben unseren Standort hier. Wenn wir also angeben, dass wir das Attribut der Veranstaltung abholen möchten, können wir diese Informationen von unserem Klick-Event abholen. Wir wissen auch, wo die Seite, wo sich die Maus befindet, und es gibt eine ganze Reihe von wirklich nützlichen Informationen hier. Also können wir tatsächlich jedes Stück dieser Informationen verwenden, die wir wollen, und wir sehen dort haben wir die h rau dort, wir haben den inneren Text. Also wissen wir, was der innere Text da ist und nur wirklich alles, was wir über äußere HTML haben und so ziemlich alles, was wir wollen. Wir haben Informationen darüber. Jetzt, wo wir sehen, dass, wann immer wir klicken, wir bekommen, dass i d und das ist im Wesentlichen, was wir vorbeigehen. Wir müssen berechnen, wie viel aus, wie viel der Unterschied ist, wie weit es von der Spitze der Webseite ist , und wir können dies wieder mit Offset-Eigenschaft des Ziels tun. Und wir sehen hier in all diesen Informationen, die wir auf Offset abholen können. Also wissen wir, dass der Offset im Wesentlichen kein America-Pixelwert ist , ,wo er sich auf der Positionierung dieses bestimmten Elements befindet , nach dem wir suchen, also können wir das aussuchen und es ist hier nicht wirklich aufgeführt, weil Das ist es nur innerhalb dieses Ereignisses, und wir nehmen diese Informationen auf, und jetzt schauen wir zurück in den Dom und können diese Berechnung nicht vornehmen. Also lassen Sie uns diesen Offset berechnen. Vielleicht rufe ich es einfach von oben an. Das macht dort also ein bisschen mehr Sinn. Und das ist, wo wir unsere Berechnung machen, oder J. Corey macht ihre Berechnung für uns, wo wir dieses bestimmte Element auswählen werden. Also, was auch immer dieses Ziel, also was auch immer Wertabschnitt Ideen gibt, dann müssen wir nur diesen Offset berechnen und was es von oben ist. Also nur um dir zu zeigen, damit ich das loswerden werde und die Seite aktualisieren und dir zeigen, was unsere Ausgabe ist. Wir wissen also, wo sich dieser Abschnitt von oben befindet. So viele Pixel. Es sitzt von oben. Wir sehen, dass der Abschnitt über ist gut, zu Hause ist die erste als etwa dann Dienstleistungen, Portfolio und Kontakt. Also gibt es ungefähr 1000 oder 1100 Unterschied oder 1089 Unterschied oder 1081. Je nachdem, wie Sie es betrachten, also ist das, was der Unterschied ist. Und das ist, was wir jetzt verwenden können, um unseren Scroll tatsächlich zu animieren und G Abfrage unsere Scrollleiste für uns bewegen zu lassen . Und das ist eine andere. Dies ist der coole Effekt, auf den wir alle in diesem Projekt gewartet haben. Also, hier geht's. Also jetzt müssen wir diese Elemente in unserem HTML identifizieren. Also werden wir nur HTML und Körper identifizieren, so wie wir es mit CSS tun und wir werden die eingebaute Funktion in Jake Worry Enemy verwenden . Führt also einen benutzerdefinierten Animationssatz von CSS-Eigenschaften aus , der addiert und mathematisch berechnet, wie dieses Scrolling funktioniert. Wir werden die Option des gescrollten Gesprächs verwenden, und so ist dies der Befehl, den wir verwenden werden. Und dann hier müssen wir nur Pipe setzen, diesen Wert in. So könnten wir auch einen numerischen Wert setzen. Aber weil wir es hier oben berechnen, ist das die Tatsache, dass wir wollen, dass die Zehe passieren. Und dann haben wir eine andere Option in dieser Funktion eingebaut ist, dass wir sie einstellen können, um anzugeben wie viele Millisekunden diese Animation dauern wird. So, jetzt, 1000 Millisekunden. Das ist also eine Sekunde, die diese Animation dauern wird. Also lassen Sie uns das jetzt überprüfen, damit Sie sehen, dass es automatisch scrollt. Wir haben unsere Schriftrolle wieder passiert, und es ist nur ein wirklich schöner, ordentlicher Effekt, den wir auf unserer Website hinzugefügt haben. So ist nicht mehr, dass automatisch auf diesen bestimmten Teil der einzelnen Seite Website klicken . Es scrollt zu ihm. Und das ist viel ansprechender für Benutzer, wenn sie sehen, diese Scroll-Ereignisse eine wirklich schöne , wirklich schöne coole Wirkung. In der nächsten Lektion haben wir noch einige Updates zu machen, weil eines der Dinge hier ist, dass wir dieses Menü nicht schließen, also müssen wir das Menü nach oben schieben, wenn es angeklickt wird. Darum müssen wir uns auch darum kümmern. Also, das kommt in der nächsten Lektion. 21. 22 Slidemenu oben jQuery: diese Lektion. Ich möchte das Menü aktualisieren. Wenn wir also die verschiedenen Geräte umschalten, sehen wir, dass wir dieses Menü haben. Jetzt ist es offen, wir scrollen. Aber im Idealfall sollte dieses Menü tatsächlich umschalten und schließen, wann immer wir unsere Animation machen. Also das ist wieder, dass dies hier hinzugefügt wird. Innerhalb dieser Klick-Funktion kann ich dieses Konsul Zeug auch loswerden, also brauchen wir es nicht. Das muss sich jetzt wirklich ansehen. Und lassen Sie uns das hier hinzufügen, wo wir unsere Menüleiste schließen, wenn sie geöffnet ist, wenn es etwas ist, wenn es nicht angezeigt wird oder es als Block angezeigt wird, damit wir das schließen können und das nach oben schieben. Dies ist also, wo wir Bedingungen verwenden. Also werden wir eine Überprüfung durchführen, um zu sehen, ob unser Daph-Symbol, wenn das CSS ist, einen Anzeigewert hat. Und wenn es genau wie oben aussieht, wo wir überprüfen werden, ob es tatsächlich ein Block ist, tatsächlich ein Block ist, und wenn es so ist, dann werden wir diese Funktion abfeuern, und was wir tun werden, ist anstelle von Folie, Toggle so im Wesentlichen eine ziemlich gleiche Funktion, die wir dort oben verwenden. Wir schieben es einfach nach oben, weil wir uns keine Sorgen um Kleinkinder machen müssen. Wir wollen es nicht runterschieben und so weiter. Also schauen wir uns das an. Ich muss diese Seite auffrischen. Also jetzt, wenn wir rausklicken, so dass etwas nicht gut abgefeuert wird, und ich kann dort in unsere Konsole schauen. Also haben wir dort ein Problem mit dem Drehknopf-Symbol. Es gibt also etwas Problem dort, und es sieht so aus, als hätte ich die Zeit dort verpasst, und das ist eine andere Verwendung für Konsole. Also ist es irgendwie gut, dass dieses Problem auftauchte, dieser Fehler kam, weil er Ihnen eine bessere Vorstellung davon gibt, wie wir diesen Konsul nutzen können. Also, jetzt, wann immer wir das Menü geöffnet haben und wir auf etwas klicken, sehen wir, dass es jetzt geschlossen wird. Wir machen diesen ganzen Scrolling-Effekt, also brauchen wirklich wirklich schöne Funktionalität. Also sind wir noch nicht fertig mit dieser Website. Auch wenn alles ziemlich gut aussieht, funktioniert alles. Ich möchte noch diesen Parallax-Effekt hinzufügen, der Ihnen während des gesamten Kurses verspricht . Eso Wir werden uns in der kommenden Lektion darum kümmern und wir werden J. Corey dafür benutzen . Und die Art und Weise, wie das funktioniert, wird es überprüfen, wo wir von oben aus der Schule weg sind, und wir werden eine Klasse hinzufügen und eine Klasse entfernen, abhängig von der Position des Scrollers und der Position des bestimmten Abschnitt, den wir uns ansehen. Im Wesentlichen werden wir es festhalten lassen, und wir werden diese Bilder nicht mehr machen. Wir lassen den Rest der Inhalte scrollen, aber wir werden die Bilder an Ort und Stelle halten, während wir nach oben scrollen, und das wird einen wirklich schönen Effekt hinzufügen. Also, das kommt in der nächsten Lektion. 22. 23 Parallax-Effekt hinzufügen: in dieser Lektion aktualisieren und einen Parallaxeffekt innerhalb der Website erstellen. Eines der Dinge, die ich bemerkt habe, ist, dass, wenn wir hier klicken, wann immer wir auf die Seite kommen und wir auf klein sind, als das Menü bereits geöffnet ist. Also wollen wir das nicht wirklich. Und das ist etwas, das wir, wenn ich diese Schnur betrachte, schon vorher auskommentiert hatten, damit wir an diesem Navigationsmenü arbeiten konnten, damit das Problem dort behoben werden sollte. Also, wenn ich jetzt auf die Webseite komme, ist das Menü auf dem kleinen Bildschirm geschlossen und alles funktioniert genau so, wie wir es wollten, als wir den Scrolling-Effekt vollzogen haben. Und wir müssen auch ein Kontaktformular hinzufügen. Also werde ich das in der nächsten Lektion tun. Also für jetzt, was ich tun wollte, ist, die Website zu aktualisieren und ich möchte die Website aktualisieren und unseren Parallax-Effekt einschließen . Also, um das zu tun, möchte ich tauschen. Ich werde J-Abfrage verwenden, aber ich werde auch austauschen, und ich werde hier eine Klasse erstellen, Fixpunkt oder Fixpunkt und für diese bestimmte Klasse. Alles, was diese Klasse hat, wird einen Hintergrund- und Hintergrundansatz haben, wird in einer festen Position sein und mit Geek-Sorge werde ich das aktualisieren. Und ich habe nicht Fixpunkt und entfernen Sie es als wo, wie wir durch scrollen. Also, wenn wir scrollen, möchte ich ein anderes Ereignis und meine J-Abfrage auslösen. Also werde ich das hier unten machen und wir werden das Fensterobjekt wieder benutzen. Also, wenn ein Scroll, das ist was auch immer der Fenster-Scroll passiert. Also binden wir es an dieses Ereignis, also binden wir es an die Größenänderung. Jetzt finden wir es nur zu scrollen Wann immer ein Scroll stattfindet, möchte ich eine Funktion auslösen, und dann wird diese Funktion in diesem Abschnitt hinzufügen und diese Klasse aktualisieren. Zunächst einmal müssen wir einen Blick durch alle verschiedenen Abschnitte werfen. Und was ich tun möchte, ist, während wir scrollen, ich möchte diese Eigenschaft so einstellen, dass eine Klasse hinzugefügt wird, wenn abhängig davon, wo die Bildlaufposition ist, also lasst uns dies aktualisieren und A mit allen verschiedenen Abschnitten auswählen, die wir haben. Also werden wir die Abschnitte auswählen, und wir werden jeden einzelnen von ihnen durchlaufen und die verschiedenen Funktionen durchlaufen . Also, das wird es wahrscheinlich ziemlich komplex hier auf dem J. Crace. Ich versuche, es zu behalten. Ein einfacher Ast ist wieder möglich eso. Wir werden diese Berechnung machen, die wir hier gemacht haben, wo wir von oben kompensieren. Aber weil wir die verschiedenen Abschnitte durchlaufen, können wir diese Informationen bekommen. Also werden wir das einfach wieder benutzen und wir werden es von oben holen. Das ist also eine andere Variable, und ich zeige Ihnen, was der Wert des Gesprächs ist, während wir scrollen. Also nur um sicherzustellen, dass es tatsächlich abfeuert. Also lasst uns die Seite aktualisieren. Werfen Sie einen Blick auf unsere Konsole und wir werden sehen, wie wir scrollen, wir finden heraus, wo wir eine schnelle Suche machen, und wir sehen, wo jeder Abschnitt positioniert ist. Und jetzt können wir diese Berechnungen verwenden und bestimmen, wo die Bildlaufleiste ist und auf welchem Bild wir schauen und eine schnelle Bedingung machen, um zu sehen, ob unsere gescrollt. Wenn unsere Eichhörnchenposition auf diesem Bild ist, dann können wir anwenden, dass sonst wird es entfernen. Das wird also ein wirklich interessanter Effekt sein, und es ist wahrscheinlich viel einfacher, es zu tun und Ihnen die Ergebnisse auf seiner Erklärung zu zeigen. Es wird ziemlich komplex. Also werde ich hier nur eine bedingte Aussage machen. Wir werden das Fenster sehen. Denken Sie daran? Mit dem Fensterobjekt können wir sehen, wo unsere Bildlaufposition ist, so können Sie sehen, wo Scroll warum und Eichhörnchen y gibt die Anzahl der Pixel zurück, die das Dokument bereits vertikal gescrollt hat. Also werden wir wissen, wie viele Pixel wir bereits gescrollt haben. Und wir werden eine schnelle Bedingung tun, um zu sehen, ob die Scroll-Position wieviel ist. Es ist anders als die von der Straffen. Und ich muss auch die Größe der Menüleiste hinzufügen. Also müssen wir das in Betracht ziehen. Und wenn es dieser Bedingung entspricht, dann werden wir das auswählen und wir werden eine Klasse hinzufügen. Die Klasse, die wir hinzufügen, wird das Gehirn sein, das wir gerade erschaffen haben. Das war also ein fester Punkt. Also fügen wir in der Klasse des Fixpunkts hinzu, und wenn es nicht mit dieser Bildlaufposition übereinstimmt, werden wir diese Klasse entfernen. Das wird also nur sicherstellen, dass wir die Klasse nur auf den Abschnitt anwenden, der innerhalb dieses Schulbereichs erscheint. Zusammenfassend wenden wir es an bestimmten Punkten an, je nachdem, wo wir scrollen. Und jetzt können wir sehen, dass wir diesen Parallax-Effekt haben, den die Bilder tatsächlich an verschiedenen Punkten bewegen . Also, wenn wir eine Reihe von verschiedenen Bildern hatten, können wir sehen, dass ein paar Punkte sie statisch gehen und dann an anderen Punkten, sie tatsächlich mobilisieren und bewegen. Und das ist, dass Parallax-Effekt, dass wir für s eine Reihe von verschiedenen Optionen suchen. Hier ist gut, dass Sie innerhalb Ihrer Website eso nutzen können, können Sie wirklich mit diesem spielen und einige wirklich schöne coole Effekte mit It s bekommen, so dass wir nur schalten, dass aus und wir können sehen, dass die gleiche Sache passiert jetzt auf dem größeren Bildschirm, wo wir erhalten, dass vollständige Parallax-Effekt innerhalb der Website. Also, die nächste Lektion werden wir beenden, was wir mit dem mit dem Kontaktabschnitt gesehen haben. Also werde ich einfach ein schnelles Kontaktformular auf ADOT in s tun. Ich werde es nicht mit irgendeinem wieder in verknüpfen, aber nur so haben wir die Formatierung für das Kontaktformular bekommen und kümmern uns um alle anderen Verbesserungen und Chancen und Enden, die getan werden müssen, um vervollständigen Sie dieses Website-Projekt. 23. 24 Kontaktformular erstellen: in dieser Lektion. Ich möchte ein schnelles Update auf der Website spielen. Also bemerkte ich, dass, wenn wir auf einem kleineren Bildschirm Wenn ich also die Gerätegröße umschalten und wir zu Portfolios gehen, damit ich durch die Menüleiste gehen werde , sehen wir, dass ein Teil unseres Portfolios abgeschnitten wird. Also wollen wir nicht, dass das passiert. Und das ist etwas, das wir in unserem Quellcode aktualisieren müssen. Es ist also nie auf einem kleineren Bildschirm. Es scheint abgeschnitten zu sein. Manchmal tauchen Bilder auf, also wollen wir Zeh. Machen Sie dies automatisch eso anpassen. Dies ist in diesem Abschnitt verfügbar. Also habe ich bereits die Min-Höhe auf 800 Plektren eingestellt. Aber besser noch, die Min-Höhe auf 100 Ansichtshöhe zu setzen. So wird dies sicherstellen, dass wir immer 100% verfügbare Höhe haben und wann immer wir Größe neu, dann ist die Größe der Behälter Größe ändern istas Nun, eso. Jetzt können wir all die Inhalte sehen, die in diesem Portfolio enthalten sind. Eso nur mit dem da fixiert. Also lassen Sie uns zurück in unser HTML springen und einige Aktualisierungen an unserem HTML-Code vornehmen, indem wir in diesem Kontaktformular hinzufügen. Also öffne dich. Unsere Redakteure gehen zu unserem HTML. Wir werden uns das JavaScript jetzt nicht ansehen. Wir schauen uns nur HTML an. Also, was ich tun wollte, ist, dass ich ein Kontaktformular hinzufügen möchte, also werde ich es in einem Absatz hier und für ein Formular tun. Also haben wir unser typisches Formular dort, und wir müssen einfach Dibs verwenden, um alle Formularfelder zu trennen. Also vielleicht kann ich ihm sogar eine Klasse von Rolle oder so etwas geben, so dass ich unterscheiden kann zwischen ihnen Hinzufügen von Beschriftungen für jedes Feld s Wir müssen für welches Feld angeben ? Das wird vier sein. Also werde ich ein Feld namens Name und dann innerhalb hier erstellen. Ich werde nur nach dem Namen fragen, der das Etikett abschließt und dann hier eine Eingabe machen wird. Eso der i d wird Name sein, der Name wird Name sein, und der Typ wird ein Textfeld sein. Jetzt können wir sogar so etwas wie einen Polizeiinhaber machen und dort natürlich einen Namen eingeben natürlich . Das ist also unser Grundformat für jedes Stück unseres Formulars eso das nächste ist E-Mail. In der Regel werden Sie nach Namen, E-Mail, Chaos, E-Mail, Adresse fragen E-Mail, Chaos, E-Mail, . Also alle diese müssen wir Teoh E-Mail aktualisieren und hier, anstatt Text zu schreiben, werden wir enge E-Mails machen. Also html five kümmert sich um die Überprüfung, um sicherzustellen, dass es sich um eine tatsächliche E-Mail-Adresse handelt. Und schließlich, lassen Sie uns noch eine hinzufügen, und diese kann die Nachricht sein, also werden wir einfach Nachricht und Band in Nachricht statt einer Eingabe machen. Also werde ich das hier zu einem Textbereich machen, und ich werde eine Nachricht geben, genau das, was auch immer Sinn macht. Name des Nachrichtentyps, über den wir uns keine Sorgen machen müssen. Aber wir müssen innerhalb des Textbereichs angeben, wie viele Zeilen wir es wollen. So ist etwas Styling dort schwächt. Spect geben Sie die Rose an. Wir können auch die Spalten angeben. Wie viele Spalten? Also, wie breit es sein wird, so vielleicht 2 50 und dann den Textbereich und Klammern abschließen, die in einem zusätzlichen für mich hinzugefügt wurden. Also werde ich das einfach beheben und dann schließlich, wir in einer weiteren Zeile hinzu, weil wir eine Submission Buttons brauchen. Also sind wir nur Klasse und vielleicht könntest du wieder rollen und dann hier drin werden wir nur einen Knopf hinzufügen , damit wir Tipptasten machen können. Nun, Band gleich einreichen. Das wird also ein Submit-Button sein und deine Nachricht senden. Werfen wir einen Blick und sehen, wie das auf unserer Website aussieht. Also gehen Sie runter zu kontaktieren So gibt es unser Kontaktformular sieht OK, nicht ideal aus. Machen wir ein paar Updates dazu und stylen es ein bisschen besser. Also lass uns, äh, ich muss ein neues Fenster öffnen. Hier können Sie einen besseren Blick werfen und sehen, wie es aussehen wird, wenn wir Styling hinzufügen . Also passiert alles und all die Magie geschieht in unserem Styling. Also, was ich tun möchte, ist, dass ich mein Styling hier oben an der Spitze hinzufügen möchte, wo wir alle unsere Körperinhalte haben würden . Also möchte ich in das Styling für alle unsere Formulare innerhalb unserer Website hinzufügen toe Schauen Sie das gleiche. Also werden alle Formen diese Eigenschaften annehmen, ich werde ihm eine Marge von Null und Auto geben, so dass wir diese Form automatisch zentrieren. Das fügt also einige schöne Eigenschaften hinzu. Vielleicht wollen wir ein Maximum mit machen, weil wir nicht wollen, dass es zu weit geht. Also vielleicht Max Wochen von 600 werden wir in etwas Polsterung hinzufügen eso Wie wäre es mit einem AM klopfen und vielleicht sogar einen Rand hinzufügen, so dass wir sehen können, sehen, wo das Chaos, wo das Formular solide ist, und tun es wird wirklich spät Grenze einfach so? Werfen wir einen Blick darauf, wie es jetzt aussieht, also sieht es ein bisschen besser aus. Wir müssen immer noch darüber sorgen, wie die Etiketten und so weiter. Sehen wir uns das an. Vielleicht wollen wir es sogar herumschaffen. Also Umrandungsradius. So wie wir es mit den äußeren Formen gemacht haben, werden wir es eins machen. So haben wir jetzt diese schöne, abgerundete Grenze um unsere Formen, eine schöne, gepflegte, interessante Wirkung auf die Form eso. Jetzt haben wir bemerkt, dass alle Etiketten irgendwie aus dem Schlag dort liegen. Also lassen Sie uns kümmern sich um Etiketten innerhalb unserer Website, und das wird gehen, um über alle von ihnen Anzeige und wir werden es als Block geschrieben Anzeige falsch zeigen dort. So als Block anzeigen. Sieh mal, ob das sofort ist. Dies macht es viel besser formatierte Form. Vielleicht wollen wir es mit 100% tun. Nur um sicherzustellen, dass wir diesen vollständigen Text aufnehmen, möchten wir vielleicht den Text so ausrichten, dass der Text nach links ausgerichtet ihn ausrichtet. Wir können auch unsere Margen festlegen, wenn wir wollen. Vielleicht lassen wir es gerade auf Punkt, also sieht es viel besser aus. Wir können auch die Eingabebereiche formatieren. Also, wenn Sie möchten, dass die Eingabe und der Textbereich gleich sind Also im Allgemeinen ist dies die Art, wie wir es tun, wo wir sie beide gleich starten und wir alle Eigenschaften dort anwenden. Also hier können wir eine Breite einstellen, so dass vielleicht 60% mit auf sie tun würde. Sieh mal, wie das aussieht. Also jetzt sind sie alle gleich mit wir wollen, wollen sie zentrieren. Wir wollen vielleicht eine Marge geben eso alle je nachdem, wie er aussehen wollte. Wir können auch eine Grenze machen, damit wir diese Grenze wirklich herausbringen und irgendeine Art von Randfarbe berühren können. Also lass uns drei Siebener sehen, wie das aussieht. Also bin ich mir nicht sicher, was das ist, Oh, das sieht dort ein bisschen besser aus. Ähm, wir können auch die Fußgröße einstellen. Also die Schriftgröße, die da sein wird, wenn Sie in Text eingeben. Also, was auch immer die Größen gekämpft haben, bemerken das. Also habe ich dort einige zusätzliche Abstände, die ich loswerden muss. Definitiv bekam, um loszuwerden S O. Das war eines der Probleme dort, wenn wir, wenn Klammern in dieser zusätzlichen Formatierung hinzugefügt und wir können auch eine andere wirklich cool einen Zehe hinzufügen in Formulare ist eine Eingabe. Und wenn wir uns auf die Eingabe und das ist auf den Textbereich konzentrieren, konzentrieren Sie sich. Wenn wir also ein bestimmtes Element auswählen, können wir die Rahmenfarbe aktualisieren. Also lasst uns Grenze machen oder wir werden einfach die Eigenschaft der Rahmenfarbe festlegen. Also, wenn wir es rot oder so etwas machen wollen, damit wir wissen, dass wir es ausgewählt haben, schauen wir uns das jetzt an. Also, wann immer wir es auswählen. Wir sehen, dass sich die Farben ändern, wenn wir uns darauf konzentrieren. Und das war's. Es gibt eine Menge Dinge, die Sie mit Ihren Formularen tun können, aber im Wesentlichen entspricht dies all unseren Bedürfnissen. So haben wir unsere vollständig entwickelte, einseitige Responsive Website, alle voll funktionsfähig mit G Query und JavaScript. Wir haben diesen Parallax-Effekt auf die Bilder. Wann immer wir nach oben scrollen, sehen wir das. Und wenn wir tatsächlich ein paar Hintergründe und diese anderen Abschnitte hätten, würden wir dort einige wirklich schöne Effekte sehen, und wir scrollen nach oben. Und wir stapeln alle Bilder. Es sieht so aus, als würden wir sie übereinander stapeln, während wir nach oben scrollen. 24. Zusammenfassung der 25 Einzelseiten der Parallax: Jetzt, da wir unser Website-Projekt abgeschlossen haben, ist es immer eine gute Idee, Ihre Website zu überprüfen und sicherzustellen, dass alles so funktioniert, wie Sie es beabsichtigt haben. Wir können auch zu unserem ursprünglichen Design zurückkehren und nur um sicherzustellen, dass es tatsächlich so aussieht , wie wir es wollten, als wir die Website entworfen haben. Im Wesentlichen gab es nicht wirklich viel an der Design-Arbeit, weil all das wirklich nette Zeug , das passiert, von G. Query behandelt wird . Das einzige, was wir wirklich betrachten hier innerhalb des Designs ist Daumen, wenn Sie und wie wir legen Menü. Und das ist typisch für jede moderne Website, wo wir diese Menüs haben und wir wieder Größe und es präsentiert anders auf unterschiedlich großen Bildschirmen. So voll funktionsfähiges Menü hier öffnet und schließt, und so weiter. Eso haben wir unser Kontaktformular sind über mich Abschnitt unser Produktportfolio Abschnitt und Sie können wirklich jeden dieser Abschnitte anpassen, um Ihre Bedürfnisse zu erfüllen. Aktualisieren Sie die Bilder nach Bedarf. Sie können sogar mit diesem Parallax-Effekt herumspielen, ihn auf verschiedene Abschnitte anwenden und einfach all die wirklich ordentlichen Dinge sehen, die Sie innerhalb J mit J. Corey, HTML und CSS erreichen können. Zusammen wird der gesamte Quellcode innerhalb des Kurses zur Verfügung gestellt werden, sowie die Ressourcen , die ich verwendet habe, um dieses Web Template zu erstellen. Sie können den Quellcode nehmen und Ihre eigene Version dieses Web Templates erstellen und es wirklich nutzen, um zu sehen, was Sie aus den Grundlagen, mit denen wir in diesem Kurs übergegangen sind und Ihr eigenes Styling und Ihr eigenes CSS anwenden können. Es ist wirklich interessant, die erstaunlichen Änderungen zu sehen, die Sie mit nur ein wenig Kälte mit ein wenig CSS tun können und dann wie J. Coury und JavaScript alle erstaunlichen Funktionen anwenden können. Sie können so viele Dinge hinzufügen, die Sie nach Bedarf entfernen und aktualisieren können. Um also wirklich den Effekt und das Aussehen und das Gefühl zu erhalten, das Sie für Ihre Website wollen und die Hauptsache, von diesem Kurs und dieser beruhigenden Essenz wegzunehmen, ist, dass es verschiedene Möglichkeiten gibt , Websites zu entwerfen und wir haben Ihnen gezeigt, wie Sie im Wesentlichen entwerfen eine vollständige Website von Grund auf neu und einzelne Seite moderne Website bereits zu gehen. Und ich habe gerade hier bemerkt, dass wir hier ein Problem mit dem Inhalt s O haben. Das lag daran, dass ich die Größe geändert und aktualisiert hatte. Es hängt also nicht vorbei. Aber das ist auch etwas, dass, wenn Sie über Ihre Website überprüfen, nur sicherstellen, dass alles richtig funktioniert. Und wenn Sie einen überfließenden Text haben, können Sie diesen überlaufenden Text immer ausblenden. Sie können diese maximale Breite festlegen und so weiter und nach Bedarf Aktualisierungen vornehmen. Das war also nur etwas, das vom Browser hinkte. Es passiert also nicht immer. Eso Das sind einfach verschiedene Dinge, um einen Blick in Augapfel zu nehmen, was mit Ihrer Website passiert , während Sie durch sie arbeiten. Also ermutige ich Sie, das, was Sie in den letzten Lektionen gelernt haben, wegzunehmen. Probieren Sie es selbst aus, üben Sie es und sehen Sie, was Sie mit HTML, CSS und Jake passieren konnten