Stärke dein persönliches Branding, indem du deine eigene Website programmierst (HTML- und CSS-Grundlagen)

1. Einführung: Hallo, ich bin Aga und ich bin Code-Designer. Wenn Sie jemals Ihre eigene Website haben wollten, aber Sie müde waren ständig Programmieren zu lernen und Sie dachten, dass dies eigentlich nicht für Sie ist, ist es höchste Zeit, an meinen Klassen teilzunehmen. Ich werde Ihnen zeigen, dass Codierung Spaß macht, und Sie können tatsächlich Ihre eigene Website innerhalb kurzer Zeit codieren. Das Ergebnis der Klassen wäre die erstellte Website. Ich habe ein spezielles Layout für Sie vorbereitet. Ich wollte es wirklich funky, frisch und bunt halten. Wir werden in HTML und CSS codieren, aber keine Sorge, ich zeige Ihnen alles, was benötigt wird. Ich hoffe, Sie mögen das Design, und ich hoffe, Sie werden viel Spaß haben, wenn Sie lernen, wie man kodiert. Ich kann es kaum erwarten, Sie auf der Studentenliste zu sehen. Wir sehen uns in den Klassen. Tschüss. 2. Tools: Lassen Sie uns also über Werkzeuge sprechen, die wir in diesen Klassen verwenden werden. Zunächst einmal werden wir unseren Lieblings-Web-Browser verwenden. Normalerweise verwende ich Chrome. Wir können auch Firefox verwenden. Wir werden viel Dev-Tools verwenden. Was sind Entwicklungstools? Dies sind Web-Entwickler-Tools und sie sind direkt in jedem Browser integriert. Ich verwende wirklich gerne Dev-Tools in Chrome, aber vielleicht haben Sie verschiedene Präferenzen. Mal sehen, wie wir sie starten können und was tatsächlich drin ist. Also, wir haben die Chrome offen. Wir klicken mit der rechten Maustaste, inspizieren und knallen, wir haben die Entwicklungstools auf der rechten Seite des Fensters geöffnet. Was Sie hier sehen können, ist der gesamte Code HTML unserer Website. Es ist hier. Wir haben die Skillshare Webseite geöffnet. Sie können einfach überprüfen, welcher Teil des Codes für das Layout verantwortlich ist. Wenn Sie zum Beispiel herausfinden und dekodieren möchten, wo sich die Navigation befindet, klicken Sie einfach auf diesen Pfeil und navigieren Sie einfach zu ihm. Nun wissen Sie, dass dieser Code für das Rendern der Navigation verantwortlich ist. Hier, wir haben Stile. Wir können auf CSS-Datei zu bekommen. Wir können zurück zu Elementen, so unsere HTML-Code und sehen, welche Stile hier angewendet werden. Moment mag es kompliziert erscheinen, aber keine Sorge, ich werde alles Schritt für Schritt erklären. Wenn Sie dieses Fenster in einer anderen Position haben möchten, können Sie entscheiden, ob es Dock nach links sein soll, oder vielleicht sollte es in einem separaten Fenster sein. Wir können auch Dev-Tools in Firefox öffnen. Die Regel ist die gleiche. mit der rechten Maustaste, inspizieren Element, und Sie können das Fenster der Dev-Tools sehen , die Teil des Firefox-Web-Browsers sind. Auch hier haben wir den HTML-Code. Wir haben das CSS. Wir können auch die Position der Entwicklungswerkzeuge ändern. Zum Beispiel, docken Sie sie nach rechts. Eine andere Sache, die wir haben müssen, ist ein Code-Editor. Ich empfehle Ihnen, Atom zu verwenden. Sie können es kostenlos von der Website atom.io herunterladen. Es ist für macOS und Windows verfügbar. Wenn Sie andere Code-Editoren wie Sublime Text mögen, zögern Sie nicht, alles zu verwenden, was Ihren Bedürfnissen entspricht. Zusammenfassend werden wir den Webbrowser, die Dev-Tools und den Code-Editor verwenden . 3. Materialien: Ich werde Ihnen zeigen, wo Sie die Materialien finden , die wir während unseres Unterrichts verwenden werden. der Registerkarte „Projekt“ finden Sie die angehängten Dateien auf der rechten Seite. Es gibt package.zip und hello-colors-psd.zip. In einer package.zip finden Sie Übung einen Ordner und Hallo-Farben, wo Sie Tonnen von nützlichen Materialien wie Style Guide finden, und es gibt Farben und Schriftgrößen. Sie können HTML-Skelett, CSS finden, und der gesamte Text für das Layout werden in Hallo-Farben Textdatei gehalten. Es gibt auch Bild-Ordner, in dem alle Assets bereits vorbereitet sind. Wenn Sie mit PSD-Datei des Layouts spielen möchten, das ich für Sie vorbereitet habe, können Sie hello-colors-.zip Paket herunterladen. 4. Die Zutaten von Websites: Beginnen wir damit, herauszufinden, wie die Websites aufgebaut sind. Ich benutze immer gerne Metaphern, während ich etwas lerne , weil es einfacher ist, einige abstrakte Begriffe zu verstehen. Stellen wir uns vor, dass unsere Website genauso wie menschlich ist. Es hat Skelett. Es gibt viele Mechanismen, die unseren Körper kontrollieren und wir haben unterschiedliche Hautfarbe, Haare und unseren eigenen Stil in Bezug auf die Kleidung, die wir gerne tragen. Website ist genau wie die gleiche. Dieser Skelettplan hier ist HTML-Sprache. Es baut die Struktur der Seite und hat den Inhalt. Für alle Interaktionen wie Einblenden, Ausblenden von Elementen, Filtern, Suchen und komplexen Animationen haben wir JavaScript. Natürlich dürfen wir die Ästhetik nicht vergessen. Für alle Stile, nennen wir sie Kleidung für unsere Website, wir verwenden CSS. Voila! Während dieser Kurse lernen wir HTML- und CSS-Sprachen, die Grundlagen und das Praktischste, was Sie wissen müssen. So werden wir in der Lage sein, das Skelett der Website zu konstruieren, es mit den Daten zu füllen und letztendlich so zu gestalten, wie wir es wollen. Wir entscheiden uns in Typografie, Farben, Assets wie Hintergrund und Bilder. Klingt nach Spaß? 5. HTML-Grundlagen – Teil I: Es ist höchste Zeit, mit dem Programmieren zu beginnen. Lassen Sie uns zuerst HTML treffen. HTML steht für eine Hypertext-Markup-Sprache. Diese Sprache baut, wie bereits erwähnt, die Struktur unserer Website auf. Es ist das Skelett. Jede Website ist mit HTML-Elementen gebaut, und jedes Element hat etwas wie Text oder Bild. Wir haben verschiedene HTML-Tags und sie repräsentieren verschiedene Arten von Inhalten. Wir haben Überschriften, wir haben Absätze, wir haben Tabellen, wir haben Bilder, also sollten wir unsere Codes semantisch schreiben. Was bedeutet das? Es bedeutet, dass jedes HTML-Element seine eigene Bedeutung hat. Wenn Sie Absatz verwenden möchten, müssen wir p Element verwenden. Es ist Zeit für das Codieren. Öffnen wir die Übung eins. Dies befindet sich in Ihrem Paketordner. Was ich normalerweise mache, ist, dass ich den Ordner auf dem Atom-Symbol ablege. Also, der ganze Ordner ist bereits geöffnet. Lassen Sie uns auf eine index.html klicken und wir haben dieses Skelett unserer Website. Lassen Sie mich Ihnen erklären, was drin ist. Zuerst haben wir unser HTML-Dokument mit DOCTYPE Deklaration gestartet. Ich werde nicht ins Detail geraten, aber es ist etwas, das erforderlich ist. Dank dem. Unser Web-Browser werden wir verstehen, welche Version von HTML wir verwendet haben und was möglich ist, im Web-Browser zu rendern. Jede Website sollte mit HTML-Element beginnen. Schauen Sie sich einfach an, es hat ein öffnendes Tag und das schließende Tag. Sie können sehen, dass das schließende Tag einen Schrägstrich hatte. Was immer sich innerhalb der Website befindet, wird gerendert. Was kommt als Nächstes? Als Nächstes haben wir den Kopfteil. Erinnerst du dich, als ich dir sagte, dass die Website wie ein Mensch ist? Nun, es sieht ziemlich ähnlich aus, weil es Kopf und Körper hat. Deshalb ist meine Analogie ziemlich nah. Wofür ist der Kopf? Dies sind die Elemente, die nicht auf der Website zu sehen sind, aber sehr wichtig sind. Zum Beispiel haben wir den Titel hier, wir haben den Zeichensatz, welche Arten von Codierung wir verwenden werden. Nun, ich habe nicht genug Zeit zu erklären, was das beim Codieren ist und wie es sich auf unserer Website auswirkt, aber Sie müssen mir nur glauben, dass es wichtig ist. Später werden wir den Kopfbereich verwenden, um die Stylesheets und externe Schriftarten zu verknüpfen, aber jetzt lassen Sie uns diesen Kopfabschnitt einfach so behalten. Alles, was der Körper hat, wird auf der Website gerendert. Es bedeutet, dass es sichtbar ist, auch wenn wir hier etwas eingeben, speichern und unsere Indexdatei öffnen, werden Sie sehen, dass alles gerendert wird. Aber für jeden Text werden wir HTML-Tag verwenden, damit unser Inhalt semantisch ist. Fangen wir mit der Überschrift an. Wir haben verschiedene Arten von Überschriften. Jede Überschrift beginnt mit h und einer Zahl. Eine bedeutet, dass dies die wichtigste Überschrift ist, die oberste Überschrift. Wenn Sie einen dringenden Anruf haben, würden Sie ihn wahrscheinlich für den Titel verwenden. „ Hallo Skillshare Studenten.“ Ok. Was fehlt hier? Wir müssen das Tag schließen. Nun, unser Code ist korrekt. Du kannst es retten. Öffnen Sie den Webbrowser, aktualisieren Sie ihn und sehen Sie, dass „Hallo Skillshare Studenten“ angezeigt wird. Weißt du, wie man DevTools öffnet? Lassen Sie mich Sie daran erinnern. Klicken Sie mit der rechten Maustaste, überprüfen Sie, und wir sehen unsere Website. Wir haben einen Kopfteil. Wie ich Ihnen sagte, es wird nirgendwo gemacht. Sie können also nicht sehen, wofür dieser Code steht. Aber für Körper, können wir die Überschrift sehen und wir können Stile hier angewendet sehen. Dies sind die Standardstile unseres Webbrowsers. Wenn Sie es ändern möchten, Sie bitte Geduld, da wir das CSS zuletzt starten und bald eine Vorschau anzeigen. Sie können den Text hier bearbeiten und er wird angezeigt. Bitte denken Sie daran, dass alles, was hier geändert wird , nicht in Ihrer lokalen Datei gespeichert werden. Es ist nur eine vorübergehende Änderung, nur im Webbrowser und nur auf Ihrem Computer. Nach dem Aktualisieren der Seite ist die Änderung verschwunden. Sie müssen zu Ihrer Datei zurückkehren, diese ändern, speichern und dann aktualisieren. 6. HTML-Übung – Teil II: Wir wissen, wie man DevTools startet, was HTML ist und wo wir unseren HTML-Text schreiben sollten. Es ist Zeit für Bewegung. Lassen Sie uns eine sehr einfache Website erstellen, die Überschrift, Absatz, Link zu einer externen Website, Bild und Liste von Elementen enthält Absatz, Link zu einer externen Website, . Da wir CSS noch nicht kennen, Sie sich vorerst keine Sorgen um Ästhetik. Wir beginnen mit Übung ein Ordner, wo wir einen Index HTML haben. Öffnen wir die Dateien in Atom. Wir haben unsere Akten in Atom geöffnet. Das erste, was ist, eine Überschrift zu erstellen. Wir verwenden h1-Tag, da es die wichtigste, die wichtigste Überschrift auf der Website ist. Für den Textblock verwenden wir p-Tag, der für Absatz steht. Lassen Sie uns hier einen Textblock einfügen. Ich füge die Beschreibung meiner Klassen von Skillshare ein. Der Text ist ziemlich lang, also können wir hier eine wirklich nette Atom-Funktion verwenden. Wir klicken auf Ansicht, schalten Softwrap um, damit der Text umgebrochen wird. Was fehlt hier? Nun, das schließende Etikett. Wenn Sie auf das Tag klicken, können Sie sehen, um zu unterstreichen. Wenn wir das schließende Tag löschen, können wir keine Unterstriche sehen. Also, das ist ein Hinweis für uns, dass etwas fehlt. Denken Sie daran, die Datei zu speichern, und später können wir die HMTL-Datei öffnen, und sehen, dass wir die Überschrift haben, und den Absatz. Unsere Website ist ziemlich eingestellt, also lassen Sie uns ein Bild hinzufügen. Wir fügen ein Bild hinzu, indem wir img-Tag schreiben. Wir müssen jedoch einige Attribute hinzufügen. Attribute sind also andere Eigenschaften, die mit dem Tag verbunden sind. Also, für img, wird es src sein, die für source steht, und wie Sie den Hinweis von Atom sehen können, ist es das lokale Attribut zu img tab. Also, jetzt möchten wir die Quelle unseres Bildes hinzufügen. Wir müssen den Pfad zu unserem Bild hinzufügen. Pfade zeigen Ihre Datei, die Sie anzeigen möchten. Wir möchten die Datei anzeigen, die ein Bild ist. Wir möchten die Datei anzeigen, die es im Ordner img ist, und hat den Namen Skillshare.png. Wenn Sie die Übung einen Ordner öffnen, können Sie sehen, dass wir indizierte HTML haben, und img Tag mit dieser Datei, und wir möchten diese Datei anzeigen. Eine knifflige Sache hier ist das Hinzufügen eines geeigneten Pfades. Also, wir müssen img Ordner eingeben und die Datei auswählen. In unserem Fall ist es Skillshare.png. Es ist sehr wichtig, den Fehler hier nicht zu tun, die Tippfehler, oder der falsche Pfad ist immer die Ursache für nicht geladene Bild. Ich schulde Ihnen auch eine Definition eines leeren Tags. Wie Sie sehen können, img ist es nicht durch Schließen Tag geschlossen. Normalerweise würden wir so etwas schreiben, aber es passiert nicht. Dies liegt daran, dass img nichtig ist, oder ein leeres Tag. Also, es hat nicht den Inhalt. Stattdessen schreiben wir den Schrägstrich innerhalb dieses Tags. Eine weitere wichtige Sache ist das Alt-Attribut. Alt ist die Beschreibung des Bildes, und es ist sehr nützlich für Leute, die Bildschirmlesegeräte verwenden und gerne wissen, was auf dem Bild dargestellt wird. Wenn das Bild seine Bedeutung hat, hat seinen Zweck, wir schreiben es einfach in alt, weil es Thumbnail-Ordner Skillshare Klassen ist, können wir das Thumbnail der Skillshare Klassen schreiben. Wenn das Bild mehr für dekorative Zwecke ist und es keine sehr wichtigen Informationen hat, können wir einfach das Alt leer lassen. Aber aus Sicht der Zugänglichkeit ist es sehr wichtig, dieses Alt geschrieben zu haben. Wir sparen. Also, lasst uns das Alt neu schreiben, das Miniaturbild der Skillshare Klassen, speichern wir es. Wir können sehen, dass das Bild geladen ist, wir haben Überschrift, den Absatz. Eine andere Sache mit alt-Attribut ist, dass, wenn wir den falschen Pfad zum Bild haben, oder ist es einfach nicht wegen einiger Leistungsprobleme Ihrer eigenen niedrigen Bandbreite geladen. Also, lassen Sie einfach den Pfad verderben, Sie können sehen, dass die Alt hier angezeigt wird. Also, wenn die Leute Ihr Bild nicht sehen können, wissen sie zumindest, was hier präsentiert wird. Nun möchten wir einen Link auf unserer Website hinzufügen.Lassen Sie uns es vor dem Bild haben. Wir verwenden ein Tag, und das gleiche mit img brauchen wir ein anderes Attribut, das wir in einem Tag schreiben. Hier ist es href Attribut, das auf die Adresse der Website verweist, die wir verlinken werden. Lasst uns die Skillshare Webseite haben. Schließen Sie das Tag. Lassen Sie uns speichern und sehen, was auf unserer Website passiert. Nun, wir können keinen Link sehen, obwohl der Code generiert wird, und wir können ihn in DevoTools sehen. Es gibt nichts, auf das Sie klicken können. Der Grund dafür ist, dass wir keinen Text zwischen dem Öffnen eines Tags und dem Schließen eines Tags hinzugefügt haben. Also, hier können wir alles schreiben, was wir wollen, und es wird der Hyperlink sein. Wir schreiben, was angezeigt wird. Klicken Sie hier, um die Skillshare Website zu besuchen. Speichern wir es und aktualisieren Sie die Seite. Wie Sie sehen können, haben wir den Link hier. Wenn ich darauf klicke, öffnet sich die Webseite dieser Skillshare. Wir können die Website auch in einem neuen Fenster öffnen lassen. Um dies zu tun, müssen wir ein anderes Attribut definieren, das Ziel leer ist. Dank ihm wird die Website von Skillshare in einem neuen Fenster geöffnet. Es gibt zwei Arten von Listen in HTML. Es gibt eine ungeordnete Liste, die mit u für ungeordnete und geordnete Liste gestartet wurde. Also, für unseren Zweck lasst uns die ungeordnete Liste auswählen. Lassen Sie uns alle Fähigkeiten auflisten, die Sie erwerben können, indem Sie an diesen Klassen teilnehmen. Zum Beispiel HTML ist dies ein Element in dieser Liste. Ein anderes Element wird CSS und ein weiteres Webdesign sein. Wir müssen unsere Liste schließen, speichern und sehen, was auf unserer Website generiert wird. Sie können sehen, dass jedes Element mit dem Aufzählungspunkt beginnt. Also, wir haben unsere Liste bereit. Wenn wir es in die geordnete Liste ändern möchten, müssen wir nur u zu o ändern, das gleiche für das Schließen von Tag, Speichern, Neuladen, und die Liste beginnt mit den Zahlen. 7. Schicke deine Website zum Stylisten – CSS-Grundlagen – Teil I: So sieht unsere Website aus, nachdem Überschrift, Absatz, Link, Bild und eine Liste hinzugefügt wurden. Nun, Sie müssen zugeben, dass es ziemlich eingestellt ist, so dass es die höchste Zeit ist, unsere Website an die Stylistin zu schicken. Dank CSS sind unsere Websites so schön und bunt, also verschwenden Sie keine Zeit und lassen Sie uns etwas CSS-Code schreiben. Es gibt mehrere Möglichkeiten, wie wir Styling auf der Website hinzufügen können. Es gibt in Zeile CSS, wir können es in eine externe Datei schreiben oder den CSS-Code in HTML-Datei einbetten. Es wird sich auf eine separate Stylesheet-Datei style.css konzentrieren. Zuerst müssen wir die Datei erstellen. Wir befinden uns in unserem Übungsverzeichnis. Wir erstellen einen neuen Ordner nennen wir diese Stile und jetzt lassen Sie uns die Datei erstellen. Wir können das direkt in Adam tun. Also, wir öffnen Adam, wir klicken auf Stile, die dir folgen. Datei, Speichern unter, sollten Sie Stile Ordner öffnen und styles.css schreiben. Wie Sie sehen können, wird die Datei erstellt, aber sie ist leer. Lassen Sie uns den ersten CSS-Selektor hinzufügen. Bevor wir mit dem Schreiben von CSS-Code begonnen haben, teilen wir unser Fenster in Adam in zwei Spalten, damit wir gleichzeitig HTML und CSS Code sehen können. Wir müssen auf Ansichtsfenster klicken und rechts teilen. Dank ihm werden wir index.html auf der linken Seite und unsere Style-Schiffsdatei auf der rechten Seite haben. Lassen Sie uns also unseren allerersten Selektor erstellen. Was bedeutet das? Nun Selektor wählt den Inhalt, den wir stylen möchten. Also, unser Selektor ist P, wie Sie sehen können, dies ist der Name des Tags, also ist dies der Absatz und im Inneren schreiben wir alle Deklarationen. Jede Deklaration besteht aus der Eigenschaft und ihrem Wert. Nehmen wir an, wir möchten unseren Text und Absatz größer haben wir die Eigenschaft Schriftgröße verwenden und wir müssen ihm einen Wert geben, zum Beispiel 20 Pixel. Wir müssen es speichern, und jetzt können wir unsere Website aktualisieren. Nichts passiert, nicht wahr? Wenn wir ein Element mit DevTools auswählen, können wir keine Stile sehen, Ausnahme der Standardstile aus dem Webbrowser. Warum ist das so? Nun, zuerst müssen wir unsere CSS-Datei in HTML-Dokument verknüpfen. Also, wir müssen unsere styles.css Datei in HTML-Dokument verknüpfen. Ich werde das Fenster vergrößern und das tun wir in der Hut-Abteilung. Ich füge den Tag-Link ein. Wir haben Stylesheet-Attribut bei href und type. Also in href schreiben wir den Pfad zu unserer CSS-Datei, die Stile ist, weil Stile sind in unserem Stile-Ordner und der Name der Datei, style- styles.css. Speichern wir es und wir lieben die Website. Jetzt können Sie sehen, dass der Absatz größer ist. Lassen Sie uns die DevTools einchecken. Ja, wir können sehen, dass unsere Stile geladen sind und die Schriftgröße 20 Pixel beträgt. Jetzt wird es großartig sein, unsere eigene Überschrift zu zentrieren. Ich zeige Ihnen das in den DevTools. Also, wir erstellen die Selektor neue Stilregel. Es ist H1-Element, also ist das richtig. Wir klicken einfach auf die Zeile und schreiben das Attribut. Also für die Ausrichtung auf Text haben wir text-align CSS-Eigenschaft. Jetzt wollen wir sein Volumen haben. DevTools geben uns einige Hinweise. Ich wähle Zentrum und Tada, unsere Überschrift ist zentriert. Wenn wir jedoch die Seite aktualisieren, ist die Änderung verschwunden, weil sie nirgendwo sicher ist, ist es nur eine vorübergehende Änderung in den DevTools. Wir können dies wieder tun, Text ausrichten Mitte. Wir können den gesamten Regelsatz kopieren. Wir können es in unser CSS einfügen, speichern und aktualisieren Sie die Seite und die Änderungen bereits gespeichert. Was auch immer die anderen CSS-Eigenschaften, Sie fragen, wie wir die Ränder zwischen den Elementen vergrößern können, wie wir verschiedene Farben einstellen können. Der beste Weg, all das zu lernen, ist nur zu üben, aber es gibt eine großartige Seite cssdreference.io, wo Sie alle Eigenschaften kategorisiert haben. Lasst uns mehr üben. Wir wissen, wie man die Schriftgröße vergrößert. Wir wissen, wie man den Text ausrichtet, aber jetzt möchten wir einen größeren Abstand zwischen dem Link und unserem Bild haben . 8. CSS-Grundlagen – Teil 2: Jetzt möchte ich mehr CSS-Eigenschaften verwenden und sie in Aktion sehen. Also, lasst uns größeren Raum zwischen dem Link und einem Bild haben. Wir müssen Margin-Eigenschaft verwenden. Lassen Sie uns Selektor zuerst erstellen, und fügen Sie Rand oben und Rand unten. Sagen wir, 30 Pixel und Rand unten, 30 Pixel als auch. Wir können es auf eine andere Art und Weise schreiben. Wir können die Abkürzung Marge 30 und Null verwenden. Dies bedeutet, dass die gleiche Anzahl von Pixeln, also 30, von oben und unten sein wird. Der zweite Platz ist der Rand für eine rechte und linke. Wenn wir 50 Pixel schreiben, werden wir sehen, dass 50 Pixel von links und von rechts sind. Wir können auch Computer verwenden, und wir können das Element hier sehen, Rand, wie durch orange Farbe hervorgehoben. So können Sie sofort sehen, dass wir von oben und unten 30 Pixel und von links und rechts 50 haben . Also wieder müssen wir den Rekonstruktor kopieren, fügen Sie ihn in unsere CSS-Datei ein, wir können unbenutzten CSS-Code entfernen, speichern Sie ihn. Wir können auf Null sinken, aktualisieren, und wir können sehen, dass die Karte größer ist. Was sonst noch? Es wird toll sein zu sehen, wie sich die Farben ändern, aber lassen Sie uns herausfinden, wie wir Farben in CSS verwenden können. Wir können Farben auf Text anwenden, aber auch für Elemente, in denen wir die Hintergrundfarbe definieren können. Lassen Sie uns den Hintergrund unten hinzufügen. Also auf unserer gesamten Website, wir benennen den Selektor und fügen Hintergrundeigenschaften hinzu. Sie können sehen, dass Tiefenwerkzeuge bereits eine vordefinierte Liste von Farben in CSS haben. Sie können eine auswählen, aber Sie haben hier nicht eine sehr große Flexibilität. So können wir Routen auf eine andere Art und Weise zurückholen. Sie können hier schreiben, dass Hex-Code. Was ist der Hex-Code? Der Hexadezimalcode besteht also aus sechs hexadezimalen Ziffern. Alle zwei von ihnen sind für den roten, grünen und blauen Kanal. Also, unsere Farbe besteht aus der Mischung aus Rot, Grün und Blau. Natürlich brauchst du es nicht und Hex-Codes auswendig. Es ist großartig, weil in Tiefe Werkzeuge, haben wir Tiefe Farbe herausziehen und wir können die Farben, die wir mögen wählen. Farbauswahl und wählen Sie die aus dem Bild. Nehmen wir an, wir wollen ein Pink haben. Jetzt können wir den Code kopieren und in unsere Stylesheets einfügen. Weil der Körper das wichtigste Tag ist. Es ist ganz oben und es ist wie das Elternteil aller anderen Komponenten, wir stützen es nur ganz oben. Speichern, Aktualisieren der Seite, und wir können sehen, dass die Farben geändert haben. Was ist mit dem Text? Natürlich können wir die Farbe des Textes ändern. Wir haben bereits h1 Selektor vorbereitet. Wir haben bereits h1 Selektor erstellt. Also, wir können einfach eine andere Eigenschaft hinzufügen, die Farbe ist und hier können wir den Hex-Code schreiben. Sechs Fs, bedeutet, dass das weiß ist. Aber wieder, Sie können wählen, was wir wollen aus der Farbpalette. Ich bin okay mit Weiß, also lassen Sie es uns so behalten. Für den Link können wir auch den Selektor erstellen und die Farbe ändern. Ich wähle nur die erste Farbe, schwächer, und verwende durch die Orange. Um den Link sichtbarer zu machen, können wir auch die Schriftgewichtungen hinzufügen. Also, wie schwer wäre die Schriftart, können wir beides hinzufügen. Wie Sie sehen können, ist dies die kühnere Version des Textes. Jetzt müssen wir es natürlich kopieren und in unsere Stile einfügen. Wir haben auch die Farbe zu unserer Überschrift hinzugefügt, speichern wir sie, und wir haben endlich einige Farben auf der Website. 9. Typografie in CSS: Wir möchten unsere Website hübscher machen. Das Wichtigste ist die Typografie. Glücklicherweise können wir viele schöne Schriftarten auswählen, die kostenlos zur Verfügung stehen. Sehr oft verwende ich Google-Schriftarten. Sie können durch alle erstaunlichen Schriften blättern. Also, lassen Sie uns eine von ihnen auswählen und es auf unserer Website anwenden. Lasst uns Lora aussuchen. Wir klicken auf diese Schriftart auswählen, wir klicken auf das Fenster am unteren Rand und sehen, wie wir die Schriftart einbetten sollten. Es gibt zwei Möglichkeiten. Wir können diesen Link in den Kopfbereich einfügen oder diese Zeile in unser CSS einfügen. Lassen Sie uns es in unseren Kopf Abschnitt in HTML-Datei einfügen. Gleich nach Stilen fügen wir den Code ein, der aus Google-Schriften kopiert wurde. Damit die Schriftart funktioniert, müssen wir sie als Eigenschaft zu den gegebenen Selektoren hinzufügen. Zum Beispiel möchten Sie h1 in der Schriftart Lora geschrieben haben. Sie können dies über die CSS-Regel kopieren und in den Selektor einfügen. Speichern wir es und aktualisieren Sie die Seite. Wir verwenden Tiefenwerkzeuge, und Sie können sehen, dass die Schriftart Lora angewendet wird. Wenn wir es entführen, geht es zurück zur Times New Roman. Lassen Sie uns eine andere Schriftart für verschiedene Texte auswählen, wie Absatz, Link oder Liste. Wir nannten das den Textkörper. Also, wir können uns vielleicht für Roboto entscheiden. Lasst uns Roboto Mono aussuchen. Auch hier wählen wir diese Schriftart aus. Wir haben zwei Schriftarten kombiniert. Wir kopieren Einfügen in unser HTML-Dokument. Wir können sehen, dass es Lora und Roboto hier gibt. Wir möchten Roboto auf die gesamte Website anwenden. Also, wir kopieren diesen Code, font-family, und wir fügen font-family Eigenschaft in den Körper. Dank dessen wird der ganze Körper Roboto haben. Jetzt können wir die Seite aktualisieren und sehen, dass sich die Schriftart geändert hat. Paragraph erbt die Schriftfamilie vom Textkörper. Wenn wir es deaktivieren, wird Roboto weg sein. Wir können dies auch nur zu Absatz hinzufügen, und Befehl es aus Körper, und sehen, dass es funktioniert nur für Absatz, weil die Schriftfamilie nur auf den Absatz angewendet wird. Natürlich können Sie viele verschiedene Schriftarten auswählen. Alles hängt davon ab, welchen Stil Sie am Ende erreichen möchten. Bitte denken Sie daran, dass, wenn Sie mehr Schriften haben möchten, in der Regel dauert es länger, bis die Seite geladen wird. Google-Schriftarten haben eine Art von Metriken. Wenn Sie also das Fenster öffnen, sehen Sie, wie hoch die Ladezeit ist, ob es ziemlich schnell oder langsam ist. Wir können auch verschiedene Schriftarten nicht nur von Google-Schriften anhängen, sondern sie müssen Web-Fonts sein, und sie müssen irgendwo gehostet werden. Also, für diese Klassen, um es einfacher zu halten, verwenden wir nur Google-Schriftarten. 10. CSS-Selektoren – Kurse: Dies ist der aktuelle Stand unserer Website. Ich muss über andere CSS-Selektoren erwähnen, weil wir noch nicht über sie gesprochen haben. Also haben wir gelernt, dass es Elementselektoren wie p, h1, img gibt. Dies ist also der Name dieses Tags in HTML. Wenn Sie einen Absatz formatieren möchten, fügen wir einfach p hinzu, aber dieses p formatiert jeden Absatz, der auf der Website enthalten ist. Für alle Absätze beträgt die Schriftgröße also 20 Pixel. Was ist, wenn Sie zwei Absätze haben möchten und nur einer Schriftgröße von 20 Pixeln hat? Dafür können wir CSS-Klassen verwenden. Dies ist ein weiterer Selektor. Wie sollen wir es schaffen? Wir erstellen es immer mit Punkt und dann den Namen der Klasse. Zum Beispiel, Intro-Absatz. Die Regel ist die gleiche, wir fügen nur hier die CSS-Eigenschaften hinzu, aber wir müssen auch Klasse zu HTML-Element hinzufügen. Wir können dies durch Klassenattribut hinzufügen. Lassen Sie uns den Absatz kopieren, also werden wir zwei von ihnen haben. Lass es uns retten. Lassen Sie uns unsere Seite aktualisieren. Wir haben zwei Absätze. Also, lassen Sie uns jetzt stylen, dass der oben 20 Pixel hat und der unten 14 Pixel beträgt. Wir haben die Klasse Intro-Punkt bereits erstellt. Jetzt fügen wir die Klasse zum ersten Absatz hinzu, das Intro sein wird. Also, wir geben nur den Namen der Klasse ein, wie Sie sehen können, haben wir dieses Klassenattribut und jetzt müssen wir die Eigenschaft hinzufügen. So können wir festlegen, dass alle Absätze, die wir haben, 14 Pixel haben, aber das Intro wird 16 haben. Lassen Sie uns die Seite aktualisieren, und wie Sie sehen können, mit den DAC-Tools hat Intro-Absatz mit den DAC-Tools16 Pixel, 14 Pixel werden überschrieben. Dies ist der Hinweis hier, dass die Eigenschaft für p auf alle Absätze angewendet wird, aber wir haben die Klasse, die eine größere Priorität hat, so dass Absatz in 16 Pixel Schriftgröße geschrieben wird. Der Absatz unten hat 14 Pixel, da er keine Klasse hat. Wenn Sie diese Klasse zum zweiten Absatz hinzufügen möchten, können wir es tun, kein Problem. Sie können einfach kopieren, einfügen, speichern, neu laden und Klassenarbeiten. Ich hoffe, dass Sie jetzt mit der Erstellung der Klassen vertraut sind. 11. Analyse des Layout: Ich konzentriere mich nur auf den Aufbau unseres Layouts. Also, ich habe das Layout offen. Nennen wir es „Hallo Colors“. Also, was ich jetzt gerne tun möchte, ist, Ihnen zu zeigen, wie ich in Bezug auf die HTML-Struktur denke. Ich sehe dieses Layout gerade jetzt und ich werde schnell die Komponenten der Seite zeichnen. Welche Abschnitte haben wir? Ich werde Ihnen hier zeigen, wie ich das Layout dekonstruiere. Später ist es für mich einfacher, es zu codieren, weil ich weiß, was die Komponenten sind und welche HTML-Elemente ich verwenden sollte. Also, fangen wir mit dem Anfang an. Ich sehe oben, dass wir die Navigation haben. Also, dieses Stück Papier ist mein aktueller Cloud-Editor. Also, ich habe ganz oben geschrieben, dass wir nav Element haben und später haben wir den Header. Hier haben wir den Header der Website. Also, ich habe den Header, und der Header ist in zwei Spalten unterteilt. Links, rechts und alles zusammen ist es ein Header. Wenn wir scrollen, haben wir hier einen Absatz, und alles, was unter der Kopfzeile ist, befindet sich im Hauptbereich, weil es wie der Hauptinhalt der Website ist. Also, ich kann hier main erstellen. Haupt wird besteht aus mehreren Unterabschnitten. Also, zuerst wird der Arbeitsabschnitt sein. Also, wir haben Abschnitt für Arbeiten. Es gibt drei freie Reihen. Unten funktioniert, haben wir meinen Teambereich, also einen anderen. Dann, in meinem Team haben wir Kontaktabschnitt und der letzte ist die Fußzeile. Also, die alten Informationen wie Social Media und E-Mail. Also, unten haben wir Fußzeile. Also, hier haben wir Werke, mein Team und Kontakte Abschnitte, und wir werden diese Arten von HTML-Text verwenden . 12. Aufbau eines HTML-Gerüsts – Teil 1: Wir sind bereit, in HTML und CSS Schritt für Schritt zu codieren. Lassen Sie uns HTML-Vorlage öffnen, die im Paket enthalten ist. Wir haben in diesem HTML, alle Assets, die für das Layout erforderlich sind, das gesamte Layout, das wir codieren werden, und siehe CSS, style.css und Bootstrap-Grid. Also, wir werden Bootstrap verwenden. Bootstrap ist eine Art von Framework, und ich möchte nicht ins Detail eingehen, aber wir werden nur diesen Bootstrap-Strip verwenden. Also, dank ihm müssen wir nicht in die Flex-Box kommen, oder wie man die Spalten baut, wir werden nur eine Art von Gitter verwenden, die wir bereits erstellt haben. So können wir etwas Zeit sparen. Wenn Sie sich erinnern, wie wir dieses Layout teilen, haben wir einige Abschnitte wie Navigation, Kopfzeile, Abschnitt für Arbeiten, Abschnitt für mein Team und Abschnitt für Kontakt. Ganz unten, die Fußzeile. Also, lassen Sie uns es in HTML erstellen. Ich öffne Index html. Denn jetzt kann ich diese Stile schließen. Also, fangen wir mit nav an. Nav ist das Navigations-Tag. Im Inneren werden wir eine Liste erstellen. Es wird unsere Speisekarte sein. Also, wir haben das Angebot, Portfolio, über uns, Kontakt. Ich kann es einfach lesen. Das Angebot, ein weiterer Artikel in der Liste, Portfolio, über uns, und Kontakt. Ok. Also, wir haben die Navigation erstellt. Wir können die Seite speichern und im Webbrowser öffnen. Wie Sie sehen können, ist es noch nicht sehr attraktiv, aber keine Sorge. Eine andere Sache, die wir beenden möchten, ist der Header-Abschnitt. Etwas, das oben ist. Also, Header, und im Inneren haben wir zwei Spalten. Abschnitt eins auf der linken Seite, können wir Kommentare verwenden, und HTML, das Sie tun, ist einfach so und das. Sie schreiben dieses Stück Text rechts, links Spalte und Sie schließen es so. Eine andere Sache ist, dass wir die richtige Spalte haben. Also, wir können es hinzufügen, „Hallo“ und unten, wir haben den Absatz des Textes. Lassen Sie uns den Code sauberer machen. Ok. Also, das ist unsere linke Spalte. Auf der rechten Seite haben wir das Bild und eine Beschriftung. Also, wir fügen Bild hinzu. Das Bild befindet sich im Ordner img. Das ist Kaktus. Wir schließen Bild-Stapel mit Schrägstrich innerhalb Element-Tag, und wir fügen auch alt Attribut. Speichern Sie in der Beschriftung unten. Ich füge und schließe. Lassen Sie uns die Seite aktualisieren. Nun, es ist nur eine Spalte, aber keine Sorge. Wenn wir Spalten aus Bootstrap-Skript hinzufügen, werden Sie sehen, dass das Layout das gleiche wie auf einem Bild sein wird. Also, lassen Sie uns weitere Abschnitte hinzufügen. Wir müssen einfache Absätze hinzufügen. Sie können dies dem Hauptbereich hinzufügen. Also, alles, was unter Header ist, und unter Main, haben wir die Fußzeile. Also, in der Hauptsache, wir erstellen den Absatz des Textes. Unter dem Absatz haben wir den Abschnitt für Werke, Abschnitt, ich schließe es. Jetzt können wir Kommentare hinzufügen, „Werke“. Im folgenden Abschnitt haben wir mein Team, und unter meinem Team haben wir Kontakt. Innerhalb der Arbeiten haben wir drei Reihen von verschiedenen Projekten. Wir können diese Zeile erstellen, indem Sie div verwenden. Div ist eine Art Container, so dass es aus verschiedenen Elementen bestehen kann. Es muss nicht besteuert werden, es kann ein Bild sein. Also, es ist wie eine generische Komponente. Also, wir haben zuerst, wenn, also haben wir das erste, zweite und dritte Projekt im Arbeitsbereich. Lassen Sie uns etwas Text hinzufügen. Wir können h2 Überschrift für Werke verwenden, Sie können die gleiche Überschrift für Abschnitt verwenden, „mein Team“, und die letzte, Kontakt. Lassen Sie uns die Seite aktualisieren. Wir haben Arbeiten, mein Team, Kontakte. Lassen Sie uns weitere Elemente zu Arbeitsabschnitt hinzufügen. Wir haben Bild, Überschrift, eine weitere Überschrift, einen Teil eines Textes und einen Link. Wir können hier sehen, dass dies eine kleinere Überschrift ist als diese und diese. Also, wenn das h2 ist, wäre dies h3, und das ist h4. Also, erstes Element h4, lassen Sie mich den Text überprüfen, es ist Branding und Web und das Bild. Das Bild dort ist eine Ananas. Pineapp, JPEG, Alt, Ananas Lass es uns retten. Wir haben Überschrift und das Bild, und wir vermissen den Text hier mit der Überschrift und einem Link. H3 pineapp, Absatz. Wir verwenden break, br, um den Inhalt zu trennen. Das ist unsere neue Linie, und wir werden die Absätze schließen. Lassen Sie uns auffrischen und sehen. Wie Sie sehen können, befindet sich jedes neue Element in der neuen Zeile. Dank der Pause. Der letzte ist der Link. Wir wissen nicht, wo die Website verlinkt wird, so können Sie einfach eine leere href hinzufügen, oder eine schließende und innerhalb des Links, fügen Sie den Namen der Aktion. Also, besuchen Sie die Website. Unsere Rubrik ist codiert. Die zweite ist genau die gleiche, aber die Reihenfolge wird geändert. Also, wir werden zuerst h3, Absatz Link, h4 und ein Bild haben. Also, h3, ich schließe den Absatz und den letzten, den Link. Wir können den gleichen Artikel kopieren, und der erste Abschnitt ist Ihre Hausaufgaben, denn wie Sie aussehen, ist es genau das gleiche wie der erste Abschnitt. darfst also einfach nicht kopieren. Oh, und ich habe das Bild natürlich vergessen. Also, es ist hier, es ist gesundes Essen, und natürlich h4 Branding und mobil. Wir speichern und laden die Seite neu. 13. Aufbau eines HTML-Gerüsts – Teil 2: Lassen Sie uns meinen Teamabschnitt programmieren. Also haben wir eine Spalte, die aus zwei Bildern und einer Spalte mit Überschrift und Absatz von Text besteht . Also, fangen wir mit den Bildern an. Mein Team, so Bild, Team sorry, Team eins, Alt, Teambild, ein anderes Bild, Teambild. Wir haben die Überschrift und einen Textblock, also einen Absatz. Wie Sie sehen können, ist es ein bisschen chaotisch. Also, lasst uns es sauberer machen, und lasst uns Pause machen oder zwei Pause machen. Hier können wir den Absatz schließen und eine Liste erstellen. Also, das wäre unser Listeneintrag. Ein weiterer, schließender und ein anderer und der letzte. Wenn Sie die Liste schließen, klicken Sie natürlich auf Speichern und aktualisieren. Wir haben zwei Bilder, Überschrift, Absatz, Text und die Liste. Ein weiterer Abschnitt, Kontakt, also haben wir Absatz, zwei Bilder. Also, wir haben eine E-Mail, einen weiteren Absatz. Lassen Sie uns auch Aufräumung und Absatz für die Adresse tun. Break, Break, klicken Sie auf Speichern und zwei Bilder. Contact1.jpg, wir können es leer lassen. Kontakt2, das war's. Aktualisieren Sie es einfach und wir vermissen die Fußzeile. Also haben wir vier Icons, also vier Bilder. Der Hintergrund, wie Sie die sozialen Medien sehen können. Wir können dies als Hintergrund tun, nicht als Text und der Absatz ganz unten. Lassen Sie uns Absatz setzen, weil es einfacher ist für jetzt und Symbole. Wir haben Twitter svg alt Twitter-Symbol. Ein anderer wäre Facebook, Facebook-Symbol, Facebook. Wir haben Pinterest. Übrigens nehme ich die Namen der Dateien aus diesem Verzeichnis. Ich kenne sie nicht auswendig, obwohl die Benennung ziemlich einfach ist. Haben wir ein Instagram? Instagram-Symbol. Alle werden auf die sozialen Medien verlinkt werden. So können wir jedem Bild Namen hinzufügen. Vergessen Sie natürlich nicht, das Tag zu schließen. Lasst es uns auffrischen. Nun, Sie können jetzt sehen, dass der Raum weiß ist. Warum ist das so? Dies liegt daran, dass wir SVG-Symbole verwenden und sie ziemlich groß sind. Also, wir kümmern uns um es in CSS. Wenn wir den Hintergrund zum Körper hinzufügen, zum Beispiel rosa, können Sie sehen, dass das Symbol sehr groß und breit ist, deshalb ist es nicht auf dem weißen Hintergrund zu sehen. SVG nimmt den gesamten Speicherplatz, den es in Anspruch nehmen kann, also dehnt es sich normalerweise nur auf 100 Prozent Breite, aber wir werden es in CSS ändern. Also, mach dir keine Sorgen dafür. Also, aktualisieren Sie die Seite und wir sind bereit, unser Styling und Bootstrap-Grid hinzuzufügen. 14. Bootstrap-Raster – Teil 1: In dieser Lektion werden wir lernen, wie Bootstrap-Grid zu verwenden. Es gibt Grid-Website, die alle wichtigen Informationen sammelt. Ich werde mich nur auf einige Teile konzentrieren, weil wir unsere Website so schnell wie möglich beenden wollen. Aber wenn Sie dieses Thema erkunden möchten, sind Sie mehr als eingeladen, sich die Bootstrap-Dokumentation anzusehen. Also das erste, was wir tun müssen, ist das erste, was wir tun müssen, Bootstrap-Grid zu unserem HTML hinzuzufügen. Wenn wir unsere HTML-Vorlagenordner öffnen und in CSS-Ordner gelangen, können wir sehen, dass es zwei Dateien gibt; Stil CSS und Bootstrap-Gitter CSS. Also müssen wir dieses gesamte Blatt zu unserem HTML-Dokument genauso wie das Hinzufügen von Style-CSS hinzufügen. Also, wir kopieren das Link-Tag und wir fügen den richtigen Namen hinzu. Es ist Bootstrap-Grid, und wir speichern es. So können wir jetzt endlich anfangen, Gitter zu verwenden. Lassen Sie uns jetzt Disk 2 Spalten erstellen. Wenn Sie in der Dokumentation ein wenig nach unten scrollen, werden Sie sehen, dass wir zwei Spalten erstellen können. Dies ist der Code, also haben wir einen Container, der die Breite begrenzt. Wir haben die Reihe. Alles, was in der Reihe ist, wird versuchen, nahe einander zu stapeln. Wir haben div mit Klasse Kohle und einem anderen, und sie sind nahe beieinander, weil wir hier 100% Breite haben , also ist es wie eine Pause. Es ist so, als würde dieses Element in die neue Zeile gehen. Was sich hier widerspiegelt. Also lasst es uns versuchen. Wir werden Zeilenklasse verwenden und wir werden dies zu unserem Header hinzufügen. Header Abschnitt ist hier. Also gehen wir zum Code-Editor, wir fügen Zeile hinzu. Die nächste Sache ist, Klasse Kohle zu unserer linken Spalte und der rechten Spalte hinzuzufügen. Dank dessen werden sie nahe beieinander sein. Lassen Sie uns auffrischen und sehen. Und wir haben zwei Säulen. Wir können es untersuchen. Vielleicht wäre es einfacher, auf dem Boden zu haben. Wir haben ganze Reihe, Kohle 1 und Kohle 2 da sind einfach nah beieinander. Wir können auch einen Hintergrund wie ein Drophintergrund hinzufügen , um zu sehen, dass die Spalten erstellt werden. Sag gelb. Hier haben wir zwei Spalten und alles, was ist innerhalb Abschnitt Tag. Also jede Überschrift, der Absatz, werden sie in dieser Spalte sein. Okay, lassen Sie uns aktualisieren und nehmen wir die Farben aus dem Projekt. Ich verwende Photoshop, ich verwende Photoshop und Farbauswahl, aber Sie können auch mein Dokument verwenden, das sich in einem Ordner befindet. Hallo Farben, Textdokument, wo Sie alle Farben und den Text finden. So wäre es einfacher für Sie, die Website schnell zu codieren. Also für die erste linke Spalte, dass wir den marineblauen Hintergrund hinzufügen müssen. Wir müssen eine andere Klasse hinzufügen, um sie zu unterscheiden. Also hier sollten wir hinzufügen, links Kohle. Raum ist genau wie die Kombination der Klassen. Es bedeutet also, dass es Klasse Kohle und es gibt eine andere, linke Kohle. Also lassen Sie uns es in Stilen CSS erstellen. Links Kohle. Vielleicht im Hallo Text, Hintergrundfarbe und ich füge Textcode von Photoshop ein. Lass es uns retten. Ich bin Sparindex HTML, erfrischend und dada. Meine Seite hat einen marineblauen Hintergrund. Lassen Sie uns dasselbe für die zweite Spalte tun. Ich schaffe die richtige Kohleklasse. Hintergrundfarbe. Dies ist die türkisfarbene Farbe und das Hinzufügen dieser Klasse zu diesem Abschnitt. Also das ist mein Hello Abschnitt, marineblau Abschnitt und türkis Abschnitt. Und es ist erledigt. Wir kommen näher. Jetzt können wir auf der arbeiten, eine andere auf der Arbeit Abschnitt. Siehe auf dem Layout, dieser Inhalt ist zentriert. Diese Breite ist also nicht 100% des Webbrowsers. Es sind zum Beispiel 1000 Pixel und es ist zentriert, was auch immer Ihre Auflösung ist. Also werden wir Container-Klasse verwenden. Das ist, was geschrieben ist und die Dokumentation. Container bieten also ein Mittel, um Ihre Website-Inhalte zu zentrieren und horizontal zu verpacken. Verwenden Sie Container-Klasse für reaktionsschnelle Pixelbreite oder Containerflüssigkeit für Breite 100 Prozent. Wir werden eine reaktionsschnelle Pixelbreite verwenden. Also lassen Sie uns Container zum ganzen Haupt hinzufügen. Lassen Sie uns die Seite aktualisieren und Sie können sehen, dass Container funktioniert. Sie können dies auch überprüfen und überprüfen. Haupt. Hier haben Sie mehr Informationen über die Breite und das Bootstrap-Gitter. Wenn Sie neugierig sind, können Sie dies überprüfen. Also die aktuelle Breite des Containers für mich ist es 1140 Pixel. Ich rede das, das ist mein Fall, weil ich nicht weiß, was Ihre Bildschirmauflösung ist. Wenn Sie die Breite Ihres Browsers ändern, werden Sie sofort sehen, dass sich die Breite des Containers ändert. Okay, also haben wir den Container, jetzt möchten wir zwei Spalten innerhalb des Arbeitsabschnitts erstellen. Lassen Sie mich das auf dem Layout zeigen. Wir haben also eine Spalte für das Bild und die zweite für den Text. Hier ist der Breitenabschnitt. Wir müssen das in zwei Behälter teilen. Ein Container wäre also eine Spalte und wir schließen ihn danach. Ich bin GTAC, weil es in der ersten Spalte ist. Wir können es kopieren. Und die zweite Spalte mit dem Text und Schließen. Warum brauchen wir ein anderes div? Also ein weiterer Denari-Container zum Erstellen der Zeile. Also in einer Reihe haben wir zwei Spalten nahe beieinander. Lassen Sie mich das speichern und die Seite aktualisieren. Und Bang, wir haben zwei Säulen. Also lasst uns die nächste Reihe machen. Wir haben gesundes Essen. Dies ist eine Zeile, eine Spalte für den Text und die zweite für das Bild. So können wir Zeile kopieren und hier einfügen. Und wieder wäre dies eine Spalte und das wäre die zweite. Also lassen Sie uns Code div Klasse Kohle. Natürlich müssen wir es schließen. Bitte denken Sie daran, es ist super wichtig. Und die zweite Kohle. Also innerhalb einer Zeile, die hier beginnt und hier schließt, haben wir linke Spalte und rechte Spalte. Und Knall, es funktioniert. Also wären die Früchte deine Hausaufgaben. Sie müssen eine Zeile, eine Spalte für das Bild und die zweite für den Text erstellen. Ich kann Ihnen einen Hinweis geben. Dies ist das gleiche wie dieses, aber das einzige, was anders ist, ist das Bild und der Text. Es funktioniert einfach wie Kopieren und Einfügen. Wenn wir aktualisieren, können Sie sehen, dass wir fast das gleiche Layout haben. Gehen wir zurück zu meinem Team. Wir haben die Überschrift und hier haben wir eine Spalte mit den Bildern und die zweite Spalte mit dem Text. Auch hier ist die Situation die gleiche. Wir können Zeile kopieren. Also füge ich Zeile ein. Ich mache die Registerkarte hier, nur um zu sehen, welche Registerkarte das Elternteil ist. Also hier schaffen wir, Kohle und wir schließen es nach Bildern, weil diese Kohle nur Bilder und die zweite Kohle enthält. Okay, also haben wir eine Kohle mit den Bildern und die zweite, die hier mit einem sehr langen Text schließt. Und alles sollte in der Reihe sein, aber wie Sie sehen können, habe ich es nicht geschlossen, weil es nicht unterstrichen ist. Das ist also meine Schuld. Lass es mich reparieren. Ja, ja. Jetzt ist es unterstrichen. Großartig. Speichern Sie es. aktualisieren. Wenn wir es aktualisieren, sehen wir, dass es keine zwei Spalten gibt. Es gibt nur einen. Und der Grund ist, dass die Bilder ziemlich groß sind. Also, wenn wir Kohle eingeben, wird es nur so viel wie die Menge des größten Bildes nehmen. Eine andere Sache kann hier Bootstrap ist zu tippen, wie viele Kohlen es nehmen sollte. Stellen Sie sich vor, wir haben ein Raster von 12 Spalten. Und wir wollen diesen Teil haben, und dieser Teil sollte die Hälfte sein. Also sechs von ihnen. Also schreiben wir. Medium ist für die mittleren Bildschirmgrößen. Und jetzt plötzlich, wenn wir den Text drinnen haben, auf dem Bild. Wir können auch CSS-Eigenschaft hinzufügen, max Breite 100%. Unser Bild wird innerhalb des Containers gekappt. Selbst wenn es eine größere Größe hat, wird es auf die maximale Breite eingestellt, die es dauern kann. Hier, das ist unser Container. Lasst uns die Modifikationen machen. Wir müssen Kohle hinzufügen, Medium sechs, speichern Sie es und wir müssen hinzufügen und Größe dieses Bildes sollte maximale Breite von 100 Prozent des übergeordneten Containers nehmen . Lassen Sie uns auffrischen und wir haben endlich zwei Spalten. Okay, also kontaktieren wir... 15. Bootstrap-Raster – Teil 2: In dieser Lektion werden wir die Kontakt- und Fußzeilenabschnitte behandeln. Also, wir werden das Gitter dort hinzufügen. Lassen Sie es uns programmieren. Wieder können wir Zeile kopieren. Wir gehen zum Kontaktbereich, also reihen wir, schließen wir die Reihe. Lassen Sie uns eine Spalte erstellen, Klasse col. Also erstellen wir für jedes Bild eine weitere Spalte. Lassen Sie uns erfrischen und knallen! Wir haben drei Säulen. Perfekt. Jetzt ist die Zeit für die Fußzeile, die mit weißen Symbolen gefüllt ist. Fußzeile hat also vier Social-Media-Symbole und einen Text ganz unten. Es hat auch Hintergrund, so können wir es hinzufügen. Wir können auch die Größe der sozialen Medien definieren. Lassen Sie uns CSS Selektor Fußzeile, Hintergrundfarbe erstellen , und ich füge die Hintergrundfarbe ein, die ich aus dem Dokument genommen habe. Ich rette und erfrische. Wie Sie sehen können, hat der Hintergrund diese lachsähnliche Farbe, aber die Symbole sind ziemlich groß, also lassen Sie uns sie kleiner machen. Jedes Bild wird Social-Icon-Klasse haben , und speichern. Ich muss soziale Icon-Klasse erstellen. Nehmen wir an, dass die Höhe 60 Pixel betragen wird. Das ist besser. Wir können hier noch ein paar weiße Räume sehen. Lassen Sie uns Inspect verwenden, um zu überprüfen, was der Grund dafür ist. Wenn wir Körper auswählen, können Sie diesen orangefarbenen Umriss sehen. Wir können auf die Computer-Tab zu bekommen und sehen, dass Körper Rand acht Pixel hat. Für den Rand ist dies der Standardstil aus dem Browser. Also für einen Körper müssen wir die Ränder und die Polsterungen zurücksetzen, und es ist fast da. Wir können hier immer noch ein wenig Leerraum sehen. Ich schätze, es ist aus HTML. Das sind einige Tricks, aber mach dir keine Sorgen. Wenn wir Höhe 100 Prozent hinzufügen, wird es jetzt in Ordnung sein. Also lassen Sie uns die Stile anwenden. Also für Körper haben wir Marge Null, so dass wir die Standardeinstellungen vom Browser und HTML-Selektor ganz oben wegen des Auffüllens der gesamten Seite zurücksetzen . Wir fügen Höhe 100 Prozent hinzu. Es dauert also die ganze Höhe des Webbrowsers des Ansichtsfensters. Lassen Sie uns auffrischen und fast da. Also, jetzt möchten wir diese Symbole zentrieren, und dieser Text sollte sich im gleichen Container wie der Rest des Inhalts befinden. Also, zuerst fügen wir Container hinzu. Es ist in einem anderen div. Das ist besser. Zentrierung. Leider haben wir nicht genug Zeit, um sich auf alle Probleme mit CSS zu konzentrieren, wie man es horizontal zentriert oder vertikal rendert, aber ich werde Ihnen einige Tricks zeigen. Daher möchten wir diesen Container mit den Symbolen zentrieren. Wir können dies tun, indem wir div Klasse, soziale Symbole Container erstellen. Wir erstellen die gleiche Klasse in CSS. Die andere Sache, die wir hier tun werden, ist das Schreiben von Text-Align-Zentrum weil es den Inhalt zentriert, der sich innerhalb des Content-Containers befindet. Funktioniert. Natürlich brauchen wir einige Leerzeichen zwischen den Symbolen. Wir können es hier tun, indem wir Rand, die obere, untere und die rechts/links hinzufügen. Lasst uns nachsehen. Ja, das ist besser. Fast da, ganz nah dran. Jetzt ist es höchste Zeit, sich um Typografie, Farben und Größen zu kümmern. So sehen wir uns in den nächsten Klassen. 16. So gestaltest du die Navigation: Bevor wir in Typografie und Farben einsteigen, lassen Sie uns das Problem der Navigation lösen. Wie Sie sehen können, ist es vertikal, nicht horizontal. Also zeige ich Ihnen hier eine Sache. So haben wir unsere Navigation oben auf dem HTML-Dokument erstellt. Die Liste hier ist standardmäßig vertikal, daher müssen wir sie horizontal machen. Ich kann einen Selektor erstellen. Durch die Anzeige jedes li, also jedes Element in der Liste als Inline-Block. Es ändert sich von Anzeigeblock zu Anzeige Inline-Block. Anzeigen von Blöcken des Blockwerts bedeutet, dass er den gesamten Speicherplatz benötigt. Wie Sie sehen können, dauert es 100 Prozent Breite. Um Ihnen zu zeigen, dass es standardmäßig blockiert ist, kann ich es eingeben und nichts hat sich geändert. Aber wenn wir Inline-Block anwenden, ändert es seine Eigenschaften und jedes Element, das Anzeige Inline-Block nahe beieinander platziert hat. Also sind wir fast da. Lassen Sie uns eine Klassennavigation erstellen, und schreiben Sie CSS-Selektor-Navigation. Also Navigation, das ist unsere Klasse. Dies ist die ganze Liste, aber wir wollen das Ziel li, das ist das Element dieser Navigation. Der Web-Browser wird so funktionieren. Lassen Sie uns Klassennavigation finden, und lassen Sie uns jedes li Element finden, so dass jedes Element auf der Liste. Inline-Block anzeigen. Fast da. Wir würden auch gerne ul zentriert haben. So können wir Text ausrichten Mitte hinzufügen. Sie können es kopieren, und wir können Navigation erstellen, Text-ausrichten Zentrum. Also Navigation, es ist unsere Liste und es wird zentriert sein, und fast dort. Eine andere Sache ist, dass die Navigation als neue Ebene auf diesen beiden Spalten platziert wird. Hier, wir haben den weißen Raum. Um es zu ändern, müssen wir die Position ändern. Wir haben keine Zeit, ganze Theorie über Positionen zu lernen, aber ich zeige Ihnen nur einen Trick. Wenn wir auf die gesamte nav Position hinzufügen, fixiert. Es ist weg. Es ist irgendwo da. Aber wir müssen es auch auf die Vorderseite legen. Wir haben das mit Z-Index gemacht. Also Null, es ist durch die nächsten Elemente verborgen, also durch den gesamten Header. Also müssen wir höher hinzufügen, zum Beispiel eins. Jetzt können Sie es sehen. Wenn wir scrollen, ist das Menü fixiert. Es ist also wie ein klebriger Header, aber es ist nicht zentriert. Also, jetzt möchten wir die Navigation zentrieren. Es gibt noch einen Trick. Also müssen wir links Null und rechts Null schreiben, und der Inhalt wird zentriert sein. Sie können sehen, dass die Navigation alle anderen Elemente überlagert, also lassen Sie es uns kopieren und das ist auf die Navigation, nav, und es funktioniert. Wir können mehr Leerzeichen zwischen den Elementen hinzufügen, so dass wir Rand Null von oben und unten hinzufügen können, aber 15 Pixel von links und rechts, und es ist da. Also setze ich auch die Farbe ein. Sieht so aus. Jetzt ist es Zeit für Farben, Typografie, Räume. 17. Typografie und Farben – Teil 1: Jetzt kümmern sich um Typografie und Farben, und ich bin sehr aufgeregt für diesen Teil, weil es völlig den Charakter der Website ändern kann. Also, fangen wir mit der Suche nach den Schriftarten an, die wir gemacht haben, werden wir brauchen. Also habe ich im Layout Prata und Inconsolata verwendet. Also öffne ich Google-Schriftarten und suche genau nach Prata. Ich füge es hinzu und Inconsolata, ja. Ich wähle auch diese Schriftart aus. Ich passe es an. Ich brauche sowohl für Inconsolata als auch, und hier zum Einbetten kopiere ich den Link. Ich habe zwei Schriftarten und ich füge sie in den Hutbereich ein. Also, der Schriftlink ist integriert, aber wir haben immer noch nirgendwo in der Schriftfamilie. Also, lassen Sie uns die Namen überprüfen. Wir haben Prata und Prata wird für alle Überschriften verwendet. Also kann ich einen Gruppenselektor wie h1, h2, h3, h4, h5, alle Überschriften schreiben h2, h3, h4, h5, , und ich verwende Prata Schriftart. Jetzt können wir die Seite aktualisieren und diese Schriftart hat sich geändert. Großartig. So können wir jetzt Inconsolata hinzufügen, weil Inconsolata überall im Textkörper verwendet wird. Wir können es auf den Körper anwenden. So wird der gesamte HTML-Code in Inconsolata Schriftart geschrieben, mit Ausnahme der Überschriften, die in Prata sein werden. Lassen Sie mich aktualisieren und wir haben die Schriften geladen. Jetzt ist es an der Zeit, dem Text die richtigen Farben und Schriftgrößen hinzuzufügen. Wie wir wissen, sollte das weiß sein. Also, wir gehen zum linken Codeabschnitt und wir können in CSS finden und Farbe weiß hinzufügen. Wir wollen auch diesen Text zentriert haben. Ok. Hallo sollte definitiv größer sein, 150 Pixel, so können wir Informationen hinzufügen, dass der aktuelle 150 Pixel ist. Es ist auch kühn hier. Lassen Sie mich das in den Doc-Tools überprüfen. Standardmäßig ist die Schriftstärke fett, aber im Projekt ist es normal. Also schreibst du normal. Kannst du den Unterschied sehen? Also, wir kopieren es auch, eigentlich alle Header. Also, es ist normal hier. Mir wurde gerade klar, dass wir für die Navigation auch Prata verwenden, also müssen wir die Änderung vornehmen, also nehmen wir Prata. Also, wir haben Prata dafür und es sollte 22 Pixel haben. Wir kommen näher. Dieser Text sollte zentriert und weiß sein. Also tatsächlich können wir die gleichen CSS-Eigenschaften zu beiden Klassen hinzufügen, also links-col und rechts-col, und wir tun dies, indem wir Spalte hinzufügen. Ich nehme die CSS-Eigenschaften, füge sie ein, speichere und aktualisiere sie. Sie können sehen, dass es viel besser ist. Wir kümmern uns später um diesen Teil. Daher sollten wir uns jetzt auf die Typografie und die folgenden Abschnitte konzentrieren. Scrollen Sie nach unten, um mehr über mich zu erfahren. Es ist in Blau und es ist zentriert, so dass wir hier Klasse erstellen können, Intro. Eigentlich ist es Scroll und wir fügen diese Klassen hinzu. Farbe, dies ist die Farbe, die ich kopiert habe, und text-align: center. Voila. Okay, jetzt können wir uns auf die Überschriften wie Werke, mein Team und Kontakt konzentrieren, und sie haben alle die gleichen Größen und die gleichen Schriftfelder, aber sie haben unterschiedliche Farben. Also, mal sehen. Wir verwenden h2. Also, für h2, müssen wir die Schriftgröße definieren. Es sollte 100 Pixel sein, aber wir sollten auch Klassen erstellen, die uns helfen, die Überschriften zu differenzieren und wir werden in der Lage sein, Farben hinzuzufügen. Mein Vorschlag besteht also darin, dem gesamten Abschnitt Klasse hinzuzufügen. Also, der nächste Abschnitt Team, class = „mein Team“. Denken Sie daran, dass Sie Leerzeichen machen können, während Sie den Klassennamen hinzufügen und wir kommen zum letzten Abschnitt, Kontakt. So können wir kombinieren Selektor schreiben wie Werke h1, h2, sollte diese Farbe haben. Mein Team h2 sollte eine andere Farbe und der letzte Abschnitt Kontakt h2 Farbe haben. Lassen Sie uns auffrischen. Kontakt, so hinzufügen, speichern. Wir haben Arbeiten. Wir haben mein Team und Kontakt. Jetzt können wir uns um diese Rubriken kümmern. Sie haben hier alle die gleiche Farbe. Das hier ist anders. Auch hier müssen wir kombinierte Selektoren erstellen. 18. Typografie und Farben – Teil 2: Also, lassen Sie uns jetzt Styling für h3 erstellen. Also, h3 hat Schriftgröße 50 Pixel. Für Arbeiten hat es Farbe von diesem. Für mein Team hat es eine andere Farbe. Wie Sie sehen können, ist es blau, nicht grün. Lass es uns retten, und ja, das ist derjenige. Die anderen Änderungen, die benötigt werden, ist die h4. Also, h4 hat seinen Hintergrund und seine Farbe. Also, wir schreiben h4, Schriftgröße 32 Pixel. Farbe, wir haben Hintergrundfarbe. Lassen Sie mich es speichern und aktualisieren. Wir sind sehr nah, aber das brauchen wir nicht, aber wenn wir in den Entwurfswerkzeugen sehen, ist die Überschrift ein Blockelement, also dauert es eine ganze Breite. Wir müssen es so einstellen, dass Inline-Block angezeigt wird. Ja, und wir müssen alle Ränder zurücksetzen. Wir möchten auch Padding hinzufügen, so dass wir mehr Platz um den Text und innerhalb des türkisfarbenen Containers haben. Also, lassen Sie uns 10 Pixel hinzufügen. Lassen Sie mich sehen, es gibt nur ein paar von ihnen, es ist wie drei Pixel. Lassen Sie mich es kopieren und in den Code einfügen, der da ist. Sparen. Wir sind fast da. Was ist mit den Links? Es gibt Buchstabenabstände und es hat eine andere Farbe. Also, alle Links haben Abstand, zwei Pixel, Farbe und Größe, 18 Pixel. Es hat nicht die Unterstreichung im Projekt, und es ist fett. Also, unterstreichen Sie seine Textdekoration. Also, wir müssen es zurücksetzen, und natürlich, Schriftgewicht fett. Ich denke, wir können den Buchstabenabstand erhöhen. Ich habe das Falsche getan, also änderte sich. Das sind die Links. Wir können auch die Änderung im Textkörper sehen, da es für Arbeiten grün ist. Also, lassen Sie uns das für Arbeiten erstellen. Die Farbe ist diese. Es hat sich geändert. Der Text hier ist ziemlich gequetscht, also möchte ich eine größere Zeilenhöhe hinzufügen, um mehr Luft hinzuzufügen. Lassen Sie uns also festlegen, dass für jeden Absatz die Zeilenhöhe 134 Prozent beträgt. Also, jetzt ist es einfacher, es zu sehen. Ich werde es kopieren und einfügen. Erfrischend. In den nächsten Lektionen werden wir an den endgültigen Layout-Optimierungen arbeiten. 19. Layout-Optimierungen – Teil 1: Konzentrieren wir uns nun auf den oberen Teil des Layouts, um es dem, das wir im Projekt haben, sehr ähnlich zu haben. Also, ich würde gerne zwei Boxen haben. Wie Sie sehen können, haben wir mehr Platz. Hier, wir können es sehen. Also, wir müssen den Container für Überschrift und Absatz hinzufügen, und wir müssen einen Container für das Bild und die Beschriftung haben. Also, wir werden nach Index suchen, wir werden nach links Col und rechts Col suchen. werden wir div für den Hello Abschnitt und den Bildbereich erstellen. Also, lassen Sie uns den Top-Container aufrufen, wir schließen das div, achten darauf, dass unsere Spalte sauber ist, Sie können dieses div kopieren und es der rechten Spalte hinzufügen. Jetzt müssen wir es in Stilen erstellen. Die Reihenfolge in CSS spielt eigentlich keine Rolle, aber es ist gut, sie logisch zu halten, so dass wir mit den sehr grundlegenden Elementen oben beginnen können und später Header haben und wir werden ganz unten in die Fußzeile gehen. Also, gehen wir zurück zu unserer neuen Klasse, die Top-Container ist, okay. Also, jetzt lassen Sie uns CSS-Eigenschaften zu unserer Top-Container-Klasse hinzufügen. Ich habe gemessen, dass es Breite etwa 500 Pixel haben sollte. Ich speichere und aktualisiere dann die Seite. Fast fertig, jetzt müssen wir es mit Marge Null Auto zentrieren, sparen und wir sind sehr nah. Wir müssen mehr Abstand zwischen dem Bild und dem oberen Rand hinzufügen und wir müssen auch den Abstand zwischen der Überschrift und dem Text verringern. Also, ich überprüfe die Leerzeichen, und dann kann ich sehen, dass die Überschrift Rand hat. Also, wenn ich auf Null editiere, können Sie sehen, dass es [unhörbar] gibt. Wir können auch Höhe für den linken Col und den rechten Col hinzufügen . Wir können die minimale Höhe sollte 90vh, die eine Ansichtsfensterhöhe ist, einstellen. Es bedeutet, dass es 90 Prozent unseres Browserfensters dauern wird. So können wir diesen Effekt haben, dass wir das hier als Cover sehen können und wenn wir nach unten scrollen, sind die Projekte unten. Also, lassen Sie uns diese hinzufügen, links und rechts col, Höhe 90vh, Ansichtsfensterhöhe Einheit. Ich vergesse, welcher Marge Null hinzuzufügen? Und jetzt müssen diese Elemente zentrieren. Wir werden Flexbox benutzen. Leider komme ich nicht ins Detail, sondern folge einfach meinen Schritten. Also, wir müssen zu unserer linken Col und rechten Col, diese Anzeige Flex-Eigenschaft hinzufügen . Also, lassen Sie uns zurück nach links col und rechts col, wählen Sie diese und geben Sie display flex ein. Es bedeutet, dass Flexbox ein Flug sein wird. Flex-Box hilft uns, Elemente auszurichten, um sie horizontal oder vertikal zu zentrieren. Es ist eine sehr nützliche Dinge, also wenn Sie es mehr erkunden möchten, sind Sie total ermutigt. Wir wollen es auch in der Hauptachse zentrieren, die die horizontale Achse und auch in der vertikalen Achse ist. Lassen Sie uns speichern und aktualisieren. Die Elemente sind zentriert. Ok. Konzentrieren wir uns jetzt auf den Abschnitt meiner Arbeit. 20. Layout-Optimierungen – Teil 2: Konzentrieren wir uns nun darauf, diese Überschriften auf dem Bild zu überlagern. Schauen Sie sich einfach das Projekt an und Sie werden sofort wissen, was unser Ziel ist. Also, um Gutes zu tun, muss ich Ihnen sehr schnell über Positionen erzählen. Also, wir werden Position relativ und Position absolut in CSS verwenden. Also, für das Bild, werden wir eine Position relativ anwenden und für die Überschriften, Position absolut. Wie Sie sehen können, ist es weg, aber keine Sorge, wir werden Top-Null, linke Null und Z-Index eins und zurück hinzufügen . Plötzlich haben wir unsere Überschrift, die das Bild überlagert. Also, dank dessen, dass wir den übergeordneten Container als unsere Position relativ angewendet haben und dieses Element, das das übergeordnete Element der Position absolut überlagern muss, können wir diese Art von Effekt erzielen. Also, lassen Sie es uns in unseren Code anwenden. Lassen Sie uns nach der Ananas suchen. Ja, wir sind hier. Also, wir müssen Klasse für das Bild hinzufügen. Also, es wäre funktioniert Bild und wir müssen dies zu jedem Bild hinzufügen, das wir im Arbeitsbereich haben, und wir müssen Klasse unter Arbeiten erstellen. Also, funktioniert Bild. Also, works-img, Position relativ und für jede h4 im Werksabschnitt, wenden wir Position absolut, z-index eins an. Lassen Sie uns die Seite aktualisieren. Im Projekt überlagert die Überschrift das Bild, aber es ist auch darüber hinaus, so dass wir tun können, indem wir oben, sagen wir, minus fünf Pixel hinzufügen. Also, mal sehen. Ja, es ist ein bisschen besser, aber ich schätze, es wären 25. Das ist viel besser. Also, kopieren wir es, fügen Sie es ein und speichern Sie es. Eine andere Sache ist, dass wir Zwischenräume zwischen den Bildern haben, und wenn wir es mit unserem Projekt vergleichen, können Sie sehen, dass die Bilder hier nebeneinander liegen. Wir können es tun, indem Sie keine Dachrinne Klasse hinzufügen. No-Gutter-Klasse ist bereits im CSS-Raster von Bootstrap definiert. Also, die Sache, die wir hinzufügen müssen, ist keine Rinnen Klasse und wir fügen es, zum Beispiel, zu unserer Zeile und dank ihm, die Rinne zwischen den Spalten und Zeilen, die normalerweise 15 Pixel in Bezug auf horizontale Polsterung ist, es wird zurückgesetzt. Also, lasst es uns versuchen. Also, wir haben unsere Arbeitsabteilung. Wir fügen die erste Zeile hinzu. Also fügen wir keine Dachrinnen hinzu. Entschuldigung. Ich kopiere es und füge es in das zweite und das dritte Element ein. Ich speichere und aktualisiere die Seite. Nun, man kann sehen, dass sich etwas geändert hat, aber die Bilder sind immer noch weit voneinander entfernt. Ich werde DevTools verwenden. Nun, es ist besser, aber vielleicht werde ich auf den Boden legen damit du sehen kannst, dass wir diesen Raum verringern wollen. Der Grund dafür ist es wahrscheinlich die Bildbreite weil dies das Bild ist und das ist die ganze Spalte. Also, die Säule ist größer. Also, wir müssen dieses Bild vollständig auf den Container dehnen. Also fügen wir mit 100 Prozent hinzu und das Bild wird angepasst. Das ist großartig, aber jetzt müssen wir eine andere Sache tun, die Füllungen zu dem gesamten Text hinzufügt, denn wie Sie sehen können, klebt es an der linken Seite des Bildes. Also, lassen Sie mich das kopieren und es zu works-img hinzufügen. Also, jetzt für jede Rolle der Werke, müssen wir div erstellen, das den Text hier und diesen und diesen umhüllt. Also, öffnen Sie den Code. Dies ist unsere erste Arbeit und hier haben wir den Text, also erstellen Sie div Klasse extra Dachrinnen. Wir müssten natürlich das div schließen. Wir kopieren es und fügen für die anderen Abschnitte und schließen auch. Jetzt müssen wir natürlich diese Klasse erstellen und CSS-Eigenschaften definieren. Also, es sind zusätzliche Rinnen und wir wollen Polsterung Null von oben und unten und 60 Pixel von links nach rechts haben. Lassen Sie uns die Seite aktualisieren und schließlich hat unser Text Polsterungen. Wir können auch die DevTools, zusätzliche Rinnen einchecken und Sie können sehen, dass es 60 Pixel-Polsterungen gibt. es mit dem Projekt vergleichen, können wir sehen, dass dieser Text auf der linken Seite und dieser Text auf der rechten Seite ist, und auch dieser Text ist auf der rechten Seite nicht auf der linken Seite. Also, dafür werden wir Text mit den ganzen Dachrinnen ausrichten. Lassen Sie uns Text auszurichten. Also, wir müssen es auf unsere Stile anwenden. Wir können Klasse erstellen, rechts ausgerichtet, Text ausrichten. Fügen Sie dies zu unserer Arbeit hinzu, die in der Mitte ist, also die zweite. Wir fügen rechts ausgerichtet hinzu, speichern Sie es, aktualisieren Sie und es ist fertig. Also, hier sind die letzten Dinge im Arbeitsbereich mit den Überschriften auf der linken und auf der rechten Seite. Also, hier ist auf der linken Seite und hier auf der rechten Seite. Also, wir nehmen Branding und mobil. Wenn wir hinzufügen, rechts Null, weil es Position absolut ist, so dass Text ausgerichtet nicht wie im vorherigen Beispiel funktioniert, kann ich es Ihnen zeigen, aber das funktioniert nicht. Also, wir müssen die rechte Null hinzufügen, so dass es unser Element auf die maximale rechte Seite des fernen Endes positioniert, so dass wir Selektor jetzt erstellen, funktioniert h4, rechtsbündige Klasse wird rechts Null sein. Also, es bedeutet, dass finde mich Abschnitt mit Arbeitsklasse und finde mich h4, in diesem Abschnitt, der Arbeitsklasse hat und dass h4 diese Klasse haben sollte. Wir müssen auch zu diesem H4 hinzufügen. Also, das ist H4 in der zweiten Reihe der Werke, wir müssen auch diese Klasse hinzufügen, rechtsbündig. Alles ist in Ordnung. Ich aktualisiere die Seite und es ist erledigt. Also, Arbeit Abschnitt fertig ist, hallo Abschnitt ist fertig und jetzt ist die Zeit für mein Team. 21. Layout-Optimierungen in den unteren Bereichen: Jetzt ist die Zeit für mein Team und Kontakt und die letzte Fußzeile. Im Vergleich zu unserer Website ist die Sache, an der wir arbeiten müssen, der Raum zwischen den Bildern und dem Raum, den Überschrift von oben hat. Also müssen wir den Bildern im Teamabschnitt Rand hinzufügen. So können wir class = „img-margin“ hinzufügen und wir können img-margin Klasse hinzufügen, und wir werden margin-bottom haben, sagen wir 20 Pixel, und wir müssen nur aktualisieren, und auch müssen wir den Rand zurücksetzen, der in h3, Marge Null ist. Also fügen wir es zu unserem Abschnitt mein Team hinzu, und wir haben einen größeren Abstand zwischen Überschrift und Text. Also tatsächlich, wir können Rand Null hinzufügen, die oben ist, Null, die Rand von rechts, 50 Pixel oder sogar mehr, 90 Pixel von unten oder vielleicht lassen Sie uns es weniger, 70 Pixel und Null Pixel. Das ist die Abkürzung. Also mein Team h3, es ist hier. Sparen. Wir haben das in unserer neuen Zeile begonnen, also sollten wir auch eine Pause wie diese hinzufügen. Erfrischend und wir haben es, aber die Zeilenhöhe ist zu groß, also lasst uns es auf 130 oder vielleicht 100 in der Schrift ändern. Ja, 100 Zeilenhöhe, 100 werden ausreichen. Fast da. Wir können auch den Abstand zwischen den Bildern vergrößern, so dass der Text mit den Bildern übereinstimmt. Also img-margin, lassen Sie uns 40 hinzufügen. Immer noch nicht da. Fügen wir 60 hinzu. Es ist ein bisschen besser. Und wir können auch mit 100 Prozent hinzufügen. Ok. Konzentrieren wir uns jetzt auf Kontakt. Sicherlich müssen wir der Adresse fett Schriftart hinzufügen, damit wir ein neues Tag verwenden können, das stark ist. Also fügen wir stark hinzu. Es bedeutet, dass der Text auf einer kühneren Version sein würde. Es ist hier und Fußzeile. Fußzeile sollte also unterschiedliche Höhen haben. Es sollte Hintergrund haben und lassen Sie uns überprüfen, was sonst noch. Jup. Also sollte es mindestens 200 haben. Ja, unsere Fußzeile hat Hintergrund, ist höher, und es gibt ein Leerzeichen zwischen Kontakt und Fußzeile. Also haben wir es nicht auf unserer Seite, also lassen Sie es uns hinzufügen. Nehmen wir an, in der Fußzeile wird die Höhe mindestens 220 Pixel betragen. Wir werden Backround haben und ich werde Ihnen zeigen, wie Sie Hintergrund in CSS hinzufügen. Wir werden begrenzt, um URL-Funktion und den Pfad zu unserem Bild hinzuzufügen, das img und socialmedia.svg ist, aber wir sind hier in CSS, also müssen wir zurück zum Hauptordner und dann geben Sie img ein. Wir kamen zurück mit zwei Punkten und Schrägstrich. Und jetzt sind wir hier im aktuellen Ordner, also geben wir img ein und nehmen das richtige Bild, also socialmedia.svg. Es funktioniert, großartig, aber wir wollen nicht, dass sich unser Hintergrund wiederholt, also keine Wiederholung. Wir möchten unseren Hintergrund dehnen, so dass die Hintergrundgröße 60 Pixel oder vielleicht 60 Prozent enthält , aber die Hintergrundposition wäre zentriert. Dies ist also Hintergrundbild, und dank ihm werden wir in der Lage sein, Hintergrundbild und Hintergrundfarbe zu haben, denn wenn Sie das Bild löschen, wird es die Hintergrundfarbe überschreiben, also denken Sie daran. Wir sind sehr nah dran. Wir müssen auch Farbe Weiß hinzufügen. Wir können den Text zentrieren, weil er besser aussieht. Wir können auch Flex-Box hinzufügen, um die Elemente zu zentrieren, so haben wir diese Füllung flex, Justify-Content Center, align-items center. Perfekt, und Rand von oben, um den Abstand zwischen den Bildern aus Kontaktbereich zu erhöhen, sagen wir, 60 Pixel, Pixel, und wir sind bereit. Ich kopiere den ganzen Code und füge ihn in die Fußzeile ein. Sparen. Dies ist unsere Website codiert. Das letzte, was wir tun werden, ist, Links zu unserer Navigation hinzuzufügen. 22. Links zur Navigation hinzufügen: Also, jetzt lassen Sie uns die Navigation mit dem Abschnitt unserer Seite verknüpfen. Aber zuerst gehen wir zum Nav und wechseln wir zu Hallo und funktioniert, und mein Team, okay. Also, um dies zu tun, müssen wir natürlich ein hinzufügen, also das Hyperlink-Tag. Whoops, das ist mein Fehler. Ok. Wir müssen IDs erstellen. Also, der Abschnitt, in dem wir verlinken werden, wird ID haben. Also, wir haben diese Sekte der Header, das ist unser Hallo. Also, wir schreiben id hello, und id ist Schritt für einen Hash. Also, wir haben Klasse, es ist der Punkt, und für ID haben wir Hash. Also, es wird Hash Hallo sein, denn es funktioniert, wir haben ID funktioniert. ID ist eine einzigartige Sache. Also, es ist nur eine ID, wollen eine bestimmte ID auf der Seite. Also, wir haben eine Hallo ID, eine Arbeits-ID, und wir können viele Vorkommen der gleichen CSS-Klasse haben, aber für ID ist es nicht möglich. Natürlich haben wir meine Team-ID, mein Team und Kontakt-ID Kontakt. Also, lassen Sie es uns verknüpfen. Funktioniert mein Team, Kontakt. Lassen Sie uns die Seite aktualisieren. Wie Sie sehen können, haben sich die Sterne verändert. Dies geschah, weil wir einen Selektor erstellt haben. Also, alle diese Regeln werden auf alle acht angewendet. Also, wir müssen es zurücksetzen. Kann diese acht nur auf den Arbeitsbereich beschränken. Also, lassen Sie mich dieses A finden , also können wir schreiben, dass es nur für den Werksbereich funktioniert. Also, für alle A's, die in der Werksabteilung sind. Fast dort haben wir diesen Stil für die Links hier im Werksbereich nicht verloren. Aber jetzt sind unsere Links blau, und wir wollen nicht passieren. diesem Grund, weil jeder Browser standardmäßig ein Blau hat. Wir müssen unsere Farbe von LE anwenden. Also, wir können Navigation LEA hinzufügen , wenden Sie diese Farbe. Sie können diese Farbe von hier entfernen, aktualisieren und fast dort. Die Sache ist, dass wir die Unterstreichung loswerden wollen. Also, Textdekoration keine. Ich schätze, das ist es. Also, lassen Sie mich die Dev-Tools schließen, und lassen Sie mich versuchen, wenn es funktioniert. Funktioniert es? So können Sie durch die Website navigieren. Also, es ist wie eine Ein-Landing Page. Gefällt es dir? Ich hoffe, Sie tun es, und ich hoffe, Sie hatten viel Spaß, während Sie diese Website mit mir. Ich werde Ihnen verschiedene Versionen von Farben und Typografie in der nächsten Lektion zeigen, und es wird eine der letzten Lektionen sein, die diese Klassen hören. Ich bin so froh, dass du so lange bei mir bleibst. Ich würde gerne Ihre Seiten sehen, also posten Sie sie bitte im Community-Bereich. 23. Schlusswort und andere Websiteversionen: Herzlichen Glückwunsch zum Abschluss meines Unterrichts. Ich bin super stolz auf Sie, und ich hoffe, Sie werden es mögen, wenn Sie mit dem Endergebnis zufrieden sind, Ihre Website. Also habe ich zwei weitere Versionen für Sie vorbereitet. Ich änderte nur CSS-Farben und Typ Gesichter zu veranschaulichen, dass Sie sehr leicht wiederverwendendiese Hallo Farben, diese Vorlage, diese HTML-Vorlage für Ihre eigenen Zwecke. So, dass Sie Ihren eigenen Stil wählen können. So sieht unsere Hello Colors Webseite aus. Genau jetzt, nach meinem Projekt. Aber Sie könnten auch die Farbe bei Farbverläufen ändern, die Schriftflächen ändern und sofort seinen Stil und seine Vipe ändern, und eine andere Version, die blaue. So können Sie viele Experimente damit machen und ich hoffe, Sie hatten Spaß. Mein Ziel war es nicht, Ihnen HTML und CSS beizubringen, sondern eine Website für Sie zu erstellen. Ich habe auch einen kürzeren Unterricht vorbereitet. Wenn Sie also Spaß mit CSS-Animationen und SVG haben möchten, zögern Sie nicht, sich ihnen anzuschließen. Ich würde gerne sehen, wie Ihre Websites kommen. Also lassen Sie es mich wissen, indem Sie mir schreiben oder es im Community-Bereich posten. Nochmals vielen Dank und ich hoffe, Sie in den nächsten Klassen zu sehen.