In this project, we’re going to build a practical photo gallery using HTML, CSS, and JavaScript. You’ll see how to organize images and create smooth, interactive navigation. Along the way, you’ll practice API requests, async and await, click events, so you can understand how the interface and JavaScript logic work together.
Create these three files, copy the code into each one, then open index.html with Live Server.
photo-gallery/ ├── index.html ├── style.css └── index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Photo Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Photo Gallery</h1>
<h2>Enter the number of photos</h2>
<input
type="number"
id="input"
class="input"
value="2"
min="1"
max="10"
/>
<small class="errorMessage" id="errorMessage">Error Message</small>
<button class="btn" id="btn">Get Photos</button>
<div class="gallery" id="gallery">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
<img src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, we’re going to build a practical recipe book app using HTML, CSS, and JavaScript. You’ll see how to fetch recipe data and create useful recipe cards from the response. Along the way, you’ll practice API requests, async and await, DOM selection, so you can understand how the interface and JavaScript logic work together.
View project
In this project, we’re going to build a practical pomodoro timer using HTML, CSS, and JavaScript. You’ll see how to control time-based behavior with practical start, stop, and reset actions. Along the way, you’ll practice setInterval, click events, DOM selection, so you can understand how the interface and JavaScript logic work together.
View project
In this project, we’re going to build a practical rock paper scissors game using HTML, CSS, and JavaScript. You’ll see how to handle player interactions, calculate the result, and update the score. Along the way, you’ll practice click events, DOM selection, DOM content updates, so you can understand how the interface and JavaScript logic work together.
View project