Erstelle Websites noch heute! Keine Erfahrung erforderlich

1. 1.1 Kurseinführung: Grüße und willkommen. Mein Name ist Aaron Craig und ich werde Ihr Lehrer für diesen Kurs für absolute Anfänger in HTML und CSS sein. Dieser Kurs richtet sich an Personen, die schon immer eine Website erstellen wollten, aber nicht genau wussten, wo sie anfangen sollen. Oder sie waren zu eingeschüchtert durch den Prozess des Programmierens oder der dahinter liegenden Technologie. Ich werde Ihnen sagen, dass Sie ein Webentwickler sein können und ich bin hier, um Ihnen auf diesem Weg zu helfen. Wir werden Schritt für Schritt die Grundlagen von HTML und CSS erläutern, wie es funktioniert, wie man es zusammensetzt und wie man Ihre erste Website gestaltet. Wenn Sie wissen, wie man kodiert, können Sie diesen Kurs nehmen, aber er wird wirklich langsam gehen und es wird nur eine Auffrischung für Sie sein, aber wenn Sie nicht wissen, wie man kodiert oder Sie denken, dass Sie jemanden kennen, der so klingt, wäre dieser Kurs gut für, Ich ermutige Sie, es mit ihnen zu teilen, bekommen es da raus, weil jeder kann ein Web-Entwickler sein, wenn sie wollen und ich glaube, dies wird ein großartiger Kurs für sie und für Sie sein. Lassen Sie uns darüber sprechen, warum HTML und CSS heute noch relevant sind, im nächsten Video. 2. 1.2 von Warum ich auf keinen Fall: In diesem Tag und Alter scheint es möglicherweise nicht notwendig, HTML und CSS zu lernen. Sie haben wahrscheinlich Anzeigen für Squarespace und Wix und WordPress gesehen, Drag & Drop, bauen Sie es selbst. Keine Codierungserfahrung erforderlich, und einige davon können funktionieren. Sie können einige ziemlich nette Websites mit denen machen, aber die Sache ist, dass jede Website im Internet HTML und CSS als Rückgrat verwendet. Die Art und Weise, wie es geliefert wird, kann je nach verwendeter Technologie sehr unterschiedlich aussehen, aber es sind immer noch HTML und CSS, weshalb ich fest davon überzeugt bin, dass es für jeden Webentwickler wichtig ist, ein Verständnis dafür zu haben und dass ist, was dieser Kurs für Sie tun wird. Wir werden die Grundlagen behandeln und ich werde Ihnen die Ressourcen geben, um nach diesem Kurs weiter zu lernen, um der beste Web-Entwickler zu werden, den Sie können. jetzt im nächsten Video darüber sprechen, Lassen Sie unsjetzt im nächsten Video darüber sprechen,wie dieser Kurs strukturiert ist und wie Sie am besten das Beste aus ihm herausholen können. 3. 1.3 Kursstruktur: Dieser Kurs wurde entwickelt, um ein Follow-entlang Codierung Kurs sein. Das bedeutet, dass ich ausschreiben werde, was ich sage, und es erklären werde, während wir gehen. Aber du solltest mich auf der Seite eines zweiten Monitors oder auf deinem primären Monitor haben und mit mir kodieren. Wenn Sie dies nicht tun, werden Sie nicht bekommen, was Sie brauchen, um aus diesem Kurs zu sein. Sie können eine 1000 Tutorials sehen, wie man einen Speer werfen. Aber bis du draußen bist, um es zu versuchen, ist es alles Kopfwissen, nicht praktisch. Das Gleiche gilt für das Erlernen von Sprachen und das Programmieren im Allgemeinen. Du musst es selbst machen. Machen Sie die Website, wie wir es auch tun, und Sie werden viel besser dran sein. Sie gerade sehen, wenn Sie Fragen haben, zögern Sie nicht, sie zu fragen. Denken Sie daran, dieser Kurs richtet sich an Anfänger. Wenn Sie auf ein Problem oder eine Störung stoßen, oder Sie sich nicht sicher sind, werden Sie nicht der Einzige sein, also fragen Sie es und wir werden unser Bestes tun, um es zu beantworten. du dich fragst, Wenndu dich fragst, ich frage mich, ob das das tun könnte, pausieren Sie das Video und probieren Sie es aus. Das ist eine weitere gute Möglichkeit, zu lernen, und Sie werden viel besser dran sein. Am Ende dieses Kaninchenpfades wirst du neue Erkenntnisse darüber wissen, ob etwas funktioniert oder nicht, und das ist großartig. Jetzt werde ich Visual Studio Code verwenden, ein Stück Software, die kostenlos und Open Source für alle auf jeder Plattform ist. Sie können das oder etwas anderes verwenden. Es spielt wirklich keine Rolle. Ich werde Ihnen zeigen, wie Sie eine HTML-Datei laden und die Änderungen sehen, die Sie vorgenommen haben, während Sie gehen. Alles, was wir in diesem Kurs machen, wird software- und plattformunabhängig sein , also verwenden Sie alles, was Sie sich wohl fühlen, und Sie können loslegen. Nun, da all das aus dem Weg ist, sind wir bereit, zu sehen, was HTML ist und wie es funktioniert. Ich bin super aufgeregt. Ich hoffe, Sie sind es auch, und wir sehen uns im nächsten Abschnitt. 4. 2.1 von welcher HTML ist und nicht: Das erste, was ich abdecken möchte, ist, was HTML ist und wie es sich von traditionellen Programmiersprachen unterscheidet, von denen Sie vielleicht gehört haben und Sie vielleicht nicht haben. HTML steht für Hypertext Markup Language. Es ist eine Designsprache um Tags, die Sie dann Informationen zwischen diesen Tags oder zugewiesenen Attributen setzen, die wir erhalten. Hypertext Markup Language ist die Grundlage jeder Website, und deshalb ist es wirklich wichtig, weil es das ist, was Sie tatsächlich sehen werden. Nun, es ist eine Tag-basierte Sprache, was bedeutet, dass, wenn wir, sagen wir, einen Absatz oder eine Überschrift, dann geben wir ihm tatsächlich ein Tag, das, ein Tag würde wie dieses aussehen h1, und dann setzen wir Informationen dazwischen, und das wäre es, was es sagen würde. Dies ist nur HTML, alles in Ordnung hier, all die verschiedenen Arten von HTML, die wir über die nächsten paar Videos abdecken werden, und es sieht so aus. Dies ist die Überschrift, die Sie hier haben, hier ist ein Absatz, der nur Text und Bild von Video, eine Liste, Tabellen, ein Formular ist. All dies ist eine reine HTML-Seite, hier gibt es nichts anderes. Sie können sagen, dass es nicht sehr gut aussieht, und das liegt daran, dass wir kein Styling haben, was CSS ist, das wir später behandeln werden. Was wir jetzt machen, wird nicht sehr hübsch aussehen, weil das Styling , das entwirft, wie alles aussieht und sich anfühlt und sich bewegt und das Layout davon, dass alles später kommen wird. Gewöhnen Sie sich jetzt daran, dass es so aussieht. Es geht einfach irgendwie direkt nach unten, es gibt nicht viel, es gibt nicht viel Farbe, so ist es nur, und das ist okay. Das ist im Grunde das, was HTML ist. Was HTML nicht ist, ist eine Programmiersprache. Also hier ist ein Projekt, das ich habe. Dies ist ein C-Sharp-Projekt, das auch eine Website erstellt, aber das ist eher der serverseitige Back-End-Code , der sich darüber keine Sorgen macht. Aber im Grunde, was das bedeutet, ist all dieses Zeug hier, Variablen, Funktionen , wenn sonst Anweisungen, Listen, Datenstrukturen; all diese Art von Sachen, wenn Sie davon gehört haben, gilt nicht für HTML. Alles, was Sie hier sehen, werden wir nicht mit HTML tun, weil es keine Programmiersprache ist. Wir erstellen kein Programm, um eine Website zu erstellen. Die Website wird durch Tags und Stile definiert, die wir einzurichten lernen werden. Das ist also, was HTML ist, und das ist, was HTML nicht ist. Es ist also keine Programmiersprache, es ist eine Designsprache, die wirklich schön ist, denn wenn Sie gerade in Codierung einsteigen, sind HTML und CSS fantastische Sprache, mit der Sie anfangen können, weil sie ziemlich einfach sind, aber Sie können Dinge richtig erstellen entfernt und Sie können die Dinge anfangen gut aussehen ziemlich schnell, wenn Sie lernen, was Sie tun. Also ist es toll für Anfänger, meiner Meinung nach, nur im Allgemeinen, weil viele Anfänger gerne Ergebnisse sehen; Ich war früher einer von ihnen, als ich anfing. Ich wollte Dinge erledigen, ich wollte sofort sehen, was passiert. Programmiersprachen viel schwieriger, aber HTML, CSS, und Sie bekommen, um eine Website die ganze Zeit zu bauen, und es ist wirklich cool. Das ist also, was HTML ist und was HTML nicht ist. Im nächsten Video werden wir anfangen, einige dieser Syntax anzugehen und ich werde es erklären, und wir werden nur eine grundlegende HTML-Website erstellen, während wir weitergehen. 5. 2.2 Grundlegendes HTML: Das allererste, was Sie brauchen, um Ihre Website zu erstellen, ist die Datei für die Website. Was auch immer Software Sie verwenden, Sie werden wahrscheinlich in der Lage sein, das innerhalb von dort zu machen, wenn Sie wollen , indem Sie einfach New File tun und HTML wählen. Aber wenn Sie es auf altmodische Weise mit einem Notizblock oder so etwas tun. Sie können überall in Ihrem Browser mit der rechten Maustaste klicken und sagen, Neu und es muss nur ein Textdokument sein. Es kann kein Word-Dokument sein. Es kann wie ein Notizblock sein, aber es kann nicht mehr als nur ein einfaches altes Dokument sein. Sie geben ihm einen Namen namens index und dann ändern Sie die Erweiterung from.txt oder was auch immer es war, to.HTML. Ich könnte sagen, das wird instabil, das ist okay. Klicken Sie auf „OK“, dann haben Sie Ihre erste Webseite bereit zu gehen. Es wird jetzt leer sein. Wir können es öffnen, sehen, dass da nichts ist, das ist okay. Aber es ist eine Website-Datei, die von Browsern geöffnet wird und es wird wissen, dass es sich um eine Website handelt, die zum Lesen bereit ist. Was wir tun werden, ist, es mit Informationen zu füllen. Um dies zu tun, werde ich Visual Studio Code verwenden, aber Sie können alles verwenden, was Ihnen gefällt, wenn Sie sich mit etwas anderem wohl fühlen oder Sie nicht verwenden möchten, was ich aus irgendeinem Grund verwende, das ist in Ordnung. Sie können sogar die alte Schule gehen und es im Editor oder Texteditor öffnen und alles von Hand erledigen. Ich würde es nicht ermutigen, aber Sie können es definitiv. Die Möglichkeit, Ihre Datei während der Bearbeitung anzuzeigen, besteht darin, einfach zu navigieren, wo sich Ihre Datei befindet, doppelklicken Sie darauf. Im Moment ist es leer, weil wir nichts drin haben. Aber jedes Mal, wenn Sie eine Änderung vornehmen, können Sie einfach Ihren Code speichern und dann hereinkommen und „F5" drücken und es wird automatisch neu laden, dass im Browser Ihrer Wahl. Ich benutze Firefox, aber Sie können folgen und jedem Browser Sie verwenden, und es wird es genau dasselbe tun. Beginnen wir mit einer grundlegenden Syntax. Nun gibt es eine Struktur, der alle HTML-Dateien folgen und es ist für die Online-Veröffentlichung erforderlich. Aber im Moment werden wir es überspringen und wir werden das am Ende abdecken. Das liegt daran, dass die notwendige Struktur tatsächlich mit einigen ziemlich fortgeschrittenen Token und Tags und Syntax gefüllt ist und ich möchte Sie nicht damit verärgern, ohne die Grundlagen zu kennen. Wir werden super-einfach anfangen. Das erste, was wir behandeln werden, ist das Header-Tag. Wir werden dies beginnen, indem Sie Shift und Links auf der Komma-Taste drücken , um eine Klammer zu öffnen, und wenn Sie Code verwenden, können Sie hier sehen, dass es Ihnen alle Optionen gibt und wir werden einige davon abdecken, aber nicht Sie alle, weil wir sie nicht alle für alles brauchen, was wir tun. Ich werde die Grundlagen abdecken. Wir werden mit einer Überschrift beginnen und wir haben h1 Trog h6, was für die Überschrift eins bis sechs steht. Ich werde voran gehen und h1 eingeben und dann diese Klammer mit Shift und Periode schließen. Sie können hier sehen, dass mine auto das vervollständigt, aber wenn dies nicht der Fall ist, müssen Sie dann eine andere Klammer setzen, die öffnet und dann von einem umgekehrten Schrägstrich gefolgt und dann demselben Tag und das Tag schließt das Tag aus. Jedes HTML-Tag, naja, fast jedes HTML-Tag wird dieser Struktur genau gleich folgen. Es gibt ein paar, die sich unterscheiden, aber zum größten Teil ist es, was Sie tun müssen. Sie öffnen es mit Klammern, Sie setzen das Tag, das Sie wollen, in es und das Tag ist, was wir nennen, was wir dort eingeben. Es gibt vordefinierte Tags wie Überschrift und Bild und Video und dann gibt es Tags, die Sie können, wenn Sie tatsächlich selbst erstellen und dann festlegen möchten , wie sie aussehen und fühlen und was sie tun sollen. Moment werden wir nur diejenigen verwenden, die in jedem Browser vordefiniert sind , überall. Überschrift ist ein großartiger, mit dem man anfangen kann. Eine Überschrift, wie der Name schon sagt, ist etwas, das Sie oben in einem Artikel setzen, ein Bild, ein Video, etwas, das Sie einführen. Sie haben vordefinierte Textgrößen und Blicke auf Ihre gesamte Website, wofür sie wirklich nützlich sind. Überschrift 1 ist etwas, das Sie für die Überschrift der Seite verwenden würden. Du würdest nicht die ganze Zeit die Überschrift eins benutzen. Sie verwenden, na ja, ich denke, die kleinste Zahl hier, eine und das wird Ihnen die größte Schriftgröße geben. Wenn ich sage, willkommen auf meiner Seite und ich diese speichern, werde ich voran gehen und klicken, gehen Sie live hier unten. Das wird meine Webseite öffnen und sie wird automatisch aktualisiert. Sie können sehen, dass dies Überschrift eins ist und das ist eine ziemlich große Überschrift. Sie können die Größe später mit CSS erhöhen, worüber wir sprechen werden. Aber das ist Standard und das ist, was Sie verwenden würden um im Grunde Ihre ganze Seite einzuführen. Dann von da an, wenn Sie Artikel hatten, verwenden Sie vielleicht eine kleinere Überschrift, h2. Also nennen Sie diesen Artikeltitel, ich werde ihn speichern, kommen Sie zurück zu diesem, aktualisieren und dann können Sie sehen, dass mein Artikeltitel ein wenig kleiner ist und so weiter und so weiter. Jede dieser Überschriften wird ein bisschen anders aussehen. Wenn wir reinkommen, können wir jeden austippen und Sie können ein Gefühl dafür bekommen , wie sie aussehen und die Größe, die sie haben. Jetzt, mit CSS später, werden Sie in der Lage sein, all dies vollständig nach Ihren Wünschen anzupassen, was großartig ist. Einige dieser Überschriften werden ziemlich klein, wie Rubrik 6, ich habe persönlich nie Rubrik 6 oder 5 verwendet. Normalerweise bleibe ich bei eins und dann zwei und drei, je nachdem, was ich tue. Aber Sie können sehen, dass Sie hier viele Optionen haben, denken Sie daran. Das ist die grundlegende Struktur von HTML-Tags. Man öffnet es, man legt etwas in die Mitte, der Regel Text und dann schließt man es ab. Nur weil ich Ihnen zeigen möchte, wie Sie diese Regel sofort brechen können, werde ich Ihnen eine zeigen, die dem nicht folgt und das ist das Bild-Tag. Wenn wir das öffnen, werden Sie feststellen, dass HTML und wirklich Programmierung und Programmierer im Allgemeinen wirklich, wirklich faul sind. Sie geben keine vollständigen Namen für so ziemlich nichts aus. Wenn Sie die meiste Zeit nach etwas suchen, wird es entweder wie Bild, IMG abgekürzt oder es wird einen anderen Namen haben, der Ihnen sagt, was es tut, was ein eigentlich Anker genannt wird, Dies ist ein Link zu einer anderen Webseite. Wenn Sie hier wie Link eingegeben haben, ist dies etwas hier, aber das ist nicht, wie Sie auf eine andere Webseite verlinken, es ist etwas ganz anderes. Es gibt ein paar Dinge, die Sie wissen müssen, und das werden wir abdecken. Aber zuerst gehen wir zurück zum Image, IMG. Wenn wir das schließen, können Sie sehen, dass es keine schließende Klammer gibt, die hier automatisch ausgefüllt wird , und das liegt daran, dass ein Bild ein in sich geschlossenes Tag ist. Du brauchst da nichts drin zu haben. Dann verwendet Bild tatsächlich etwas, das Attribute genannt wird. Attribute sind Dinge, die Sie über dieses Tag festgelegt haben. Ein Bild und ein Link sowie ein Video und mehrere andere Tags müssen Informationen enthalten, die Sie festlegen, damit es weiß, was zu tun ist. Denn im Moment haben wir ein Bild-Tag, aber wir haben kein Bild zu verwenden. Gehen wir weiter und öffnen Sie das und suchen wir nach einem Bild. Eines der Dinge, die ich mag, sind Spiele. Gehen wir und suchen Videospiele, gehen zu Bildern, und wir können uns einfach eins schnappen. Ich gehe voran und schnappe mir etwas, das sieht cool aus. Nun, Copyright-Hinweis wirklich schnell, Sie können nicht einfach online Grabbing Bilder und werfen Sie sie auf eine Website, die Sie tun, das wäre Urheberrechtsverletzung, sehr große Sache, tun Sie das nicht. Wenn Sie nach Bildern für Ihre Website suchen, gibt es viele tolle Orte, um sie zu bekommen. Ich werde einige Ressourcenquellen am Ende dieses Kurses einschließen, überprüfen Sie es dort. Aber geh nicht einfach und stehle Bilder. Für das, was wir jetzt tun, ist es in Ordnung, weil ich das nicht online stellen werde, kein Geld daraus machen werde und nichts dergleichen, es ist alles okay. Wenn Sie ein Bild finden, das Ihnen gefällt, können Sie es entweder herunterladen, Sie können es direkt herunterladen oder Sie können Bildort kopieren und dann von dort aus können wir es auf unserer Website verwenden. Kommen wir zurück und wir werden in die Klammern hier eingeben, SRC, der für Quelle steht, dann werden wir gleich eingeben und dann innerhalb von Anführungszeichen, wir werden das ganze Ding einfügen , die wir gerade kopiert haben. Einige von ihnen werden wirklich lang sein, einige von ihnen wären kurz, hängt nur von der URL ab. Wenn wir ein lokales Bild hätten, das ich Ihnen später für ein Video zeigen werde, dann würden Sie einfach hier darauf verlinken. Aber im Moment ist das alles, was wir brauchen, damit ein Bild auf unserer Website erscheint. Ich werde das speichern, kommen Sie zurück, aktualisieren Sie unsere Seite und Sie können sehen, dass das jetzt da ist. Wir haben Überschriften, wir haben ein Bild und wir fangen an, irgendwo zu kommen, was fantastisch ist. Lassen Sie uns nun einige der anderen Tags abdecken, die Sie wahrscheinlich ständig verwenden werden. Einer davon wird ein Absatz-Tag sein, und das wird nur p. Ein Absatz-Tag ist, wo Sie den Großteil Ihres Textes setzen. Wenn Sie einen Artikel hätten, wäre Ihr Text im Inneren von hier, wenn Sie eine Beschriftung für ein Bild hätten, dann, wenn es lang wäre, würden Sie es wahrscheinlich in ein eigenes Absatz-Tag setzen wollen, so etwas. Hier drinnen hast du nur Text geschrieben. Dies ist ein Text, den ich tippe, ich werde ihn speichern, zurückkommen, aktualisieren. Sie können hier unten sehen, dass es nicht fett ist, es ist nicht kursiv, es gibt nichts Besonderes daran. Es ist nur Standard-Grundschriftart und das ist, was Absatz ist, also das ist großartig. Schauen wir uns das Anker-Tag an, etwas, das Anfang ist wirklich eine intuitive, aber unerlässlich für die Erstellung von Websites. Der Anker-Tag, man kann es sich vorstellen, wie es an einem anderen Ort im Internet verankert ist und es dort festhält und man kann ihm sagen, wohin es verlinkt. Wenn Sie das mit einem Attribut namens href tun und dies steht für Hypertext-Referenz. Dies wird auf eine andere Website zeigen. Wir werden Angebote öffnen und Sie können hier jede Website auswählen, die Sie wollen. Ich werde Google wählen und die Sache, die Sie sich merken müssen, ist, dass Sie auch das Präfix für die gesamte Website einfügen möchten, was bedeutet, dass Sie das HTTP oder HTTPS haben möchten. Nicht jede Website braucht es, aber einige tun dies, um sicher zu sein, immer schließen Sie es ein. Wir sagen HTTPS://und dann www.google.com und schließen das Anker-Tag. Sie werden hier sehen, dass es wie gewohnt ein schließendes Tag hat und dann müssen wir tatsächlich in den Link setzen, auf den sie klicken können. Als gute Praxis möchten Sie Ihren Benutzern mitteilen, wohin Sie sie leiten. Ich würde Google eingeben, diese speichern und meine Seite aktualisieren. Sie können sehen, dass es einige Standard-Styling für Links gibt. Es ändert Ihr Symbol in eine Hand und es erscheint als unterstrichen und violett. Wenn ich darauf klicke, gehe ich zu Google. Ich gehe zurück und das ist eine gute Übung, es sagt Ihrem Benutzer genau, wohin Sie gehen. Nun, Sie könnten genauso einfach etwas eingeben, das Facebook genannt wird und wenn wir neu laden, jetzt sieht es so aus, als wäre dies ein Link zu Facebook, aber es ist nicht. Brechen Sie also nicht das Vertrauen Ihrer Benutzer, indem Sie schlechte Links verwenden, um sie woanders zu führen. Das ist wirklich schlechte Praxis und jeder wird sehr aufgeregt, und die Leute werden nicht auf Ihrer Website bleiben, Sie daran, das ist grundlegende HTML-Syntax. Es gibt ein wenig mehr, das wir im nächsten Video mit erweitertem HTML abdecken werden, da es einige Tags gibt, die mehr Attribute erfordern. Es gibt einige Tags, die ein wenig seltsam sind, die wir abdecken werden, und wir werden das als nächstes tun. Aber das ist die Grundlagen, wenn Sie dies haben, können Sie herumspielen und eine grundlegende Website machen. Sie haben Überschriften, Bilder, Absätze und Links, Dinge, die Sie brauchen, um auf jeder Website, die Sie erstellen möchten, los zu gehen. Was wir als nächstes behandeln werden, ist eine erweiterte HTML-Syntax, bei der Tags und Attribute ein wenig verwirrender sind und definitiv etwas erklären müssen, wenn Sie gerade anfangen. 6. 2.3 - Ein wenig fortgeschrittener HTML: Das erste neue Tag, an das ich Sie vorstellen möchte, ist das Listent-Tag, aber das Listent-Tag kann nicht von selbst gehen und es wird nicht als Liste bezeichnet. Stattdessen gibt es zwei Listen, die Sie haben können. Es gibt eine geordnete Liste, die für OL steht, sind Dinge, wo sie in Ordnung sein müssen, und der entsprechende Stil wird zeigen, dass sie geordnet sind, lasst uns einen Blick darauf werfen, was das bedeutet. Zuerst schließen wir das Tag und drücken „Enter“, jetzt macht meine automatische Einrückung, was wirklich fabelhaft ist, wenn nicht, würde ich empfehlen, ungefähr 3-5 Leerzeichen pro Zeile einzurücken, so dass Sie wissen, dass dies eine neue Zeile ist, die innerhalb dieses Tags. Innerhalb dieses Tags müssen wir Listenelemente setzen, Dinge, die in Ordnung gehen müssen. Eine geordnete Liste, wie ich sagte, um das zu tun, müssen wir in LI setzen, das steht für Listenelement, und es muss innerhalb eines OL, UL oder eines Menüelements sein, jetzt werden wir nur OL abdecken und UL. UL steht für ungeordnete Listen, die wir als nächstes erstellen werden, Listenelement, wir schließen es und jetzt müssen wir etwas Text darin setzen. Was wollen wir in eine geordnete Liste setzen? Nun, du kannst tun, was du willst, ich komme hierher und ich werde einen Titel hinzufügen, der die besten Spiele aller Zeiten sagt, jetzt hat meine Liste einen Titel und es ist eine geordnete Liste, weil ich sie in ein Ranking setze, ich sage Zelda, Ich drücke „Enter“ und öffne ein weiteres LI, und dann werde ich Mario sagen, ich werde noch ein LI hinzufügen und dann Final Fantasy speichern. Wir werden auf unsere Website zurückkommen, drücken Sie „F5", um es neu zu laden, scrollen Sie nach unten, jetzt können Sie sehen, dass ich meine Überschrift habe, wir wissen, wie man diese benutzt, und wir haben unsere Liste, die tatsächlich Zahlen neben es. Dies ist das Standardstyling für geordnete Listen, und deshalb ist es wirklich wichtig, sicherzustellen, dass Sie OL und UL richtig verwenden. UL wird nur ein Punkt daneben sein, was wir jetzt machen werden. Lassen Sie uns eine weitere Überschrift machen und nennen wir diese Lebensmittel, die ich mag. Es muss nicht in irgendeiner Reihenfolge sein, es ist nur eine Liste. Wir werden UL sagen und dann öffnen Sie es und wir müssen in Listenelemente setzen, Ich mag Wassermelone, Listenelement, Ich mag Pizza und ein anderes Listenelement, Ich mag Soda. Speichern wir das, öffnen Sie es. Sie können hier sehen, dass es jetzt egal ist, in welcher Reihenfolge sie sind, ich werde das in die Luft sprengen, damit wir es sehen können. Wir haben zuerst eine geordnete Liste und dann haben wir eine ungeordnete Liste. Sie werden diese verwenden möchten, wie Sie es für richtig halten, und natürlich können Sie, wenn wir zu CSS kommen , all dies mit nur ein paar Zeilen Code ändern. Jetzt fangen wir an, in fortgeschrittenere Tags zu gelangen, Sie können sehen, dass einige Tags, die Sie so verschachtelt werden müssen. Ein Listenelement allein außerhalb eines Tags wird nicht viel tun. Wenn wir LI reinlegen und sagen: „Hallo“. Nun, es wird da sein, aber es wird als Standard-ungeordnetes Listenelement erscheinen, und es sieht nur sehr seltsam aus, und ich würde empfehlen, dass Sie das nie tun. Einige Tags müssen verschachtelt werden, so funktionieren sie genau, und entlang dieser Liniewerfen wir einen Blick auf ein ziemlich wichtiges Tag, werfen wir einen Blick auf ein ziemlich wichtiges Tag das einige seltsame Attribute hat, die nicht intuitiv sind, ich werde Ihnen zeigen wie sie funktionieren, sind aber wirklich wichtig für so ziemlich jede Website, wenn Sie möchten, dass Menschen in der Lage sein, mit Ihnen zu interagieren, und das ist das Formular-Tag. Dieser hat tatsächlich einen Namen, der Sinn macht, es ist eine Form, wir öffnen das, kommen auf eine neue Linie. Jetzt im Inneren von hier können wir einfach Text eingeben und es wird so angezeigt; Vorname, speichern Sie das, wir kommen zurück. Nun, im Moment taucht der Vorname unten auf. Nun, es sieht nicht so aus, als gäbe es hier etwas Besonderes, aber innerhalb dieses Abschnitts geht etwas vor. HTML, die Website weiß, dass es sich um ein Formular handelt, später, nicht in diesem Kurs, aber wenn Sie Eingaben des Benutzers akzeptieren möchten, entweder PHP, C-Sharp, JavaScript, etwas anderes später, um diese Art von Funktionalität zu aktivieren, Ihre Website wird wissen, dass dies der Ort ist, an dem sie es akzeptieren werden. Die Art und Weise, wie Sie dies visuell tun können, besteht darin, ein anderes Tag namens input zu verwenden. Die Eingabe ist, wie Sie die Eingabe vom Benutzer erhalten, dies wird eine Box erstellen, in die sie eingeben können. Jetzt gibt es einige Attribute, die für die Eingabe sehr wichtig sind, wir werden sagen, einer von ihnen ist der Typ. Die Art, die wir wollen, wird Text sein, ich werde darauf klicken und es tippt in Text für mich, was großartig ist. Nun, wir müssen ihm auch einen Namen geben, diese Formularbox, in die sie eingeben können, wir geben einen Namen und wir werden es Vorname nennen. Ich werde ein anderes Tag einfügen, das ein Break-Tag genannt wird, das BR ist, dass man kein schließendes Tag hat, weil alles, was es tut, ist Fügt eine Pause ein, im Grunde eine neue Zeile, im Grunde etwas Raum zwischen Ihren Elementen hier so dass zwischen einem Element und einem anderen Platz vorhanden ist. Wenn wir hier reinkommen, öffnen wir das, jetzt können wir sehen, dass es einen Ort gibt, an dem wir tippen können, ich kann meinen Namen eingeben. Wenn Sie etwas eingeben, das Sie in vier eingegeben haben, das automatische Ausfüllen von Ihrem Browser möglicherweise angezeigt und ist sehr nützlich, und das ist ein Formularfeld. Lassen Sie uns voran und fügen Sie einige weitere hinzu und machen Sie tatsächlich wie ein schön aussehendes Formular, sagen wir, dies war ein Formular, das auf Ihrer Website Leute ausfüllen konnten, um eine E-Mail-Liste beizutreten. Eines der Dinge, die Sie wollen, wäre eine E-Mail, wir werden in E-Mail und dann müssen wir Eingabe eingeben, ein anderes Tag machen. Dieses Mal wird es ein E-Mail-Tag sein und der Name wird E-Mail sein, eine weitere Pause dort setzen, sonst werden alle diese Elemente wirklich nah beieinander sein und wir wollen das nicht. Eine weitere, die wir im Inneren von hier haben können, ist ein Optionsfeld. Ein Optionsfeld sind die kleinen Kreise, auf die Sie klicken können, um verschiedene Optionen zu haben. Lassen Sie mich Ihnen zeigen, was es ist, damit Sie es verstehen können. Lassen Sie uns neue Eingabe-Tag machen, dieses Mal werden wir es eine Art von Radio geben. Hier wird der Name sein, sagen wir, anstelle einer E-Mail-Liste, sie wurden ein Hemd oder eine Art von tragbaren Artikel bestellen, die eine Größe hat, werden wir sagen, Name gleich Größe. Wir müssen ihm einen Wert geben, da dieser Wert direkt neben der Schaltfläche angezeigt wird. Der Wert hier wird klein sein. Eine Eigenschaft, die wir einstellen können, die keinen eigenen Text erfordert , heißt Checked, wir können sagen, dass diese Schaltfläche wird gestartet werden überprüft, wir werden klein wie ein Text direkt daneben setzen. Am Ende unseres Eingabe-Tags, fügen Sie klein, nicht innerhalb davon, dann können wir zurückkommen und wir können sehen und sehen, dass die Eingabe-Taste, die Optionsschaltfläche, ist genau da und es sagt klein direkt daneben. Wir können noch ein paar hinzufügen, wenn ich das kopiere, könnte ich es einfügen. Jetzt können wir den Wert ändern, um mittel zu sagen, dieses aktivierte Symbol loswerden und den Text auf Medium ändern, speichern, neu laden und jetzt haben wir zwei Optionen. Optionsfelder sind Dinge, die nur angeklickt werden können, nur einer von ihnen kann ausgewählt werden, was sehr nützlich sein kann, wenn sie nur eine auswählen können, Sie haben auch Dinge wie Checkboxen und Dropdown-Menüs, die wir nicht alle von ihnen abdecken, weil es einfach zu viel gibt, aber am Ende dieses Kurses werde ich Sie auf einige wirklich großartige Ressourcen verweisen, die wie ein Index oder eine Galerie handeln , die Sie einfach suchen können wenn Sie jemals wollten , um anstelle eines Optionsfelds ein Kontrollkästchen auszuführen. Es wird Dokumentation, Beispiele, Code, alles haben, weil ich nicht versuchen möchte, jedes Tag abzudecken, das Sie jemals tun könnten. Es würde zu lange dauern und meiner Meinung nach nutzlos sein, denn obwohl ich Websites seit Jahren entwerfe, benutze ich immer noch diese Ressourcen, um nachzuschlagen, wie man Dinge macht, ich habe nicht alles auswendig gelernt und ich erwarte nicht, dass Sie etwas auswendig zu lernen. Nun, nicht alles, aber nicht alles. Es gibt einige Dinge, die Sie auf jeden Fall im Auge behalten wollen , weil wir sie so oft verwenden, aber andere Dinge, die Sie vielleicht nicht die ganze Zeit brauchen, und das ist völlig in Ordnung. sind einige der kniffligen Tags, wie ich schon sagte, es gibt viel mehr, aber für das, was ich abdecken möchte, ist das genug. Dies ist ein grundlegendes HTML, mit dem Sie Ihre Website mit Informationen, Bildern und solchen Dingen abdecken können, all dieses Zeug ist wirklich nützlich. Es ist auf Websites, im ganzen Internet, wahrscheinlich auf jeder einzelnen Website außer vielleicht den Listen, weil diese ein wenig mehr Nischenartikel sind, aber sie sind überall vorbei. Das ist das Zeug, das du brauchst, um loszulegen, und das ist alles, was ich abdecken wollte. Das letzte, was für HTML ist, wird jedoch die notwendige Struktur sein, die ich erwähnt habe, als wir den HTML-Abschnitt gestartet haben. Jetzt möchte ich im nächsten Video abdecken weil Sie es brauchen, wenn Sie tatsächlich gehen, um Ihre Website online zu stellen, wenn Sie es nicht haben, werden Sie in einer Menge Ärger. Ja, ich denke, das ist ein guter Grund, um sicherzustellen, dass du es da reinlegst. Im nächsten Video werden wir die notwendige Struktur, die Sie in Ihrem HTML-Dokument haben müssen, abdecken . 7. 2.4 Notwendiges Struktur: Jetzt müssen wir die notwendige Struktur für Ihre Website angehen damit Ihr Webbrowser oder ein Browser sie als Website richtig interpretieren kann. Die Informationen, die wir angehen werden, werden wirklich nicht das Aussehen oder das Gefühl Ihrer Website ändern. Wir werden einen Titel für Ihre Seite hinzufügen, der wird, und das ist wirklich wichtig, aber viele dieser Informationen sind nicht für das Design. Stattdessen ist es für den Browser, es ist für die Suchmaschine, es ist für die Meta-Informationen, die Dinge über Ihre Seite wissen müssen, aber die Seite selbst wird sich nicht ändern. Davon abgesehen, es ist immer noch wirklich wichtig. Wenn Sie dies nicht haben, wird Ihre Website nicht ordnungsgemäß funktionieren. Es funktioniert möglicherweise überhaupt nicht, weil Ihr Browser nicht wissen wird, um welche Art von Datei es sich handelt. Oben drücken wir die Eingabetaste ein paar Mal und geben uns etwas Raum zum Arbeiten. Das allererste, was Sie dort einfügen müssen, ist die Art von Dokument, das es ist, und natürlich geschieht dies innerhalb von Tags. Öffnen Sie eine neue und eine linke Klammer tun Ausrufezeichen, DOCTYPE alle Großbuchstaben. Dann müssen wir sagen, dass es ein Dokumenttyp von HTML sein wird und dann das Tag schließen. Das muss das erste sein, was auf jeder Seite ist, die Sie haben. Das ist essentiell. Wenn Sie das nicht haben, wird Ihr Webbrowser nicht wissen, dass es sich um eine Website handelt und er wird nicht wissen, was zu tun ist. Nun, das weiß es vielleicht nicht. Einige könnten es herausfinden, aber wenn Sie es nicht haben,werden aber wenn Sie es nicht haben, Sie auf Probleme stoßen, also stellen Sie sicher, dass es da ist. Das nächste, was wird die Wurzel Ihrer Website sein. Das ist eigentlich das HTML-Tag selbst. HTML, schließen Sie das aus. Nun, das muss ganz unten gehen, denn alles innerhalb unserer Website muss in HTML eingeschlossen werden. Ich schneide das aus, scrollen Sie nach unten und fügen Sie es hier ein. Nun, alles, was wir getan haben, ist zwischen diesen HTML-Tags, was wichtig ist, weil der gesamte Code jetzt in diesen Tags HTML ist. Die nächste Sache ist der Kopf. Also werden wir das öffnen und Kopf tippen. Dies hat kein geöffnetes und schließendes Tag. Wir drücken die Eingabetaste, weil wir hier ein bisschen Informationen einbringen werden. Das erste, was wir als Titel setzen wollen, so dass der Titel, den wir verwenden wollen, wird der Titel unserer Webseite sein. Wir geben Titel ein und setzen dann, was Sie wollen, in hier. Ich werde meine erste Website speichern. Speichern Sie das, kommen Sie auf unsere Webseite. Dann können Sie sehen, dass der Tab jetzt den Titel hat, den wir wollen. So ändern Sie den Titel, und Sie können für jede Seite, die Ihre Website hat, einen anderen Titel haben, obwohl Sie ihn wahrscheinlich konsistent halten möchten. Wenn Sie eine Website namens Facebook haben, dann möchten Sie vielleicht Facebook als Haupttitel für alles behalten. Aber wenn sie wie auf Messenger sind, könntest du wie einen Schrägstrich oder einen Bindestrich tun und Messenger sagen, also wäre es Facebook Dash Messenger, während du in Messenger bist. Sie bekommen die Idee, aber halten Sie den Titel konsistent und leicht zu lesen, denn das ist wirklich wichtig für die Benutzerfreundlichkeit. Es gibt weitere Informationen, die wir hier eintragen können. Es gibt Meta-Tags, wir können tatsächlich eingeben Meta. Dies ist Zeug wie Schlüsselwörter und Browser-Informationen. Wir werden es jetzt nicht abdecken, weil es nicht wichtig ist , und ich will es nackt halten. Aber das ist etwas, was ich Sie ermutige, nach oben zu suchen, und stellen Sie sicher, dass Sie verstehen, wenn Sie Ihre Website veröffentlichen. Dinge wie Suchmaschinenoptimierung, sie werden Keywords und Schlüsselphrasen verwenden, und Sie setzen diese Informationen innerhalb des Meta-Tags, innerhalb des head-Tags. Ehrfürchtig. Das Letzte ist eigentlich die Leiche. Wir werden dieses Tag öffnen, Körper austippen, schließen. Dann müssen wir das schließende Tag nehmen, schneiden Sie es, und legen Sie es ganz unten unten vor HTML, und dann ist unsere Website für alle intensiven Zwecke, vollständig. Jetzt haben wir alle notwendigen Strukturen, um unsere Website für Webbrowser lesbar und geräteübergreifend darstellbar zu machen . Nun, wenn wir das öffnen, aktualisieren Sie es. Nichts wird sich geändert haben. Nichts wird anders aussehen. Aber jetzt wird Ihr Browser in der Lage sein, es richtig zu lesen und Sie werden keine Probleme haben, es überall zu zeigen. Das ist sehr wichtig. Das ist HTML auf den Punkt gebracht. Sie wissen jetzt, wie man es benutzt, was damit zu tun ist. Das nächste, was wir behandeln werden, ist, wie man es entwirft, was unser CSS sein wird. Sie werden ein Meister, um Ihre Website so aussehen zu lassen, wie Sie es wollen, genau so, wie Sie es wollen. Es wird Ihrem jeden Gewinn entsprechen. Wir werden das als Nächstes abdecken. 8. 3.1 CSS?: Jetzt ist es an der Zeit, in CSS zu kommen. CSS steht für Cascading Style Sheets. Cascading ist eine Möglichkeit, zu beschreiben, wie sie funktionieren und wie sie aussehen. Denn wie die grundlegende Syntax abgespielt wird, ist, dass Sie ihreinen Typ, ein Tag oder eine ID oder eine Klasse oder etwas zum Ziel geben einen Typ, ein Tag oder eine ID und dann sagen Sie ihm, dass sie viele Attribute darüber ändern soll. Wir werden diese später eingehend eingehen. Aber ich möchte mir nur einen Moment Zeit nehmen, um darüber zu sprechen, was CSS ist und wie es sich von HTML unterscheidet. Der Unterschied fällt wahrscheinlich sofort auf. Es gibt wirklich keine Tags im Inneren von hier. Sie zielen auf Tags ab, aber hier werden keine eckigen Klammern angezeigt. Sie geben ihm kein P-Tag und füllen es mit Text aus. CSS dient nur zum Styling. Jetzt kann CSS einen sehr langen Weg in diesem Styling gehen. Es gibt tatsächlich ein Grid-System, das Sie implementieren können, das weit über den Rahmen dieser Klasse hinausgeht, dafür, wie Ihre Inhalte sowohl auf großen Geräten als auch auf mobilen Geräten ausgelegt werden sollten. Es gibt Animationen, die Sie tun können, die am Ende dieses Abschnitts, werde ich Ihnen einige wirklich coole CSS-Animationen zeigen, die da draußen in der Wildnis sind, nur um Ihre Phantasie zu wecken. CSS kann viel tun, aber seine primäre Funktion besteht darin, den HTML, den Sie codiert haben , anzulegen und ihn auf eine bestimmte Weise zu entwerfen. Sie können Dinge wie Farben, Rotation, Hintergründe, Animation ändern . Wirklich alles, was Sie sich vorstellen können, kann CSS es anvisieren, ändern und es genau so machen, wie Sie es wollen. Nun, es ist nicht einfach, wenn ich sage, dass Sie es so machen können, wie Sie wollen, es ist wahr, aber es kann manchmal schwierig sein, weil es Standardeinstellungen gibt, die HTML-Tags haben. Wie einige Tags eine ganze Zeile aufnehmen sollen, sind einige nicht. Wenn Sie diese Eigenschaft ändern, können seltsame Dinge passieren und es erfordert viel Basteln herum, aber Sie können es tun. Ich garantiere, dass Sie Ihre Website genau so aussehen, wie Sie wollen. Es braucht nur etwas Übung und etwas Geduld. Aber das ist der Unterschied zwischen CSS und HTML. Zum einen haben sie unterschiedliche Namen. Für zwei ist einer von ihnen eine Tag-basierte Sprache und eine davon ist eher eine kaskadierende Designsprache. Also gehen sie im Tandem. Sie verwenden sie zusammen, weil CSS ohne HTML, na ja, es gibt nicht viel, was Sie tun können, ein wenig, aber Sie können nicht wirklich viel tun. HTML ohne CSS. Ja, sicher, es ist da. Es ist informativ, schätze ich, aber niemand will es lange ansehen. Sie müssen zusammen gehen, und wenn sie es tun, sind sie perfekt. Was wir zuerst im nächsten Video tun werden, ist mit Tags zu beginnen, wie Sie hier sehen können, und ich werde Ihnen zeigen, wie wir einige Attribute bestimmter Tags ändern können , damit sie aussehen und tun, was wir wollen. 9. 3.2 HTML-Tags: Wie gesagt, CSS ohne HTML ist nicht so nützlich. Das bedeutet, dass wir HTML brauchen und anstatt eine andere Website zu programmieren, werde ich nur nehmen, was wir letztes Mal gemacht haben. Wenn Sie weitermachen und etwas mehr HTML schreiben wollen, ermutige ich Sie, das so viel wie möglich zu üben und dann wieder zu kommen, wenn Sie damit fertig sind. Davon abgesehen, werde ich nicht, ich werde nur genau das nehmen, was wir getan haben. Ich werde das kopieren und es hier einfügen. Dann werde ich in Mine diesen Ordner öffnen, weil das funktioniert. Es gibt meinen HTML-Code. Jetzt hat eine CSS-Datei die Erweiterung of.css. Wenn Sie ein TextPad haben, erstellen Sie dort eine Datei. Wenn Sie eine Software verwenden, machen Sie es wie Sie tun. Hier werde ich auf Neue Datei klicken. Der traditionelle Name ist site.css. Jetzt können CSS-Namen stark variieren. Sie können es Stil, Stile genannt werden, Sie können eine CSS-Seite für jede Seite Ihrer Website haben, die, wenn es groß ist, würde ich nicht empfehlen, kleiner wäre in Ordnung. Aber traditionell heißt es site.css. Das erste, was wir tun müssen, ist tatsächlich unser CSS mit unserem HTML zu verknüpfen. Wo wir das tun, ist im Kopf. Jetzt wird das ein Link sein. Jetzt haben wir uns das sehr kurz angesehen. Wir haben nicht wirklich darüber gesprochen, aber jetzt werden wir dieses Tag verwenden. Wir werden auf unsere CSS-Seite verlinken. Glücklicherweise ist unsere CSS-Seite genau richtig hier, so dass das Verlinken darauf ziemlich einfach sein wird. Wenn Sie es in einem Ordner oder ein paar Ordner haben, müssen Sie einen Punkt, Punkte und einen Schrägstrich verwenden . Wie das aussieht, ist so etwas und innerhalb dessen, was ich Ihnen in nur einer Sekunde zeigen werde, das bedeutet einen Ordner nach oben. Wenn Sie einen Ordner nach oben gehen müssen, machen Sie es so. Andernfalls sollten Sie in der Lage sein, es genau so zu tun. Es gibt ein paar Attribute für Link. Der erste ist rel. Das steht für die Beziehung. Die Beziehung für diesen Link wird Stylesheet sein, da es viele Dinge gibt, mit denen Sie verlinken können. Der Typ wird speziell text/css sein, denn das ist die Datei, die wir hier verwenden werden. Dann verwenden wir href. Wieder haben wir das im Anker-Tag gesehen und wir geben ihm den Namen unserer CSS-Datei, also unsere heißt site.css, dann schließen wir das ab und speichern es. Dann sind wir gut zu gehen. Ich gehe weiter und öffne das und stelle sicher, dass wir die gleiche Website haben, alles sieht gleich aus. Ehrfürchtig. Nun, was wir tun werden, ist in unserer CSS-Seite, wir werden zuerst auf die eingebauten Tags, die wir haben, zielen. Denn diese sind am einfachsten zu verstehen und zu präsentieren. Wenn wir uns die Struktur ansehen, ist eines der Tags, die wir haben, tatsächlich das body-Tag. Dieses Body-Tag kapselt alles. Wenn Sie den Hintergrund Ihrer Website ändern möchten, ist die Art und Weise, wie Sie dies tun, indem Sie den Körper ausrichten. Alles, was wir tun müssen, ist den Namen dieses Tag-Body einzugeben und dann müssen wir tun, was ich geschweifte Klammern nenne. Dies wird Verschiebung sein, und das wird auf der rechten Seite des Buchstabens P sein, wird eine offene geschweifte Klammer sein und manchmal wird es abgeschlossen. Wenn es nicht abgeschlossen ist, dann tun Sie Shift und der nächste vorbei und es wird eine offene und geschlossene geschweifte Klammern machen. Diese sehen Sie die ganze Zeit in der Programmierung. Für CSS ist der gesamte Stil, den wir für den Körper ändern werden, jetzt zwischen diesen beiden geschweiften Klammern. Um CSS zu verwenden, öffnen wir es so und dann sieht die Syntax aus. Sie setzen den Stil ein, das Attribut, das Sie stylen möchten. In diesem Fall werden wir die Farbe ändern. Wir werden sagen, Hintergrundfarbe, dann verwenden wir, um einen Doppelpunkt zu tun , der auf der rechten Seite des L, Doppelpunkt und dann geben Sie ihm eine Farbe. Ich werde sagen, nur lesen. Jetzt können Sie auch hier sehen, dass es den x-Wert dieser Farbe und VS-Code und viele andere Editoren hat . Sie können auch aus RGB-Farben wählen. Wenn ich das hier halte, kann ich es ändern. Jetzt kann ich auch gehen, aber du kannst es. Am Ende eines Attributs einer Eigenschaft setzen Sie ein Semikolon. Dasselbe, nur keine Schicht. So stylen Sie es. Das ist das Standard-Styling. Ich werde das speichern und wir öffnen unsere Website. Mein CSS wurde automatisch angewendet und ein sehr helles Rot wurde auf diese ganze Seite angewendet. Nun sind die geformten Elemente nicht rot, da sie bereits einen bestimmten Stil haben. Aber alles andere ist jetzt rot. Nun, das Rot ist sehr hell. Im VS-Code kann ich den Mauszeiger über die Farbe bewegen und dann kann ich sie ändern. Ich werde es zu einem viel dunkleren Rot bringen, speichern Sie es. Da gehen wir. Das ist ein bisschen einfacher für die Augen, denke ich. So zielen Sie auf ein Tag. Nun haben wir uns eine Menge von Tags im Inneren von hier angesehen. Jedes dieser Tags steht für Grabs bereit. Aber die Sache zu erinnern ist, dass alle von ihnen geändert werden, also h_3, wir haben ein paar dieser Tags innerhalb von hier. Gehen wir hinein und ändern eines dieser h_3-Tags; h_3, öffnen und schließen Sie die geschweiften Klammern. Wir möchten die Hintergrundfarbe nicht ändern, da sie eine Hintergrundfarbe hat, sondern stattdessen die Farbe der Schriftart ändern. Um das zu tun, ist es keine Schriftfarbe, es ist eigentlich nur Farbe, also Farbe und lasst uns dies in Weiß ändern. Ich werde es retten. Jetzt ist jede Überschrift weiß, jede Rubrik drei. Das ist wirklich wichtig, sich daran zu erinnern. Denn wenn Sie ein Tag ändern dieses Tag auf einer Ihrer Websites verwenden, die diese CSS-Seite verwendet, werden alle von ihnen geändert. Manchmal ist das gut. Möglicherweise möchten Sie, dass alle Überschriften Weiß als primäre Farbe haben. Wenn das der Fall ist, können Sie etwas mit Kommas tun. Hier drinnen könnten wir ein Komma hinzufügen und dann können wir diesen Stil auf etwas anderes anwenden. Wenn ich h_1, h_2, h_4, h_5 und h_6 sagte , speichern Sie das. Sie können jetzt sehen, dass alle meine Überschriften weiß haben, was großartig ist. Aber wenn wir aus irgendeinem Grund nicht wollten, dass eine dieser Überschriften weiß, gibt es keine Möglichkeit, dies zu ändern, weil wir dies auf jede einzelne Überschrift auf jeder einzelnen Seite unserer gesamten Website angewendet haben . Das ist wirklich wichtig, sich daran zu erinnern. Moment werden wir das auch behalten. Ich zeige dir, wie du das in den nächsten Videos ändern kannst, wenn wir spezifischere Tags und Elemente ansprechen. Wir haben Tags hier. Wir haben die Hintergrundfarbe und die Farbe geändert, Dinge, die Sie wahrscheinlich ständig tun werden, um in Übereinstimmung mit dem Farbthema, das Sie für Ihre Website wählen passen . Aber CSS kann viel mehr ändern als nur, denke ich, den Stil eines Elements. Es kann die Art und Weise ändern, wie sich ein Element tatsächlich auf der Seite verhält. Wenn wir gehen und wir uns das ansehen, können Sie sehen, dass jede dieser Überschriften, und sogar wie dieser Absatz, es gibt Tonnen Platz hier drüben auf der rechten Seite. Es gibt keinen Grund, dass sie nicht hier drüben sein können, außer dass das eingebaute Styling den Absatz sagt, den Link, all das Zeug, das sich auf ihrer eigenen Linie befinden. Sie nehmen einen ganzen Abschnitt ein. Wir können das tatsächlich sehen, wenn wir reinkommen und etwas über unsere Überschriften ändern. Wir können ändern, was text-align genannt wird und einen Doppelpunkt machen und dann sagen wir zentrieren, setzen ein Semikolon am Ende. Diese Interpunktion ist sehr wichtig. Wenn wir reinkommen, können Sie jetzt sehen, dass sie entlang der gesamten Seite zentriert sind. Das liegt daran, dass sie im Wesentlichen von links nach rechts gehen und diesen ganzen Abschnitt aufnehmen. Dies sieht eher wie ein Überschriftenwerkzeug aus. Ich denke, das macht viel sinnvoller, sie zentriert zu haben. Das ist cool. Aber was, wenn wir nicht wollten, dass sie die ganze Seite aufnehmen und wir wollten, dass sie mehr in der Reihe sind. Nun, das kommt mit etwas namens Display ins Spiel. Das erste, was wir tun werden, ist Anzeige und dann Doppelpunkt. Jetzt gibt es viele Optionen. Diese Optionen sind verwirrend, wenn Sie anfangen. Wenn Sie nur stylen und die tatsächliche Funktionalität von Tags nicht ändern möchten, würde ich mich nicht mit dem Display anlegen, aber irgendwann müssen Sie es tun, also behalten Sie dies im Hinterkopf. Die Anzeige zeigt, wie Elemente auf der Seite ausgerichtet werden. Es gibt Elemente, die Blockelemente sind. Blockelemente sind, naja, sie sind Block. Sie nehmen einen ganzen Abschnitt ein, normalerweise eine ganze Zeile der Seite. So funktionieren sie nur. Es gibt Elemente, die Inline-Block sind. Diese Elemente nehmen einen Block ein, aber sie nehmen nicht die gesamte Seite ein. Jetzt können Sie sehen, dass alle unsere Überschriften, na ja, sie nehmen eine gewisse Menge an Platz und dann nehmen sie nicht mehr ein als das, was sie brauchen. Das macht Sinn. Das hast du. Das bedeutet, dass auch unser Bild da drüben sein kann, was cool ist. Nun, es gibt auch einige andere Optionen. Einige von ihnen mögen Inline-Flex. Ich würde mir vorerst keine Sorgen machen. Flexbox-Tabellen, so was. Das hat mit dem CSS-Raster zu tun, das wirklich mächtig ist. Aber noch einmal möchte ich jetzt nicht darüber sprechen, denn das ist ein ganzes Framework, das CSS in den letzten Jahren aufgebaut hat, die, sobald Sie fortgeschrittener geworden sind, definitiv nachschauen, aber vorerst wir können blockieren, wir können Inline-Block machen, wir könnten auch keinen tun, also verschwindet es im Grunde vollständig. Jetzt ist es weg. Sie können auch erben, was verwirrend ist, wenn es der einzige ist, von dem Sie erben, Sie können sich vorstellen, dass es hier eine Hierarchie gibt und dort kommt der kaskadierende Teil ins Spiel. Denn wenn ich sagen würde, dass Überschrift 2 von Überschrift 1 erbt, dann würde alles, was ich mit Überschrift 1 mache, von Überschrift 2 erben. Aber dieses Erbe ist wieder etwas über das hinaus, was ich jetzt abdecken möchte, aber ich wollte es dir zeigen, weil ich das für wirklich wichtig halte. Das zuletzt angezeigte Tag, das ich Ihnen zeigen möchte, wird nur inline genannt. Hier wird Inline genau das gleiche tun, was wir vorher getan haben, aber jetzt wird es nicht einmal ein Blockelement sein. Betrachtet man es, kann es nicht gleich aussehen, aber es hat unterschiedliche Anzeigeeigenschaften. Diese Anzeigeeigenschaften sind, wie Sie tatsächlich Elemente hier ausrichten werden Wenn wir also unsere Seite wie in zwei Zeilen aufteilen wollten, dann müssten wir unsere Überschriften von Blockebene zu entweder inline oder inline Block ändern , sonst könnten wir nichts nebeneinander haben. Das Display ist wirklich leistungsstark und kann ziemlich schnell verwirrend werden, also bedenken Sie das und spielen Sie damit herum. Aber seien Sie nicht frustriert, weil es schwierig sein kann, genau so auszuführen, wie Sie es wollen. Aber es gibt auch Töne und Töne anderer Eigenschaften. Ich werde versuchen, ein paar hier abzudecken, schnelles Feuer, aber ich weiß nur, dass es so viele CSS-Eigenschaften und Möglichkeiten gibt , es zu verwenden, dass ich sie nicht alle abdecken kann. Aber wieder, ich werde Ihnen am Ende dieses Kurses einige Ressourcen zeigen, die wirklich fantastisch sind, vor allem für CSS, weil es wirklich großartige Websites gibt, die sich der Verwendung von CSS widmen und es ist wirklich fantastisch und sehr hilfreich. Ich ermutige Sie, die zu überprüfen. Lasst uns schnelles Feuer machen. Lassen Sie uns über Polsterung sprechen. Machen wir h1 und lassen Sie uns eine Hintergrundfarbe darauf und wir werden dies in Blau ändern. Öffnen wir das. Jetzt haben wir eine hellblaue Hintergrundfarbe für unsere Überschrift. Sie können sehen, wovon ich rede, was die Anzeige von links nach rechts zeigt. Nun sind zwei wichtige Eigenschaften Padding und Marge. Padding ist der Raum innerhalb dieser Hintergrundfarbe. Wenn wir hereinkommen und die Polsterung ändern, können wir die Polsterung mit Pixeln ändern, also geben wir ihm 50 Pixel, also sagen wir 50px. Ich werde das speichern und dann muss ich das Blau ändern. Es tut mir sogar weh. Lass es uns runterbringen. Sie können sehen, dass jetzt der gesamte Raum innerhalb dieser Überschrift, das ist die Polsterung, die mit diesem Element verbunden ist. Jedes Element hat eine Menge an Platz um es herum, Rand und Polsterung. Polsterung befindet sich innerhalb dieses Elements, so dass es vier Elemente zum Auffüllen gibt. Sie können Padding machen, links, oben, rechts und unten, und jede, die Sie einzeln steuern können , oder Sie können sie einfach alle einstellen, wie wir es vorher getan haben. Wenn wir nur wollen, dass der Polsterboden 50 Pixel hat, könnten wir das tun und genau das würde genau dort aussehen. Jetzt lassen Sie uns die Polsterung loswerden und zum Rand gehen. Genau wie Padding gibt es oben links, rechts und unten um die Elemente, aber Rand ist der Raum um das eigentliche Element in Bezug auf andere. Wenn ich reinkomme und den Rand, 50 Pixel, können Sie sehen, dass die Hintergrundfarbe nicht erweitert wurde, aber der Raum um diese Elemente und seine Beziehung zum oberen Rand der Seite ist jetzt viel Platz um sie herum. Der Rand ist, dass Raum, der nicht von der Hintergrundfarbe dort besetzt wird und selbst an diesen Rändern sehen Sie, dass er nicht in der Nähe ist, so nah wie vorher. Marge, Polsterung, zwei sehr wichtige Dinge zu sprechen. Nun, noch ein, gehen wir runter und gehen zum Bild. Dinge, die Sie anpassen können, sind die Breite und Höhe, und das ist nicht nur mit Bildern, aber dies wird am einfachsten sein, hier zu sehen. Wenn ich sagte Breite 25 Prozent, unser Bild nimmt jetzt etwa 25 Prozent unseres Bildschirms. Sie können dies sehen, wenn ich in den Index komme und dieses Bild kopiere und ich es noch dreimal einfüge. Sie können jetzt sehen, dass es etwa 25 Prozent dauert. Es gibt einige Anzeige und einige Polsterung auf dem Körper selbst. Sie können sehen, dass selbst mit den Hintergrundelementen unserer Überschrift links und rechts etwas Platz ist, also können wir nicht 25 Prozent den ganzen Weg durch. Aber Sie haben die Idee, dass dieses Bild jetzt 25 Prozent unserer Seite einnimmt. Sie können dies mit dem Prozentsatz ändern, oder wenn Sie eine bestimmte Höhe haben, die Sie wollen, können Sie dies in Pixel tun. Wenn wir wollen, dass unser Bild 250 Pixel breit ist, könnten wir das genau dort tun. Wenn wir wollten, dass es 1000 Pixel hoch ist, könnten wir das auch tun. Offensichtlich verzerrt es das Bild, nicht toll aussehend, aber Sie können das tun, also haben Sie die vollständige Kontrolle darüber, wie das aussieht. Lassen Sie uns reingehen und ich werde eine Breite von 50 Prozent hinzufügen, so dass es ziemlich groß und eine wirklich coole Sache, die Sie hier hinzufügen können, CSS kann, wie ich gesagt habe, über alles, was Sie wollen, tun . Einer von ihnen, wenn es um Bilder geht, ist der Grenzradius, also können Sie hinzufügen, ich habe einen Rundungseffekt, ich denke , sieht wirklich schön aus. Es sieht wirklich gut aus auf vielen verschiedenen Websites der modernen Funktion, nur um alle Ihre Bilder zu runden. kannst du tun, wenn du willst. Das ist ein cooles zu haben. Von dort aus könnte ich weitermachen, wie ich schon sagte. Aber das sind die Grundlagen davon. Wenn Sie eine IDE verwenden, die ich hoffe, dass Sie beim Lernen von CSS sind, weil es wirklich hilft. Alles, was Sie tun müssen, ist einen Buchstaben einzugeben, also wenn ich ein eingegeben habe, könnte ich alle CSS sehen, die mit einem beginnen . Wenn ich mir t ansehen wollte, dasselbe. Dinge wie Schriftgröße, können Sie das natürlich ändern, so dass wir diese Schriftgröße jeder Überschrift auf 50 Pixel ändern können, dann sehen sie nicht sehr anders aus, aber sie sind immer noch, also gibt es das. Ich ermutige Sie zu spielen, zu sehen, was Sie finden können, wenn es um CSS geht, und sehen, was Sie entdecken können, es gibt jede Menge Dinge, die Sie tun können. Das nächste, was wir decken werden, und so reden sie nur mehr über Stile, weil wir das für immer tun können. Wir werden darüber sprechen, wie man bestimmte Elemente anspricht, sowohl einzeln als auch in Gruppen. 10. 3.3 IDs und Kurse: Jetzt, da Sie wissen, wie Sie Tags ausrichten können, können Sie viel tun. Es gibt eine Menge, die man ändern kann, aber manchmal will man nicht viel ändern. Manchmal will man sich nur ein wenig ändern. Das ist, wo IDs und Klassen ins Spiel kommen. Beides sind Attribute, die Sie auf jedes HTML-Tag anwenden können. Kommen wir in diesen Absatz genau hier, und innerhalb des Absatz-Tags, öffnen Sie es mit einem Leerzeichen, und lassen Sie uns ID setzen, und drücken Sie „Enter“. Hier können wir einen Namen eingeben. Dieser Name kann alles sein, was Sie wollen, aber ich ermutige Sie, es sinnvoll zu machen. Wenn es nur eine Reihe von Buchstaben und Zahlen ist, ja, es wird funktionieren, aber um gute Codierungsmethoden zu haben, möchten Sie es zu einem aussagekräftigen Namen machen. Dies wäre wie Intro Absatz. Ich ermutige Sie auch, die CSS-Namenskonvention zu verwenden, die Trennung durch einen Bindestrich und wirklich keine Großschreibung ist. Ich werde das retten. Jetzt haben wir ein ID-Tag mit diesem Absatz verbunden. Das macht nichts von alleine. Hier ist der Text, aber es erlaubt uns, zu gehen und manuell dieses eine Tag gegen alles andere zu ändern. Um Ihnen zu zeigen, dass das wahr ist, lassen Sie uns ein zweites Tag wirklich schnell hinzufügen. Ich werde hineinlegen, ich bin mehr Text. Jetzt haben wir zwei Texte, zwei Absätze, und wir werden nur einen von ihnen anvisieren. Ich werde auf die Website kommen, zum CSS, und ich werde sagen, Pfund-Symbol oder Hashtag, so zielen Sie auf IDs. Also Pfund-Symbol und dann in den Namen, den Sie dort setzen setzen. Intro Absatz, öffnen und schließen Sie es genau wie wir es normalerweise tun, und dann geben wir ihm eine andere Farbe. Nehmen wir an, Farbe ist gleich lila. Lass uns das aufmachen. Jetzt ist die Farbe violett. Wir zielen nur auf diese eine Farbe ab. Nun, Sie können das kaum lesen. Stattdessen denke ich, was wir tun werden, ist, die Hintergrundfarbe in lila zu ändern. Oder lasst uns es in Aqua ändern, das ist eine schönere Farbe. Sie können sagen, dass dies ein Element auf Blockebene ist, und es hat jetzt einen Hintergrund von aqua, und dieses nicht. Das ist ein Ausweis. IDs, die Sie nur für ein Element verwenden. Also, wenn ich wollte kommen und ändern Sie diesen Absatz in etwas, Ich würde nicht kommen und sagen, Intro Absatz. Nun, es wird funktionieren, aber es ist wirklich, wirklich schlechte Übung. IDs in und für sich selbst sollen nur für ein Element sein und das war's, nichts anderes. Aber wenn Sie mehr als ein Element möchten, das Sie viel Zeit haben werden, möchten Sie eine Klasse verwenden. Das ist es, was wir jetzt tun werden. Kommen wir rein und sagen wir, diese geordnete Liste hatte eine Klasse. Wir sagen Klasse und öffnen es und geben ihm einen Namen. Wir geben ihm einen Namen der Liste. Wir kommen hier runter zur UL und wir werden sagen, Klasse entspricht Liste auch. Weil Klassen auf so vielen Elementen sein können, wie Sie möchten. In der Tat können Sie diese kombinieren und haben viele, viele, die Sie wollen. Lassen Sie uns hier eine zweite hinzufügen, nur um Ihnen zu zeigen, dass wir mehrere Klassen haben können. Ich werde sagen, coolen Hintergrund. Diese geordnete Liste hat eine Klasse von Liste und kühlen Hintergrund. Dieser hier unten hat nur eine Liste. Nun, um auf die Liste zuzugreifen, machen Sie einen Punkt. Ich werde sagen, Liste. Das ist also der erste. Dann werde ich period.cool-background tun, es wird jede von ihnen wiederum ändern. Die erste ist unsere Liste. Lassen Sie uns voran und heben Sie die Schriftgröße auf 25 Pixel. Dann können wir einen Blick auf die Listen werfen, und sie sind viel größer in der Schriftgröße. Das ist großartig. Nun, was ist mit dem coolen Hintergrund? Nun, das ist eine Liste, so dass sie auf mehrere Elemente angewendet werden kann, und wir können es etwas Spezifisches haben. Lassen Sie uns also die Hintergrundfarbe in Aquamarin ändern. Das ist ein cool klingender Name. Semikolon am Ende davon. Nun, da man den Hintergrund hat, und Sie können auch sehen, dass es sich um ein Element auf Blockebene handelt. Wenn Sie anfangen, größere Websites zu erstellen, ist die Sache, die Sie tun möchten Ihre Klassen und die Auswirkungen, die sie haben, zu partimentalisieren. Das ist fortgeschritten, aber ich möchte darüber sprechen denn wenn Sie anfangen, Ihr CSS so zu machen, werden Sie viel besser dran sein, als später zu versuchen, es zu ändern. Innerhalb unserer Website, wenn wir mehrere Elemente hatten, die wir von einem coolen Hintergrundelement sein wollten , aber sie haben auch andere Dinge wie, sie waren große Schrift, aber wir wollten nicht, dass alle von ihnen so sind. Dann möchten wir eine Klasse wie coolen Hintergrund machen, und es passt nur die Hintergrundfarbe an. Also haben wir diese Hintergrundklasse, in die wir gehen können und wir können tatsächlich auf alles anwenden. Wenn dieses Element, das Anker-Tag, wir wollten, dass es ein kühler Hintergrund sein, dann könnten wir das tun. Sie können sehen, dass es kein Block-Level-Tag ist, aber es hat jetzt diesen coolen Hintergrund. Wenn wir wollen, dass es eine größere Schriftart ist, dann, anstatt die coole Hintergrundklasse zu ändern, um eine große Schriftart zu haben, könnten wir einfach diese Listenklasse hinzufügen, weil es gerade jetzt nur die Schriftgröße erhöht, und dann hat es eine große Schriftart. Sie müssen nicht für jeden einzelnen eindeutigen Stil, den Sie anwenden, eine Klasse durchführen, aber es kann sehr hilfreich sein, bestimmte Stile in eine Klasse zu setzen und dann mehrere Klassen auf Ihre Elemente anzuwenden. Das ist nur etwas, was man im Hinterkopf behalten muss. Wenn Sie lernen können, Ihr CSS so zu machen, denke ich, dass Sie viel besser unterwegs sein werden, weil es einfacher zu verwalten ist, einfacher zu bearbeiten ist und es viel einfacher ist, auch zu lesen, wenn Sie beschreibende Namen in Ihren Klassen haben. Aber so können Sie bestimmte Elemente mit IDs und allgemeinen Elementen ansprechen, aber nicht das ganze Tag mit Klassen. Klassen und Tags, Sie werden sich die ganze Zeit überall zu finden. Stellen Sie sicher, dass Sie sich erinnern, wie Sie mit dem Hashtag und der Periode auf sie zugreifen können, und dann werden Sie gut gehen. Das Letzte, was ich Ihnen zeigen möchte, sind nur einige Animationen aus dem ganzen Web, die CSS verwenden und einige der wirklich coolen Dinge, die Sie tun können, um Sie zu inspirieren, dorthin zu kommen und sie zu lernen. Denn sobald Sie die Grundlagen von CSS kennen, wie Sie, können Sie dorthin gehen und jemandes CSS kopieren, es sezieren, lesen und genau herausfinden, wie es funktioniert, und es dann auf Ihrer Website werfen. Das ist eines der wirklich coolen Dinge über das Internet ist es so viele coole Dinge gibt, dass die Leute bereit sind, einfach zu teilen und Ihnen zu geben, und alles, was Sie tun müssen, ist zu lernen, wie sie arbeiten, um sie auf Ihrer eigenen Website setzen zu können. Schauen wir uns einige von denen als Nächstes an. 11. 3.4 - Einige tolle CSS Zeugs: Alles klar, das sind einige Dinge, die mit reinem CSS gemacht wurden. Die meisten von ihnen sind im Inneren von hier, die Codepen.io, die, wenn Sie anfangen, nach Fragen und Beispielen zu suchen, würden Sie wahrscheinlich hier landen. Es ist eine wirklich, wirklich coole Sache, die es den Leuten erlaubt einfach ihren Code herauszugeben und Sie können in Beispielen sehen und Sie können ihn kopieren. Jetzt sind alle Beispiele, die ich Ihnen zeigen werde, mit HTML und CSS, es gibt kein JavaScript, es gibt nichts anderes. Einige der CSS ist umfangreich, wie diese hat über 1.000 Zeilen, aber Sie könnten es kopieren und einfügen und es in Ihrer Website funktionieren lassen, indem Sie das tun. Das ist das Avengers CSS, wirklich cool, der Hulk knurrt und der Bildschirm schüttelt. Es ist wirklich, wirklich ordentlich. Dann haben Sie eine wirklich coole Unterschrift Animationen. Wenn ich auf diese Wiedergabe-Schaltfläche klicke, wird diese Signatur gezeichnet, was wirklich cool ist. Sie haben den Chrome-Dinosaurier animiert herumlaufen. Das ist ziemlich ordentlich. Sie haben einen Gehroboter, der sich um die Z-Achse bewegt. Das ist ziemlich cool, alles mit CSS gemacht. Sie haben einen animierten Charakter komplett mit CSS gemacht. Hier ist eine Ladeanimation, die wirklich cool aussieht. Dann ist hier ein Drittanbieter-Apps für Google jetzt. Dies geschieht alles mit CSS, nur Animationen, Keyframe, solchen Sachen. Sachen, die Sie jetzt lernen können, dass Sie die Grundlagen von CSS kennen, können Sie dies definitiv tun. Es von Grund auf neu zu machen, das ist viel schwieriger. Selbst ich habe es wirklich schwer, Animationen zu machen, weil ich kein Experte in ihnen bin. Aber was ich tun kann, ist Control A, Control C, setze es in mein Projekt, wenn ich es liebe und du kannst es auch. Sie müssen nur den HTML kopieren und dann können Sie ihn sezieren und genau herausfinden, wie es funktioniert. Das ist ein wirklich cooles CSS. Ich hoffe, das inspiriert Sie und zeigt Ihnen die Kraft dessen, was CSS tun kann. Es ist eine Stylingsprache, aber es tut auch mehr als das. Es gibt so viel, was CSS tun kann, es ist riesig, es ist breit. Seien Sie nicht eingeschüchtert, werden Sie herausgefordert und ermutigt, denn Sie können dies lernen, Sie können es tun und Sie können es in Ihre eigene Website setzen, ohne es von Grund auf tun zu müssen , weil es so viele Dinge gibt, die Sie einfach finden können. Was ich im nächsten Abschnitt tun möchte, ist Ihnen einige Ressourcen zu geben , um CSS und HTML über das, was ich Ihnen gezeigt habe, zu lernen und Sie für das Projekt für diesen Kurs der Herstellung Ihrer ersten Website herauszufordern . 12. 4.1 -: Lassen Sie uns über einige der Ressourcen sprechen, die Sie beim Erstellen Ihrer Websites und nur im Allgemeinen für die Forschung verwenden möchten. Die primäre, die ich Ihnen empfehlen werde, ist W3Schools.com. Dies ist eine Website, die ich unzählige Male als Referenz und als Go-to verwendet habe, um zu lernen, wie man bestimmte Dinge macht. W3Schools.com lehrt jede Menge verschiedene Dinge, aber sie haben auch umfangreiche Kenntnisse über HTML und CSS. Das wirklich coole daran ist , dass alles , worüber sie sprechen, einen „Try It“ -Button hat. Sie können darauf klicken, es öffnen, und Sie können den Code hier ändern, um genau zu sehen , was sich hier ändern würde. Es ist wirklich cool, es ist interaktiv, es ist gründlich und es ist völlig kostenlos. Sie können gehen und lernen HTML, CSS, und dann können Sie durch und lernen so viel mehr, wenn Sie wollen. Sieh es dir definitiv an. Die nächste ist die Code Academy. Sie haben viele Klassen für Sie. Wenn Sie etwas tiefer auf CSS wollen, was ich sehr empfehle, weil dies Ihnen nur einen kleinen Vorgeschmack darauf geben sollte , was Sie tun können, dann können Sie reinkommen und Sie können hier ihren kostenlosen Kurs nehmen. Jetzt lernen Sie CSS, das gleiche Zeug, das wir gerade viel mehr in der Tiefe gelernt haben und es ist wirklich nützlich. Es ist wirklich großartig. Ein weiteres CSS, das etwas fortgeschrittener ist, sind CSS-Tricks. Hier haben sie einen Platz, wo sie Artikel veröffentlichen. Sie können ihrer Gemeinschaft beitreten, Sie können sich Fragen ansehen, die Leute gestellt haben, und es ist sehr nützlich, wenn Sie suchen wie Sie etwas tun, das vielleicht viele andere Menschen getan haben. Dort wirst du Beispiele haben, die du durchmachen kannst, mit dem Code spielen kannst, all das Zeug. Es ist wirklich toll, sehr hilfsbereit. Dieser ist definitiv weiter fortgeschritten. Wenn du gerne lesen möchtest oder viel lesen kannst, ist CSS-Tricks wirklich toll und hat einige wirklich tolle Sachen. Es gibt Tonnen und Tonnen von mehr Sachen, die Sie auch verwenden können, um zu lernen. Aber das ist, was ich empfehlen würde. Die letzte, die ich empfehlen würde, ist, wenn Sie nach etwas suchen, was Sie tun werden, ist, Ihre Frage so spezifisch wie möglich zu formulieren. Wenn wir versuchen, unser Bild auszurichten und wir wüssten, dass wir wollten, dass es in einer bestimmten Weise ausgerichtet wird, würden wir die Sprache sagen, die wir verwenden, also „CSS Line-Up Bild auf der rechten Seite“. Was Sie suchen werden, nun, hier ist eine gute Website CSS-Tricks. Aber ein weiterer, auf den Sie die ganze Zeit kommen werden, ist „Stack Overflow“. Dies ist ein Ort, an dem Sie Fragen stellen und Antworten von Fachleuten erhalten können, Menschen, die seit langem an diesem Zeug gearbeitet haben. Die meiste Zeit werden Sie feststellen, dass diese Fragen wirklich gute gründliche Antworten mit Code haben , mit dem Sie gehen und spielen können. Sie haben Stapel, was sie wie ihre Gemeinschaft für alles nennen. Sie haben HTML, CSS und dann haben sie viel mehr als nur Technik, auch sie haben Leben, na ja, wirklich alles, was Sie denken können, gibt es einen Stapel, wo Sie Fragen stellen können und Menschen antworten können. Das ist auch ein wirklich großartiger, „Stack Overflow“. Ich empfehle Ihnen dringend, es zu verwenden, wenn Sie danach suchen. Stellen Sie einfach Fragen so genau wie möglich, um die beste Antwort zu erhalten, die Sie können. sind einige der Ressourcen, die ich sehr ermutige Sie zu verwenden und Sie werden sie für das nächste Video benötigen, denn ich werde Sie herausfordern, Ihre erste Website ohne Hilfe von mir zu erstellen. 13. 4.2 Deine erste Website!: Was wir bisher getan haben, ist gelernt, die Grundlagen von HTML, CSS und dann gab ich Ihnen einige wirklich gute Ressourcen, die ich wieder ermutige Sie zu verwenden. Nun, was ich möchte, dass Sie tun, ist Ihre erste Website zu machen. Wir haben hier ein bisschen getan. Ich würde dies nicht als eine Website bezeichnen, die der Veröffentlichung wert ist. Es sollte nie sein, es soll dir beibringen. Ich möchte, dass Sie diese Fähigkeiten, das HTML und das CSS, das Sie gelernt haben, nehmen und gehen und eine Website über etwas, das Sie lieben. Das coole daran ist, dass es alles sein kann, was Sie wollen, und Sie können es machen, wie Sie wollen. Wenn Sie einfach Ihre Website mit Bildern füllen und Untertitel darunter haben möchten, großartig, gehen Sie für sie. Es wird wie eine Fotogalerie sein. Wenn Sie viele Videos finden und sie auf ihre Seite an Seite setzen und sie alle automatisch spielen, sobald die Seite geladen wird, überladen große Informationen, aber immer noch wirklich cool. Geh drauf. Wenn Sie eine wirklich minimalistische Website mit nur einer Überschrift, drei Absätzen und einem Foto haben möchten, tun Sie es. Richten Sie es auf, färben Sie es, thematisieren Sie es, lassen Sie es fantastisch aussehen. Nimm das, was wir gelernt haben. Sie können all diesen Quellcode herunterladen, den ich getan habe, obwohl es wirklich nicht so viel gibt. Sie können es nehmen, wenn Sie wollen, aber ich ermutige Sie, diese Ressourcen immer wieder zu verwenden , weil ich sie auch verwenden. Geh und mach eine Website. Wenn Sie fertig sind, laden Sie es hoch und teilen Sie es mit der Community hier. Zeig uns, was du getan hast. Zeig uns, wie du es geschafft hast. Ich will es sehen. Andere wollen es sehen und auch ermutigt werden. Jetzt haben Sie keine großen Erwartungen an Ihre erste Website. Es wird nicht sein, naja, es könnte sein, aber es wird wahrscheinlich nicht etwas atemberaubendes und erstaunliches sein und das Internet zu revolutionieren. Es wird ein kleiner Junkie sein, es könnte ein paar seltsame Farben haben. Dinge funktionieren vielleicht nicht genau perfekt, und das ist okay. Das muss es nicht. Was du jetzt tust, ist das, was du gerade gelernt hast, in die Praxis umzusetzen. Denn wenn Sie das nicht tun, werden Sie kein Webentwickler. Ich kann Ihnen als Tatsache sagen, genau wie bei allem, was Sie lernen, wenn Sie es nicht tun und es immer wieder in die Praxis umsetzen, wird es nicht bleiben. Du wirst es nicht wirklich lernen. Sie können eine 1000 Tutorials sehen und haben eine Reihe von Kopfwissen und wissen, jedes einzelne Tag. Aber wenn Sie es nicht in die Praxis umsetzen, werden Sie kein Webentwickler sein. Das ist meine Herausforderung an Sie. Machen Sie eine Website über etwas, das Sie lieben. Posten Sie es, und teilen Sie es mit uns hier. Wenn du das tust, bist du fertig. Sie haben Ihre erste Website und Sie können sich als Webentwickler bezeichnen. Ich freue mich darauf, zu sehen, was du hast. Ich bin wirklich aufgeregt. Wenn Sie damit fertig sind, springen Sie in den nächsten Abschnitt, wo ich nur ein Video um Ihnen zu gratulieren und wo Sie zeigen, um in die Zukunft gehen. 14. 5.1: Herzlichen Glückwunsch und Weg zu gehen. Sie haben Ihre Website erstellt. Hoffentlich haben Sie es geteilt, und ich möchte nur sagen, dass Sie jetzt ein Webentwickler sind. Nun, das ist der erste Schritt auf einer langen Reise. Es gibt noch viel zu tun. Aber weil du es so weit geschafft hast, weiß ich, dass du es den Rest des Weges schaffen kannst. Hier sind einige Websites, die wirklich gut sind und viel tun, um die Macht des Internets zu präsentieren und was Sie tun können, wenn Sie wachsen und lernen. Es gibt eine Menge wirklich coole Sachen, die Sie tun können, wenn es um Interaktivität, Themen, Farben, Tonnen und Tonnen von wirklich coolen Sachen geht. Diese Websites zeigen es ab. Wenn Sie einfach online nach fantastischen Websites suchen, dann werden Sie so etwas finden, und all dies wird nicht nur mit HTML und CSS getan. Was das bedeutet, ist, wenn Sie sich damit wohl fühlen, ist es Zeit, den nächsten Schritt zu machen, und der nächste große Schritt ist JavaScript. Wenn wir w3Schools JavaScript suchen, wird dies kommen. JavaScript wird sein, wie Sie Ihre Website wirklich interaktiv machen. Dies ist ein großartiger Ort, um zu lernen, wenn Sie einfach voran gehen und loslegen möchten, und dann von JavaScript möchten Sie etwas für das Back-End lernen, wenn Sie Full Stack-Design machen möchten. Was das bedeutet, ist, dass die meisten Websites etwas haben, das Informationen auf dem Back-End speichert, der Server genannt wird. Dies wäre wie tatsächliche Programmiersprachen wie C-Sharp, Ruby, PHP, so etwas. Das ist Code, der die Informationen von einer Website, wie eine E-Mail-Liste oder ein Kontaktformular oder so etwas,nimmt wie eine E-Mail-Liste oder ein Kontaktformular oder so etwas, und verarbeitet, speichert sie in einer Datenbank, sendet eine E-Mail, sendet Ihnen eine Textnachricht, so etwas. Wenn Sie darauf hineinkommen wollen, dann ermutige ich Sie zu gehen und ein PHP zu lernen, C-Sharp, nehmen Sie eine dieser Sprachen und beginnen Sie einfach damit zu arbeiten. Es ist viel anders als das, was du hier getan hast, aber es ist wirklich mächtig. JavaScript ist wie eine dieser Sprachen, außer dass es für das Front-End oder, ich denke, Front-End ist, wie wir es nennen würden. Es nimmt die Informationen, mit denen Sie auf dieser Seite arbeiten möchten , und tut etwas richtig dann und da. Hier ist ein Beispiel, das Datum und die Uhrzeit zeigt. Dies ist eine Schaltfläche, die Funktionalität hat , die das Datum und die Uhrzeit abruft und es dann innerhalb von hier postet. JavaScript, eine Menge davon ist eigentlich nur Änderung von HTML oder CSS, die Sie bereits auf Ihrer Website gesetzt haben. JavaScript kann das CSS eines Elements ändern, es kann eine bestimmte ID oder Klasse finden und es ausblenden oder hinzufügen, solche Sachen. Es ist wirklich mächtig, Sie können volle Spiele damit machen, wenn Sie es so gehen wollen, oder Sie können es in Ihre Website integrieren, um eine Menge Funktionalität hinzuzufügen. Sachen wie Schwebeeffekt, Sachen wie Animationen auf Klicks oder Verfolgung der Maus, Dinge wie diese, die Sie nicht nur mit HTML und CSS tun können. Nachdem Sie dies getan haben, nachdem Sie Ihre Website erstellt haben, üben Sie weiter, codieren Sie weiter, machen Sie Websites. Machen Sie sie für Ihre Freunde, machen Sie sie zu mehr Themen über das, was Sie lieben, machen Sie sie für Ihre Firma, machen Sie sie für Ihre Schule, was auch immer. Machen Sie weiter Websites, und während Sie das tun, lernen Sie weiter. Lernen Sie JavaScript, lernen Sie C-Sharp, lernen Sie Python, lernen Sie PHP, wählen Sie etwas aus und lernen Sie es. Es gibt so viel mehr zu lernen, so viel mehr zu schaffen, aber Sie können es tun, weil Sie es so weit geschafft haben, können Sie weitermachen. Das ist, was ich für dich habe, das ist der Kurs. Herzlichen Glückwunsch, Weg zu gehen. Noch einmal, ich hoffe, es hat dir gefallen. Ich hatte eine wirklich tolle Zeit, das zu unterrichten, und ich hatte eine tolle Zeit, mit dir zu interagieren. Vielen Dank, dass Sie sich mir angeschlossen haben, und wie ich gerne sagen möchte, haben Sie Spaß beim Erstellen großartiger Websites, und ich werde später wieder mit Ihnen sprechen.