Handfertige eine 8-Bit-Website | Kalob Taulien | Skillshare
Drawer
Suchen

Playback-Geschwindigkeit


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

Handfertige eine 8-Bit-Website

teacher avatar Kalob Taulien, Web Development Teacher

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Intoduction

      0:39

    • 2.

      8-Bit installieren

      2:40

    • 3.

      Navigationsleiste

      2:22

    • 4.

      Raster hinzufügen

      1:38

    • 5.

      8-Bit-Willkommensballon

      2:57

    • 6.

      Zwei Spaltenlayout

      1:30

    • 7.

      8-Bit-Abschnitte

      2:10

    • 8.

      Dunkle 8-Bit-Abschnitte und Symbole

      1:50

    • 9.

      8-Bit Social Icons

      1:58

    • 10.

      Die rechte Spalte

      3:24

    • 11.

      Großer dunkler 8-Bit-Abschnitt

      2:30

    • 12.

      Großer light mit 8 Bit

      1:25

    • 13.

      8-Bit-Profilabschnitt

      5:57

    • 14.

      8-Bit-Abstand

      4:42

    • 15.

      Der Fußzeile

      1:26

    • 16.

      Projekt abschließen

      1:28

    • 17.

      Zusammenfassung

      0:39

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

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

288

Teilnehmer:innen

6

Projekte

Über diesen Kurs

Willkommen auf der Erstellung einer 8-Bit-Website!

Wir werden eine 8-Bit-Website im Retro-Stil entwerfen und codieren, die aussieht, als wäre es in die 90er Nintendo-Spiele passen. Du kannst diesen Kurs, Code und Design so anpassen, dass du es möchtest: eine Portfolio-Website, eine Hobby-Website oder eine resume-style Website. In diesem Kurs erstelle ich eine resume aber auf jeden Fall fühle mich frei, den Inhalt zu ändern! Wir werden super einfach HTML und CSS verwenden, um das für uns zu funktionieren.

*Du solltest mit dem grundlegenden HTML und CSS vertraut sein, um das Beste aus diesem Kurs herauszuholen. Beginners in HTML sind OK!

Triff deine:n Kursleiter:in

Teacher Profile Image

Kalob Taulien

Web Development Teacher

Kursleiter:in

Hi everybody! I'm Kalob Taulien.

 

Here's the TL;DR (short) version about me:

I have been coding since 1999 and teaching people how to code since 2013 I have over 350,000 web development students world-wide I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making system) I try my best to answer EVERY question my students have  I love teaching — it's definitely one of my natural talents  Also I love goats! (Great conversation starter with me if we ever get to meet in person)

Below you can find all my Skillshare courses. The categories go from easiest to hardest, except for the Misc. Coding Courses at the very end. 

If you're brand new to coding, start with BEGINNERS WEB DEV.&nb... Vollständiges Profil ansehen

Skills dieses Kurses

Entwicklung Programmiersprachen HTML
Level: Beginner

Kursbewertung

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

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

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

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

Lerne von überall aus

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

Transkripte

