Lecture

Create Your Own Gallery

Let's create a gallery that includes images, videos, and audio files you like.

First, let's create a gallery section using the <section> tag.


Creating a Gallery Section

The HTML code below defines the title and content of the gallery section.

Gallery Section
<section id="gallery" class="container"> <div class="content-text"> <h2>Gallery</h2> <p>These are the things I like</p> </div> <div class="gallery"></div> </section>

We used the h2 tag for the title and the p tag for the subtitle.

The container class and content-text class have been used previously, while the gallery class is newly defined.

The .gallery class that makes up the gallery section uses a Grid layout.

Unlike Flex, which utilizes a single horizontal or vertical axis, Grid is a layout system that utilizes both horizontal and vertical directions.

Let's learn more about Grid starting now!

Lecture

AI Tutor

Design

Upload

Notes

Favorites

Help