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: https://youtu.be/9zBsdzdE4sM
- Defer vs Async Tutotorial: https://youtu.be/BMuFBYw91UQ
- GitHub Code: https://github.com/WebDevSimplified/Lightbox
- CodePen Code: https://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: https://webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified


#Lightbox #WDS #ImageLightbox