HTML + CSS – SO GESTALTEST DU EINE WEBSEITE

1. Einführung: alle, Vielen Dank, dass Sie auf diesen Kurs klicken. Mein Name ist Verity und ich bin ein Front-End-Entwickler aus Sydney, Australien. Nun, ich bin heute hier, um Ihnen die Grundlagen von HTML und CSS auf beizubringen. Um dies zu tun, werden wir zusammenarbeiten, um eine Portfolio-Stil-Website zu erstellen, die Sie an Ihre nur Ihre eigenen Fähigkeiten und natürlich, Ihren eigenen Stil anpassen können an Ihre nur Ihre eigenen Fähigkeiten und natürlich, . Jetzt brauchen Sie keine Vorkenntnisse, um diesen Kurs absolvieren zu können. Wir werden vom ersten Platz beginnen und wir werden zusammenarbeiten und langsam alles Geschick aufbauen . Am Ende dieses Kurses werden Sie eine Internet-fähige Website erstellt haben, die im Moment ziemlich cool ist, um das Beste daraus herauszuholen, denn ich würde Sie wirklich ermutigen, ein Projekt unter diesem Video im Projekt zu erstellen , in dem Sie Ihre Fortschritte während der gesamten Klasse verfolgen können, Sie können mit anderen Schülern chatten, Sie können sehen, woran alle gearbeitet haben. Und natürlich, wenn Sie stecken bleiben, können Sie Fragen unten im Community-Bereich stellen und ich werde versuchen, Ihnen so viel wie möglich zu helfen und hoffentlich werden Sie Klassenkameraden versuchen, Ihnen auch zu helfen. Wenn Sie also bereit sind, in dieses Projekt einzutauchen, lassen Sie uns mit unserer ersten Lektion beginnen. 2. Kurseinheit 1: Erste Schritte: Wenn ihr zu Lektion 1 willkommen seid, wisst, was wir in dieser ersten Lektion tun werden, ist dass wir euch alle mit euren Kursdateien einrichten. Gehen Sie, um einen Texteditor herunterzuladen. Wir werden einen Blick durch die Ordnerstruktur auf nur im Allgemeinen durch alles gefangen , was wir in diesem Kurs abdecken werden. Also gehen wir zum allerersten, was wir tun werden, ist klicken Sie auf das Projekt tippen Sie unter diesem Video, und Sie sollten angehängte Dateien und einen kleinen Zip-Ordner sagen Klasse Projekt dot zip sehen. Laden Sie einfach diesen Ordner herunter und extrahieren Sie ihn auf Ihren Computer. Ich habe schon so sozial offen gemacht, dass jetzt. Also, sobald Sie diese Datei öffnen, sollten Sie drei Unterdateien Entwürfe sehen, Arbeitsdateien und Projekt beenden. Wenn wir in die Design-Datei kochen, werden Sie sehen, dass ich Sie mit PNG eine für Desktop von Mobile zur Verfügung gestellt habe. Und das sind die Entwürfe dessen, was wir in diesem Kurs bauen werden. Aber wir werden uns das in einem Browser in einem Moment ansehen. Also, wenn wir eine Ebene wieder nach oben gehen, haben wir Arbeitsdateien, die buchstäblich wie funktionierende Fläschchen ist. Dies ist, wo wir alles über die Arbeit im Laufe des Kurses an einem fertigen Projekt tun , das in jetzt kochen wird, können Sie sehen, ich habe Index dot html und einen Assets Ordner, in dem wir unser CSS auf alles über Bilder speichern werden. Wenn Sie auf Ihre Indexpunkt-HTML-Datei doppelklicken, wird sie in einem Browser geöffnet, wie Sie hier sehen können. Also haben wir einen netten kleinen Navigationsraum für ein Logo. Ein paar nette Links. Wir haben das Bild mit ein wenig einleitenden Text, so dass Sie sich vorstellen können . Wir haben hier unten einen Abschnitt für Portfolioartikel. Sie haben offensichtlich Bilder oder Essen im Moment, aber Sie können sie ändern, um zu sein, was Sie wollen. Und wenn wir den Mauszeiger über diese Bilder sehen, dass wir einen schönen kleinen CSS-Effekt haben der den Namen des Portfolioelements auf eine kleine kurze Beschreibung sowie über das, was es ist. Und wenn wir nach unten scrollen, haben wir einen Abschnitt über mich mit meinem Gesicht auf der rechten Seite. Nur ein wenig Platz für eine Beschreibung darüber, wer Sie sind und was Sie tun und dann unten . Wir haben einen Kontaktbereich, der auch die Überschrift und Beschreibung enthält, aber auch alle Ihre Social-Media-Symbole, die Sie mit Ihren eigenen persönlichen Konten verknüpfen können . Das ist es, was wir bauen werden. Ich finde, es sieht ziemlich schön aus. Am Ende dieses Kurses wird dies eine Internet-fähige Website sein. Bevor wir also mit der Arbeit auf unserer Website beginnen können, ist das erste, was wir brauchen, ein Texteditor, das ist, was Sie verwendet haben, um den Code für Ihre Website zu schreiben. Also habe ich ziemlich viele in meiner Zeit benutzt und ganz ehrlich, auf der Anfängerstufe, macht es keinen echten Unterschied, welchen man wählt? Ein paar von denen, die ich verwendet habe, bevor Sie sind adam dot io. Ich habe erhabene. Tex auf dem, den ich im Moment verwende, ist visueller Studio-Code. Aber ehrlich gesagt, ist es nicht wirklich wichtig. Also wählen Sie einfach, was auch immer Sie wollen. Ich denke, heute werden wir bei ihm sein, so dass Sie einfach auf den Download klicken und folgen Sie den Anweisungen auf Adam. Äh, mach das auf. Ich habe es bereits auf meinem Computer installiert, also werde ich nur öffnen, dass jetzt werde ich unsere Projektdateien öffnen, dann sind dies unsere Arbeitsdateien. Wollen Sie also den Ordner „Arbeitsdateien“? So klicken Sie auf Öffnen, können Sie alle Index und unsere Assets sehen. Ich werde auf Indexdatei klicken. Und da gehst du hin. Hier werden wir an unserem Projekt arbeiten, damit Sie sehen können, dass ich bereits die Heu-HTML-Datei für Sie eingerichtet habe . Die Grundstruktur. Also haben wir doc-Typ html an der Spitze, was eine Notwendigkeit für alle Hedge-de-amount Datei ist, so dass der Browser weiß, welche Art von Datei Sie öffnen. Wenn Sie es in Ihrem Browser laden, haben wir ein hey HTML-Tag, das den gesamten Inhalt in Ihrer HTML-Datei wieder umschließt, das muss sein. Das ist der Browser weiß, was du ihm gibst. Wir haben den Kopf an der Leiche. Jetzt. Der Kopf ist, wo Sie alle Informationen über Ihre Webseite, die Sie nicht unbedingt in Ihren Browser geladen werden wollen. Dies ist, wo Sie sagen, verknüpfen Sie Ihre CSS-Dateien, Ihre Javascript-Datei, so dass das Browsen weiß, wo sie zu finden sind. Dies ist, wo Sie Informationen auf Facebook setzen, teilen alle Metadaten, den Titel Ihrer Webseite und Dinge wie diese. Es gibt eine ganze Reihe von Dingen, die du da reinlegen könntest, aber wir werden das später abdecken, also stressen Sie nicht zu viel darüber hin und wieder die Leiche. Hier schreiben Sie alles, was Sie auf Ihrer Webseite sichtbar sein möchten. Um also zunächst zu demonstrieren, was der Körper tatsächlich tut, werden wir mit der Erstellung einer Hallo Welt Webseite beginnen, die eine Tradition in der Web-Entwicklung ist. wenn Sie ein neues Projekt starten, erstellen Sie eine Hallo Welt Webseite, um sicherzustellen, dass alle Ihre Dateien und alles so funktionieren, wie Sie es erwarten. Das erste, was wir tun werden, ist, dass wir reden. Hey, , ich hasse einen Tag. Nun, das bedeutet nur, Überschrift eins und dann innerhalb der Überschrift, wir werden Hallo schreiben, Welt kleines Ausrufezeichen und speichern Sie die Datei. Nun, wenn wir unterwegs in Chrome gehen, öffnen Sie unsere Datei, so dass ich in meine Kostenprojekte die Arbeitsdateien und meine Indexdatei gehen werde. Da gehst du. Du kannst Hallo sehen. Nun, nur in den Browser gedruckt. Wir wissen also, dass unsere Indexdatei funktioniert, aber wir wollen auch unsere CSS-Datei so einrichten, dass wir CSS in diesem Kurs lernen können. Also in Ihrem Assets-Ordner, wenn Sie zurück in ihn gehen und einen Blick auf den Assets-Ordner werfen und wir haben den Style-Ordner , dem das CSS gespeichert wird und in diesem Ordner habe ich Hauptpunkt CSS ist, wo Wir werden alle unsere Dateien speichern und wie Sie alle von uns Stile speichern können Entschuldigung. Und wie Sie sehen können, habe ich geschrieben, dass ein Hass die Farbe lila haben sollte, aber im Moment die Überschrift nicht lila, also funktioniert es nicht. Was wir also tun müssen, um diesen Stil zu beeinflussen unsere Indexdatei ist in unserem Kopf des Dokuments. Wir müssen die CSS-Datei tatsächlich verknüpfen. Also, hier habe ich gerade kopiert. Wir haben ein Link-Tag mit RTL, die für Beziehung oder Beziehung endet, was so ist, dass die Art, was ist die Datei Es ist ein Stylesheet. Hey, Treff bedeutet den Ort, so dass wir sehen können, ob wir hier auf die linke Seite gehen, wir können sehen, dass Indexdatei auf der gleichen Ebene wie der Assets-Ordner sitzt. Also, was wir hier sagen, ist, dass wir von Index wollen, dass Sie in den Ordner Assets gehen, sehen Sie ihre Assets Ordner. Dann möchten wir, dass Sie in den Ordner Stile gehen. Dann möchten wir, dass Sie in den Hauptpunkt CSS gehen. Wenn wir also nur diese Datei speichern und dann auf unsere Webseite gehen und neu laden, können Sie sehen, dass sie lila ist. Da gehst du. Sie haben gerade Ihre erste Webseite. Nun, in der zweiten Lektion, werden wir aufhören, auf die Navigation für unsere Website zu bauen, also lasst uns los. 3. Kurseinheit 2 – Teil 1: Navigation: Bevor wir also weiter gehen, sollten wir wahrscheinlich darüber sprechen, was angetastete E-Mail und CSS tatsächlich richtig ist. Es ist irgendwie wichtig für diesen Kurs. Also hey, HTML steht während Hypertext-Markup-Sprache, wo ein CSS für Cascading Stylesheets steht. Jetzt können Sie an HTML und CSS in Bezug auf den Bau eines Hauses denken, so schnell ml ist die Struktur des Hauses. Es sind die Wölfe. Es ist das Dach. Es ist der Boden. Es ist, was Abschnitte Ein kleines Zimmer draußen, wo ein CSS ist, wie man das Haus schmückt, wie man es nach Hause macht. Es ist die Farbe, die Sie die Wände malen. Es ist die Einrichtung, die Sie wählen. Wählen Sie in Ihrer Wäsche. Es ist, ob Sie das Foto an der Wand auf der linken Seite auf der rechten Seite haben wollen. Nun ist es wichtig, sich für Cascading Stylesheets oder CSS zu erinnern, dass die Bedeutung der Stile, die Sie schreiben, immer größer und größer wird, wenn sie das Stylesheet kaskadieren. Also, was immer Sie direkt am unteren Rand wird möglicherweise überschreiben, was Sie oben geschrieben haben . Wenn Sie die gleiche Auswahl verwenden, machen Sie sich keine Sorgen, dass jetzt. Das werden wir in der nächsten Lektion behandeln. Der erste Teil unserer Seite, den wir bauen werden, ist die Navigation auf. Um dies zu tun, müssen wir mit dem Schreiben von ALH HTML-Markup beginnen, das das Layout und den Inhalt für unsere Seite definieren wird . Nun, wenn wir uns das Layout in unserem fertigen Projekt hier ansehen, können Sie das Design in eine Art Raster aufteilen. Sie können sehen, dass wir den äußeren Container haben, der die Form der Navigation erstellt. Wir haben einen inneren Container, der das Maximum schafft mit, dass Kontaktinhalte erweitern können Wir haben einen kleinen Container für unser Logo und einen Container für unsere Navigationselemente . Jetzt wird jeder dieser Abschnitte in Tags namens dibs on eingewickelt werden, geben ihnen Klassennamen, so dass wir sie in CSS auswählen können, wenn wir sie später stylen. Gehen wir zu unserer HTML-Datei und zuerst gehen wir zu löschen sind hallo Welt, weil wir das nicht mehr brauchen. Wir werden damit anfangen, uns auszuschreiben. Ich hasse deinen Mund, also schreibe ich unser erstes Div mit der Kloss Navigation. Dies wird der Container für unsere gesamte Navigation sein. Jetzt können Sie es entweder so als div schreiben oder weil es eine Navigation sein wird. Es gibt ein spezielles Tag namens naff -Tag. Ich dachte, du könntest es so oder so tun. Jetzt ist es einfach besser für die Zugänglichkeit. Und dann werden wir einen Container haben. Kloss , der den Container hat, der die Breite des Inhalts innerhalb der Navigation einschränkt . Und dann wird eine weitere Ebene nach unten einen Kloss mit Knaves Loga Uh, Dave auf der gleichen Ebene innerhalb desselben Containers haben. Wir werden eine Klasse für unsere nie eine Klasse haben und ein getan für unsere Navigationselemente. Hier werden wir alle unsere Links zu verschiedenen Abschnitten in unserem Folio setzen. Also sind wir genau hier drin nur für den Moment, so dass wir etwas drin haben, wird Logo schreiben und jetzt Artikel Ich mag dies nur so tun, dass ich auf der Seite sehen kann , wo alles ist. Wir gehen in unsere Arbeitsdateien und aktualisieren und es geht los. Also, um unser Logo zu zeigen. Ich habe es tatsächlich als Bilddatei festgelegt, also schreiben wir ein Bild-Tag mit einer Quelle auf eine Alternative nach Ihnen. Dieses alternative Attribut beschreibt im Grunde nur, was das Bild ist. Wenn es also nicht geladen wird, weiß der Benutzer, was da sein soll. Also werde ich genau das richtige Profilbild darin. Unsere Quelle sagt, dass Browser, wo das Bild zu finden. Also in diesem Fall sind wir in der Indexdatei. Wir wollten in den Ordner Assets in den Ordner Images gehen und dann auf Verity Logo Punkt p und G. Also schreibe ich das als Assets Bilder und dann Verity Logo Punkt PNG. Und dann, nun, überprüfen Sie einfach, dass das geladen hat, sehen Sie diesen Leerraum. Das Logo selbst ist weiß waren nicht in der Lage, es für den Moment zu sehen. Aber die Tatsache, dass es das alternative Tag nicht zeigt, bedeutet, dass es das Bild geladen hat . Dann, in unserem Abschnitt Navigationselemente, werden wir unsere Elemente in eine Liste schreiben, und in diesem Fall werden wir eine Nordeste verwenden, was bedeutet, dass es nur Aufzählungspunkte anstelle von Zahlen zeigt. Wenn Sie Zahlen zeigen wollten, können Sie schreiben. Oh, ich was bedeutet, geordnete Liste. Aber wir werden in diesem Fall eine auf geordnete Liste verwenden. Also wird jeder unserer Listenelemente einen unserer Links zu einem Punkt auf der Seite einschließen . Also lassen Sie uns drei von denen einen Teoh drei und innen waren dabei, ein Tag zu haben, das ist, wie Sie einen Link erstellen. Wir werden nur ein Pfund in das stecken. In einem Tag können Sie also einen beliebigen Text innerhalb Ihrer schraffierten Menge verknüpfen. Also unser erster Link wird Top-Portfolio Abschnitt Kopie sein. Dieser zweite Link wird zu unserem Abschnitt über sein, und der dritte Link wird zu unserem Kontaktbereich ködern. Okay, jetzt waren wir frisch. Wir können diesen weißen Raum sehen, wo die Bilder, die wir haben jeden unserer Links, aber es sieht nicht ganz so aus, wie wir wollen. Also, jetzt werden wir rht Betrag zu stylen. Also, um das zu tun, gehen wir in unsere Assets Ordner Stile und dann Haupt CSS wird von unserem Hass ein lila loswerden , weil wir das nicht mehr brauchen. Und nun, richtig. Navigation, weil denken Sie daran, unser Top-Container hat die Klassennavigation, und wir setzen den Hintergrund auf für wenn fünf Datum 75 Nun das ist, was Sie einen Hex-Wert nennen. Also, wenn wir das frisch sparen, dann gehst du. Jetzt können Sie unser Bild sehen. Aber du siehst, wie es diesen seltsamen kleinen weißen Raum um die Navigation herum gibt, wir nicht haben. Wir haben nicht nach dem Browser gefragt, um das zu tun. Und was das ist, ist ein Standardstil, den der Browser auf unsere Webseite anwendet, und jeder Browser wird diese Standardwerte etwas anders anwenden. Also habe ich in Ihre Dateien aufgenommen, damit Sie Dot CSS normalisieren. Ich werde nicht auf eine Menge Details darüber eingehen, was das im Moment ist, nur wegen der Zeit. Aber im Wesentlichen, was dies tut, ist das Zurücksetzen aller Standard-Browse-Stile. Wenn wir also nur das in unserer Hauptdatei über der Hauptpunkt-CSS-Datei verknüpfen und die Seite aktualisieren, die Sie gehen, die weg geht, ist es wichtig, dass es zuerst kommt, weil alles, was in Ihrer Haupt-CSS-Datei ist überschreibt den Punkt CSS normalisieren weil es eine kaskadierende Stylesheets ist. Je weiter du nach unten gehst, desto höher ist die Wichtigkeit. Die Stil-Regeln sind so, dass wir das haben, was wir jetzt tun wollen, ist, dieses Logo zu stylen und auf der linken Seite schweben zu lassen. Und wir wollen, dass unsere Links in der Linie angezeigt und nach rechts schweben, so dass wir ohne Logo beginnen , da das erste ist, damit wir unser Logo mit seinen Krallen anvisieren können. Wir haben die Tücher, Knave, Loga. Also gehen wir jetzt gut zu unserem CSS. Wenn Logo. Lassen Sie uns eine Breite von 180 Pixeln geben, denn es ist ein wenig bigot in dem Moment, in dem ich eine Grenze um ihn herum setzen werde, nur damit Sie sehen können, wo alles endet. Und das werden wir auch für unsere Navigation tun. Also lassen Sie uns Grenze ein Pixel Volumenkörper lesen. Wir speichern das und schauen uns einfach kurz an. Oh, sehen Sie, wie die Bilder aus dem Behälter ragen. Deshalb Grenze ist immer gut, so dass Sie sehen können, wo alles endet. Der Grund, warum das passiert, ist, weil das Nie Logo der Container ist. Aber das Bild selbst ist größer als der Behälter, also verschüttet es die Seite. Um das zu beheben, werden wir jetzt eine weitere Schicht nach unten und gut machen. Logo-Bild sprechen. So zielen Sie ein Element ab, indem Sie nur Bild schreiben, wird div o l. Isagen. I Also, um das Bild zu zielen, werden wir mit 100% schreiben und mit 100% in diesem Fall bedeutet 100% Also, um das Bild zu zielen, werden wir mit 100% schreiben und mit 100% in diesem Fall bedeutet 100% der Breite von seinem Elternteil. Da wir also gesagt haben, dass die Eltern 180 Pixel haben sollten, bedeutet das, dass das Knave-Logo nicht mehr als 180 Pixel sein könnte, wird das speichern und es erneut überprüfen . Und sie gehen, das sieht viel schöner aus. 4. Kurseinheit 2 – Teil 2: Navigation: Werfen wir einen Blick auf diese Links. Wir wollen, dass sie in der Schlange sitzen, anstatt unter der anderen. Also Tücher, die wir von Nab Items bekommen haben. Da gehst du. Und dann haben wir unsere u L L I bekommen. Also gehen wir in ein CSS auf Wir werden Stil haben keine Gegenstände für die Kloss. Wir setzen einen Rand ein Pixel fest weiß darauf wieder, damit wir sehen können, wo es ist. Aber für unsere Artikel haben, lassen Sie uns aufhören, indem Sie sie in Linienblöcken anzeigen. Wir wollen also zur UN-geordneten Liste und zum Listenelement hinuntergehen, wenn wir möchten, dass sich jedes Listenelement in Übereinstimmung mit den anderen zeigt. Also im Zeilenblock, sie gehen dort alt in der Reihe. Jetzt sehen wir mal. Dieser Container nimmt die gesamte Breite vom Bildschirm ein, was wir nicht wollen. Und der Grund dafür ist, dass dies geschieht, weil es ein Anzeigeblockelement ist. Also gehen wir zurück bis jetzt Elemente, die der Container ist, und wir werden Anzeige im Zeilenblock hinzufügen, um dies ist gut, sie gehen jetzt. Sehen Sie diesen kleinen Raum hier, dass es links neben dem Text erstellt, der mit dem Padding zu tun hat, also klopfen Sie sehen, dass Grünflächen Dann Padding ist das Ich werde Ihnen zeigen, wenn wir die Entwickler-Tools öffnen oder Ihnen zeigen, dass von Anfang an Sophie, Klicken Sie rechts, klicken Sie, inspizieren und wir gehen in wir klicken auf diese kleine Hafensache, wenn wir auf unseren Artikel klicken, den wir betrachten möchten, die auf geordnete Listen ist, können Sie sehen, dies ist der HTML, den wir geschrieben haben kurz bevor wir uns öffneten. Sie können Ihre Listenelemente sehen und jetzt, wenn wir hier zu Stilen gehen und nach unten scrollen, können Sie sehen, dass der grüne Abschnitt ist, was wir klopfen und klopfen bedeutet Raum innerhalb eines Containers. Also wollen wir diesen Platz nicht im Container. Wir wollen eigentlich, dass das so Null ist. Also, wenn wir in alle ah CSS auf den Knave Artikel nie Elemente auf geordnetes Listenelement gehen und wir schreiben Polsterung Null, die weggehen wird oder es weg bleibt. Sie gehen jetzt. Wir wollen, dass diese Links hier drüben auf der rechten Seite sitzen. Also, wenn wir zurück in unser CSS gehen und wir auf die knave Elemente zielen, können wir. Was wir tun können, ist, dass wir schreiben können , rechts schweben, , rechts schweben, und das wird es nach rechts schicken. Also schauen wir uns mal an. Schwimmer direkt dort, wo du gehst. Es ist auf der rechten Seite, aber sehen Sie, wie es jetzt irgendwie außerhalb des Containers sitzt. Das liegt daran, wenn du Float benutzt hast, nimmt es diesen hassen Shia Männchen aus der normalen Ordnung. Also, jetzt sitzt es lustig, also die Art und Weise, wie wir das beheben werden, ist, indem wir einen Schwimmer links auf das Logo setzen. Sie haben Logo Float links. Aber was das dann sehen wird, dass jetzt sitzt, obwohl Sie den Container mit dem Hintergrund gekauft haben , ist tatsächlich zusammengebrochen, weil er die Reihenfolge des HTML geändert hat. Da sitzt also nichts mehr drinnen. Also beheben Sie das ist, in den Container von diesen beiden Elementen auf zu gehen. Wir werden Überlaufwasser schreiben, das dem Behälter im Wesentlichen sagt, alles zu enthalten, auch wenn es die Höhe überläuft. Also werden wir klicken, aktualisieren, und sie gehen, dass wieder enthalten. Also lasst uns die Grenzen loswerden, weil wir sie nicht mehr brauchen. Wir werden ein wenig Abstand zwischen Allah jetzt Gegenstände setzen und auch dieses blaue und unterstrichene loswerden . Also jetzt Artikel L. I Wir wollen einige Abstände auf der Außenseite. Wir wollen keine Polsterung. Wir wollen Abstände. Wir wollen Marge auf der Außenseite, den Listenelementen, also werden wir Null oben schreiben. Fünf auf der rechten Seite ist Null auf der unteren fünf auf der linken Seite. Das ist es, was diese Kurzschrift bedeutet. Nicht mehr. Tauschen Sie AIBA und sehen Sie, dass es diesen Raum geschaffen hat. Und wenn ich gehe und wenn ich in eines unserer Artikel hier oben gehe und darauf klicke auf den Listeneintrag Siehe , können wir die Marge fünf auf beiden Seiten sehen. Nichts auf der Oberseite in der Unterseite. Nein, jetzt, für die Farbe müssen Sie speziell auf das a -Tag, das wir innerhalb des Listenelements haben. Also werden wir knave gehen. Eisens U L L I. Eine Farbe f f f f f f f f f f f f f, was weiß bedeutet, und wir wollen, dass die Textdekoration keine sein. Wir wollen nicht, dass es unterstrichen wird, also lasst uns auffrischen. Sie sind jetzt hübsch. Ich denke, wenn du schwebst, wollen wir etwas Farbe drauf haben. Also lasst uns die gleiche Regel noch einmal machen. Aber dieses Mal wollen wir eine Pseudo-Klasse namens Ha va verwenden, und wir werden die Farbe ändern, Sagen wir einfach für jetzt, orange. Dies ist eine andere Möglichkeit, Farben in CSS zu definieren, indem Sie einfach den Namen schreiben. Klicken Sie also auf Speichern frisch und schweben Sie und Sie erhalten orange. nun, Beachten Sienun,wie das Logo und die Links bis zum Rand der Seite verschwinden, während sie in unserem endgültigen Projekt ein wenig nach innen sitzen. Um das zu beheben, werden wir unseren Container anvisieren , den wir alle unsere Inhalte umhüllen. Ich werde das aufschreiben. Sehr groß als allgemeiner, allgemeiner Stil. Dies sind alle Navigationsstile. Wenn Sie etwas in diesen Slush und Stern wickeln, wird es kommentieren, so dass es nicht wirklich Auswirkungen auf die Stile Ihrer Website. Also für Container, werden wir schreiben Max mit 1200 Pixel und einem Rand aus, Null oben und unten und Auto auf der linken und rechten, was bedeutet, dass es gleichmäßig auf links und rechts, so dass es in der Mitte sitzen wird. Speichern Sie das und aktualisieren Sie angekündigte sitzt in der Mitte. Also, jetzt wollen wir es einfach ein bisschen aufräumen. Das sieht ziemlich gut aus. Wir werden das loswerden. Borda wird unsere Front zu einem Sand Sarah Fonds ändern, weil es im Moment diese kleinen Stücke von Dekoration auf der Vorderseite hat , und wir werden ein bisschen Polsterung an der Spitze dieses Bildes hinzufügen, so dass es weiter unten sitzt . Also geh zurück in eine CSS Onda. Wir werden die Grenze loswerden. Lassen Sie uns in unserem Allgemeinen aufschreiben. Wir wollen alles. Das ist, was dieser kleine Asterix bedeutet alles, um die Form Familiengruppen Schriftfamilie von San Serif auf zu haben . Dann wollen wir etwas Polsterung Zehe unser Logo hinzufügen. Also lasst uns herausfinden, dass Logo hier ist, also wollen wir Salem streicheln, sagen , 10 Pixel, aber nur oben. Dies ist eine andere Möglichkeit, dass Sie Padding oben schreiben können und dann werden wir das aktualisieren, und das sieht ziemlich gut aus, aber immer noch fertig sind. Das Projekt ist etwas breiter, also zu unserem Container, dem Navigationscontainer, werden wir einige Polsterung von 10 Pixeln oben, unten links und rechts hinzufügen . So überall hat 10 Pixel auf wird das speichern. Gehen Sie zurück zu unserer Arbeitsdatei und aktualisieren Sie. Und da gehst du. Ok. Auf Navigation sieht wirklich gut aus. Lasst uns weiter nach oben arbeiten. 5. Kurseinheit 3: Kopfhaut: Okay, also sieht die Navigation gut aus. Also gehen wir jetzt zum Styling und reiten den HTML für den Header, der dieser Teil hier sein wird mit dem schönen großen Feature-Bild und ein bisschen einer Einführung darüber, wer wir jetzt sind, genau wie zuvor, wir sind wird es in eine Art Raster aufteilen, wie, äh, Panne. So können Sie es sich vorstellen, so dass Sie diesen externen Container hier haben, wo dieses Hintergrundbild angewendet wird, und dann haben wir eine interne enthält eine für unsere Einführung und dann den kleinen Pfeil, der nur darunter sitzt. Werfen wir einen Blick darauf, wie wir die Hass-E-Mail dafür schreiben würden. Ich habe es für Sie geschrieben, nur für die Zeit satt. Also gehen wir durch etwas, das dem Kopf sehr ähnlich ist. Wir haben das Äußere bis zur Navigation. Entschuldigung, wir haben das äußere Div, das wir den Tüchern Kopf gegeben haben. Dann haben wir den internen Container, um zu verhindern, dass sich der Inhalt zu weit und dann innerhalb des Containers ausbreitet . Wir haben, äh, für unseren Kopf des Textes getan, mit unserem kleinen Text darin und dann unter dem auf der gleichen Ebene. Wir haben unseren Pfeil. Also, wenn wir das sagen, werde ich in unsere Arbeitsdateien gehen, nur um zu überprüfen. Da ist es. Also lasst uns aufhören, das zu stylen. Das erste, was wir tun wollen, ist, den Hintergrund für die mit dem Leiter der Sektion zu setzen , so dass wir einfach sagen, Hintergrund und geben ihm den Weg, wo aus Bild zahlen wird. In diesem Fall gehen wir also aus der CSS-Datei und in den Bildbildordner. Also CSS, wenn Sie hier einen Blick haben, sitzt CSS innerhalb des Style-Ordners, so dass wir tatsächlich auf die gleiche Ebene von Stilen und Bildern Ordner springen und dann wieder nach unten springen wollen . Also wieder ein Level zu gehen, ist das, was dieser kleine Punktpunkt hier tut. Also springen Sie aus diesem Ordner und dann zurück in Bilder, um den Arbeitsbereich zu finden. Habe J peg. Also werde ich nur ein paar weitere Stile anwenden. Also haben wir die Hintergrundgrößenabdeckung, so dass sie immer die Breite und die Höhe vom Header abdeckt . Wir haben die Position Mitte, so dass das Bild immer zentriert ist. Wir stellen die Höhe in diesem Fall auf 80 Vieux-Port-Höhe ein, also 80% auf die Höhe des View-Ports oder was auch immer Sie verwenden, um Ihre Website zu sehen. Es wird 80% von dieser Höhe haben. Also werden wir das speichern und einen kurzen Blick werfen, den sie betrachten. Wir können unser Bild auf seinem Sitzen bei etwa 80% von der Höhe aus dem Bildschirm sehen. Also im nächsten Schritt wollen wir diesen kleinen Container, in dem wir unseren Kopf des Textes haben . Dann machen wir Hedda. Und dann hatte Target einen Text, sitzt aber im Kopf auf Andi. Ich werde nur einen Hintergrund mit einem RGB-A-Wert machen. Das ist eine andere Möglichkeit, dass Sie eine Farbe in CSS definieren können. Und dann zeigt die 111 an, dass dies schwarz sein sollte, und dann ist der Norden 0,8 am Ende der ein Wert, der vorgibt, was die Deckkraft sein sollte. Also keine 0,8 80% äh, Kapazität, wir haben die Farbe des Textes, sagte Toe White auf. Wir werden diesen kleinen Abschnitt zu einem Block-Level-Elemente machen, so dass wir eine maximale Höhe und einen maximalen Witz einstellen können , um zu verhindern, dass es zu viel mit dem Inhalt expandiert. Wir haben Marge, Null Auto, so dass es in der Mitte sitzt und dann ein wenig klopfend, so dass es etwas Platz um den Text herum gibt und der Text nicht bis zum Rand des Containers geht. Also werde ich das auf frisch sie gehen speichern. Das sieht ziemlich ähnlich wie unser Design aus. Also jetzt, um es vertikal sitzen zu lassen, müssen wir eine Eigenschaft namens Position Now verwenden. Die Position ist ein wenig kompliziert, daher werde ich Ihnen hier einen Link zu dieser MDM-Seite zur Verfügung stellen, die Ihnen eine gute Erklärung von der Position gibt. Eigenschaft. Jetzt ist dieser Entwickler Punkt Mozilla Dot Orgs MDM Was Web docks. Dies hat alles, was Sie über Haiti Menge und CSS wissen müssen, so dass Sie einfach die Suchleiste verwenden können , um nach jeder Eigenschaft zu suchen, die Sie benötigen. Also in diesem Fall verwenden wir die Position Eigenschaft, und Sie können hier sehen, dass dies Ihnen Beispiele dafür gibt, was jeder tut, in diesem Beispiel werden wir absolute und relative verwenden, so als Erklärung. Wenn ich darauf klicke, können Sie sehen, dass, wenn ich dies auf Null ändere, es wieder nach oben geht. Dies positioniert also diese gelbe Box relativ zu ihrem Behälter, hier die kleine Tochterbox ist. Also, wenn ich egal was, habe ich das geändert, um es relativ zu dieser Box zu tun. Während dieses Beispiel Hier ist es sehen, wie der blaue Kasten von hier über bewegt, um sich zu überlappen , wo dieser gelbe Kasten zuvor waas. Das liegt daran, dass Absolute diese Box aus dem normalen Fluss von hey html genommen hat und sie in Bezug auf diesen Container positioniert hat , der wie der Körper unserer Webseite wäre. Also, wenn ich Top Null sage, wird es nach oben gehen. Also, wie gilt das für Allah Little Container hier? Wir wollen, dass das in der Mitte sitzt, aber wir wollen nicht, dass es bis zur Navigation fliegt. Also ist es ein kleiner Trick, den Sie tun können, also werden wir Position verwenden, absolut, um sie zu zentrieren, was Sie tun würden, indem die Position absolute Eigenschaft haben, die ich einfach auskommentieren werde. Nun, diese für eine Sekunde aus und werden sagen, dass, um Ihnen zu zeigen, dass die Position absolut es den ganzen Weg hier rauf wirft , nimmt es aus dem normalen Fluss, wir jetzt nicht wollen, Weg, dass wir das beheben können, ist, indem wir oben Ebene in den Kopf und tatsächlich Einstellung des Kopfes als Position relativ. Und das wird das Kind davon abhalten, vom Kopf des Containers nach draußen zu gehen. Also, da gehst du. Nun, um es sitzen vertikal zentriert und horizontal zentriert. Wir machen die Position unten links, rechts und reden alle Null, so dass es zieht es in alle Richtungen. Also, wenn ich sage, dass es in alle Richtungen gezogen wird und landet in der Mitte der Seite sitzen , genau wie wir wollen. Das sieht also ziemlich gut aus, außer dass ich Entwickler falsch geschrieben habe, also gut, repariere diesen Devel-Entwickler. Okay, jetzt wollen wir auf unseren Pfeil aufpassen. Also das erste, was wir tun werden, ist Bilder zu gehen und Pfeiltür spg zu bekommen, die ich für Sie bereitgestellt habe , die Sie einfach markieren und in Ihre Indexdatei kopieren können. Ein SPG ist ein Dateiformat für vier Bilder, also kopieren wir das einfach in Andi. Wir speichern das und testen, ob es da reingegangen ist. Es iss sieht schön aus jetzt, um es in der Mitte sitzen zu bekommen, wir werden Stil. Ich hatte, äh hoops, sagen wir, Kopf an und dann hatte, äh, Avera, die wir auf dem Weg Arrow haben. Und dann werden wir das speichern und sagen Position absolut unten. Nehmen wir an, 40 Pixel von unten. Das wird es also am Boden des Behälters sitzen und dann in der Mitte sitzen lassen . Wir gehen eigentlich Teoh, gehen wieder zu unserem Kopf. Ein Container auf. Wir werden Text ausrichten Mitte setzen. Dies ist ein Hack, den Sie auf Bilder in Containern verwenden könnten, die Sie gehen und jetzt sitzen in der Mitte und dann gehen Sie den oberen Teil unserer Webseiten bereits getan. Nun, ich würde gerne Ihre Arbeit in Arbeit in der Projektabschnitt unter diesem Video sehen, so stellen Sie sicher, dass Sie ein Projekt erstellen und diese Sitze Screenshots von dem, was Sie bisher getan haben, senden . Ich würde gerne sehen, wie Sie es anpassen. Hergestellt mit Ihrem eigenen Logo. Ihr eigener Einleitungstext Ihr eigener Kopf des Bildes, was auch immer Sie wollen, ist der Kopf auf die Projekte. Und tatsächlich halten Sie es durchgehend auf dem neuesten Stand. Dieser Kurs ist, dass jeder sehen kann, woran du arbeitest. Und natürlich, dass Sie irgendwelche Fragen haben. Stellen Sie sicher, dass Sie sich an die Community wenden. 6. Kurseinheit 4: Das Kurseinheit: Ah, Header Navigation sehen so toll aus. Nun gehen wir zum Portfoliobereich unserer Website über. Hier werden wir die Arbeit zeigen, die wir getan haben, die Web-Entwicklungsprojekte sein könnten . Es könnte deine Fotografie sein. Es könnte Kochkurse sein. Was immer du willst. Du könntest es dir eigen machen. Werfen wir einen Blick auf unser Zielprojekt, damit wir sehen können, worauf wir hinarbeiten werden . Das ist der Abschnitt, an dem wir jetzt arbeiten. Wir werden unsere vier kleinen Kacheln für jedes unserer Projekte haben, mit einer Ernte acht mit einer Beschreibung darüber, was das Geschäft ist und was wir für das Projekt getan haben. Nun, wenn wir es wieder in Bezug auf das Netz nachdenken, werden wir unseren externen Rapper unseren Container haben, um zu verhindern, dass er so weit dran wird. Dann werden wir auch einen Sub-Container haben, der es in 50% Breite für jede der Kacheln aufteilen wird. Aber wie Sie sehen können, war die Kachel selbst nicht 50% breit, daher werden wir auch einen weiteren kleinen Dave innerhalb dieses Containers haben, um die feste Breite einzustellen , also gehen wir jetzt durch den HTML-Code. Also lassen Sie uns in unsere HTML-Datei gehen. Ondas üblich. Wir haben einen Rapper und ich werde Container und dann werde ich nur einen Sub-Container, kalten Item-Container, Kurzschrift-Container, rechts, aktiv und in diesem Container erstellen kalten Item-Container, Kurzschrift-Container, rechts, . Ich werde nur Herbst für jetzt schreiben und vier davon erschaffen, damit wir sehen können, wie es angelegt wird. Also gehen wir in ein CSS und lassen Sie uns Let's Go Portfolio setzen. Lassen Sie uns Portfolio ein wenig Padding geben, so dass wir ein wenig Platz von den Headern haben. Nehmen wir an, 40 Pixel unterste Null auf der Seite zu stoppen, weil wir unseren Container dazu haben , und dann einen weiteren Level-Down-Portfolio-Item-Container. Nehmen wir also an, lassen Sie uns sagen, dass auch 40 Pixel auffüllen. Aber dann werden wir die Breite so einstellen, dass 49,7% und Sie werden sehen, warum ich das in einem Moment getan habe , denn wenn Sie Anzeige in Linienblock-Elemente nebeneinander sitzen, sitzen sie nicht tatsächlich 50 50. Es ist ein bisschen Platz dazwischen. Setze einfach einen Rand darauf, damit wir die Kanten sehen können. Werfen wir einen Blick in unsere Arbeitsdateien. Hat nicht funktioniert, weil ich Dinkel legte Torheit ich falsch. Gut auf Mai Port Folio Schließen Sie diese und haben einen anderen Blick. Los geht's. Damit Sie sehen können, ist dies unser Raster. Wie werden wir unsere Artikel einrichten lassen? Ich denke, ich werde das tatsächlich in einen Rand ändern, so dass wir Platz auf der Außenseite haben, anstatt der Innenseite. Da gehst du. Da ist ein bisschen Platz. Also Aber wie ich sagte, sind krank Portfolio-Artikel ist nicht eigentlich 50% Witz. Es wird Breite und Höhe fixiert. Wenn wir nach unten gehen eine andere Ebene zu Portfolio Isom-Container und dann sagen wir, Portfolio-Auktion wird die steife erstellen. Jetzt sagen Sie, dass innerhalb unseres Artikels Container Div Dave Klasse Portfolio Artikel auf bleiben wird. Ich werde Text innerhalb dieses und dann werden wir unsere mit 2 450 Pixel und alle Höhe auf 450 Pixel setzen . Und lassen Sie uns auch einen Hintergrund setzen, damit wir sehen können, wo es enden wird. Ich werde, äh auf ein P I von Splash Dot com verwenden . On splash ist eine Website, auf der Sie wirklich hochwertige Bilder erhalten können, die Sie auf Ihrer Website kostenlos verwenden können . Ich werde einen Link zur Website in der Beschreibung hinterlassen. Sagen wir das einfach und schauen Sie uns an. Schön. Okay, also lass uns ein paar Stile festlegen. Bringt Hintergründe, dass es sitzt Becher der Größe und in der Mitte. Dann wollen wir auch, dass dieser Portfolioartikel in der Mitte unseres Containers sitzt. Also, sagen wir, Hintergrund Hintergrund Hintergrund Größe Abdeckung Hintergrund Position Mitte. Nun, ich kann heute nicht tippen Sie gehen, und wir wollen auch unsere feste Breite und Höhe Portfolio Artikel in der Mitte. Also sagen wir Null auch du gehst, das sieht besser aus. Also lasst uns jetzt anfangen, unsere Beschreibung zu stylen. Alle Portfolio Adam Beschreibung. Also wollen wir zuerst irgendwie HTML dafür aufstellen. Beginnen wir also mit diff mit der Klasse. Aber voll und ganz ich Beschreibung. Und dann innerhalb davon werden wir einen Text haben, der in einem Tag eingewickelt ist, so dass ich verwenden würde, um zu den Projekten zu klicken , die Sie sagen. Und dann werde ich nur Absatz-Tags verwenden, um zu sagen, wie der Name des Projekts ist, und eine kleine Beschreibung über die Arbeit, die wir an dem Projekt gemacht haben. Dieses Projekt heißt also Harries Pizza auf für dieses Projekt. Wir haben das Webdesign und die Entwicklung gemacht, also werde ich die anderen drei nur für die Zeit kopieren. Da gehen wir. Also haben wir Joe's Bakery, Pams Floristen, auf Olivias Fotografie. Es ist nur überprüfen, ob das alles durchläuft. Ja, cool. Das sieht gut aus. Also jetzt wollen wir einen schwarzen Hintergrund setzen und diesen Text stylen. Also lassen Sie uns sagen, Folio, einer dieser Tage, Ich werde es richtig buchstabieren, aber Ausfall Element enthalten auf, Nehmen wir an, Portfolio-Beschreibung. Sie werden also den Hintergrund mit RGB wieder einschalten. Wir werden es auf schwarz mit 80% Kapazität einstellen. Wir wollen die Farbe von der Verbindung. Wir müssen noch eine Schicht auf die Länge gehen. Wir wollen, dass die Farbe das ist, was Onda wir haben wollten , sagen 20 Pixel oben und unten und 10 Pixel links und rechts abfüllen. Eigentlich machen wir es umgekehrt um 10 Pixel. Stilton unten 20 Pixel links und rechts, es ist aktualisieren gehen. Also wollen wir nur das zugrunde liegende schnell loswerden. Was ist los von der Underline Ex-Dekoration? Keiner. Okay, jetzt wollen wir Hover-Effekte erstellen. Also wollen wir, dass diese Beschreibung den ganzen Weg hier unten unter Al Container sitzt. Also werden wir die Position Absolute dafür verwenden, genau wie wir es vorher getan haben. Wir müssen Position relativ auf den Artikelcontainer setzen. Also schreiben wir das hier oben. Positionieren Sie Verwandte so, dass alle, aber vollständig Artikel unsere Beschreibung Portfolio-Beschreibung wird nicht auslaufen und gehen den ganzen Weg bis zum Anfang der Seite. Sagen wir unten. Wir wollten eigentlich unter dem Boden des Containers sitzen. Also sagen wir minus 130, nur um cool zu sehen. Das ist ein bisschen zu weit nach unten, also sagen wir 110 und setzen die Breite auf 100%, damit es kühl bleibt. Peitsche sieht so aus, dass die Breite zu weit ausgegangen ist. Und der Grund ist, weil ich die Position relativ hier oben auf Artikelcontainer durch Zufall gesetzt habe, die es eigentlich auf den Portfolioelementen haben sollte. So wird 100% für die Portfoliobeschreibung tatsächlich auf 50% der Seite gesetzt. Das wird es eine Ebene nach unten bewegen. Wir legen es hier runter. Und das sollte unser Problem beheben. Ja. Gut. Okay, jetzt lasst uns die Ernte machen. Acht. Was wir also erreichen wollen, ist, wenn wir den Mauszeiger auf das Portfolioelement bewegen, sollten die Portfoliobeschreibungen ein Interview nach oben bewegen. Also sagen wir, geh hier runter und wir werden es richtig machen. Portfolio-Beschreibung, was? Also auf Hover wenden Sie diesen Stil an, um eine vollständigere Beschreibung zu setzen. Um die Seite nach oben zu bewegen, verwenden wir eine Marionette. Er nannte ah, Trend-Transformation, die viele verschiedene Werte hat, einschließlich Rotationsskala, Perspektive. Wir werden übersetzen verwenden, Verschiebungen übersetzen, bewegt Ihr Element um eine X- und eine Y-Achse. Also in diesem Fall gehen wir nach oben und unten die Y-Achse, und wir wollten minus 110 Pixel bewegen. Ich denke, sollte gut sein. Also, was für ein Set? Lassen Sie uns so auf Hafen erfrischen. Okay, vielleicht keine Hoffnungen. Tun Sie es nochmal für ihren Aisam. Frischer, geht er, damit das jetzt im Interview springt. Wir wollen eigentlich nicht sichtbar sein, wenn es nicht über den Mauszeiger bewegt wird. Also auf Portfolioartikel hier oben, werden wir Overflow Hidden schreiben, was bedeutet, dass alles, was außerhalb dieses Containers verschüttet wird, frisch versteckt wird . Da gehst du. Es ist weg und es scheint schön zu sein. Jetzt ist es ein bisschen schuldig, so ein- und auszuschalten. Also lassen Sie uns einen Übergang darauf setzen, so dass Ah, Schwebeeffekt ein wenig glatter ist. Ups werden den Übergang sagen. Ich wollte mich bewerben, um zu übersetzen. Ich wollte keine 0,4 Sekunden dauern, um zu vervollständigen, und wir werden die Wirkung zu nutzen und zu erleichtern, die ich werde. Dies wird passieren, wenn es in Sicht kommt, aber wir wollten auch auftreten, wenn es aus Ihnen geht. Also lassen Sie es uns auch auf die normale Portfoliobeschreibung setzen. Was frisch ist eigentlich wollen, dass dies transformiert wird, weil das der Name Transform ist. Sehen Sie, Entwicklung ist Bulle über Fehler und Problemlösung. Okay, das gilt also auf dem Weg nach draußen. Nein, auf dem Weg rein. Und das liegt daran, dass wir uns nicht verändert haben. Los geht's. Das sieht viel besser aus. Okay, also lasst uns die Grenze von unseren Containern nehmen Wir brauchen das nicht mehr, und wir wollen es so einrichten, dass wir für jedes unserer Projekte ein anderes Bild für jede Kachel haben können . Also lasst uns gehen und die Grenze finden. Da ist es. Das werden wir loswerden. Und hier auf Portfolioelemente, in denen wir den Hintergrund setzen, werden wir einige spezifische Ursachen schreiben, aber jede über Unternehmen. Also zuerst, lassen Sie uns in HTML gehen und tatsächlich diese Klassen auf dem Portfolioelement setzen. Def. Sagen wir Pizza. Harry's Bäckerei für Stiefel Bäckerei für Jurors Bäckerei, uh, Floristen, Pams Floristen auf und, natürlich, Foto. Will Olivias Fotografie. Ich werde diese Klassen nur um der Geschwindigkeit willen kopieren. Jetzt werden Sie auf der Blattgegenstandsebene bemerken. Es gibt keinen Platz dazwischen, wie spezifische Klauseln. Und das liegt daran, dass wir das nicht wollen. Wir wollen nicht auf eine andere Ebene gehen. Wir möchten auf Portfoliopositionen bleiben, aber wir möchten nur den Portfolioartikel auswählen, der diesen spezifischen Kloss hat. Sagen wir das und lassen Sie uns überprüfen. Es hat gut funktioniert. Es funktionierte die drei von vier, also ist das wahrscheinlich noch eine andere Art von Mai. So sieht Bäckerei ist auf dem falschen Niveau. Deswegen haben wir einen doppelten Whammy, wo uns ein Leerzeichen fehlt. Also, das war das falsche Ziel. Sie gehen, das ist alles. Bäckerei Bild. Das ist genauso frustrierend. Das ist Web-Entwicklung. Die meisten Ihrer Probleme werden kommen. Die meisten Ihrer Probleme werden von dummen Tippfehlern und dummen Fehlern kommen. Also stellen Sie sicher, dass Sie mit einem feinen Zahnkamm durchmachen, bevor Sie aufgeben und sagen: Oh, Oh, das ist alles zu schwer, denn, wie wir heute gesehen haben, habe ich nur einen dieser Tage, an denen ich einfach nichts buchstabieren kann auf den Preis ist richtig. Und manchmal werden Sie einfach Tage wie diese haben, genau wie Mai. Was passiert mit den Besten von uns? Okay, damit das ziemlich gut aussieht. Ich denke, wir sind ziemlich fertig. Sie denken vielleicht, Was ist mit Mobile House wird auf einem Handy oder einem Tablet-Gerät arbeiten? Betonen Sie nicht zu viel. Wir werden eine spezielle Lektion gegen Ende dieses Kurses haben, wo wir in Medienanfragen und Mission außerhalb ansprechbar kommen werden. Ich möchte Sie einfach nicht schon früh in diesem Kurs mit zu vielen verschiedenen Informationen überwältigen . Aber ich meine, wir sind auf halbem Weg fertig. Wir haben nur diesen Abschnitt Kontakt Abschnitt verlassen zu gehen. Also lasst uns weiter vorwärts gehen. Und, natürlich, stellen Sie sicher, dass Sie unten irgendwelche Fragen stellen. 7. Kurseinheit 5: Über: wir auch in der Nähe der Fertigstellung eines Projekts Super gute Arbeit. Wenn Sie immer noch hier mit mir arbeiten, sollten die letzten paar Abschnitte wirklich mit all Ihren neuen Hash-E-Mails und CSS-Fähigkeiten geschmort sein, die Sie während dieses Kurses erhalten. Aber wenn Sie fest sind, stellen Sie sicher, dass Sie sich an die Community wenden und Ihr Projekt aktualisieren. Zeig uns, woran du gearbeitet hast. Also für den Abschnitt über, hier werden wir alle Geschichte ein wenig erzählen und zeigen, wer wir alle. Also haben wir ein zweispaltiges Layout ohne Bild auf der linken Seite und etwas Text auf der rechten Seite. Und so, wissen Sie, schlug Shia Mel, wir werden anfangen mit ah, Standard Rapa Kloss, mit dem Reparativ mit dem über Kloss, unserem Container, um alles eingeschlossen zu halten. Und dann werden wir zwei gibt erstellen, um alle Spalten zu trennen. So wird die 1. 1 Profilbildcontainer genannt. Da wird unser kleines Bild von unseren Gesichtern hingehen, Andi. Dann darunter wir ein Tun für den Profil-Text-Container haben. Sie haben dies in Ah getan, Bildcontainer Wir werden ein Bild-Tag einschließen, genau wie wir zuvor mit einem alten Tag besagt, dass dies ah, Profilbild ist . Ja, und dann die Quelle. Weil wir in der Indexdatei sind, genau wie zuvor. Wir werden Bilder weitermachen. Dann, wenn wir in Bilder kochen, können wir sehen, dass wir Profil haben. P und J ersetzten dies absolut durch ein Bild Ihres eigenen Gesichts. Äh, ich werde sagen, dass wir in unserem Textcontainer Überschrift mit dem Titel des Abschnitts schreiben werden. Aber natürlich können Sie alles, was Ihnen fehlt, hier setzen und dann werde ich ein bisschen von Laura MSM haben , was ich kopieren werde, und jetzt wird das nur den Platz für uns für den Moment füllen. Also lassen Sie uns einen Blick auf eine Arbeitsdateien werfen. Aktualisieren Sie die Seite. Die Betrachtung als unser Abschnittsbereich auf dem Bild ist nicht ganz geladen, und wahrscheinlich lassen Sie uns einen Blick darauf werfen, was hier vor sich geht. Also, wo in der Indexdatei wollen wir in Bilder gehen und dann habe ich Profil, nicht PNG. Schauen wir uns mal nach, aber unser Logo ist es das gleiche, äh, Vermögenswerte. Ich habe vergessen, in den Ordner „Assets“ zu gehen. Siehst du, ich mache das schon lange, und ich mache immer noch diese sechs. Okay, das sollte es beheben. Schauen wir uns mal an. Frisch ist das Gesicht. Okay, das erste, was wir tun werden, ist, dass wir unseren Inhalt in die beiden Spalten trennen , also gehen wir in eine CSS-Datei und wir werden Bildcontainer auf dem Textcontainer abzielen. Also lasst uns gehen. Ich habe gerade einen Abschnitt für unsere über Stile erstellt. Lass uns gehen, ich werde da drin klopfen und klopfen. Also gehen wir Abstand von ah, verlorener Abschnitt undi Auch eine Hintergrundfarbe, die wieder ein Hex-Wert sein wird. Du gehst. Und dann lassen Sie uns das Ziel Profilbild Container. Wir wollen, dass die Breite davon schacht ist. Das ist ein 30% wollte Schacht Anzeige im Linienblock. Ich werde nur eine Grenze um sie herum legen, damit wir sehen können, wo sie für die Minute endet. Genau wie immer an. Und denken Sie daran, dass unser Bild oft aus der Seite des Containers herausragen wird, wenn wir nicht wirklich eingeschränkt sind. Also werde ich ein Profilbild erstellen, das wir für unsere Imagesteuer verwenden werden, nur dass hier drin für abscheuliche Bilderrahmen, auf denen wir sparen. Ich werde das Maximum mit diesem Bild machen, als es 250 Pixel sind. Aber wenn der Bildschirm kleiner als George ist und 50 Pixel wollen, dass er den Raum auffüllt, sagen wir, 100% Okay, schauen wir uns mal an. Jetzt natürlich. Wir möchten auch die Textspalte ansprechen. Also lassen Sie uns sagen, lila Textcontainer. Wir wollen, dass das den Rest des Raumes beansprucht. Also lassen Sie uns diese 39% tatsächlich machen, so dass es fast 60 40 sind. Erinnern Sie sich, dass die Anzeige in Zeile Block ein wenig zusätzlichen Platz zwischen den beiden Containern benötigt , und wir werden beide in Zeilenblockelementen in Zeilenblock auf diesem einen machen. Kleben Sie eine Grenze auf diese, damit wir sie sehen können. Okay, schauen wir uns mal an, wie das cool aussieht. Das sieht ziemlich gut aus. Okay, jetzt, diese Bilder blockieren den Text aus irgendeinem Grund. Schnelle Lösung dafür ist, in unseren Textcontainer zu gehen, und wir werden nur Float rechts anwenden, was es aus der üblichen Reihenfolge nehmen wird und es wird es bis an die Spitze schieben, die Sie jetzt gehen, in unserem fertig Projekte, dieses Bild ist rund und es sitzt mehr nach rechts. Um das zu erreichen, gehen wir zu einer Profilbildklasse und schreiben Border Radius. Wir geben dem einen Wert von 50% im Container des Bildes. Wir werden den ganzen Text allein verwenden, oder? Es funktioniert auch auf Bildern. Sie gehen jetzt, Bilder sitzen auf der rechten Seite. Ich denke, wie Power Golf Tag ein wenig zu breit aussieht, obwohl ich ein wenig zu nah am Bild bin. Also werde ich eine maximale Peitsche auf den Absatz setzen, und ich werde auch ein bisschen Polsterung auf dieser Seite setzen. Also sagen wir, äh, äh, Überschrift, Überschrift links die 40 Pixel auf dem Container, dann innerhalb des Containers. Sir. 12 Datei. Ups, Gro File Textcontainer. Das P-Tag, werde ich sagen, und die maximale Breite von 500 Pixeln Pinsel, die besser aussieht. Okay, lasst uns diese Grenzen loswerden und dann denken, dass es erledigt ist. Speichern Sie, es wird raus. Lassen Sie uns es einfach schnell mit unserem fertigen Projekt vergleichen, das am 2. Mai ziemlich knall aussieht. Also lassen Sie uns zu ah verlorenen Abschnitt gehen, die der Kontaktabschnitt ist, und wir haben so nah daran, getan zu werden, Lasst uns weitermachen. 8. Kurseinheit 6: Kontakt: wir sind auf dem verlorenen Abschnitt. Verdammt, ja. Nun, dieser Abschnitt meine ich, sieh es dir an. Verglichen mit allem anderen, was du bisher gebaut hast, wird das eine Klammer sein. Also lasst uns einfach reingehen. Also fangen wir damit an. Ah, üblich. Wir werden eine Überschrift darauf setzen, damit du einen Gruß setzen kannst, was immer du willst. Ich bleibe nur Kontakt da drin ein bisschen Absatz, damit wir sagen können Ok , Ho, Ho, komm und rede mit May. Ich werde nur etwas Laura ipsum in das Who schieben, und darunter werden wir ein Reh haben, das all unsere sozialen Symbole enthält. Ich werde hier ein bisschen betrügen, und ich werde dich dazu bringen, in die fertigen Projektakten zu gehen. Ich werde hier ein bisschen betrügen, Wir gehen in unser fertiges Projekt und klicken auf Index, und wir werden unseren Weg runter zu sozialen Symbolen scrollen. Diese sind voll von den SPG es, die Sie für Ihre sozialen Symbole verwenden werden, und sie sind nur in einen Link eingewickelt, der Ihre sozialen Griffe hat. So können Sie diese durch eigene Links ersetzen. Also lasst uns einfach runtergehen und kopieren. Ich werde einige Links in Ihr Projekt einfügen, wo Sie soziale Symbole und nur allgemeine spg es finden können , die Sie in Ihren Projekten verwenden können, weil Sie wirklich vorsichtig mit dem Urheberrecht sein müssen . Sie wollen nicht am Ende in Schwierigkeiten für die Verwendung von sozialen Symbolen, die Sie nicht erlaubt sind. Also habe ich meine wenn für soziale Symbole. Wir haben einen Link mit einem Link zum Profil. Wir haben eine Klasse für soziale Symbole auf dem Ziel mit einem Unterschul-Rohling. Nun, das wird nur bedeuten, wenn du auf deinen Link klickst, wird er in einem neuen Tab geöffnet, anstatt in dem oben, in dem du bist. Nehmen wir an, dass in eine Arbeitsdatei gehen und aktualisieren, da unser Kontakt ziemlich gut aussieht. Wir wollen so ziemlich einfach nur das alte zentrieren. Wir wollen Zeh, reduzieren die Breite ein wenig auf, haben ein Durcheinander mit diesen Symbolen, sehen, ob wir diese kleine schwarze Linie hier loswerden können. Okay, also gehen wir zu unserem CSS erstellen Sie einen neuen Abschnitt Kontakte auf. Wir beginnen mit dem Hinzufügen einiger Streicheln als Möglichkeiten, um es von den oben genannten zu trennen, wird sagen, 80 Pixel Null Genau wie zuvor. Es gibt keinen Hintergrund oder irgendetwas darüber. Also gehen wir hinunter in Well, lassen Sie uns bewerben. Eigentlich wissen Sie, dass, aber liefern Text ausrichten erscheinen dauert lang cente. Wir wollen tatsächlich in der Lage sein, die Breite davon zu reduzieren. Also werde ich hier hinzufügen, um unseren Text zu umschließen. Ich werde noch einen hinzufügen. Ich werde tatsächlich ein anderes div mit dem Klassenkontakt-Text-Container hinzufügen, das Looks eliminiert. Da gehst du. Schließ das einfach ab und kopiere unten nach unten, Leute. Was ist mit meiner Rechtschreibung heute? Kannst du den Fehler sehen? Geprüft? Was? Was ist los mit mir? Okay, also mit Kontakt-Textcontainerwerden wir, werden wir, ähm, den maximalen Wind reduzieren. Also lassen Sie uns Auto, dass in hier Taktik Container eine maximale Breite von 700 Pixel sagen wird. Wir werden Ma jin sagen, also wissen Sie auch gesagt, dass es in der Mitte sitzt, also lassen Sie uns einen kurzen Blick darauf werfen, wie das aussieht. Alles klar, das sieht ziemlich gut aus. Richtig? Werfen wir einen Blick darauf, was diese kleinen Linien verursacht. Lassen Sie uns in unsere Dev-Tools gehen, die auf spg klicken. Siehst du, was es ist? Was haben wir ohne Tags den ganzen Weg durch Textdekoration gemacht? Keiner. Weil wir einen Tag haben, der um rs PGS umwickelt. Also, wenn wir das auf alle acht Tags in sozialen, äh, äh, ich betrüge uns sagen, Hey, Hey, wir werden Textdekoration sagen, keine, die weggehen sollte, und wir gehen schön. Lassen Sie uns jedoch ein wenig Abstand zwischen diesen SPJ setzen , weil ich in ein wenig eng den Moment schaue. Also, um das zu tun, werde ich soziale Symbole machen. Aber ich werde nur die soziale, diese einzigartige soziale Ikone anvisieren , und ich werde eine Marge absetzen. Es sind 10 Pixel auf beiden Seiten. Entschuldigung. Lassen Sie uns Null auf der Oberseite der unteren 10 Pixel auf. Sie entscheiden und aktualisieren. Los geht's. Vergleichen wir es. Teoh hat das Projekt abgeschlossen. Vielleicht brauchen wir ein wenig Abstand oben auf den sozialen Symbolen, aber das war's. Also lasst uns gehen. Symbole für soziale Netzwerke. Lass uns ein bisschen Whoops setzen. Es ist ein bisschen, ähm, AJ in, sagen wir, 20 Pixel Rand oben unten und speichern Sie das heraus, ich denke ein bisschen mehr. Sagen wir, 40 20 ist besser. Ja, Cool. Leute, wir haben eine Webseite gemacht. Wie gut fühlt sich das an? Ja, 9. Kurseinheit 7 – Teil 1: Lass unsere Website anspringen:: jetzt das letzte, was das allerletzte, was wir gehen, um auf dieser Website zu behandeln, ist führen über Medienabfragen und wie Sie Ihre Website reagieren auf gut aussehen auf. Alle verschiedenen Arten von Geräten wurden auch nur ein wenig Code Cleanup tun, um sicherzustellen, dass das nächste Mal, wenn Sie auf dieser Website oder einer anderen Entwicklung arbeiten, ständige Arbeiten auf dieser Website. Es sieht gut aus. Es ist sauber. Es ist leicht zu verstehen. Also lasst uns zuerst einen Blick in die Kriminalentwickler-Tools auf „Wir gehen Teoh“ werfen. Verwenden Sie die Ziehbewegung, die Sie zugreifen können, indem Sie Ihr Gespräch entweder links oder rechts einstellen. Sie werden sehen, dass, wenn Sie nach links oder rechts scrollen, Sie erhalten ein wenig Pixel, ein kleines Feld, das das Pixelverhältnis von Ihrer Website sagt. Jetzt ist eine Medienabfrage eine Möglichkeit, mit der Sie dem Browser mitteilen können, welche Stile Sie an welchem Bruchpunkt laden möchten ? Ah, Breakpoint ist ein Wort, ganz buchstäblich, um zu beschreiben, wo Sie entworfen sind, Pausen. Also, wenn ich ah reduzieren, brechen Punkt nach unten, was wäre rund um eine Tablet-Größe, Sie können sehen, dass ich Folio-Abschnitt setzen. Das Design bricht, weil unsere Bilder eine feste Breite und Höhen von 450 Pixel haben, aber das ist größer als die Breite unseres Gerätes. Also beginnen sie sich zu überlappen. Dies ist also ein perfekter Ort, wo wir einen Bruchpunkt oder in Medienabfrage erstellen würden um dem Browser zu beschreiben, dass wir dem Browser nicht beschreiben, dass wir nicht wollen, dass es so sitzt. Wir wollen tatsächlich einige verschiedene Stile anwenden. Jetzt. Ich bin sicher, dass Sie wissen, dass in diesen Tagen die Mehrheit der Benutzer Zugriff auf Ah, das Internet über mobile Geräte. Also müssen wir sicherstellen, dass unsere Stile auf einem mobilen ersten Weg geschrieben werden. Die Art und Weise, wie wir dies tun werden, ist, dass wir bereits alle unsere Stile haben, die wir geschrieben haben , und wir haben dies tatsächlich auf einer Desktop-Größe erstellt. Wir gehen also davon aus, dass alle diese Stile auf Mobilgeräten funktionieren, und wenn sie dies nicht tun, werden wir Anpassungen vornehmen, damit sie zuerst auf Mobile arbeiten und dann ganz unten im Abschnitt werden wir erstellen und Medienabfrage für Bildschirm ein und sagen wir Minimum mit off 768 Pixeln, was ungefähr ein iPad im Hochformat wäre. Also alles, was wir nicht auf meinem Ball passieren wollen, werden wir hier hinlegen. Nehmen wir also für ein Beispiel an, dass wir wollen, dass der Hintergrund es so angibt, wie er auf Mobilgeräten ist. Also wollten wir lila sein, aber wir wollen tatsächlich, dass der Navigationshintergrund gelb ist. Also gehen wir zurück in die Arbeitsdateien und aktualisieren, und Sie sehen, dass die Navigation gelb wird, weil außerhalb hat einen Witz Gracia als alle Bruchpunkt. Aber wenn wir zu dem gehen, was wir die mobile Website oder ein kleineres Gerät nennen würden, geht es zurück zu violett, also wollen wir nicht wirklich, dass die Navigation gelb ist, also werden wir das loswerden. Aber wir wollen einige Änderungen vornehmen. Also lassen Sie uns auf das, was wäre ein ziemlich Standard, meine Kugel Art von Größe, Sagen wir 375 Pixel. Sie können sehen, dass das Logo auf den Navigationselementen nicht alle in derselben Zeile passen. Wenn wir also unser Logo in unseren Entwickler-Tools auswählen. So auf Navigation Logo, können wir ein Spiel haben und sehen, was wir mit diesem Logo tun können. Vielleicht machen Sie es klein aus. Mal sehen, ob das hilft zu sehen, dass es beginnt, sich in die nächste Zeile einzuhaken. Also denke ich, 1 50 sieht im Mai ziemlich gut aus, wird auch die Polsterung erhöhen, so dass es auf der gleichen Ebene wie die Navigationselemente sitzt. Also lassen Sie uns diese Stile über kopieren, und wir werden schießen gehen bis zu einem Navigationslogo. Unsere Regel über diese sind, was wir für den Desktop wollen. Also werden wir auf Lowball-Stile einfügen, und wir werden tatsächlich die Desktop-Stile ausschneiden und sie in eine Nachrichten jetzt Logo-Klasse hier unten setzen . Dies wird also auf alles angewendet, was größer ist als ein 768 Pixel breites Gerät. Also lasst uns erfrischen, und das sollte gleich bleiben. Aber als wir rauf, rauf, rauf, rauf, rauf den ganzen Weg zu 700 auf 68 sahen Sie? Es wird größer und kleiner um diesen Bruchpunkt Jetzt habe ich vor ein wenig ein Problem mit dieser Ära Ich denke, das Gesamtdesign des Kopfes funktioniert gut auf meinem Ball, aber diese Pfeile nicht wirklich perfekt in der Mitte sitzen. Also gehen wir zurück in alle Pfeil. Kloss. Andi, denken Sie daran, ich setze Text zentriert auf das Bild, oder es ist auf dem Kopf des Containers, aber es wirkt sich auf das Bild aus. Aber das funktioniert offensichtlich nicht. Also lassen Sie uns speichern und loswerden Text die Linie zentriert. Und wir werden tatsächlich die A-50% linke Regel verwenden, um sie ins Zentrum zu schicken. Aber das wird es tatsächlich ein bisschen zu weit schieben. Also gehen wir tatsächlich auf die Zehe. Verwenden Sie auch einen negativen Rand auf der linken Seite von 25 Pixel, um ihn zurück in die Mitte zu bringen. Also lasst uns das überprüfen. Das sieht in der Mitte viel besser aus. Okay. Jetzt sind Portfolioartikel. Ich meine, es sieht im Moment nicht so schlimm aus, oder? Aber wenn wir hier tatsächlich in unsere tauben Werkzeuge gehen, können Sie sehen, dass der Artikel Container immer noch fast 50% haben muss, aber unser Bild verschüttet aus ihm. Also Deckel sind Bilder, die aus ihm ausströmen, die wir offensichtlich nicht wollen, aber wir wollen auch nicht das Bild auf Geben Sie es ein mal, sagen wir, eine Breite von 100% enthalten mal, sagen wir , , weil es dann wirklich klein auf einem Handy -Gerät. Also, was wir eigentlich tun werden, ist, dass wir Teoh gehen, machen jeden der Artikel Container haben eine Breite von 100% auf einem mobilen Gerät. Gehen wir also in unseren Portfoliobereich. Andi, wir haben mit 49,7% über alte Browses im Moment, aber wir werden tatsächlich schneiden, dass aus und setzen Breite 100%. Also auf uns allen kleinen Geräten wird es 100% sein. Und dann unten, werden wir eine Medienabfrage Vollbild erstellen und Männer mit oh, passt Männer mit off 768 Pixel. Wir werden unsere Regel einstecken. Was war unser Klassenname, Portfolioartikel Container, ison Container. Und wir werden unsere Lodge Browses Größe mit ihnen, also schauen wir uns an, wie das aussieht. So Artikel Container ist jetzt breit genug, aber wenn wir auf unsere drei 3 75 Bruchpunkte gehen, ist es tatsächlich das Bild immer noch viel zu groß, so dass wir tatsächlich das Bild Maximum mit und heiß als auch reduzieren müssen. Also muss diese Höhe und Breite runter kommen. Nehmen wir also an, lassen Sie uns die Klasse finden, auf der wir unsere Höhe und Breite eingestellt haben. Wir haben voll Artikel Ausubel Kaffee dieses und wir gehen wieder runter. Und so ist unsere aktuelle Breite und Höhe für 50 wie erinnert. So setzen 50 Pixel Höhe für 50 Pixel. Aber auf uns allen kleinen Geräten machen wir es 250. Okay, du gehst. Das sieht viel besser aus. Zertifizieren, heben Sie meinen Bruchpunkt bis dahin, wo er in die größere Version einrastet. Also ich denke, wir wollen, dass du siehst, wie es an diesem Punkt hier immer noch überlappt. Also lassen Sie uns es tatsächlich aufteilen, weil wir mit etwas früher 100% reinschnappen wollen. Aber wir wollen eigentlich, dass es etwas später in Höhe und Breite reduziert wird, denn im Moment an diesem Bruchpunkt sieht das wirklich klein aus. Werfen wir einen Blick auf unseren Bruchpunkt. Ich denke also, für die Höhe und Breite wollten wir eigentlich bei etwa 950 Pixeln so viel höher brechen. Aber ich werde tatsächlich die Breite und die Höhe dieser Medienabfrage herausnehmen, und ich werde eine neue unten erstellen. Also bei niedriger, äh, Breite. Also werde ich sagen und Männer mit 550 Pixel. Und ich habe das da reingesteckt und mal sehen, ob das hilft. Ab 550 Pixeln möchten wir also, dass sich die Größe ändert. Und dann bewegen wir uns weiter nach oben, bewegen nach oben. Und dann wird es in 50% Peitsche bei 950 Pixeln einrasten. Also, wo sind wir jetzt? Wir sind um 650 so lassen Sie uns frisch, so dass wir sehen können, dass unser Bild ein guter Witz bis 5 50 ist , was ich denke, sieht ziemlich gut aus. Lasst uns nun überprüfen, wo unser Gitter in zwei Spalten rastet, also lasst uns weiter Amega gehen. Es rastet in zwei Spalten 10. Kurseinheit 7 – Teil 2: Lass unsere Website anspringen:: Nun, das Letzte, was ich im Portfolio machen möchte, ist eigentlich den ganzen Weg zurück nach unten bei Mobile. Kannst du sehen, wie ein kleiner Schwebeeffekt irgendwie den Boden herausstochen ist? Also werde ich nur das auf dem gleichen ändern wie alle hallo und alle mit. Ich werde diesen Boden einfach so einstellen, dass er etwas tiefer sitzt. Also lasst uns eine Kopie der Regel bekommen. Lassen Sie uns es sitzen 115 Pixel statt 110. Und dann innerhalb dieser Medienabfrage, setzen wir den Todesstopp zurück auf das, was er so unten minus 110 Pixel war. So sieht 115 nicht ziemlich langsam genug aus. Und wie wär's mit 100? Sagen wir 1 25, nur um sicher zu sein. Das wird es hier ausmachen 1 25 Okay, also jetzt sieht das ziemlich gut aus. Also lassen Sie uns zu etwa Abschnitt gehen und Sie können sehen, dass dies nur ein Durcheinander ist. Das ist nicht gut. Also wollen wir 100% Verstand auf unsere beiden Spalten setzen, und wir wollen alles schön und duftend bekommen. Also lasst uns das machen. Nun gehen wir in den Abschnitt über und wir haben unsere UIT auf Profilbildcontainer und auch den Textcontainer gesetzt . Lassen Sie uns also eine weitere Medienabfrage auf dem Medienbildschirm erstellen und Männer mit, sagen wir, 768 Pixel es ist auf. Wir werden unsere Klasse da reinbringen. Ich werde jetzt 100% sagen, weil wir den Bildcontainer und auch den Textinhalt beides wollen . Sei 100%. Sie können sie tatsächlich so ändern, indem Sie ein Koma setzen und dann die anderen Tücher auf die nächste Zeile setzen. Und wenn Sie diesen Gruppenkurs speichern, hat das nicht funktioniert, weil dies die Desktop-Stile sind. Also lasst uns diese Regel hier oben haben. Wir werden es diff schreiben. Okay, hier oben wollen wir nicht, dass sie sich ändern, also machen wir einfach 100%. Und dann, in unserer unmittelbaren Abfrage, anstatt sie zu verketten, werden wir sie tatsächlich wieder trennen, weil wir wollen, dass sie anders sind. Sagen wir also 39% wit, dass dieser auf und 100% wit für diesen. Es ist frisch. Cool. Nun, denken Sie daran, das sieht ein bisschen seltsam aus, weil unser Bild Text hat, rechts ausgerichtet ist und das ist schweben. Deshalb ragt es aus unserem Container heraus. Also lasst uns das ändern. Also wollen wir auf meinem Darm. Wir wollen Text in der Mitte der Linie. Unformatiertes Bild auf dem Desktop. Wir wollten Text direkt auf und für unseren Textcontainer ausrichten bleiben. Wir wollen nicht, dass es auf meinem Ball schwebt, aber wir wollen, dass es auf Yesto schwebt. Also sagen wir, Float rechts und wir haben auch diese maximale Breite hier. Ich will nicht, dass das auf meinem Ball passiert, also schneiden wir es wirklich komplett aus meinem Ball und wir werden es in einen Desktopbereich stecken . Lassen Sie uns einen Blick sehen, der besser aussieht. Lassen Sie uns den ganzen Text schicken. Nehmen wir an, wir wollten Textzeile direkt auf dem Desktop bleiben, da es jetzt irgendwie links ist, wie es jetzt ist. Und natürlich muss das nach links bleiben, also sagen wir 40 Pixel, wie es ist. Aber wir werden das auf Biergärten reduzieren, sagen wir, dass die Zeile aus meiner Galle geschickt wird. Werfen wir einen Blick, der besser aussieht, also was passiert, wenn wir nach oben gehen. Oben, hoch. Na ja, und wir haben geschnappt. Das sieht ziemlich gut aus. Ah, aber denken Sie daran, wir sind zu einem Punkt gekommen, an dem wir eine maximale Breite auf unseren Absatz gesetzt haben. Ah, aber jetzt ist das kaputt, und es schwebt nicht mehr, also haben wir nichts getan, oder? Also alles, was ich voll bin. Ich habe hier 100% geschrieben, wenn es 60 sein sollte. Ich bin sicher, ihr habt das gesehen, und ich habe nicht gut gemacht, eure Computer anzuschreien. Okay, cool. Das sieht viel, viel besser aus. Also lassen Sie uns überprüfen, dass es schnappt und es sieht gut aus, okay? Und ich werde Kontakt aufnehmen. Ich meine, ich werde Kontakt ist ein ziemlich einfaches Layout. So auf unserer Website ist jetzt ansprechbar. Nun natürlich gibt es natürlichviele andere Möglichkeiten, Medienabfragen zu verwenden. Sie können Dinge tun, wie setzen Sie einen maximalen Witz. Sie könnten Stil speziell machen, wenn ein Benutzer Ihre Website drucken möchte. Also werde ich natürlich natürlich einen Link für Sie zur MDN-Dokumentation für Medienabfragen hinterlassen, da es ziemlich viel gibt. Sie können ein Durchlesen in Ihrer eigenen Zeit haben. Und wenn Sie Ihre eigenen Projekte erstellen, natürlich, wenn Sie an einen Anwendungsfall denken. Lesen Sie diese Dokumente durch und sehen Sie, ob Sie herausfinden können, was es ist, dass Sie brauchen . Es ist der letzte letzte Schliff, den ich für unsere Website tun möchte, ist, alle Bereiche zu verlinken . Wir haben also unsere kleine Navigation hier, aber im Moment, wenn du darauf klickst, gehen sie nirgendwo hin. Also werden wir nur I DS verwenden, um sie mit dem Rest der Seite zu verknüpfen. Also werde ich in unsere Indexdatei gehen und wir haben hier Ah, Listenelemente für das Portfolio in Kontakt. Also werde ich den Pfad machen, wo dies ist, wo Sie normalerweise einen Link setzen würden. Aber wenn Sie einen internen Link wollen, können Sie ein Pfund verwenden und dann, was wird die i D. Also für unser Portfolio Abschnitt. Wenn ich nach unten zwei Portfolio scrollen und ich auf den Portfolio-Rapper I D gleich Portfolio. Dann, als ich gespeichert, dass Andi meine Seite aktualisieren. Wenn ich auf Portfolio klicke, wenn ich auf Portfolio klicke, wird es zu unserem Portfoliobereich springen, also werde ich das für den Rest von ihnen tun. Nun, während dieses Kurses, haben wir Klassen in unserem CSS verwendet, um auszuwählen, welche Elemente wir mein Tun absorbieren wollen. Das muss jetzt nicht dorthin gehen. Während dieses Kurses haben wir Klauseln verwendet, nur zwei tun alle Auswahl aus, welche Elemente wir wollen Styling . Sie können tatsächlich I DS auch verwenden. Es gibt eine Reihe von verschiedenen Möglichkeiten, um abgesicherte GVO auszuwählen , also werde ich einfach alle unsere Körper für einen Moment reinbringen, und ich werde Ihnen ein wenig schnell zeigen, wie Ideen auch für Sie in CSS funktionieren können , also werde ich einfach alle unsere Körper für einen Moment reinbringen, . Also sagen wir Kontakt. Wir gehen zurück zu einer Navigation und wir fügen unser I DS hier hinzu. Kontakt. Cool. Wir haben bereits Portfolio gemacht, also lassen Sie uns über noch überprüfen, dass funktioniert. Andi. Kontakt. Perfekt. Es scrollt einfach bis zum Ende der Seite. Lassen Sie uns jetzt nur einen sehr kurzen Blick auf I DS werfen. Jetzt erinnern Sie sich innerhalb von CSS. Wir wissen, dass es sich um eine Cascading Stylesheets, so dass im Grunde die Reihenfolge der Stile ist sehr wichtig, so dass alles, was unten auf dem Stylesheet ist, wird eine größere Menge an Bedeutung gegeben werden . Lassen Sie uns nun einen Blick auf unseren Abschnitt werfen, so dass ich Ihnen zeigen kann, wie Klassen und ich DS sich in Bezug auf die Wichtigkeit unterscheiden. Also haben wir unsere über Klasse hier und mit der Einstellung unseres Hintergrunds auf diese Art von beige Farbe. Nun, wenn ich wieder auf das Ziel zielen sollte und ich ihm den Hintergrund blau geben sollte, offensichtlich, weil er tiefer unten ist, wird es den Hintergrund in blau ändern. Wenn wir frisch waren, können Sie sehen, dass es blau ist. sollte, Wenn ich dies jedoch hier auf I d machen obwohl Blau unten im CSS-Stylesheet ist und I D eine größere Bedeutung als ein Tuch erhält , so dass Sie sehen, ob ich es speichern und aktualisieren, es geht zurück auf die Seite jetzt. Ich würde empfehlen, dass Sie Klassen so weit wie möglich in Ihren Stylesheets verwenden, denn wenn Sie aufhören, I DS in das zu werfen, wird es Sie wirklich nur verwirren. Wenn Sie Probleme mit Ihrem Code haben, Sie nicht in der Lage sein zu sagen, was einen größeren oder geringeren Wert hat. Und wenn Sie noch einmal mehr über Selektoren erfahren möchten, schauen Sie sich einfach die MDN-Dokumentation an und Sie werden dort viel finden. Wenn wir also hier einen Blick auf diese Seite werfen, können wir sehen, dass wir den Typselektor haben, was wir für unsere Elemente verwendet haben. Also, wie unsere Bilder, haben Sie Klassen, die wir verwendet haben I ds ah, universellen Selektor , der ist der Asterix , den wir für unsere allgemeinen Stile verwendet. Und dann können Sie sogar zu Attributen kommen. Kurfürsten, Combinator, seine Geschwister, alle möglichen Dinge. Dies ist ein Dies ist eine ganze Klasse für sich und für sich. Also werden wir heute nicht darauf eingehen. Aber absolut. Wenn Sie mehr erfahren möchten, ist dies eine großartige Ressource. 11. Wir haben es gemacht!: Ich bin fertig gegangen. Vielen Dank, dass du die Schulen mitgenommen hast. Leute, ich habe gehört, die Leute hatten eine tolle Zeit und ihr habt eine Menge neuer Fähigkeiten gelernt. Stellen Sie sicher, dass Sie Ihre Projekte unten aktualisieren, damit ich sehen kann, woran Sie gearbeitet haben und wie Sie es zu Ihren eigenen machen. Ich werde noch viel mehr Klassen auf Scotia machen, also bitte vergewissern Sie sich, dass Sie mir folgen, damit Sie eine Benachrichtigung erhalten, wenn ich meine neuen Klassen auf starte . Natürlich, wenn Sie mit mir in sozialen Medien verbinden möchten, werde ich Ältere Längen zu spät. Fuller. Vielen Dank, dass Sie sich angeschlossen haben. Vielleicht haben Sie einen brillanten Tag, nein.