Create Your Personal Gallery

Let's create a gallery where you can display your favorite images, videos, and audio.

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

Creating the Gallery Section

The following HTML code 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 a few of my favorite things</p>
  </div>

  <div class="gallery"></div>
</section>

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

The container and content-text classes are the ones we've used before, while the gallery class is new and will be defined.

The .gallery class, which structures the gallery section, utilizes the Grid layout.

Unlike Flex, which only works along a single horizontal or vertical axis, Grid is a layout system that works in both horizontal and vertical directions.

Let's dive into the details of Grid!

Want to learn more?

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

Learn moreSign In