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!
Want to learn more?
Join CodeFriends Plus membership or enroll in a course to start your journey.