HTML und CSS Flexbox Web - Erstellen einer Webgalerie mit responsivem Webdesign | Luis Carlos | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

HTML und CSS Flexbox Web - Erstellen einer Webgalerie mit responsivem Webdesign

teacher avatar Luis Carlos, Engineer, Web Developer and Instructor

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

4 Einheiten (24 Min.)
    • 1. Trailer

      1:10
    • 2. Planung und Layout-Erstellung (mit img-Tag versehen)

      5:01
    • 3. Abstimmen Layout mit Flexbox und Css3 Effekten

      6:41
    • 4. Responsive Web-Galerie (Version mit background-image

      11:04
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

334

Teilnehmer:innen

--

Projekte

Über diesen Kurs

LiThe Hauptziel des HTML- und CSS3-Flexbox-Leitfadens für die Front-End Webentwicklung Kurses ist es, eine reaktionsfähige Web-Galerie mit Struktursprache HTML (du kannst HTML-Klasse im Hyperlink sehen) und Flexbox-Modell zu erstellen.

Mit einfachen Eigenschaften dieses Modells kannst du auf sehr einfache Weise erstaunliche Layouts erstellen. Wenn du lernen möchtest, wie Flexbox funktioniert, kannst du dir die Kurse CSS3 Flexbox und die reaktionsfähigen Websites in 2018 anschauen, auf denen ich die Funktionsweise dieses Modells in der Version 3 von css detailliert erläutern kann.

7d70a9f8

 

Dieser Kurs ist in 3 Teile unterteilt:

  • Planung und Erstellung der "Hauptblöcke" der Seite und Verwendung von img-Tag zum Einfügen von Bildern
  • Feine Abstimmung des Layouts und responsive Webdesign mit den wichtigsten Flexbox-Eigenschaften
  • Web mit Hintergrundbild Css-Eigenschaft

Am Ende dieses Kurses kannst du deine eigene Galerie erstellen, die du mit der Community teilen kannst.

Am Ende kannst du einen Kommentar hinterlassen!

Viel Spaß damit.

Triff deine:n Kursleiter:in

Teacher Profile Image

Luis Carlos

Engineer, Web Developer and Instructor

Kursleiter:in

Currently, I am an exciting Engineer and Trainer , who loves to learn and share knowledge and new experiences.

As Trainer participated in many projects directed to student in the areas of math, computer science, new technologies and web development . Several years of training helped me developed many skills that contribute to the personal development of each people.

You can follow some of my articles in my website where i share some tutorials in the area of new technologies.

Follow me on Skillshare!

 

 

 

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Trailer: Hallo und willkommen zu diesem neuen Skill Shared Class, wo Sie lernen, wie Sie responsive Webgalerien auf einfache und effiziente Weise erstellen, mit dem HTML und CSS Reflexbox-Modell, mit dem Sie einfache Eigenschaften verwenden können, um komplexe Layouts zu erreichen in une Einfacher und Freund Wag Schreiben weniger Code und sauberes Fell. Umeine vollständige Webgalerie zu erstellen,lernen Sie außerdem eine vollständige Webgalerie zu erstellen, die Verwendung von CSS-Eigenschaften. Ermöglicht Ihnen, erstaunliche Animationen und Effekte in Ihrem Projekt zu machen. Kommen Sie und erkunden Sie die Welt der Flex Walks und leichtesten CSS-Techniken mit dem flexiblen Box-Modell . Dieser Fluch ist für Menschen mit Grundkenntnissen aus HTML und Flak Spots gedacht. Melden Sie sich jetzt an und lernen Sie die besten modernen Web-Technologien kennen. 2. Planung und Layout-Erstellung (mit img-Tag versehen): Okay, lassen Sie uns eine einfache, aber sehr nützliche Übung machen, wo Sie Flex-Bücher anwenden, Eigenschaften erstellen im Finale, eine große responsive Web-Galerie. Wir reisen Bilder. Das Ziel ist es, zwei Gruppen aus Bildern zu bauen, in denen Sie Eigenschaften verwenden, um die beiden Blöcke in verschiedenen Positionen mit entsprechendem Titel zu platzieren , wie Sie jetzt im baj sehen, das das endgültige Erscheinungsbild dieses Projekts zeigt . Wie Sie sehen, kann ich den Budge in Abschnitte aufteilen, jeder mit einer Gruppe von sechs Bildern, um die Web-Galerie zu erstellen. Ich habe die gleiche Methode verwendet, die in früheren Videos gelernt wurde, wo ich im Flex-Container alle meine Flex-Elemente habe dann individuelle Stile für bestimmte Flex-Elemente erstellt habe, um das Layout auf das beabsichtigte Design im Bild zu ändern haben jetzt, das Layout für meine Galerie von Bildern geplant, wo ich einen Container definiert, der mit der Grünen Linie dargestellt wird und beschlossen, I F 14 Flex-Elemente, die innerhalb der Seite angeordnet werden. Sie sind zwei von ihnen, dass wir Sie durch einen größeren Witz entsprechend den Flex-Artikeln aussehen . Schulden erhalten die Titel. Lassen Sie uns nun durch die Erstellung von der Webseite zuerst die HTML-Kälte gehen, wo ich einen Container erstelle , der meine furzenden Flex-Elemente enthalten wird. Für diese, Ich definiere meinen Container Deve, und darin habe ich 14 Beefs mit Glasnamen Main. Wir f definiert unseren HTML-Code, wo ich nur Änderungen leichter machen Jetzt die CSS Mantel. Ich erstelle eine Hintergrundfarbe für meinen Körper mit Grauwert, so dass wir den Körper und die restlichen Elemente für meinen Container unterscheiden können . Ich erstelle den Stil, in dem ich Anzeigeeigenschaft mit Flex-Wert und Licht CNN-Wert für die Hintergrundfarbe habe. Der nächste Schritt besteht darin, die Flex-Flow-Eigenschaft mit Roe-Wert zu tragen, um die Elemente in Zeilen und den Wiederholungswert so anzuordnen , dass die Elemente in mehreren Zeilen angeordnet werden können. Schließlich gebe ich 70 Pixel auf der linken und rechten Seite vom Container. Im Moment habe ich noch nichts Besonderes in unserem Layout. Lassen Sie uns dann unsere Glas-Selektor Haupt definieren, in dem ich sagte, ein mit off 175 Leute für die Flex-Elemente und ich würde aus 140 große Narren geben eine Hintergrundfarbe, Garo. Und schließlich gebe ich einen Spielraum von 10 Pixeln und die Bettwäsche von fünf Pixeln. Okay, jetzt kann ich unsere Flex-Artikel bereits im Peking-Layout sehen. Jetzt muss ich nur einige Wetten auf unseren Container hinzufügen, so dass unsere Flex-Artikel auf einen kürzeren Raum beschränkt sind, den ich adoptiere und untere Betten mit Wert 50 Pixel und links und rechts Abstand haben , setze ich einen Wert von 250 Pixel auf beiden Seiten. Nein, ich bin eifrig näher dran, was wir wollen. Ich brauche nur ein letztes Detail von Linemen in meinem Container. In meinem Nexus habe ich die Eigenschaft verwendet, um Inhalt mit Wertraum zwischen zu rechtfertigen, damit die Elemente gleichmäßig in der Zeile verwurzelt werden. 3. Abstimmen Layout mit Flexbox und Css3 Effekten: Der nächste Schritt besteht darin, die mit aus dem ersten und achten Flex-Element zu ändern, die, wie Sie durch die Bildaufnahme sehen können, besetzen alle Gewürze in der Reihe, erhalten die Galerie-Titel These zu Flex-Elemente. Um diese Änderung vorzunehmen, habe ich n Kindselektor für Mein Kind eins und Kind acht verwendet, mit dem Wert 100% für meine Flex-Eigenschaft und gebe ich 60 Big Fools ab. Wenn ich einen größeren Abstand zwischen den beiden Abschnitten aus der Galerie möchte, muss ich nur den oberen Rand der oberen Zehe, die Flex-Artikelnummer acht, hinzufügen . Und das werde ich jetzt tun. Wählen Sie mein Kind Nummer acht und definieren Rand oben mit Wert 50 Pixel. Wir können nun im Browser die Änderungen sehen, die sichtbar sind. verachte, dass ich spreche, meine nächste Aktion ist die Definition von HTML. Die Quellen. Die Bilddateien Schulden, die ich in die Galerie für die ersten 6 Bilder einfügen möchte. Ich habe die Dateien mit Namen Safari Nummer es von 1 bis 6. Wie Sie in meinem Ordner sehen können, erstelle ich die E M G Tec, wo diese Quelle File Safari empfangen hat. Ich mache jetzt fünf neue Kopien von den Codes und lösche Doled. Ich muss nur die Bildnummern ändern, auch auf drei für fünf und schließlich sechs. Ich wiederhole das gleiche Verfahren für die restlichen sechs Gewässer. Aber jetzt, mit dem Namen Desert Number wieder von 1 bis 6, habe ich die Quelle für die 1. 1 mit dem Namen Desert One eingegeben und die Kopien für die fallenden gemacht. Ich änderte jetzt die Zahlen, um drei für fünf und schließlich sechs zu tun. Ich habe meinen Vater im Moment eingefügt, aber die Größe ist nicht die, die ich diese Situation ändern möchte. Ich erstelle eine Regel für den Stil der Bilder, wo ich eine mit off 175 Pixel definiere und ich würde 140 Pixel, so dass der Kuchen viel besser aussieht, um zu beenden. Ich habe nur einen Rahmen für das Bild mit durchgezogener Linie mit einem Pixel und Anrufer purpurrot definiert. Damit die Kardinäle aus dem Bild leicht gerundet werden, sagte ich die Grenze Radios Eigenschaft, mit dem Wert off 2%. Jetzt, für die Titel, die in flex Element eins und acht eingefügt werden, erstelle ich ein Hinzufügen mit verschiedenen Titeln, wobei der erste meine Safari Gallery innerhalb der habenden und für das zweite Hinzufügen, Ich schreibe Decks meine Wüste Galerie vierziger Jahre. Um Dinge hinzuzufügen, erstelle ich eine Regel in CSS, die Farbe purpurrot zum Hinzufügen von Inhalten gibt, um zwei Änderungen zu beenden . Zuerst möchte ich, dass die Titel mit einer festen unteren Zeile von zwei Pixeln und Farbe karminrot, die ich innerhalb der Regel definiert , die ich für mein Flex-Element eins in acht erstellt habe. Und schließlich definiere ich eine Regel mit dem Über-Selektor, wenn ich über das Bild gehe, vergrößert die Größe für diese. Ich habe die Eigenschaft transformiert, in der ich die Skalierungsfunktion verwendet habe, die die Werte Tod erhält , wobei ich der Skalierung des Bildwachstums für den Fall von den Bildern trotze, ich möchte, dass sie 1,5 mal größer sind. Wenn ich am besten den Mund über das Bild, wende ich schließlich einen Schatten auf das Bild an, indem ich die beiden Schatteneigenschaft eine blinde Regeln für unser Ergebnis verwende. Tale und vertikale Offset von zwei Pixeln und derselbe Wert für Blut, was eine Farbe ergibt, die durch einen Exit-Dezimalwert definiert wird. Sie können jetzt im Browser den Effekt sehen, wenn ich am besten über das Bild die Größe vergrößert und einen Schatten erstellt. Wenn Sie die Größe auf eine niedrige Auflösung eingestellt haben, ist dies sichtbar. Das Bild des Todes überläuft nicht. Die Anpassung der Seiteninhalte an Geräte mit anderen Auflösungen, es verkauft für jetzt Dinge. 4. Responsive Web-Galerie (Version mit background-image: in dieser neuen Version Für meine Webgalerie verwende ich flexible Bilder mit Hilfe von CSS-Eigenschaften, die das Flex-Box-Modell implementieren, das in einem Hauptcontainer sechs verschiedene Bilder erhält, aber mit Hintergrundbild-Eigenschaft. Der große Unterschied in Bezug auf die EU off Image-Technologie, um die Bilder einfügen ist, dass ich noch das Bild jetzt in der CSS kalt und kann verwalten und ändern Bilder für verschiedene Gerät Unkraut präsentiert werden . Das ist in HTML nicht passiert, wo der Mantel fixiert wurde. Jetzt in die Galerie. Wie Sie sehen, gibt es zwei verschiedene Arten aus, die ich für die Bilder habe. Grund, warum, wenn ich erstellt Eaves innerhalb Container, der die Bilder empfangen, Ich habe zwei verschiedene Klassen, die ich den Namen ungerade dif zum ersten Zertifikat und 50 Deve erhalten entspricht den Bildern mit größer I für Bilder 24 und sechs. Ich gebe den Namen sogar den beginnenden jetzt mit Stil für den Container. Ich sagte, ein mit off 100% aus dem View-Teil mit diesem DIV besetzt den gesamten Bruder mit und ich habe mit 50% des View-Teils, den ich in Ordnung habe, um F sechs Elemente innerhalb des Behälters als s Lex Artikel zu werden . Ich habe die Anzeigeeigenschaft verwendet. Wir lenkt Wert als Hintergrundfarbe des Behälters ab. Ich habe die Farbe hellgrau verwendet und um die Flex-Elemente vertikal auszurichten, verwende ich den Mittelwert für die Eigenschaft, richte Elemente aus und schließlich, um den Container zu verschieben. Lille bricht nach unten. Ich verwende 10% für die Margin-Top-Eigenschaft. Die nächste Aktion wird gesagt, die Eigenschaft zu den Dieben, die die Bilder erhalten haben, beginnend mit der Klasse. Seltsam, wenn zu jedem, gebe ich mit 25% in Bezug auf die Breite des Behälters und besetzen die Summe. Ich habe Grund, warum ich einen Wert von 100% zu geben, die ich habe endlich einen blauen Kragen zu tun , so dass ich die Diva auf der Seite identifizieren kann und jetzt im Zusammenhang mit sogar geben die mit den gleichen Wert 25% haben und ich off 80% aus dem Eis aus dem Behälter. Mit einem kleinen Ich habe Indiens Steve, wie ich es in den anderen dif getan habe. Ich gebe der Hintergrundfarbeeigenschaft auch eine blaue Farbe. Lassen Sie uns jetzt lernen, wie man die Bilder setzt. Ich möchte Hintergrundbilder hinzufügen, zu denen aus den Dieben, mit sechs verschiedenen Dateien, um jede zu wählen, die ich verwendet habe und Kind Selector Schulden wählt die erste Quote. Steve in den Behälter. Grund, warum ich die Nummer eins verwende, um das erste Kind innerhalb des Containers auszuwählen. Jetzt muss ich nur die Hintergrundbild-Eigenschaft verwenden, die in der O. R. L. die erste Bilddatei, die ich in dem Bild dieses Kerls will, erhält O. R. L. L. . Eins für das Bild, um das gesamte DIF zu belegen. Ich benutze die Hintergrundgröße Eigenschaft mit Tal 100% für mit und I. Ich werde nun die Ziegen auf die anderen fünf Bilder replizieren, wo ich nur die Zahl ändern muss , um die Kinder zu identifizieren. Schulden geht auf sechs sowie die Kind-Klassennamen 24 und sechs von Chancen bis sogar der letzte Schritt ist es, den Namen der Dateien Bild auf drei für fünf und sechs zu ändern. Ich habe jetzt den Funken mit Bildern in jedem Flex-Element abgeschlossen, bevor ich in die Medienabfragen , bevor ich in die Medienabfragen eingebe. Ich lege die Hintergrundfarbe des Dokuments gleich der Hintergrundfarbe des Containers , so dass ich eine einzelne Hintergrundfarbe in allen die Seite für diesen zweiten Teil möchte ich, dass von einem bestimmten mit den Bildern zwei in jeder Zeile platziert werden, wie es jetzt auf der Seite zu sehen ist. Um diesen Effekt zu erstellen, muss ich eine Medienabfrage verwenden, die diese Art von Änderungen auf Werte außerhalb des Bildschirms mit weniger als 700 Pixeln anwendet . Grund, warum ich Max mit Eigenschaft mit diesem Wert verwende. Wenn diese Bedingung auftritt, mache ich einige Änderungen, die in zwei Klassen gleich sind, so dass ich eine einzige Regel, die ich jetzt will, verschleiern kann . Zwei Bilder Borough. Also änderte ich die mit 2 49% von dir, also das ist Onley. Zwei Bilder füßen die Gesamtheit vom View-Port und ich gebe einen Rand von einem Pixel, zwei F ein minimales Gewürz zwischen den Bildern und schließlich wird das I mit einem Wert von 100% gesetzt. Wie wir sehen können, habe ich immer noch nicht das endgültige Layout, weil die Bilder alle in der gleichen Regel sind. Und um diese Frage zu lösen, habe ich die Flex Rep Eigenschaft verwendet, die die Elemente durch den definierten 49% des Ansichtsteils sprechen und die anderen Bilder an die nächste Rolle übergeben, wie Sie sehen, auf der Seite passiert. Nun, diese Änderung im Layout kann immer eine Gerechtigkeit sein, und es ist nur notwendig, um den Bruchpunkt zu ändern , der in diesem Fall als der Wert von 700 Pixel. Wenn Sie auf 500 Pixel ändern, werden die Änderungen wieder passieren, aber in diesem Gewand für ein niedrigeres mit. Aber Sie können immer ein Layout mit fester Größe für Bilder haben wollen, das auf ein Szenario reagiert, in dem ich zu einem nicht flexiblen Layout wechseln muss, in dem die Bilder damit fixiert sind, ist fast aus. Ich muss nur der Breite des Containers des Werts mit Pixeleinheiten geben, damit der Container nicht flexibel ist. Ich werde einen Wert von 1000 und 700 Pixel geben, die es erlauben, dass die Bilder mit einem festen Wert seufzen . Da ich Additive, die die Bilder mit der Verwendung von Prozenteinheiten erhalten haben, wird diese Eigenschaft im Zusammenhang mit dem Container berechnet, der als fester Wert, so dass die mit wird auch für die Jungs festgelegt werden, die wir immer kleinere Fenster mit in dieser Gestalt für 700 Pixel möchte ich die Bilder alle in einer Zeile anordnen, aber diesmal mit dem gleichen I, für das ich 100% dem Eis aus den beiden Auth und sogar Klassen gebe. Und ich benutzte verschiedene Verstand, gab 30% Wert für die Auth Deve und 40% für die andere. Und jetzt, ohne Flex-Rep-Eigenschaft, können wir jetzt sehen, dass die Galerie jetzt einen festen Wert belegt, der notwendig ist, um die Bildlaufleiste zu verwenden. Und wenn ich verkleinere die mit, Ich werde einen Punkt erreichen, wo die Bilder nebeneinander mit dem gleichen, was ich habe, aber mit unterschiedlichen Verstand. Danke fürs Zuschauen.