Hand-Coding deiner ersten Website: HTML- und CSS-Grundlagen (Original)

1. Einführung: He. Hallo. Mein Name ist Rich Armstrong und ich entwarf und erstelle seit 10 Jahren Websites. In dieser Klasse geht es darum, zu lernen, wie Sie Ihre eigene Website von Grund auf neu erstellen können. Ich werde Ihnen beibringen, wie Sie Ihr eigenes HTML schreiben und wie Sie Ihr eigenes CSS schreiben. Die Fähigkeit, Ihr eigenes HTML und CSS zu schreiben, eröffnet eine Welt voller Möglichkeiten. Es macht Spaß, es ist befähigend, und Sie bekommen so ziemlich, machen Sie Ihr eigenes Stück des Internets. Also bis zum Ende der Klasse, werden Sie Ihre ersten einseitigen Websites gemacht haben, Sie haben ein grundlegendes Verständnis von HTML und CSS, Ihre Freunde werden eifersüchtig sein, Ihre Mutter wird stolz auf Sie sein, und du wirst in der Lage sein, deine Kreation im Internet zu teilen, was ziemlich cool ist und du wirst in der Lage sein, dies zu verstehen, was noch cooler sein kann. Also hoffe ich, du bist aufgeregt, weil ich aufgeregt bin, dich beizubringen. 2. Dieser Kurs wurde aktualisiert!: Hey, ich bin super aufgeregt, dass du dich entschieden hast, diesen Kurs zu nehmen. Eine Tonne von Studenten haben es genommen und sie haben tolle Kritiken, tolle Projekte erstellt und eine Reihe von Fragen gestellt. Aber ich habe diese Klasse im Jahr 2015 gemacht, was bedeutet, dass sich eine Reihe von Sachen geändert hat, funktioniert anders als in dieser Klasse. Ich habe eine neue Version der Klasse erstellt, die aktueller ist und eine bessere Audio- und Videoqualität hat. Sie können diese Klasse im Handgepäck beobachten. Dieser Inhalt ist immer noch super genial. Aber ich empfehle dringend, das neue zu überprüfen. lernen, Ihre eigene Website zu programmieren, öffnen Sie Türen, führen Sie neue Karrierewege und befähigen Sie, mit der Welt zu teilen, was Sie wollen. Besuchen Sie diesen Link, um sich die neue Klasse anzusehen. 3. Was werden wir machen, lernen, tun?: Was werden wir machen? Was werden wir machen? Wir werden eine einseitige Websites für Ihre Lieblings-animierte oder Cartoon-Helden zu machen. Also meine ist Wreck-It Ralph, und hier sind drei verschiedene Websites , die ich Sie durchführte und ich zeige Ihnen, wie ich es mache. Ich lehre dir, wie man Sublime Text benutzt. Ich lehre Sie bei, wie Sie Google Chrome verwenden. Ich lehre Ihnen, wie Sie GitHub verwenden und wie Sie Ihre Websites und Ihre Web-Kreationen teilen. Wir beginnen wirklich klein und einfach, und wir zogen nach oben und ich lehre Sie, wie man HTML benutzt oder wie man HTML schreibt, wie man CSS schreibt und wie man sie miteinander verbindet. Alles wird visuell erzählt und ich stelle einfache Metaphern bereit, wie die Dinge funktionieren. Begleiten Sie mich und Sie werden lernen, wie Sie die Webseiten Ihrer Charaktere erstellen. 4. Lade diese 3 kostenlosen Apps herunter.: Um das Erstellen von Websites Spaß und einfach zu machen, brauchen wir drei Dinge. Öffnen Sie Ihren Browser und suchen Sie nach etwas namens Sublime Text 3. Sublime Text 3 ist ein Code-Editor. Laden Sie die für Ihr Betriebssystem herunter. Es wird das Schreiben von HTML und CSS zu einem Kinderspiel machen. Das nächste, was wir brauchen, ist Google Chrome, also suchen Sie danach. Google Chrome ist, wie, Internet Explorer oder Safari, aber es hat einige wirklich großartige Tools für Menschen, die Websites zu bauen. Ich zeige dir genau, wie du es benutzt. Laden Sie es herunter und Sie werden auf dem besten Weg sein, zu verstehen, wie Ihre Websites funktionieren und aussehen. Das nächste, was wir brauchen, ist GitHub Desktop. Was GitHub Desktop uns erlaubt zu tun oder was GitHub uns erlaubt, ist es uns erlaubt, Code zu speichern und unsere Änderungen an diesem Code zu verfolgen. Wofür wir es verwenden, ist das Hochladen und Speichern und Hosten unserer Websites und als Werkzeug, um sie mit anderen zu teilen. Lassen Sie uns das herunterladen. Mit diesen drei Apps können wir so ziemlich die Welt erobern, nicht die ganze Welt, sondern die HTML- und CSS-Welt. Sie werden wirklich hilfreich sein und es wird Spaß machen und Sie werden viel lernen. Ich werde überspringen, wenn alle Apps heruntergeladen werden und Ihnen zeigen, wie Sie sie einrichten. Sieh dir das jetzt an. 5. Installiere die Apps: Meine Apps werden endlich heruntergeladen. Alles, was wir tun, ist, dass wir den Downloads-Ordner öffnen und diese bösen Jungs installieren müssen. Das erste, was ist der Sublime Text. Öffne diese DMG, wenn du auf einem Mac bist, unter Windows machst du dein Ding. Wenn du wirklich stecken bleibst, gib mir eine Chance. Wir springen einfach in den Ordner „Anwendungen“. Wenn Sie bereits eine Kopie haben, ersetzen Sie sie wie ich. Fantastisch. Der nächste ist Google Chrome. Doppelklicken wir auf das, die gleiche Art von Sache. Ziehen Sie sie in den Ordner Applications, dieser ist ein bisschen größer, es kann etwas länger dauern. Wenn Sie bereits eine Kopie haben, ersetzen Sie sie wie ich. Der nächste ist GitHub Desktop. Wir ziehen das einfach direkt in unseren Applications Ordner. Es gibt die drei Dinge, die Sie installieren müssen. 6. Erstelle und teile deine erste Website: Wir haben diese drei Apps heruntergeladen. Jetzt machen wir eine Website. Wir gehen zu unserem Applications Ordner und wir werden nach unserer GitHub App suchen. Ich werde nur G-I eingeben, was mich zur GitHub Desktop-App bringt. Öffnen wir das, und Sie werden nach Passwörtern oder Authentifizierung gefragt. Sie werden durch eine Reihe von Interessensbildschirmen geführt werden, und schließlich werden Sie zu so etwas kommen, das Sie nach Ihrem Login und Ihrem Passwort fragt, das Sie wahrscheinlich nicht haben werden, also werden wir eines von github.com. Öffnen Sie diesen Link. Sie müssen einen Benutzernamen auswählen, Ihre E-Mail eingeben und ein Passwort erstellen und sich dann anmelden. Wenn Sie bereits ein Konto wie mich haben, können Sie sich anmelden. Mein Benutzername ist mrra-screencast, und mein Passwort ist ein Geheimnis. Sobald Sie sich angemeldet haben oder sich angemeldet haben, gelangen Sie zu einem Bildschirm, der so aussieht. Sehr wichtig ist es jedoch, Ihr GitHub-Konto in Ihrem Gmail oder in Ihrer Mail-App zu verifizieren , wo immer. Ohne es zu überprüfen, können Sie Seiten nicht richtig hosten. Dadurch wird ein neues Projektarchiv erstellt, das wie das Erstellen eines neuen Projekts ist. Nennen wir es Cartoon-Held oder Gero. Ich würde lieber Held. Die Beschreibung, meine erste Website oder sagen wir eine Website über meinen Cartoon-Helden. Lassen Sie es uns öffentlich halten, damit die Leute es sehen können, damit die Leute den Code kopieren können, wenn sie wollen. Lassen Sie uns es mit einem README initialisieren, da aber klebrig darüber, also würde ich es lieber einschließen und Ihr Repository erstellen. Was wir zuerst tun müssen, ich weiß, dass es wirklich überwältigend ist, all diese Informationen zu sehen, all diese Links, ist nur auf dieses Dropdown-Menü zu klicken und gh-Pages einzugeben und einen neuen Zweig namens gh-Pages zu erstellen. Drücken Sie entweder „Enter“ oder drücken Sie den Link dort. Dies erstellt eine neue Seite, und dies ist ein spezieller Zweig, in dem wir tatsächlich unsere Website hosten können. Das ist Schritt 1. Schritt 2 geht zur GitHub Desktop-App und meldet sich erneut an. Merken Sie sich Ihren Benutzernamen. Es ist praktisch, gerade jetzt. Melden Sie sich an, und von hier an werden Sie als dieser Benutzer angemeldet, bis Sie sich wieder abmelden. Schließen wir dieses Fenster. Was wir jetzt tun müssen, ist, dass wir dieses Projekt grundsätzlich von GitHub bekommen müssen . Da ist es. Ich werde es auf meinen lokalen Computer klonen. Ich werde den Desktop als mein Projektverzeichnis auswählen, und voila. Als nächstes wählen Sie cartoon-hero, und stellen Sie sicher, dass Sie an einem gh-pages Zweig arbeiten. Das ist sehr wichtig. Wir werden eine Website erstellen, so dass wir wollen, dass es eine GitHub-Seite sein. Das ist der erste Teil der GitHub-Geschichte. Was wir als Nächstes tun müssen, ist die Suche nach Sublime Text. In Ihrem Applications Ordner werde ich nur nach S-U suchen oder eingeben, um Sublime aufzurufen. Öffnen wir das auf und folgen Sie dann vorerst. Geben Sie h1 Meine erste Website ein, und h1 erneut. Sie werden feststellen, dass ich ein h1 mit einem kleineren als- und einem Größer-als-Zeichen umschließe, und ich schließe es mit einem kleineren als, einem Schrägstrich und einem Größer-als-Zeichen. Sieht nicht allzu bemerkenswert aus. Aber Sie werden sehen, dass, sobald ich es in meinem Ordner als HTML-Datei speichere, ich werde es nur als test.html speichern. Sie werden diese Farbe sehen. Es fängt tatsächlich an, meine Datei zu codieren. Was es auch tut, ist, dass es mir Vorschläge gibt, was zu schreiben ist, und es vervollständigt auch eine Reihe von Code für mich. Wenn ich jetzt „Enter“ drücke, wirst du sehen, dass es ziemlich viel Arbeit für mich macht, und ich muss mich nicht an all diese lustigen Charaktere erinnern. Hier drin werde ich sagen, Meine fav Farbe ist rot. Fantastisch. Lasst uns das retten. Das nächste, was wir tun können, ist die Suche nach Google Chrome. Ich gebe G-O in meinen Anwendungsordner ein und öffne Google Chrome. Es wird mich fragen, ob ich es als meinen Standardbrowser festlegen möchte. Ich werde ja sagen, bitte. Mac wird ein wenig vorsichtig sein, und ich werde sagen, ja, verwenden Sie Google Chrome. Dann haben wir Google Chrome, Sublime Text und GitHub Desktop installiert und wir verwenden sie. Ich ziehe sie einfach leicht nach links damit sie in meiner Bar unten bleiben, selbst wenn sie geschlossen sind. In meinem Finder-Fenster gehe ich zum Desktop, öffne meinen Cartoon-Hero-Ordner und ziehe meine Datei test.html in Google Chrome, und es gibt meine erste Website. Jetzt möchte ich es mit dem Rest der Welt teilen. Ich gehe zu GitHub Desktop. Ich sehe, dass es eine nicht festgeschriebene Änderung gibt, test.html. Das bedeutet, dass es bemerkt, dass es eine Veränderung gibt. Jetzt möchte ich ja sagen, diese Änderung begehen, weil ich tatsächlich fertig mit der Arbeit an diesem kleinen bisschen, und ich werde sagen, meine erste Testdatei erstellt habe. Sie können eine Beschreibung geben, wenn Sie möchten. Ihre Zusammenfassung und Beschreibung sind wirklich hilfreich, wenn Sie durch viele Änderungen arbeiten und Sie mit Teams arbeiten, damit Sie sagen können, das ist genau das, was ich geändert habe, und deshalb habe ich es geändert. Dann verpflichten Sie sich zu gh-pages, die es an Ihre lokalen Projekte auf Ihrem Computer festschreibt. Nun, um es online zu machen, möchten Sie es tatsächlich synchronisieren. Nun, das ist wirklich hilfreich. Es bedeutet, dass Sie eine Reihe von Änderungen auf Ihrem Computer behalten können, und wenn Sie fertig sind, können Sie alles online an GitHub senden. Da gehen wir. Als nächstes müssen wir zu Chrome gehen, einen neuen Tab erstellen und jetzt merken Sie sich Ihren GitHub-Benutzernamen. Meiner war mrra-screencast, und jetzt müssen Sie go.github.io/ Ihren Projektnamen, also cartoon-hero/test.html. Drücken Sie „Enter“. Es ist ein Fehler aufgetreten. Lasst uns etwas lesen. Es enthält nicht die ausgewählte Datei. Das liegt daran, dass ich es falsch geschrieben habe. Lassen Sie uns tatsächlich richtig buchstabieren, test.html. Da gehen wir. Sie können diese URL für jedermann freigeben. Aber jetzt will ich eigentlich, dass mein Rot rot ist. Nun, hier wird es wirklich mächtig. Gehen Sie zurück zu Sublime Text, und wir werden span eingeben, nicht Spam, und Sie sehen, wie es auch dort wieder abgeschlossen. Fantastisch. Wir werden diese Elemente und Attribute geben. Da gehen wir. Ich werde es retten. Jetzt, in Chrome, werden Sie sehen, dass. Ich gehe zurück zu unserem lokalen, wo Sie sehen werden, dass es eine Datei gibt, und Sie werden sehen, dass die Online-ein unser Benutzername ist. Ich werde dieses auffrischen, und Sie werden sehen, dass meine Lieblingsfarbe rot gerade erschienen ist. Wie kriegen wir das wieder online? Gehen Sie zu GitHub Desktop und Sie werden sehen, dass es einige Änderungen aufgenommen hat. Sie werden sehen, dass es ein Haufen roter Textur und ein Haufen Grün gibt. Es sagt, dass der rote geht und der grüne ankommt. Fantastisch. Stellen Sie sicher, dass Sie sich zu gh-Pages verpflichten, und dann werden wir sagen, setzen Sie eine Spanne ein. Mein Rot ist jetzt rot. Gerne können Sie Ihre Testdatei so ändern, wie Sie es für richtig halten. Experimentieren, viel Spaß. Setzen Sie ein, was Sie wollen. Dann sage ich Commit zu gh-Pages. Ich mache eine schnelle Synchronisierung, um sicherzustellen, dass es auf github.com geht. Sobald dies mit der Synchronisierung abgeschlossen ist, warte ich etwas länger, bevor GitHub seine Handlung zusammenbringt. Ich gehe dann zur zweiten Registerkarte und aktualisiere sie. Wenn nichts erscheint, kann es eine Weile länger dauern, bis die Dinge tatsächlich passieren. Ich mache eine weitere Auffrischung und eine andere. Vielleicht passiert es nicht super schnell, aber irgendwann wird es rot werden. Wenn nichts wirklich passiert, gehen Sie zu Safari und gehen Sie zu Ihrer Commit-Seite, auf der Sie sehen werden, dass etwas passiert ist, setzen Sie eine Spanne ein. Eigentlich ist es passiert. Gehen Sie zurück zu Google Chrome und aktualisieren Sie jetzt, und Sie werden sehen, dass es sagt, meine Lieblingsfarbe ist rot. Manchmal dauert es eine Weile. Manchmal muss man nur ein bisschen warten. Da gehen wir. Ihre allererste Website. 7. HTML-Box-Theorie (einfach, versprochen): Okay, was ist HTML? Nun, im Grunde ist HTML eine Sprache, die Menschen schreiben und Browser verstehen können, es ist die Sprache, um Informationen anzuzeigen. Aber was ist es? Ich verstehe es nicht. Ja, sehr gute Frage. HTML ist eigentlich eine Reihe von Boxen, Boxen in Boxen, innerhalb von Boxen, innerhalb von Boxen. Die Hauptbox ist eigentlich Ihr Browser. Innerhalb eines bestimmten Feldes können Sie entweder ein anderes HTML-Feld haben oder Sie können Text haben, oder Sie können nichts haben. Es gibt also wirklich drei Optionen für jede einzelne Box. Einige Boxen sind unsichtbar und jede Box hat einen anderen Zweck, und jede Box wird standardmäßig anders angezeigt, vom Browser ist es ziemlich mächtig. Standardmäßig sind die meisten Felder nur so hoch wie ihr Inhalt, andere Felder sind so hoch und so breit wie ihr Inhalt. Die meisten Boxen sitzen gerne so weit nach links und so weit wie möglich nach oben. Also, was ist eine HTML-Box? Coole Analogie, coole Metapher, aber wir verstehen es nicht. Lassen Sie mich es Ihnen erklären. Jede einzelne HTML-Box oder die meisten von ihnen, hat ein öffnendes Tag und hat ein schließendes Tag und hat Inhalt. Denken Sie daran, dass der Inhalt entweder Text, leer oder nichts sein kann , oder es kann ein anderes HTML-Element darin enthalten. Ein öffnendes Tag hat ein Symbol kleiner als oder kleiner als das Symbol. Es hat den Tag-Namen, und dann hat es ein Größer-als-Symbol, das ist Ihr öffnendes Tag. Das schließende Tag hat ein Kleiner-als-Symbol und es hat einen Schrägstrich, den Tag-Namen und dann ein Größer-als-Symbol, das ist das schließende Tag. Nun hat das gesamte HTML-Element ein öffnendes Tag, den Inhalt und das schließende Tag. Was wirklich cool an HTML-Elementen ist, dass sie diese geheimen kleinen Bits und Stücke haben können , die Attribute genannt werden, die der Browser verstehen kann. So wie zum Beispiel ein Link-Tag oder ein Anker-Tag, das ein Tag-Name eines ist, hat es verschiedene Attribute. Man kann eine href sein, die URL, zu der der Link gehen soll. Sie können auch haben, wie sollte ich den Link als Ziele öffnen. Sie können auch ein title-Attribut haben, das dem Browser mitteilt, wenn der Benutzer für einen kleinen Zeitraum darüber schwebt , was sollten wir anzeigen? Dies sind also einige grundlegende Attribute, die Sie dem Link-Tag hinzufügen können. Das ist HTML-Theorie für Sie. 8. Schreibe dein eigenes HTML: Genug Theorie. Lass uns ein paar Sachen machen. Ziehen Sie Cartoon hier in Sublime Text und lassen Sie uns anfangen, etwas HTML zu schreiben. Eine andere Theorie, ich werde ihr nur folgen. Bis wir es als HTML-Datei speichern, erhalten Sie keine coole Code-Vervollständigung. Speichern Sie es in Ihrem Cartoon-Hero-Ordner als elements.html. Da gehen wir. Sie sagen jetzt, dass es eine Code-Färbung gibt. Es gibt auch Code-Vervollständigung h2. Rubrik 2. Lasst uns einen Absatz machen. Das ist mein erster Absatz. Wir haben einige Elemente, es gibt ein fertiges Standard- und Basic, das ein div-Tag genannt wird. Dies ist Ihre grundlegende Box und es ist die häufigste, um mehr Boxen in. Wir können eigentlich nur weiter Boxen in Boxen in Boxen stecken. Irgendwann musst du etwas in etwas stecken. Ich werde hier ein Etikett setzen. Jetzt ist ein Tag ein Link oder ein Anker. Es kommt mit einem speziellen Attribut namens href, und innerhalb dieses href, geben Sie url. Sie sagen dem Browser, wenn der Benutzer darauf klickt, wohin sollen wir gehen? Du hast da etwas reingesteckt. Lass uns gehen und http.skillshare.com setzen. Der Inhalt davon sollte sein, besuchen Sie die Skill Share Website. Fantastisch. Lasst uns retten. nun mit der rechten Maustaste auf Elemente von HTML offenbaren und Finder, und ziehen Sie es dann in Google Chrome. Dann haben wir etwas, Sie sehen, wie unterschiedlich die h1 von der h2 ist. Rubrik 1, Rubrik 2. Es unterscheidet sich sehr von Ihrem Absatz und es unterscheidet sich sehr von Ihrem Link, der unterstrichen ist und es ist lila, weil wir ihn vorher besucht haben. Wenn ich das hier anklicke, wird es mich irgendwohin bringen. Zur Skillshare Website. Das ist cool. Zurück zu erhaben, kann ich nun dem a-Tag oder den a-Elementen ein zusätzliches Attribut namens target ändern oder geben , das mir erlauben würde, seinen Wert so zu setzen, dass er leer ist. Speichern Sie es. Was dies tun wird, ist es tatsächlich in einer neuen Registerkarte geöffnet, die ziemlich cool ist. Es bedeutet, dass Sie einfach weiterhin neue Tabs und neue Tabs und neue Tabs öffnen und schließlich so viele bekommen , dass Sie nicht einmal wissen, was jeder einzelne von ihnen ist. Ich schweife ab. Gehen wir zurück zu Sublime Text, und ich zeige Ihnen ein paar weitere Elemente und deren Attribute. Wenn wir ein neues Absatz-Tag erstellen, können wir sagen, „Hey There“. Aber wenn ich sagen will „Hey da, mein Name ist:“ Jetzt möchte ich das wirklich auf eine neue Zeile setzen. Ich kann ein br-Tag verwenden, was eine Pause ist. Jetzt können Sie „Enter“ drücken. Das müssen wir nicht. Aber das werde ich nicht. Mein Name ist Richard. Lasst uns das retten. Datei, speichern. Von hier aus kann man es sehen. Es gibt tatsächlich einen Zeilenumbruch. Das ist eines der speziellen Tags. Es hat kein schließendes Tag. Das nächste, das ich Ihnen zeigen möchte, sind die Bildelemente. Das Bild-Tag hat auch kein schließendes Tag. Noch ein spezielles, ein weiterer Regelbrecher. Wenn wir in test.jpg eingeben und wir speichern, gehen Sie zurück zu Chrome, aktualisieren. Sie werden sehen, dass es mit einem gebrochenen Bildlink kommt. Nun, was ich tun möchte, ist ein Bild zu finden. Mr. R.A. Ich werde danach suchen. Herr R.A., Richard Armstrong. Ich werde nach einigen Bildern suchen. Es gibt einen guten. Jetzt werde ich mit der rechten Maustaste klicken und ich werde das Bild als test.jpg speichern. Fantastisch. Wenn ich jetzt aktualisiere, wird mein Bild auftauchen. Jetzt mit einem Bild ist es wirklich cool, weil es bedeutet, dass Sie auch ein anderes angeben können. Wenn ich auf dieses klicke und ich mit der rechten Maustaste klicke und spezifiziere, naja, kopiere die Bild-URL. Es bedeutet, dass ich das nicht wirklich herunterladen muss. Es bedeutet, dass ich das einfach in meine Quelle kopieren und einfügen kann. Wenn test.jpg eine relative URL ist, heißt es, wo kann ich das lokal finden? Sie können auch eine absolute URL einfügen, die mit HTTP oder HTTPS://beginnt. Jetzt werde ich das speichern und zu meinem Browser zurückkehren, zurück zu elements.html und aktualisieren. Du wirst sehen, dass ich jetzt ein neues Bild habe. Das letzte, was wir für alle HTML-Seiten tun müssen, ist, dass wir es in ein HTML-Element wickeln müssen. Siehst du das alles? Das war ziemlich intensiv. Ich werde nur bearbeiten, rückgängig machen, und ich werde das alles alleine machen. Lass uns HTML gehen. Lassen Sie uns das schließende HTML-Tag schreiben und schneiden Sie es dann und legen Sie es unten. Was wir dann brauchen, ist, dass wir ein Head-Tag brauchen und wir einen Body Tag brauchen. Sie sehen, was passiert, wenn Sie Dinge automatisch schließen. Körper-Tag. Ich werde das Körper-Tag schneiden und ich werde es direkt unter das letzte Element setzen. Was HTML empfiehlt, ist, dass Sie alle Ihre unsichtbaren Elemente in Ihr head-Tag einfügen. Ich zeige Ihnen ein Beispiel für unsichtbare Boxen und all Ihre visuellen Sachen oder sichtbaren Sachen in Ihrem Körper-Tag. Das ist nur die Formalität. Sie müssen nicht wirklich all dies haben, aber für alle Browser und damit die Dinge die ganze Zeit super reibungslos funktionieren, würde ich es sehr empfehlen. Wir werden das von jetzt an tun. In Ihrem Kopf können wir so etwas wie Titel tun und wir können tatsächlich den Titel der Webseite ändern. Im Moment ist der Titel der Webseite elements.html. Ich möchte es in etwas anderes ändern. In Sublime Text werde ich Elemente mit ein paar Ausrufezeichen sagen. Speichern Sie das, aktualisieren Sie. Sie sehen, es sagt Element und die wenigen Ausrufezeichen. Das ist es in Bezug auf, wie man HTML rockt. Nun, was wirklich cool ist, ist, dass jedes einzelne sichtbare Element eine Stil-Attribute haben kann und innerhalb des Style-Attributs können Sie anfangen, mit etwas CSS herumzuspielen. Wir können sagen, Farbe ist blau. Wir können auch sagen, Textdekoration unterstreichen. Klingt ziemlich cool. Datei, speichern. Das sieht aus wie ein Link, obwohl wir nicht darauf klicken können. Sie können hier sehen, wie Sie anfangen können, mit etwas CSS herumzulaufen. 9. CSS-Theory (sehr kurz): Wir haben gelernt, wie man Boxen herstellt und Kisten in andere Boxen legt, aber wie lassen wir diese Boxen hübsch aussehen? Nun, hier kommt CSS ins Spiel. Was zum Teufel ist CSS? Es ist eine Reihe von Stilen, die durch verschiedene Mittel und Wege mit bestimmten HTML-Tags fixiert werden können , aber im Grunde enthält eine CSS-Regel eine Liste von Schlüssel- und Wert-Paaren. Es bedeutet, dass Sie sagen können: Farbe ist das, Hintergrundfarbe ist dies, Schriftgröße ist dies, Rand ist dies, Padding ist dies, ist eine Menge von ihnen, ich werde nicht durch alle gehen jetzt, also das ist die Theorie. Lasst uns da reingehen. 10. 3 Optionen, CSS anzugehen: Lass uns jetzt ein bisschen CSS machen. Ziehen Sie Ihren Cartoon Hero Ordner in Sublime Text und lassen Sie uns eine neue Datei erstellen. Speichern wir es als stylish.html. Lass es uns speichern und ich werde nur ein HTML-Tag schreiben und Sublime es für mich vervollständigen lassen. Hier sehen Sie ein wenig zusätzliche Informationen an der Spitze. Das ist okay. Wir werden dieses stilvolle Dokument nennen. Innerhalb des Körpers werde ich nur ein paar h1-Tags erstellen, Überschrift 1-1. Ich werde das kopieren, und dann werde ich es ein paar Mal einfügen. Dann werde ich ein neues erstellen, das ein h2 ist. Ich werde es Überschrift 2-1 nennen, und ich werde das kopieren und ein paar Mal einfügen. Ich werde nur einen Unterschied machen, dass du genau weißt, was los ist. Ok. Lasst uns das retten. Dann, um ihm etwas Styling zu geben können wir Farbe, Doppelpunkt sagen und ihm dann eine Farbe geben, und dann Semikolon. Wenn Sie dann die Schriftgröße ändern möchten, können Sie 90 Pixel haben, weil es so ein großes h1 ist. Ok. Wir retten es. Klicken Sie dann mit der rechten Maustaste auf die stilvolle HTML-Datei, Reveal im Finder, und ziehen Sie sie dann in Google Chrome. Sie werden sehen, dass es dann eine Reihe von Elementen gibt. Eins Eins sie ist rot. Aber die Schriftgröße sieht nicht zu anders aus, und wir nennen es eine fon-Größe, also lasst uns es in ein T ändern. Speichern Sie es. Gehen Sie zurück zu Google Chrome. Das ist groß. Das ist genau das, was wir wollen. Ok. Aber jetzt möchte ich, dass alle anderen Überschriften genau gleich sind. Was wir tun, ist, dass wir das kopieren und einfügen können. Ich gehe einfach Control C oder Apple C und füge ein. Ok. Wow, das dauert lange. Datei, Speichern, und das wirst du jetzt sehen, wow. Überschrift 1s und Überschrift 2s sehen genau gleich aus, was den Punkt besiegt haben sollte, nicht wahr? Nun eigentlich möchte ich, dass alle H2s grün sind, dann werden sie anders aussehen. Nun, wieder, du musst eins ändern. Ändern Sie sie alle. Es wird ein bisschen chaotisch, und es ist sehr zeitaufwendig, aber es macht den Job. Ok. Aber es gibt einen besseren Weg. Anstatt ein style-Attribut für das HTML-Element in Ihren Kopf-Elementen zu verwenden, werden wir ein style-Tag erstellen. Sublime wird es für Sie beenden und in Ihrem Style-Tag drücken Sie zweimal „Tab“, und geben Sie dann h1 ein. In deinem h1 drücke ich nur „Shift“ und „Tab“, um es aufzuheben. Ihre h1, können wir sagen, Farbe sollte rot sein. Ok. Jetzt möchte ich alle diese Farbe herausnehmen sollte rot sein. Fantastisch. Datei, Speichern. Aktualisieren. Da gehen wir. Jetzt bemerken Sie vielleicht nicht, wie cool das ist, aber wenn ich alle in Orange ändern wollte, richtig geschrieben, könnte ich natürlich einfach eine Zeile eingeben und dann Speichern, Aktualisieren und dann werden alle drei Elemente geändert. Jetzt ist dies die Macht von CSS, besonders wenn Sie es von den tatsächlichen HTML-Elementen wegnehmen, können Sie beginnen, zu ändern, wie Ihre Website aus einer anderen Datei aussieht und es ändert Ihre gesamte Website, Ihre gesamte Website, nicht nur jedes einzelne Element. Dies macht Ihre Website anders, stilvoller und aktualisieren Sie sie wirklich, wirklich einfach und einfach. Ok. Lassen Sie uns auch die Schriftgröße herausnehmen. Schneiden wir es aus und fügen wir es ein. Ok. Ich werde die Stilattribute all dieser h1s herausnehmen. Sie werden sehen, dass ich in den Stilattributen von h2s vorerst beibehalten habe. Ok. Ich will es noch nicht kaufen. Vielen Dank. Ich versuche es immer noch. Ich weiß noch nicht einmal, ob ich HTML und CSS mag. Ok. Die Farbe ist orange, Schriftgröße beträgt 90 Pixel. Vielleicht willst du etwas anderes tun. Sagen wir, Textdekoration. Lassen Sie es uns unterstreichen. Da gehen wir. Datei, Speichern, Aktualisieren und Voila. Erstaunlich. So können Sie beginnen zu sehen, dass eine Codezeile beginnen kann, um Ihre gesamte Website oder alle bestimmten Elemente auf einer Website passen. Ok. Jetzt möchte ich dasselbe mit h2s machen. Ich möchte die Schriftgröße, nicht die Schriftgewichte. Ich möchte, dass die Schriftgröße etwa 40 Pixel beträgt. Also lassen Sie uns diese speichern und aktualisieren. Nichts ist passiert. Okay, aber ich sage dir, warum nichts passiert ist. Denn wenn Sie Stile in einem Stilattribut schreiben, überschreiben sie die Stile und das Style-Tag. Ok. Dies ist die Natur von CSS. Es gibt eine Menge Überschreiben oder Überschreiben, die passiert. Also, wenn es zuerst ist, was zuerst geschrieben wird und etwas anderes, nachdem es geschrieben wurde, wenn es die gleiche Regel hat, dann wird es überschreiben. Wenn ich das also kopiere und es einfüge, und ich ändere es auf 60, überschreibt der Wert der zweiten Regel den Wert der ersten Regel. Wenn es sich in den Formatattributen befindet, überschreibt die Schriftgröße auch die vorherigen Schriftgrößen. Ok? Das ist also etwas, an das man sich erinnern kann. Ich werde nur all diese Stile aufgreifen, weil wir sie eigentlich nicht wollen. Wir würden uns freuen, alles in einem Stylesheet zu sein, innerhalb des Style-Tags. Ok. Aber ich möchte, dass meine Farbe grün ist. Also lassen Sie uns das speichern und sehen, was passiert. Ok. Das sieht gut aus. Aber woher wissen wir, dass das eigentlich das ist, was wir wollen? Woher wissen wir, dass das 40 sind? Woher wissen wir, dass das nicht 60 sind? Woher wissen wir, was was ist? Jetzt kommt Google Chrome ins Spiel. Rechtsklick auf etwas. Untersuchen Sie das Element. Wow, Sie werden anfangen zu sehen, dass es HTML und CSS tatsächlich kennt. Du kannst ein paar verschiedene Sachen inspizieren. Was wir hier tun können, ist, dass wir tatsächlich gehen und auf dieses h2 klicken oder ein Element überprüfen können , und sehen, dass die Schriftgröße 60 ist und dass die Schriftgröße früher 40 war, aber es sieht so aus, als würde es von diese h2. Sie können das in Zeile 15 und in Zeile 12 sehen, genau so. Es ist wirklich, wirklich hilfreich. Was auch wirklich hilfreich ist, ist, dass man sagen kann : „Ich frage mich, welche Größe es sein sollte, denn 60 ist nicht ganz richtig, also können wir ihm tatsächlich 50 Pixel schreiben, oder vielleicht 22 Pixel sind genau richtig. Voila. Sie können sehen, wie es aussieht, aber wenn Sie aktualisieren, gehen die Dinge wieder normal. Also gehen wir zurück. Ändert sich zu 22 und entfernen Sie diese h2. Fantastisch. Aber was passiert jetzt, wenn ich möchte, dass einige meiner h1s und einige von h2s eine andere Farbe haben? Hier wird es wirklich interessant. Also werde ich sagen Klasse, ein neues Attribut, Klasse. Ich werde bestimmten Elementen eine bestimmte Klasse geben. Wir werden sagen, klein. Ich werde das kopieren, und ich werde es auf einige von ihnen einfügen. Ok. Nun, wie zum Teufel bekommen wir einfach h1s mit einer Klasse von klein, und bekommen einfach h2s mit einer Klasse von klein? Nun, in CSS gibt es einen bestimmten Weg, dies zu tun, und es ist dieser Punkt und der Klassenname. Die gleichen Regeln gelten für Klassennamen. Also sagen wir, Schriftgröße ist 12 Pixel und Speichern Sie diese. Sie werden sehen, dass einige Elemente wirklich klein sind. Du wirst anfangen zu sehen, dass, hey, das eine klein ist, das eine klein ist, das ist klein, weil sie alle eine Klasse von klein haben. Das ist echt cool. Jetzt ist die Sache, selbst wenn wir die kleine Klasse über den h2-Selektor verschieben müssten, würde sie sie immer noch überschreiben. Sie können hier sehen. Sie könnten also erwarten, dass, weil das kleine zuerst kam und das h2 an zweiter Stelle kam, dass diese Schriftgröße diese Schriftgröße überschreiben würde. Aber was CSS auch tut, ist, dass es Gewichtungen hat. Ein Tag-Name hat also eine kleinere Gewichtung als ein Klassenname. die gleiche Weise hat etwas mit einer ID von zuerst eine noch größere Gewichtung als ein Klassenname und eine größere Gewichtung als ein Tag-Name. Wenn wir also eine Schriftgröße von 150 Pixeln auf das erste Element oder das Element mit einer ID von zuerst setzen , würden Sie 150 Pixel haben. Aber was ist ein Ausweis? Nun, eine ID ist fast wie eine Klasse, außer sie kann nur auf einem Element liegen. Ein Element kann also nur die ID zuerst haben. Ok? Es gibt unsere große Überschrift, mit zuerst, und Sie können sehen, dass, obwohl es weiter oben auf der Seite als die anderen Regeln ist, es bevorzugt wurde, weil es eine ID ist. Trotzdem, wenn wir hier ein Style-Attribut ausgeben und die Schriftgröße auf „Ich weiß nicht“ ändern wollen, ändern wir es in 20 Pixel. Datei, speichern. Sie sehen, dass ein Inline-Stil für ein Stilattribut eine ID bevorzugt. Es gibt also verschiedene Gewichtungen, über die man beim Styling nachdenken muss. Das nächste, was wir berücksichtigen müssen, ist, was passiert, wenn ich etwas anderes in einem Element anvisieren möchte ? Wenn es hier eine Spannweite gibt, und innerhalb der Spannweite, sage ich: „Probieren Sie mich aus.“ Draußen habe ich auch eine Spannweite, die sagt: „Probieren Sie mich aus.“ Lass uns das speichern und mal sehen, was passiert. Die erste Spanne, ich werde nur dieses Element inspizieren, sagt versuchen Sie mich, aber es ist grün wie die h2. Sie sehen, was eine Spanne tut, sie erbt den Container des übergeordneten Boxen oder das Styling der übergeordneten Boxen. Genau wie ich diesen Kerl inspizieren und seinen Kumpel inspizieren werde. Entschuldigung. Es erbt vom Körpercontainer, weil es Eltern sind. Siehst du, Spannen sind standardmäßig ziemlich clever. Aber jetzt möchte ich alle Spannweiten kursiv machen, also lassen Sie uns das versuchen. Jetzt habe ich CSS hier, geben Sie einfach span ein und sagen wir, was könnte es Schriftarten sein? Da gehen wir. Schriftart, Kursiv. Da gehen wir. Lass uns speichern und voila, ein kursiv. Aber was passiert, wenn ich will, dass nur diese Spannweite etwas tut? Nun, wir könnten einen Klassennamen darauf setzen, den wir hoffen, oder was wir tun könnten, ist, dass wir h2 span sagen könnten, was bedeutet, dass die Spanne oder alle Spannen innerhalb aller h2s lassen Sie uns etwas tun. Was sollen wir tun? Wir könnten ihm eine Hintergrundfarbe geben, wir könnten ihm einen Durchschlag geben. Lass uns das machen. Schriftart, Schriftfamilie, Nr. Textdekoration? Ja. Wir können durchschlagen. Rechtschreibung ist schrecklich. Durchgestrichen, sieht aber nicht schön aus. Vielleicht gibt es einen Bindestrich. Wer weiß es? Mal sehen. Datei, speichern, aktualisieren. Nichts sieht wirklich zu gut aus. Jetzt ist die Macht des Google wirklich hilfreich, wenn es um CSS und HTML geht , weil das gesamte Web auf HTML und CSS aufgebaut ist. Lassen Sie uns einen schnellen Google für CSS Durchschlag machen. Da gehen wir. Es gibt ein paar Websites, die wirklich hilfreich sind. Text-Dekoration-Eigenschaft, Zeilendurchgang. Es gibt eine Reihe von verschiedenen Informationen, aber hey, lassen Sie uns das kopieren. Mal sehen, ob es funktioniert. Line-through. Jetzt machen wir wieder hier und erfrischen, da gehen wir. Ich habe einen Durchschlag oder eine Line-through, wie sie es nennen und was mehr ist, ich habe es nur in der h2. Es gibt nur noch eine Sache, die ich Ihnen zeigen möchte. Wie Sie sehen können, wachsen meine Stile, obwohl ich nicht so viel CSS habe und obwohl wir unsere Seite nicht so viel gestylt haben . Der beste Weg, um Dinge zu stylen, besteht darin, tatsächlich eine separate Stylesheet-Datei zu erstellen. Was wir tun werden, ist, dass wir ein Link-Tag und erhabenen Text erstellen. Bestellen Sie einfach das komplette Set fertig. Nun, es ist ein Stylesheets, es ist ein CSS-Typ-Stylesheets und der HREF bedeutet, wo zum Teufel ist es? Wir werden nur sagen, dass es im CSS-Ordner ist und es heißt test.css. Was ich jetzt tun werde, ist, dass ich das ganze Zeug schneiden werde. Ich werde diese Style-Tags entfernen, und dann werde ich speichern. Jetzt sage ich Akte, neue Akte. Ich werde es einfügen und ich werde sagen, Datei, speichern als einen neuen Ordner namens CSS erstellen, und dann werde ich es test.css nennen und speichern. Dann fügen Sie einen Einzug hinzu, indem Sie Shift-Tab sagen, nur damit es ordentlich und ordentlich ist. Speichern Sie es. Wechseln Sie zu Google Chrome, aktualisieren Sie. Nichts hat sich geändert, aber das ist gut. Nur um sicherzustellen, dass alles funktioniert, werde ich eine neue Regel hinzufügen und ich werde es auf den Körper anwenden. Der Körper werde ich sagen, Hintergrundfarbe. Lasst uns nach hellgrau fragen. Speichern, aktualisieren, und es ist hellgrau. Nun, das ist wirklich cool, weil es bedeutet, dass wir eine Reihe von CSS schreiben können , ohne unsere HTML-Datei zu komplizieren. Wir haben nur eine Zeile, die sich auf die Datei test.css bezieht. Fantastisch. Das ist HTML und CSS für Sie. Wir werden eine Menge mehr lernen, während wir unser Projekt erstellen, aber für jetzt, wenn Sie das mit dem Web synchronisieren und teilen Sie dies mit Ihren Freunden und teilen Sie Ihre Experimente, erstellen Sie neue Dateien, neue Ordner, neue HTML, neue CSS, geh drauf. Es gibt eine Reihe von Links zu CSS. Hope Wachen ist eine Reihe von Links zu HTML. Hope Wachen, können Sie auf alle HTML-Elemente verweisen, alle CSS-Elemente in den bereitgestellten Ressourcen. Was wir hier tun wollen, ist nur sicherzustellen, dass wir auf dem gh-pages Zweig sind. Wir werden uns dann verpflichten und sagen, dass wir ein paar Sachen gemacht haben oder was auch immer du willst. Commit zu gh- Seiten. Fantastisch. Synchronisieren. Sobald es synchronisiert ist, können wir tatsächlich öffnen Google Chrome. Öffnen Sie einen neuen Tab und dann gehen wir zu GitHub und wir werden uns anmelden. Denken Sie also an Ihren Benutzernamen. Meiner ist Mrra-Screencast. Merken Sie sich Ihr Passwort, melden Sie sich an. Gehen Sie zu Ihrem Cartoon-Hero-Verzeichnis oder Repository, klicken Sie auf die eine Commits. Sie werden sehen, dass es ein anfängliches Commit gibt. Cool. Aber jetzt müssen Sie zu Ihrem gh-Pages Zweig gehen. Du wirst sehen, dass wir ein paar Sachen gemacht haben. Jetzt, da Sie wissen, dass die Commits durchlaufen, öffnen wir eine neue Registerkarte. Ich werde sagen, mrra-screencast.github.io/cartoon-hero/stylish.html Mal sehen. Da gehen wir. Wir können unsere gut aussehende Website mit dem Rest der Welt teilen. Haben Sie Spaß, spielen Sie herum, machen Sie ein paar verrückte Sachen. Teilen Sie Ihre Links in der Projektgalerie, Feedback zu den Kodierungen anderer Leute, beantworten Sie Fragen, stellen Sie Fragen, gehen Sie wild, haben Sie einen Jol. 11. Planung zuerst :): Alles in Ordnung. Jetzt werden wir mit der Planung unserer Website beginnen, und die Planung kann jede Form annehmen, die Sie mögen. Es kann vor einer Bühne und nach einer Phase vor einer anderen Stufe passieren . So etwas wie einmalig planen und dann nie wieder planen während des gesamten Entwurfs und der Entwicklung des Standortes. Sie müssen planen, bevor so ziemlich alles, was Sie tun. Planung ist erstaunlich. Eine der Möglichkeiten, die ich gerne planen, ist, zunächst einmal eine kurze Skizze der Website zu machen, wenn ich sie noch nicht entworfen habe. Nachdem ich es entworfen habe, mache ich dann gerne einen Wireframe, und das ist kein typischer Wireframe, wie sieht die Website aus? Wie funktioniert es? Aber ein Box-Etiketten-Drahtmodell, wie passen alle diese Boxen zusammen auf der Website oder auf der Seite? Lassen Sie mich Sie durch meine Charakter-Website und wie ich alle Blöcke angelegt habe. Zunächst einmal gibt es meine Seite, die eine große Schachtel ist. Was ich will, ist die Header-Box und in dieser Header-Box möchte ich eine Profilbild-Box. Ich will, dass es rund ist, und ich habe ein Kreuz durch die Box gelegt, um zu signalisieren, dass es ein Bild ist. Das nächste Element ist eine Überschrift, immer noch innerhalb der Kopfzeile, und das wird der Name meines Charakters sein, und vielleicht könnte es eine Unterüberschrift geben. Aber vorerst gibt es nur eine Überschrift. Das nächste Ding ist im Inhalt, ich möchte eigentlich, dass es eine andere Überschrift gibt, und vielleicht könnte das über meinen Charakter sagen. Dann wird es ein Absatz-Tag mit einem Haufen Kopie geben, eine Reihe von Texten über meinem Charakter. Die nächste Sache, eine weitere Überschrift, und das könnte etwas sagen, wie die Lieblingsdinge Meines Charakters, oder die Lieblingsfreunde Meines Charakters. Was ich tun werde, ist, dass ich es in ein geordnetes Listenfeld einfügen werde, und in diesem geordneten Listenfeld und in diesem geordneten Listenfeldwird es eine Reihe von Listenelementen geben. Danach werde ich ein Bild setzen und wieder sehen Sie das große Kreuz, das das Bild bedeutet. Darunter wird es eine kleine Beschriftung geben, und dann darunter weitere Überschrift mit einer ungeordneten Liste mit einer Reihe von Listenelementen. Diese Liste kann Lieblings-Dinge zu tun, oder Freunde wieder, oder Eigenschaften, oder eine ganze Reihe von verschiedenen Dingen, die Sie in Listen setzen können. Danach werde ich nur eine kleine Fußzeile einschließen und in dieser Fußzeile werde ich sagen, das ist, wer die Website gemacht hat, hier finden Sie mich und alle anderen kleinen Informationen, nach denen meine Benutzer suchen möchten. Dies ist, was ich für alle Websites mache, von einem Design in HTML und CSS. Dies ist ein wirklich guter Prozess, ein wirklich guter Teil der Planung. Wenn ich sagen kann, wie passt das alles als Boxen zusammen? Sie tun das gleiche für Ihre Website, Sie können meine kopieren oder Sie können sich mit ein paar verschiedenen Ideen Ihrer eigenen kommen. Aber es ist wirklich gut, darüber nachzudenken, wie alles in Boxen zusammenpasst und welche Boxen in welche Boxen passen. 12. Lass uns das HTML für unsere Website schreiben: Lassen Sie uns unser HTML für dieses Projekt schreiben. Öffnen wir unseren Cartoon-Hero-Ordner und ziehen Sie ihn in Sublime Text und das erste, was wir tun werden, ist eine neue Datei zu erstellen und wir werden es als index.html in unserem Cartoon-Hero-Ordner speichern . Der Grund, warum wir es index.html nennen, ist, weil, wenn der Browser auf eine Website gelangt, er wissen muss, welche Datei nicht zuerst geladen werden sollte und er immer nach Ihrer Indexdatei sucht. Das nächste, was wir tun werden, ist ein HTML-Tag zu schreiben und Sublime Text den Rest ausfüllen zu lassen. Wir werden dieses kleinere als Symbol entfernen, wir werden dann anfangen, unser HTML zu schreiben. Also mein Charakter ist Wreck-It Ralph. Ich genieße ihn wirklich. Wer auch immer Ihr Charakter ist, es könnte eine Zeichentrickfigur sein, eine animierte Figur, aber wenn Sie nicht in das sind, wählen Sie eine Filmfigur oder wählen Sie jemand anderes, um es zu tun , es macht es viel einfacher und viel lustiger. Das nächste, was wir tun werden, ist ein Link-Element einfügen und Sublime Text weiß, dass es ein CSS1 ist, das großartig ist, also sagen wir css/hero. CSS, so dass es weiß, wo es zu finden ist. Ich würde gerne sparen, wenn ich gehe, nur für den Fall, dass der Computer abstürzt oder etwas Schlimmes passiert. Das ist unser Hauptelement. Jetzt werde ich meinen Box-Wireframe hier und da referenzieren. Mal sehen, was ich tun muss. Ich brauche zuerst ein Header-Element, also lassen Sie mich mein Header-Element eingeben und in meinem Header-Element brauche ich ein Bild, das unser Profilbild und eine Überschrift ist. Lassen Sie uns mein Bild-Tag machen und meine Quelle wird img/profile.jpg sein und dann darunter werde ich ein h1-Tag erstellen und es Wreck-It Ralph nennen. Fantastisch. Das ist mein Header, aber jetzt wirst du meinen Wireframe sehen, dass ich tatsächlich einen externen Container habe und das ist nicht der Browser, das ist eigentlich ein Wrapper. Ich werde einen neuen Wrapper oder ein neues div mit der Klasse von Wrapper erstellen und es wird alle meine Inhalte umschließen. Das nächste, was wir tun werden, ist ein div mit einer Klasse von Inhalten zu erstellen und hier werde ich alle meine Inhalte einfügen. Das nächste ist eine Fußzeile und obwohl es in meiner Vorschau oder meinem Drahtmodell hier keine echte Box für eine Fußzeile gibt und es keine echte Box für Inhalte gibt, habe ich beschlossen, dass ich diese einfügen sollte. Ihr Drahtmodell muss nicht super konkret sein, es hilft Ihnen nur bei der Planung. Also die nächsten Elemente, die ich setzen werde, ist meine Fußzeile. Nun, in meinem Inhalt, was ich tun muss, ist, dass ich ein h2 für diesen Titel oder diese Überschrift erstellen muss, ich muss ein p-Tag, ein anderes h2, eine geordnete Liste mit einer Reihe von Listenelementen in einem Bild erstellen, ein p mit einer Klasse der Beschriftung, eine andere Überschrift, eine ungeordnete Liste mit einigen Listenelementen innerhalb und innerhalb der Fußzeile, muss ich ein paar Elemente erstellen, die ich mit einer Liste erstellen werde. Also fangen wir an, das zu schreiben. Das erste, was ich hier tun möchte, ist über Ralph zu schreiben und ich wähle ein h2, weil es bereits ein h1 auf der Seite gibt , so dass diese nicht wichtig sind wie die h1, aber sie sind ziemlich wichtig. Mein nächstes ist ein p-Tag und in diesem p-Tag werde ich ein wenig über Ralph schreiben, also ein 8-Bit-Video-Game-böser Kerl, der dieLänge der Arcadereist Länge der Arcade um zu beweisen, dass er ein guter Kerl ist. Er hat auch massive Hände. Wir können davon ausgehen, dass man rechnen sollte. Das nächste, was ich tun möchte, ist über Ralphs Eigenschaften zu schreiben. hier werde ich ein ol verwenden und innerhalb der ol, wir werden ein paar Listenelemente erstellen. Das erste, was er ist super cool. Der nächste Listenartikel, er wird als böse, cool behandelt. Der nächste, er ist freundlich zu Glithy-Girl-Spielfiguren. Es hat nicht so angefangen, aber es endet so. Nach unserer ol oder unserer bestellten Liste, werden wir ein großes Bild haben, also werde ich diesem Bild eine Klasse von big-image geben. Es macht Sinn, richtig? Quelle des Bildes wird auch big-image.jpg sein. Danach werden wir ein P bekommen und ich werde ihm eine Klasse von Untertiteln geben und in dieser Beschriftung wird sagen, das ist Ralph in Aktion. Danach werde ich noch ein h2 erstellen und sagen, dass Ralphs Freunde richtig geschrieben haben, natürlich. Hier werde ich eine ungeordnete Liste verwenden. Es erstellt ein paar Listenelemente. Ich werde das nur kopieren und einfügen. Hier drinnen werde ich ein paar seiner Freunde finden. Der erste ist Jake aus der Abenteuerzeit. Der nächste ist Bloo von Fosters. Das ist Foster's Home für imaginäre Freunde. Der nächste ist Arthur von King Arthurs Disasters. Nun, was ich tun werde, ist schnell gehen einige Links für diese drei Jungs in der Google Chrome. Geben wir Jake aus Adventure Time ein. Es wird ein bisschen gehen, und ja, das ist eine, die ich vorhin gefunden habe. Ich werde das kopieren und ich werde einen Link um Jake erstellen. Die href wird sein, dass, die Ziele werden Unterstrich leer sein, und der Titel wird Visit Jakes Seite sein. Ich werde das Gleiche von Bloo machen. Suche Boo Fosters Home, Chrome. Hier ist eine, die ich vorhin gefunden habe. Lassen Sie uns das nochmal kopieren. Hier drinnen, lassen Sie uns einen Link um Blau erstellen. Die href wird sein, dass ich gerade kopiert habe. Das Ziel wird Unterstrich leer sein, und der Titel wird Visit Bloos Seite sein. Der nächste wird Arthur sein. Lassen Sie uns dasselbe für Arthur tun, schaffen wir eine Verbindung um ihn herum. Wieder mit einem href, einem Zielunterstrich leer und dem Titel von Visit Arthurs Seite. Wir müssen jetzt einen Link für Arthur finden. Ich liebe Google und [unhörbar] .Da gehen wir. Lassen Sie uns das nochmal kopieren. Gehen Sie zurück zu Sublime Text und fügen Sie ihn in die href ein. Das ist so ziemlich unser Inhalt. Jetzt, in unserer Fußzeile, brauchen wir nur ein paar Kleinigkeiten. Ich werde wieder eine ungeordnete Liste mit ein paar Listenelementen verwenden, wir werden Elemente auflisten, ich werde sagen, Made by Rich. Dann der nächste Listeneintrag, werde ich sagen, gemacht während einer Skillshare Klasse. Schließlich werde ich sagen, dass dieser Listeneintrag urheberrechtlich geschützt sein sollte, obwohl ich kein Recht auf Urheberrecht habe, sollte es sein, und oder kaufmännisches Und-Kopie, Semikolon 2015. Dies ist eine besondere Art, Ihr Copyright-Symbol zu schreiben. Ich werde einen Link um Skillshare setzen, und dann werde ich anfangen, alle diese Details auszufüllen. Das sind meine Webseiten. Auch hier sollte das Ziel Unterstrich leer sein und der Titel sollte sein, Visit Rich Website. Ich werde nur das alles kopieren und einfügen um es für die Skillshare ein wenig einfacher zu machen. Für die Websites der Skillshare wird die href skillshare.com sein. Das ist so ziemlich unser HTML, aber wir müssen sehen, dass es funktioniert. Lassen Sie uns zu unserem Finder gehen, ziehen Sie index.html in Google Chrome, und es sollte so etwas sein. Wir müssen zwei Bilder finden. Simon sucht nach Wrack-it Ralph. Ich gehe in die Registerkarte „Bilder“. Es gibt einen wirklich super coolen, den ich mag. Das ist er. Ich werde das von unserem Profilbild verwenden. Ich gehe zum Cartoon-Helden. Ich werde einen neuen Ordner für alle meine Bilder erstellen. Es ist großartig, Ihr CSS in Ihrem CSS-Ordner und alle Ihre Bilder in Ihrem Bild-Ordner zu speichern. Ich werde diese profile.jpg nennen. Fantastisch. Dann ist das nächste, was ich tun werde, um nach einem wirklich coolen großen Bild zu suchen. Das könnte gut sein. Können wir einfach sehen, ob es noch was gibt? Ja, das ist gut. Ich werde nur klicken, „Bild anzeigen“, und es wird geladen. Während es geladen wird, werde ich nur mein Testbild in den Bild-Ordner legen, und ich werde das Box-Wireframe eins oben halten, nur weil es nicht wirklich Teil der Website ist, es ist eher etwas zu verweisen. Hier werde ich das Bild als big-image.jpg speichern. Fantastisch. Mal sehen, was jetzt passiert. Wir haben unser Profilbild, wir haben das große Bild. Es ist wirklich, wirklich groß, und das ist unser HTML. Von hier aus können wir tatsächlich anfangen, diese Kunst auf erstaunliche Weise zu stylen. Wir können ein paar wirklich coole Sachen damit machen. Wenn Sie möchten, öffnen Sie GitHub Desktop und synchronisieren Sie Ihre Dateien, aber ich mache das nur auf das CSS-Video. Cool. Wir sehen uns im nächsten Video. 13. Lass uns das CSS für unsere Website schreiben (den lustigeren Teil): Lasst uns ein bisschen CSS schreiben. Öffnen Sie Ihren Cartoon-Hero-Ordner, ziehen Sie ihn in Sublime Text, und öffnen Sie die Indexdatei sowie Ihre hero.css. Was wir tun müssen, ist, dass wir die Kopfzeile und ihre Elemente stylen müssen, wir müssen den Inhalt und seine Elemente stylen, und wir müssen die Fußzeile und ihre Elemente stylen. Sie können entweder zwischen Index und Held wechseln, oder Sie können kopieren und einfügen, was ich gerne mache. Ich mag es, kopieren zu sagen, und ich mag es einfügen, und dann möchte ich es auskommentieren. Ein Kommentar ist etwas, das der Browser nicht sehen wird, und Sie schreiben es so, was großartig ist. In HTML können Sie einen Kommentar mit dieser Syntax schreiben , was wirklich cool ist. Wenn du dir ein paar Notizen hinterlassen willst wie : „Hey, sieh dir das an.“ Das kannst du auch tun. Das kommt nicht durch den Browser, und bemerkt es nicht einmal. Ich möchte es einfach auskommentieren und dann von hier aus referenzieren. Meine Kopfzeile. Was ich mit meinem Header machen möchte. Ich möchte, dass es eine einfarbige Farbe ist, also werde ich die Hintergrundfarbe sagen, ich möchte, dass es ein Blau ist, aber ich möchte, dass es ein besonderes Blau ist. In Google Chrome öffne ich einen neuen Tab und suche nach einer Farbauswahl. Ich bin normalerweise nur für die erste Option gewachsen und ich will blau. Das Blau sieht ziemlich gut aus. Wir ändern die Größe des Browsers. Dieser hier sieht gut aus. Ich werde es kopieren. Ich werde einen Hash davor setzen und ihn einfügen. Fantastisch, das ist meine Hintergrundfarbe. Ich möchte, dass es ein wenig Platz um die Elemente innerhalb der Kopfzeile ist, also werde ich ihm eine Polsterung geben. Ich werde es eine Polsterung von geben, sagen wir 40 Pixel. Jetzt könnte ich es so schreiben, padding-rechts könnte ich ihm einen Wert geben. Ich könnte sagen, padding-links und padding-top und padding-bottom und padding, was auch immer. Aber es gibt eine Abkürzung. Wenn ich möchte, dass sie alle gleich sind, sage ich einfach padding und gebe ihm einen Wert. Wenn ich alle Werte ausführen möchte, die ich in einer Zeile tun kann. Ich kann den oberen Wert sagen, ich kann dann den richtigen Wert, den unteren Wert und dann den linken Wert sagen . Sie können anders sein. Wenn ich will, dass oben und unten gleich sind und links und rechts gleich sind, kann ich es buchstäblich so schreiben. Aber weil ich will, dass es alles gleich ist, werde ich es nur als 40 Pixel behalten. Das nächste, was ich tun möchte, ist meine h1 zu sagen. Jetzt könnte ich es als alle h1s in der Kopfzeile schreiben, aber ich weiß, dass es nur ein h1 gibt, also werde ich es einfach kurz halten. Ich möchte, dass die Schriftgröße etwa 90 Pixel beträgt, wir werden sehen, wie es gerade aussieht, und ich möchte, dass seine Farbe weiß ist. Fantastisch. Ich habe dann dieses Bild in meinem Header, aber ich weiß, dass es ein anderes Bild gibt. Hier werde ich das Bild innerhalb der Kopfzeile sagen, und ich wollte in der Mitte sein. Ich möchte meinen Header sagen, lasst uns Textausrichten zentrieren, und dies wird meinen Header und mein Bild ausrichten. Was soll mein Bild sonst noch tun? Ich will, dass es rund ist. Ich werde ihm einen Grenzradius geben und ich werde es 150 Pixel machen und wir werden sehen, was passiert. Wenn du so bist: „Was zum Teufel. Woher weißt du, dass es Grenzradius war?“ Nun, wenn Sie nichts wissen, googeln Sie es einfach. Es ist der einfachste Weg, etwas zu tun. Wenn Sie so etwas wie runde Ecken CSS Google, finden Sie eine Reihe von Informationen. Klicken Sie auf einen der Links, sie sind wirklich hilfreich, sie werden viel erklären und dann einfach in Ihrer Website implementieren. Nachdem wir gespeichert haben, gehen Sie zu Google Chrome und aktualisieren. Sieht ziemlich gut aus. Sie werden sehen, dass die Ecken machen es nicht ganz rund, Sie werden auch feststellen, dass ich in eine Reihe von zusätzlichen Informationen wie über Ralph, seine Eigenschaften und seine Freunde an der Unterseite, mit Links falte . Wenn Sie das nicht getan haben, tun Sie das. Ich will, dass das hier rund ist. Inspectieren Sie es. Lassen Sie uns einfach die Breite des Inspektors erhöhen. Sie werden sehen, dass, wenn ich den Mauszeiger über das Bild führe, es sagt, dass es 450 Pixel mal 450 Pixel sind. Es gibt zwei Möglichkeiten, dies zu tun. Ich könnte entweder nach einer Bildgröße suchen, Photoshop oder eine andere Bild-App verwenden. PicResize ist ziemlich cool. Oder ich könnte es einfach so lassen, wie es ist, und ändern Sie die Breite und Höhe. Das werde ich tun. Ich werde sehen, wie es aussieht, und sagen Breite. Lassen Sie uns für 300 Pixel gehen, weil 300 Pixel und 150 Pixel zusammen gehen, da 150 die Hälfte von 300 ist. Das sieht gut aus. Ich werde das in meiner CSS-Datei implementieren, Breite 300 Pixel. Ich muss die Höhe nicht ändern, einfach weil sie mit der Breite automatisch angepasst wird. Ich könnte die Höhe und die Breite ändern, mit Auto-Resize mit der Höhe. Ich kann Dinge verzerren und Dinge unverhältnismäßig machen. Wenn ich eine andere Breite und eine andere Höhe für ein quadratisches Bild einstelle. Das nächste, was ich tun möchte, ist, dass ich eine Grenze drauf setzen möchte. Es gibt ein paar Zeilen, die Sie hier kennen müssen, aber genau wie es eine Abkürzung für das Auffüllen gibt, gibt es eine große Abkürzung für den Rahmen. Hier möchte ich sagen, ich möchte, dass meine Rahmenstärke 10 Pixel beträgt, ich möchte, dass der Rahmenstil solide und dass die Farbe eine rote Farbe hat. Ich werde gehen, um das zu finden. Muss rot sein, und so markiere ich das, CC0000 sieht gut aus. Wenn ich das kopiere, dann füge ich es hier ein und speichere, schauen wir uns an, wie es aussieht. Sieht ziemlich gut aus und könnte ein bisschen dicker sein also mal sehen, wie es aussieht, wenn es ein bisschen dicker ist. Ich drücke hier nur den Pfeil nach oben. Das sieht ziemlich gut aus. Vierundzwanzig, aber dann, meine Breite, der Grenzradius ist falsch. Also werde ich meinen Grenzradius ändern, bis er wieder gut aussieht. Sieht gut aus. Was ist das? 174. Ich werde das alles kopieren, weil genau das ist, was ich will. Fantastisch. Dann werde ich retten. Aktualisieren. Sie werden nun sehen, dass es einen Rahmen gibt, der sich von der tatsächlichen Breite unterscheidet. Meine Breite ist immer noch 300, aber mein Rand oben, unten, links und rechts ist 24. Alles in allem ist meine Höhe und Breite dieses Bildes 348. Das nächste, was ich tun möchte, ist, all diesen Text in etwas überhöhlicheres zu ändern . Ich werde einen Standardtext verwenden, ich werde den HTML und den Standardtext oder die Schriftfamilie des Körpers auf Arial setzen, und wenn sie Arial nicht haben, werde ich sagen, serif. Wenn Sie nicht wissen, was eine Schriftfamilie ist, Google es einfach. Sie werden eine Reihe von Informationen finden. Lasst uns retten. Komm hierher zurück. Das sieht ein bisschen überhöhlicher aus. Sieht gut aus. Das nächste, was wir tun müssen, ist, diesen weißen Rand um alles loszuwerden, und ist auch ein HTML- und Körperattribut. Lasst uns das ändern. Ich möchte Polsterung sagen. Manchmal könnte es Polsterung sein. Ich werde das auf Null setzen. Dies sind die Standardstile, die mit einem Browser geliefert werden. Es sieht nicht so aus, als wäre es Polsterung, also werde ich Marge hinzufügen. Setzen wir das auf Null, nehmen Sie die Polsterung weg. Lasst uns das retten. Wow, ich weiß nicht, was ich gerade gemacht habe. Was ist mit dem? Neue Ansicht in Datei. Wow. Speichern wir einfach, stellen Sie sicher, dass Sie das schließen. Gehen wir zurück zu Google Chrome, und voila, die kleinen weißen Lücken um die ganze Seite verschwinden. Das ist so ziemlich unser Header, sieht wirklich gut aus. Sieht aus Wrack-It Ralphie. Nun, das nächste, was ich tun möchte, ist, ein paar Sachen mit unseren Inhalten zu machen. Lassen Sie uns den Header HTML entfernen und wir können auf den Inhalt wie diesen jetzt zurückverweisen, nur für eine andere Art und Weise. Dieser Inhalt, es gibt eine Reihe von h2s, geordnete Listen, Bilder und so weiter. Das erste, was ich tun möchte, ist, die Inhaltselemente zu adressieren. Ich möchte ihm eine maximale Breite geben, nur damit es nicht immer so breit ist, und ich möchte es auch in die Mitte setzen. Ich kann Marge, Null für oben und unten und auch für links und rechts sagen Null für oben und unten . Jetzt Auto, macht es wirklich schön, es ändern Sie es für Sie, aber nur auf der linken und rechten. Lasst uns das retten. Mal sehen, was passiert. Lassen Sie uns das schließen. Dinge sehen etwas seltsam aus, nicht wahr? Was wirklich cool ist, wenn das passiert, können wir inspizieren und wir können sagen, gehen Sie zu unseren Inhalten, und sagen wir max-width. Lass es uns vorerst auf 400 ändern. Geben wir ihm eine Hintergrundfarbe von, wow, Maisseide, das sieht gut aus. Lass uns Korallen gehen. Coral sieht gut aus. Sie können sehen, dass das die maximale Breite ist. Wenn ich das vergrößere, wirst du sehen, dass rechts und links ein gleiches Leerzeichen ist. Aber jetzt macht dieses Bild ein paar verrückte Sachen. Was ich hier tun möchte, ist, dass ich das big-image, .big-image, und ich möchte sagen, dass die maximale Breite 100 Prozent ist. Ich gebe keinen absoluten Wert. Mal sehen, was hier passiert. Ich will noch nicht kaufen. Danke. Aktualisieren. Du wirst anfangen zu sehen, dass es tatsächlich zu einem Prozentsatz sitzt. Wenn Sie die Größe Ihres Browsers ändern, wird es tatsächlich für Sie skaliert, was ideal für Mobilgeräte ist. Das nächste, was ich tun möchte, ist in dem Inhalt, den ich ein bisschen Polsterung setzen möchte , nur damit es nicht immer links und rechts berührt. Also möchte ich sagen, dass Polsterung Null und 20 Pixel ist. Wenn ich das speichere, sehe ich dann, dass links ein wenig Leerraum und rechts ein Leerraum vorhanden ist. Aber nicht für meinen Kopf. Der Header sieht perfekt aus. Das nächste, was zu tun ist, ist diese Beschriftung. Was ich hier tun möchte, ist es anzugehen, und ich möchte die Schriftgröße etwa 16 Pixel machen. Ich will die Schriftfarbe. Also lasst uns die Farbe hellgrau sein. Dann möchte ich auch, dass der Schriftstil kursiv ist, so dass er tatsächlich wie eine Beschriftung aussieht. Lass uns das speichern und sehen, wie es aussieht. Das ist Ralph in Aktion. Das ist fantastisch. Das nächste, was ich tun möchte, ist, das ein bisschen schöner aussehen zu lassen. Also meine ul, ich will diese Festplatten nicht, also werde ich List-Stil sagen, keine und ich werde ihm auch eine Polsterung von Null und eine Marge von Null geben. Mal sehen, was passiert. Fantastisch. Aber Sie werden sehen, dass sich die ul und die Fußzeile auch ändern müssen, wenn ich das tat. Aber das ist okay. Also Jake aus Adventure Time, Bloo von Fosters, Arthur von König Arthurs Katastrophen. Aber diese Links sehen etwas seltsam aus, also lassen Sie mich auch die Links ändern. Alle Links, ich will eigentlich, dass die Farbe rot ist, weil das Wrack-it Ralphs Farbe ist, und ich will nicht, dass sie eine Unterstreichung haben. Also möchte ich sagen, Textdekoration, keine. Lass uns das speichern und sehen, wie es aussieht. Fantastisch. Das nächste, was zu tun ist, ist unsere Fußzeile. Lassen Sie uns unsere Fußzeile ein wenig ändern. Ich möchte, dass es ein sehr, sehr hellgrau mit etwas Polsterung ist. Nehmen wir an, die Polsterung, die ich auf 40 Pixel und 20 Pixel setzen wollte. Jetzt sieht es nicht ganz wie eine Fußzeile unten aus, aber denken Sie daran, es ist nur eine Anleitung. Fußzeile unten, sagen wir, ich möchte eine Hintergrundfarbe. Nun, was sollte die Hintergrundfarbe sein? Lass uns nochmal eine Farbe auswählen. Ich hätte wirklich gerne ein Schwarz, aber ich werde es zu einer wirklich hellen Farbe schwarz machen. Also lasst uns diese Farbe ausprobieren. Lassen Sie uns das einfach kopieren und einen Hash hier einfügen und einfügen. Mal sehen, wie es aussieht. Das sieht ziemlich gut aus, aber es ist immer noch ziemlich eng an den Rest des Inhalts. Was ich also gerne tun möchte, ist, dass ich nur einen Rand mit nur einer Margin-Spitze von etwa 20 Pixeln setzen möchte. Dann möchte ich auch seine ul in ein wenig ändern. Was ich hier gerne tun würde, ist die ul text-align, center. Also nehmen wir das Zentrum. Aber dann möchte ich auch alle li's innerhalb der ul sagen, aber nur in der Fußzeile werde ich gerne als Inline anzeigen. Jetzt wird es im Moment als Block angezeigt. Das kann ich Ihnen hier zeigen. Wenn ich dieses Element inspizieren muss, können Sie sehen, dass es tatsächlich ein ganzer Block ist. Sie können an der blauen Hervorhebungsfarbe sehen. Jetzt ändere ich die Anzeige in Inline. Ich sage, das Li ist in der ul, in der Fußzeile als Inline angezeigt. Mal sehen, was das bewirkt. Aktualisieren. Hergestellt von Rich Made während einer Skillshare Klasse Copyright 2015. Aber es ist ein bisschen gebündelt, also was ich tun werde, ist, dies in einen Inline-Block zu ändern, was bedeutet, dass ich den Rand darauf anwenden kann. Also Marge, oben, Null, und links und rechts, werde ich fünf Pixel sagen. Ich werde hier speichern, aktualisieren, und das sieht ziemlich gut aus. Dies liegt dagegen in der Mitte. Ich will nicht, dass das in der Mitte ist, also werde ich nur die Fußzeile ul setzen und es einfach text-ausrichten, zentrieren für die ul und die Fußzeile, und aktualisieren Sie hier. Nun, das ist unsere Website. Jetzt teilen Sie es. Gehen Sie wild, tun Sie, was Sie wollen, stylen Sie es, wie Sie wollen, und teilen Sie es dann. Ich denke, das mächtigste an dem Web ist, dass man es teilen kann. Sie können Informationen freigeben. Dieser Weg ist ziemlich kostenlos. Nun, was ich tun werde, ist, dass ich Ihnen ein paar verschiedene Arten zeigen werde , um es zu stylen. Gleicher HTML, nur ein anderes CSS. Wir können ein bisschen Bilder reinlegen, aber das ist es im Grunde. Sobald Sie Ihre Website erstellt haben, sobald Sie damit zufrieden sind, nun, wenn Sie glücklich sind, etwas davon zu teilen, gehen Sie zu Ihrer GitHub Desktop-App und stellen Sie sicher, dass Sie sich im gh-Pages Zweig befinden, und dann lassen Sie uns unsere Dateien sagen, First Commits für unsere Charakterseite oder Websites. Übergeben Sie es, synchronisieren Sie es. Denken Sie daran, was wir jetzt tun müssen, sobald es die Synchronisierung abgeschlossen ist, müssen wir github.com gehen. In github.com müssen wir im Held sein, wir müssen zum Commit-Abschnitt gehen, wir müssen sicherstellen, dass wir auf dem gh-pages Zweig sind. HTML-Dateien werden geschrieben. Mal sehen, was GitHub tut. Es synchronisiert sich immer noch. Es dauert lange. Ich frage mich, ob es darum geht, dass wir ein paar große Bilder dort haben. Okay, da gehen wir. Es ist synchronisiert, gehen wir zurück zu github.com. Lassen Sie uns aktualisieren, und Sie werden First Commit für unsere Charakterseite sehen. Los geht's. Nun wollen wir in mrra-screencast.github.io gehen. Verwenden Sie offensichtlich Ihren GitHub-Benutzernamen. Gehen Sie zu Cartoon-Helden, drücken Sie Enter. Sie werden sehen, dass es keine index.HTML gibt und das liegt daran, dass es diese index.HTML als erste Datei aufnimmt , um zu erhalten. Das ist deine Webseite. Sie können es auf Ihrem Mobiltelefon lesen, Sie können es mit Ihren Freunden teilen. Sieht ziemlich gut aus. Da gehen wir. Tanzen Sie, trinken Sie etwas Tee, klopfen Sie sich auf den Rücken und sagen Sie Ihrer Mutter, dass Sie gerade Ihre erste Website gemacht haben und Sie können es teilen. 14. Oh, wie vielseitig CSS ist!: Okay, damit du siehst, dass wir hier aufgehört haben. Wir hatten eine wirklich gut aussehende Charakterseiten. Nun, was ich getan habe, ist, dass ich zwei weitere Stylesheets geschrieben habe. Einer wird Hero-Alt-1 genannt, und der andere hieß Hero-Alt-2. Also, indem wir einfach die Stylesheets ändern, lassen Sie uns speichern. Sie können sehen, was passiert, ich habe kein HTML geändert. Sie werden sehen, dass es einen Kachelhintergrund gibt. Dies geschieht, indem ein Hintergrundbild gesetzt wird. Dies ist eine spezielle Syntax für das Gehen eines Ordners nach oben. Also von allem, was ich hier werde, werde ich ein CSS, es geht nach oben einen Ordner und dann geht es und sieht im Bild-Ordner für das Pixelbild 100 JPEG. Dann werde ich eine Hintergrundwiederholung über Wiederholungen festlegen. Dann sehe ich so etwas aus. Sie werden auch einen technischen Schatten bemerken. Also, wenn ich das inspiziere und ich einfach das Hintergrundbild abnehme, werden Sie feststellen, dass es einen Schatten auf dem Text und einen Schatten auf dem Bild selbst gibt. Dies geschieht durch zwei verschiedene Dinge. Die h1 hat einen technischen Schatten, und dies ist der x-Wert, dies ist der y-Wert, und das ist die Unschärfe-Menge. Dann die Farbe des Schattens. Wieder gibt es einen Box-Schatten auf dem Header-Bild. Sein x-Wert, der y-Wert der Weichzeichnungsmenge und die Farbe. Das ist also der obere Abschnitt. Ich habe ein paar Farben gewechselt. Ich habe eine SMS geschickt, ich habe Zahlen abgenommen, und dann habe ich das Foto geändert und ein bisschen. Das ist also eine Version. Eine andere Version, ich werde es nur zu zwei ändern und speichern Sie es. Mal sehen, was jetzt passiert. Wow. Es ist also wirklich rot. Ja, wirklich rot. Es ist sehr flach. Es ist ein quadratisches Bild. Es gibt keine Schatten. Die Alliierten haben Grenzen um sie herum, und sie alle runden Kisten. Beschriftungen wurden geändert. Was sind das? Nun, das sind Links, und sie haben eine Hintergrundfarbe, und sie haben auch eine Hover-Einstellung auf sie angewendet. Also in helo-alt-2 zu, Ich werde Sie in den A-Tags zeigen. Es gibt eine Hintergrundfarbe. Wenn sie dann schweben und dies als Pseudo-Klasse bezeichnet wird, ändert der Hintergrund die Farbe. So bekomme ich diese dunklere Farbe, wenn ich über einen Link schwebe. Nur indem ich CSS und absolut kein HTML ändere, bin ich in der Lage, drei völlig verschiedene Seiten zu finden? Das ist also die Macht von CSS. Sie können radikal ändern, wie Ihre Websites aussehen und fühlen, nur durch ein paar Codezeilen und durch Ändern Ihrer CSS-Dateien. 15. Vielen Dank und die nächsten Schritte: Es ist das Ende der Projekte. Ich hoffe wirklich, du hattest Spaß, denn das ist das Wichtigste. Das nächste, was ich wirklich hoffe, dass du getan hast, ist viel gelernt. Wir haben HTML behandelt, wir haben CSS behandelt, wir haben behandelt, wie sie sich zueinander beziehen. Wir haben begonnen, Sublime Text zu verwenden. Wir haben begonnen, GitHub zu verwenden. Wir haben Google Chrome verwendet und begonnen, Elemente zu inspizieren. Zu all diesen Themen gibt es noch viel mehr. Wenn Sie es genossen haben, lernen Sie jeden Tag ein bisschen mehr, schreiben Sie HTML und CSS jeden Tag, auch wenn es nur zwei Zeilen sind. Es wird Ihrem Gehirn helfen, frisch zu bleiben, aber vor allem, teilen Sie Ihre Projekte mit anderen Menschen. Sie in einer Projektgalerie PostenSie in einer ProjektgalerieLinks, beantworten Sie Fragen, stellen Sie Fragen und denken Sie daran, dass Google Ihr Freund ist. Das Web wird von Leuten gebaut, die HTML und CSS schreiben. Das gesamte Web wird auf HTML und CSS angehoben. Das ist Ihre erste Anlaufstelle, sonst, fragen Sie einen echten Menschen. Cool, ich hoffe, du hattest Spaß. Ich hatte Spaß, es zu tun. Achten Sie auf ein paar weitere Videos.