Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

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.


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!

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.