Erstellen einer Portfolio-Website-Vorlage von Grund auf mit HTML, CSS, jQuery, PHP

1. Was wirst du in diesem Kurs lernen?: Hey, Leute, hier unten. Zurück mit einem anderen Kurs für dich, Dieser hier. Wir werden eine einfache einseitige Freiberufler-Profilvorlage erstellen. Also lassen Sie mich durchgehen und Ihnen einige der Dinge zeigen, die interessiert sein könnten. Sie könnten daran interessiert sein, diesen Kurs zu besuchen, also beginnen Sie ganz oben. Ich habe, ah, eines dieser netten kleinen Art von Fliegenmenüs wie dieses mit einigen CSS-Übergängen hier. Das ist also etwas, das wir durchmachen werden. Ah, in diesem scrollen wir nach unten durch diesen Kurs, wir haben nur die allgemeine Art von HTML- und CSS-Design und Look and Feel und so Kraft, wir werden darüber und einige der Dinge sprechen. Ah, dass ich gehört habe, dass ich glaube, dass das viel besser aussieht. Wir haben auch einen Portfoliobereich mit Pop-Up. Sie werden hier sehen, dass wir tatsächlich durchgehen und durch diese blättern können. Also sicher, dass du das tun musstest und dann auf den Grund kommen. Wir haben tatsächlich ein Kontaktformular. Und wenn wir das ausfüllen und ich werde einfach etwas Dummy Texan hier drücken, um Zitat zu bekommen. Dies wird tatsächlich dieses Formular über Ajax einreichen und uns dann eine verantwortliche wird eine Nachricht anzeigen. Ah, Erfolg oder Scheitern, basierend auf dem, was wir zurück bekommen. Also, nur um ein wenig zum Code zu springen, ist das eine Art Front-End. Natürlich wirst du eine Tonne HTML lernen. Wir werden auch ein Rastersystem erstellen, das Sie in verschiedene Projekte ziehen und ablegen können . Und das verwendet CSS-Gitter. Also gehen wir durch dieses Multi, um dir zu zeigen, wie ich das Menü gebaut habe. Ah, mit dem CSS-Übergang. Also haben wir das. Wir werden auch in einige der JavaScript für die Handhabung einige verschiedene Dinge mit dem Menü . Außerdem zeigen Sie Ihnen einige Optionen für verschiedene Möglichkeiten, die Sie auch mit dem Menü umgehen können. Natürlich haben wir den Formular-Handler Ah, für das Formular, das wir über Ajax erstellen. Und dann haben wir hier unser PHP-Skript, um diese Anfrage zu bearbeiten. Ah, senden Sie die E-Mail und so weiter und geben Sie uns dann unsere Antwort zurück. Also wieder, eine Menge HTML ah, viel CSS einige anständige ah Java-Skript und einige PHP sowie alle Arten von kommen zusammen in diesem Projekt basierten Kurs, um diese Freelancer Vorlage zu bauen. Also, wenn das etwas, das Sie interessiert sind, dass auf dem Kurs einschreiben, und ich freue mich darauf, Sie in der Klasse zu sehen. 2. Wie du das beste aus diesem Kurs stammt: Hey, so schnell, bevor wir in die Muttern und Schrauben dieses Kurses eintauchen, möchte ich einfach etwas wirklich schnell machen, wie man das Beste aus diesem Kurs herausholen kann, bevor ich so schnell in den Kurs gehe. Wenn dir der Kurs gefällt, würde ich es wirklich, wirklich zu schätzen wissen, wenn du mich verlassen würdest, Ah, Überprüfung des Kurses. Das hilft bei einer Tonne. Also, wenn du das tun könntest, würde ich es wirklich schätzen. auch Schauen Sie sichauchmein Profil an und folgen Sie mir dort drüben, wenn Sie durch Skill-Anteil benachrichtigt werden möchten . Wenn ich neue Kurse hochlade, versuche ich ziemlich regelmäßig hochzuladen. Wenn Sie also benachrichtigt werden möchten, wenn neue Kurse hochgeladen werden, folgen Sie mir einfach auf meinem Profil. jedoch Sie unsjedochdarüber reden, wie LassenSie unsjedochdarüber reden, wiewir das Beste aus diesem Kurs herausholen können. Also eine Sache, die ich irgendwie klar darüber machen möchte, ist dies ein projektbasierter Kurs, also werden wir in diesem Kurs ziemlich heiß und schwer durch, wie man diese Website baut, und wir werden nicht zu viel Zeit mit einer Art zu erklären, wie eine Sprache wie HTML CSS oder PHP oder JavaScript funktioniert. Okay, also bin ich wirklich diese Art von Annahmen. Ah, ein bisschen Wissensbasis, der Vertrautheit, zumindest mit diesen Sprachen. Und dann werde ich dir nur zeigen, wie man das macht. Und so möchte ich nur diese Unterscheidung machen. Es zeigt Ihnen, wie man etwas Spezifisches mit der Sprache macht, nicht notwendigerweise lehrt Sie diese Sprache in der Tiefe selbst. Wenn du das willst, was du tun willst. Wenn das mehr ist, was Sie suchen, dann wollen Sie wirklich überprüfen Ah, sprachspezifischen Kurs, wo sie, wo jemand geht tief in erklären, welche Sprachen . Also ein Beispiel. Ich kann wirklich schnell zu meinem Profil gehen. Ich habe diesen Anfänger-Leitfaden PHP, der in der Tiefe ist. Es sind acht Stunden, nur in PHP zu gehen und zu versuchen, alles zu erklären, was Sie über PHP wissen möchten . Anfänger-Leitfaden für PHP. Das sind etwa 3,5 Stunden. Tut html uh, 3,5 Stunden Das macht genau die gleiche Art von Sache. Selbst diese objektorientierten Programmierkurse gehen speziell in nur objektorientierte Programmierung, was eine Möglichkeit ist, PHP-Code zu machen und so weiter. Also möchte ich nur sicherstellen, dass zwischen einem projektbasierten Kurs und einem sprachspezifischen Kurs unterschieden wird, denn ein projektbasierter Kurs wie dieser wird sich irgendwie heiß und schwer bewegen, und es ist irgendwie an Ihnen, das Lücken. Ah, dass du vielleicht mit einer bestimmten Sprache hast, während du weitergehst. Wenn Sie also feststellen, dass Sie in Lücken geraten, ist das irgendwie der Weg, um das zu lösen. Ah, und wieder, dieser Kurs ist nur, um Ihnen zu zeigen, wie Sie bestimmte Dinge auf eine bestimmte Art und Weise zusammenstellen können. So können Sie das Beste aus diesem Kurs herausholen. Meinen Vorschlag. Wenn Sie in eine wirklich große Lücke geraten, würde ich gehen und diese Lücke füllen, bevor Sie weitermachen, weil es wirklich sein wird. Alles baut auf dem Ding davor auf. Es wird also schwer für dich sein, den Kurs fortzusetzen, wenn du diese große Wissenslücke da drin hast. Und das ist auch eines der netten Dinge an projektbasierten Kursen. Sind sie irgendwie geholfen, diese Art von Sache zu enthüllen? Das mag sich wie ein Negativ anfühlen, aber es ist eigentlich ein positives. Es hilft zu exponieren, wo Sie halten können, weil wir HTML, CSS, JavaScript und PHP zusammenbringen CSS, . Wissen Sie, Sie haben vielleicht noch nie all diese Dinge zusammen gemacht, und wir tun,wissen Sie, wissen Sie, Ajax und wir machen CSS-Übergänge und übersetzen und einige Dinge, die Sie vielleicht noch nicht getan haben . Und so wieder, es hilft nur, diese Löcher zu entlarven. Also, jetzt weißt du es, und dann kannst du gehen und diese Lücken füllen. Okay, das ist also der Wert eines Kurses wie diesem. Das ist nicht scheuen Sie davor. Mach dir keine Sorgen darüber. Gerade wenn Sie diese Löcher treffen und versuchen, diese Lücken zu füllen, während Sie entlang gehen. Also wieder, so können Sie das Beste aus diesem Kurs herausholen. Hoffentlich hilft Ihnen das, wenn Sie durch diese 3. Das reaktionsstarke Raster System mit CSS Raster erstellen: Das erste, was ich hier tun möchte, ist eigentlich das Grid-System zu bauen, weil wir das wirklich brauchen , bevor wir etwas anderes mit ihrer Website machen könnten. Aber ich muss es unterschreiben, irgendwie das Projekt hier aufstellen. Also werde ich hier in meine Ordnerstruktur gehen. Und unter diesen Vorlagen eine, werde ich nur einen neuen Ordner namens Working the Fold of That erstellen. Ich bin ich gebaut dies in Zuvor ist Freelancer Ah, 001 ist das, was ich es jetzt nenne. Aber ich werde diesen Arbeitsordner für das verwenden, was wir hier tun werden, und dann werde ich innerhalb dieser eine neue Datei namens index dot html erstellen und weil wir Ajax verwenden, wo wir ein PHP-Skript einreichen, aber weil wir das von Ajax tun, müssen wir dies nicht in HTML-Datei erstellen. Manche Leute fragen mich oft danach, also werde ich das tun. Eine ist eine HTML-Datei, nur damit Sie das sehen können. Und dann öffnen wir diese Akte und ich werde das vorerst schließen. Und ich möchte eine Vorschau der Lebensdatei machen und so tun wir es nicht Es ist nichts drauf, also tun wir es nicht Es zeigt hier nichts, aber jetzt können wir tatsächlich dieses Backup öffnen und lassen Sie uns voran und erstellen Sie einen neuen Ordner namens CSS und innerhalb , die wir voran gehen und eine neue Datei namens Grid Dot CSS erstellen. Jetzt setze ich dieses Gitter ein. Ich werde das Raster und das Menü tatsächlich in ihre eigenen CSS-Dateien legen. Der Grund, warum ich das tue, ist, weil diese Art von Drag & Drop-Dateien sein sollen, die Sie nicht ständig für jedes Projekt neu schreiben müssen, können Sie ihn einfach in ein neues Projekt ziehen . Und es ist für Sie bereit, in Ihrem guten System zu gehen, das Sie bauen möchten. Sobald Sie es bauen, wie Sie es wollen, können Sie es wieder. Du wirst das nur irgendwie benutzen. So wird in diesem Sinne wie dein eigener viele Bootstrap. Okay, also lasst uns voran gehen und öffnen als dieses Gitterpunkt-CSS nach oben. Und jetzt können wir das schließen. Und so werden wir CSS-Grid verwenden. Hier, lassen Sie mich weitermachen und nur ah Kommentar. Dies sind diese richtig Titel markiert dies und so neige ich dazu, es zu tun. Ich meine, du kannst es irgendwie tun, wie du willst, aber okay, also gibt es im Wesentlichen drei Dinge, die wir hier drinnen brauchen. Wenn Sie mit Gittern vertraut sind, brauchen wir einen Container. Wir brauchen eine Reihe, und wir brauchen Spalten. Okay, also fangen wir mit dem Container an. Es ist ziemlich unkompliziert. Und alles, was wir hier tun werden, ist, dass wir Marge links, Auto und Marge machen , rechts, Auto. Und im Wesentlichen, was das tun wird, ist es nur für uns zentrieren. Und dann habe ich fertig klopfte links von 15 Pixeln. Ich mag nur, wie das aussieht. Sie können irgendwie mit dem herumspielen, aber so dass das irgendwie von Ihnen abhängt. Ähm, aber das ist im Wesentlichen der Container. Alles, was wirklich tut, ist nur eine Art Zentrierung. Ah, das Containerelement. Ich zeige dir in einer Minute hier, wie das in einer Sekunde aussehen wird, aber ah, und dann gebe ich ihm ein bisschen Polsterung. So sieht es so aus, dass wirklich nichts zu einem CSS-Grad hat. Das ist nur, dass unser Container hier arbeiten muss. In Ordnung. Und dann machen wir Ah, wir werden unsere Reihe machen. Und hier fangen wir mit dem CSS an. Gutes Zeug. Also für CSS-Raster, müssen wir Display Raster tun. Das heißt im Wesentlichen, Hey, wir werden CSS Cred verwenden. Und dann gibt es viele verschiedene Möglichkeiten, wie Sie CSS großartig verwenden können. Und Sie können eine wirklich komplexe Layouts und so weiter bekommen, aber ein Grid-Systeme eigentlich ziemlich unkompliziert. Also machen wir Grid-Vorlage, äh, äh, Template-Spalten. Und dann werden wir die Wiederholungsfunktion hier verwenden, und wir werden 12 und dann einen fr machen. Okay, Okay, im Wesentlichen, was das sagt, ist das unsere Vorlage für unsere Spalten. Und was wir sagen, ist, dass wir 12 1 fr haben wollen. Spalte. Also das fr ist eine Art von dieser flexiblen, äh, diese flexible Einheit, die den verbleibenden Platz im Wesentlichen füllen wird, was uns das gibt, ist es uns 12 Spalten gibt, wie Sie es in einem Grid-System von Bootstrap oder was auch immer, und dann werde ich Gitterlücke 20 Pixel so machen. Das ist also nur die Lücke. Ah, das wird zwischen den verschiedenen Säulen liegen. Okay, jetzt, da wir das haben, ist das alles, was wir tun müssen. für eine Reihe. Willst du was sehen? CSS-Raster. Das ist wirklich ziemlich unkompliziert. Jetzt müssen wir nur unsere Kolumne machen, also zeige ich Ihnen ein Beispiel von einem, und dann werden wir einfach in den Rest fallen. Rufen Sie einen an. Und so wird das eine Spalte mit Spalte sein, und wir werden Gitter machen. Rufen Sie ihn an und überspannen Sie dann eins. Okay, jetzt siehst du all diese Lüfte hier drüben, denn vielleicht erkennt mein i d hier nicht all das neue schicke CSS gute Zeug. Aber dieses Jahr ist ziemlich einfach für eine Spalte mit Call him. Wir setzen nur die Rasterspalte auf eins. Und wie Sie vielleicht für zwei erraten haben, rufen Sie ihn mit Spalte an. Dann setzen wir den Grid Call, um zu überspannen, um das zu mögen. Okay, also ist es ziemlich unkompliziert. Ich werde, anstatt dich irgendwie zusehen zu lassen, wie ich den Rest davon austippe, werde ich den Rest einfach reinfallen. Also drei bis zwölf hier. So können Sie wieder Spalte Juan Spanne Juan-Spalte sehen, um drei Spanne zu beruhigen drei. Außer, dass du auf der Linie bis 12 bist. Das gibt uns also unsere 12 Kolumne Verstand. Das ist wieder sortierend. Art von dem, was Sie Bootstrap verwendet haben. Wir machen es jetzt nur, äh, äh, mit CSS-Gitter. Als nächstes werde ich hier eine Art von Dienstprogrammklasse erstellen, die keine Rinne ist. Wenn wir also keine Dachrinne haben wollen, werden wir das im Portfoliobereich verwenden. Dann werden wir Gitter machen, ihn Lücke nennen, und wir werden das auf Null setzen, damit der Raum loswerden würde, ist der Raum zwischen den Spalten und dann müssen wir nur unsere Medienabfrage machen. Also haben wir drei ziemlich einfache bei Media zu tun und lassen Sie uns Männer mit 999 oder 92 Pixeln machen . Wir werden diesen Bruchpunkt anvisieren, und wir werden einfach die Größe unseres Containers ändern und wir werden mit neun Hunderten, 70 Pixeln tun . Also, das schrumpft nur den Behälter. Dies ist eine Art des standardmäßigen festen Gitters. Ah, nähern Sie sich. Wenn wir 992 sind, schrumpfen wir den Container runter. Dann schrumpft alles darin damit, okay? Und wir werden dasselbe für über 1200 tun. Also bei Medien und wir werden Männer mit 1200 Pixeln wie diesem und dann Container machen, und wir werden das auf eine Breite von 1140 Pixeln setzen. Okay, also, je nachdem, wie groß der Bildschirm ist, werden wir einfach unseren Container schrumpfen oder erweitern. Ziemlich unkompliziertes Zeug da. Das hier ist ein bisschen länger. Das ist für ich werde dieses hier einfach fallen lassen, und das ist ein bisschen länger, aber das ist für die Säulen. Wenn wir also unter sieben oder 786 768 Pixel oder alle Spalten senken, werden wir die Rasterspanne ändern 2 12 Also was das tut, ist, dass es sie im Wesentlichen unter 768 Pixel macht . Es wird alles von Seite zu Seite gehen, so dass Sie drei Kisten haben. Ich beschließe, dass es diejenigen zusammendrücken wird, um übereinander zu stehen, was Sie von erwarten, ah, ah, reaktionsschnell. Großartig hier. Also, dass es das ist. Das ist unser Netzsystem. Mit CSS-Grid können Sie sehen, dass das viel einfacher und viel einfacher ist, weil die Werkzeuge, die wir jetzt in CSS cred haben. Also komm her und hol Doc und lass uns das machen. Und dann gehen wir weiter und lassen Sie uns unsere CSS-Datei für eine Sekunde hier einschließen, damit wir einen Blick darauf werfen können . Also werden wir tun, Leak wird dies hier in einer Sekunde bereinigen, aber wir werden Stylesheet wie dieses machen, und dann werden wir einen treff machen und wir werden gleich tun und dann können wir CSS-Slash Gitter Punkt CSS wie folgt verwenden . Okay, also sollte das in unserem Grid-System fallen und dann können wir oft so machen, wie dies getan wird wie Sie Abschnitt tun werden und dann innerhalb davon werden Sie Container tun. Uh, div Klasse ist gleich Container. Tag der Klassen sollte vertraut aussehen von jemals mit Bootstrap-Zeile gearbeitet und dann sagen div um , Klasse gleich und wird Aufruf tun. Wir rufen einfach drei so an, und wir sagen eins und dann werden wir ein paar von diesen wie diese fallen . Okay, das ist also die Standardsache, die Sie sehen werden. Ähm, lassen Sie mich einfach etwas schnelles Styling machen, damit wir das sehen können. Ah, Stil. Ich werde Abschnitt tun, der Hintergrundnummern tun wird Null ist. Ok. Und lassen Sie uns einfach Farbe Nummer f und dann für unsere Spalten Productive Anruf drei. Wir werden es einfach so einfach halten, wie das Farbe tun wird. Wir werden so etwas lesen. Oh, und lass uns Hintergründe machen, nicht Farbe. Ok. In Ordnung. So können Sie hier eine Vorstellung davon bekommen, was los ist. Wir haben unsere sind irgendwie, ähm, wir haben unseren Container. Wir haben unsere Reihe. Wir haben unsere Säulen drin. Eigentlich summiert sich das nur auf neun. Lassen Sie uns für für wenig tun, geben Sie eine bessere Idee. Okay, also, äh, äh, tatsächlich ändert sich, um vier anzurufen. Ok. So können Sie unser Gitter hier sehen. Es hat die Gittersäulenlücke dazwischen, wie wir es gesetzt haben. Und so haben Sie ein nettes Gittersystem, mit dem wir arbeiten können, und ich weiß nicht für Ja, also können Sie hier sehen. Sobald wir unter 780 68 Pixel erhalten, fällt es dort oben unten. Also wieder, gerade angefangen Art von einem Standard-reaktionsschnellen Gitter, das Sie erwarten würden, mit CSS-Grid fertig zu sehen . Und das ist etwas, das Sie hier nehmen können und Sie können es irgendwie optimieren, wie Sie es wollen und dann diese CSS-Datei erstellen und behalten, damit Sie sie in Projekte ablegen können. Natürlich, wenn Sie ändern wollen, wenn ich und all das, irgendwann können Sie alle Dateien auf so weiter kombinieren. Aber es gibt Ihnen eine Datei, die Sie ständig für Projekte verwenden können. Ah, wie du vorwärtsgehst. Das ist also das Gittersystem. Wir müssen das zuerst tun, bevor wir tatsächlich die Website hier aufbauen können. 4. Erstelle das Header: Nun, was ich tun möchte, ist unsere Kopfzeile und unser Menü zu bauen. Aber es gibt immer noch ein bisschen Setup, das ich hier machen muss, einige versuchen, das in so zu arbeiten, wie wir hier gehen. Also werde ich jetzt etwas davon machen, das erste, und ich werde versuchen, es schnell zu machen, also werde ich ein bisschen hier reingehen. Aber, ah, das erste, was wir tun wollen, ist, dass wir unsere Schriften wollen. Also werden wir Ah benutzen, verschiedene Schriftarten und Symbole. Ich werde die ist fallen lassen. Du bist wahrscheinlich mit solchen Sachen vertraut. Wenn Sie nicht im Wesentlichen, was dies ist, sind dies Google-Schriftarten. Also, wenn Sie gehen, um gut zu werden, nur Google-Schriften wie diese, Ich denke, es macht Spaß. Starten Sie Google dot com, aber tun Google fallen Schriftarten und klicken Sie durch, dass, können Sie alle diese verschiedenen Schriftarten nachschlagen und so weiter. Und lasst uns einfach voran gehen und diesen hier hinzufügen und dann, Ah, wenn du einen benutzen willst, dann wirst du sehen, dass es dir einen Link wie diesen gibt, OK? Und du kannst das hier rüber nehmen, und du kannst das hineinlassen und mich das kurz kurz für eine Sekunde verkleinern lassen, damit du das hier reinlegen kannst und du siehst , dass ich das getan habe. Ich habe diese Roboto-Schriftart bekommen und ich habe all die verschiedenen Gewichte, die es hat, und ich habe das als Link fallen gelassen. Ich habe Yellowtail bekommen , der nur ein Gewicht hat. Und dann das andere, was ich in dieser Schrift Awesome gebracht habe. Also, wenn Sie gehen, wenn Sie nach Schriftart genial suchen, dann können Sie sehen, dass wir Spaß haben hier genial und tatsächlich wie zu verwenden. Und wieder, es gibt Ihnen einen Link, den Sie fallen können. Das ist also die dritte Verbindung, die ich hier eingelassen habe. Also ich nur, um ein wenig Zeit zu sparen, all das Zeug auszuspielen. Das ist im Wesentlichen, wo Sie die haben. Ich werde nicht einmal den Betrag selbst eingeben. Ich schnappe ihn einfach von diesen Orten und lasse sie rein. Das ist also das Ah, das erste, was wir tun. Wir haben noch ein paar andere Sachen, die wir später hinzufügen müssen, aber wir machen uns darum Sorgen. An diesem Punkt. Und dann werde ich das irgendwie aufräumen und das als das markieren. Sie werden eine Art von unseren benutzerdefinierten Stylesheets sein, die nur Stylesheets beruhigen. Denk an den Fall. Wir haben unser Gitter. Ah, und dann werden wir eine für unser Menü erstellen, wie ich darüber gesprochen habe, wird wieder unseren Link hier erstellen, und wir werden das hier in nur einer Sekunde erstellen. Aber da ich hier bin, will ich Adam. Also werden wir ihn in unsere CSS-Datei setzen wird ein Menü wie dieses genannt haben, und dann werden wir eine haben, die ist, dass es eine Art von unserem gesamten ah, Website-Stylesheet sein wird. Also nochmal, ich mache das, weil ich das Menü werde und das Gitter wird irgendwie Drachen fallen lassen für verschiedene Projekte. Dieses Stylesheet genau hier wird spezifisch für dieses Projekt sein. Und wieder, Sie wahrscheinlich für die Produktion. Ihr würdet vorgehen, Männer, wenn ich diese und so weiter. Ah, und das würde es besser machen und so weiter. Aber in Ordnung, also gehen wir weiter und schieben Sie das dann zurück. Seitdem wissen wir, was das sind und ändern wir unseren Titel zu Joe Freelancer. Lassen Sie uns diesen Stilabschnitt loswerden. Das brauchen wir nicht mehr. Und lasst uns diesen Abschnitt hier loswerden. Ich wollte dir nur das Zeug zeigen. Okay, jetzt, wo wir jetzt sind, haben wir eine Art von diesem Zeug eingerichtet, wir werden diese CSS-Dateien noch nicht erstellen. Wir werden eigentlich zuerst unser HTML machen. Und so werden wir ein Element namens Header erstellen und diesem eine Klasse von Sichtkopf wie folgt geben . Und wir verwenden dies anstelle eines Abschnitts, wissen Sie, in anderen Teilen der Website wird Abschnitt verwenden, aber weil dies ein Header war mit Header. Und dann benutzen wir unser Gitter hier. Also werden wir div Klasse gleich Container. Uh, und dann div Klasse gleich Zeile, und dann div Klasse gleich und wir werden vier anrufen, und das wird für ein Logo sein. Also wollen wir diese Klasse haben, die wir gezielt darauf abzielen, zu fliehen, wenn wir wollen. Und dann in diesem, werden wir jede Klasse gleich Marke haben. Sie können diese Dinge so nennen, wie Sie wollen. Ich bin nur, du weißt, dass ich Bootstrap ziemlich viel benutzt habe, und das ist so, wie sie es tun. Also ist es mir nur vertraut. Also gehen wir zu einem Entwurf gleich nichts für jetzt. Und wir werden Joe Freelancer sagen, also wird das schaffen. Ah, das wird sozusagen eine Art von unserem kleinen Seitentitel erschaffen. Okay, das ist also die Markenabteilung. Und dann ist der andere Abschnitt, den wir hier tun müssen, für unser Menü, also werde, äh, div Klasse gleich Aufruf acht. Also haben wir vorher gefordert. Wir müssen immer bis zu 12 addieren. Wir werden acht anrufen und dann innerhalb davon. Hier fangen wir an, unsere Speisekarte aufzustellen. Das erste, was wir brauchen, sind unsere Kleinkinder. Wir werden div Klasse gleich Menü umschalten, wie dies ist mir geben Toggle Button, und dann werden wir innerhalb dieses Do I Klasse gleich f a f minus gehen. Das ist also von der Schrift Awesome und nichts darin. Und dann brauchen wir nur, dass wir im Wesentlichen drei davon brauchen, also gehe ich einfach voran und kopiere das, und okay, damit du sehen würdest, dass das uns drei Zeilen hier gibt. Wir haben noch nichts von diesem Zeug gestylt, also wird es wirklich wackelig aussehen. Ähm, das ist also unser Menüschalter. Aber wir brauchen dann auch unsere Speisekarte. Also werden wir tun, Knave Klasse gleich letzten gleich Menü, und wir werden dies und ich d geben weil Sie mehrere Menüs auf der gleichen Website haben könnten. Also haben wir eine Klasse von Menü, die die meisten unserer Styling tun wird. Wir geben ihm auch eine Idee für den Fall, dass wir dieses speziell anvisieren wollen. So wurde Teil Primary Menu Kurs genannt. Nennen Sie es, wie immer Sie wollen. Ähm, und dann werden wir auf einer noch Liste Klasse gleich Menü naff tun. Das ist also die eigentliche Navigation, ähm, Menü. Und dann drinnen, lass mich einfach die ist reinwerfen. Kein Punkt, diese Luft. Ziemlich unkompliziert. Keine Verabredung. Sieh zu, wie ich ein paar davon austippe. Das sind also Listenelemente, und so haben wir Listenelement. Wir geben ihnen jedem eine Klasse von Männern. Sie knave Artikel, die wir verwenden. Ich benutzte Anker, weil das alles innerhalb derselben Seite verlinken wird. Ähm, über Fähigkeiten, Portfolio-Kunden und Kontakt. Das waren die verschiedenen Abschnitte. Und so, wenn wir einen neuen Abschnitt erstellen, nur um das hier zu erklären, gut, tun Sie etwas wie diesen Will Abschnitt tun und wir werden Klasse gleichen Abschnitt tun. Wir werden darüber reden. Aber dann machen wir das Gleiche. Nun, das schafft jetzt für diesen Anker. Wenn Sie auf diesen Link klicken, wird es mit dem Abschnitt verknüpft, wenn Sie etwas geben ein I D. Sie können dann erstellen Sie einen Anker Tony, dass ich d. So das ist, was wir hier tun. Ich werde gehen. Hatte den Abschnitt nicht da drin verlassen, weil wir das sowieso irgendwann benutzen werden . Alles klar, das ist also das HTML. Ah, das ist ziemlich unkompliziert. Das nächste, was wir dann tun müssen, ist, dass wir in dieC. Sgelangen müssen C. S und es gibt ein paar Dinge, die wir tun müssen. Wie ich schon sagte, ich habe hier noch ein bisschen eingerichtet. Lassen Sie uns voran und erstellen Sie eine Datei und wir werden dieses Menü Punkt CSS nennen und dann werden wir eine andere erstellen und wir werden nennen, dass die Freelancer Nullen Es eine wirklich Antworten von Null. Es gibt einen Ruanda CSS Fall davon sind wieder die beiden Dateien, die wir hier oben aufgenommen haben, und ich denke, Sie bekommen alles richtig geschrieben. Okay, also sollten diese beiden Dateien jetzt enthalten sein. Und eigentlich ist die erste 1, in die wir gehen, dieser Freiberufler. Ich werde sie beide öffnen. Also haben wir es. Aber dann werde ich hier in diesen Freiberufler gehen, weil wir ein paar Dinge mit der Leiche machen müssen , nur Zeh. Schaffen Sie das irgendwie aus dem Weg. Also machen wir Körper unsere Markierung hier. Nein, ich werde nicht zu wählerisch für das Video. Ordnung, also gehen wir zum HTML-Text, und wir werden den Rand des Browser-Pads irgendwie loswerden. Das ist. Normalerweise sind sie so Marge Null Polsterung Null. Ähm, wir machen den Hintergrund. Ich mache das hier, weil du es in meinem bemerken wirst. Es hat irgendwie diese gräuliche Farbe, und ich schaue es einfach nicht an, wenn du zu gehst. Eigentlich, wenn ich gehe, um das wirklich vor Ort zu stellen, wird es das nicht tun. Aber um meinetwillen, ich mag es einfach nicht, es so zu betrachten und dann werden wir die Schriftart im Allgemeinen für den Körper auf diese Farbe setzen . Okay, das gibt uns ein paar von dem Zeug los. Ähm, wie ist die Luft hier? Jetzt? Ich habe einen Doppelpunkt gesetzt. In Ordnung, also als nächstes machen wir Ah, Schriftfamilie. Also werden wir Leiche machen. Wir werden P den P-Tagger in Eingabe-Auswahl-Textbereich tun. Wahrscheinlich sind hier noch andere. Das ist alles Zeug. Ähm, alles, was nicht Sie wollen, um die Schriftart zu ändern, denn Sie haben nicht nur grundlegende Tags und so weiter, Körper sollte die meisten Sachen fangen, aber einige Dinge, wie Absatz-Tags und Eingaben und so weiter, dass es nicht wird, dass es nicht immer fangen wird. Das sind die, die wir benutzen, und wir werden in dieser speziellen Seite verwenden . Das sind die, die ich anvisiere. Also gehen wir zur Schriftfamilie, und wir werden das auf Roboto setzen und dann eine Verstärkung von Sand Saref so. Okay, um, nochmal, das ist nur eine Art Einrichtungsmaterial, das wir tun müssen, um aus dem Müll herauszukommen. Wir werden Maxwell es 100% Bild machen, damit sichergestellt wird, dass Bilder schrumpfen. Das ist nur eine Art allgemeiner Bildreaktionsfähigkeit, die Dio schwächt. Ach... Dann machen wir Körper P H ein H zwei H drei h für H fünf h sechs, Eingabe, Auswahl und Textbereich wieder. Und wir werden die Schriftart Warten auf 300 einstellen. Ok. Und hier fast fertig. Wir machen Punkttext und Punkt-Text-Bereich. Wir setzen die Box Größe der Rahmenbox und gut, mit 100% Rahmen, ein Pixel fest. Und dann C C c ist die Farbe tun Paddington Pixel. 15 Pixel. Ah, lassen Sie uns die Schriftgröße 16 Pixel machen. Was? Größe eins rund. Ok. Und ich tue das, also ah, muss das wahrscheinlich nicht mehr tun. Die doppelte Schriftgröße hier. Die ganze Idee dahinter ist, dass einige Browser keine Widder unterstützt. Es wird standardmäßig hintere Zehe die Pixelgröße. Hier. Ist das eine Gewohnheit, in die ich irgendwie reingezogen habe, dass ich wahrscheinlich brechen muss , aber , deshalb mache ich das. Also, Höhe habe ich 40 Pixel gedreht. Okay, diese Luft, wie ich schon sagte, waren nur einige Dinge, die wir brauchten, um aus dem Weg zu kommen. Und dann müssen wir auch unseren Website-Header Abschnitt machen. Das gilt also für unsere Speisekarte. Also haben wir hier drüben erschaffen. Ah, Header mit Site-Header Klasse. Jetzt müssen wir das etwas stylen. Also machen wir, äh, äh, Header. Und du erinnerst dich daran, du das vielleicht nicht bemerkt hast, aber wenn wir zurückgehen und es ist Oh, sieh mal, eigentlich hier ist es genau hier. Das könnte uns hier runterziehen, wenn Sie sich an die Site-Header erinnern, die tatsächlich mit behoben wurden. Und es hat diese Transparenz. Das ist also etwas von dem, was wir hier machen werden. Okay, deshalb müssen wir uns ein bisschen damit anlegen, bevor wir in die Speisekarte selbst kommen können. Ordnung, also werden wir tun, wir werden diese Klasse, äh, Site-Header anvisieren äh, . Und wir werden Position fixiert machen. Das ist, was es macht, so dass es an der Spitze bleibt, auch wenn Sie scrollen. Wenn Grenze unten ein Pixel solide, und wir werden e für so tun, und dann werden wir mit 100% zu tun und wir werden Hintergrund tun. Das wird ihm seine Transparenz geben. Also gehen wir in den Hintergrund. Aber statt einer Hex-Farbe machen wir RGB ein Also es ist rot, grün, grün, blau Und dann ist der Opazitätsheld Pacenti So 2 55 2 55 2 55 Das gibt ihm die Farbe, also wird es weiß, und dann sind wir gehen, um ihm eine Pastie von 0,9 zu geben. Das wird es so machen, dass, wenn du nach unten scrollst, es das kleine Stück von einer Passage E dort hat. Also lassen Sie uns einfach aktualisieren und sehen, ob stellen Sie sicher, CSS-Dateien und so weiter. Also bekommen wir hier etwas. Ähm, weißt du, wir haben einige Änderungen hier, also scheinen unsere CSS-Dateien hier durchzugehen, also ist das gut. Jetzt komm rüber und lass uns Dot Brand gehen. Ich werde die Zeilenhöhe machen und wir werden diese Zehe Eins und Schriftgröße 28 Pixel einstellen. Schriftgröße 1.75 Ram so. Ok. Und man konnte sehen, wie sich die Schriftgröße dort oben ändert und so weiter. Also nochmal, das ist ein gutes Zeichen. Und dann werden wir tun Marke ein und wir werden die Textdekoration loszuwerden sagte, dass zu keiner. Uh, und dann setzen wir die Farbe auf 333, damit Sie sehen können, dass wir hier ein bisschen von etwas bekommen. Wir haben hier eine Art von dieser Marke, die aktualisiert wurde. Ähm, und das ist wirklich alles, wofür wir jetzt tun müssen. Ah, in unserer Freiberufler-Akte. Jetzt können wir in die Menüdatei kommen und damit anfangen zu verwirren. Es gibt also einen anständigen Betrag. Wir müssen sowohl den Umschalter tun, und dann müssen wir das Menü selbst machen. Also fangen wir mit Ah an, nein, wir fangen mit dem Schalter an. Also gehen wir voran und machen es jetzt. Ah, mach Menü-Strick, umschalten. Und wir werden positionieren, dass dieses Absolute es absolut positioniert hat, hauptsächlich weil es ah ist, es ist ein Heck von viel einfacher. Es wird es oben oben aufstellen, oder? Uh, und du wirst es hier sehen. Bewegen Sie sich in nur einer Sekunde, aber wird es auf die Oberseite legen, richtig? Egal wo Sie scrollen oder was auch immer und mit dem festen, ähm, mit dem festen Menü und all dem Zeug einfach viel einfacher, es so zu positionieren, weil wir ein mobiles Menü von Anfang an machen, anstatt ein horizontales Menü zu haben, das in ein mobiles Menü. Also werden wir tun Z-Index wird das auf drei Cursor-Zeiger setzen, und dann werden wir mit tun, und wir werden diese Zehe Auto setzen. Richtig, also wird das positionieren. Siehst du, es ist jetzt oben oben, und dann Menü umschalten und dann Punkt FAA Dies wird tatsächlich das Symbol anvisieren. Also Display-Block, und Sie sehen, jetzt sind sie übereinander Raum, Fälligkeit, Höhe, Null, äh, Rand 008 Pixel und Sie müssen nur spielen herum, ohne ein wenig zu sehen, was Sie damit mögen, und wir werden Schriftgröße 28 Pixel zu tun. Okay, du kannst jetzt sehen, wenn du dir das ansiehst, es ist ähnlich, oder es ist identisch mit dem, was wir hier haben. Okay, also fangen wir an, irgendwo ein bisschen damit zu kommen. Wir werden auch diesen Übergang hinzufügen. Also für CSS-Übergänge wurden alle 800 Millisekunden zu tun und zu erleichtern. Das wird uns irgendwie dafür sorgen, dass wir die Übergänge machen können, die wir dio-wollen . Okay, also müssen wir das dem Icon hier hinzufügen. Ah, um das zu tun. Also werde ich zurückkommen und all diese Übergänge hier machen. Ich werde das nicht alles machen. Ah, zu diesem Zeitpunkt noch. Also möchte ich auf die Speisekarte gehen und es zuerst erledigen, bevor ich in das komme. Also werden wir runterspringen, und wir gehen zum Menü und fügen hier ein wenig Platz hinzu. Wir müssen diese Stile wieder in hier hinzufügen, aber tun Menü. Wir werden die Position fixiert machen. Also das ist Ah, wir werden es hier reparieren. Wir werden Top Null machen, und das werden wir tun, richtig? Null. Okay, das wird also unsere Speisekarte hier drüben positionieren, denn wenn du dich daran erinnerst, rutscht unsere Speisekarte so von der Seite aus. Okay, das ist es, was Ah, das ist, was wir hier einrichten. In Ordnung, also werde ich eine Breite von 30% machen. Du siehst diese Art von Stick hier draußen und dann wird es standardmäßig versteckt sein. Ich werde das noch nicht tun? Weil ich will, dass ich es mir ansehen will, aber wir kommen zurück und wir werden Sichtbarkeit machen, und wir werden es versteckt machen. , Ich werde jetzt nur sichtbar machen,damit wir es sehen können, aber ich will das als Platzhalter. Okay, also werden wir wieder Hintergründe machen, und wir werden Ach, Transparenz darüber machen . Also machen wir RGB a und 35 zu 2 55 2 55 und dann wieder 0,9 so. Und dann wollen wir, dass das die ganze Höhe dehnt. Also gehen wir in die Höhe und wir werden 100 VH machen. Ähm, VH ist eine Art neue Sache, die du benutzen kannst und es macht das Tun solcher Sachen wirklich einfach. Also, wenn Sie etwas sein wollen, ah 100% vertikale Höhe Ah, das ist, was Sie dio So klopfen 50 Pixel auf diese. Also wollte ich ein paar schöne Polsterung drauf. Indu-Box-Dimensionierung Ah, Grenzbox. Und wenn Grenze links ein Pixel fest und wollen tun er Kraft, und dann werden wir zurückkommen und wir werden die Übergänge machen. Ich werde die Übergänge nicht machen. Ah, zu diesem Zeitpunkt noch. Okay, also haben wir das, äh, wir müssen hinzufügen. Alle hinzugefügt hier Punktmenü Punkt-Show. Wir haben das noch nicht getan. Also, um, wieder, ich werde zurückkommen und diesen Teil davon machen. Aber im Moment möchte ich nur das Styling erledigen, damit wir es sehen können, bevor wir anfangen, es auf all dem Zeug zu verstecken . Ansonsten wird es ein wenig schwierig zu arbeiten. Also, jetzt möchten Sie Menü-Dash Knave wie folgt machen, und wir werden Margin Null-Polsterung tun, Null im Listenstil Typ none. Ok. Und sieht so aus, als ob ich zwei Semikolons anrufe. Richtig? Das bringt uns auf den Zehenstil. Die Speisekarte ein wenig. Ja. Werde das los. In Ordnung. Wie wir Dot Menü machen, Dash, Nab A, und wir können die tatsächlichen Links in hier anvisieren. Also werden wir Block anzeigen, und wir werden Padding von sieben Pixeln tun. 08 Pixel. Null. Das ist einfach das, was ich herausgefunden habe. Man kann irgendwie Unordnung ohne ein bisschen. Ich möchte, dass die Textdekoration keine ist. Versuchen Sie, hier ein wenig nach unten zu scrollen und lassen Sie uns die Schriftgröße machen. Ich mache 28 Pixel hier. Ich mag, dass ich so nett und groß bin. Ich mag nur so, wie das aussieht. Okay, jetzt können Sie hier sehen. Wir haben sehr, sehr ähnlich zu dem, was wir mit unserer Our Box hier Art von Scrolls so haben. Wir werden in nur einer Sekunde über die Breite reden, aber,weißt du, wieder, wir haben einen sehr ähnlich aussehenden Stil Zehe, wie wir hier vorher hatten. Wir werden in nur einer Sekunde über die Breite reden, aber, weißt du, wieder, wieder, Das wird also eine ziemlich lange Lektion sein. Uh, wir haben das Menü gebaut, wir haben es gestylt, die irgendwie die Kopfrechnung bekommen haben und so weiter. Und wir müssen nur wieder reinkommen und wir müssen einige der Übergänge machen und so weiter, und das wird etwas Javascript und so weiter erfordern. Also ich will nicht, dass das in 40 oder 50 Minuten Unterricht wird, also werde ich diesen hier schneiden, und dann kommen wir in der nächsten Lektion zurück und machen das Anschließen in Bezug auf das Java-Skript und das rotierenden und all diese Art von Sache. 5. Animieren: Okay, also lassen Sie uns mit diesem Menü fortfahren. Das erste, was ich hier tun werde, hole das einfach aus dem Weg ist in diesen Arbeitsordner zu kommen Ich bin und erstelle eine neue Datei, einen neuen Ordner namens Js für unser Java-Skript. Ich ziehe einfach diese erscheinen und dann werden wir das umbenennen, ich rufe nur diesen Freiberufler an. Oh, Wanda ist so. So die gleiche Idee. Geh weiter und öffne das auf. Also ist es offen, und dann müssen wir zu unserem Index dot html zurückkehren und wir müssen das jetzt hier einschließen. Ah, mit dem JavaScript so viel wie möglich. Du willst versuchen, dir dieses Zeug in den Fuß zu legen, oder wir haben nicht unbedingt einen Fuß oder noch , aber wir gehen weiter und wir werden dieses Zeug hier unten hinzufügen. Eso wird Skripte machen, und wir werden Jake müde benutzen. Also müssen wir J-Abfrage einschließen. Genau wie ich schon sagte. Ah, mit dem mit den Schriften und dem Fall genial und so weiter, können Sie buchstäblich nur Google J Abfrage Cdn und Sie werden ah Link wie diesen im Wesentlichen erhalten und Sie fügen einfach das hier ein, das wird Ah j Abfrage enthalten. Dann sind Sie wahrscheinlich vertraut. Wahrscheinlich habe ich das zu einer oder zwei Zeit gemacht. So ist die Skript-Quelle gleich. Und jetzt werden wir unsere JavaScript-Datei von unseren Seiten machen. Wir gehen zum Freiberufler. 01 Punkt Js wie diese. Und das wird diese JS-Datei enthalten, die wir gerade erstellt haben. Also jetzt haben wir G-Abfrage, die wir verwenden werden. Dann haben wir, ähm, haben wir unsere Javascript-Datei, die wir hier benutzen werden? Okay, also für unser Menü, was wir im Wesentlichen tun werden, ist, um dieses Umschalten zu tun, wir werden Java-Skript Toe verwenden, etwas Werbung hinzufügen und einige Klassen wegnehmen. Aber dann werden wir tatsächlich CSS verwenden, um, um, um die Animation und das Verstecken und Anzeigen und so weiter zu behandeln. Also das JavaScript, das Sie eine Art von seinem Licht der Berührung wie möglich verwenden möchten? Nicht unbedingt alles in Ah tun, das Javascript hier. Also, das werden wir hier tun. Also werden wir Jake müde machen, und wir werden das Dokument unterrichtet machen, bereit, und wir werden funktionieren, und dann drinnen werden unsere Dollarzeichen setzen, damit wir das benutzen können. Und diese Art von wickelt das in, Ah, Ah, diese anonyme Funktion, so dass sie alles aus dem globalen Raum fernhält und verhindert, dass es überladen und widersprüchlich wird und so weiter. Das erste, was wir tun werden, ist, dass wir einige Dinge umschalten, die wir hier machen werden. Wir werden dies in Etappen tun, aber wir werden das NAFTA-Menü auf Schaltfläche klicken umschalten. Okay, jetzt werde ich ein paar Variablen setzen. Die 1. 1 ist Wurzel Rex. Das werde ich später benutzen. Aber ich werde es jetzt einstellen, weil ich weiß, dass wir es brauchen. Und die Route wird einfach HTML und Körper so sein. Das wird also etwas sein, das ein wenig später brauchen wird. Aber wir werden das jetzt einstellen, und dann machen wir das Menü umschalten. Das wird das Kleinkind sein, das wir anvisieren werden, und wir setzen das auf unsere Speisekarte Taco-Klasse. Also im Wesentlichen, was wir getan haben, ist, dass wir eine Variable erstellt haben, dass diese Referenzen Menü-Toggle-Klasse sind, die unser Kleinkind hier ist, dass wir erstellt haben, so dass das wirklich nur eine Performance-Sache ist . Wenn du diese mehrmals benutzen willst, willst du das versuchen, damit du nicht ständig wieder in den Dom gehst, was die Leistung schadet. Okay, wenn wir das eingerichtet haben, dann können wir auf den variablen Menüschalter verweisen, und wir werden die On-Methode verwenden, also Punkt auf , ah, Menü umschalten Punkt und dann werden wir klicken. Das ist also auf Click. Wir werden diese Funktion ausführen, und das ist eine anonyme Funktion, die wir hier erstellen und was wir tun werden. Das erste, was wir tun werden, ist, dass wir eine Variable namens diese erstellen. Also, was auch immer angeklickt wurde, wird jetzt auf dieses Element gesetzt, äh, wieder, das ist ein Tun, das diese Variablen oder Performance-Sache setzt, richtig? Also, das wird zielen, was angeklickt wurde. Also ah, das ist es, was wir zuerst anlegen wollen. Und so werden wir diese Punkt-Toggle-Klasse machen. Dies ist also eine J-Abfragemethode und schwächen Toggle-Klassen. Wenn also darauf geklickt wird, wird die Klasse hinzugefügt, wenn sie erneut geklickt wird, um sie zu entfernen. Wenn es erneut geklickt hat, schaltet Will added einfach, dass hin und her basierend auf Klicks. Also werden wir hinzufügen und entfernen die Klasse namens Close Game wird dies in unserem CSS hier in nur einer Minute verwenden . Und dann gehen wir in unseren Dom und wir werden Menü finden. Ah, Menü Knave. Ah, Menu Männer, Sie haben einen Gegenstand, an den Sie sich erinnern. Das sind alle Klassen, die wir benutzen, wenn wir unsere Klasse aufbauen, okay? Und wir werden die Klasse Show so umschalten. Okay, das ist also das ist die Hauptsache, die wir tun werden, um das und die Idee umzuschalten . Hier, lass mich das rüber ziehen. Eigentlich, lass mich hierher kommen und dir das hier zeigen. Es ist ein bisschen einfacher, aber die Idee hier ist, wenn wir dies überprüfen und wir uns unseren Menüfall ansehen, haben wir unseren Menüschalter. Hier öffnet sich unsere Speisekarte. Und Männer, Sie müssen unsere Listenelemente hier sehen, wenn ich darauf klicke. Sehen Sie, jetzt bekommt all dies das Element, das die Klasse der Show erhält und so dass wir das mit CSS anvisieren können . Und dann bekommt unser Menü Toggle die Klasse der Kleidung. Okay, das ist also wichtig. Das ist, was wir in unserem CSS verwenden werden, um Onda Ziel all dieses Zeugs umschalten zu können. Okay, also ist es ein wenig schwer für mich, den Inspektor in Ah zu machen, die ich die Wolke. Das gefällt mir. Das ist, warum ich ah, ich benutze dieses andere Beispiel hier. Aber es ist die ST. Das ist genau die gleiche Sache, die wir hier machen. Okay, was also passieren sollte, ist, wenn wir darauf klicken, sollte es diese Klassen wie erwartet ändern. Lass mich sehen, ob ich kann. Eigentlich werde ich wahrscheinlich die Frame-Quelle verwenden müssen. Lassen Sie mich sehen, ob ich das dazu bringen kann, damit wir es einfach überprüfen können. Es war nicht das, was ich wollte. , Das Beste, was wir tun können, ist, es zu inspizieren, und es hat uns nicht wirklich gegeben, was wir hier suchen. Okay, damit Sie sehen können, dass wir hier ganz nah sind. Und wenn wir hier runter kommen, hat Menü Show. Ah, Menü Knave hat Show und alle Artikel haben hier gezeigt. Okay, also bekommen wir, was wir brauchten. Das JavaScript fügt die Klasse hinzu Es fügt nahe dem Schalter hinzu, und es fügt Show tow das Menü und alle seine Elemente hinzu. Das gibt uns also, was wir dann für CSS tun müssen, damit wir hier zurück in das Menü für unser CSS gehen können und jetzt können wir Ah beginnen, mit einigen dieser Sachen vermasseln und verstecken und zeigen und so weiter. Also für die Show, was wir wollen Eigentlich, jetzt was wir tun können, ist, dass wir zum Menü gehen können, erinnern wir uns daran, dass wir das war Sichtbarkeit sichtbar? Wir können das so verborgen ändern. Und so ist jetzt die ah, die Speisekarte versteckt. Lassen Sie mich auffrischen, ist okay. Wir werden das hier in einer Sekunde reparieren. Eigentlich spielt es keine Rolle, denn wenn wir den Übergang machen , ist es ah, es wird gut. So wie auch immer, wir können auf Menü gehen, dann zeigen und wir können Sichtbarkeit tun und wir können sichtbar tun. Das ist also die Art der grundlegenden Art des Umschaltens hier, richtig? Es ist also versteckt. Und wenn wir dann darauf klicken und diese Show-Klasse hinzufügen, kommt es so zurück. Das ist also die Grundidee hier. Ah, das ist, ich denke, dass der Schatten von mir auf dieses Menü zielte. Das war das. Das ist es, was mich ohnehin wegwirft. Ah, das ist eine Art grundlegendes Verstecken und Anzeigen der Speisekarte. Okay, das ist also die Grundidee. Und dann im Wesentlichen, was wir tun, ist, dass wir es nur einige Übergänge hinzufügen, damit es ein wenig besser funktioniert. Also hier oben unter Menü, dann was wir tun werden, ist, wenn du anfängst und wir werden , so transformieren, und wir werden drei D übersetzen und wir tun, ah, 100 Prozent und werden 00 tun Also, Im Wesentlichen, was das tut, ist es, es nimmt es vom Bildschirm, oder? Dies ist ein Drei-D-Übersetzer. Also, wenn Sie ein übersetzen drei d so aussehen und wir gehen hier zum leeren Ende Nein, es zeigt Ihnen, dass es ein Es ist eine Art von drei D-Modell hier. Und das Schöne daran ist, dass du mit diesen Zahlen spielen kannst, damit du 20 tun kannst , und ich zeige dir,was es tut, richtig? So ist es für die 1. 1 es die Ausgänge der Seite zur Seite Bewegung. Okay, also setzen wir das auf 100%, so dass es im Wesentlichen aus dem Bildschirm genommen und dann die anderen beiden für oben und unten und rein und raus, Wir setzen nur Null. Wir verarschen uns nicht mit denen. sind uns egal. Okay, das ist, was die Transformation tut, ist, dass das Menü zu Beginn vom Bildschirm genommen wird, und dann werden wir hier einen Übergang erstellen. Also werden wir den Übergang machen, und wir werden alle 600 m machen und er ist raus. Okay, das nimmt es vom Bildschirm ab. Und dann, wenn wir hier runterkommen, um zu zeigen, werden wir Transformation machen und wir werden drei D übersetzen und waren 2000 Okay, also was das tut, ist, wenn die Showklasse diese Transformation nicht benutzen wird, okay, und das wird es von der Seite nehmen. Aber wenn wir die Showklasse hinzufügen, sie jetzt anstelle von 100% gesetzt. Es wird die 20 setzen, die es direkt wieder auf die Seite bringt. So erhalten wir diesen Slide-In- und Slide-Out-Effekt von diesem und wieder verwenden wir nur Lecken-CSS-Übergänge. Sie können den Übergang sehen. Wir spezifizieren genau hier. 600 Millisekunden erleichtern sich. Okay, so bekommen wir das spezifisch. Ah, Übergang dort. Wir haben auch die Speisekarte. Toggle Case wird hier rauf kommen. Wir machen das Menü, um die Sachen hier unten zu wechseln. Also werden wir reden Menü umschalten, und wir tun f ah Punkt f Entschuldigung, Doc Kleidung und dann Punkt f a. Also das ist, wenn die engen Klassen darauf angewendet. Also werden wir uns verwandeln, und wir werden drehen und 180 Grad. Okay, und dann Ah, wir werden das eine Rotation verursachen. Okay, also empfangen. Es klebt hier. Sie können sehen, wie sie sich alle so drehen. Okay, das ist also der Anfang. Wir wollen, dass sie alle zum Ausdruck kommen, aber wir wollen, dass sie alle dann in eine bestimmte Position landen. Denn wenn du dich daran erinnerst, was wir am Ende haben, ist dieses X Okay , also drehen sie sich alle, aber wir enden mit diesem X also haben wir das Drehteil. Wir haben jetzt das rotierende Teil. Wir müssen, ähm Jetzt müssen wir den Build bekommen, das X im Wesentlichen. Also gehen wir zu tun Menü umschalten. Wir werden jetzt schließen. Wir werden die FAA anvisieren, aber jetzt werden wir jedes Kind machen, und wir werden eins machen. Also werden wir das ganz oben auf das erste Kind anvisieren. Und so werden wir uns transformieren, und wir werden drehen, und wir werden 45 Grad machen, und wir werden übersetzen, und wir werden fünf Pixel machen. Fünf Pixel. Okay, also, was das tun wird, und jetzt ist, anstatt dieses 180 Grad dreht, wird die Straße 45 Grad nehmen und dann wird es übersetzen, wird es irgendwie seine Richtung ändern, sondern nur den ganzen Weg über. Du kannst es jetzt sehen. Es landet in einem bestimmten Winkel wie diesem. Ok. Und wieder, Sie können die MGM gehen und wieder übersetzen schauen und irgendwie eine Vorstellung davon bekommen, wie das funktioniert. Du musst wirklich nur irgendwie mit diesem Spiel spielen, um das genau dort zu bekommen, wo du es willst. Okay, das ist also die 1. 1. Es ist irgendwie die gleiche Idee für die anderen beiden. Also kopieren und fügen Sie das hier ein und so für das Endkind ist das mittlere. Denken Sie daran, wir gehen zu einem nächsten. Dieser verschwindet tatsächlich. Die 2. 1 die mittlere. Also, eigentlich, was wir mit diesem hier machen werden, ist, dass wir die Deckkraft auf Null setzen, die sie verschwinden lässt. Also, wenn wir hier nach oben schauen, klicken Sie darauf. Sehen Sie, jetzt ist die mittlere weg und ich habe diese zwei Art von Seite an Seite so, und dann für die letzte, müssen wir nur seine Richtung ändern. Also ist es irgendwie kreuzt die andere und sieht aus wie ein S X also machen wir negative 45 Grad. Also fangen wir jetzt an, den Anfang einer Axt zu haben, und dann hast du einfach eine Art ah, du musst sie da hineinschieben, bis es nach Rechten aussieht. Wir gehen zu sieben Pixeln und negativen sechs Pixeln. Ok. Und das ist nur von einer Menge Prozess und Luft, herauszufinden, wie ah, du hast einfach ein Chaos damit bekommen. bis es dort landet, wo Sie es wollen. Okay, jetzt haben wir eine Axt, wir klicken auf das X, und es dreht sich zurück zu unserem Ta go. Wir klicken erneut darauf. Jetzt haben wir unsere Art von Toggle-Effekt hier, dass wir hinter uns her waren. Es ist alles mit CSS-Übergängen gemacht. Das ist also keine CSS-Übergangsklasse, also gehe ich so schnell durch. Wenn Sie mehr darüber erfahren möchten, empfehle ich, nach einer CSS-Übergangsklasse oder Tutorials oder etwas zu suchen, das wirklich darin eingraben kann. Aber das zeigt dir, wie wir das hier gemacht haben. Das Letzte, was wir dann tun werden, ist, dass wir nur ein wenig Reaktionsfähigkeit machen. Denn wenn wir das schrumpfen, hat es jetzt 30% aufgestellt. Und du siehst, es fängt an, hier ganz wackelig zu werden. Wir wollen eigentlich Mawr von Wir wollen mehr davon sehen, wenn wir so viel Platz haben. Also werden wir nur eine Medienabfrage machen, so bei Medien und wir machen Max mit 1200 Pixeln, und hier werden wir das Menü auf eine Breite von 40 Prozent setzen. Okay, das macht es nur ein bisschen weißer. Und dann kommen wir hier runter , , damit das die Grundidee ist. Lassen Sie mich Ihnen die verschiedenen hier zeigen. Ich glaube, es gibt keinen Sinn und sehe zu, wie ich das alles austippe. Also, dann haben wir 9 92 Ziel und wir sagten, es zu 50%. Das ist es, worauf wir genau hier sind. Sie können sehen, dass es die Hälfte des Bildschirms beansprucht und dann, ah, mit 7 68 wird es voll gehen. Wenn wir also super werden, weiß ich nicht, ob wir können. Super breit, du siehst, dass es sich wieder bewegt. Sie sehen es, weil wir hinzugefügt, dass Übergang, erinnern, erscheinen auf Menü. Wir haben diesen Übergang genau hier, den wir hinzugefügt haben. Deshalb gleitet es so, anstatt nur zu schnappen. Okay, das ist, was diesen Effekt erzeugt, so dass, wenn wir an einem Punkt nach unten scrollen, er auf 50% rutscht und dann schließlich zu 100% geht. Okay, also das ist Ah , so ist das gemacht. Das ist, wie das Menü die Art der Fliege aus der Rotation dieses Zeugs und alles. Das ist die ganze Art von vielen, bis auf ein paar Dinge, wenn wir anfangen, Abschnitte hinzuzufügen und Sie tatsächlich anfangen , diese anzuklicken , ähm, werden wir etwas reibungsloses Scrollen machen. Wir müssen einige Handhabung dieses speziellen Menüs zu tun. Ah, du hast die Wahl, ob du dich automatisch verstecken kannst und so weiter. Also gibt es hier etwas mehr zu tun. Aber vieles davon wird nur sein, ich denke, all das wird eigentlich nur im Java-Skript sein . Also überqueren wir die Brücke, wenn wir da sind. Wir haben einen Haufen, andere Abschnitte, die wir hier erstellen müssen. Das ist also die Speisekarte. Das sind die Übergänge, etc., Ähm, Ähm, und wie wir das alles gemacht haben. 6. Den Übergang erstellen: Jetzt, wo wir das Menü haben, haben wir unser Grid-System gebaut. Wir können irgendwie beginnen, einige der Abschnitte auf der Website hier aufzubauen. Also hatten wir damit begonnen, diesen Abschnitt hier zu bauen. Wir haben wenigstens den Abschnitt hier gebaut, also gehen wir weiter und Ach, beenden Sie das. Also habe ich unsere Sektion hier. Wir werden in einer Sekunde darüber reden, warum wir das tun. Also werden wir div Klasse gleich machen und wir werden unseren Container tun. Und dann im Inneren natürlich wird natürlicheine Reihe machen. Und dann werden wir ah div Klasse gleich tun würden zwei Spalten nennen sechs und wie Sie nur zwei von denen tun. So tun aktive Klasse equals nennen sechs. In Ordnung. Und das ist es, woran wir hier arbeiten, nur um das hier runter zu ziehen. Ist das hier? Also wird es ah haben, das Bild auf der linken Seite und dann diesen Text auf der rechten Seite und verlinkt, um hier ein Zitat zu bekommen. Jetzt einer der Gründe, warum wir diesen Abschnitt machen und dann setzen wir den Behälter innerhalb des Abschnitts. Wenn Sie sich von unserem Grid-CSS erinnern, ändert unser Container diese Größe basierend auf der Breite des Bildschirms. Also, wenn wir diese voll mit Hintergründen machen wollen, wie Sie sehen, , sagen Sie dies genau hier, wie dies die volle Breite des Browsers hier dehnt, egal wie groß wir hier gehen. Aber wir wollen, dass dieses Zeug ein bisschen zentriert ist und nicht so voll ist. Der Abschnitt geben wir tatsächlich die Hintergrundfarbe auch. Und dann setzen wir unseren Container hinein, um dort zu schaffen, wo er hier zentriert ist. Okay, deshalb haben wir den Abschnitt so. Ähm ist in der Lage, das zu tun. Also wickeln wir alles innerhalb eines Abschnitts und dann nicht schwächen Stil den Hintergrund des Abschnitts voll mit zu gehen. Okay, das, was wir hier tun werden, ist, dass wir hier rüber in unseren Arbeitsordner kommen müssen , und wir müssen einen neuen Ordner erstellen, und wir müssen diese Bilder nennen. Also machen wir Bilder und ich komme hier rauf. Ah, von diesem hier und schnappen Sie sich das Bild. Also, ähm, lass uns Joe hier und Kim sehen, oder wenn wir Zhou oder Zhou Entwickler Joe Developer machen. Also kopieren wir das einfach und kommen hierher und wir werden das hier einpacken. Wir werden über das Portfolio auf den Testimonials und all das Zeug ein wenig später reden. Okay, das gibt uns jetzt unser Bild. Ah, das Bild glaubt, es ist eigentlich quadratisch. Lassen Sie uns sehen, eine Offenheit zu sein, und schauen Sie es sich an. Und so ist es eigentlich ein quadratisches Bild. Aber wenn Sie sich in unserer Website erinnern, haben wir ein kreisförmiges Bild. Also werden wir das tatsächlich über CSS machen. Also, natürlich musst du das nicht tun. Wenn Sie Teoh nicht wollen, empfehle ich das, anstatt das Bild kreisförmig ah zu machen, im eigentlichen Fotoshop oder was auch immer es in CSS macht. Wenn Sie sich später ändern möchten, ist es etwas, das leicht zu ändern ist. Also hier werden wir in das Bild fallen. Wir gehen zu unserem Bild, und wir werden Klassengleichheit machen. Ich bin G umzingelt. Sprich darüber. In einer Sekunde, ich d gleich Avatar, und dann werden wir Source gleich machen und wir werden Bilder machen und dann Joe Dash, Entwickler ah Dot und J Peg. Und lassen Sie uns das alles nur für eine Sekunde besprechen, und wir werden es tun. Ault ist gleich Joe. Ah, ich schätze, Freiberufler wirklich, was es ist, wissen Sie, diese zu mischen und zu passen. Okay, das gibt uns unser Bild dort. Wenn wir das zurückziehen, können wir sehen. Jetzt haben wir dieses Bild. Es ist eine Art Zentrum da und so weiter. Okay, gehen wir nah dran. Das gibt uns das. Und dann hier drin werden wir Ah erschaffen, wir werden den eigentlichen Text machen. Das ist also eines der Dinge mit HTML, besonders Samantha semantisches Markup, das wir tatsächlich tun werden, wenn Sie einen Abschnitt erstellen, wissen Sie, der mdn sagt, dass Sie wirklich immer einen Header innerhalb jedes Abschnitts haben sollten, der die -Titel für diesen Abschnitt. Das ist es, was wir eigentlich hier tun werden. Wir werden ein Header-Tag erstellen und wir werden diesem eine Klasse von Abschnittsheader geben, okay? Und das wird uns erlauben, diese Abschnittsüberschriften anzusprechen. Und dann im Inneren haben wir unser h eins, und tatsächlich werden wir dem eine Klasse von Abschnittstitel geben, und dann fügen wir ein paar Ah hinzu, wir fügen hier einige andere Klassen hinzu. Wir werden Titel zitieren, weil es ein Abschnittstitel ist. Aber es ist auch der Website-Titel und wir werden Text links. Viele dieser Klassen existieren noch nicht, also werden wir diese tun. Aber dann machen wir das High. Ich bin Joe Teil hier, okay? Und dann ziehen wir das wieder rüber, und dann machen wir den eigentlichen Absatztext, also werde ich das einfach reinlegen. Es ist ein bisschen einfacher. Es gibt ein paar Zeilen hier, Ähm, nicht unbedingt wert, all das auszutippen. Aber lassen Sie mich das hineinlassen. Und die große Sache hier ist, dass wir sie in ein Absatz-Tag einfügen, das eine Klasse von Lead hat . Also, weißt du, da steht, dass ich seit 14 Jahren ein freiberuflicher Weltdarsteller bin. Du musst ein paar Orte haben, an denen ich hier Wert lege. Ähm, aber es sind wirklich nur Absatz-Tags mit der Klasse von Lead, okay. Und das letzte, was wir hier reingebracht haben, ist, dass wir unseren „get quote“ -Button einfügen werden, also werden wir eine Klasse gleich machen und tiene sein und dann werden wir tiene primär sein und dann werden wir einen Entwurf gleich machen und wir werden mit Kontakt, den wir noch nicht erstellt haben. Aber wir werden der Mensch bekommen ein Zitat wie das. Okay, das ist also das HTML. Sie werden feststellen, dass wir gegen mehrere verschiedene Ah, mehrere verschiedene CSS-Klassen haben, die wir noch nicht erstellt haben. Also müssen wir durchgehen und einige davon erschaffen und dann mit einigen der spezifischen Styling von diesem über Abschnitt Ah auch umgehen. Also eines der Dinge, die ich tue, wenn wir hier zu unserer CSS-Datei gehen, haben Sie bemerkt, dass ich mit Körper angefangen habe und dann irgendwie hier unten habe ich den Header-Abschnitt , aber eigentlich nach dem Körper, weil ich irgendwie an den Körper denke, ist eine Art ein Reset. Dann mache ich, was ich globale Stile nennen und globale Stile sind nicht etwas, das zu einem bestimmten Abschnitt gibt Dinge, die in jedem Abschnitt verwendet werden können und so, wie unser Bild abgerundet unseren Text lachen. Solche Dinge sind, was ich als globale Stile betrachten würde. Und das sind die Dinge, mit denen wir hier arbeiten werden. Die 1. 1 ist also ein Abschnitt. Also haben wir den Abschnitt erstellt. Jetzt wollen wir dem Abschnitt Ah geben, ein bisschen Styling. Hier, lassen Sie mich ziehen, versuchen, das über nur die Zehe zu ziehen. Da kriegen wir das ein bisschen. Okay, also werden wir diesen Abschnitt machen, und dann wollen wir Polsterung haben und wir werden 60 Pixel machen. 20 Pixel wie diese. Ich kann einfach so herumspielen. Das ist einfach so, wie ich es mochte. Und das wird es jedem Abschnitt hinzufügen. Okay, also nicht nur das hier, denn wir werden jedem Abschnitt eine Klasse von Abschnitt solide geben und F eins F eins f orm machen. Okay, also gibt es das und dann machen wir Ah, den Abschnittstitel. Also Abschnitt Titel und wir werden Schriftgröße zu tun. Und wir machen 48 Pixel, machen Zeilenhöhe von eins und texten die Zeilenmitte und dann den Rand. Jetzt wird die Textzeile zentriert. Wir werden in diesem Abschnitt tatsächlich außer Kraft setzen, und es fühlt sich an, als wäre hier etwas dran. Vielleicht habe ich hier etwas verpasst, weil das h ein Tag mich auffrischen. Ok, also gibt es unsere „h one tack“. Wir werden das tatsächlich ändern, weil du hier oben siehst. Das ist nicht wirklich hier oben zentriert, aber für die meisten unserer Abschnitte werden Abschnittstitel hier ganz oben gehen, und wir wollen, dass es zentriert ist. Also nochmal, das ist das globale Styling, das wir hier machen, wird zurückkommen und das Ah außer Kraft setzen, wenn wir zum eigentlichen Abschnitt hier kommen. Okay, jetzt haben wir unsere Leads zu Dot Blei und wir werden eine Zeilenhöhe von 1,25 machen und wir werden die Schriftgröße anlegen, und wir werden 1,3 Widder machen, und wir werden die Zeilenmitte und wieder, werden wir das in diesem speziellen Abschnitt überschreiben. Aber für alle unsere anderen Abschnitte behalten wir es. Senden Sie diesen Rand unten 35 Pixel. Okay, das gibt uns den Abschnitt den Titel des Titelabschnitts, das Lead-Tag, das wir hinzugefügt haben. Dann haben wir diese drei Arten von Modifikatoren hier und so. Ich werde nur die ist fallen lassen, weil sie ziemlich einfach zu verstehen sind. Das Technikzentrum wird die Textzeile an Senator richten. Text links. Ist nicht zentriert links texturiert, Senator. Richtig. Das ist also ziemlich unkompliziert. Eine andere, die wir hatten, war Bild um sie herum. Und wir haben noch etwas mehr, das ich hier draußen auslasse, weil wir sie noch nicht benutzen . Wenn wir sie verwenden, fügen wir sie hinzu, aber Bild gerundet. Und so wie wir das bekommen, werden wir den Grenzradius auf 100% setzen, damit wir unser gerundetes Bild erhalten. Und dann hatten wir unsere Knöpfe. Also werden wir zuerst unsere Knopfklasse wie diese haben, und wir werden, äh, hier werden wir eine Art Form und Standardfarbe machen und so weiter. Also werden wir Kartongrößen machen. Wir gehen zu Grenze Box und dann sagte die Textdekoration nicht in Zeile angezeigt. Wir wollen, dass es ein Block wird . Und dann gut, für den Standard wird einen Hintergrund von C c, C so machen, und wir werden eine Farbe von Schwarz so machen. Das ist also irgendwie die Standard-Schaltflächenfarben. Und dann werden wir ein Klopfen von 15 Pixeln und 20 Pixeln machen, damit Sie sehen können, wie sich die Schaltfläche dort ändert. Nicht umranden. Und wir werden eine Schriftart warten, die fett ist. Okay, das ist schon wieder. Das ist die Standardeinstellung. Suchen Sie nach den Knöpfen. Und dann, ähm, machen wir den Knopf primär. Okay, das wird uns unsere Farbe geben. Denken Sie daran, wir haben das zu dieser Schaltfläche hinzugefügt, also gehen Sie zu Taste primären, und wir werden eine Hintergrundfarbe machen, und das ist nur eine, die ich irgendwie ausgesucht habe. Sie können irgendwie aussuchen, was Sie wollen, aber es ist eine Art von dieser violetten Farbe. So ist 890 b d d zufällig die Farbe. Und dann setzen wir die Farbe der Schriftart auf Weiß. Okay, das bringt uns so nah an dem, was wir hier zu tun haben. Sie können hier sehen. Es gibt noch ein paar Dinge, die hier ein bisschen dran sind. Ah , mit dem wir uns anlegen müssen. Und so wird eine Menge von diesem Zeug dann auf die eigentliche, äh, den Abschnitt über hier kommen äh, . Also, nachdem wir haben, haben wir Art von unserem Körper Art von Reset ish Typ Sache. Wir haben unsere globalen Stile. Dann kommen wir in unsere Sektion spezifische Sachen. Also haben wir Header. Jetzt sind wir im Abschnitt „Über“, also werden wir tun, dass ich das einfach dort lassen werde. Das mache ich mir keine Sorgen. Wir können das ganze Zeug aufräumen. Ah, später. Also für den Abschnitt über, dann erinnern wir uns daran, dass wir gesagt haben, dass ein I d für den Abschnitt über es speziell zielte. Also werden wir das verwenden, ich d. Wir machen Polsterung oben auf 120 Pixel hauptsächlich, um uns von diesem Menü wegzubekommen. Weil dieses Menü eine feste ist. Es ist ein festes Menü. Es ist fest positioniert. Ok. Für Website-Titel, denken Sie daran, Der Abschnittstitel für diesen Abschnitt ist auch der Website-Titel. Also werden wir einen Sichttitel machen, und wir machen Schriftgröße für RAM. So hatten wir die normalen Abschnittsgrößen gestylt. Aber das hier ist anders, einzigartig. Deshalb überschreiben wir es. Wir werden Farbe machen, diese violette Farbe wieder machen. 890 b d. D. So. Und dann machen wir eine bekämpfte Familie und wir werden Yellowtail machen. Denken Sie daran, dass wir Yellowtail von vorher hinzugefügt haben. Deshalb haben wir Yellowtail hinzugefügt. Und dann machen wir eine Verstärkung der kursiven San Serifen. Was auch immer richtig ist. Das ist es, was uns unseren Text gibt. Das sieht so aus, als würde das nur dahin ändern. Ah, dieser Yellowtail mag gerade, wir werden speziell die Hauptabsätze in unserem Abschnitt über stylen . Also tun Sie über I d Lead-Klasse, wo stattdessen die Schriftgröße die 1,35 ram Wenn ich die Zeilenhöhe einstelle, werden wir das auf 1.3 setzen und dann werden wir den Avatar selbst stylen. Denk dran, wir gaben das Ah! Ah. Uh, dieses Bild hier Vorstellung von Avatar. Also werden wir das speziell stylen und wir werden dieser Breite von 400 Pixeln wie diese geben . Das bringt es wieder in Einklang mit dem, was wir wollen. Höhe, Auto. Obwohl das nicht wirklich wichtig sein sollte. Wir werden Block anzeigen, so dass wir zentrieren können und dann werden wir die Marge Null Auto , diese Art von Zentren ein wenig. Und dann können wir Position relativ machen, und wir können top und wir können 50 Prozent tun. Das wird anfangen, es vertikal zu zentrieren, und dann verwandeln wir uns. Denken Sie daran, dass Fran Transformation von vorher. Dies ist eine kleine Art Trick, um vertikale Zentrierung zu bekommen, aber übersetzen Sie warum? Und wir werden negative 50% machen und das bringt uns in die Mitte. Also, wenn Sie diese zusammen Position relativ top 50% transformiert übersetzen. Weißes Negativ. 50%. Das gibt dir wieder einen kleinen Trick, um die hier zentriert zu bekommen , also Ah. , Sieht aus wie eine letzte Sache, die ich hier tun muss. Ah, geht zurück nach Ah, hier. All diese, die haben, Mal sehen. Das ist genau hier. Ich denke, Ah, ich denke, ich kann einfach in der Lage sein, anstatt Text alle diese hinzuzufügen, sollte es nur in der Lage sein, hier zu gehen und Text zu tun jetzt links. Ich dachte, es funktioniert hier nicht. Lassen Sie mich. , Wir aktualisieren nur mein Gedächtnis,genau das, was ich hier getan habe. Okay, nun, wir werden es hier einfach halten, und wir gehen einfach zurück in das CSS über Punkt-Lead, und wir werden einfach eine Zeile schreiben, die so übrig bleibt. Okay, das gibt uns unseren linksgerichteten Text. Ah, hier. Und so werden wir kommen und das etwas erweitern und hier abklicken. Sie können sehen, aber das gibt uns, wenn wir zurückkommen. Bringen Sie das runter. Wir haben sieht ziemlich ziemlich identisch mit dem, was wir hatten ihre OK, so dass ist, wie wir tun die über Abschnitt und wieder die Schaltfläche hier, nur irgendwie, wenn Sie diesen kleinen Klick unten auf den Kontakt Steuerabschnitt klicken. Ähm, es gibt noch eine der Dinge, die ich auch hier mache, ist, dass ich angefangen habe, das zu tun. Ich habe gesehen, wie einige andere mir das antun. Ich mag es für Medienanfragen. Was ich früher getan habe, ist, die ganze mediale Begeisterung auf den Boden zu legen. Das Problem ist, dass Sie wissen, dass die Medienabfragen verschiedene Abschnitte referenzierten. Wenn du sie alle unten legst, dann hast du irgendwie einen Sprung hin und her bekommen. Und so fand ich es ein bisschen einfacher, es zu organisieren. Ich mache nur meine Medienabfragen für einen bestimmten Abschnitt. Ah, genau hier im Abschnitt selbst. Also ich weiß, dass diese Medienabfrage, diese vier, dieser spezielle Abschnitt, also werden wir tun, und dann sind wir auf Punkt Ah, Site-Titel und wir werden das Zeilenzentrum so schreiben. Okay, und das geht nur, wenn das endlich rüber kommt, so dass es das schaffen wird. Also dieses Texas Zentrum, anstatt links, ausgerichtet zu sein, okay? Und jetzt können wir tun, wenn Sie wollen, können wir das gleiche für den Knopf tun und so weiter. Ah, bei einigen der Queer, einigen von diesem Zeug, werden wir in ein paar Medienanfragen und andere Orte eingehen. Ähm, und eigentlich, ja, das. Wenn wir also wieder zu unseren globalen Stilen kommen und auf unsere Schaltfläche gehen, dann haben wir auch einen hier . Also Medien und mein Ex wit, 760 Pixel und wir werden Dot Button so tun, und wir werden mit 100% wie das und Marge Null Auto und Text ausrichten Mitte zu tun. Okay, das macht unseren Knopf so. Wenn Sie diesen Text hier zentrieren wollten, könnten Sie sicherlich auch diese Abfrage hinzufügen. Weißt du, das ist nicht etwas, das ah, weißt du, an diesem Punkt, an dem ich wollte, dass ich lieber eine Linie wie diese hinterließ. Ähm, und so ah, kannst du tun. Also, jedenfalls, ich mag es, diese Medienabfragen direkt hier reinzulegen, also weiß ich, dass diese Medienabfrage damit einhergeht. Das Etwas in diesem Abschnitt der Klassen in diesem Abschnitt. Weißt du, diese Medienabfrage kommt mit den Klassen oder ich ds in diesem speziellen Abschnitt, und ich muss sie nicht im unteren Zeug finden. Also, ähm, das ist etwas, das ich gerne dort mache. Aber das ist der Abschnitt „Ah“, hat das gestylt. Wir fahren hier weiter. Ich verstehe. Es gibt vielleicht ein kleines Etwas mit der Polsterung hier, und wenn wir hier so nach oben scrollen, also gehen wir voran und reparieren ein paar von dem Zeug. Aber ich werde dieses Video hier beenden, und wir werden ein paar davon durchziehen, während wir hier vorwärts gehen. 7. Erstelle den Skills: Ok. Diese Lektion. Wir werden hier in diesen Bereich „Meine Fähigkeiten“ kommen. Sie werden tatsächlich in der Lage sein, ein Beispiel für das Styling des Hintergrunds hier und so, Kraft zu sehen . Das werden wir tun. Sprechen Sie über eine Feature-Liste, bevor ich das mache. Obwohl ich die letzte Lektion aufgehört habe, die darüber sprach, diesen Raum hier unten aufzuräumen und dann dieses Bild, das oben von hier rüber kommt. Also das erste, was ist, Ah, ich habe gerade einen Teil der CSS-Deklaration hier im Set-Header verpasst. Eines der Dinge, die wir tun wollen, ist den Z-Index hier 23 und das wird es tatsächlich so machen , dass, wenn wir scrollen das alles andere darunter geht. Also haben wir das verstanden. Ah, der Raum hier. Interessant genug. Ich hatte das nicht bemerkt, als ich das vorher gebaut hatte, aber das ist eigentlich da in der reaktionsfähigen Sie. Ah, und was ich bisher gebaut habe, musste tatsächlich ein paar Sachen hinzufügen, die nicht im Original waren. Also, was wir tun werden, ist, dass wir zu Gitter gehen, dass CSS und wir haben diese Keine Rinne. Jetzt werden wir diese Anwendung hinzufügen, die keine Lücke genannt wird, weil keine Dachrinne die Lücken zwischen den Spalten ist und Sie können sehen, dass wir Rasterspalte einstellen und wir wollen wieder, dass für unsere Wir wollen, dass für unser Portfolio Abschnitt, aber es gibt auch die den Teil unten, wenn Sie eine Siri haben, wenn Sie eine Reihe haben, insbesondere. In diesem Fall gibt es auch Abstände, die darunter hinzugefügt werden können. Und so wollen wir vielleicht, dass wir das vielleicht nicht haben wollen. Vielleicht wollen wir das loswerden. Also habe ich mich gerade entschlossen, eine neue CSS-Deklaration namens No Lap zu erstellen und die Grid-Lücke 20 zu setzen und so, so, um das zu beheben, was wir tun, ist, dass wir vorbei kommen. Sobald wir diese CSS-Deklaration haben, dann kommen wir zu unserem Site-Header hier und wir kommen zu unserer Zeile, denn wenn Sie sich im Raster erinnern , setzen wir die Rasterlücke auf 20 Pixel in der Zeile hier. Also, ähm und wir könnten dies wahrscheinlich als Rasterspaltenlücke anstelle von Gitterlücke tun. Ähm, und das könnte tatsächlich versucht worden sein. Lassen Sie mich hier sehen. Ja, sieh mal, also würde das auch reparieren. Sie können sehen, dass das weg ist, weil wir jetzt nicht die Lücke unten hinzufügen, also ist das eine Möglichkeit, das zu beheben. Ähm, aber ich konnte sehen, wie Sie sagen: Nun, Nun, das will ich. Ich will es einfach nicht für diesen bestimmten da sein, oder? Ich will eine Lücke, wenn ich Rose mache. Ich will es nur nicht für diesen bestimmten. Also nochmal, wir haben das hinzugefügt. Keine Lücke. Ah, keine Gap-Klasse hier. Also kommen wir hier rüber. Wir kommen zu unserer Zeile für unseren Header hier, und wir fügen hinzu, dass dies keine Lücke Klasse Fall war zwei verschiedene Möglichkeiten, wie Sie das tun können. Es liegt wirklich an dir. Was? Ihre Vorlieben. Aber das wird Wort von dieser Lücke und dort, dass diese zusätzliche und wir scrollen das heraus. Dann sehen wir, es ist immer noch genau das gleiche. Machen Sie unsere Speisekarte hier. Alles funktioniert immer noch gleich. Wählen Sie, die das Zeug als nächstes reinigt. Dann kommen wir runter und gehen zu unserem nächsten Abschnitt, der unser Bereich für meine Fähigkeiten sein wird. Also wird hier runter kommen, neuen Abschnitt erstellen und den Klassenabschnitt gleich so geben und mich hier nur ein wenig nach unten scrollen lassen . So klassischer Abschnitt. Und dann geben wir dem ein I D. an Fähigkeiten. Denk dran, diese müssen alle ich getan haben, weil wir mit ihnen in unserer Speisekarte verknüpfen. Okay, also ist es nicht nur für CSS-Targeting. Es ist auch für Verknüpfungszwecke und dann irgendwie, was du benutzt hast, um die Klasse gleich Container zu div , und wir werden ein div von Roe wie diesen Feind Rhone machen, also und dann werden wir ah div Klasse mit einer Spalte von 12 12 ruhig haben . Also werden wir Klasse gleich machen und das wird irgendwie unsere Kopfzeile sein, erinnerst du dich? Ah, ruf 12 an. Ah, aus dem Mdn. Es besagt, dass jeder Abschnitt wirklich einen Header mit einem h ein-Tag haben sollte, damit Maschinen wissen, dass dies für diesen Abschnitt der Header ist. Sie können es überall dort platzieren, aber wenn es nach diesem Header-Tag suchen wird und so gehen wir zur Klasse gleich Abschnittskopf . Und jetzt fangen wir an, uns auf einige dieser globalen Stile zu verlassen, die wir vor Abschnitt Header zu H erstellt haben , eine Klasse entspricht Abschnittstitel, ich höre und dann werden wir meine Fähigkeiten tun. Okay, jetzt bekommen wir etwas von diesem Styling. Wir bekommen die Polsterung um den Abschnitt. Wir bekommen die Schriftgrößen in den Schriftgewichten und all die Dinge, die wir getan haben, um uns diese Art von automatischem Styling hier zu geben. Ordnung, nächstes werden wir die P-Klasse gleich machen und wir werden führen. Und dann werde ich nur dio ich habe die Fähigkeiten, um deinen Job zu erledigen. Richtig? Hier war ich spezialisiert auf so etwas. Natürlich können Sie hier setzen, was Sie wollen, aber das ist es, was ich hier setze, und das ist unsere Kopfzeile. Also haben wir unseren Header haben wir einen Titel für und wir haben eine Beschreibung dafür. Das ist eine Art Standardsache, die Sie mit jedem Abschnitt, den Sie erstellen, ausprobieren möchten . Wenn Sie einen Abschnitt wie diesen erstellen, stellen Sie sicher, dass Sie einen Kopf oder ah und eine Beschreibung haben . Jetzt werden wir tatsächlich die Feature-Liste wieder machen. Denken Sie daran, es sieht so aus, also werden wir einfach etwas Einfaches wie das machen und wir werden eine Feature-Liste erstellen , und wir werden nicht ah tun, in der Reihenfolge Liste. Wollten eigentlich nur tun, ähm, wir machen Ah, dibs dafür. Okay, also werden wir tun Ah, eigentlich, wir brauchen Zehe außerhalb dieser Straße zu eigentlich, kommen, weil wir eine neue Zeile machen werden, die tatsächlich eine ganz neue Zeile in hier machen wird , also ist Div Class gleich Zeile und wir sind wird ihm eine zusätzliche Klasse namens Feature-Liste geben. Alles klar, und dann werden wir das tun, wir werden drei davon machen. Es geht zum DIV. Klasse ist gleich Anrufkraft. Wir werden vier Säulenverstand machen. Wir werden Feature-Item machen, also wird es für jeden Gegenstand geben, und dann werden wir so ein Textcenter machen, okay? Und im Inneren werden wir eine Icons haben, die Schriftart benutzen. Ehrfürchtig. Also, ich Klasse gleich f A und F A Dieser, den wir machen, ich und dann werden wir dieses Feature Icahn nennen , damit wir es anvisieren können, wenn wir wollen. Richtig. Das ist also das Symbol. Und dann werden wir im Inneren ein h drei Tag haben, das wir dieser Klasse gleich Feature-Titel geben werden. Und ich mag Teoh. Ich mache es gerne so, wo ich jede Art von Sache Ah, Klasse gebe , damit ich es sehr, sehr leicht anvisieren kann . Und wenn wir in die C s kommen, denke ich nicht, dass wir jede einzelne Sache anvisieren, aber wir zielen eine gute Menge an, und irgendwann Sie es vielleicht wollen. Also werden wir einen Absatz von, ähm, vorgestellten Beschreibung wie diese, und lassen Sie mich das einfach irgendwie überschreiben. Es ist nur ein bisschen einfacher, den Text einfach zu kopieren. Es ist nur der Text für diesen bestimmten. Okay, also was wir hier haben , ist, dass wir diesen Gegenstand haben, und das ist in einer Spalte Zeile. Wir haben eine Nikon, wir haben einen Titel, und wir haben eine Beschreibung für jeden. Ah, eines meiner Fähigkeiten hier. Okay, also was ich tun werde, ist nur sozusagen gesagt, die letzten drei neu zu tippen. Ich werde nur die letzten zwei oder was auch immer hier drüben einfügen. Also haben wir noch zwei. Genau wie es. Verschiedenes Symbol, Sortierung von unterschiedlichem Namen. Ähm, eigentlich niemanden . Hier, lassen Sie mich das korrigieren. A ich irgendwie doppelt kopiert hier. Langsam mich. Also haben wir wieder ein Symbol, einen Titel und eine Beschreibung für jeden von diesen. Sie können diese natürlich in das ändern, was Sie wollen. Okay, das ist also das ist wieder das HTML für den Abschnitt. Ziemlich unkompliziert. Aber jetzt möchte ich das alles wirklich stylen . Also, was wir tun werden, ist, dass wir wieder rüber gehen. Lass mich weitermachen und das hier speichern und sehen Sieht aus, als lehren Sie Mountain Save, und wir werden wieder in unseren Freiberufler gehen. 01 CSS-Datei. Hier und wieder sind wir. Hier gibt es ein paar Dinge. Also eine Feature-Liste wie diese ist etwas, das wir an mehreren Orten verwenden könnten, weshalb ich es so geschrieben habe, dass die jeder so riecht, wie ich es tat. Also werde ich tatsächlich das meiste Styling dafür setzen. Einige der grundlegenden Styling unter globalen Stilen. Und dann werden wir, denke ich, wir haben ein bisschen für die Fähigkeiten Abschnitt. Eigentlich nicht viel für den Fähigkeitsbereich. Das meiste davon wird also aus der Feature-Liste kommen, denn sobald Sie das CSS geschrieben haben , können Sie in einer Liste wie diese Art von überall mit diesem Salbei, gleichen HTML und das macht alles Ah, verdammt von einem viel einfacher macht es mehr wiederverwendbar und so weiter. Also definitiv, was ich empfehle, damit zu tun. Wir kommen hier unter Taste Primär und wir werden Feature machen. Ich erinnere mich nicht, dass dies eine Art Container jedes Artikels war, und so werden wir Padding machen und wir tun 20 Pixel, um es ein wenig Polsterung zu geben . Und dann werden wir Icahn mitspielen. Also werden wir das Symbol anvisieren. Und lassen Sie uns dies eine Schriftgröße von 24 24 Pixel oder 1,5 Rand Ramsar basierend auf dem was auch immer . Ah, Schriftgröße wurde vom Gerät ausgewählt. Also, wenn sie auf einem Telefon oder einem Computer sind, was für ein bestimmter Browser. Im Allgemeinen sind es 16 Pixel, so dass 1,5 RAM das gleiche wäre wie 24 Pixel wären 16 plus 8 bis 24 Pixel. Dafür sind die Felgen also. Im Allgemeinen sollten Sie wirklich die Realms verwenden. Ich habe nur die Angewohnheit, die Rückfälle so zu machen, wie ich es hier tue. Okay, dann machen wir einen Hintergrund auf diesen Symbolen. Wir werden die violetten Farben benutzen, die wir 890 B D machen werden. Das gibt ihnen ein bisschen einen Hintergrund. Wir werden die Symbole selbst so weiß machen. Und dann lasst uns das Auffüllen von 15 Pixeln machen. Du kannst irgendwie mit etwas davon herumspielen, und dann machen wir unseren Grenzradius von 100% und das wird schön und rund für uns sein. Okay, das gibt uns die schönen runden Symbole dort. Danach ist Feature und wir werden Titel zu tun. So stylen Sie die Titeltitel hier. Wir machen die Schriftgröße und wir machen 28 Pixel. Ähm, auf und wir sind dran, unten von 10 Pixeln aufzufüllen und dann alle 40 44. Okay, also gebe ich uns ein bisschen Styling, wie dieses gibt uns unsere Grenze und so weiter. Das ist also der Titelbereich. Jetzt ist der Beschreibungsabschnitt, den Sie sehen, weil wir das tun Ah, weil wir ihnen all diese beschreibenden Klassen gegeben haben, die es wirklich einfach machen zu zielen. Diese so Feature-Beschreibung wird Schriftgröße 20 Pixel und Schriftgröße auf 0.25 Raum zu tun. Lassen Sie sich nicht davon verfangen, dass ich es hier oben nicht getan habe. Ich habe es nicht getan, als ich es zum ersten Mal schrieb. Vermutlich einfach vergessen. Und dann die Mathematik für 20 Achter ein wenig. Was ist bei 1,75? Ist das richtig, Schriftgröße 1,75 herum. Ich wollte hier nur nicht im laufenden Betrieb Mathematik machen, aber ich denke, das ist richtig. In Ordnung. Und dann für die Beschreibung wird Linie hoch tun. Lass dich einfach nicht allzu in das Zeug verfangen. Das ist nur, dass ich inkonsequent bin. Alles klar, das gibt uns, dann sind meine Fähigkeiten Abschnitt Ah, unsere Feature-Liste, die wir verwenden können, und wir verwenden in diesem Bereich meine Fähigkeiten hier. , Das Letzte,was wir hier tun werden, ist, dass wir runterkommen und hier einen neuen Abschnitt erstellen werden , der Skills heißt. Also haben wir hier keine Menge Styling zu tun, aber wir haben ein bisschen. Also werden wir Fähigkeiten machen und dann unseren Abschnitt Art Titel hier erstellen. Und alles, was wir tun müssen, ist tatsächlich diesen Abschnitt selbst zu stylen. Und das ist es, wovon ich rede. Wir werden Hintergründe machen, und wir werden Nummer F A f A f a machen, und das gibt ihm ein bisschen von diesem grauen Hintergrund. Also lass mich das hier ein bisschen rausziehen, damit du sehen kannst, dass das hier weiß ist . Nun, wir haben ein wenig von diesem gräulichen Hintergrund erstreckt sich die ganze Art von Breite des Browsers, genau wie das, was wir hier von unserem Original hatten. Das ist also der Abschnitt „Meine Fähigkeiten“. Außerdem wird eine Feature-Liste erstellt. Wir setzen es in den globalen Stil Abschnitt, so dass wir es wiederverwenden können, wenn wir eine andere Feature-Liste wie diese erstellen möchten . Wir haben einige grundlegende Styling. Um und dann, wenn Sie es überschreiben möchten, würden Sie in die abschnittsspezifischen vier kommen, wo immer Sie diese Feature-Liste hinzufügen , und Sie würden sie überschreiben. So habe ich im Allgemeinen versucht, meine CSS-Augen zu organisieren, globale Stile zu haben, und dann, wie Sie Ihre einzelnen Abschnitte haben und so weiter und Sie beginnen mit dem globalsten Stil. Also beginnen wir ganz, ganz oben mit,wissen Sie,auf ganz oben mit,wissen Sie, wissen Sie die Leiche und alle Absatz- und Importsteuern wie sehr, sehr breit. Dann kommen wir in globale Titel, die Styling-Klassen, die wir Ah verwenden werden, in mehreren Abschnitten und mehreren Seiten und so weiter. Und dann enden wir an verschiedenen Arten von Komponenten, wirklich wie eine Feature-Liste und so weiter. Und dann erhalten Sie in Ihre einzelnen Abschnitte und dann, wenn Sie wollten, wenn Sie mehrere Seiten haben, Sie darunter, würden Sie in ah ah ah bekommen, Styling für bestimmte Seiten auf der Website, die Sie kann dies tun. Es beginnt von den allgemeinsten Bewegungen bis hin zu den spezifischsten. Und das ist im Allgemeinen, wie Sie Ihr CSS mit der Art, wie Cascading Stylesheets funktionieren und die Kaskade nach unten machen sollten . Ah, das ist es, was du tun willst. 8. Bauen: diese Lektion. Wir werden diesen Abschnitt meines Portfolios hier aufbauen. Wir werden das Ah J Abfrageskript namens Fancy Box verwenden , um das zu tun. Wenn man es hier anschaut, wird es irgendwie erleichtert. Und dann hat es etwas. Wir könnten hier durch alle verschiedenen Projekte klicken. Das ist also, was wir diesen Abschnitt in dieser Lektion erstellen werden, bevor wir darauf eingehen, habe ich bemerkt, dass sich dieses Bild immer wieder überlappt. Du hast vielleicht gesehen, dass das gut ist , während wir durchmachen, und ich bin einfach durch den Kurs gegangen und ich wollte im Hinterkopf. Wie was? Weil ich wusste, dass ich dieses Bild hier und den Mac Max mit hier fixiert hatte. Aber Sie werden bemerken, dass ich hier einen Tippfehler habe. Also, wenn Sie bemerkt haben, dass, wenn wir das in Max innerhalb ändern, das tut, was es tun soll, ah, oft, so , oft, geht es so. Wann, wenn Sie codieren. Also wollte ich so schnell schnell schnell reparieren. Ah, und dann können wir hier weitermachen. Also, um diesen Portfoliobereich aufzubauen, das erste, was wir tun müssen, um dies einzurichten. Also zuerst werde ich hier rüber kommen, um die Ordnerstruktur hier und in unsere Arbeitsmappe und unter unseren Bildern hier erstelle ich einen neuen Ordner und ich werde dieses Portfolio anrufen. Also werden wir alle unsere Portfolio-Bilder hier reinlegen und dann lassen Sie mich das schnell überziehen . Ah, das sind die Bilder, die wir benutzen werden. Und ich meine, diese Luft wurde gerade im Fotoshop bearbeitet. Im Wesentlichen werden Sie sehen, hier haben wir eine 1920 von 10 80 dann haben wir eine kleinere Version, die 300 von 169 ist. Und das ist einfach irgendwie das, was ich wieder herausgefunden habe, indem ich einfach etwas mit diesem etwas vermasselte und die Dimensionen bekam, von denen ich dachte, dass ich richtig aussah und dass ich wollte, dass du irgendwie damit herumspielen kannst . Vielleicht wollen Sie drei über, oder vielleicht wollen Sie über oder sechs über, was Sie wollen, aber Sie können irgendwie mit dem spielen. Aber Sie wollen Bilder. Sie wollen das kleinere Bild hier und Sie möchten, dass das größere Bild hier so angezeigt wird, dass, wenn die Leute auf dieses kleine Bild klicken, es erscheint. Alles klar, was ich tun werde und das ist, ich meine, ich habe die gerade von, Ah, ich glaube, ichhabe die gerade von , ich Pixeln oder einer der freien Art von lizenzfreien Websites, die da draußen für Bilder. Natürlich, für Sie, wenn das Ihr Portfolio ist, werden Sie Bilder von Ihrem Portfolio verwenden, oder wenn es für einen Kunden oder was auch immer ist , dann werden Sie ihre Bilder verwenden, die sie wahrscheinlich müssen Sie zur Verfügung stellen. Aber diese Luft einfach Platzhalter für diese Demo zu bekommen, damit ich das tun werde, werde ich einfach all diese nehmen und wir werden die in den Portfolio-Ordner hochladen, den ich gerade erstellt habe. Also waren wir alle da drin, also das ist das erste, was wir tun müssen. Das nächste, was wir tun müssen, ist, dass wir ah, ausgefallene Box installiert werden und so sind irgendwie hier oben geladen. Und so, wenn Sie nicht vertraut sind mit Phantasie Box wird nur kommen und wir können nur googeln Phantasie Box und Sie werden es direkt an der Spitze zu sehen. Hier. Dieser ist eigentlich eine Art von der alten Website Sie wollen die eine, die Phantasie aps dot com hier ist verwenden . Und das wird dann oder tatsächlich, ich denke, Sie müssen hier durchklicken. Ja. So ausgefallene Box drei. So kommen Sie einfach auf die neueste Version. Sie machen einen ziemlich guten Job, damit zu verknüpfen. Und dann sehen Sie das hier, können Sie den schnellen Start hier sehen. Und dieser schnelle Start ist im Wesentlichen das, was wir tun werden, weil sie diese auf Ah gehostet haben, sie haben einen Host auf Cloudflare und andere Sachen. Also werden wir nur dieses CDN dafür verwenden und Sie können sehen, dass es hier ein Stylesheet gibt , und dann können Sie sehen, dass es auch ah, Skript gibt , und Sie werden Jake Sorgen zusammen mit dem brauchen. Also werde ich voran gehen und einfach den Link hier schnappen, und das ist, was wir brauchen für das Stylesheet und kommen zurück zu unserem Ich werde das schließen und kommen zurück zu ihrem Index Punkt html und wir werden an die Spitze kommen und lassen Ich ziehe das hier für eine Sekunde hin. Und ich habe versucht, alles zusammenzuhalten. Jetzt. Ah, ich mag es, diese von allem anderen zu trennen. Also werde ich Ach, Kommentar hier machen . Ich werde einfach Component-CSS machen, weil das im Wesentlichen eine Komponente ist. Wir werden das in Tempo setzen. Und wenn wir noch andere Komponenten hätten, könnten wir sie da drinnen beschleunigen. Ah, auch. Aber im Moment haben wir nur eine schicke Box. Okay, das wird uns das CSS besorgen. Und dann brauchen wir jetzt auch das Java-Skript, um damit zu gehen. Also werden wir wirklich runterkommen und das hier unten auf das Foto setzen? Siehst du, wir haben schon Jake, wir sind hier, also müssen wir uns keine Sorgen machen. Und wir holen uns einfach das Skript für die schicke Box hier, die Skript-Dekoration, und wir werden das packen und dann kommen wir zurück und gehen runter zu unserem Fuß und stellen Sie sicher, und fügen Sie es nach der G A-Abfrage hier ein. Auf diese Weise hat Jaques geladen und dann ausgefallene Boxen geladen. Und dann ist unser Freelancer dot Js geladen. Um, denn falls wir Fall machen müssen, wollen Sie jede Art von tun, wissen Sie, es gibt eine Menge Anpassungen ist, dass Sie damit tun können. Es gibt viele verschiedene Möglichkeiten, wie Sie dies einrichten können und so weiter. Und oft müssen Sie das in einer Java-Schrift und anderem JavaScript tun, damit Sie das in Ihrem Freiberufler tun können . Ah Js Datei hier. Dies ist also in der Regel der beste Ort, um diese zu setzen. Alles klar, das bringt uns unser CSS und unser Javascript, das wir brauchen, um schicke Boxtoe-Arbeit zu erledigen. Jetzt müssen wir das einfach innerhalb unseres Indexpunkts html bauen. Also werden wir runterkommen und,weißt du, weißt du, wir haben unseren letzten Abschnitt, in dem wir unseren Fähigkeitsbereich hier gemacht haben, und das endet genau hier. Also, jetzt werden wir hier unseren neuen Abschnitt erstellen, und das wird für unsere Portfolioartikel sein. Also werden wir Abschnitt und Klasse gleich Abschnitt zu tun und ich d gleich gut, Portfolio und dann unsere Sektion erstellen. Und dann natürlich, natürlich, wie wir es hier gemacht haben. Klasse entspricht Container, aktive Klasse entspricht Zeile. Und dann machen wir unseren Header hier. Also werden wir div Klasse gleich machen und wir werden 12 anrufen. Und sie wollten Header Klasse gleich Abschnitt Header. Und dann werden wir unser H in unserem Abschnittstitel machen und hier legen wir einfach mein Portfolio. Offensichtlich konnten Sie das nicht machen, was Sie wollen und dann unten wird unsere Beschreibung tun. Also P-Klasse gleich und wird führen Textmitte tun, und dann werden wir tun. Hier ist all das coole Zeug, das ich für meine tollen Kunden gebaut habe oder was auch immer du dort hinlegen willst . Also fühlen Sie sich frei, alles, was Sie wollen, dorthin zu bringen. Aber diese Art von gibt uns unseren Abschnitt Header und Sie können sehen, wir haben unsere Marke mein Portfolio Abschnitt hier unten. Alles klar, das war unsere, ah, unsere ah, 12 Spalte mit Rufen Sie sie dort an. Jetzt wollen wir in den Aufbau der Portfolio-Sektionen und es gibt eine Tasse. Nur ein paar Dinge, die wir hinzufügen müssen, damit dies mit ausgefallener Box funktioniert, Es ist ein Javascript r j crace Skript und es gibt auch das CSS. Also wird es sich um das meiste von allem kümmern, Force. Wir müssen nur unser HTML richtig schreiben. Also werden wir tun, ist, dass wir div Klasse gleich machen und wir werden Zeile machen und dann werden wir keine Rinne machen und wir werden Portfolio machen. Okay, also alle unsere Portfolios, sie werden Gegenstände in das innerhalb dieser verschiedenen Reihen gehen und dann werden wir Div-Klasse gleich machen und wir werden jetzt drei anrufen. Du könntest das ändern, je nachdem, wie. Warum wollen Sie Jahre sein? Weißt du, du könntest vier Ruhe mit dir machen, als würde ich drei Kolumnen machen. Wir gehen zum Portfolio Artikel und dann hier. Dies ist, wo wir in die speziellen schicken Box Zeug kommen. Also werden wir einen Link machen oder zu einer gehen und wir gehen zu Daten Strich Phantasie Box und wir werden das gleich Galerie setzen. Das ist, was uns erlauben wird, wenn wir einen der Portfolioartikel der Ford und die hinteren Erben auftauchen , um durch ihn zu klicken. Dies ist, was ermöglicht, dass das sagt Phantasie Box. Das ist es, was wir wollen. Es gab tun Datenquelle wurden gesetzt, die gleich Pfund 001 Also dies ist im Grunde ein I d spezifiziert . Dies ist das i d. Wo das ist, wenn wir dies klicken, um dies ist, wo wir den Inhalt von der i d bekommen wollen , von dem wir den Kontakt erhalten möchten . Ich werde Ihnen zeigen, dass Inhalte von ich bin sicher, dass in einer Sekunde, ein Verkehr als leer, weil wir nicht wirklich zu irgendwas hier verlinken, richtig? Und dann werden wir unser Bild machen. Also werden wir Bildquelle gleich machen, und wir werden ein kleines Bild sein. Also werden wir Bilder machen, um das Portfolio zu schrägen, weil wir ihn in diesen Portfolio-Ordner stecken und dann die kleine Version wollen. Also 001 kleinen Punkt j peg und ich werde alles gleich machen. Null. Gibt es einen? Offensichtlich, Ihr Profil, die Artikel werden referenzieren. Sie werden auf verschiedene Projekte oder Kundennamen oder was auch immer verweisen. Also wäre dein altes Tag wahrscheinlich etwas damit verwandt. Okay, das gibt uns unser Image. Hier, lassen Sie mich gehen und speichern Sie das und laden Sie möglicherweise nicht das Bild, nur weil wir das neu laden müssen und sie hier sehen. Und tatsächlich ist es das. Das Bild ist tatsächlich geladen. Nur wirklich klein wird das in einer Sekunde durcheinander bringen. Ich will nur den ganzen Altersgeruch hier ausschreiben. Okay, jetzt, da wir das ein Tag gemacht haben, werden wir das Ding erstellen, das tatsächlich auftaucht, wenn das angeklickt wird. Also werden wir div Klasse gleich tun und oder tatsächlich werden wir div Stil gleich Anzeige tun . Nonnen haben das nur so eingestellt, dass keine angezeigt wird. Und sie gingen in die Klasse gleich Port Folio Pop. Also das ist das Pop-Up, und dann werden wir sagen, ich d gleich 001 Also das ist die Referenz hier. Okay, wenn wir also Datenquelle hier sagen und wir ein I d einfügen das ist das I d, das wir hier setzen. Was auch immer Sie dies auf einstellen, Sie müssen auch sicherstellen, dass ah, und die Datenquelle auch hier setzen . Okay, so passen Sie diese auf, wenn ich hier klicke. Das ist es, was auftaucht. Okay, das ist wichtig zu wissen. Jetzt mit ausgefallener Box hier. Okay, jetzt drin, wo wir noch eine Reihe machen werden, Uh, und dann in dem wir tun werden, machen wir einen 88-Säulen-Witz. Also werde ich acht anrufen und dann, ah, lassen wir mich weitermachen und diesen anderen hier machen. Also werden wir div class equals nennen für jetzt. Wieder können Sie bauen. Das ist alles, was auftauchen wird, wenn das hier geklickt wird. Also wieder für ausgefallene Box. Du brauchst das hier nur. Wenn dies angeklickt wird, erscheint dies. Sie können hier bauen, was Sie wollen. Das ist zufällig das, was ich gebaut habe. Sie können das irgendwie auslegen, wie Sie wollen. Okay, also bedenken Sie das, während Sie das bauen. In Ordnung? Also die Sache, die ich hier auf dieser acht ruhigen Seite setzen werde. Welche Seite ist das Bild? Also werde ich Bildquelle machen, und wir tun gleich und wir werden Bilder Slash Portfolio, und dann werden wir 001 Punkt j Pick tun. Das ist also die volle 1920 von 10. 80 mit hier. Und ich werde alles Gleiche tun. Da ist wieder eins. Okay, das ist also das vollständige Bild. Das ist es, was da sein wird, wenn wir abhauen. Pop das auf. Klicken Sie hier. Siehst du, das kriegen wir auf der Seite da drüben. Okay, das ist also diese Seite. Ziemlich unkompliziert. Und dann auf der anderen Seite, werden wir nur unseren Titel und unsere Beschreibung setzen. Also werden wir H drei machen und wir gehen in Klasse gleich Projekttitel. Und dann machen wir ein Projekt. Ich setze nur ein. So Projektname. Offensichtlich. Sie würden den Namen von dem, was dieses Projekt war, setzen, dann mache ich div Klasse gleich Lead und Projektbeschreibung. Okay. Und dann hier drin waren nur Sie Ihre Produktbeschreibung setzen würden. Ich werde einen Dummy-Text schreiben. Ich werde hier nicht alles schreiben, denn das ist irgendwie sinnlos. Also werde ich hier nur ein Lauren Ipsum einlegen, mit dem wir uns eine Vorstellung davon geben können, wie das bei mir aussehen wird. Reinigen Sie das auf. , Also,wenn wir jetzt auf unser Portfolio klicken, haben wir jetzt etwas, das so aussieht. Nun, das ist nicht unbedingt das am besten aussehende Ding hier. Was auch immer. Aber du weißt, ob wir uns hier rausgezogen haben. Das gibt Ihnen ein bisschen bessere Vorstellung davon, wie es aussehen soll. Okay, also, nein, das ist ein Anfang. Und dann kannst du das irgendwie stylen. Wie auch immer Sie möchten, können Sie es ändern, basierend auf, wissen Sie, die verschiedenen Bildschirmgrößen und so weiter. Wieder. In unserem Raster sind einige davon bereits eingebaut. Sie können so etwas aneinander bringen, wie Sie es für richtig halten. Alles klar , das gibt uns hier eine Art Basis. Ah. Nun, was wir tun wollen, ist, dass ich einfach weitermachen werde und dass dies die grundlegende Art von Vorlage für die Erstellung eines Portfolioelements ist. Okay, also musst du das für jeden einzelnen tun. Also dieser Teil im Wesentlichen, dieser hier, all das, all das, du kopierst und fügst das alles ein, und dann würdest du reingehen und dich ändern. Okay. Ich werde dieses Bild benutzen. Ich werde diesen Zeh ändern. Ich werde das ändern. Ich werde alle Bilder, die Projektbeschreibung und so weiter ändern die Projektbeschreibung . Aber das eigentliche Layout des HTML ist das gleiche, also werde ich voran gehen und den Rest dieser Portfolioelemente, die ich habe ah, hier drüben gemacht, so dass wir dieses ziemlich schnell überkommen können, anstatt all das Zeug aus zu tippen und Es gibt eine Menge von ihnen hier, dauert eine Sekunde. Ordnung, also lassen wir das hier rein und damit du sehen kannst, dass es uns gibt. Jetzt haben wir eine Reihe, verschiedene Bilder hier und so weiter. , Eines der Dinge,die Sie hier sehen werden, ist nach Nummer vier hier. Wir schließen tatsächlich unsere Reihe und dann schaffen wir hier eine neue Reihe, also toe, um uns zwei Reihen zu geben, wollen wir hier verschiedene Rose. Also nur bedenken Sie, dass mit diesem für die verschiedenen Straßen, die Sie wollen die Straße schließen und dann und dann erstellen Sie eine neue Braten. Wir machen Reihen von vier. Okay, damit das uns eine Art unserer grundlegenden HTML-Struktur gibt. Sie können die hier unten sehen. Ich meine, hier unten ist ein paar Sachen los, die wir reparieren müssen. Sie können sehen, ich kann durch all diese hier klicken. Wir haben die grundlegende Funktionalität. Ah, an Ort und Stelle. Also, das nächste, was wir tun müssen, ist, dass wir in, ah, das eigentliche CSS gehen müssen ah, . Und wir werden etwas von diesem Zeug hier oben beschützen. Also gehen wir unter unsere Fähigkeiten Abschnitte oder scrollen nach unten über Fähigkeiten und wir werden einen neuen Abschnitt erstellen. Ich werde das packen und, na ja, pace das rein, und dann rufen wir dieses Portfolio an. Ah, und dann unten werden wir hier etwas Styling machen. Das erste, was wir tun, ist der Projekttitel, und das ist für das eigentliche Pop-up hier. Okay, also wollte ich nur, dass wir das etwas größer machen. Also werde ich Schriftgröße machen, und ich werde hier drei Felgen machen, und dann machen wir Marge Null. Es ist also etwas näher. Wir machen einen. Und ich werde die Schriftfamilie als Yellowtail machen, nur um es ein bisschen zu geben, weißt du, entworfen, um es kursiv zu machen. Das ist eine Antwort wie diese. Und dann mache ich unsere violette Farbe. Also Pfund und und dann 890 b d d c gibt uns unsere lila Farbe hier. Ich habe hier ein Komma vergessen, also gibt es uns unseren Yellowtail zurück. Ich habe hier ein Komma vergessen, Alles klar, das gibt uns den Projekttitel. Und das nächste, was wir hier tun werden, ist, dass wir unsere Reaktionsfähigkeit tun werden. Wir werden Medien hinzufügen, und ich werde Max Max damit machen, dass ich hier 768 Pixel machen werde. Also zielen wir auf alles ab. Das sind 760 Pixel. Es sei denn, und wir werden Portfolios machen, die unsere Portfolio-Klasse anvisieren, und dann werden wir unsere drei Spalte hier anvisieren, heißen drei. Okay. Und was wir hier tun werden, wird das ändern, um unsere Rastersäule zu ändern, und wir werden sie auf sechs ändern. Also im Wesentlichen, wenn diese Ah, wenn wir hier kleiner werden, werden sich diese auch ändern . Und so, Spanne drei Spanne sechs. Ah, damit das im Wesentlichen ist, was das tut. Die Luft hier ist, weil, ähm , eigentlich, das wegen einer Klammer ist. Aber auch dieser Editor, vielleicht ist er aktualisiert worden, aber er hat dieses Gitter-CSS-Raster im Allgemeinen nicht erkannt. Also das ist einer der Gründe, warum einige von diesem Zeug diese kleinen Lüfte in meinem I d hat. Der nächste, den wir machen, ist, dass wir dann die nächste Bildschirmgröße unten machen, die wir anvisieren werden. Also werden wir Medien machen. Wir machen Max mit und wir machen 480 Pixel und wir sind hier. Wir werden die Rastersäule ändern, und wir werden das auf Spannweite 12 ändern. Es wird also voll sein, und dann werden wir den Text so einstellen, dass er die Mitte ausrichtet, und das ist unser und eigentlich wieder, äh, äh, wir müssen das Ziel anvisieren. Wir müssen hier etwas anvisieren. Ich habe gerade angefangen zu schreiben. Ich mache das immer ein bisschen, wenn ich mich mit dem reaktionsfähigen Zeug verwirre. Manchmal vergesse ich, hier die eigentliche Deklaration einzugeben. Wie was? Wir zielen hier auf das Element. Also werden wir das Ziel dieses Portfolios hier wieder drei Elemente nennen. Und dann werden wir sagen, dass es 12 und Textzeilen dort überspannt. Okay, das gibt uns unsere Reaktionsfähigkeit. Jetzt haben wir immer noch dieses kleine Stück hier unten, und eigentlich wurde mir klar, dass nichts mit dem CSS zu tun hat. Wir kommen hierher zurück, sehen Sie, ich habe diese Straße, die hier offen ist, und ich habe sie nie geschlossen. Und wir müssen sichergehen und wieder reinkommen. Und wir müssen die Reihe so schließen und dann das. Also im Grunde verschachtelten wir in einer anderen Reihe, und das verursachte unsere Probleme. Jetzt sehen Sie hier, dass diese Luft den ganzen Weg, dass sie die Größe haben sollten, die sie haben sollten, also müssen wir diese nicht wirklich dimensionieren. Wenn wir das nach unten drücken, dann sehen Sie, dass es sich in diesem ist, wo wir von der Spanne drei zu der Spanne sechs wechseln. Und wenn wir irgendwann weitermachen, kommen wir dorthin, wo es ist Ah, es ist eine Spalte mit breit oder was auch immer. Also ist es voll mit. Das ist also, was der Reaktionsfähigkeitsteil für uns tut. Hilft dem Zeh. Ah, tu das. Und dann natürlich haben wir natürlichnoch hier oben unser Projekt hier. Wir könnten reinkommen, wenn du willst. Du kannst hier reinkommen. Ich überlasse das als etwas für dich. Vielleicht ist eine kleine Herausforderung für Sie,wissen Sie, wissen Sie, zwischen dem so und dann, wenn es in vollen Zügen trifft mit so, vielleicht wollen Sie es tun. Vielleicht willst du etwas dazwischen hier anvisieren, genau hier, um das ein bisschen besser aussehen zu lassen. Also werde ich gehen. Das ist eine Herausforderung für Sie, um herauszufinden, wie Sie das tun können. Also, das ist es eigentlich. Der Portfoliobereich sieht so aus, als könnte es ein bisschen komplizierter sein, aber eigentlich schick. Aber Box erledigt die ganze Arbeit für uns. Sobald Sie dieses erste Element hier eingerichtet haben, können Sie wirklich einfach kopieren und Ihren Weg durch den Rest einfügen. Und denken Sie daran, wenn Sie dazu kommen, wenn Sie eine neue Zeile erstellen möchten, vergessen Sie nicht, die Zeile zu schließen und dann eine neue Zeile hinzuzufügen. Ähm, und wie ich schon sagte, schicke Box tut, macht die ganze harte Arbeit hier. Und die andere Sache ist, stellen Sie sicher, dass diese Datenquelle auf das div ausgerichtet ist oder was auch immer Sie wollen. Ah, diese Content-Box, wenn sie hier auftaucht und sobald Sie das tun, ist es wirklich ziemlich unkompliziert. 9. Bauen: diese Lektion. Wir werden diesen Bereich für meine Klienten hier erstellen. Es ist also ziemlich unkompliziert. Gibt einfach ah, andere Zeugnisse oder so weiter. Natürlich werden Sie die verwenden wollen, die Sie von Ihren Kunden oder von Ihren Kunden haben . Und dann werden wir noch mal ein paar Bilder hochladen müssen. Also werde ich hier eingehen, Klienten einen hier, den ich habe, und dann kommen wir zu unserem Arbeitsbereich oder Ihrer Ordnerstruktur, und wir werden wieder einen neuen Ordner unter Bildern erstellen, und wir nennen diesen einen Kunden. Und ich tue das nur, um ein bisschen Organisation zu haben, die sie tatsächlich Portfolios aufbauen würde . Lassen Sie mich das hier rausziehen, nur um hier ein bisschen Organisation zu schaffen. Nichts zu verrücktes. Und dann werde ich die hier rüber ziehen, und die sind hier rüber gekommen. Diese Luft 300 mal 300. Also diese Luft tatsächlich quadratische Bilder. Also, wenn Sie suchen, welche Größe Sie für die Verwendung benötigen, ist das, was Sie haben, oder? Diese sind also alle hochgeladen. Er räumt ein, dass es eine Ruanda Stree 100 usw. ist, wie sie benannt werden, können Sie natürlich. Nennen Sie sie, wie Sie wollen. Ah, für diesen hier. Ich werde hier nur ein bisschen beschleunigen, nur weil wir den Abschnittskopf jetzt ziemlich viel erledigt haben . Also fühle ich mich, als hätte ich das wahrscheinlich runter, also werde ich einfach in den Abschnittskopf fallen. Es ist genau identisch mit dem, was wir vorher getan haben. Also Abschnitt Ideen, Kunden, ein Container Zeilenaufruf, 12 Abschnitt Header Abschnitt Titel und der Lead Text hier. Also nein, das ist ziemlich unkompliziert. Hier, ähm, lass mich weitermachen und diesen Abschnitt schließen, damit ich das nicht vergesse. Und wir werden auch den Container hier schließen, damit wir das auch nicht vergessen . Richtig? Damit das uns im Wesentlichen unseren Start hier gibt. Also, jetzt haben wir gerade Rose angefangen, dass wir eine Baustelle davon haben, und so werden wir einfach bauen, sind eine Reihe von Zeugnissen. Also beginnend hier unten, dann nach dem Abschnitt Header, werden wir div Klasse gehen , und wir werden Zeile machen und wir werden Zeugnisse machen. Ich folge nur dem Standard dessen, was wir vorher getan haben. In Bezug auf die Benennung gab es zwei div-Klasse und wir werden vier anrufen, weil wir drei Testimonials breit machen. Dann machen wir Zeugenaussage. Ich denke, das und dann werden wir das Erste haben. Wir werden eine Menge von dem Bild haben, und wir werden Klasse gleich machen, um Bild so gerundet zu machen. Und dann machen wir Zeugenavatar aus dem Fall, dass wir das gezielt anvisieren wollen. Und dann wird unsere Quelle dort sein, wo wir unsere Bilder setzen. Also gehen wir zu Bildern Kunden und dann Schrägstrich Ohren Erawan dash 300 Punkt J peg, lassen Sie mich rollen, dass über, damit Sie sehen können, dass So weiter. Und ich habe tatsächlich eine zusätzliche Null da drin. Richtig? Also lassen Sie mich das rüber ziehen. Okay, das ist also, wo sich unsere ah Bilder befinden, und ich mache nur das auf allen als Name. Das hier ist Jenny Nups. Jenny Teig. Ok. Und dann schließen Sie unsere Bild-Tags. Das ist also das erste, was wir hier reinlegen werden. Und dann danach, dann werden wir ein div erstellen, und wir werden div tun und wir gehen in die Klasse gleich Zeugnis, und wir werden Textcenter zu tun. Ich denke, das und dann werden wir 83 machen und mich nach unten CNC scrollen lassen, während wir das tun, gehen wir zu einem H drei und, uh , in dem, unsere Klassen dafür werden Klasse gleich. Ah, Zeugnistitel wie dieser. Genau wieder, wir verfolgen nur irgendwie, was wir zuvor in anderen Bereichen getan haben, wie wir das benennen . Wir werden dumm machen, oder was auch immer Sie hier hervorheben wollen, ist das, was diese Person gesagt hat. Ah, und dann machen wir die P-Klasse gleich, und wir werden Zeugenhinweise machen. Das ist also der Inhalt. Ähm, lassen Sie mich einfach diesen Text hier schnappen, und dann darunter, was wir tun werden, ist, dass wir nur unsere Aussage machen, Autoren, als wir das eingelassen haben, also das ist unser Text für ein Zeugnis. Und dann machen wir P-Klasse gleich Zeugnis. Autor, äh, Testimonial Autor und Netze, natürlich, wie wir es mit unserer alten Tasche Jenny Teig getan haben. Okay, das gibt uns eine Art grundlegende Struktur für unsere Zeugnisse. Ähm, das ist eigentlich ich meine, das war's. Das ist die grundlegende Struktur hier ist dieser kleine Abschnitt genau hier. Also für die anderen Zeugnisse, dann werden wir sie einfach kopieren und einfügen. Sie kopieren und einfügen einfach. Ähm, das und dieser Abschnitt hier und dann Ah, ändern Sie, was immer Sie ändern müssen. Ich werde in das, was ich bereits habe, fallen lassen. Das sind also diese anderen Bilder, die wir hier haben? Ähm und eigentlich habe ich den Titel vermasselt. Ich habe gesucht. Das hier ist eigentlich ich meine, wir machen es richtig, weil es fantabulous ist. Es ist sogar noch besser. Okay, das gibt uns unsere Art von Grundstruktur oder HTML Ah, Struktur. Hier ist es in unseren Straßen und unserer Seite unseres Containers innerhalb unseres Abschnitts. Also sind wir ziemlich gut, dass auf die HTML-Struktur zu gehen. Geh und speichere das. Und dann gehe ich zu unserem CSS und wir werden unser CSS hier bearbeiten. Also nochmal, wir greifen den CSS Abschnitt Header, und dann kommen wir hier runter und ich werde uns tatsächlich ein wenig Platz hier geben und wieder nach oben kommen . Erleichtert die Arbeit mit. Okay, jetzt machen wir unsere Zeugnisse und unsere Zeugnisse. Es gibt eigentlich noch ein bisschen mehr, was wir hier tun werden. Das erste, was wir tun werden, würde keine Kunden tun. Das war also die Idee des gesamten Abschnitts, und wir würden den Hintergrund wieder machen, und wir werden das in unsere f A f a f a so ändern. Also gebe ich uns diesen etwas großartigen Hintergrund und dann werden wir gehen, nachdem wir jeden Testimonial Gegenstand anvisieren. Erinnerst du dich, wenn du dir dieses ah ansiehst, was wir hier haben, siehst du, diese Art hat ein Quadrat um ihn herum. Das ist also eines der Dinge, die wir Jahre machen wollen. Wir wollen diesen Testimonial Artikel erstellen. Ah, und dann gehen wir in den Hintergrund, und wir werden es auf Also haben wir den Abschnitt Hintergrund zu Gray gemacht. Jetzt machen wir den Hintergrund dieses Zeugnisses Zehe weißen Teoh. Geben Sie es, damit es sich abhebt. Dann machen wir Padding und machen 30 Pixel, 25 Pixel, 20 Pixel und 25 Pixel. Und das kommt irgendwie davon aus, damit ein bisschen herumzuspielen, um dorthin zu kommen, wo das für mich irgendwie zentriert aussah. Es hat zu tun mit, Zum Beispiel hat dieses Absatz-Tag wahrscheinlich einen Rand darauf. So ist die Polsterung oben und unten 10 Pixel unterschiedlich. Das sind also 30 Pixel, und das sind 20 Pixel. Das hat mit dem Streicheln zu tun. Sie könnten diese Polsterung löschen. Du könntest diese Polsterung loswerden. Du könntest es so machen, oder du könntest es so machen. Es hängt einfach davon ab, wie du willst, Hey, willst du das twittern? Und dann werden wir einen Pixel massiv umranden, und wir werden für einen Apfel in F eins tun. Okay, das wird es ein bisschen wie eine Grenze geben. Jetzt können Sie sehen, dass es ein bisschen mehr wie das aussieht, was wir an unserem Beispiel hatten . Das wird Zeugnis geben, und wir machen Avatar. Also werden wir den tatsächlichen Avatar hier anvisieren, um Block anzuzeigen, so dass wir es tatsächlich mit CSS-Regeln auf den Rand Null Auto zielen können . Also wird es das Bild zentrieren, ähm, und dann werden wir mit 100 Pixeln tun. Als ob das ist, werden wir es kleiner machen. Also, jetzt ist es irgendwie im Inneren der Box zu sitzen, ist nicht nur den ganzen Raum eingenommen. Okay, ich denke, das sieht besser aus. Hol dir eine Menge von diesem Zeug, das du geduldest. Du kannst es ändern. Wie auch immer Sie denken,sieht gut aus, aber das ist einfach so, was ich mit X ging. Wir werden Zeugentitel machen. Sie denken, Wie auch immer Sie denken,sieht gut aus, aber das ist einfach so, was ich mit X ging. Ah, und dafür werden wir die Schriftgröße machen. Wir machen 1,75 Widder. Es sind ungefähr 28 Pixel. Und dann zum Zeugeninhalt machen wir eine Zeilenhöhe von 1,3. Gib einfach Ah, hab ein bisschen besser. Schau, ähm, und dann werden wir das tun, eigentlich, das war's. Was werden wir damit alles tun? Und dann unten, werden wir Zeugnis geben. Das werden wir tun, Autor. Also das ist der Autor und lass mich es nach oben scrollen. Also, Zeugnis, Autor, wir werden nur eine Schriftgröße festlegen. Wir werden das eigentlich kleiner machen, als wir 0,8 machen oder so sind, um ein bisschen kleiner zu machen . Okay, wenn wir das hier etwas erweitern, damit wir es sehen können. Sehen Sie, wir haben das hier, und wenn Sie sich unser Beispiel ansehen, aus dem wir bauen, ist das, was wir dort haben, also sieht sehr ähnlich aus. Und das war's eigentlich. Das ist also das H-Metal. Das ist das CSS. Und so baust du. Ah, der Kundenbereich hier, so ziemlich unkompliziert. 10. Das Contact erstellen: diese Lektion. Wir werden diesen unteren Abschnitt hier bauen, der den Anfang unseres Fußes hat und den Kontakt vier Minuten drin hat. Wenn Sie sich erinnern, dies ist nur eine Art von einem Ajax-betriebenen Kontaktformular, aber er hat gerade Zitat bekommen. Wenn die E-Mail erfolgreich gesendet, wird es sagen, dass erfolgreich in eine Etagene-E-Mail hier setzen und drücken Sie Get Quote und Sie könnten sehen wenn nicht, es wird auf Luftnachricht hier zurückkehren. Das ist es, was wir in den Bau bekommen. Aber wir werden nur die h zwei Melas und CSS in diesem Video oder dieser Lektion machen, und dann werden wir in das PHP und dann das Java-Skript, das wir für all das schreiben müssen . Also, das sagte, lasst uns gehen und ziehen das aus dem Weg und lasst uns in unsere h Die meisten kommen wieder nach unten auf den Grund. Ah, nochmal, weißt du, ich werde das ein bisschen schneller vorwärts machen, mit dieser ah Header-Abschnitts-Sache , weil das hier eigentlich ein bisschen anders ist, also warum gehe ich nicht voran und geben Sie einfach diese aus, so lassen Sie uns einfach Abschnitt gehen und wir werden Klasse gleichen Abschnitt auf tun. Eigentlich bin ich gleich Kontakt. Äh, richtig. Und dann machen wir unsere aktive Klasse gleich Container. Aktive Klasse entspricht Zeile und dann hier werden wir es aufteilen Normalerweise sein. Tun 12 Spalte. Lassen Sie uns das weiter, aber hier werden wir es aufteilen. Also gehen wir zu Div. Klasse ist gleich Anruf sechs, weil wir den Abschnitt links hier haben werden. Und dann haben wir den Kontaktteil hier drüben auf der rechten Seite. Also teilen wir das in sechs auf. Ist hier. Sechs Säulen. Okay, also machen wir das. Und dann gehen wir einfach voran und machen das andere hier, also haben wir unsere Grundstruktur an Ort und Stelle. Alles klar, das gibt uns 26 Ruhe mit Säulen. Ah, und jetzt, wenn hier wird der Header tun, wird es besser. Wir tun Klasse gleichen Abschnitt, Header und innerhalb Das wird unsere H eine Klasse gleich Abschnittstitel tun. Und dann werden wir auch Text hier hinzufügen und dann wird hier das tun. Verleih mich wie diese Schriftrolle hier runter. Also fangen wir an, hier ein wenig etwas zu bekommen und dann werden wir P klatschen Absatz Tag gleich Blei tun . Und dann haben wir nur ein warmes Ipsum hier drinnen, gegen lass mich dieses Lauren ipsum hier . Richtig? Das ist also unser Dummy-Text. Ah, und dann darunter werden wir erschaffen. Eigentlich ist dies außerhalb der Header. Das ist, was in unserer Kopfzeile steht. Sie versuchen, den Kopf zu halten oder sauber, um den Titel und Beschreibung und dann unten. Dort werden wir unsere Liste mit unserer Adresse, Telefonnummer und E-Mail-Adresse erstellen. Also machen wir eine Nonne geordnete Liste, geben ihr eine Klasse gleich Liste in Zeile, und dann werden wir es tun. Ally Klasse entspricht, äh, Liste in Zeile Posten so, und er wird unsere Posten sein. Und dann geben wir die. Wir werden diese Ikonen geben. Wird ich Klasse gleich unser Telefon benutzen. Ehrfürchtig. Art von f A f eine Strichkarte, Bindestrich Marker so. Und das wird uns unser Symbol hier ein wenig nach unten scrollen. Also gibt es uns unsere Ikone hier, und dann werden wir tun, denke ich, es in einer Freelancer Spur und dann 55 80 so etwas. Okay, also lasst uns unser erstes Ah, in Zeile. Hier, Mrs. Gehen Sie voran und tun Ally Klasse gleich Liste in Zeile Punkt hier. Lassen Sie uns voran und erstellen Sie einfach unsere 3. 1 wirklich schnell. Also Ally Klasse gleich Liste in Zeile Element. In Ordnung, das sind also unsere drei Listenelemente, und dann wird es in diesem tun. Ah, Nun, mache ich Klasse gleich und werde f a f A Telefon für die Telefonnummer tun. Und das bin ich wieder. Sie dürfen diese genauen Dinge nicht verwenden. Möglicherweise möchten Sie keine Telefonnummer angeben. Ich meine, was auch immer. Was auch immer für Ihre Situation funktioniert. Plus eins, Ich werde 88 und wir tun 555-1 zu 1, um eine Dummy-Telefonnummer zu sortieren. Alles klar, das gibt uns unseren zweiten Listeneintrag. Und dann wird die 3. 1 I Klasse gleich f a f a. Ah, Strich Umschlag auf. Dann werden wir es tun. Wir werden E-Mail an Domain dot com machen. Sie könnten diese verknüpfen, so dass ihre anklickbaren und so weiter. Ich bin gerade einfach, weil ich denke, dass die Hauptsache, über die wir uns hier Sorgen machen , wirklich die Form ist, oder? Das gibt uns bis zu diesem Punkt wieder eine Art Grundstruktur. Jetzt können wir hier zu unserer zweiten Kolumne kommen. Wir können unser Formular erstellen, also werden wir Aktion bilden, und wir werden dies gleich setzen, um Dot PHP zu verarbeiten. Ah, wir werden das letztendlich über JavaScript ausführen. Aber unser PHP-Verarbeitungsskript ist bei process dot PHP. Also sind wir Punkt, dass wir auf Methode gleich Post gehen, und wir werden Klasse gleich dunkel und Kontaktformular tun. Richtig? Also, das gibt uns unsere Form wird es einen Titel geben. Also h drei h drei und dann Klasse gleich Formulartitel und wird mich kontaktieren. In Ordnung. Und dann wickle ich diese ins Informierfeld ein. Also mache ich div Klasse gleich Formularfeld wie dieses nur für Art von Targeting Zwecke wird Eingabeklasse gleich Texttyp gleich Textname gleich dem Namen dieses Formulars tun . Feld ist Name, weil wir wollen Dies ist der Name der Person wird ein Platzhalter gleich tun und wird Namen tun und sagen, dass dies erforderlich ist. Okay, also schließen wir das ab, damit unser erstes Formularfeld erstellt wird. Sie können dort sehen. Uh und dann werde ich das einfach kopieren und einfügen, weil wir hier ein Paar haben werden, also haben wir, ah, E-Mail, und dann haben wir einen Textbereich. Ich schätze, wir könnten das hier reinlegen. In Ordnung, also für die 2. 1 wird die Klasse Text sein, aber es wird auch E-Mail sein, weil es eine E-Mail-Eingabe geben wird. Wir werden den Typ in E-Mail ändern. Dies ermöglicht die Validierung auf der Browserseite, den Namen, den wir auf E-Mail setzen werden und dann den Platzhalter Wir werden auch auf E-Mail setzen und machen diesen auch erforderlich. Okay, jetzt haben wir Namens-E-Mail, und dann in der nächsten, werden wir das tatsächlich in Textbereich ändern. Und wenn wir das tun, müssen wir hier runterkommen. Wir müssen das schließen. Das erfordert einen Abschluss. Ich denke, das gibt uns einen Textbereich. Ah, und dann wird die Klasse Text ein Textbereichstyp sein. Wir brauchen keinen Typ, weil es nicht ist. Wir definieren das, wenn wir sagen, es ist ein Textbereich. Also ist es nicht ein Textname wird, äh, wird Nachricht Platzhalter sein wird. Erzähl mir von deinem Projekt, okay? Und wir werden das auch erforderlich lassen. Okay, also lass mich voran gehen und das schnell speichern und das auffrischen. In Ordnung? Also jetzt haben wir Name E-Mail und unsere Nachricht Box hier. Das Letzte, was wir hier reinlegen müssen, ist unser Knopf. Also werden wir das außerhalb all dieser Dibs setzen, bereit, einzugeben, und wir gehen zur Klasse gleich Schaltflächen senden, und wir werden Typ gleich senden. Und wir sind do value equals bekommen ein Zitat wie folgt, und dann müssen wir hier ein div hinzufügen. Div I d entspricht Statusmeldungen. Hier werden wir ausgestrahlte Statusmeldungen splay. hast du schon mal gesehen. Dies ist nur ein nem PDI div. Es gibt uns nur etwas zum Ziel in einem Platzhalter, damit wir unsere Statusmeldungen in setzen können. Das ist also der HTML. Ich meine, es ist eine ziemlich einfache Form, Listen und so weiter. Eine Menge von dem Zeug, das damit gemacht wird, wird innerhalb der C s gemacht werden. Okay, also haben wir eine Menge Kontaktformular CSS, und dann haben wir auch und wir haben ein paar Arten von globalen Stilen, die wir brauchen, um zu sortieren von Chaos mit hier ein wenig. Also, ähm, gehen wir weiter und machen zuerst die globalen Stile. Da meine ich Technik, weißt du, nur um im Einklang zu halten, wie wir das bauen sollten. Also Liste in Zeile wird direkt unter diesem Text gesetzt, oder? Genau hier. Und so machen wir die Punktliste und den Grund, warum wir es so machen, damit Sie es an anderen Orten verwenden können , nicht nur hier. Also Liste in Zeile und wir werden Flex anzeigen, und wir werden Flex tun. Rap ist so eingestellt, eine Zeile nach unten scrollen kann, damit Sie sehen können, was hier passiert. Zeileninhalt. Uh, wir werden Flex starten. Okay, also hat das nur mit einigen der Art zu tun, wie wir dieses Abschleppgerät aufstellen wollen und so weiter. Ah, du weißt, wie alles, was wir wollen, angelegt ist. Also verwenden wir Flex-Box für diese Polsterung. Zero Ah, wir werden Liste Stil Typ tun? Keine. Also bekomme ich mit all den Aufzählungspunkten Schriftgröße 14 Pixel und sind eigentlich lass uns tun, äh, 0.85 ram. Richtig, also ist das ungefähr 14 Pixel und dann Farbe. Wir werden die Nummer 999 Okay, also gerade jetzt, weil wir diesen Squeze unten haben, sieht es nicht unbedingt wie alles aus, was Sie sehen können. Wir gingen von ah, oben nach unten Liste mit Kugeln, um jetzt haben wir alles irgendwie nebeneinander und so weiter . Also das gibt uns im Grunde einige raus und wir werden Liste machen. Jetzt werden wir die Elemente in dieser Liste in Zeile Punkt anvisieren, und wir werden Flex wachsen. Lassen Sie mich hier nach unten scrollen, Flex wächst, und wir setzen das auf eins. Das ist also im Wesentlichen gut. Sie bemerken jetzt, anstatt dass alle nur eine Zeile direkt nebeneinander liegen, sagt es, dass sie wachsen und irgendwie den verbleibenden Raum hier füllen soll. Das ist im Wesentlichen das, was wir hier tun. Also wieder, das ist ein Flex-Box-Zeug, ähm, aber funktioniert ziemlich gut für diese Art von Sache. Und dann machen wir unten fünf Pixel. Wenn es also tut, wenn wir zu den kleineren Bildschirmgrößen kommen und es zu einer neuen Zeile geht, hat es ein wenig Platz. Es sieht tatsächlich aus wie unsere E-Mail. Lass mich zu jedem Morgen zurückkehren. Schnell. Sieht aus wie unsere E-Mail. Oh, ja, weil ich hier einen Bindestrich bekommen habe, wie bei seinem Auftritt. In Ordnung, also gibt es unser E-Mail-Symbol. Siehst du das? Dann komm zurück. In Ordnung, also lasst uns auf in Zeile Artikel auflisten. Jetzt werden wir die Symbole machen, also machen wir eine Liste in Zeile, und dann machen wir Punkt f a und wir werden diese Symbole anvisieren. Also, was wir hier tun werden, ist, wir gehen, um, ähm, verlassen. Lassen Sie mich die geben. Wir geben den ein bisschen andere Farbe. Also machen wir unsere lila Farbe 890 b. D. D. Also gibt es das ein bisschen Farbe, und dann werden wir einen kleinen Rand nach rechts setzen, weil sie gleich neben dem Text sind oder sieben Pixel machen. Okay, also bewegt das sie irgendwie wieder ein bisschen hier raus. Wenn wir das herausbringen, fangen wir an, mehr wie wir hatten aussehen. Okay, also gibt es das. Also, das ist die ah, in Zeile Posten dort. Das ist das Das sind die hier unten. kleine Listenbereich dort. Ähm, lass mich mal sehen. Es sieht so aus, als müssten wir für Infield wirklich schnell tun, weil wir auch fremdes Feld hinzugefügt haben. Lassen Sie uns Formularfeld machen. Das ist also für die rechte Seite. Und lassen Sie uns Rand unten 10 Pixel tun. Das gibt uns ein wenig Platz hier. Das haben wir auch. Siehst du, wir haben ein bisschen Abstand. Ich denke, das tut es so ziemlich für unsere ah, für unsere globalen Stile. Jetzt müssen wir in die tatsächliche Art von Stil spezifisch für das Kontaktformular zu bekommen. Also haben wir dort Zeugnisse gemacht. Lassen Sie mich das tun. Ich werde meine Trennwand hier wieder auf ein Stück nehmen, das hier drin ist. Richtig, das ist also für unser Kontaktformular. Okay, also für diesen Kontaktbereich, das erste, was wir tun werden, ist, die Hintergrundfarbe machen. Also werden wir Hintergründe machen, und wir werden ändern, dass 2222 das ist, was ich ausgewählt habe. Ich mag irgendwie, dass Farbe alles Art von Randfarbe hervorhebt und wir werden Nummer 333 so machen. Ich denke, es gibt eine Grenze über die Spitze, so dass diese Art von Sache ein wenig beeinflusst. Nichts Größeres damit, aber hilft ein wenig. Dann werden wir Kontakt und dann Punkt Abschnitt Header tun. Also zielen wir auf das Ziel. Wurden Targeting, was eine globale Stile. Aber wir richten uns an einen spezifischen Abschnitt. Also Abschnitt-Header ist in jedem einzelnen von diesen, aber waren nur auf den innerhalb des Kontakts hier ausgerichtet. Das machen wir also mit dieser Deklaration. Also Abschnitt Header. Und dann werden wir Grenze unten machen und Ah tun, ein Pixel punktiert und wird Nummer 444 so tun. Richtig? Das ist also wieder. Das ist der Abschnittskopf hier. Also gibt es ein wenig daran, von unserem Beispiel hier zu erinnern, wir haben dieses kleine Punktpunkt-Ding genau hier, so dass es eine kleine Art von Teilung gibt. Das ist also das. Und dann gehen wir in den Abschnittstitel. Also Kontakt Abschnitt Titel und der Abschnitt Titel. Wir ändern die Schriftfamilie in Yellowtail. So gelber Schwanz kursive sans serif. In Ordnung. Und dann ändern wir die Farbe wieder. Zehe sind lila. 890 war a d b b b d d. Alles klar, so dass das ist, Ähm, Ähm, also das ist, dass dieser Abschnitt, ähm, ähm, denken wir gehen voran und schauen uns diesen Leitungsabschnitt hier an, lassen Sie mich gehen und fügen Sie einfach Text wie folgt hinzu. Ziemlich sicher, dass Text darauf übrig war. Also das ist Ah, das tut das. In Ordnung, also gehen wir zurück. Es gibt also Abschnittstitel. Ähm und ich denke, wir müssen auch die Farbe des Textes ändern, weil es nicht sehr ist. Ah, es taucht nicht sehr gut da unten auf. Also lass mich einfach reingehen und tun. Habe ich das ins Visier genommen? Ich verstehe. Nun, lasst uns einfach Kontakt führen und das machen. Kontakt-Leine. Lasst uns Farbe machen. Lasst uns das tun. Versuchen wir es einfach, um zu beginnen. Sehen? Sehen? Sehen Sie, es ist ein wenig zu viel ist wegen 555 Ja, vielleicht 666 Uh, lassen Sie uns das vermeiden. Richtig. Okay. 777 Das sieht gut aus für mich. Das sieht danach aus, wo wir sind. Okay, das gibt uns unsere Farbe dafür. Und es sieht so aus, als wäre unsere linke Seite ziemlich fertig. Ziemlich gut, dorthin zu gehen. Vielleicht haben einige Sachen zu kommen, aber das sieht ziemlich gut aus für uns. Mein nächstes ist Formulartitel. Also wird es sein, dass Kontaktieren Sie mich SMS oder gehen Sie auf die rechte Seite. Wann tun Farbe 999 Um, und lassen Sie uns Schriftgröße tun 2.25 Gramm und Rand 000 10 Pixel Null. Okay, also gibt es uns einen schönen großen Kontakt-mich Titel dort, und jetzt werden wir das anvisieren. Diese Form ist also eine dunkle, wo wir uns erinnern, dass wir ihr die Klasse dunkel gegeben haben, weil es eine dunkle Form . Nicht jede Form auf ihrer Seite wird so sein. Also zielen wir nur auf dieses ein speziell, also werden wir dunkel machen, und dann machen wir unsere Textfelder und dann dunkel und unsere Textbereichsfelder. Das sind alle unsere Felder. Abgesehen von unserem Submit-Button, wenn Sie sich erinnern, weil wir den Namen der Klasse des Textes gaben, gaben wir E-Mail die Klasse von Text und E-Mail und dann gaben wir diese die Klasse des Textbereichs. Also haben wir im Grunde nur all diese Bereiche angegriffen. Und jetzt können wir stylen sie stylen. Also werden wir Farbe oder 999 Das wird die Textfarbe und dann die Rahmenfarbe sein. Siehe Rahmenfarbe. Und wir machen Ah, 222222 Wir machen die Hintergrundfarbe. Wir werden RGB ein hier machen, und wir werden schwarz machen, was 255255 255 255 ist, aber wir werden ihm eine No-Pay-Stadt geben, also machen wir 0.1. Das gibt uns also, dass diese Art von gräulicher Farbe Sie eine tolle Farbe finden können und einfach einen Hex machen , wenn Sie wollen. Aber ich war einfach so: Nun, Nun, lassen Sie mich einfach mit Theo pasty verwirren, denn dann können Sie hier reinkommen und sagen: Nun, Nun, zwei jetzt mag ich nicht, dass Sie irgendwie rumspielen können, bis Sie bekommen, was Sie mögen, so dass es ein wenig einfacher zu arbeiten. Also gibt es das und dann machen wir einen Kastenschatten, und wir werden es im Set schaffen. Dies wird also einen Schatten machen, irgendwie innerhalb des Formularfeldes. Also ist es innen 02 Pixel, drei Pixel auf, dann RG rgb a und wird 000 und dann 0.6 tun. Das ist also weiß. Und dann haben wir irgendwie Pacenti drauf. So können Sie sehen, dass dieser kleine Schatten da drin schafft. Und du könntest mit diesen Zahlen spielen. Lassen Sie uns diese Art von offensichtlich machen. Lass uns 20 machen. Siehst du, das bringt es ganz nach unten. Wenn wir 30 hier machen , weißt du , diese Art verblasst es ein bisschen, usw. Eintopf 20. Hier. Sie können irgendwie mit diesen Zahlen herumspielen, bis Sie es Zeh bekommen. Sieh mal, wie du willst, dass es aussieht. Also diese Luft einfach so wie die Zahlen, die ich hier vermasselt habe, okay? Und ich denke, ich mag die Art, wie dieser Schatten aussieht. Ah, naja, auch war einfach kopieren Sie das. Ähm, ich kann mich nicht mehr von oben in meinem Kopf erinnern, wo Box Shadow war mit Browser-Unterstützung. Aber ich werde das machen. Welches Kind? Ah, Kastenschatten. So, nur für den Fall, dass wir das brauchen, wenn es nicht nötig ist, dann wird es nichts wehtun. Also gehen wir einfach weiter und werfen das da rein. Alles klar, das sind die kleinen Textbereiche hier, die Sie wieder sehen können. Die sehen ziemlich ähnlich zu dem, was wir in unserem Beispiel hier hatten. Ähm, jetzt müssen wir voran gehen und tauchen Sie in die Schaltfläche, damit wir Punkt Dunkel wieder tun Will Button senden, und wir werden tun Farbe wird weiß f f f f f tun und wir werden Hintergrundfarbe tun, Hintergrundfarbe würde RGB a wieder. Und so, wenn Sie nicht vertraut sind, dies ist nur die RGB RGB rot grün, blau Farben und dann ist ein für die A Pass ity. Das ist also im Wesentlichen das, was rgb A ist. Also die ersten 3 Buchstaben lüften den RGB und dann der letzte ist die Deckkraft, aber Sie sagen, dass es so 000 wieder weiß ist und dann werden wir 0.2 tun. Das gibt uns und Sie wissen, dass Sie in die andere Richtung gehen können. Wenn du richtig willst, könntest du 5555 machen und dann meine ich, du kannst das irgendwie tun, wie du willst, aber das gibt uns eine schön aussehende Art schwarzer Farbe. Ich werde Grenze machen, ähm, mit einem Pixel solid und werde RGB wieder tun und Null 00 und 0.1 tun. Also die Grenzen nur ein bisschen dunkler. CNC hat jetzt ein bisschen eine dunklere Grenze dort. Und dann werden wir Schrift warten 300, weil ich nicht mag, dass fett aussehende Ah, Text darauf. Richtig, also das ist der Knopf. Und dann müssen wir den Hover für die Schaltfläche machen. Also tun Sie dunkel und tun Dot Button, uh, senden, senden und dann schweben und sie werden diodunkle Punkt-Taste Submit, senden und wir werden Fokus tun Wenn jemand passiert toe, verwenden Sie ihre Tab-Taste zu Art durch diese. Sie können den Fokus hier ändern, so dass wir konzentrieren und wir tun, Ah, Hintergrundfarbe und wir werden tun. Wir werden die Hintergrundfarbe rgb A ändern und tun 0000 0.35 Okay, und dann machen wir die Rahmenfarbe. Wir ändern nur die Farben des Hintergrunds an den Grenzen im Wesentlichen auf Hover und Fokus. So würde die Rahmenfarbe rgb wieder 000 Null tun. Ah, zeigen Sie auf und dann werden wir nur Cursorzeiger machen. Okay, also? Nun, das gibt uns, das ist eigentlich der Knopf hier. Also wieder, Tab Tab, Tab auf Fokus hier oder auf Hover. Sie können sehen, dass sich die Schaltfläche ein wenig ändert. Okay, das gibt uns das Styling. Ah, und dann haben wir unsere Statusmeldungen, also gehen wir weiter. Wir gehen weiter. Stil. Diese Ups werden den Status haben. Ah, Statusmeldungen. Und das wird eine Art von nur das allgemeine Layout sein, wenn Sie für die Statusmeldungen Styling . Also Rand Ah, oben. Und wir machen 0,7 Widder. Das gibt uns einen kleinen Spielraum zwischen dem und unserem Knopf, und dann machen wir Polsterung, und wir machen eine Felge. Es gibt also ein wenig Polsterung um die Statusmeldung. Und dann jetzt, jetzt müssen wir für Fehler tun. Wir wollen das Rot und für, ähm, Erfolg. Wir wollen das Grün. Also werden wir Statusmeldungen machen und Dot, Dot Air machen , und wir werden das aufrüsten. Also werden wir das tun, und wir werden die Klasse festhalten. Denken Sie daran, wenn wir zurück zu HTML gehen, war alles, was wir getan haben, ein div mit Statusmeldung. Wir hatten keinen Lufterfolg. Wir werden das mit RJ Query aufzeichnen. Okay, wir haben also keine Sorge darüber in HTML, aber wir müssen das Styling tun. Okay, so weiter, natürlich, sicher, dass Sie das tun. Also, wenn Hintergrund und es endet D. C 3545 und ich würde in der Lage sein, irgendwas von diesem jetzt zu sehen, aber wir werden, sobald wir alles angeschlossen haben. Es wird also die Hintergrundfarbe sein und das wird diese rötliche Farbe sein, und sie werden Farbe machen. Ich möchte warten und dann unten hier, Statusmeldungen machen und Punkterfolg machen. Und tatsächlich können wir einfach diese Farbe hier nehmen, sollte nur in der Lage sein, das zu nehmen. Ich war sowohl in der Luft als auch im Erfolg, aber wir sollten das tatsächlich so bauen, und dann müssen wir keinen Code neu schreiben. In Ordnung, also machen wir Hintergründe, und das wird diese grüne Farbe sein. Das endet also zu acht ein 745 und die wurden einfach mit denen gespielt, um die richtige Farbe zu bekommen . Ähm, nochmal, du kannst die irgendwie was machen? Was du willst. In Ordnung, also das ist der Fußzeilenabschnitt. Das ist der HTML- und CSS-Teil des Denkens, wir sind so ziemlich da, wo wir sein müssen, wenn es etwas gibt, das wir optimieren müssen, während wir hier gehen, weil wir das eigentlich noch testen . Ähm, dann twittern wir das hier. Aber das sollte das HTML und CSS Ah für diesen Abschnitt sein. 11. Den Kurs aus the erstellen: diese Lektion. Wir werden unser PHP-Verarbeitungsskript schreiben, Denken Sie daran, von unserem für mich sagte die Aktion, um Dot PHP zu verarbeiten. Wir werden dies über Java-Skript für BOJ-Abfrage hacken. Aber trotzdem, weißt du, wenn wir es dorthin schicken, was ich nicht viel in Bezug auf die Ausgabe gemacht habe, die du zurückerhältst. Aber trotzdem, wissen Sie, wenn dieses Formular an diese Seite gesendet wird, sollte es es immer noch verarbeiten, auch wenn wir nicht über JavaScript entführt wurden. Also nur für den Fall, dass jemand Javascript ausgeschaltet hat Ah, die E-Mail wird immer noch gesendet Die Nachricht, dass die Antwort, die sie bekommen, nicht unbedingt die meisten, äh, wissen Sie, die schönste aussehende, Aber das wird, ähm, es sollte alles noch funktionieren. Also Ah, deshalb werden wir das Verarbeitungsskript darauf setzen. Dass du sonst noch in Ordnung bist. Ich meine, Leute haben heutzutage kein Javascript eingeschaltet. Es gibt eine Menge von der Web, die sie nicht einmal eine Menge von Websites und Entwicklern in diesen Tagen nur irgendwie angenommen, dass Javascript eingeschaltet ist. Und so glaube ich nicht, dass wir sowieso das Gleiche tun. Wir gehen voran und erstellen diese neue aus der Datei wird Prozess dot PHP aufrufen. Und es ist nur in der Wurzelart dieses Arbeitsordners, den wir hier haben. Also ist es direkt neben dem Index Punkt jede Melone auf Eine Frage, die ich weiß, könnte wahrscheinlich damit kommen , ist , Nun, wir haben keine HTML-Seite, aber wir sitzen und wir senden es auf dieser PHP-Seite. Muss das nicht PHP sein? Eine Antwort ist eigentlich, nein, denn es gibt keinen PHP-Code auf dieser Seite. Es gibt also nichts zu verarbeiten, obwohl das Formular ah Daten an ein PHP-Verarbeitungsskript sendet, ist dieses Skript hier eine ganze separate, ah, Datei,so dass ah, Datei, Sie tatsächlich eine Indexpunkt-HTML-Seite ausführen und sie an einen Prozessstopp senden können PHP-Seite. Und es funktioniert gut. Also nehmen Sie einfach eine Art Antwort auf diese Frage, richtig? Also mit dem gesagt, lasst uns weiter gehen und Offenheit gehen und gehen weiter und schreiben unser PHP-Skript. Also zuerst, was wir tun, natürlich, Opener PHP-Tags und dann werden wir einrichten, sind irgendwie unsere con fig. Jetzt behalte ich das. Ich meine, es gibt ganze Skripte, die massive Skripte für Kontaktformulare und so weiter sind. Ich halte das wirklich einfach, weil ich dies nicht zu einem riesigen PHP-Kurs machen wollte. Okay, also, wenn Sie in PHP eintauchen wollen, habe ich eine Reihe von Pfirsich-Menschen Kurse, Sie wissen, dass verfügbar sind, dass Sie Zugang zu Ihnen vermittelt gehen aus John Morris online dot com gespeichert . Oder wenn Sie auf Skill-Sharing sind, gehen Sie einfach zu meiner Profilseite, und Sie werden alle von ihnen sehen. Aber ich versuche, das PHP so begrenzt wie möglich zu halten. Das erste, was wir tun werden, ist, dass wir das schicken. wen schicken wir das? Und das wird Denken Sie daran, das ist eine Zitatseite oder eine Aktion, die am nächsten kommt. Dies ist eine Angebotsanfrage bezahlt. Das wird also deine E-Mail-Adresse sein. Okay, also werde ich das auf keinen Fall bei John Morris online dot com setzen, oder was auch immer das ist, wird das hier eine Dummy-E-Mail-Adresse für mich sein, aber Sie würden offensichtlich Ihre E-Mail-Adresse Ihrer Kunden eintragen wollen Adresse und dann das Betreff. Du machst die Betreffzeile, was immer du willst. Dies ist die Betreffzeile, die die E-Mail hat, wenn sie ankommt. Ich werde nur eine neue Angebotsanfrage stellen und tatsächlich, lassen Sie mich wieder hier rauf gehen. Nun, eigentlich ist es einfach hier zu tun. Führen Sie im Allgemeinen einfache Anführungszeichen durch. Manchmal flippe ich Flop. Also, lassen Sie uns diese einfachen Anführungszeichen nur Konsistenz machen. Dann werden wir überprüfen und sehen, ob es irgendeinen Beitrag gibt, selbst wenn dies über Ajax eingereicht wird . Es ist immer noch, es wird als eine Art Beitrag eingereicht anerkannt. Also wollen wir überprüfen, ob Post Data eingereicht wurde, und wir werden so werden wir überprüfen und sehen, ob Post leer ist oder nicht. Wenn es leer ist, dann werden wir nichts tun. Du könntest natürlich hier natürlicheine andere Aussage setzen und so etwas sagen wie, du weißt schon, keine Daten oder so etwas widerspiegeln. Also, wenn du das tun willst, kannst du das tun. Ähm, für das, was ich habe, lasse ich es einfach leer. Ähm, also kannst du einfach entscheiden, was du dort tun willst. In Ordnung. Das nächste, was zu reduzieren. Gehen, um eine weiße Liste zu erstellen. Dies ist also eine weiße Liste der Füße Formularfeld. Nun, außer, dass wir Namen gleich machen. Ah, Post und wir werden benennen. Und wieder gibt es wirklich ausgefallene, prägnante Wege, wie Sie dies tun können, ohne dies alles für beide wie dieses ausschreiben zu müssen. Aber auch für diejenigen von Ihnen, die nicht unbedingt eine Tonne PHP kennen, möchte ich das nicht zu kompliziert machen. Also alles, was wir tun, ist, dass wir die Daten aus dem Formular absenden. Also, wenn die erstere eingereicht, wird es im Wesentlichen ah Anfrage mit diesen Daten in diesem Beitrag super global hier senden. Es sieht also aus wie eine PHP-Variable. So wie das, was wir auftauchten. Aber es ist etwas anders strukturiert. Dies im Grunde der Name, der eingereicht wurde, die E-Mail, die in der Form wie Das ist wirklich alles, was Sie wissen müssen, um dies zu verstehen, und ich werde Nachricht tun, die er tun Nachricht gleich. Und das ist uh huh Post und Nachricht. Und dann werden wir Honeypot gleich tun und wird dio Post und Ihre URL. Und das macht mich eigentlich, ich glaube nicht, dass wir den Honeypot zu unserem Formular hinzugefügt haben. Ja, also haben wir den Honeypot verpasst, als wir unser Formular gemacht haben. Also eigentlich, lassen Sie uns zurück zum Index html gehen. Es ist in Ordnung. Es ist nicht so eine große Sache hinzuzufügen. Also fügen wir es hier direkt unter unserem Textbereich hinzu. Und so werden wir div Klasse gleich Formularfeld zu tun. Es wird also aussehen, was ein Honigtopf ist. Es ist ein Feld, das, wenn ein Baht durchkommt, fühlt sich ein Baht an, als hätte es oft Zeh auf Bots durchkommen. Sie werden hier in jedem Feld etwas ausfüllen, oder? Und so, Schatz, Schatz, Topf ist im Grunde, als ob ein Bär dem Honig nicht widerstehen kann. Es ist, als könnte ein Körper nicht widerstehen, dieses Feld auszufüllen. Also schaffen wir ein Feld, das das Baht ausfüllen würde, aber ein Mensch würde es nicht. Und der Grund, warum der Mensch ist, weil wir das so einstellen, dass keine angezeigt wird. Okay, also wird das nicht wirklich einem Menschen zeigen, aber ein Bott, der das liest, wird dieses Feld sehen und sie werden es ausfüllen. Wo ist der Mensch nicht. Und das ist so, dann können wir sagen, ob wir eine Flasche haben, nicht so Eingabetyp ist gleich versteckt. Das ist eine sehr rudimentäre Art, mit Spam umzugehen. Aber wenn du es richtig machst, kann tatsächlich funktionieren. Also, du tust Name gleich U R l und dann tun wir es. Platzhalter entspricht dir, Earl, richtig? Nichts davon ist wichtig, weil es sich nicht zeigen wird. Aber der Sinn eines Honigtopfes ist, als hätten Spammer herausgefunden, dass die Leute das tun. Und wenn Sie also nur diesen Eingabetyp gleich Honeypot nennen, Nun, die Bots werden wahrscheinlich etwas darin haben, um das zu erkennen und es nicht auszufüllen. Okay, du musst es wie ein echtes Formularfeld aussehen lassen. Und Sie sind l ist wie, wenn Sie, wenn Sie den Begriff Honeypot verwenden, Teoh Köder den Topf in das Ausfüllen. Die meisten Bots. Die Sache, die sie unbedingt auf Ihrer Website setzen wollen, ist da Sie l Das ist, warum sie spamming. Wenn Sie also ein u. R. L als Honeypot verwenden R. , könnte es tatsächlich ziemlich effektiv sein, weil die Leute das einfach ausfüllen wollen . Deshalb benutze ich das hier. Okay, das ist also ein Formularfeld. Du merkst, dass es hier nicht auftaucht. Wenn ich von ah Stil Display None losgeworden, dann Ah, eigentlich ist es nicht gut, es ist ein verstecktes Feld, also spielt es keine Rolle, aber es zeigt sich nicht vorbei. Hier ist der Punkt. Und so werden die Menschen es nicht ausfüllen, aber der Baht wird es. Und als wir ihn dann zu unserem PHP-Skript angerufen haben, können wir das packen und testen. Und wenn es ausgefüllt wurde, dass es wahrscheinlich ein gekaufter war, der dieses Formular eingereicht hat, okay? Und so können wir es einfach nicht verarbeiten. Das ist eigentlich das allererste, was wir tun. Wir werden den Honeypot überprüfen, denn wenn es ein Honeypot ist, dann ist es ein Spam, ein Spam. Aber wir werden uns nicht mal mit irgendetwas anlegen. Also tun wir, wenn nicht, leer, leer, und wir werden Honeypot machen. Wenn das also nicht leer ist, bedeutet das, dass es ausgefüllt wurde. Es wurden Daten in sie eingereicht. Dann machen wir Echo J. Sohn Ah, kodieren tatsächlich Codierung und wir werden einen Ah-Air Ray erstellen. Nun, der Grund, warum ich das auf diese Weise mache, ist, weil, wenn wir zum JavaScript-Teil kommen, wir diese Nachrichten greifen und die Menge analysieren, die sie angezeigt werden. Dies ist, wo ich sage, dass, wenn Sie, wenn jemand tatsächlich dieses Formular mit Javascript absendet seinen formalen Prozess deaktiviert hat. Aber was wird die Zehe Echo aus? Ist dieses codierte Array Jason codiert oder ich habe nichts getan, um das schöner aussehen zu lassen. Irgendwas? Weil ich mich wirklich auf die A-Jack-Verarbeitung konzentriert habe. Ich war nicht wirklich sehr besorgt über Wenn jemand direkt mit PHP für Sie besucht, möchten Sie vielleicht wissen, dass das eine Sache sein kann, die Sie berücksichtigen möchten. Und so würdest du dann Ah, weißt du, du würdest sichergehen und das in deinem speziellen Skript so tun, wie du das schreibst. Jedenfalls gab es ein Problem. Ok? Und wieder, mit dieser speziellen Nachricht, Sie bemerken, dass ich nicht eine ganze Menge Informationen gebe, weil das ist, wenn Affen davon ausgehen, dass ein Spam Baht das ausgefüllt hat, wir werden nicht sagen Oh ha ha. Wir kennen Ihren Spam-Körper oder was auch immer, richtig? Wir werden das nicht tun, weil wir ihnen diese Information nicht geben wollen, vielleicht versuchen, herumzuarbeiten oder was auch immer. Wir werden einfach nur sagen, dass es ein Problem gab und dann hoffentlich gehen sie weiter von uns . Ok? Also nochmal, bedenken Sie das im Hinterkopf. Das sind vier, die sich mit Spam befassen. In Ordnung, jetzt werden wir wieder nach leeren Werten suchen. Dies ist ein Ort, an dem Sie ein ausgefallenes PHP-Skript machen könnten. Wir werden es einfach nur so einfach halten. Also, wenn und dann werden wir leer machen und wir werden Namen tun. Also, wenn die Namen leer oder leer und tun, äh von und wir setzen die von gleich der E-Mail-Adresse, die gesendet wurde, das war nur eine Wahl, die ich getroffen habe, wie ich die Variablen benannte Und dann oder so, wenn diese E-Mail , die im Grunde Diese E-Mail hier ist leer und das ist diese Bedingung gemeint oder ah, leere Nachricht. Also, wenn die Nachricht jetzt leer ist, setzen wir erforderlich eine Sache im Auge zu behalten mit diesem ist, dass wir auf die in der H zwei Mund erforderlich setzen . Wenn wir also versuchen, dieses Formular einzureichen, wird der Browser uns sagen, dass es leer ist. Also machen wir das bereits auf der Vorderseite, und wir haben bereits Front und Validierung, aber wir werden es auch auf dem Backend überprüfen, nur für den Fall. Ich meine, jemand könnte von einem wirklich alten Browser kommen, der das nicht tut oder was auch immer. Also nochmal, wir sind nur, dass du immer das Front-End und das Back-End überprüft. Das ist es, was wir hier tun. Also, wenn einer dieser thes Luft oder Aussage Also, wenn der Name leer ist oder von seinem leeren oder Nachrichten leer von einem von ihnen ist leer. Dann werden wir wieder Echo und Jason gut machen. Ah, und Code. Und wir werden ein Array machen und wir werden den Status Null und Nachricht tun und wir werden sagen, ein Feld A, das erforderlich ist Feld fehlt. Okay, also geben wir ein bisschen mehr, weil wir davon ausgehen, dass das ein Mensch ist. Nun, an diesem Punkt geben wir ihm ein bisschen mehr Informationen als für Ah, den Baht. Und wieder werden wir sterben. Okay, das wird das Drehbuch danach töten. Wenn diese Bedingung erfüllt ist, wird es widerspiegeln, dass Jason Ah codierte, dieses Jason-Array. Und dann wird es sterben. Und noch einmal, der Grund, warum wir Jason-Codierung sind. Das liegt daran, dass wir letztendlich über Ajax greifen werden. Und so wird es eine Nachricht ausdrucken, die wir über Ajax greifen. Und dann verwenden wir das auf dieser Seite auf dieser Seite, um die richtige Nachricht anzuzeigen, und Sie werden all das hier bald sehen. Richtig? Als Nächstes werden wir nach einer gültigen E-Mail suchen. Okay, also werden wir von gleich setzen und wir werden Filterleiste machen, was eine PHP-Funktion ist, und wir werden von tun, also werden wir unsere von E-Mail übergeben. Die E-Mail. Das war Ah, eine E-Mail-Adresse. Es wurde eingereicht und wir starten den Filterfilter. E-Mail validieren. Okay, also im Grunde, welche Filterleiste es macht, wird diese Variable nehmen und sie durch diesen Filter laufen . Und was dieser Filter tut, ist zu überprüfen, ob es sich um eine gültige E-Mail-Adresse handelt. Also, wissen Sie, da draußen gibt es einen Standard dafür, wie eine gültige E-Mail-Adresse aussehen sollte. Und PHP hat diese Filter, die die E-Mail-Adresse von gesendet dagegen ausführen können. Also, das ist, was das tun wird, wird überprüfen, dass und dann hier unten, wir dio, wenn nicht von. Wenn also im Grunde, wenn dieser Filter unserer falsche Bedeutung zurückgibt, ist das keine gültige E-Mail-Adresse. Und wieder, wir werden Nissan, äh, und Code. Und wir werden eine Array-Status-Status-Null-Nachricht machen, die besagt, äh, nicht ah, gültige E-Mail. Okay, das wird also unsere Botschaft sein. Ich habe das hier oben schon wieder bei diesen Nachrichten bemerkt. Tu das, ich und dann sterben wir hier unten. Okay, das überprüft, ob wir die gültige E-Mail haben. Also durchlaufen wir nur eine Reihe von Schecks. Wir haben den Honeypot überprüft, wir überprüfen nach den Werten prüfen dann nach gültiger E-Mail. Also schlagen wir einfach alle Dinge aus, die das von der Verarbeitung abhalten könnten. Und dann, wenn wir alle durchstehen, dann können wir in OK kommen, jetzt waren wir ziemlich sicher, dass wir gültige Daten haben und so weiter. Jetzt senden wir die E-Mail. Also werden wir eine HTML-E-Mail senden, also werden wir Satz-Header gleich bekommen, und ich werde Sprint f machen und ich werde von tun, und wir werden Prozentsatz eso Sprint f im Wesentlichen ermöglicht es Ihnen, Platzhalter zu platzieren. Also, wo von und dann machen wir das von so und dann Punkt Uh, Rückseite sind zurück Schrägstrich und so. Okay, also ist diese Einstellung im Grunde genommen von statt nur, um die E-Mail-Adressen zu sein , auf die es standardmäßig wäre. Und wir bekommen einfach ein, ah, etwas von der E-Mail-Adresse. Wir können es schöner aussehen lassen, wenn wir wollen. Nun, was ich hier mache, ist, dass ich das nur von auf die E-Mail-Adresse setze, also mache ich hier nichts. Aber ich habe das geschrieben, so dass Sie, wenn Sie wollen, dies ändern können und wie einige von tun, und dann könnten Sie den Namen und dann die E-Mail-Adresse und so weiter tun. Also jedenfalls , Ah , deshalb machen wir das hier. Also dann Header. Und wieder habe ich einen ganzen Kurs zum Senden von E-Mails. Also, wenn Sie wirklich in das eintauchen wollen, empfehle ich, das zu überprüfen. Ähm di gleich. Dies wird also an die oberste erste Zeile angehängt. Also Sprint f und wir werden antworten zu tun und wir werden Prozentsatz s wieder tun, und wir werden von wieder zu tun. Dies setzt also die Antwort auf erneut. Standardmäßig wird die E-Mail-Adresse verwendet. Aber das sind wir wieder. Wir werden es explizit so einstellen, dass Sie das ändern können, wenn Sie das ändern wollen . Also könntest du die Antwort auf etwas anderes einstellen als was? Die eigentliche E-Mail-Adresse, von der es gesendet wurde, in diesem Fall weiß ich nicht notwendig, warum Sie das tun möchten. Aber nochmal, ich schmeiße das Zeug hier rein, um dir zu zeigen, wie man diese 80 Millionen Meilen macht. Alles klar, also wird das noch einmal hinzufügen. Also werden wir f verbreiten und dann werden wir X ex Mailer machen, und wir werden dio PHP Schrägstrich Prozentsatz s. Und das wird einfach festlegen, welche PHP-Version. Das wird von hier aus geschickt. Alles klar, damit das unsere Kopfzeilen bekommt. Und dann sind wir und der Punkt im Grunde gleich, was das bedeutet, es ist ein ausstehendes es. Also wird es letztlich das, was Header gleich sein werden, ist von und die von E-Mail-Adresse und dann eine Zeilenumbruchantwort auf die von E-Mail nur in einem Zeilenumbruch, und dann x Mailer und die PHP-Version, richtig? Also ist es das DI gleich ist nur abhängig von der Zeile davor, anstatt es zu überschreiben. Was Sie tun würden, wenn Sie den Punkt nicht richtig machen würden. Also, wenn und dann werden wir tun, wird der männliche Befehl ausführen. Also männlich und wir werden Ah einstellen, die erste Variable sind die beiden. Also, das ist das, was wir in dem Konflikt eingerichtet haben, der Ihnen oder Ihrem Klienten geschickt wird , egal wie der Betreff der E-Mail, die wir auch in den Verurteilten gesetzt haben, und dann werden wir die Nachricht machen, und dann werden wir die Kopfzeilen machen. Okay, das wird also sein, was unsere E-Mail sendet, und wir überprüfen, indem wir sie in einer Bedingung wie diesem ausführen. Wenn männlich true zurückgibt, als die Bedingung erfüllt werden. Wenn es false zurückgibt, wird es nicht erfüllt. Also, wenn es wahr zurückgibt, dann werden wir Jason und Code Echo, und wir werden ein Array machen. Und dieses Mal wird der Status gleich eins sein, weil es erfolgreich war und die Nachricht per E-Mail erfolgreich gesendet wird. Alles klar, los. Der Papst. Wir werden das Skript danach immer noch töten, weil wir nicht brauchen Es gibt keine Verarbeitung mehr , die wir tun müssen. Wir müssen das nur widerspiegeln und das war's. Und dann wird das Letzte, was wir tun werden und ich werde es nicht in der anderen Aussage tun, ist im Code widersprechen , dass wir J. Sohn Ah werden. Und wir haben nur das ist einfach eine Art ah ah, Standardstatusnachricht. Also Array-Status. Wir setzen es auf Null, und dann setzen wir die Nachricht gleich. E-Mail wurde nicht erfolgreich gesendet. Bitte versuchen Sie es erneut. Ok. Und das ist das Ende der Skripte, die wir hier nicht tauchen werden. Also im Wesentlichen, was hier passiert ist, wenn wir all diese Prüfungen haben, die wir durchlaufen, wenn Sie es wissen, wenn einer von ihnen scheitert, wenn diese Bedingung erfüllt ist, die im Grunde bedeutet, dass wir einen Fehler haben, Wir werden eine negative Nachricht zurückgeben, eine negative Nachricht zurückgeben, eine negative Nachricht zurückgeben und dann versuchen wir, die E-Mail zu senden. Und wenn die E-Mail sendet eine positive Nachricht zurück und dann hier unten, irgendeinem Grund, jemand verrückt und es macht es durch die Schecks, aber nicht die E-Mail oder irgendetwas anderes zu senden . Grundsätzlich werden wir zurückkehren. Und eine negative Nachricht, die besagt, dass die E-Mail nicht erfolgreich gesetzt wurde. Okay, das ist das PHP-Skript. Und wieder, wir werden letztendlich keine Leute dorthin schicken. Wir werden Java-Skript verwenden, um eine Abfrage zu senden Ajax-Anforderung und diese Statusmeldungen , die Jason codiert werden. Wir werden die in RJ Query packen, und dann werden wir die in RJ Query verarbeiten. Und das wird die Nachricht hier unten zeigen. Wenn also jemand Smith diese Form hat, werden sie diese Seite nie verlassen. 12. Den Kurs aus AJAX Processing erstellen: Ich kündigte Zeit, um RJ-Abfrageskript zu erstellen, das verarbeitet wird, werden hier gebildet. Also werden wir zu unserer Datei kommen, dass wir bereits Freiberufler haben, gibt es einen Punkt Js und wir werden in die ready-Funktion gehen, die wir bereits hier erstellt haben, nur weil nicht wirklich jede Verwendung beim Erstellen eines anderen. All das. Ah, Jake, Rail. Laden Sie einfach, sobald das Dokument fertig ist. Also, äh, wir werden es einfach hier reinlegen, und wir werden es jetzt tun. Du könntest das analysieren. Ich glaube, ich habe das schon erwähnt. Das ist für das Menü. Jetzt mache ich das Formular. Sie könnten zwei verschiedene JavaScript-Dateien erstellen, so dass das etwas portabler wäre. Fühlen Sie sich frei, das zu tun, wenn Sie wollen. Ähm, also werde ich sagen, dass wir einen Submit-Handler an das Formular anhängen. Was auch immer. jedoch Das machtjedochSinn. In Ordnung. Also, wieder, wenn Sie nicht mit Jay Career vertraut , empfehle ich , wie, ich werde nicht tun. Ah, Jake Ray 101 hier. Also, wenn Sie also mehr über Jake erfahren möchten, empfehlen, Kurs zu finden und zu nehmen, dass ich derzeit keine habe. Ähm, aber vielleicht sowieso runter, werde J Abfrage aufrufen und wir werden suchen, ob wir Formulare auswählen oder kontaktieren. Wir haben unserem Kontaktformular eine Klasse von Kontaktformular gegeben, und so werden wir wählen, dass, und dann werden wir tun Punkt senden. Das ist also eine J-Abfragemethode. Also beim Absenden des Formulars, dann werden wir eine anonyme Funktion erstellen und ein Ereignis eingeben, so dass wir das Ereignis anvisieren können , und dann werden wir Dinge innerhalb dieser anonymen Funktion tun. Alles klar, also mal sehen, was? Unsere Fehler. Unerwartetes Token. Okay. Ja, ich, also haben wir das Token hier oben gelegt , und so rufen wir es hier unten an. So weiter. Eigentlich ein Teil davon sein, weil das nur einen haben sollte, der hier unten sein sollte. Genau. Sicher. Was? Ich habe dort falsch getippt, aber das schloss tatsächlich die Klammern als die Klammern. Da. Okay, Amy , so sollte es aussehen. Also haben wir unsere Unterlage. Jetzt erstellen wir eine anonyme Funktion innerhalb dieser Klammern, und hier werden wir unser Formular behandeln. Das erste, was wir tun müssen, ist, dass wir die Form stoppen müssen, tatsächlich ein wenig Platz hier geben. Wir müssen verhindern, dass das Formular normal einreicht. Richtig? Also wollen wir verhindern, dass es einreicht und tatsächlich zu dieser PHP-Seite erstellt wird, weil wir es über Ajax tun werden. Wir werden Ereignis Punkt verhindern Standard. Also wieder, dies ist eine Art Jaqui-Methode, die nur dieses Ereignis annehmen wird, das wir übergeben haben. Also klickte die Schaltfläche auf das Formular senden. Es wird das nehmen und es wird die Standardaktion verhindern, die das Formular an die U. R L im Aktionsskript absendet. Es wird also verhindern, dass das passiert, also ist es das erste, was wir tun müssen. Dann werden wir die gesendeten Formulardaten serialisieren und die Aktion erhalten, die im Wesentlichen die URL ist. Okay, also zuerst werden wir eine variable Zielform erstellen, und wir werden es gleich setzen, was das in diesem Fall ist, seit wir eingereicht haben, haben wir es getan. Wir machen das bei der Einreichung. Es ist die Form. Also werden wir, ähm, das ist, warum wir gleich zu Form setzen, das wird uns das Formularelement von unserer Seite geben . Okay. Und dann werden wir bekommen, sind Sie anderswo in se. Du bist l gleich, ah-Form. Wir gehen in eine Formularvariable, die wir gerade Punktadder erstellt haben. So Attribute und Aktion. Ähm okay. Also im Wesentlichen, was das tut, ist es, dass wir in das Formular gehen, das eingereicht wurde, oder? Weil wir das auf Zement gemacht haben. Wir werden in das Formular gehen, das eingereicht wurde, und wir gehen in dieses Formularelement, und wir werden die Aktion erhalten, den Wert des Aktionsblocks , der Prozess Punkt PHP ist. Also, das ist, was diese Variable sollte gesetzt werden. Der Grund, warum wir das tun, ist, dass wir greifen können, wissen Sie, es könnte mehrere Formulare geben, die von diesem J Abfrageskript verarbeitet werden, und so werden wir das eigentliche Formular oder das eigentliche U R l aus diesem bestimmten Formular, Welches auch immer passiert ist. Es macht das einfach ein bisschen modularer . In Ordnung. Als nächstes gehen wir zu Ah, ich mache diese sehr Berberschalen, aber wir werden die Daten per Post senden. Also gehen wir zu Variable und wir werden Posten gleich tun, und wir werden das gleich Punkt Post setzen. Dies ist also eine wieder verletzte Cory Methode. Du bist l Also lasst uns Euro. Wir haben gerade so werden wir die Post-Methode ist im Wesentlichen eine Abkürzung für die Verwendung von Ajax innerhalb der J-Abfrage. So wird dies zu schaffen gehen, um diese Daten zwei zu posten. Wir werden etwas zu dieser R l posten und dann müssen wir ihm sagen, was wir posten sollen. So werden wir tun Form von oben Form Variable Chazal gebildet, unsere gesamte Form Punkt serialisieren. Was Serialize also tun wird, ist im Wesentlichen alle Daten im Formular zu nehmen. Also alle Ah-Felder, die hier ausgefüllt wurden, werden diese nehmen und diese serialisieren , so dass sie sein können Es ist einfacher, als Postdaten zu übergeben. Okay, das ist es, was das tut. Und dann müssen wir es jetzt tun, damit das eigentlich ist, was ich meine. Diese Zeile genau dort ist, was tatsächlich die Postdaten sendet. Wie Sie sehen können, ist es ziemlich einfach und unkompliziert auf diese Weise, Jake macht sich Sorgen. Ich meine, ich weiß, dass viele Leute seit einigen anderen Dingen weitergezogen sind, und ich bin sicher, dass sie ähnliche Dinge machen, aber immer noch ziemlich praktisch im Moment. Wir werden die Ergebnisse eintragen. Ah, div. Okay, also werden wir posten. Deshalb haben wir die obige Variable gepostet. Also können wir jetzt auf diesen Punkt Don verweisen. Also, wenn es fertig ist, wann? Wenn das hier fertig ist, werden wir das ausführen. Und so werden wir funktionieren und werden Daten wie diese machen. Und jetzt werden wir im Wesentlichen darin, wenn die Aufführung fertig ist und wir haben eine Antwort von Ajax zurück. Jetzt werden wir diese anonyme Funktion ausführen, und es Was wir zurückbekommen, sind die Daten, die wir von unserer Anfrage zurückbekommen haben. Und so werden wir variable Antwort tun und sagen, dass gleich Punkt und wir werden Jason analysieren , weil Sie sich erinnern, wir, was wir eingereicht haben. Ah, was wir zurückschicken, ist Jason. Wenn wir PHP-Skript erstellen, haben wir Jason behalten und alle unsere Antworten codiert. Deshalb ist es einfacher, mit innerhalb von Ajay Kori zu arbeiten, werden wir Teile, die und dann werden wir Ziel gleich machen und Statusmeldungen machen. Okay, also haben wir dort ein paar Dinge getan. Wir haben unsere Daten analysiert und die Antwort hier gleich gesetzt. Und dann haben wir unser Ziel. Erinnern Sie sich an div mit Statusmeldungen. Also haben wir das sehr gut eingestellt. Dies ist nur das Setzen von Variablen. Wir haben noch nichts getan, also haben wir Parstar Jason und setzen das gleich Antwort. Und jetzt haben wir unser Ziel gesetzt, wo wir diese Daten aufrüsten wollen. Und jetzt werden wir Ad-Erfolg Slash Luftklassen zu tun. Okay, also fügen wir die Klassenmitglieder hinzu. Also werden wir das tun. Ähm, in J. Corey. Also, was wir tun werden, wird tun, wenn Antwortpunktstatus. Denken Sie daran, die Antwort hat, was wir zurück haben. Und denken Sie daran, dass wir ein Array mit einem Status und einer Nachricht zurückgeschickt haben. Also überprüfen wir jetzt den Status, den wir in unserem Array erstellt haben, wann und dann, dass wir Jason in unserem PHP-Skript codiert. Also, wenn Antwort Punktstatus und wir werden sagen, wenn das gleich eins ist, richtig. Denken Sie daran, wir hatten eins als einer von ihnen und Null wie der Rest von ihnen. Das ist also gleich eins. Es gab Do target dot remove class error, nur für den Fall, dass, uh, äh, die Luftmeldung war schon da drauf. Richtig? Vielleicht senden sie das Formular ein, erhielten eine Luftnachricht, und dann haben sie wieder eingereicht und sie erhalten eine Erfolgsmeldung. Wir möchten sicherstellen, dass die Luftmeldung entfernt wird. Sonst ist es nur, dass diese Statistikmeldung Dave beide Klassen haben wird. Okay, also müssen wir die Luftnachricht entfernen, und es ging zur Zielpunkt-Add-Klasse und wir werden Erfolg machen. Also werden wir die Erfolgsmeldung hinzufügen. Okay? Also, im Grunde, wenn das, was wir von einem PHP-Skript zurückbekommen, es eine erfolgreiche Antwort ist, dass wir die Luftklasse aus der Nachricht des Personals entfernen , Div. Und wir werden die Erfolgsklasse hinzufügen. Okay, sonst, wenn Antwortpunktstatus und Sie wahrscheinlich einfach anderes tun könnten. Aber ich bin hier sehr explizit. Antwortpunktstatus. Wir überprüfen, dass Dasselbe gleich Null Nacht ist. Also, wenn ein gleich Null ist, dann werden wir Ziel Punkt entfernen Klasse und Erfolg tun. Dieses Mal werden wir die Erfolgsklasse verschieben, weil dieses Mal es gescheitert ist und wir Ziel Punkt hinzufügen Klasse Luft. Okay, das fügt unsere Luftbotschaften dort hinzu. Es ist also nur das Hinzufügen und Entfernen einer Klasse. Wir haben diese Klassen bereits auf unserem CSS erstellt. Und das letzte, was wir tun werden, ist, dass wir die Nachricht auf den Kopf stellen. Also werden wir Ziel machen. Denken Sie daran, dies ist, dass wir setzen Ziel gleich Statusmeldungen sind unser Block hier, so Ziel leeren Punkt anhängen. Also ist es im Grunde leer, es alles zu entfernen. Wenn irgendetwas drin ist, bevor es es es entfernen wird, werden wir schreiben, wir werden die Nachricht beantworten. Also die Nachricht, die wir in unserem PHP-Skript für unseren Ray erstellt haben, und sie wollten verstecken und so ist das nur ein Defekt. Ich will 400 machen. Okay. Also, das im Wesentlichen, was das tut, ist, dass es angehängt wird. Es wird alle Nachrichten da drinnen verschieben. Es wird die neue Nachricht aufbringen, dass wir sie gerade bekommen haben. Es versteckt es und verblasst es dann. OK, also ist es im Grunde, dass es erlaubt, in rechts zu verblassen, so dass es diesen Effekt erzeugt. Und das ist es, was, wenn wir all das haben, nein, dann haben wir das. Wenn wir hier rüber kommen und wir Nein sagen, wird John Lhasa ein paar Sachen ausfüllen und wir jetzt ist es Red sagt nicht über E-Mail. Wir sagten, Erhalten Sie Zitat jetzt Es hat sich geändert. Es verblasste wieder und all das, wenn wir hierher kommen und mögen, G keine gültige E-Mail und dann bekommen wir keine gültige E-Mail. Also, das ist, was all diesen Effekt Toe passieren lässt, ist diese j Abfrage hier und das Verstecken und das Fading in der Antwort und so weiter. Das war's also. Das ist alles für die J-Abfrage hier drin. Also wieder ziemlich unkompliziert. Wenn du nicht vertraut bist, Jake Ray, vielleicht ein bisschen schwer zu folgen. Ah, ich empfehle, Sie wissen, Kurs zu finden, Andrzej Karriere oder so, oder einfach nur gehen Sie zurück durch oder r.. Verweis auf den Quellcode. Was auch immer Sie tun müssen, um dies für Sie zu erledigen 13. Erstelle die Smooth Scroll JQuery Animation: Was ich jetzt tun möchte, ist das reibungslose Scrollen. Also, wenn wir uns das hier ansehen Ah, und wir klicken auf einen dieser Links hier, wenn wir auf Sie bemerken, dass sie nur Art von Flash zu jedem Abschnitt und unser Original Wir hatten einige. Wir hatten eine glatte Schriftrolle. Also möchte ich hinzufügen, dass es hier ein paar verschiedene Teile gibt. Das erste, was wir tun werden, ist, dass wir das Ziel sind, sind das eigentliche Ereignis. Und so müssen wir mit unseren Selektoren beginnen. Wir werden Menü mav Element tun, und dann gehen wir zum Anker-Tag für ah, das ist so erinnern in unserem Menü, jeder dieser Listenelemente in dieser auf geordnete Liste wird das Klassenmenü naff Element gegeben, und dann sind wir nur referenziert den Anker-Link, die das Anker-Tag darin. Also tun wir das und dann gehen wir weiter in dem Fall, wo nach klicken. Also, wenn einer dieser Links klickt, dann werden wir etwas tun, und was wir tun werden, ist, dass wir eine nicht-anonyme Funktion erstellen, die das tun wird , was wir tun wollen. Alles klar , und wir müssen das loswerden. Wir müssen das hier runterlegen. In Ordnung. Okay, das ist also unser Selektor. Und unser Event-Handler richtet sich an unsere Veranstaltung. Und so müssen wir jetzt ein paar Dinge damit machen. Also zuerst werden wir einige Variablen setzen, denen wir das gleich setzen werden, sind dieses Objekt, das nur damit wir es mehrmals referenzieren können und J Coury muss nicht zurück in den Dom gehen. Es ist nur eine Performance-Sache. Und dann gehen wir zu Wir brauchen unsere h ref zu bekommen. Also sind eine Falle für diese sind die Es wird Pfund über Pfund Fähigkeiten sein, Pfund Portfolio. Wenn Sie sich erinnern, wann die Liquiditätsabteilung wir ihm ein Id gegeben haben , das mit dem übereinstimmte, was in unserer Speisekarte hier steht. Deshalb, wenn wir auf diese klicken, funktioniert es jetzt, zu jedem zu gehen. Also, ah, aber wir brauchen für unsere Zwecke. Wir müssen uns das schnappen. Also werden wir tun, äh, ich werde darüber reden, warum hier in nur einer Sekunde, wir gehen zu einem Entwurf gleich und sie wollten referenzieren Sind diese Ah, Variable und dann werden wir Adder machen, und wir werden Tun Sie einen Treff. Okay, also was das tut, ist es im Grunde, das Pfund zu packen, um Fähigkeiten zu schnappen, die eine Reise, äh, Attribute von dem, was auch immer Klicks war. Wenn Sie über als h klicken, wird ein Entwurf auf Pfund eingestellt, wenn Sie Fähigkeiten klicken, um zu Pfund Fähigkeiten eingestellt zu bekommen und so weiter. Okay, also sagte das einige Variablen, die brauchen werden. Und dann ist das erste, was wir tun werden, fakultativ. Also werden wir das Knave-Menü umschalten. Also gerade jetzt, wenn wir auf einen Link klicken, bleibt dieses knave Menü hier drüben. Okay, Also habe ich das geschrieben, und ich würde sagen, wahrscheinlich ist das beabsichtigte Verhalten, das ich bevorzuge, dass, wenn Sie auf eines dieser klicken , es scrollt zum Abschnitt im Menü schließt. Weil ich in meinem Kopf davon ausgegangen bin, dass jemand, wenn er auf einen Abschnitt klickt, ihn tatsächlich lesen will. Und wenn sie dann wieder auf das X klicken müssen, ist das so, als wäre es ein zusätzlicher Klick. Also machen wir weiter und schließen es für ihn. Du darfst mit mir nicht einverstanden sein. Das ist in Ordnung. Wenn Sie das nicht tun möchten, Wenn Sie das Menü in einem Element nicht schließen möchten, wird geklickt, dann fügen Sie einfach nicht diesen kleinen Abschnitt hier unter Knick-Menü vor dem nächsten glatten Scroll-Abschnitt . Aber ich wollte dir zeigen, wie es geht, falls du das tun willst. Also, was wir hier tun müssen, ist im Wesentlichen nachahmen, was wir hier oben mit unserem Toggle, unserem Menü und unserem Menü-Toggle getan haben, aber nur das Entfernen Teil. Okay, also werden wir tun, ist, dass wir Menü umschalten, und dann werden wir tun Punkt entfernen Klasse schließen. Okay, wenn dieses Menü geöffnet ist, wird der Schalter. Hat die Klasse in der Nähe hinzugefügt und dass wir einige Animation haben, die damit einhergeht. Und wenn wir diese Klasse entfernen, dann wird das entfernen. Dieser Umschalter, und dann kommen wir hier runter. Wir werden diesen Punkt tun Eltern dieses wieder verweist auf den Menüpunkt Anker-Tag, der angeklickt wurde . Also, wann Eltern nicht Eltern, sondern Eltern? Und dann machen wir Menü. Wir werden Ah tun, knave Artikel und wir werden Menü knave tun und Menü tun. Okay, also imitieren diese hier oben, wenn wir die Elemente erscheinen, die wir die Show Klasse zwei hinzugefügt haben. Wenn wir das umschalten, sind wir jetzt nur die gleichen. Aber jetzt, was wir tun werden, wird die Klasse entfernen, und wir werden zeigen, damit wir diese Klasse entfernen, und das wird dazu führen, dass das Menü geschlossen wird. OK, also wieder, das ist nur die Schaffung dieses Effekts, dass, wenn wir hier auf eines dieser Elemente klicken, es wird das Menü schließen. So sehen Sie, jetzt schließt sich das Menü, als hätten wir diesen X-Button gedrückt. Wenn wir hier erneut auf eines dieser Elemente klicken, wenn Sie dieses Verhalten nicht möchten, entfernen Sie einfach diese Zeilen hier. In Ordnung? Das letzte, was dann, dann, ist das reibungslose Scrollen und das reibungslose Scrollen ist eigentlich ziemlich unkompliziert. Also werden wir unsere Routenvariable referenzieren, die wir erstellt haben, bevor erinnern, erscheinen Route. Ah, ein Lächeln-Körper. Also werden wir darauf verweisen und wir werden eine Animation machen, also werden wir animieren und dann werden wir einige Optionen für unsere Animation haben. Das erste, was wir tun wollen, ist, dass wir angeben wollen, was unsere Animation ist. Wir werden nach oben scrollen. Das wird also unsere Animation sein, und wir müssen ihr sagen, wo wir scrollen werden. Also werden wir auf H ref verweisen, die wir hier erstellt haben, die sich an Pfund über Pfund Fähigkeiten erinnert und Abschnitte sind. Habe diese ich ds. Dies emuliert im Wesentlichen Emily, was Sie passieren würden, wenn Sie kein Javascript daraus haben und Sie darauf klicken würden, außer dass es den Prozess animiert. Dann fügen wir Offset hinzu. Also wollen wir Offset hinzufügen, und wir werden Top minus 100 tun. Also im Wesentlichen, was das tun wird, ist, wenn wenn einer dieser was das tun wird, ist, wenn wenn einer dieser Luchse angeklickt hat, wir die Schriftrolle animieren, oder? Luchse angeklickt hat, wir die Schriftrolle animieren, Und wir werden scrollen. Immer noch ganz oben drauf, was auch immer. Acht. Ref war Kochschule oben in diesem Abschnitt, aber wir werden einen Offset an der Spitze von minus 100 Pixeln hinzufügen. Also im Grunde, wenn Sie es anklicken statt des Abschnitts hier, scrollen Sie rechts an den Anfang des Browsers, wie das wird Ihnen etwa 100 Pixel geben. Okay, das ist es, was das wieder tut. Sie können in Ordnung sein, damit es direkt nach oben geht. Oder Sie wollen vielleicht 400 Bilder von dem, was auch immer es für Ihre Situation ist, aber ah, das ist genau das, was ich hier gewählt habe. Okay, das ist also so eine Art von Einrichtung der Animation. Jetzt müssen wir sagen, wie lange es dauern wird. Also machen wir 500 Millisekunden. Sie ist etwa eine halbe Sekunde, und dann werden wir eine weitere anonyme Funktion anhängen, und wieder, das ist irgendwie optional. Aber ich denke, es macht Sinn in dieser Situation. Dies funktioniert ohne diese anonyme Funktion hier. Aber was das tut, wenn wir Window Dot Location Dot Hash tun, ist Atem gleich. Ähm, also was? Was passiert? Ich mache das wirklich schnell und gut, ich muss hier etwas hinzufügen, aber ich werde darüber reden. Also, wenn wir das hier nicht hinzugefügt haben, was passieren würde, wenn wir auf einen dieser Links klicken, ist wir würden zu ihm scrollen und alles wird funktionieren. Finden Sie diesen Weg. Aber es würde das ah-Hash-Tag oder den Hash nicht bis zum Ende der URL aufrüsten. Und so, indem Sie dies tun Was passiert ist, hängt es ab, wenn Sie darauf klicken, es legt Pfund über am Ende der URL Pfund Skills Pfund Port-Portfolio, etc.. Also imitiert es das Standardverhalten, weil das standardmäßig passieren würde, wenn Sie keinen Job hätten, ein Skript an irgendetwas davon angehängt. Also denke ich in diesem Sinne, dass das sinnvoll ist, das Standardverhalten auf diese Weise nachzuahmen. Je nachdem, ob Sie dies für eine andere Anwendung verwenden, als Sie dies vielleicht tun möchten oder nicht , also hängen Sie davon ab, was Sie tun. Sie können diesen Teil hier hinzufügen oder nicht, und dann ist das letzte, was wir hier tun müssen, Rückgabe false, und das wird sicherstellen, dass das Standardverhalten, wenn Sie auf einen dieser Links klicken nicht geschieht. Okay, wenn wir jetzt hier reinkommen, klicken wir auf Fähigkeiten, die du sehen kannst, dass wir diese glatte Schriftrolle bekommen. Wir haben unsere 100 Pixel hier, und wenn wir zum Portfolio gehen, schließt das gleiche Menü. Kontakt, usw cetera gehen wieder auf über und so das gibt uns unsere reibungslose Schule. Nun, wenn Sie nicht mit Jake Abfrage vertraut sind. Wenn diese Art von Ihrer ersten Einführung in Jake Ray, könnte dies wahrscheinlich wieder ein wenig überwältigend sein. Ich würde empfehlen, wissen Sie, E J Corey-Klasse zu nehmen oder das wieder durchzugehen, denn wenn Sie es wissen, ein bisschen Jake, wo das eigentlich ziemlich unkompliziert ist. Das ist ein hübsches Ah, ich will nicht einfach sagen, aber es ist ein ziemlich Standard-Zeug, wenn es um Jake Worry So geht. Aber hoffentlich zeigt dir das, wie du das machst. Und Sie können das irgendwie für jede Situation, in der Sie sich befinden, funktionieren lassen. 14. Baue den Footer auf: Alles klar, du hast es geschafft. Wir sind bis zum letzten Abschnitt hier. Ich weiß, dass etwas davon wahrscheinlich ziemlich dick ist. Ich empfehle nur, vielleicht zurückzugehen und mit ein bisschen von hier zu arbeiten, ein wenig Probleme zu haben, lange zu fallen. Aber wir sind bis zum Fußzeilenabschnitt. Das hier ist eigentlich ziemlich einfach und unkompliziert. Also werden wir Footer machen. Und genau wie die Kopfzeile gehen wir zur Klasse gleich Site-Fußzeile wie diese und wir werden wie immer tun, Div Class entspricht Container. Hat Div Klasse gleich Zeile Und dann werden wir div Klasse gleich machen und wir werden einen Anruf 12 machen und wir gehen zum Textcenter. In Ordnung, und dann wird das drinnen reichen. Ich mache hier nur eine urheberrechtliche Sache. Natürlich, Ändern Sie dies für Jahr. Ihre Website wird tun und kopieren. Das gibt uns das Urheberrecht. Scrollen Sie hier nach unten, damit Sie sehen können, dass wir unten sind. Klären Sie hier runter und kopieren Sie es. Und ich werde 2018 auf 18 Joe Freelancer machen. Oh, in Ordnung. Reserviert so. Und das ist es so ziemlich. Das ist die Fußzeile. Wir müssen es nur an dieser Stelle stylen. Also gehen wir. Das werde ich sagen. Und dann gehen wir hier rüber in unser CSS und lassen mich meinen Teiler hier greifen. Also gibt es unseren Teiler und wir werden nur Site-Fußzeile tun und wir werden tun, Auffüllung 20 Pixel. Schule nach unten, so können Sie sehen, dass So klopfen 20 Pixel Hintergrund tun und wir werden dio zwei d zwei d zwei d zwei d, nur ein wenig anders grau. Und dann werden wir Farbe Nummer 999 Richtig, So dass gibt uns ziemlich viel sind unsere letzte Fußzeile dort. Hoppla, du gehst und speicherst das. Alles klar, das gibt uns irgendwie unsere letzte Fußzeile dort. Ah, und das. Ich meine, das ist wirklich alles da. Da ist es. So ziemlich schnell man hier alle Ah, springen zu einer Abschlussstunde danach und wir könnten über einige Dinge sprechen, die wir im Hinterkopf behalten können, weiter von hier aus 15. Kursprojekt und Abschluss: In Ordnung. So hoffentlich habt ihr Jungs und den Kurs genossen. Wenn Sie es täten, würde ich es schätzen, wenn Sie mir eine Rezension auf dem Kurs hinterlassen würden. Ich helfe mir wirklich aus. auch, Vergewissern Sie sichauch,dass Sie mir auf meinem Profil folgen, damit Sie sehen können, wann ich neue Kurse veröffentliche und auch einen der Kurse, die ich dort habe. Wissen Sie, ich habe Anfänger's Guide to PHP haben HTML Course Objekt. Haben Sie irgendeine Programmierung? Eine Reihe von Web-Entwicklungskursen. Ah, einer meiner beliebtesten Kurse ist das Freiberufler auf Hocharbeitskursen? Also, wenn Sie in das und so weiter kommen wollen, Also wieder, fühlen Sie sich frei, diese aus und tauchen Sie alle von denen, die Sie ah, so gut wie für diese lernen wollen, wissen Sie, eines der Dinge, die Ich kann mir vorstellen, das durchzugehen ist, dass Sie wissen, einige dieser Sachen, wenn Sie oft Leute in die Web-Entwicklung kommen, so weiter, sie können CSS wirklich gut lernen. Aber vielleicht nicht. Weißt du, Jake, wir sind Java-Skript so viel oder was auch immer. Eigentlich bin ich in einem ähnlichen Boot, weißt du. Ich weiß es. J-Abfrage gut genug, aber Javascript ist wirklich nicht etwas, das ich schwer in eine Art mehr getaubt habe, ging den PHP-Pfad hinunter . Ah, und wenn du so etwas hast, denke ich, dass du den Verstand behalten musst, ist, dass es es fair kombiniert. Sag nicht voraus, aber notwendigerweise ist es ein aggressives , HTML, CSS, JavaScript und PHP. Und wenn du all diese verschiedenen Sprachen zusammenbringst, dann kennst du vielleicht nicht jede einzelne von ihnen so gut wie du dachtest oder war du willst oder was auch immer. kennst du vielleicht nicht jede einzelne von ihnen so gut wie du dachtest oder war du willst oder Und so natürlich kann sich das natürlich vielleicht ein bisschen überwältigend anfühlen. Und es gibt ein paar Dinge, die ich hier wiederholen möchte, dass ich sie gesagt habe, aber eins ist, weißt du, wenn das der Fall ist, einfach einfach weitermachen und weiter damit arbeiten und so weiter, und ich denke, ich werde anfangen, mehr Sinn zu machen. Die zweite Sache jedoch ist jedochund irgendwie. Der Punkt, warum ich dieses Video machen wollte, ist, dass es wirklich wichtig ist. Projektbasierte Kurse wie diese sind nett, weil Sie lernen müssen, wie man etwas baut, das Sie wissen, real, und sie machen Spaß und so weiter. Aber wenn Sie die Webentwicklung wirklich meistern wollen, möchten Sie wirklich gut darin sein, und Sie wollen wirklich eine bestimmte Sprache beherrschen. Sie müssen wirklich in eine sprachspezifische Art von konzeptspezifischen Kurs eintauchen. So etwas wie mein Beginner Guide to Ph. Pierre, mein Anfänger's Guide to HTML, diese Arten von Kursen. Sie sind nicht unbedingt so lustig oder als Zitat unquote sexy wie ein projektbasierter Kurs wie dieser . Aber das ist eigentlich, wie man reinkommt und diese Sprachen wirklich beherrscht. Und es sind diese Dinge, die Leute nehmen, um zu dem Punkt zu kommen, wo sie ein Projekt wie dieses machen können , ohne Zeh , weißt du, ohne dass eine Bestie super überwältigend ist und so weiter. Ich meine, als ich mich hingesetzt habe und das gemacht , habe,muss ich immer recherchieren und Dinge nachsehen. Aber ich habe den allgemeinen Kern in jeder Sprache von dem, was ich tun wollte. Und das ist, weil ich ah sprachspezifische Kurse auf all diesem Zeug genommen habe, und ich habe die tatsächlichen einzelnen Sprachen in der Tiefe selbst gelernt und sie auf einem Tag zu Tag verwenden . Also hatte ich eine ziemlich gute Vorstellung von dem, was ich tun wollte. Also noch einmal, ich möchte Sie nur ermutigen, nicht in Onley gefangen zu werden, um projektbasierte Kurse wie diese wieder zu nehmen . Sie sind lustig. Sie sind großartig. Ich denke, wenn Sie einmal durch einige der sprachspezifischen Kurse gehen, als projektbasierte Port-Kurse wie diese sind wirklich gut nächsten Schritt zu machen. Denn jetzt erlaubt es dir, all diese Art von Wissen, das du gesammelt hast zu etwas zusammenzufassen. Aber, äh, wieder, wissen Sie, wenn Sie wirklich Sprache beherrschen wollen, wirklich Web-Entwicklung beherrschen wollen, in diese sprachspezifischen Kurse einsteigen. Alles klar, das ist alles, was sie wirklich zu sagen haben, in dieser Verpackung hier oben wieder. Hoffentlich genossen wir den Kurs, den wir wieder gemacht haben. Ich schätze es, wenn Sie nochmal eine Rezension abgeben würden. Sie mir auch FolgenSie mir auchauf meinem Profil. Wenn Sie über andere Kurse informiert werden wollen und ich werde es tun, lassen Sie es mich wissen, wenn Sie irgendwelche Fragen in der Diskussion unten haben. Vielen Dank 16. Nächste Schritte: Ich bin ehrlich, dass es nicht mehr gibt. Also online.com, so wenig Hauswirtschaft, um diesen Kurs zu beenden. Wenn Sie es noch nicht getan haben, sollten Sie unbedingt zum Klassenbereich gehen. Es gibt einen Unterrichtsabschnitt für einige, einige Schritte, die Sie für diesen Kurs durchlaufen können. Stellen Sie also sicher, dass es sich unter der Diskussion auf der Registerkarte Projekte befindet, die Sie auf dem Kurs sehen werden. Außerdem, wenn Sie zu meinem Profil gehen, stellen Sie sicher, dass Sie mir ein Follow in meinem Profil hier geben , damit Sie benachrichtigt werden, wenn ich neue Kurse veröffentliche. Und ich habe auch eine laufende Art von wöchentlichen Podcast-Style-Kurs namens Let's Talk freiberuflich. Also, wenn Sie gerne Zugang zu laufenden Schulungen in Bezug auf Freiberufler und Online-Geschäft und so weiter haben möchten. Achten Sie darauf, das zu überprüfen. Lassen Sie uns auch freischaffende Kurse sprechen. Und schließlich habe ich einen täglichen Tipps-Newsletter auf meiner Website bei John Morris online.com. Wenn du dort drüben gehst, kannst du dich für diese Mailingliste anmelden. Sie werden auch in meine eigene, meine ganz eigene mobile App, oder Sie erhalten Zugriff auf über 78 Stunden kostenlose Inhalte zum Zeitpunkt dieser Aufnahme in Bezug auf freiberufliche und so weiter. Also, wenn Sie daran interessiert sind, BD sicher, dass auch überprüfen. Wieder, das ist John Morris online.com. In Ordnung. Danke, dass Sie den Kurs genommen haben. Wenn es dir gefallen hat, schätze ich dich für dich. Hinterlassen Sie mir eine Rezension und wir sehen uns im nächsten Kurs.