Responsive Photo Gallery

Description

This project was built to practice modern CSS layout techniques, including CSS Grid, Flexbox, responsive design, and HSL color variables.

The goal was to create a responsive photo gallery that adapts to different screen sizes while maintaining a clean and user-friendly design.

Technologies Used

• HTML5
• CSS3
• CSS Grid
• Flexbox
• Media Queries
• CSS Variables
• HSL Colors

Features

• Responsive gallery layout
• 3 columns on desktop screens
• 2 columns on tablet screens
• 1 column on mobile devices
• Hover effects on photo cards
• HSL-based color palette
• Responsive typography
• Reusable CSS variables

Concepts Practiced

• Semantic HTML structure
• CSS Grid layouts
• Flexbox alignment
• Responsive web design
• CSS custom properties (variables)
• HSL color system
• Card-based UI design
• Hover animations and transitions

How to Run the Project

1. Clone the repository.
2. Open the project folder.
3. Open the index.html file in your browser.

What I Learned

During this project, I practiced how to build responsive layouts using CSS Grid and Flexbox. I also learned how to create reusable color systems with CSS variables and HSL values.

Additionally, I improved my understanding of responsive design, spacing, visual hierarchy, and Git/GitHub workflow.

Future Improvements

• Explore auto-fit and auto-fill in CSS Grid.
• Add dark mode support.
• Improve accessibility features.
• Add animations when cards appear on screen.
• Create a more advanced gallery layout.