Simple Image Lightbox Tutorial

Image lightboxes are incredibly popular, especially in portfolio websites. Luckily, implementing a lightbox is much easier than it looks. In this video I will be breaking down exactly what a lightbox is and how to set one up using HTML, CSS, and JavaScript. I will also be discussing exactly why I write each line of code as well as potential alternative options as I go. By the end of this video you will have a fully working lightbox example ready to add into your own applications.


📚 Materials/References:

- CSS Grid Tutorial: youtu.be/9zBsdzdE4sM
- Defer vs Async Tutotorial: youtu.be/BMuFBYw91UQ
- GitHub Code: github.com/WebDevSimplified/Lightbox
- CodePen Code: codepen.io/WebDevSimplified/pen/mdbwgxy


🧠 Concepts Covered:

- How to dynamically create HTML elements
- How position fixed works
- Showing/hiding HTML elements
- Setting up event listeners
- CSS grid


🌎 Find Me Here:

My Website: webdevsimplified.com
Patreon: patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified


#Lightbox #WDS #ImageLightbox