From the course: CSS: Advanced Layouts with Grid
Unlock the full course today
Join today to access over 23,200 courses taught by industry experts.
Overview of image-based card markup - CSS Tutorial
From the course: CSS: Advanced Layouts with Grid
Overview of image-based card markup
- [Intstructor] In this next example, we'll take what we learned building a text-based card layout to create an image gallery that uses figures and figcaptions and has some fancy interactive effects. We'll do all of this using Grid. In the exercise files for this movie you'll find HTML and CSS that looks very similar to what we've been working with so far. In the HTML we have a main, the class main area, a ul, the class cards and inside that ul we have all the cards. They each sit in list item with a class card item. That list item contains anchor, then figure with a class card. And inside this figure, we have image and the figcaption. In the style sheet, I've already set up the styles for the grid layout for the entire page because that's no different from what we've worked with in the previous movie. This is just a standard two column grid for medium screens and four column grid for widescreens. Right now, this is what it looks like in the browser. Each figure is it's own card, and…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
(Locked)
The challenge48s
-
(Locked)
Overview of text-based card markup2m 10s
-
(Locked)
Create a grid for each card2m 21s
-
(Locked)
Position items on the grid4m 20s
-
(Locked)
Place the cards on a grid5m 17s
-
(Locked)
Overview of image-based card markup2m 21s
-
(Locked)
Using the grid to stack grid items2m 18s
-
(Locked)
Change the appearance of cards with flex5m 43s
-
(Locked)
Create different-sized grid items2m 10s
-
(Locked)
Create a complex magazine-style grid8m 43s
-
(Locked)
-
-
-