Erstelle eine digitale Visitenkarte mit HTML und CSS

1. Einführung in den Kurs: Hey da, Sie haben vielleicht bemerkt, dass Technologie in so ziemlich jeder Branche da draußen schneller und schneller wächst , und Web-Technologie ist keine Ausnahme. Lernen von HTML und CSS sind große Fähigkeiten, die wir nicht nur für Ihre Karriere, sondern auch nur für Ihr persönliches Wachstum haben. Ich bin Nathan Blair. Ich bin ein Webentwickler und habe HTML und CSS aus Tutorials wie diesem gelernt. Ich kann Ihnen aus eigener Erfahrung sagen, dass Sie es auch tun können. Alles, was man braucht, ist ein paar lustige Projekte, viel Übung und ein wenig Anleitung, um den Einstieg zu erleichtern. Und dieser Kurs wird lernen, indem Sie tun. Wir erstellen ein einfaches HTML- und CSS-Design, das als digitale Visitenkarte verwendet werden kann . Zunächst sprechen wir darüber, wie Sie ein Website-Projekt auf Ihrem Computer einrichten. Dann tauchen wir direkt in ein Design mit CSS Styling ein. Ich überlasse Ihnen ein paar meiner persönlichen Tipps sowie einige Dinge, die Sie vielleicht nach dem Kurs auschecken möchten . Am Ende des Kurses haben Sie eine öffentlich zugängliche Seite und einen Code, den Sie jedem zeigen können. Dieser Kurs ist für Sie. Wenn Sie einige grundlegende Computerkenntnisse haben, vielleicht sogar Design-Fähigkeiten. Aber Sie sind wirklich daran interessiert zu lernen, wie Sie Ihre eigene Website erstellen oder einfache Änderungen an einer bestehenden Website vornehmen können. Sie müssen ein grundlegendes Verständnis dafür haben, wie Sie auf Ihrem Computer navigieren können. Sie benötigen auch einen Code-Editor irgendeiner Art. Jetzt bevorzuge ich Adam, aber viele Leute lieben erhabenen Text oder Visual Studio, das wirklich Ihren Vorlieben entspricht. Ich habe einige Links zu jedem dieser in der Projektbeschreibung gepostet, so dass Sie diese überprüfen können. Schließlich sollten Sie ein gutes Headshot Foto auf Ihrer Seite anzeigen. Oder, wenn Sie es vorziehen, können Sie ein Logo oder wirklich jedes Bild verwenden. Es ist dein Anruf. Sind Sie also bereit, Ihrem Arsenal einige HTML- und CSS-Fähigkeiten hinzuzufügen? Wenn ja, lassen Sie uns mit der Beschichtung beginnen 2. HTML-Dokument und Syntax: weg, richtig, bereit für den Einstieg. Lassen Sie uns zuerst ein wenig über HTML lernen. Was HTML steht für ist Hypertext-Markup-Sprache, und Sie können eine Menge Geschichte lesen, die in H zwei mil ging. Aber im Grunde ist es der Baustein des Web, wie wir es kennen. Wenn Sie sich heute eine Webseite ansehen und diese Quelle durch Rechtsklick anzeigen, können Sie den HTML-Code sehen, der in den Hintergrund geht. Ich weiß nicht, ob Sie auf dieser Bildschirmgröße sehen können, aber HTML ist da. Sie haben einige grundlegende HTML-Tags, und dann haben Sie eine ganze Menge Mumbo Jumbo auf. Diese Seite wird das für jetzt ignorieren, aber alles im Web ist in irgendeiner Weise Form oder Form HTML. Um also zuerst mit diesem Projekt zu beginnen, müssen wir sicherstellen, dass unsere Umgebung korrekt eingerichtet ist. Gehen wir also voran und öffnen Sie ein neues Finder-Fenster. Und wissen Sie, was ich gerne tun, ist, wenn Sie oft zu Ihrem Home-Ordner gehen, werden Sie Sites Ordner sehen. Wenn Sie noch keinen haben, können Sie einen erstellen, also gehen Sie weiter und öffnen Sie ihn und wir erstellen einen Ordner für unser Projekt. Ich empfehle, einen Projektordner zu erstellen, um alle Ihre Projektdateien in zu behalten. So ist es nur ein wenig organisierter und einfacher zu verwalten, wenn Sie mit Websites arbeiten. Dies ist auch allgemein bekannt als die Website Route der Website Route. Geben wir ihm einen einfachen Namen. Ich gehe einfach mit Tutorial und einem weiteren Schritt. Ich mache es mir einfach und füge das zu meinen Favoriten hinzu. Fahren wir nun mit dem nächsten Schritt fort , der unser Dokument erstellt. Also für diesen Schritt werden Sie eine Art von Code-Editor benötigen, wie ich erwähnt habe, Sie können wählen, welche Software Sie am meisten anspricht. Gehen wir weiter und öffnen Sie unseren Code-Editor und erstellen Sie eine neue Datei. Ich werde das in meinem neuen Tutorial-Ordner speichern. Dies ist, wo das Speichern des Ordners und der Favoriten ist jetzt praktisch. Der Standard für HT Mill Dokumente ist, dass Ihre Homepage wird Index genannt werden und dann ist die Erweiterung der Datei dot html Gut und klicken Sie auf. Jetzt speichern. Zuerst, tang wir brauchen, ist ein Tag, das dem Browser mitteilt, welche Art von Dokument. Dies ist so werden wir doc-Typ eingeben und sofort mit einem Code-Editor werden Sie sehen, dass es Tags für Sie vorschlägt. Es ist schlau und weiß, was Sie tippen, und Sie können entweder auf diesen oder klicken Sie auf den Tab. In Ordnung, also das nächste sehr einfache Tag ist ein HTML-Tech. Und das sagt dem Browser, dass wir hier unser HTML starten und mit jedem Tag von diesem Punkt an brauchen wir ein offenes und ein geschlossenes Tag. Also, dieser hier öffnet unser Tag. Der nächste, einen Schrägstrich verwendet, schließt ihn. Also, jetzt haben wir offene HTML und schließen Sie ein sie männlich. Alle HTML-Tags folgen diesem Grundprinzip, in der Regel innerhalb eines HTML-Tags. Du hast einen Kopf und einen Körper im Kopf. Das ist, wo alle Meta-Informationen über Ihre Webseite gehen, Dinge wie Ihren Seitentitel , und Sie können sehen, dass es automatisch gefüllt nach Hause. Aber lassen Sie uns einen anderen Titel geben. Sagen wir unseren Namen. Also werde ich Nathan Blair tippen. Hier gehen wir und nicht innerhalb des Körpers. Das ist, wo all Ihr benutzerdefinierter HTML geht. Dort wirst du die Seite bauen, die du auf dem Bildschirm sehen wirst. Nun, bevor wir dahin springen, werfen wir einen Blick auf einige andere Meta-Tags, die Sie dem Kopf hinzufügen können. Was ich gerne mache, ist Notizen zu diesen Dingen zu halten, weil ich mich nicht unbedingt an all die verschiedenen Meta-Tags erinnere . Und in der Tat gibt es eine Sache, die wir verpasst haben. Wir könnten auch die Sprache zu unserem HTML-Tag hinzufügen. Gehen wir weiter und legen das da rein. Das sagt dem Browser nur, Hey, schau, dieses Dokument wird auf Englisch sein, in Ordnung, schauen wir uns ein paar andere Meta-Tags hier an. Sie sehen das Tag-Meta wahrscheinlich 90% der Zeit, die Sie mit dem UTF-Hilfszeichen werden , sagte. Also würde ich nur empfehlen, dabei zu bleiben. Und das nächste Meta-Tag, das wir hinzufügen werden, ist für Responsive Design. Wir werden ein wenig später darauf eingehen, aber dies stellt im Grunde nur sicher, dass Ihre Webseite korrekt skaliert wird, wenn sie auf einem iPhone oder einem iPad oder einem großen Bildschirm angezeigt wird. Lass uns dem Körper etwas hinzufügen, um nur zum Spaß zu machen. Alles klar, speichern Sie es. Und hey, schauen wir uns mal an, was wir haben. So, wie sehen Sie ein HTML-Dokument von Ihrem Computer aus. Nun, es ist ziemlich einfach. Gehen wir zum Dokument und ziehen Sie es einfach in Ihren Browser. Und hey, sieh dir das an. Da ist unsere Hello Welt. Wenn Sie in den Titel schauen, sehen Sie Ihren Titeltext und Sie haben ein grundlegendes HTML-Dokument. Das deckt also die grundlegende HTML-Syntax ab. Lassen Sie uns einige Elemente in unserem nächsten Video hinzufügen. 3. Grundlegende Elemente: Überschriften und Absätze: In Ordnung, also haben wir unseren schönen Hello-World-Text und eine große leere Seite. Füllen wir es ein wenig mit einigen grundlegenden Textelementen. Also zurück in unserem Code-Editor, lasst uns einen Titel haben. Dies ist eines der grundlegenden Tags, die jeder Browser erkennt. Gehen Sie voran und tippen Sie H eins in Ihren Körper und schließen Sie ihn auch aus . Und in der Mitte dieses Tags werden wir den Titel eingeben. Dafür werde ich meinen Namen benutzen. Speichern wir das und schauen Sie es sich an. Aktualisieren Sie die Seite. Und hey, sieh dir das an. Wir haben ein bisschen Styling. Es kommt direkt aus der Box, weil jeder Browser weiß, was ein H ein Tag ist. Und es gibt auch andere Überschriften-Tags. Wenn du H zwei triffst, hast du Alter zwei Tags H drei h vier. Die Liste geht den ganzen Weg nach unten auf sechs, und jeder kommt mit seiner eigenen Dimensionierung. Wie Sie sehen können, wird der Titelkleiner und das Styling dieser Überschriften kann mit CSS geändert werden, worauf wir später in dieser Lektion eingehen werden. Wie Sie sehen können, wird der Titel kleiner und das Styling dieser Überschriften kann mit CSS geändert werden, Jetzt brauchen wir nicht alle diese Überschriften, aber lassen Sie uns H zwei behalten. Und in unserem H zwei wird das unsere Unterposition sein. Und ich denke, das ist ein guter Ort, um entweder Ihre Stellenposition oder einige andere Untertitel , die Sie auf Ihrer Visitenkarte wollen, zu setzen . Also werde ich nur Web-Entwickler setzen. Speichern Sie es und schauen wir es uns an. Großartig. Okay, wir einen Blick auf ein anderes Etikett. Es ist das P-Tag, das kurz für Absatz ist. Und schauen wir uns einfach an, wie das aussieht. Und viele Redakteure Sie können einfach Boram eingeben und es wird Ihnen Laura einen Text gemacht. Wie Sie sehen, ist dies eine lange Zeichenfolge hier, aber es ist großartig für das Sampling von Dingen. Uh, Wie Sie sehen können, ist das Styling eines Absatz-Tags viel einfacher. Es ist für so gedacht, wie Sie Absätze geschätzt haben. In unserem Fallbrauchen wir keinen ganzen Absatz Text auf unserer Visitenkarte. In unserem Fall Ich meine, ich denke, Sie sind sicher willkommen, das zu tun, aber ich denke, das ist ein geeigneter Ort, um unsere E-Mail-Adresse zu setzen. Alles klar, speichern Sie es. Werfen wir einen Blick. In Ordnung. Großartig. Jetzt sieht das noch nicht nach viel aus, aber ich verspreche dir, dass alles zusammenkommen wird. Wir müssen das nur einen Schritt nach dem anderen machen. Wie wir lernen. Eine Sache, die beim Entwerfen einer Webseite zu beachten ist, ist die Semantik. Was bedeutet das? Nun, Browser und andere Geräte, die Ihre Webseite lesen, werden bestimmte Dinge von verschiedenen Tags auf Ihrer Seite erwarten . Zum Beispiel innerhalb eines Überschriften-Tags erwartet, dass dies eine Kopfzeile irgendeiner Art sein wird. Dasselbe mit einem H zwei in einem Absatz. Einige Geräte, wie z. B. Grüne Leser, verwenden diese Semantik, um auf einer Website zu navigieren. Daher ist es wichtig, im Auge zu behalten, welche Inhalte Sie in diese verschiedenen HTML-Steuer einfügen . In unserer nächsten Lektion, lassen Sie uns über mawr HTML-Tags gehen, die Sie zur Verfügung haben, und wird eine Liste mit 4. Tabellen und Listen: Art und Weise. So haben wir über grundlegende Textelemente gelernt. Aber was gibt es noch andere Möglichkeiten, um unsere Texturinformationen im Web zu strukturieren? Nun, ein Beispiel ist eine Tabelle. Wir werden in diesem speziellen Projekt keine Tabelle verwenden, also fühlen Sie sich nicht so, als müssten Sie irgendetwas davon ausgeben. Aber es ist eines der grundlegenden HTML-Elemente, über die Sie wissen sollten, also würde ich es gerne schnell überprüfen. In einer Tabelle haben Sie also ein paar Standardabschnitte. Sie haben einen T-Kopf, einen T-Körper. Und wenn Sie jetzt einen T-Fuß wollen, innerhalb dieser Abschnitte, gibt es immer ein TR, das für eine Tabellenzeile steht und innerhalb dieses T d und der Fernseher ist jede einzelne Zelle. Lassen Sie uns eine schnelle HTML-Tabelle verspotten, damit Sie ein Gefühl dafür bekommen können, wie sie funktionieren. Lassen Sie uns einfach einige grundlegende Kopfzeilen machen und der Körper würde dasselbe tun und dann dasselbe in der T-Fußzeile. Und nur um Zeit zu sparen, werde ich es von hier kopieren und einfügen. Aber lasst uns ein paar verschiedene Saiten machen. Alles klar, mal sehen, wie das aussieht. In Ordnung, Großartig. Also haben wir Essen. Barbat in der e-Tabellenkopfzeile. Wir haben 123 und unsere erste Reihe und dann ABC in der Fußzeile. nun Wenn wirnuneine komplexere Tabelle oder eine tatsächliche Tabelle hätten, würden wir wahrscheinlich mehr als eine Zeile sehen. Es sieht also ungefähr so aus, und jeder hat möglicherweise seine eigenen Werte, damit die Tabelle länger und länger werden kann. Sie können weitere Spalten hinzufügen, die Sie mögen. Es gibt noch viel mehr, was Sie mit HTML-Tabellen tun können. Ich werde nicht alles hier in diesem Tutorial eingehen, aber ich weiß nur, dass Tabellen eine großartige Ressource sind, wenn Sie Ihre Website erstellen. Hier ist etwas, das wir in unserem Projekt verwenden werden. Es gibt noch etwas, das Sie verwenden können, um strukturierte Informationen anzuzeigen, und das ist eine Liste. Es gibt zwei Arten von Listen. In HTML. Es gibt eine geordnete Liste, die das ol Tag ist, und es gibt auch die A Norden Liste ul und jede von ihnen. Es gibt ein weiteres verschachteltes Tag für jedes Element. Es ist ein Listenelement oder L I. Lassen Sie uns sehen, oder L I. was der Unterschied zwischen diesen beiden Arten von Listen ist. Wir werden jedem ein paar Gegenstände hinzufügen, und mal sehen, was? Wie Sie sehen können, ist eine geordnete Liste sortiert und als Zahlen, während auf einer noch nicht Liste ist nur Aufzählungspunkte. Ich neige dazu, die A Norden Liste oft zu verwenden, aber es gibt sicherlich auch Anwendungen für eine geordnete Liste. Für dieses Projekt werden wir die A Nordeste verwenden. Diese Liste gibt uns ein gutes Format für die Auflistung aller verschiedenen Profile, auf die wir von unserer Webseite als Platzhalter verlinken möchten. Ich werde nur den Namen jeder Website setzen, die ich zu einer meiner Lieblings-Codierungs-Websites verlinken möchte , wie Sie zuvor gesehen haben, war Hub bekommen. Also füge ich das hier drin hinzu. Ich werde auch verlängern und Twitter setzen. Alles klar, sagen wir das und sehen, wie es aussieht. Alles klar, da gehen wir. Nun, wie wir vorwärts mit diesem Tutorial werden Links zu diesen Elementen hinzufügen. Aber vorerst sind wir auf dem Weg zu einem guten Start. Weißt du was? In der Tat denke ich, das ist ein gutes Thema für das nächste Video. Lassen Sie uns voran und fügen Sie unseren Artikeln etwas Länge hinzu. Alt 5. Links und Bilder: Jetzt, da wir unsere Listenelemente haben, müssen wir einige Links hinzufügen. Also lasst uns weitermachen und das etwas aufräumen. Zuerst mag ich Teoh. Halten Sie alles in separaten Zeilen, nur um es ein wenig lesbarer für mich selbst zu machen um diesen Get Hub-Text zu umwickeln. Ich füge ein Link-Tag hinzu. Ein Link wird tatsächlich in Anker-Tag aufgerufen, das nur ein so offener Anker Schließen Anker in der Mitte ist get Hub. Jetzt müssen wir das u hinzufügen R l hören, wie wir tun, dass ein Attribut verwendet wird, das wir speziell die H ref Attribute verwenden werden Viele Elemente in H E Mail haben Attribute, und sie sind nur Bits von Informationen, die Sie dem Elemente verwenden, um sie auf eine bestimmte Weise zu verhalten oder verschiedene Aspekte über sie zu ändern. Diese Attribute insbesondere, fügt eine Ihre l für Ihren Link. Also in diesem Fall werde ich mein u R l zu meinem get Hub Profil hinzufügen. Es empfiehlt sich, die https in der Front einzubinden, damit der Browser nicht verwirrt wird, ob diese Website Teil Ihres Servers ist oder ob sie woanders geht . In Ordnung, Also, jetzt, die meinen Link hinzugefügt haben. Probieren wir es mal aus. Gehen Sie voran und aktualisieren Sie die Seite und überprüfen Sie sie. Wir haben einen Link. Jetzt schauen wir mal, ob es funktioniert. Da ist es mein get Hub-Profil. Aber wie Sie sehen können, hat es es im selben Browserfenster geöffnet. Und Sie möchten nicht unbedingt, dass der gesamte Traffic von Ihrer Website entfernt wird, sobald jemand auf eine Ihrer anderen Seiten geht. Also gehen wir zurück und lassen Sie uns das ein bisschen ändern. Es gibt ein anderes Attribut, das für ein Anker-Tag namens Target verwendet werden könnte. Und nein, das bezieht sich nicht auf das beliebte Einkaufszentrum, das dem Browser tatsächlich mitteilt , welches Fenster zu verwenden ist. Also sagen wir „leer“. Und das bedeutet im Grunde, dass wir das in einem neuen Tab öffnen wollen. Lass uns das speichern und es ausprobieren. Aktualisieren Sie die Seite und klicken Sie auf unseren Link. Da gehen wir. Du hast einen neuen Wasserhahn. Lassen Sie uns dasselbe für andere Links tun. Ich werde nur kopieren und einfügen, um das ein wenig einfacher zu machen, und wir werden diese durch verschiedene URLs ersetzen. Und nun lassen Sie uns den Text innerhalb der Anker-Tags ändern. In Ordnung. Mal sehen, wie das aussieht. Großartiger Test. Die Links sind nicht lange, aber es funktioniert. Alles klar, Großartig. Jetzt haben wir drei Links. Lasst uns eine Kerbe aufbauen und wirklich etwas Phantasievolles machen. Wir werden ein Bild zu dieser Seite hinzufügen. Dies ist ein weiteres Element, das Attribute verwendet. Werfen wir einen Blick. Lassen Sie uns unser Bild oben in unserem Dokument hinzufügen. Das Bild-Tag. Es ist nur ich m G. Und normalerweise verwenden wir zwei Attribute mit diesem Tag. Lassen Sie uns zuerst ein wenig über die alten Attribute sprechen. Alt ist alternativer Text. Der Grund. Wir brauchen einen alternativen Text. Fremde Bilder? Nun, manche Leute im Web können keine Bilder sehen. Sie sind blind. So können Screenreader diesen alternativen Text lesen und verstehen, welches Bild auf dem Bildschirm ist. Es ist also toll, einige schöne beschreibende Texte innerhalb Ihrer eigenen Attribute hinzuzufügen. Lassen Sie es leer, bis wir wissen, welches Bild wir hinzufügen. Hier brauchst du ein Bild oder ein Logo, um deine Visitenkarte anzubringen. Ich habe bereits ein Standardprofilbild eingerichtet, das ich überall im Web hinzufüge, und du wirst es direkt in deinen Tutorial-Ordner legen, in dem dein Webstamm sein wird . Gehen wir zurück zu unserem Code. Da wir also wissen, dass es sich auf unserem Web Root befindet, könnten wir es sogar hier in unserem Projekt sehen. Wir können einfach den Dateinamen hier eingeben. Lass es uns speichern und einen Blick werfen. Oh, hey, sieh dir mal an. Das bin ich. Also haben wir unser Bild eingerichtet. Nun lassen Sie uns einen alten Text hinzufügen. Nathan Blairs lächelndes Gesicht. Wenn Sie aktualisieren, sehen Sie, dass Nichts geändert wurde, aber ein Bildschirmleseprogramm kann diesen Text lesen, und alle blinden Besucher Ihrer Website wissen, was los ist. Das ist großartig. Also haben wir ein paar Bilder. Wir haben einen stilisierten Text. Wir haben ein paar Links. Lassen Sie uns weiter vorwärts gehen und fügen Sie dieser Seite ein wenig Struktur hinzu. 6. Blockelemente und semantisches HTML: Alles in Ordnung, also fügen wir Inhalte zu dieser Seite hinzu. Es sieht gut aus, aber es wäre gut, den Inhalt abzuschneiden, nur damit wir eine einfachere Zeit Styling haben, aber auch für Semantik. Wir hatten schon mal Semantik erwähnt. Schauen wir uns ein wenig genauer an, wie Sie Ihre Semantik auf Ihrer Website verbessern können . Wenn Sie einen Blick auf die indischen Web-Docks werfen, ist das sehr häufig Webdokumentation, die von in Mozilla erstellt wurde. Sie gehen in eine Menge Details über all die verschiedenen semantischen Tags, die Sie im Web verwenden können und wofür sie verwendet werden. Ich werde nicht auf all diese eingehen, aber wie Sie sehen können, gibt es so viele. Sie sprechen über das Abschneiden von Inhalten, indem Sie Seiten und Fußzeilen und Kopfzeilen verwenden. Sie haben Textinhalte. Die Liste geht weiter und weiter. Fühlen Sie sich frei, diese zu durchsuchen. Werfen Sie einen Blick auf die verschiedenen Webkomponenten und alle Dinge, die Sie auf Ihrer Website verwenden können . Aber lassen Sie uns einfach ein grundlegendes Webseitenlayout überprüfen, das Sie heute im Internet sehen könnten. Typischerweise auf einer Website hat die Seite auf einer Websiteeine Kopfzeile, und innerhalb dieser, normalerweise gibt es eine knave-Bar an der Spitze gut, es gibt semantische Elemente, die Sie verwenden können, wie Header und Nickerchen. Darunter gibt es normalerweise den Hauptbereich der Website, und darin gibt es in der Regel einen Hauptartikel wie Texte oder einen Block Post. Und es gibt vielleicht eine Sidebar, die eine beiseite und dann unter allem sein könnte. In der Regel gibt es eine Fußzeile. Alle diese Elemente sind tatsächliche HTML-Tags, die Sie verwenden können, um Ihre Website abzuschneiden und sie semantischer zu machen. Werfen wir einen Blick auf einige der Elemente, die wir verwenden können, um von unserer Seite abzuschneiden, obwohl es eine sehr, sehr einfache Seite sein wird. Wir können nicht viele von ihnen gebrauchen, aber es gibt ein Paar, das wir uns ansehen können. Also zurück in unserem Code, lasst uns beginnen, indem wir einfach alles in ein, was ein Blockelement genannt wird. Und die Art und Weise, wie wir eine erstellen, ist die Verwendung der DIV Tech. Ein DIV-Tag ist im Grunde nur ein Block auf der Seite. Es ist sehr nützlich, um Dinge zu stylen, Dinge zu bewegen und sie an der Stelle zu positionieren, an der Sie sie auf der Seite haben wollen. Nun, in vielen Code-Editoren, werden Sie feststellen, dass ein Klassenattribute erscheint, das später mit unserem CSS anstelle der Klasse verwendet wird . Lassen Sie uns dies auf I d ändern. Genau so und ich d Attribute werden wieder hauptsächlich für CSS verwendet, manchmal JavaScript, das viel fortgeschrittener ist, als wir in gehen müssen. Aber es ist im Wesentlichen eine Möglichkeit, ein bestimmtes Element auf der Seite zu identifizieren, und sie sind immer einzigartig. Sie wollen also nie Ideen, die auf verschiedenen Elementen auf der Seite gleich sind. Sie sollten immer einzigartig sein. In diesem Fall ist dies unser Site-Rapper. Es gibt nur einen von ihnen auf der Seite, also lassen Sie es uns nennen, dass ich dies manchmal gerne mache, um nur den Überblick darüber zu behalten, wofür die Elemente verwendet werden. Lassen Sie uns nun all unsere Inhalte in diesen Block hinzufügen. Und schauen wir uns an, was passiert, wenn wir das absolut nichts tun, weil ein DIV-Tag kein inhärentes Styling hat. In den meisten Fällen werden Sie keinen Unterschied bemerken, indem Sie dies hinzufügen, aber es wird uns eine bessere Struktur geben, wenn wir später ins Styling gehen. Gehen wir zurück zu unserem Code und bei ein paar weiteren Elementen wäre jetzt toll, dem Browser zu sagen was unser Hauptinhalt ist. Worauf sollten wir uns konzentrieren? Nun, im Grunde, das ganze Auto. Es ist unser Hauptelement, also lasst uns es einfach in das große einwickeln. So haben wir jetzt ein Hauptelement mit all unseren Inhalten, und es ist innerhalb einer Website. Rapper Wenn Sie wieder auf Ihre Seite gehen und aktualisieren. Trotzdem ist wieder nichts passiert. Main ist eine Art wie ein Blockelement. Es hat kein anfängliches Styling, aber es ist großartig für die Struktur. Lassen Sie uns ein weiteres I D zu diesem Haupt-Tag hinzufügen. Wir werden es Karte nennen. Und weißt du was? Lassen Sie uns unsere Inhalte ein wenig abschneiden. Lassen Sie uns ein paar weitere DIV-Tags erstellen. Lassen Sie uns eine für unser Bild und das andere für Text erstellen. Und dieses Mal verwenden wir das Klassenattribut, um sie zu benennen. Wir werden es Bild, Block und Textblock nennen , wenn Sie es speichern und sehen immer noch keine Änderung. Ich weiß, es mag so aussehen, als würden Sie jetzt nichts tun, aber ich verspreche Ihnen, dass es sich in unseren nächsten Schritten als nützlich erweisen wird. In der nächsten Lektion machen wir ein paar lustige Sachen. Wir werden in CSS Styling 7. Erste mit CSS: Ordnung, wenn Sie also bisher mitverfolgt haben, haben wir hier ein tolles kleines HTML-Dokument, aber es ist ein bisschen langweilig. Nun, in diesem nächsten Schritt wird hier die Dinge ein wenig interessanter, weil wir etwas Styling mit einer Sache namens C. S S S S anwenden Styling mit einer Sache namens C. und was CSS steht, ist Cascading Stylesheets. Es ist eine Form von Markup, die Browser verwendet, um Stile auf Websites anzuwenden, und es verwendet ein kaskadierendes Muster, was bedeutet, dass Stile am oberen Rand des Blattes durch konkurrierende Stile am unteren Rand des Blattes überschrieben werden . Werfen wir einen Blick auf einige der verschiedenen Möglichkeiten, wie Sie CSS zu Ihrem Dokument hinzufügen können . Jetzt. Eine Möglichkeit, dies zu tun, besteht darin, einfach einen In-Line-Stil direkt zu einem Ihrer Elemente hinzuzufügen, und dies wird in der Elemente hinzuzufügen, Regel von den heutigen Standards nicht empfohlen. Aber nur um der Demonstration willen, lassen Sie uns einfach einen Stil zu unserem Absatzelement hinzufügen. Die Art und Weise, wie wir dies tun, ist, indem wir Stil gleich eingeben , und dann innerhalb der Anführungszeichen werden wir unsere Stile setzen, also werde ich nur mit einem sehr einfachen Stil beginnen. Das ist Farbe. Lass es uns speichern und einen Blick darauf werfen, was das tut. Alles klar, damit Sie sehen können, dass es so einfach ist. Wir haben roten Text auf unserem Absatz. Ziemlich cool, richtig? Nun, das kann zu Problemen auf der Straße führen, wenn sagen, Sie entwickeln eine größere Website und Sie haben diese in Linienstilen überall in Ihrem Code gemischt . Wie schaffst du das alles? Nun, anstatt in Linienstilen zu verwenden, könnten Sie auch Stile in Ihren Kopf legen. Lass uns das schnell machen und wie du das machst. Es ist nur durch Tippen Stil und Sie sehen, es fügt bereits hinzu, in einigen Sachen hier, wir werden es einfach so lassen. Jetzt, hier oben, müssen Sie einen sogenannten Selektor verwenden, um zu bestimmen, welche Elemente Sie auchIhre Stile anwenden möchten Ihre Stile anwenden möchten . Lassen Sie uns also einige der grundlegenden Selektoren überprüfen, die wir Elementselektoren haben, und das entspricht nur dem Elementnamen, auf den Sie Stile anwenden. Also verwende ich das Absatzelement, also wird das auf unseren Absatz abzielen, richtig? Wir haben auch Klassenselektoren und die Art und Weise, wie wir diese verwenden, da wir nur das Periodenzeichen oder den Punkt und in Typ- oder Klassennamen verwenden . Also lasst uns den Textblock anvisieren. Wir werden die Klasse des Lehrbuchs anvisieren. Und schließlich fügen wir einen I-D-Selektor hinzu. Und die Art und Weise, wie wir das tun, ist die Verwendung des Hash-Tags oder Zahlensymbols. So wird eine Karte wählen. Das wird also auf die Idee der Karte hier abzielen. Keine Beachtung der Syntax hier für jeden Selektor. Wir müssen immer eine offene und schließende geschweifte Klammer einschließen, und in diesen Klammern werden wir all unsere Stile setzen. Lassen Sie uns also voran und fügen Sie diesen für den Absatz einige Stile hinzu. Lassen Sie uns einfach die Text-Farbe ändern. Also und für den Textblock, lassen Sie uns etwas anderes hinzufügen. Vielleicht hatte einen blauen Text für den gesamten Textblock, also bedeutet dies, dass der Absatz gelesenen Text erhalten wird. Jeder andere Text sollte blau werden. Und für die Karte, lasst uns etwas anderes machen. Vielleicht eine Hintergrundfarbe, und wir halten es einfach und sagen grau. Beachten Sie nun diese Syntax, um Stile hinzuzufügen. Alles, was Sie tun müssen, ist die Eigenschaft, die style-Eigenschaft, einen Doppelpunkt und dann den Wert dieser Eigenschaft hinzuzufügen die style-Eigenschaft, . Und Sie wissen, es gibt Tonnen von Stil-Eigenschaften gibt eine Menge von ihnen für dieses Tutorial decken , aber es wird eine Menge mehr sein. Schauen Sie sich also definitiv diese Dokumentation an und spielen Sie einfach mit all den verschiedenen Dingen herum , die Sie mit Ihrem CSS tun könnten. In Ordnung, also haben wir unsere Stile angewendet. Mal sehen, wie das aussieht. Gehen Sie weiter und aktualisieren Sie. Da gehen wir. Es ist alles da. Das war nicht so schlimm, oder? Wir haben unseren grauen Hintergrund blauen Text, aber dann einen gelesenen Absatz. Nun ist diese Methode, CSS hinzuzufügen, immer noch nicht genau ideal. Ich meine, was ist, wenn Sie mehrere Seiten auf Ihrer Website haben und alle die gleichen Stile verwenden? Dies ist, wo externe Stylesheets nützlich sein werden, und das ist eigentlich im Allgemeinen die Best Practice nach heutigen Standards. Lassen Sie mich Ihnen zeigen, wie Sie das einrichten können. Wir werden eine neue Datei erstellen und sie als Style Dot CSS speichern. In Ordnung. Sie kopieren einfach alle Stile, die wir bereits hier haben, und wir können dieses zusätzliche Zeug loswerden und wir können alles in unseren Style Dot CSS einfügen. Nun, bevor wir zurück zu unserer Seite gehen, müssen wir sie auch mit unserem HTML-Dokument verknüpfen. Richtig? Der Vorteil dieses externen Stylesheets ist, dass Sie es einfach mit jedem HTML-Dokument verknüpfen können , das Sie haben. Wenn Sie also mehrere Seiten haben, können Sie für jede einzelne Seite dasselbe Stylesheet verwenden. Die Art und Weise, wie wir das tun, ist, indem Sie das Link-Tag, das Sie auf Registerkarte drücken , werden Sie wahrscheinlich sehen Stylesheet für Sie ausgefüllt. Und Sie haben eigentlich keine CSS-Masterdatei. Das ist nur, denke ich, ein Platzhalter für Ihre eigentliche Datei. Also, was wir tun werden, ist, dass wir Stil-Punkt-CSS hinzufügen und sehen, wie es aussieht. Aktualisieren. In Ordnung. Also, wie Sie sehen können, haben wir alle unsere Stile noch da, also das bedeutet, dass unser externes Stylesheet funktioniert. Nun lassen Sie uns einige der Stile hinzufügen, die wir tatsächlich für dieses Projekt benötigen. Also werden wir weitermachen und einfach eine Menge von diesem Zeug hier loswerden. Aber wir werden den Textblock-Selektor jetzt für Textfarbe für Absätze und sobehalten so . Ich mag es, eine Farbe zu verwenden, die nicht ganz schwarz ist, irgendwie wie ein dunkelgrau, und Sie können diese Art von endlicher Kontrolle und Ihre Farben bekommen. Wenn Sie etwas verwenden, das als Hex-Wert bezeichnet wird. Und wenn Sie nicht mit Hex-Werten oder Hex-Farben vertraut sind, würde ich nur empfehlen, eine Google-Suche nach Hex-Farbauswahl zu machen. Und tatsächlich in den Google-Suchergebnissen selbst wird es in den Google-Suchergebnissen selbsteine Farbauswahl finden, die Sie verwenden können, und Sie können Ihre Lieblingsfarbe auswählen. Ich habe hier einen vorgewählten, nur um Zeit zu sparen, also werde ich das hier einfügen. Und so wird dein Hexadezimalwert aussehen. Also lasst uns voran gehen und uns auffrischen und sehen, was wir bekommen. In Ordnung, also ist es so eine subtile Veränderung. Man kann nicht wirklich sagen, ob dies ein dunkelgrau oder schwarz ist, also möchte ich Ihnen ein großartiges Tool vorstellen, das Sie in jedem Browser da draußen verwenden können. Es nennt sich das Inspector-Tool oder wird manchmal als Entwicklerkonsole bezeichnet. Aber im Grunde können Sie einfach alles auf Ihrer Seite auswählen, indem Sie mit der rechten Maustaste klicken und auf Inspect klicken, und Sie werden dieses Tool Pop-up sehen, wo Sie alle Ihre HTML sehen können. Sie können den Mauszeiger darüber zeigen und sehen, was Sie sehen und wenn Sie hier auf ein Element klicken . Sie können all das CSS-Styling sehen, das Sie auf dieses Element angewendet haben, und wir können sehen, dass wir unsere Farbe hier haben, und es ist tatsächlich, weil es von einem Elternteil geerbt wird, richtig? Das liegt daran, dass CSS an die Kinder jedes Blocks weitergegeben wird. Also, wenn wir einige Stile auf unsere Haupt-Tag oder Karte anwenden, dann wird es auch an seine Kinder weitergegeben werden. Und ich möchte Ihnen noch eine Sache zeigen, die Sie mit diesem Tool tun können. Sie können Änderungen an Ihrem CSS tatsächlich in der Vorschau anzeigen. Also sagen, ich wollte sehen, wie es aussieht mit rotem Text. Sehen Sie, die Änderungen werden sofort vorgenommen. Sie können auch neue Stile hinzufügen. Sagen Sie also, ich wollte eine Hintergrundfarbe hinzufügen. Dort gehen Sie und wissen nur, dass dies nicht tatsächlich Änderungen an Ihren Dateien vornimmt. Es spart nichts. Wenn Sie die Seite aktualisieren, wird sie nur zurückgesetzt. Also, das ist nur eine Vorschau der Dinge. In Ordnung, lassen Sie uns etwas anderes hinzufügen. Reiß eine Seite, vielleicht, ah, Hintergrundfarbe in unserem Stil dot CSS. Lasst uns die Leiche anvisieren. Also werden wir den Element-Selektor dafür verwenden, und das wird unser Body-Tag auswählen. Also lassen Sie uns eine Hintergrundfarbe hinzufügen. Und ich habe hier noch einen Hexadezimalwert ausgewählt. Also füge ich das ein und lass uns sehen, wie es aussieht. Da gehen wir. In Ordnung, also haben wir unser CSS in der nächsten Lektion mit unserem HTML gearbeitet. Ich möchte Ihnen einige Möglichkeiten zeigen, wie Sie Ihre Website Projekt ein wenig besser organisieren können, und auch vielleicht können wir einige Textur auf den Hintergrund unserer Karte alte hinzufügen. 8. Hintergrundbilder und Relative: weg, richtig? Also haben wir ein wenig über Hintergrundfarben gesprochen. Aber Sie wissen, Sie können auch Hintergrundbilder hinzufügen. Deshalb möchte ich eine großartige Website dafür empfehlen. Weißt du, ich kann mich nie an das Mädchen erinnern, weil es etwas kompliziert ist. Aber wenn Sie Google subtile Muster suchen, ist es das erste Ergebnis hier. Dies ist also eine große Ressource, weil sie eine ausgezeichnete Auswahl an subtilen Hintergründen für Ihre Website haben. Aber Sie können sie in einer Vorschau anzeigen und Sie können nach etwas suchen, das Sie suchen, wie vielleicht Papier und Sie können alle Arten von Papiertexturen finden. Suchen wir nach etwas extrem subtilem, das mich an eine Art Visitenkartenbestand erinnert . Uh, lass uns hier sehen. Ich mag dieses Groove-Papier. Ja, sieht ziemlich gut aus. Alles, was ich tun muss, laden Sie eine ZIP-Datei herunter, gehen Sie und öffnen Sie die, und wir werden die kleinere Version verwenden. Also werden wir das in unser Projekt kopieren. Und los geht's. Wir haben unser Vermögen. Lasst uns voran gehen und das als Hintergrund verwenden. Also gehen wir zurück zu unserem Code. Und mal sehen, ich möchte, dass das nur für die Karte selbst gilt. Ich werde diese Selektorkarte anvisieren. Ich benutze nur das Nummernzeichen, um das Ziel zu erreichen und die Idee ist Karte. Wir werden ein Hintergrundbild anwenden und das Mädchen wird einfach Groove-Papier sein. Ich habe jetzt Ping, eine Sache zu beachten Für jeden CSS-Stil, den Sie schreiben, möchten Sie immer diesen Semikolon am Ende einschließen. Speichern wir das, und wir brauchen das nicht mehr und wir werden erfrischen. In Ordnung, da ist unser Muster. Es ist sehr subtil, aber es ist da. Du kannst es jetzt sehen. Weißt du, wir haben hier nicht viele Akten, aber das könnte ein wenig unhandlich werden. Es wäre schön, ein wenig mehr Struktur für unser Projekt zu haben, weil wir mehr Assets hinzufügen sagen, dass wir eine größere Website haben, an der wir arbeiten. Wir wollen, dass eine Gruppe Dinge in verschiedene Ordner, oder? Nun, natürlich könnten wir einfach ein paar neue Ordner erstellen, vielleicht einen für Bilder. Diejenigen dort vielleicht 14 CSS, die da drin, das ist schön und organisiert. Aber was passiert jetzt? Zehe all unsere Links, alles wird kaputt. Also, warum hat es kaputt gemacht? Nun, weil wir sagen, dass der Browser Groove Paper Dot Ping sich direkt in unserer Projektroute befindet , aber das ist nicht mehr der Fall. Jetzt sind es Bilder. Gleiches mit unserem Hauptbild sagten Profil, dass JPEG sich in unserer Projektroute befindet, aber nicht mehr der Fall. Wie können wir das umgehen? Nun, wir müssen den Pfad zur Verfügung stellen, und was wir in der Web-Entwicklung verwendet haben, ist typischerweise ein relativer Pfad. Anstatt also die gesamte Website und dann den Pfad auszugeben, müssen wir das nicht tun. Wenn sich alles auf demselben Server befindet, können Sie einfach den Pfad verwenden, der relativ zu der Datei ist, mit der Sie arbeiten. Also in diesem Fall sind Datei auf der Route und wir wollen auf ein Bild zugreifen, das im Ordner Bilder ist. So geben wir Bilder Schrägstrich Profil J Pick. Werfen wir einen Blick, äh, sind Bilder zurück? Was ist mit unserem Stylesheet? Wenn wir das Gleiche getan haben und uns erfrischen, sehen wir nichts. Nun, zum einen müssen wir den Pfad zum Stylesheet selbst ändern. Also im Moment bekommen wir keine CSS-Stile. Lassen Sie uns das zuerst in unserem HTML tun, lassen Sie uns den Pfad zu CSS-Slash-Stil ändern, dass CSS, weil wir hier sind. Wir wollen auf die Datei im Inneren zugreifen. CSS-Aktualisierung. Okay, es gibt Stile zurück, aber wir haben immer noch nicht den Hintergrund. Warum ist das? Nun, weil Stil Punkt CSS ist nicht in der Website-Route. Es befindet sich im CSS-Verzeichnis. Was wir also tun müssen, ist, aus diesem Verzeichnis zu gehen und dann in das Bilderverzeichnis zu unserem Groove-Papier-Ping zu gelangen. Dafür gibt es eine Syntax, und es sind im Grunde nur zwei Punkte und ein Schrägstrich. Das sagt uns. In Ordnung, gehen Sie ein Verzeichnis zurück und greifen Sie dann auf das Bilderverzeichnis zu. Und das ist, wo Sie das Bild finden. Lassen Sie uns speichern und eine Aktualisierung geben. Ah, da gehen wir. Es funktioniert wieder. Großartig. in unserer nächsten Lektion Lassen Sie unsin unserer nächsten Lektionein wenig mehr über Eigenschaften finden und Styling sprechen Einige dieser Links 9. Typografie: bisher in diesem Projekt haben wir gerade die Standardschriftart für den Browser verwendet, die typischerweise eine Serra-Schriftart ist. Und es ist nicht ideal für jedes Projekt, oder? Also lassen Sie uns einen Blick auf einige der Immobilie, die Sie verwenden können, um einen Fonds zu starten. Was ich gerne tun möchte, ist eine Basisschriftart für die body-Eigenschaft festzulegen, so dass diese Schriftart von allen ihren Children vererbt wird . Ich zeige dir, was ich damit meine. Also lassen Sie uns die font-Eigenschaft verwenden. Und zuerst setzen wir einen Baseball mit 16 Pixeln auf. 16 Pixel ist, ah, so ziemlich ein Web-Standards. Ich bleibe jetzt gerne bei. Wir fügen eine Schriftgröße von 16 Pixeln bei einem Schrägstrich und dann die Zeilenhöhe danach hinzu, was wir machen werden. Und das heißt nur, dass wir nicht wollen, dass jede Textzeile mehr Platz einnimmt als die Zeichen tatsächlich sind. Also, du weißt schon, eine Zeilenhöhe von einem Zeichen, richtig? Okay, als nächstes werden wir es sehr einfach halten, und wir werden nur alles in Ordnung geben, wir wollen Ariel-Fonds, wenn es verfügbar ist. Wenn nicht, dann San Serif. Ok? Und Sie können sehen, dass sich sofort alle Schriftarten auf der Seite geändert haben. Wie ist das passiert? Nun, es liegt daran, dass mit CSS, wenn Sie einen Stil für ein übergeordnetes Element hatten, alle seine Children auch diese Stile erben. Wenn Sie also dieses Hauptelement überprüfen, sehen Sie, dass die gleichen Schriftarten vom Textkörper geerbt werden. Jetzt gehen wir runter, um unsere Überschriften zu sagen. Was wäre, wenn wir kleinere Überschriften wollten? Nun, werfen wir einen Blick darauf, was es jetzt verwendet. Nun, es verwendet eine andere Maßeinheit namens M. M-Einheiten sind im Grunde eine Möglichkeit, die Schriftart des übergeordneten Elements zu nehmen und sie mit einer bestimmten Zahl zu multiplizieren . In diesem Fall heißt es, OK, OK, nehmen Sie die Basisschriftart von 16 Pixeln, multiplizieren Sie sie mit zwei. Gehen wir also zu unserem Code und wickeln wir diese Überschriften in ein Blockelement ein. Wir geben ihm eine Klasse von Header und verschieben diese Elemente in alles rechts und zurück zu unserem CSS. Lassen Sie uns voran und bei unserem Basisfondsstile in gehen. Ich kopiere sie gerne direkt aus dem Browser, füge sie hier und jetzt fügen wir unsere neue Schriftart hinzu. Also für Überschriften, für Header drei und wir geben ihm eine Schriftgröße von 0,8 a. M. Werfen wir einen Blick darauf. Ordnung, also ist es etwas kleiner, aber das Texas tatsächlich innerhalb des H ein Element im H zwei Element, das ihre eigenen Schriftgrößen angewendet haben, kann das oft ziemlich verwirrend für Leute werden. Ich meine, was wäre, wenn der Textblock seine eigene Schriftgröße von drei m hatte was wäre, wenn der Textblock seine eigene Schriftgröße von drei m hatteund dann Oh, mein Gott, wie berechnen Sie das alles? und dann Oh, mein Gott, Richtig, damit es ein wenig knifflig werden kann. Aber es gibt eine andere Maßeinheit, die dieses Problem für Sie lösen könnte. Und das ist Reich. Wenn Sie nur ein r vor hinzufügen, waren wieder normal, nicht wahr? So gut, fast so wird Bram sagen. Ok, ich kümmere mich nicht um die Eltern. Ich möchte nur relativ zur gekämpften Basis sein, also wird es sich die Schriftgröße des Körperelements ansehen. Das heißt also wirklich 0,8 mal 16. Lassen Sie uns voran und ändern Sie unseren Code, um Felge zu verwenden. Aktualisieren Sie die Seite und wir sind immer noch gut. Und was ist mit diesen Links? Sie haben eine andere Farbe als der Rest des Spaßes. Nun, Links werden ein wenig anders geändert. Sie sind interaktiv, so dass sie ein paar weitere Eigenschaften haben, mit denen Sie arbeiten können. Also lassen Sie uns das überprüfen. Wenn Sie einen Ihrer Links überprüfen, werden Sie im Inspektor sehen, dass wir diesen kleinen Doppelpunkt H o b haben. Wenn Sie darauf klicken, haben Sie eine Reihe von verschiedenen Elementen Zustände, mit denen Sie arbeiten können. Was das bedeutet, ist zu sagen, Sie fahren mit der Maus über einen Link oder sagen, einer von ihnen aktiv oder sagen Sie, dass Sie Tab zu einem. Sie sehen, wie es dort anders ist, während jedes Element ein anderer Zustand ist, in dem sich dieses Element befinden kann. Also lasst uns ein paar schwebende Zustände zu ihrem Mantel haben. Und vor allem lassen Sie uns eine bestimmte Farbe für unsere Links angeben. Ich habe mir selbst eine Farbe ausgesucht, also setzen wir das in ihre Farbe. Alles klar, und lasst uns auffrischen. Okay, das ist also ein bisschen besser. Gehen wir nun zurück und fügen wir wieder einen Hover-Zustand hinzu. Ich habe eine etwas andere Farbe für eine Weile. Wir schweben über ziemlich frisch, und jetzt schwebt es. Großartig. Jetzt denken Sie vielleicht, ich will nicht, dass diese Unterstriche, Also, wenn Sie keine Unterstreichungen unter Ihren Links wollen, können Sie es entfernen, indem Sie Textdekoration sagen. Nein, lassen Sie uns diesen Stil auch unserem Code hinzufügen. In Ordnung, Anker-Tag. Speichern Sie es. Aktualisieren. Da gehen wir hin. Im nächsten Video werde ich Ihnen ein paar Bibliotheken zeigen, die ich wirklich gerne in ein paar schöne Icons setzen und auch den Spaß noch mehr mit Google-Schriften stylen. 10. Bibliotheken: während Luftfonds ist schön, es wäre gut, Ihren eigenen Spaß zu spezifizieren, vor allem, wenn Sie wollen, dass dies ein wenig professioneller aussehen. Nun, es gibt ein paar kostenlose Bibliotheken da draußen, und eine davon ist Google Fonts. Werfen wir einen Blick darauf. Also, wenn Sie zu Fonts dot google dot com gehen, werden Sie alle ihre verschiedenen Schriftarten sehen, die Sie auf Ihrer Website verwenden können. Ich ermutige Sie, sich durchzusehen und Ihre Favoriten zu finden. Ich habe einen, den ich irgendwie mag, also werde ich P. T-Ständeeingeben T-Stände . Da gehen wir. Und das werden wir unserer Auswahl hinzufügen. Sobald Sie fertig sind, alles auszuwählen, was Sie auf Ihrer Website wollen, öffnen Sie dies. Wie Sie sehen können, haben sie einige ziemlich gute, detaillierte Anweisungen für Sie. Sie haben also ein Link-Tag, genau wie wir unser Stylesheet hinzugefügt haben. Lassen Sie uns fortfahren und kopieren Sie das und fügen Sie es in unser HTML ein. Jetzt wollen wir sicherstellen, dass wir über unsere Stylesheets hinzugefügt haben, damit wir es innerhalb unserer CSS-Stile verwenden können , denn was passieren wird, ist, dass der Browser dieses Dokument von oben nach unten lesen wird . Also, was auch immer Ressource in diesem CSS-Dokument verwendet werden muss, müssen Sie sicherstellen, dass sie oben sind. Also haben wir unseren Stil. Wenn wir speichern und aktualisieren, werden wir nichts ändern sehen. Das liegt daran, dass es momentan immer noch den Luftfonds nutzt. Wenn Sie also zu Google-Schriftarten zurückkehren, sehen Sie, dass sie Ihnen die Schriftfamilie zeigen, die Sie verwenden sollten. Also gehen wir weiter und kopieren PT Sands und gehen zu unserem Stylesheet. Und was wir tun können, ist, dass wir es direkt vor der Luft hinzufügen können. Also, das heißt, in Ordnung, wir bevorzugen PT Sands. Aber wenn das nicht verfügbar ist als okay, benutzen Sie Antenne. Aber wenn das nicht verfügbar ist, dann benutzen Sie einfach jeden Sand, den Sarah gekämpft hat. Also, wenn wir das sagen und aktualisieren, da gehen wir, wir sehen RPT Sands. Großartig. Also, was können wir noch Dio? Nun, es wäre schön, diese Textlinks durch kleine Symbole zu ersetzen. Vielleicht ein Symbol für die Gin Wanne Lok, vielleicht das verlinkte Logo und das Twitter-Logo. Richtig. Nun, es gibt eine kostenlose Bibliothek, vier Icon-Fonds namens Schriftart. Ehrfürchtig. Und hier ist es. Lassen Sie mich Ihnen zeigen, wie Sie dies auf Ihrer Website verwenden. Sie haben ziemlich einfache Anweisungen. Klicken Sie einfach auf, starten Sie die Verwendung kostenlos. Und alles, was Sie tun müssen, ist das Gleiche, was Sie mit unserer Google Font-Bibliothek gemacht haben. Und sie haben tatsächlich diesen praktischen kleinen Kopielink hier. Also werde ich das benutzen. Das Gleiche ist, bevor wir das hier einfügen. Sollte in Ordnung sein. Speichern Sie es. Und jetzt sehen wir, wie wir es verwenden können. Also, wenn Sie nach dem Symbol suchen, das Sie in meinem Fall wollen, werde ich schauen vergessen Hub. Da gehen wir. Sie haben also ein paar verschiedene Möglichkeiten. Ich glaube, ich werde mit der Runde eins gehen. Ich werde darauf klicken, und es zeigt Ihnen den HTML-Code, den Sie für dieses Symbol verwenden können. Also geh ich weiter und kopiere das. Gehen Sie zurück zu meinem Projekt und anstelle von get Hub, ich werde das hier einfügen und sehen, wie das aussieht. Uh, da gehen wir. Wir haben ein kleines Naben-Logo. Das ist ziemlich cool. Also lasst uns das Gleiche für die anderen tun. In Ordnung? Und mal sehen, wie das aussieht. Alles klar, das kommt wirklich vorbei, also haben wir unsere Ikonen. Wir haben unsere benutzerdefinierte Google-Schriftart. Also in der nächsten Lektion werde ich darüber sprechen, wie Sie jedes Element auf Ihrer Seite alt positionieren können. 11. Positionieren Elemente: ein Walross, richtig? Also denken Sie vielleicht, wie zum Teufel werden wir all diese Elemente in die richtige Position bringen und fangen wir klein an . Beginnen wir mit diesen Symbolen. Sie haben jetzt ein paar seltsame kleine Kugeln und funktionieren nicht wirklich mit Icons. Lasst uns das alles reparieren. Wenn wir also untersuchen, wir einen Blick auf den Unterschied zwischen den Anzeigetypen. Wenn wir uns den Verbündeten ansehen, ist das Listenelement. Sie können sehen, dass die Anzeige eine Liste ist. Artikel macht Sinn, nicht wahr? Was ist mit einigen anderen Elementen? Wie ein Absatz, der Anzeigeblock sagt? Und was ist mit einem Sprung? Dasselbe Block. So kommt jedes Element mit seinem eigenen inhärenten Styling, und Sie wollen. Wenn Sie Ihre Auswahl sehen möchten, können Sie sagen, Anzeige und dann sehen, was es empfiehlt. Es gibt viele verschiedene Arten. Wir werden nicht auf alle eingehen, aber derjenige, der uns im Moment am meisten helfen wird, ist die Anzeige im Linienblock. Gehen wir zurück zu unserem Code und werfen einen Blick. Also mal sehen. Wir haben einen Haufen Verbündeter Elemente im Inneren, oder? Nun, anstatt jedem einzelnen Verbündeten Element einen Stil hinzuzufügen, lassen Sie uns einen Klassennamen zu unserem Elternteil hinzufügen. wirst du. Nennen wir es keinen Stil, weil wir den Standardstil aus unserer Liste entfernen und ihn zu unserem eigenen machen. Jetzt für unsere No Style Klasse, werden wir OK für das Element ohne Stil sagen. Wir möchten, dass jedes verbündete Element darin in Linienblockelementen angezeigt wird, die in Zeile blockiert sind . Dieser Wiedergabetyp wird wie Texte umhüllen, aber alle innerhalb eines Blocks bleiben. Lassen Sie uns voran und speichern Sie es und sehen, was das mit unserem Projekt macht. Aktualisieren. Ah, da gehen wir. Wir haben alles horizontal, aber es gibt immer noch viel Platz hier. Nun, was ist hier los? Gibt es immer noch ein Standardstyling auf das U L-Element angewendet? Und wir haben nur den Verbündeten angegriffen, um einige dieser Stile rückgängig zu machen. Gehen wir zurück zu unserem Code und beheben Sie das, um das U L anzuvisieren. Wir müssen nur die Klasse ohne Stil anvisieren. Lassen Sie uns voran gehen und entfernen Sie das Standard-Styling, indem Sie den Listenstil none sagen, der die Aufzählungszeichen loswird, wenn sie noch da sind, und wir werden auch sagen, Polsterung links Null. Jetzt fragen Sie sich vielleicht, was Patty ist? Nun, zuerst, lasst uns auffrischen und du siehst, dass es den Raum links loswird. Nun schauen wir uns an, welche Polsterung in Ihrem Inspektor ist. Sie werden ein nettes kleines Diagramm sehen, was das ist. Dies wird als Box-Modell bezeichnet. Das Box-Modell bezieht sich auf alle verschiedenen Größen, die sich auf Randrandauffüllung beziehen und wie sie sich innerhalb eines Elements zueinander beziehen. Es ist oft schwierig, vollständig zu verstehen, wie das Box-Modell funktioniert, bis Sie wirklich nur etwas Code in die Hände bekommen und damit herumspielen. Also ermutige ich Sie, das zu tun, was ich jetzt tue. Sehen Sie, wie die Dinge interagieren und werfen Sie einen Blick auf dieses raffinierte kleine Diagramm, um zu sehen, wie es funktioniert. Okay, so wie wir diese Symbole horizontal positioniert haben, nun, wir könnten dasselbe mit unserem Bild und unserem Text machen, richtig? Also lassen Sie uns voran und tun das in unserem Code. Also, wie sollen wir das machen? Schauen wir uns das an. Wir haben einen Bildblock und ein Lehrbuch, so dass wir einfach eine Anzeige von In-Line-Block zu jedem dieser Blöcke hinzufügen können. Lassen Sie uns das ausprobieren, damit wir sowohl dem Bildblock als auch dem Textblock eine Anzeige von In-Line-Block hinzufügen . Lass es uns speichern und sehen, wie das aussieht. In Ordnung. Nun, das ist ein guter Anfang. Es sieht ein bisschen komisch aus. Für den Anfang denke ich, dass der Text an der Spitze des Bildes ausgerichtet werden sollte, oder? Also lassen Sie uns sehen, wie wir das wieder in unserem Code tun können. Fügen wir auch eine vertikale Linie oben hinzu und aktualisieren Sie diese. Da gehen wir. Das ist jetzt ein bisschen besser. Ich möchte ein wenig Abstand zwischen diesen beiden Elementen. Und wie wir gerade gelernt haben, können wir das entweder mit Padding oder Marge tun. Da wir wirklich nur Abstand rechts vom Bild brauchen, werde ich unserem Bild einen rechten Rand hinzufügen. Also hier, unter traurigem Stil zu unserem Bildblock und wir werden sagen, Rand , rechts , Ups, und wir geben ihm nur ein Meter Raum. Speichern Sie es und schauen wir es uns an. In Ordnung, das sieht also ein bisschen besser aus. Was können wir noch hinzufügen? Nun, lasst uns eigentlich etwas Polsterung um die gesamte Karte haben, also gehen wir zur Kartenauswahl und fügen Polsterung hinzu, die die gesamte Karte auffüllen wird , wie wir es vorher gesehen haben, also klopfen und wird sagen, um em wieder, Speichern und aktualisieren. Alles klar, es sieht ein bisschen besser aus. Okay, das ist also ein sehr allgemeiner Überblick darüber, wie das Box-Modell funktioniert und wie Sie Dinge auf der Seite positionieren und platzieren können . Dort gibt es noch viel mehr zu lernen, aber das deckt die Grundlagen ab. In unserem nächsten Video werden wir über die Größenbestimmung sprechen. 12. Elemente aufsteigender: Nun, das kommt wirklich hier vorbei, aber das Bild ist viel zu groß. Lassen Sie uns über einige der verschiedenen Möglichkeiten sprechen, wie Sie Elemente jetzt ändern können, eine sehr einfache Möglichkeit , die Größe auf Bilder anzuwenden. Es ist nur, ihre with und height Attribute zu verwenden. Also auf meinem Bild-Tag könnte ich einfach ein Breitenattribut gleich hinzufügen und, sagen wir, 1 50 Und der Browser wird das als 150 Pixel und einen tollen Blick darauf interpretieren. Es hat auch eine Höhe für uns angewendet, so dass es das Seitenverhältnis korrekt gehalten hat. Meine Bilder sind quadratisch, so dass die Breite und Höhe gleich sein müssen. Was denkst du, wird passieren, wenn ich eine andere Höhe als mein innerhalb des Szenarios anwende? Schauen wir es uns an. Sagen wir stattdessen 100 Pixel. Oh, ich wurde zerquetscht, also bedenken Sie das. Sie möchten normalerweise nicht sowohl mit als auch Höhe zu Bildern hinzufügen, sondern stattdessen sollten Sie den Browser einfach das Seitenverhältnis für Sie beibehalten lassen. Jetzt ist das eine gute Möglichkeit, innerhalb der Höhe hinzuzufügen. Aber in der modernen Webentwicklung wird es normalerweise innerhalb von CSS gehandhabt. Schauen wir uns also an, wie Sie stattdessen dasselbe mit CSS machen können. Zuerst werden wir diese zusätzlichen Attribute löschen und gehen wir zu unserem CSS, so dass wir nur jedes Bild innerhalb der Klasse des Bildblocks anvisieren können . Überschriftenbreite oder -höhe ist ziemlich einfach. Auf CSS könnten Sie einfach die width Eigenschaft verwenden und ihr einen Pixelwert oder einen Prozentsatz geben, oder M Was auch immer Ihre Präferenzen sind, ich bleibe hier bei Pixeln und lass uns einfach so bei 150 bleiben. Mal sehen, was uns das gibt. Großartig. Nun können diese Eigenschaften für Breite und Höhe auch für andere Elemente auf Ihrer Seite gelten, so dass wir sie auch verwenden können, um die Breite unserer Karte zu begrenzen. Also, das erstreckt sich nicht über die gesamte Seite hier. Also lasst uns hier unten zu unserem Kartenelement hinzufügen. Moment versuchen wir einfach ein mit 600 Pixeln und sehen, wie das aussieht. Gehen wir zurück und erfrischen wir uns. Großartig, so dass Sie sehen können, dass die Karte selbst jetzt auf 600 Pixel Breite begrenzt ist. Es erstreckt sich nicht über das gesamte Fenster. Jetzt fühle ich mich persönlich, dass das ein bisschen zu breit ist. Hier ist viel Platz auf der rechten Seite. Es ist ein bisschen komisch. Lassen Sie uns das einfach ein wenig verkleinern, und das kann für Ihren Namen anders sein. Wenn Sie einen längeren Namen oder einen kürzeren Namen haben, fühlen Sie es einfach heraus und sehen, was gut für Sie aussieht. Ach, sagen wir, vielleicht sehen fünf 10 Pixel jetzt etwas besser aus. Eine Sache im Auge zu behalten ist Responsive Design. Zum Beispiel, Was passiert, wenn wir dies auf einem kleinen Bildschirm sehen, wie ein mobiles Gerät wird in unserem Inspektor? Wir können eine Vorschau anzeigen, indem Sie dieses praktische Werkzeug verwenden, um Geräte umzuschalten. Leider ist unser Design momentan nicht sehr reaktionsschnell. Da wir feste Pixelwerte verwenden, schrumpft der Browser grundsätzlich nur die Dinge herunter und versucht, alles innerhalb des Geräts zu passen. Hier ist, was wir tun können, um das zu umgehen. Zusätzlich zu unseren mit Wert, können wir auch ein Maximum mit hinzufügen und setzen Sie es auf 100%, so dass nur sagt, dass der Browser nie skalieren diese Karte über 100% des Bildschirms. Auf diese Weise auf noch kleineren Geräten wie einem iPhone fünf wird der Text auf noch kleineren Geräten wie einem iPhone fünfeinfach umgebrochen, und es gibt nie horizontale Scrollen. Ok. Bevor wir vergessen, lassen Sie uns diese Stile kopieren und sie in unseren Code einfügen. Also werden wir dieses Original ersetzen durch. Da gehen wir. wir einfach sicher, dass alles noch funktioniert. Sieht toll aus. Es gibt jedoch immer noch einen Vorbehalt . Leider sind nicht alle Browser gleich. Werfen wir einen Blick auf die gleiche Seite in Firefox. Öffnen Sie den Inspektor. So sieht es jetzt in Ordnung aus. Aber dann schauen Sie sich an, wenn ich nach rechts scrolle. Wir wollen nichts von diesem horizontalen Scrollen, also scheint es in Firefox, das Max mit funktioniert nicht ganz. Das Problem hier ist eine Komplikation mit unserem Box-Modell. Moment wendet der Browser unsere max mit auf den Inhalt unserer Box an. Aber die Polsterung fügt einige zusätzliche hinzu mit jenseits der Größe unserer Seite. Und wir können das umgehen, indem wir eine andere Eigenschaft namens box size hinzufügen und einen Wert von border box hinzufügen. Dies weist den Browser an, das mit bis zum Rand unseres Box-Modells anzuwenden, anstatt es auf den Inhaltsbereich zu beschränken. Ich weiß, dass dies ein wenig fortgeschrittene Konzepte ist, also haben Sie das Gefühl, dass Sie vollständig verstehen müssen, was hier vor sich geht, aber ich wollte nur sicherstellen, dass Sie diese Kompatibilität in Ihrem Design fixiert haben. Also achten Sie darauf, das da drin hinzuzufügen. Lassen Sie uns voran gehen und kopieren Sie diese zusätzliche Eigenschaft in unseren Code. Und schauen wir uns zuerst in Firefox an. In Ordnung? Großartig. Und was ist mit Chrom? In Ordnung. Sieht gut aus. Alles klar, das ist jetzt nett und reaktionsschnell. Im nächsten Video werde ich Sie durch einige der Möglichkeiten führen, wie Sie diese Elemente auf Ihrer Seite ausrichten können . 13. Ausrichtung von Alien: so als nächstes. Es wäre toll, wenn wir diese ganze Karte in der Mitte der Seite positionieren könnten. Nun, es gibt ein paar Möglichkeiten, wie Sie Elemente mit CSS positionieren können und lassen Sie uns über die verschiedenen Möglichkeiten gehen , wie wir das tun können. Wie Sie Elemente positionieren, hängt wirklich vom Anzeigetyp ab. Im Falle eines Absatzelements können Sie beispielsweise beispielsweise den Formattext ausrichten zentriert hinzufügen und ihn innerhalb des Absatzes zentrieren. In diesem Fall ist der Absatz nicht sehr breit, aber wir lassen das wie links ausgerichtet, was der Standardwert im Fall von Inline-Blockierungselementen wie unseren Listenelementen ist. Nun, diese könnten mit der gleichen Textausrichtungsmethode ausgerichtet werden, so dass Sie einen Text zentriert hinzufügen können , und es würde alle diese in Linienblockelementen zentrieren. Aber das werden wir nicht tun. Was wir ausrichten wollen, ist unsere Gesamtkarte, die, wie Sie sehen können, ein Blockelement ist. Blockelemente sind ein wenig schwieriger zu zentrieren. Was wir tun können, ist den Rand zu nutzen, so dass wir gleichen Abstand auf der linken und rechten Seite des Blocks bereitstellen können . Die Art und Weise, wie Sie das tun können, ist, indem Sie den Rand automatisch hinzufügen , sagt dies dem Browser , okay, bestimmt automatisch den maximalen Rand sowohl für die linke als auch für die rechte Seite dieses Elements und gleich ihnen aus. Und das gibt uns eine zentrale Ausrichtung. Nun, weiter, könnten wir zu diesem Rand hinzufügen, weil wir ein wenig Abstand von oben auf der Seite wollen . Richtig? Nun, wie machen wir das? Wir könnten einen Rand oben hinzufügen und ihm einen M geben und da gehen wir. Oder wir könnten das auch tun. Nun, wie zum Teufel hat das funktioniert? Nun, werfen wir einen Blick auf das Diagramm hier. Es wendet ein M oder 16 Pixel in diesem Fall oben und unten an, und dann werden die linken und rechten automatisch berechnet. Der Grund dafür liegt darin, dass dies tatsächlich eine Kurzschrift ist. Wenn ich hier auf diesen Pfeil klicke, können Sie sehen, dass es tatsächlich alle diese separaten Eigenschaften bestimmt. So ist Marge eine Abkürzung für eine Marge. Oberer Rand, rechter Rand, Unterwasser und links. Und es ist in dieser Reihenfolge. Also sagen Sie, Sie wollten Ah, Rand oben auf einem Meter und Sie wollten eine Marge rechts von Em. Und du wolltest, dass unten drei m ist und für ihn übrig bleibt. Ich weiß nicht, warum Sie das jemals wollen, aber nur um zu veranschaulichen, können Sie sehen, dass es für jeden in dieser Reihenfolge gilt. Also werden wir es verlassen. Lasst es uns bei ah bis M Auto lassen. Das gibt uns ein wenig Platz an der Spitze, plus die zentrierte Ausrichtung. Alles klar, lassen Sie uns diese Stile auf unseren Code anwenden, bevor wir es vergessen. Wir werden diese Zahnkarte hier anwenden, unsere Abstände korrigieren, speichern und aktualisieren. Alles klar, da gehen wir. Sieht ziemlich gut aus. Jetzt gibt es noch einen anderen Weg. Sie könnten Elemente ausrichten, die ich nur kurz übergehen wollte. Wir werden es nicht in diesem Projekt verwenden, aber sagen wir, Sie wollten dieses Bild nach rechts verschieben. Nun, Sie könnten das leicht tun, indem Sie standardmäßig die Float-Eigenschaft verwenden. Es gibt keinen Schwimmer. Aber wenn du richtig geschwommen bist, , dann sieh dir das an. Es bewegt das Bild am meisten nach rechts, bevor es auf die Polsterung des Autos trifft. - Richtig. So können Sie das auch zu Ihrer Verfügung nutzen. Viele Leute werden die Dinge schweben, die übrig sind. Ah, um Websites reaktionsfähiger zu machen. Wir werden diese Technik nicht in diesem Projekt verwenden, aber wissen, dass das auch Alt zur Verfügung steht. 14. Fortgeschrittene CSS: Richtig, also kommt das wirklich. Es gibt noch ein paar weitere Tweets, die ich hinzufügen wollte, die etwas fortgeschrittener sind, aber ich denke, wir sind bereit, sie anzugehen. Also zunächst, es wäre schön, wenn wir einfach auf diesen Link klicken könnten und es würde unseren E-Mail-Client öffnen . Richtig? Also gehen wir in unser Alter, um zu mailen, und wir werden einfach einen Link dazu hinzufügen. Wie Sie sich erinnern, sind Links jetzt das Anker-Tag für die H ref. Wir werden ein spezielles Mädchen hinzufügen, das dem Browser im Grunde anweist, den E-Mail-Client auf dem Computer der Person zu öffnen , damit das Mail zu Doppelpunkt wäre. Und dann fügen Sie die E-Mail-Adresse hinzu, an die Sie eine E-Mail senden möchten. Gehen wir zurück zu unserem Browser, aktualisieren, aktualisieren, und Sie sehen, dass es ein Link ist. Gehen wir weiter und klicken Sie darauf, und es öffnete sich in meinem anderen Fenster. Aber ich kann es Ihnen hier zeigen. Da ist es. Also öffnete es meinen Posteingang. Ich habe momentan kein Männchen auf meinem Computer eingerichtet. Das werde ich jetzt nicht tun. Was sind noch einige Dinge, die wir hinzufügen können? Nun, so wie wir horizontal zentriert sind Karte. Es wäre schön, es auch vertikal zentriert zu haben, also ist es direkt in der Mitte der Seite. Ob Sie es glauben oder nicht, das ist ein bisschen fortgeschritten, aber ich werde Ihnen zeigen, wie es geht. Es gibt also eine ziemlich neue Eigenschaft für fast jeden Browser. An diesem Punkt heißt es Flex Box, und es gibt viele Details zu Indian darüber, wie Flex Box funktioniert. Es kann ein wenig kompliziert werden, aber ich werde Ihnen im Grunde zeigen, wie Sie es verwenden, um Elemente vertikal auszurichten. Denn wirklich, das ist eine der besten Möglichkeiten, es in diesen Tagen mit modernen Browsern zu tun. Also lasst uns das loswerden und gehen wir zurück zu unserem Code. Die Art und Weise, wie Flex-Box funktioniert, ist, dass Sie ein Gesamtumbruchelement benötigen, und dann können Sie Elemente darin positionieren. Also werden wir These IKT-Rapper als unser übergeordnetes Element verwenden. Und mal sehen, lassen Sie uns voran und oben Karte hinzugefügt, und der erste Schritt ist nur, um es Display Flex zu machen. nun Umnunvertikal auf der Seite zentrieren zu können, müssen wir sicherstellen, dass dieses Element die gesamte Seite einnimmt. Richtig? Also werden wir, ah, Höhe von 100% hinzufügen ah, . Auf diese Weise wird es die gesamte Seite einnehmen, und wir werden sagen, Flex-Richtung sollte Spalte sein, weil wir vertikal zentrieren wollen , rechtfertigen Inhalt sollte Mitte sein. Und ein Zeilenelement sollte auch zentriert sein. Also was? Das hat gerettet. Mal sehen, was wir bisher haben. Aktualisieren. Und nun, nichts ist passiert. Warum ist das? Werfen wir einen Blick. In Ordnung? So schweres Problem hier ist, dass Ja, wir nehmen 100% unseres Körpers, aber ihr Körper ist nicht 100% ihres Fensters. Warum ist das? Nun, auch nicht das HTML-Dokument selbst. Wie können wir also sicherstellen, dass das gesamte Fenster von unserem HTML-Dokument aufgenommen wird? Die Art, wie ich es gerne mache, besteht darin, dem Dokument selbst Stile hinzuzufügen. So kann ich eine Höhe von 100% hinzufügen. Das stellt sicher, dass das HTML-Dokument die ganze Seite einnimmt und ich dasselbe für den Körper tun könnte . Und da gehen wir. Lassen Sie uns voran gehen und diese Stile auf unseren Code anwenden. Ich werde das auf die oberste HTML- und Körperhöhe setzen. 100% Alles funktioniert wie erwartet. Ehrfürchtig. Lassen Sie uns ein paar andere Dinge sehen, die ich wirklich gerne für diese Ecken ein bisschen herum sein würde. Und so sieht es eher wie eine Karte aus. Nun, lassen Sie uns das ausprobieren. Die Art und Weise, wie wir das tun können, ist, indem wir Border Radius hinzufügen, und es ist ziemlich einfach. Zusammen mit der Grenze gibt es Grenze, Radius und Schwächung. Wenden Sie einfach den Standard an, entweder Pixel oder M, was auch immer Sie bevorzugen. Ich gebe ihm nur einen Fünf-Pixel-Radius. Das sieht ziemlich gut aus. Aber, weißt du, eigentlich habe ich das Gefühl, wir sollten sie benutzen, damit wir 0,8 m machen , weißt du, eigentlich habe ich das Gefühl, wir sollten sie benutzen, damit wir 0,8 m machen. Auf diese Weise ist es relativ zum Rest der Seite. Also lassen Sie uns das in unserem Code speichern, finden Sie unsere Karte und in unserem Grenzradius und aktualisieren. Großartig. Alles klar, ein letzter Feind. Es wäre wirklich schön, wenn wir nur einen subtilen Schatten hinzufügen könnten, so dass es wirklich aus dem Rest der Seite herauskam. Mal sehen, wie du das kannst. Was ich gerne mache, ist zu einem Box-Shadow Generator zu gehen, weil es viel zu boxen Schatten gibt. Ich habe keine Lust, es selbst zu berechnen. So Box Shadow Generator und es gibt eine Tonne von diesen Online Wählen Sie Ihren Favoriten. Ich werde nur auf die 1. 1 Ich sehe klicken. Und die Kontrollen sind ziemlich intuitiv Jahr. Es ist also ein ziemlich guter Anblick, würde ich sagen. Uh, mal sehen. Machen wir es etwas subtiler. Okay, also versuchen wir es mal. Alles, was Sie tun müssen, ist das alles zu kopieren und auf Ihre Karte zu kleben. Gehen wir zurück zu unserem Browser, und wir brauchen das nicht mehr. Lassen Sie uns auffrischen. Alles klar, das ist genial. Jetzt, wo wir unser Design gemacht haben, denke ich, es ist Zeit, es online zu stellen, um zu zeigen. Richtig? Im nächsten Video zeige ich dir, wie du das umsonst machst 15. Veröffentlichen deines Codes: ein Walross. - Richtig. Also haben wir unser fertiges Produkt. Dies ist unsere Dateistruktur, wie Sie wissen, wir alle diese Dateien im Web zu bekommen, so dass es von jedem auf der Welt zugegriffen werden kann. Wie machen wir es? Nun, da draußen gibt es eine Reihe von Optionen. Du könntest ein paar Hosting von kaufen. Weißt du, die verschiedenen Gastgeber da draußen. Ich bin sicher, Sie haben Werbespots für sie gesehen. Ach, geh, Daddy, Gastgeber Gator. Ah, es gibt eine Tonne von ihnen und sie machen es dir ziemlich einfach. Oder Sie könnten es einfach halten und gehen, um Hub zu bekommen. Wie Sie wissen, ich liebe Hilfe zu bekommen, weil sie auf meiner Karte steht. Alles klar, also gehen wir auf, um aufzustehen und in Ordnung. Ich habe bereits ein Konto. Ich bin hier sehr aktiv. Sie werden das alles nicht sehen, aber was Sie tun möchten, ist ein neues Repository zu erstellen. Sobald Sie sich anmelden, vergessen Sie Hub. Sie können ein Repository erstellen, das im Grunde nur ein Ort ist, um alle Ihre Dateien zu speichern. Nun, es muss nicht öffentlich sein, wenn du es nicht willst. Aber wenn Sie online sein wollten, dann sollten Sie es wahrscheinlich öffentlich halten. Es ist auch toll, ein get Hub-Konto zu haben. Wenn Sie versuchen, in die Web-Entwicklungs-Community Ah zu gelangen, ist es ein großartiger Ort, um zu zeigen, was Sie tun können, soweit Sie codieren, wie aktiv Sie sind. Ah, und nur um mit anderen Entwicklern zu kommunizieren, weil es viele Open-Source-Projekte gibt , auf die Sie Zugriff haben und nur zu sich selbst beitragen können. Wie auch immer, was wir hier tun, ist, dass wir einen Repository-Namen finden müssen. Dies wird auch eine Art von Bindung in die U R l Ihrer Visitenkarten. Also bedenken Sie das, wenn Sie kommen mit Ihrem Namen. Ich werde es einfach halten. Also im Namen es Karte Tutorial und Sie müssen keine Beschreibung angeben. Ich werde das von jetzt an einfach überspringen. Wir werden es öffentlich halten, und Sie wollen es mit einem Lese mich nur zum Spaß diese alles in Ordnung initialisieren, Also lassen Sie uns voran und erstellen Sie ein Repository. Und hier ist dies Ihre Chance, alle Ihre Dateien hinzuzufügen. Also gehen Sie einfach hierher, um Dateien hochzuladen, und von hier aus können Sie buchstäblich einfach alle Ihre Dateien in das Fenster ziehen und ablegen. Wählen Sie also alles aus, was wir in unserem ah tutorial Verzeichnis haben und legen Sie es in Ihr Repository. Es wird alles mit den Verzeichnissen und allem hochladen. Und das ist deine Chance zu sagen, Ordnung, was hast du gerade getan? Nun, es kommt mit einem Standardtext, und das gefällt mir. Also werde ich nur Änderungen auf diese Weise begehen. Also ist es Commit-Änderungen. Das kann eine Weile dauern. Sobald es als Nächstes läuft, gehen wir zu den Einstellungen. Hier können Sie voran gehen und Ihre Website starten. So scrollen Sie nach unten, um Hub-Seiten zu erhalten, wollen wir eine Quelle wählen. Es sollte der Master-Zweig sein. Speichern Sie es. Wenn Sie einen Bildlauf nach unten durchführen, sehen Sie, dass die Hilfeseiten zum Abrufen aktiviert sind, und Sie können die Domäne ändern. Aber ich bin damit zufrieden. Also, wenn Sie auf Ihre Domain klicken, da ist es. Ihr Code ist jetzt am Leben und Sie können diesen Euro mit jedem teilen, den Sie wollen 16. Wir kommen zum Ende: Herzlichen Glückwunsch. Sie haben Ihre ersten Schritte gemacht, um HTML und CSS zu lernen, und Sie haben eine coole Webseite, um es zu beweisen. Nun, keine Sorge, wenn etwas davon ein wenig schwierig zu behalten ist, es ist eine Menge von Informationen. Denken Sie daran, dass Sie den Code haben, den wir gerade als Referenz geschrieben haben. Sie haben auch die indische Dokumentation, also zögern Sie nicht, das zu durchschauen, wenn Sie ein paar Tipps benötigen. Außerdem musst du hier nicht aufhören. Sie könnten dieses Projekt ein paar Schritte weiter machen. Wenn Sie für einige Bonus-Herausforderungen bereit sind, würde ich ein paar Dinge empfehlen, über die Sie denken könnten, indem Sie ein Hintergrundbild zur Webseite hinzufügen. Sie könnten mit dem Randradius herumspielen und es eher einen Kirby-Stil oder einen kreisförmigen Stil machen . Sie könnten auch erweitern diese Karte und machen es mehr von einem Mini-Bio. Sie könnten einige Ihrer Fähigkeiten in Ihrem Hintergrund gehen. Sobald Sie mit Ihrem Design zufrieden sind, ermutige ich Sie, es in der Projektgalerie zu teilen. Ich freue mich auf einige der fertigen Produkte da draußen auch. Hey, wenn dir dieser Kurs gefällt, zögern Sie nicht, mir hier auf Skill Share zu folgen. Außerdem kannst du mir auf Twitter folgen und ich würde jedes Feedback lieben, das du für mich in einer Rezension hast. So jedenfalls, danke für das Einstimmen und eine glückliche Beschichtung alt.