1. Intoduction: Hallo und willkommen bei der Gestaltung einer Achtbit-Webseite mit mir. Caleb. Colleen, ich werde es dir in der nächsten Stunde zeigen. Wie erstellen Sie eine Acht-Bit-Website wie diese mit einem benutzerdefinierten Grid-System mit einer Acht-Bit-Bibliothek ? Also sieht alles wirklich cool aus. Retro Auf diese Weise. Ich werde eine Lebenslauf-Website erstellen, aber Sie möchten vielleicht eine Hobby-basierte Website oder eine Portfolio-basierte Website erstellen. So oder so, Sie können alles in diesem Kurs an Ihre Bedürfnisse anpassen. Also, wenn diese Webseite für Sie ziemlich aufregend aussieht, kommen Sie mit. Ich würde Ihnen gerne zeigen, wie ich es gemacht habe, und wir fangen im nächsten Video an. 2. Installieren von 8-Bit: Alles in Ordnung. Hey, danke, dass du dich mir hierher angeschlossen hast. Wir werden anfangen, diese Seite von Grund auf neu zu erstellen. Das erste, was wir mit jedem Web-Entwicklungs-basierten Projekt zu tun haben, ist, dass wir unseren Editor öffnen müssen . Also verwende ich einen Editor namens V s Code. Es ist völlig kostenlos. Aber wenn Sie einen anderen Editor verwenden, können Sie auch etwas wie Adam oder erhabenen Text verwenden. Oder, weißt du, wenn dein bisschen mehr alte Schule kein Pad plus sogar Dreamweaver wieder cool ist, spielt es keine Rolle. Brackets ist ein weiteres beliebtes dafür. Ich werde jetzt V s Code verwenden. Zuerst brauchen wir unsere HTML-Vorlage, aber wir müssen diese Datei zuerst speichern. Also werde ich nur eine neue Datei erstellen und diese als Pit Dot True Nazi SS Start HTML speichern. Wir wollen eine HTML-Datei, und ich werde einfach eine brandneue HTML fünf Vorlage V s Code kommt mit einem schönen kleinen Abkürzung erstellen . Es erlaubt mir, html Colin fünf Hit Tab zu tippen, und es fühlt sich all das Zeug für mich aus. Also werde ich diesen Calebs Lebenslauf so etwas nennen. Es spielt keine Rolle, wie wir es nennen. Es kommt mit einigen automatischen mobilen ersten Inhalten, also im Grunde, wird dies auf Ihrem mobilen Gerät funktionieren. Das ist wirklich nett. Also lassen Sie uns voran und öffnen Sie diese Datei in unserem Browser. Ich benutze nur Firefox. Sie können Chrome verwenden ist eine feurige Alles, was Sie mögen, und wir sehen eine langweilige grundlegende Seite. Es gibt nichts Bemerkenswertes hier, also müssen wir nest dot CSS installieren. Also lassen Sie uns einfach voran und Google Nest Punkt CSS und es wird uns direkt hierher bringen. Dies ist die Seite, die wir wollen. Wir möchten auf das Read Me klicken, damit wir sehen können, wie wir es installieren. Genau. Google cool all das Zeug. Hier ist diejenige, die wir wollen. Wir wollen das Neueste. Also ist es eine Kopie, die das in unseren Kopf legt und nur als Beispiel, lasst uns voran gehen und, ah, ah, lasst uns einfach einen Teil dieses Codes kopieren, damit wir sehen können, dass es tatsächlich funktioniert. Was macht etwas wirklich bemerkenswertes hier? Knöpfe, Knöpfe oder auffällig? Also lasst uns voran gehen. Kopieren Sie das alles, und ich wollte das hier in meinen Körper einfügen. Aktualisieren Sie meine Seite und ha ha! Sieh dir das an. Wir haben einige acht Bit Styling bereits, Also innerhalb weniger Minuten, unsere Website beginnt bereits sehr acht Bit aussehen. Das ist wirklich, wirklich cool, aber es ist nicht genau das, wonach wir gesucht haben. Also gehen Sie voran und stellen Sie sicher, dass Sie nest dot CSS installiert haben. Ich benutze nur die Männer ified Version der neuesten Versionen, die wir die neuesten Updates bekommen, sobald Sie das installiert Kopf auf über das nächste Video und wir werden in der Navigationsleiste erstellen . 3. Navigationsleiste: Alles klar, willkommen zurück. In der letzten Lektion haben wir eine Reihe von Schaltflächen hinzugefügt, um sicherzustellen, dass unser Styling von nest dot CSS funktioniert. Jetzt müssen wir eine brandneue Navigation erstellen. Das ist also Typ. Jetzt lassen Sie uns hier ein grundlegendes Styling geben, also ist dies nur in der Reihe. CSS. Das ist irgendwie hässlich, aber wir können das auch ein wenig später in etwas überschaubareres hinausschieben. Lassen Sie uns eine Grenze unten drei Pixel. Solide C C C und lassen Sie uns einen Rand unten von ich weiß nicht, 60 Picks oder so etwas tun. Speichern wir das und aktualisieren Sie unsere Seite, und wir haben eine langweilige NAFO. Aber sieh dir das an. Wir haben auch einen netten kleinen Cursor dort, der ziemlich cool aussieht. Lassen Sie uns voran und fügen Sie den Namen der Website hier hinzu, so dass es H zwei Elemente erstellt. Und nennen wir das Caleb Holley, und du würdest es nennen, wie auch immer dein Name ist oder was auch immer, du willst es wirklich meins nennen. Ich werde nur ein bisschen ein Lebenslauf aussehende Website sein, und so sieht das nicht so aus, als ob es wirklich etwas tut, und wir wollen wirklich, dass Nest Schriftart. Also, wie bekommen wir diese Nestschriftart? Nun, wenn wir wieder in die Lese me gehen, sagt es uns genau, was wir brauchen, um dio. Gehen wir weiter und schnappen uns diese Linie hier. Und das wird einfach das gewünschte aus Google Funds gebildete installieren. Also drücken Sie Save Kopf auf über zu unserer Lebenslauf-Seite. Siehst du dir das an. Das sieht jetzt gut aus, nicht wahr? Nun, wenn wir hier reingehen, haben wir auch einige Symbole. Ich habe nach Symbolen gesucht und finde die, die ich gesucht habe. Aber sagen wir, ich wollte die Münze. Ich würde das Element inspizieren. Und das ist der HTML-Code, den ich mit dieser Klasse möchte. Vielleicht nicht die großen Klassen groß, aber das ist diejenige, die ich will. Also lassen Sie uns voran und fügen Sie das hier in die Kopfzeile ein. DIV-Klasse. Lassen Sie uns in den Klassen da drin und das sollte eigentlich kein Sprung sein, in dem es sein sollte . Ich habe das auf getrennte Zeilen gesetzt. Dies wird ein wenig lesbarer. Speichern und aktualisieren. Werfen wir einen Blick darauf, wie eine Seite jetzt aussieht. Okay, wir haben diese riesige Münze. Es ist zu groß. Ah, wir haben auch mittelgroß. Es ist immer noch zu groß. Wir haben klein zu klein, und dann haben wir nur Standard-Münze. Das ist das, was wir wollen. Genau da. Nun, diesem Zeitpunkt wollen wir das irgendwie zentrieren, aber wir haben nicht wirklich eine Möglichkeit, das zu zentrieren. Also im nächsten Video, werden wir ein Gittersystem hinzufügen. 4. Ein Gitter hinzufügen: Alles klar, wir müssen ein Gittersystem installieren. Also lassen Sie uns voran gehen und springen auf die Google-Maschine und geben Sie Flex-Box-Gitter und das wird uns geben. Grundsätzlich können Sie sehen, ob Sie mit Bootstrap vertraut sind. Es gibt uns Bootstrap-ähnliche Spalten, und alles, was wir tun müssen, ist ein wenig CSS hinzuzufügen. Wollen wir herunterladen? Nein. Gehen wir, um Hub zu holen. Mal sehen, was die Lese-Mich für uns hier drin hat. Ah, wir haben ein CDN, ein Content-Delivery-Netzwerk. Das ist diejenige, die wir wollen. Lasst uns das alles kopieren. Lassen Sie uns das auch in den Kopf unserer Seite werfen. Lass uns das nur ein bisschen kleiner machen und ich ziehe das nur ein bisschen um. Und so haben wir jetzt Nest aus CSS. Wir haben unsere Forint da drin und wir haben ein einfaches Gittersystem. Jetzt. Was dieses Grid-System uns erlaubt, ist, wenn ich einfach hier zurückklicke, können wir kleine Spalten wie diese erstellen. Wir können bis zu 12 Spalten erstellen und wir können ihnen sagen, in welcher Reihenfolge sie brauchen, um in wie breit sie dort sein müssen, automatisch reaktionsschnell, was wirklich schön ist. Also, wenn Sie an einem Drop in Grid Ersatz Flex-Box Raster interessiert sind, ist erstaunlich. Warum die Art, wie Sie es auch verschachteln können? Das ist ein großer. Wir werden ein bisschen mit uns arbeiten, Ähm, Ähm, s Also, wenn du nicht damit vertraut bist, ist das okay. Sie können immer zu Flex-Box Grid dot com gehen. Lassen Sie uns voran und aktualisieren Sie Ihre Seite. Wir sehen, dass nichts passiert ist. Also, wenn wir Visual Studio-Code öffnen und nur innerhalb unseres Knave hier fügen wir ein Container-Elemente hinzu. Das ist also nur ein div, und das wird einfach etwas Padding für uns hinzufügen oder ihr wirklich nur einen Inhalt geschickt wie wir wollen. Also ist es erfrischend. Und da gehen wir hin. Unsere Inhalte sind zentriert. Das ist also das Hinzufügen von Flex-Box-Gittern 5. 8-Bit-Begrüßungsballon: In Ordnung, lassen Sie uns weitermachen und ein wenig Einleitung hinzufügen. Ein kleines Foto von mir mit einer kleinen Blase, die Hi sagt. Mein Name ist Caleb etwas, irgendwas. Irgendwas. Also werden wir das erste Top erschaffen, das wir ursprünglich gesehen haben. Und in der Tat, so wird die finale Website aussehen. Also wollen wir diesen Abschnitt hier mit den kleinen Gesichtern erstellen sagt Hi, ich bin Caleb. Das ist alles über mich mit dem kleinen Herzen. Emoji, lass uns das jetzt erschaffen. Also, wenn wir unseren Code öffnen und unter unserem jetzt wollen wir einen neuen Container erstellen , Dies wird alle unsere Inhalte in der Mitte Formatierung enthalten halten. Wenn wir also schauen, wie alles nach links ausgerichtet ist und alles nach rechts ausgerichtet ist , wird das unser Container sein. Also, jetzt müssen wir eine neue Zeile hinzufügen. Dies ist aus unserem Flex-Box-Gitter. Dies ist der Rückgang der Gitterersetzung. Wir werden hier eine Spalte hinzufügen. Wir werden noch einen hinzufügen. Rufen Sie ihn hier an. Sagen wir, dieser wird ihn die Spanne nennen. Eine kleine Spannweite von neun. Ah, und vielleicht eine Säule mit einer extra kleinen Spannweite von 12. Und werfen wir einen Blick darauf, wie das aussieht links rechts, und lassen Sie uns eine Vorschau hier machen, links und rechts. Also, wissen Sie, keine große Sache hier. Wir können sehen, dass ein netter kleiner Funt stattfindet, aber es tut nicht wirklich etwas, was wir brauchen. Also, jetzt müssen wir gehen und ein Symbol finden hier. Nicht wirklich eine Ikone. Ich schätze, es ist passiert, dieser Kerl hier, lasst uns voran gehen und ihn untersuchen, und wir können uns den Quellcode hier ansehen, und wir können das einfach nehmen. Das ist es, was wir brauchen. Lassen Sie uns voran und fügen Sie das einfach hinzu und aktualisieren Sie unsere offizielle Seite eins, an der wir arbeiten , und wir haben einen kleinen Kerl, also ist das ziemlich cool. Und dann brauchen wir hier einen Ballon und wir wollen im Grunde genau das. Also lasst uns voran gehen und diese Zeilen kopieren. Setzen Sie das in den richtigen Abschnitt, und das wird Hallo sagen, Nesta bei CSS. Das ist ziemlich cool. Sieh dir das an. Wir kommen irgendwohin, aber wir wollten sagen, hallo, dass ich getötet werde. Das ist alles über mich. Also lassen Sie uns voran und fügen Sie das hinzu. Sagen wir, ich bin Caleb. Das ist alles über mich. Aber wir brauchen diese Herz-Symbol. Wo ist diese Herz-Symbol? Also weiß ich, dass es irgendwo hier drin ist. Wir können einfach mit der rechten Maustaste klicken, inspizieren oder , wissen Sie, wir gehen einfach hier rein, greifen diese Herz-Symbol Tempo Das harte Symbol da drin ist, ist dieses nicht groß, ich denke, wollen ist klein. Dies wird ziemlich klein sein müssen, um Ihre Schriftgröße hier zu entsprechen. So ha! Da ist es einfach so. Machen Sie uns auch einen Schritt größer. Und so bekommen wir diesen kleinen Top-Typ hier, diese kleine Blase. Und vergessen Sie nicht, dass Sie Ihr Skill-Share-Projekt mit Ihrem aktuellen Fortschritt aktualisieren können. Zeig mir, wie es kommt. Ich würde gerne Ihren Fortschritt sehen und Ihnen helfen, wenn Sie irgendwo stecken bleiben 6. Zweier Spalten-Layout: Ok. Als nächstes müssen wir eine Zwei-Säulensysteme erstellen. Wir haben unsere linken Spalten hier und dann haben wir unsere rechte Spalte hier. Also in der linken Spalte, wir haben Dinge zu tun. Wissen, wo diese meine Soziale und rechte Spalte Wir haben Front und Wissen zurück und Wissen, bauen Werkzeuge und frühere Erfahrungen. Lassen Sie uns einfach voran und richten Sie zuerst unser Layout ein. Dafür möchten wir nur unsere Datei öffnen. Lassen Sie uns voran und erstellen Sie wieder einen brandneuen Container, denn warum nicht? Und hier müssen wir eine neue Zeile erstellen. Denn wenn wir uns das alles hier ansehen, ist das eine Zeile, die direkt über geht, und es passiert. Haben Sie zwei Säulen. Also werden wir eine Zeile mit zwei Spalten im Jahr erstellen. Das ist Ah, lasst uns diese erste Spalte ein Medium von vier machen und vielleicht eine Spaltengröße, wenn sie klein ist, ist 12 und Spalte extra. Klein wird auch 12 sein. Und nur damit du es weißt, ich habe nur den CSS-Selektor und den neidischen Code eingegeben. Ich könnte einfach Tab in drücken und füllt es automatisch für mich mit einem Diff, also ist das ziemlich cool ist eine Abkürzung dort, und dann müssen wir hier im Grunde das Gegenteil tun. Wir brauchen Säule Medium Acht. Also wollen wir eine Spannweite von acht über für insgesamt 12 machen. Also, das sind vier hier, acht Jahre für insgesamt 12. So groß ist unser Netzsystem. Es gibt 12 Spalten in unserem Gittersystem und hier wollen wir auch cool tun, wie sie 12 Kohle überschüssige 12. Bindestrich 12. Das ist ein Recht, und das wird links sagen. Gehen wir und sehen Sie unsere Seite. Da gehen wir. Wir haben links und rechts. 7. 8-Bit-Abschnitte: Alles klar, Wir wollen hier einen kleinen Abschnitt hinzufügen, der Dinge sagt, die ich tue. Und für Sie könnte das anders sein. Also für mich bin ich ein Webentwickler, Webdesigner und ein Lehrer für Sie. Du könntest nur strikt sein, ah, Web-Designer. Oder vielleicht bist du ein manueller Machinist, und du magst einfach acht Bits Art Styling. Was auch immer es ist, Sie können den Inhalt so platzieren, wie Sie wollen. Ich werde meinen eigenen Lebenslauf machen. Aber, weißt du, Taylor, dein Zeh passt zu dir, so wie du auftauchen wolltest. Also Sie tun Sie, Lassen Sie uns voran und fügen Sie das Nein hinzu. Also in ihrem linken Abschnitt hier werde ich das Wort links loswerden, und ich möchte einen Ness Container mit dem Titel hinzufügen. Dies ist sehr waren meist Name. Also, das ist wirklich schön h drei. Lassen Sie uns auch sagen, dass es ein Titel ist und Dinge sagen, die ich dio Ich mag nur irgendwie sehen, wo ich traf. Also mache ich diese kleinen Inkremente und aktualisiere meine Seite. Also sagt es Dinge, die ich tue. Wir arbeiten an Abständen und all das Zeug ein wenig später für Jetzt wird es ein wenig eng aussehen , aber wir werden es am Ende ausräumen. Also haben wir hier einen Titel. Dinge, die ich tue. Lassen Sie uns hier einen neuen Devyn erstellen, einfach als Container,nehme ich an, und es schafft eine nehme ich an, neue Liste. Und so werden wir sagen, das ist, äh, Listen. Und dann geben wir ihm eine Nestliste und der ist Kreistyp, und wo ich das bekomme, ist, wenn ich einfach zur Dokumentation hier zurückgehe, haben wir eine Liste irgendwo hier drin. Wo sind Sie Listen? Dort gibt es Listen, und so Klassen. Listen über eine UL hier Nestliste ist Scheibe und dann nur normale Verbündete, und Sie können tatsächlich sehen, dass ich hier einen Fehler gemacht habe. Dass diese UL sein sollen, ist keine Dibs. Und lasst uns einfach weitermachen und einen regelmäßigen Verbündeten schaffen. Also werde ich meinen ersten Punkt sagen, ich bin ein Webentwickler. Ein weiterer Verbündet-Listeneintrag. Ich bin auch Webdesignerin. Lass uns einen anderen Verbündeten erschaffen. Ich bin auch Lehrerin. Gehen Sie zurück zu unserer Seite und geben Sie diesem eine Aktualisierung. Es war nicht ganz so, wie wir es erwartet hatten. Irgendetwas stimmt hier drinnen nicht. Und das bedeutet nur, ich habe eine Art von irgendwo ist Kreis. Das ist der eine kleine Tisch da. Hit. Aktualisieren. Da gehen wir hin. Wir haben kleine Kreise. 8. Dunkle 8-Bit-Abschnitte und Symbole: Alles klar, als Nächstes, lass uns weitermachen und erschaffen. Bemerkenswert ist hier drin. Das hier wird dunkel sein und hat ein bisschen mehr Zeug hier drin. Also lassen Sie uns voran gehen und das Styling ändern. Anstatt einen weißen Block zu verwenden, werden wir einen schwarzen Block verwenden, und wir wollen nur, dass das unter den Dingen liegt, die ich tue. Also sind wir immer noch in der linken Spalte hier. Was ich tun werde, ist das hier zusammengebrochen und ich werde einen weiteren Nestcontainer mit Titeln erstellen . Dies ist nur CSS ist dunkel Hit Tab Auto fühlt sich für mich. Das ist ziemlich cool. Lass uns weitermachen und uns einen Titel geben. Also H drei Punkt-Titel und sagen No Worthy ist Hey, schau dir das an. Also haben wir wieder einen schwarzen Abschnitt. Der Abstand und hier sieht nicht wirklich sehr schön aus, aber wir werden das am Ende reparieren, weitermachen und einen weiteren Container erstellen, nur um der Container aufsteigen Dinge willen. Jetzt möchte ich hier ein kleines Symbol erstellen, also ist es das I-Symbol. Dot ist klein, weil ich ein kleines möchte und ich ein Herz sein wollte, und ich bin ein Weg, sagen CMS Kernmitglied Wait tell ist Pythons beliebtestes und am häufigsten genutztes Content-Management-System, und ich bin tatsächlich auf diesem Hofteam, Das ist also ziemlich cool. Etwas bemerkenswerter Punkt, schätze ich. Ah, und wenn ich noch einen hier drinnen wollte, könnte ich einfach ein anderes div machen. Ich bekomme, sagen wir, geben Sie mir ein I-Element. Es wird auch ein Nestsymbol sein. Es wird sein, dass es klein wird und ich möchte, dass dies ein Star wird und sagen wir einfach 250.000 Studenten weltweit so etwas. Also diese sind wenig bemerkenswert ist über mich, eigentlich nicht wollen, dass innerhalb des Auges, dass ich Element von selbst ist. Auffrischungsseite Boom. 250.000 Studenten gingen zu CMS-Mitglied mit netten kleinen Achtbit-Symbolen 9. Soziale Symbole mit 8 Bit mit 8 Bit: Alles klar. nächste Abschnitt ist die meine Sozialen. Lassen Sie uns weitermachen und kleine soziale Symbole erstellen. Und übrigens, wenn ich ein wenig schnell für dich gehe, vergiss es nicht. Sie können immer referenzieren flex box grid dot com oder nostalgische Dashti evaluieren dot get hub dot io slash nest dot CSS. Ich ehrlich gesagt nur Google in diesem Jahr, weil das ist ein wenig schwer zu erinnern, und es ist alles für uns verfügbar hier. Also lassen Sie uns einen kleinen Abschnitt für soziale Links erstellen, in dem die Leute gehen können und ich schätze, schauen Sie mich nach oben. Also, was ich tun werde, ist, das zu schließen. Das ist in Ordnung. Div Ness Container. Es hat auch einen Titel. Lassen Sie uns diesem einen Titel drei Punkt Titel Hit Tab geben, und es erstellt nur das gesamte Element für mich. Nennen Sie es meine Sozialen. Dann werde ich hier einen anderen Container erstellen, nur um diesen Container zu erstellen . Tut nicht weh, dass diese eine zusätzliche Ebene da drin zu haben, und ich werde nur einen Link erstellen. Es wird im Moment nirgendwohin besonders gehen. Ich möchte nur, dass dies demonstriert, dass dies ein Link ist, der zeigt, dass ich hier eine Nikon habe. So Ness Symbol Twitter, Hochtöner. Da gehen wir hin. Erfrischen Sie einen bam! Es gibt Twitter und wir könnten das immer und immer wieder tun. Also habe ich das nur vier Mal kopiert und eingefügt. Und wenn ich ein Facebook hier drinnen will, dann lasst uns das auf Facebook ändern. Dieser hier wird mein Get-Hub sein, und dieser wird YouTube sein. Lasst uns voran gehen und aktualisieren ihre Wir haben Symbole. Nun, wenn Sie nach anderen Symbolen suchen, gibt es eine Menge Symbole hier. Wo bist du? Aber die Beule von, äh, hier sind Sie soziale Netzwerke Site-Icons. Also haben wir Twitter, Facebook, insta get Hub Google Gmail, Medium Lincoln, alle möglichen anderen da drin. So können Sie alle diese und wieder verwenden, wenn Sie nicht sicher sind, wie sie genannt werden, öffnen Sie einfach diesen Quellcode, indem Sie auf diese Schaltfläche klicken und nur die, die Sie eine Kopie und Einfügen Umriss möchten , und es wird genau für Sie funktionieren. Und so haben wir jetzt Soziale 10. Die richtige Kolumne: In Ordnung, jetzt müssen wir an unserer rechten Spalte arbeiten. Also 1. 1 haben wir hier ist Front und Wissen, Rücken und Wissen bauen Werkzeuge als frühere Erfahrung. Lassen Sie uns einfach voran und erstellen Sie eins nach dem anderen. Also sein Schöpfer, Front und Wissen für Sie, das könnte auch völlig anders sein. Dies könnte nicht vor dem Wissen stehen. Dies könnte einfach Ihr Lieblings-Brettspiel, eine Liste von Familienmitgliedern oder alles, was Sie mögen. Aber was ich hier eingerichtet habe, ist, dass ich eine besondere Fähigkeit habe und wie gut ich in dieser Fähigkeit bin. Also html fünf, ich bin 95% gut in html fünf. Ich denke, CSS drei. Ich glaube, ich bin 90% gut. Ein CSS drei JavaScript. Vielleicht bin ich kein allzu gutes JavaScript. Also haben wir diese Gesundheits-Bars hier, um uns zu sagen, wie gut ich bei einer bestimmten Fähigkeit bin. Lassen Sie uns einfach voran und erstellen Sie den ersten Front- und Wissensabschnitt. Und noch einmal, das liegt ganz an dir. Ich werde diesen Abschnitt zusammenbrechen. Das liegt ganz an dir. Wie Sie dies mit einem Inhalt gestalten möchten, den Sie mögen. Also erste Dinge zuerst brauchen wir einen Ness Container mit Titel, wir könnten vorgehen, gegeben Alter drei von Titelfront und Wissen. Nur Dinge, die ich bin, wissen Sie , Okay, und hier müssen wir mehr von unserem Grid-System verwenden. Lassen Sie uns voran und erstellen Sie eine neue Zeile. Und in dieser Reihe brauchen wir zwei Spalten, die wir brauchen. Rufen Sie kleine vier, nur vier Spalten auf der linken Seite und sagen wir, wenn es auf extra kleine verbrachte den ganzen Weg über die Suppe Spalte, extra kleine 12 war dabei, die volle Breite zu nehmen. Und weißt du was? Lassen Sie uns dies auf eine Zeile setzen, denn ich denke, wir können mit diesem HTML davonkommen und dann nur als fünf nennen sm, dann müssen wir das Gegenteil tun. 12 minus vier ist acht kühle überschüssige 12. Und hier wollen wir einen Fortschrittsbalken erstellen, so Fortschritt Punkt Nest Fortschritt Punkt ist Erfolg. Ich zeige Ihnen, wo ich die in nur einer Sekunde bekomme, und hier drinnen lassen Sie uns das auch auf separate Zeilen setzen , damit wir das lesen können. Es ist uns erlaubt, dass all dieser Leerraum ihn genauso gut nutzen könnte. Der Wert ist gleich 95 und das Maximum wird 100 sein. Lass uns einfach voran gehen und sehen, wie das aussieht. Ass Setzen Sie das auf eine weitere Linie. Gerechtigkeit, die hässlich aussieht. Schön. Aktualisieren Sie meine Seite HTML fünf nicht Balken. Ein bisschen groß. Wir werden das etwas später ändern. Und jetzt werde ich nur noch diese ganze Reihe nehmen, und ich werde sie noch zwei Mal kopieren . Es gibt also einen. Und das gibt es auch. Und ich möchte, dass die 1. 1 nicht html ist. Ich möchte, dass dies CSS drei ist. Der Fortschritt wird 90 sein. Das ist Erfolg. Ja, ich glaube, ich bin ziemlich gut darin. Nehmen wir an, dieser wird JavaScript sein, und dieser wird eine Warnung sein. Ich zeige dir, wo ich diesen Stil in nur einer Sekunde bekomme. Das ist ich bin nur 60% bekommen ein JavaScript. Das ist eigentlich sehr falsch. Ich bin ziemlich gut in JavaScript. Aber zu Demonstrationszwecken ist es gut, einen kleinen gelben Balken zu haben. Und da gehen wir hin. Genau so. Nun, wo ich diese Stile herbekomme, ist Fortschritt. Fortschritt, Fortschritt. Wo ist der Fortschritt? Balkenfortschritt, Fortschritt, Fortschritt. Wir haben eine ganze Reihe von ihnen, von denen wir hier wählen können. Lasst uns einfach umschalten, dass eso wir Nest-Fortschritt haben. Das ist der schwarze ist primär blau ist Erfolge. Grün warnt, dass sein Gelb Fehler ist. Das ist unser rotes und ist Muster, weil man manchmal nur ein Mario Kart wie Muster will . Das ist also unsere Front und unser Wissen. Ich werde diese Art von dort reparieren und dann gehen wir zur nächsten Lektion. 11. Große dunkle 8-Bit-Abschnitt: In Ordnung, lassen Sie uns weitermachen und wieder im Wissen schaffen. Wir haben hier einen schwarzen Abschnitt, also muss das dunkel sein. Caleb, woher wirst du dunkel? Ja, das ist eine tolle Frage. Wo immer Sie einen dunklen Abschnitt hier sehen, können wir einfach aktivieren Es war dunkel hier drin. Es gibt hier einen dunklen Abschnitt, damit wir uns diesen Quellcode ansehen können. Ah, wir können uns auch die Container ansehen, die wir haben. Der Container ist zentriert. Wenn wir ihren Titel schicken wollen, wir nicht tun, dass das dunkel ist. Macht nur einen dunklen Hintergrund mit einem weißen Rand. Wir können immer den Quellcode betrachten, und das ist der, den wir hier wollen. Also werde ich den Kopf auf Visual Studio-Code kopieren, und ich werde diese ganze Sekunde zusammenbrechen. Ich arbeite daran, nur um meinen Code ein wenig schöner aussehen zu lassen. Lassen Sie uns hier eine neue Devyn erstellen. Dieser wird auch einen Titel haben. Dieser Titel wird zurück End Wissen sein. Und da gehen wir. Wir haben Back-End-Wissen. Und wieder, das ist Basin wird am Ende dieses Kurses eso weiter beheben. Wir müssen im Grunde diese drei Abschnitte wieder erstellen. Aber dieses Mal wollen wir Python PHP und keine Js setzen. Also, was ich hier tun werde, ist, weiter zu gehen und wieder, einfach eine neue Zeile zu erstellen. Dies ist von unserem Drop in Grid Ersatz genannt Flex Box Grid. Dieser coole Sm vier. Dies ist genau das gleiche wie wir in der Front und einem coolen Zugang 12. Das hier wird Python drei sein. Und anstatt das immer wieder zu schreiben, werde ich es einfach nur eine kleine Warnung kopieren. Wenn es darum geht, Kopieren und Einfügen, Vergessen Sie nicht, wenn Sie kopieren und einfügen Dinge, Sie müssen alle Werte ändern und ihre Manchmal vergessen wir zu tun, das passiert uns allen . Vergessen Sie nicht, Ihre Werte zu ändern. Diese, denke ich, ist gut, aber, aber, Also lasst uns voran und Auffrischung sind tatsächlich funktionierende Demonstration hier. Und sieh dir das an. Wir haben jetzt Python drei. Ich werde die noch einmal auf eine Zeile setzen. Jetzt lege ich diese alle auf eine Zeile, weil ich voran gehen und eine andere Zeile erstellen möchte versucht, zwei weitere Zeilen zu erstellen, also fügen Sie eine weitere darin ein. Fix up die schreckliche Erfindung von V s Code. Ich habe keine Ahnung, warum es das tut. Lass uns voran gehen und gib riesige p sieben ein und ich bin ziemlich gut mit PHP. Also ist es eine 90, die andere wird Knoten Js node.js sein. Ich bin ehrlich gesagt nicht sehr gut ohne Jazz und ich will nicht, dass das Erfolg sagt. Ich möchte, dass dies ein Fehler ist. Das zeigt, dass ich nicht gut darin bin. Und so haben wir hier eine kleine rote Bar, die besagt, dass ich nicht gut mit Jazz bin. Die Gesundheit von keinem Js ist ziemlich niedrig. 12. 8-Bitabschnitt für großes Licht: Alles klar. Schließlich haben wir unsere Build-Tools. Dieser wird super einfach sein und im Grunde wird über Front und Wissen kopieren und einige der Werte ändern. Also lasst uns den Kopf rüber zu V S Code, und ich habe derzeit zusammengebrochen. Manche werden das alles aussuchen. Kopieren Sie es, fügen Sie es dort ein. Und jetzt können wir sehen, dass wir einen Abschnitt des dunklen Abschnitts haben, und dieser wird Build-Tools sein, Build-Tools. Lassen Sie uns voran und fügen Sie Web-Packing hier hinzu. Was ist mein Web-Pack? Ich werde sagen, Web Pack ist bei nicht 50. Es ist bei 60%. Ah, und es ist gelb. Lassen Sie uns voran und fügen Sie Paket Punkt Js. Dieser wird auch gelb sein, also werden wir das zu einer Warnung machen. Das hier wird bei 50 sein und dann haben wir Schluck , den ich lange nicht benutzt habe. Das hier wird also ein Fehler sein, und das bedeutet nur, dass die Bar gelesen wird und sagen wir, es ist bei 30%. Lassen Sie uns voran und aktualisieren Sie unsere Arbeitsseite. Da gehen wir. Wir haben Werkzeuge hier drin, bauen Tools Web-gepacktes Paket. Holländisch. Ja, und Schluck. Und denken Sie daran, Sie können einfach in die Dokumentation gehen und zu jedem Zeitpunkt fühle ich mich wie ich, während ich nicht verwenden möchte, ist der Fehler für die rote. Ich wollte gemustert werden. Sie können sein Muster verwenden oder Sie könnten einfach keines von ihnen verwenden. Also verschachteln Sie einfach den Fortschritt auf schwarz, was auch immer für Sie funktioniert. Erinnern Sie sich an Sie, oder? 13. 8-Bit-Profilabschnitt: Alles klar. Schließlich haben wir bereits Erfahrungen gemacht. Dies ist ein größerer Abschnitt, also lasst uns einfach voran gehen und auf diese Weise rollen. Ich habe hier keine echten Firmennamen. Möglicherweise möchten Sie Ihre tatsächlichen Firmennamen verwenden. Wenn Sie einen Lebenslauf erstellen oder ein Portfolio erstellen, kann es sich um Links zu Projekten handeln, die Sie auf Get Hub oder deren Websites haben . Also werde ich einfach hier nach oben scrollen und das auch zusammenbrechen, weil wir das nicht brauchen. Und lasst uns weitermachen und Ah erstellen, brandneues Thema Titel. So Thema Titel. Und dann hier wollen wir i dot ness icon dot star und lassen Sie uns diese vorherige Erfahrung nennen, wenn wir unsere Seite aktualisieren Ha. Vorherige Erfahrung wird den Abstand in nur einem Moment beheben. Wir kommen wirklich nah dran. Und wo ich diesen Titel von diesem bekam, war etwas schwieriger, um auszugraben. Was ich tun musste, war hier runter zu gehen und ich klicke einfach mit der rechten Maustaste auf Inspect-Element, und wenn ich über das schwebe können Sie sehen, dass ich das gesamte Kernteam habe und ich einen Thementitel hier drin habe. Und so alles, was ich wirklich getan habe, war nur die Klasse zu nehmen, die H drei Thema Titel. Du hast hier ein Symbol und dann einen regulären Text, also habe ich das Gleiche gemacht. Als nächstes brauchen wir einen neuen Container. Lassen Sie uns einen DIV-Nestcontainer erstellen, der dunkel ist. Wir wollen eine dunkle. Wir wollen nicht, dass das einen Titel hat. All diese anderen haben mit Titel. Nicht diesen hier. Dieser hat bereits einen Titel außerhalb davon namens Topic Title. Jetzt müssen wir unser Zeilensystem wieder hinzufügen. Einige werden ein div namens Roe hinzufügen. Wir müssen eine Spalte in Jahren hinzufügen. Ein Kohlezugang zu mir will nie, dass das zusammenbricht. Deshalb spezifiziere ich extra kleine, kühle überschüssige 10 120. Das wäre ein ziemlich großer gewesen, wenn es so hoch ging. Also zwei unter 12 Spalten auf der linken Seite, 10 von 12 Spalten auf der rechten Seite, und wir konnten hier ein Bild setzen und wir könnten auch Text hier setzen. Lassen Sie uns nur eine Vorschau darauf, , und es wird etwas in dieser Richtung aussehen. Bild hier Text hier. Okay, ich war ziemlich nah an den Böden, die ein bisschen schwer zu lesen werden. Warum fügen wir nicht einfach ein wenig Styling zu unserer Seite hier hinzu? Lassen Sie uns voran und fügen Sie unserem Körper etwas Styling hinzu. Und sagen wir einfach, Padding Bottom wird 50 Pixel sein. Da gehen wir. Wir haben eine kleine Polsterung an der Unterseite. Es könnte sogar größer sein als das. Lass uns weitermachen. Machen Sie es 90 Pixel, fast doppelt so, wie wir ursprünglich hatten. Da gehen wir. Wir haben da unten ein paar Abstände. Hoffentlich siehst du das. Okay, scrollen Sie zurück auf der Seite und ich habe ein Bild, das ich hier einfügen möchte. Was ich also tun werde, ist ein neues Bild-Tag zu erstellen und dies bereits in meiner Zwischenablage zu haben. Das ist also ein seltsames Du, Earl. Sie können gehen zu Let's go ahead und tatsächlich öffnen Sie dies in unserem Browser. Lassen Sie uns voran und öffnen Sie es in unserem Browser. Sieh dir das winzige, winzige Bild an. Und wenn wir Teoh wollten, können Sie sehen, wo die Größe gleich 20 ist. Wir könnten diese Größe gleich 200 machen, wenn wir wollen, aber wir wollen einen speziellen Pixeleffekt und so werden wir ein sehr kleines Bild angeben. Und so hier sagen wir Größe von 20 Pixel. Und wenn ich das aktualisiere, wird das super winzig aussehen. Ja, das siehst du kaum. Wir müssen etwas spezielles Styling hinzufügen, damit diese Zehenarbeit richtig funktioniert. Also lasst uns weitermachen und dies auch auf eine neue Linie setzen. Weil wir Stil mit der 100% Höhe gleich 100% ist. Es wird automatisch sein. Dies macht uns nur ein reaktionsfähiges Bild. Es ist Auffrischungsseite, und Sie können sehen, es sieht ein wenig verschwommen aus. Aber wenn wir mit der rechten Maustaste klicken und inspizieren, können wir dieses coole kleine Ding namens Bild-Rendering hinzufügen. Und wir wollten pixelig werden, und wir werden auch eine weitere hinzufügen hier nur für Mozilla genannt die meisten scharfen Kanten. Und wenn ich das einfach ausgeschaltet habe, ist das besser für Chrome und Firefox. Wenn ich nur das rede oder nein, wenn du tatsächlich sehen kannst, dass das Bild hier oben pixeliert wird, was ziemlich cool ist. Anstatt es also zu verwischen, wenn man versucht, es Sinn zu machen, wird es einfach bei den Pixeln bleiben, die momentan vorhanden sind. Also lasst uns voran gehen und beide kopieren und diese auch hier reinlegen. Und wir könnten diesen Abstand ausbessern, weil wir ihn nicht brauchen. Es ist Auffrischungsseite und da gehen wir. Wir haben einen pixeligen Effekt. Das ist ziemlich cool. Und dann müssen wir weiter gehen und ein paar Firmennamen hinzufügen. Wir haben einen alten Firmennamen. War ein Absatz hier drin. Also, was war meine Rolle? Vielleicht war ich Ah, Super-Front-End-Entwickler hat erstellt, wenn Container nur aus Gründen der Trennung, äh, um hier einen Lincoln zu setzen. Und das wird einfach, ich weiß nicht, vielleicht die Nester-Ikone sein ich weiß nicht, . Vergiss den Hub. Also vielleicht habe ich ein Projekt bekommen oder etwas, das ich in ihrer teilen möchte. Lassen Sie uns voran gehen und kopieren Sie das noch einmal. Es ist genau da. Und statt Hub zu bekommen, vielleicht Lassen Sie uns Twitter Refresher Seite setzen. Bumm. Sieh dir das an. Also haben wir einen Hub und wir haben Twitter da drin. Das ist ziemlich cool. Das kommt jetzt sehr schön vorbei. Wir müssen das ein paar Mal kopieren, weil wir drei Zeilen wollen. Also, was ich tun werde, ist, die ganze Reihe zu nehmen, sie einzufügen und noch einmal einzufügen. Und sieh dir das an. Wir haben drei da drin, also lasst uns einfach voran gehen und einige dieser Inhalte ansprechen. Nehmen wir an, das ist eine Art alte Firma und ich weiß nicht, vielleicht war ich Projektmanager Projektmanager, und vielleicht hat diese einen Facebook-Link. Sehr alter Firmenname. Und vielleicht war ich ein Super-Back-End-Entwickler. Und vielleicht gibt es kein Zuhause. Vielleicht ist das hier nur Twitter und Instagram, nehme ich an. Lass uns weitermachen, Refresh. Das sieht ziemlich gut aus, aber unser Abstand wird ziemlich eklig. Gehen wir weiter und fügen einige Abstände im nächsten Video hinzu. 14. 8 Bitabstand: Alles klar, Wir haben einen guten Teil unserer Seite ziemlich getan. Wir müssen nur einige Abstände in Ihrer Sache hinzufügen. Unsere Seite sieht nicht so aus. Unsere Seite sieht ein wenig vollgestopft aus. Die Dinge sind im Grunde wie Abschnitte oder berühren einander, und es sieht einfach nicht sehr acht Bit aus. Scheint ein bisschen vollgestopft zu sein. Also müssen wir nur ein wenig Rand und Polsterung an einigen bestimmten Orten hinzufügen. Fangen wir an der Spitze an. Wir haben das hier oben. Es sieht nicht wirklich zentriert aus. Wenn wir einfach mit der rechten Maustaste klicken und inspizieren. Wir haben ein H zwei hier drin und wir können tatsächlich sehen, dass es eine ma ah, unterer Rand von 0,5 Zimmern gibt. wollen wir komplett loswerden. Also lasst uns den S-Code öffnen. Gehen wir zu unserer Navigation hier. Ich werde betrügen. Ich werde das in Zeile Marge unten Null schreiben, und das wird nur das überschreiben. Also lasst uns voran gehen und uns eine Auffrischung geben und diese Art von Aussehen sehen, als wäre es ein wenig zentrierter . Es wird diese Linie nach oben stoßen, so dass es ein wenig schwer zu bemerken ist, weil diese Marge. Der Boden war 0,5 Gramm. Aber es sieht jetzt etwas zentrierter aus, nicht wahr? Als nächstes müssen wir hier ein paar Abstände hinzufügen, denn dieser Typ, der Typ, der sagt, ich bin Kayla, ist zu nah. Also lasst uns eigentlich alles von diesem Symbol runterwerfen. Also haben wir den Container hier mit Nest BC rico, und ich glaube, das ist einer der Schöpfer von nest out CSS, eigentlich. Rand unten 50 p x. Alles klar, also haben wir einige Abstände da drin, die kommen. Ah, wenn wir auch hier reinschauen, haben wir auch ein bisschen Offset. Das gefällt uns nicht wirklich. Und Sie können hier sehen, dass dies einen Rand unten von einem Ram hat. Das wollen wir überhaupt nicht. Also lasst uns voran gehen und unsere Listen finden und all diese loswerden. Wir haben hier eine Nistliste. Stil Rand unten ist gleich Null. Suchen wir eine andere Liste. Sieht nicht so aus, als hätten wir welche. Okay, da ist es. Das sieht ein bisschen besser aus. Jetzt brauchen wir etwas Abstand dazwischen. Bemerkenswert ist und Dinge, die ich dio wir brauchen auch ein wenig Abstand zwischen meinen Sozials und keine Worthy's. Also gehen wir weiter und gehen Sie nach unten, um zu wissen, wo diese das ist Dieser Abschnitt hier sagt No Worthy Stil Marge. Top 50 Pixel Rand. Untere 50 Pixel und lassen Sie uns auch den unteren machen, meine Sozialen. Wir werden ein wenig präventiv mit dieser Aktion sein. Das ist nur eine Kopie. Warum? Warum tippen Sie es, wenn wir es kopieren können und da gehen wir. Das fängt an, etwas mehr Abstand auszusehen. Dann müssen wir ein wenig Abstand dazwischen hinzufügen, wenig Abstand zwischen hier und ein wenig Abstand dazwischen. Das wird also ganz einfach. Gehen wir runter in unsere rechte Spalte, also nennen Sie ihn Medium Acht. Das ist dieser größere Abschnitt hier drin. Das ist die rechte Spalte. Klicken wir hier und hier und hier. Und lassen Sie uns Stil Rand oben 40 Pixel und lassen Sie uns aktualisieren. Oh, das sieht besser aus. Das sieht besser aus. Okay, diese Bar ist immer noch viel zu großes Ziel alle zusammen, denke ich. Aber bevor wir das tun, lassen Sie uns den Rest der Seite runtergehen und wir haben einige Abstandsprobleme hier mit früheren Erfahrungen. Also, wenn wir V s Code öffnen, werde ich diesen Abschnitt wieder zusammenbrechen. Zusammenbruch, Zusammenbruch, Zusammenbruch. Und so haben wir einen ersten Abschnitt oder einen dunklen Abschnitt, zweiten Abschnitt einen Titel und dann den, den wir gerade zusammengebrochen haben. Lasst uns das zusammenbrechen. Und hier wollen wir, dass jede einzelne Zeile gezielt angestrebt wird. Lass uns nur eine zweite und dritte Reihe machen. So ist Stil Rand gleich oder Rand oben ist gleich 30 Pixel hinzugefügt. Nur ein bisschen Abstand, schätze ich. Nur damit das nicht so zusammengequetscht scheint. Das sieht ziemlich gut aus. Eigentlich ist das besser geworden, als ich erwartet hatte. Normalerweise vermute ich nicht wirklich gute Abstände auf dem ersten Gast. Aber das ist ziemlich gut geworden. Und schließlich müssen wir das hier nur noch ausbessern, denn das ist einfach zu groß, dieser Fortschritt vermindert zwei große. Werfen wir einen Blick auf die Höhe Attribut. Wie groß ist das Ding? 48 Pixel. Was passiert, wenn wir das 25 oder 36 machen? Das sieht in Ordnung aus. Das sieht etwas besser aus und sieht nicht ganz in der Mitte aus. Lassen Sie uns voran gehen und sagen, 25 Picks ist, das sieht ziemlich gut aus. Was wir hier tun, ist, dass wir das CSS direkt in unserem Browser bearbeiten und ich möchte diesen Selektor greifen und das ändern. Also lassen Sie uns zurück zu ihrer Seite scrollen und wo wir unser Styling haben, wo wird Punkt ness hinzufügen? Dash Fortschritt. Das ist unser Fortschrittsbalken. Und sagen wir, es wird eine Höhe von 25 Pixeln haben, und dies wird jeden einzelnen von ihnen auswählen und ihm eine maximale Höhe geben. 25 Pixel. Lassen Sie uns voran und aktualisieren Sie Ihre Seite. Es sieht so aus, als wäre nichts mit dem CSS-Selektor passiert. Wir sagten, wieder wählbar. Ändern Sie die Höhe 25 Pixel. 15. Der Fußer: Alles klar, wir haben noch einen Abschnitt, den wir hinzufügen müssen. Dies ist nur der kleine Inhalt Abschnitt am unteren Rand. Es ist ziemlich schwer zu sehen, und das ist okay. Das ist wirklich nur ein Urheberrecht oder was auch immer Sie in ihre Augen setzen wollen. Setzen Sie etwas Lustiges, sagt ironischerweise, ich kümmere mich nicht wirklich um die nächsten Spiele in 2019, also lassen Sie uns voran und erstellen Sie das. Öffnen Sie den S-Code und ganz unten. In der Tat, nicht ganz die ganz unten. Ich wollte Container zusammenbrechen und einen neuen Container erstellen, und das ist im Grunde nur eine Fußzeile. Ich möchte diesem einen Stil geben, sagen Rand Top 50 Pixel Schriftgröße. Machen wir es kleiner als die durchschnittliche Schriftgröße. Vielleicht 60% ish. 60%. Es gibt das Prozentzeichen hat eine Zeile Spalte extra klein 12 gegeben. Es wird also 12 Spalten sein, egal was passiert, egal was passiert, aber lassen Sie uns voran und zentralisierte Technologie. So Stil Text. Eine Linie ist gleich Mitte, und die Farbe wird C C C C sein , was eine hellgraue Farbe ist. Und dann hier drin, lass uns einfach Ironischerweise sagen, ich kümmere mich nicht um ja Spiele im Jahr 2019. Und lasst uns das ändern. Sehen Sie zu einem Copyright haben Sie getan, um zu tun und zu kopieren? Gehen wir zurück zu unserer Arbeitsdatei hier und lassen Sie uns einfach zur unteren Aktualisierung scrollen und lassen Sie uns das loswerden und sagt, ironischerweise, ich kümmere mich nicht um die Spiele in 2019. 16. Project: Alles klar. So erstellen wir eine Acht-Bit-Website mit einem kleinen CSS-Framework oder Bibliothek namens nest dot CSS, die Open Source ist. Sie können es hier finden. Wenn Sie es mögen, können Sie immer dazu beitragen. Ich möchte den Machern von Nest Out CSS und Mitwirkenden von Nest auf CSS danken, weil dies eine tolle kleine Bibliothek ist. Das ist einfach fantastisch. Sie können nicht alle Arten von Knöpfen und so. Es kommt nicht mit viel, dass Sie ein paar zusätzliche Dinge hier verwenden müssen, wie Dialoge. musst du dein eigenes JavaScript hinzufügen. Aber das ist OK, kommt mit dem Styling, und das ist der Hauptteil hier. Und dann haben wir Flex Box Grid Flex Box Grid dot com verwendet, Und das ist nur ein Tropfen Ersatz für Bootstraps Grid System. Wenn Sie also Ihre eigene Website verwenden und nicht Bootstrap oder Foundation oder irgendetwas mit einem Raster verwenden und Sie ein Raster benötigen, können Sie einfach hierher kommen und einen Drop-in-Grid-Ersatz verwenden. Es ist wirklich, wirklich nett. Und einfach so, in weniger als einer Stunde, konnten wir meinen Webentwicklungs-Lebenslauf erstellen oder für Sie, es könnte ein Portfolio sein. Es könnte ein Lebenslauf sein. Könnte nur eine Hobbywebsite sein oder so. Das sieht echt cool aus. Danke, dass du mich auf dieser Reise begleitet hast. Das war ziemlich lustig. Eigentlich habe ich diesen hier wirklich genossen. Und ich hoffe, Sie in einer anderen Klasse von mir zu sehen. Aber bevor du gehst, vergiss nicht, dass du deinen Fortschritt teilen kannst. Teilen Sie Ihre Website, teilen Sie dieses gesamte Projekt, das Sie mit Skill Share gemacht haben. Klicken Sie einfach auf die Schaltfläche „Neues Projekt“. Oder wenn Sie bereits mit dem Projekt begonnen haben, müssen Sie dieses Projekt bearbeiten und einfach teilen, was Sie haben. Teilen Sie, wie Ihre aussieht. 17. Zusammenfassung: Hey, danke, dass du dich mir beim Fähigkeitsaustausch angeschlossen hast. Vergiss nicht, du kannst mir folgen. Mein Name ist also in diesem Kurs. Sie können einfach auf Caleb schleppen und dann folgen Sie mir auf Skill-Anteil. Und das würde dir Benachrichtigungen geben, wenn ich einen neuen Kurs starte. Ein weiterer toller Kurs wie dieser oder ich habe etwas freies Material zu verschenken. Natürlich ist das optional. Und wenn Sie jemals eine große Entwickler-Support-Gruppe brauchen, habe ich eine Gruppe auf Facebook mit 25.000 Menschen in 25.000 Entwicklern. Wir lernen alle, gemeinsam zu programmieren. Es heißt „Lernen zu Code auf Facebook“. Kommen Sie vorbei, Sag hallo, Stellen Sie eine Frage, Holen Sie sich etwas Unterstützung, helfen Sie anderen Menschen. Es ist eine Gemeinschaft, in der wir uns nur gegenseitig helfen und es ist völlig kostenlos.