Simple Image Lightbox Tutorial

From the creator

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

Published 2019-08-31 · Watch on YouTube ↗
Availability and playback restrictions are controlled by the original channel.