CSS Grid Responsive Image Gallery with Lightbox and Mosaic Layout скачать в хорошем качестве

CSS Grid Responsive Image Gallery with Lightbox and Mosaic Layout

Use CSS grid to make a responsive image gallery. Column and row grid spans allow for a mosaic layout. Then using the open source Glightbox javascript code, add a lightbox popup that works on mobile and desktop. The lightbox can have images or video along with captions. Captions can have html and links. Link to Glightbox code on Github: https://biati-digital.github.io/gligh... 0:00 - Set up Project Folder 0:40 - HTML flex box navbar 2:11 - HTML Grid Gallery with images 4:35 - Add basic CSS styles 5:27 - Flexbox Navbar CSS 6:15 - Media Queries for Navbar 7:30 - Auto Fit Grid Gallery CSS 11:50 - Hover Scale Animation 12:50 - Grid Span Gallery 20:11 - Lightbox Gallery with Glightbox 22:10 - Glightbox Styleshet 22:40 - Glightbox Javascript 24:08 - Fix Typos on Lightbox javascript 25:05 - Lightbox with Captions 28:00 - Caption Locations 28:35 - Initialize local git repository 29:00 - Publish to GitHub pages Artist Portfolio Website Video Series 1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap -    • Free Domain and Web Hosting with GitHub St...   2 - Enforce HTTPS with GitHub Pages and Namecheap -    • Enforce HTTPS in GitHub Pages with Nameche...   3 - Setup Visual Studio Code with GitHub Integration -    • Visual Studio Code with GitHub Integration...   4 - Basic HTML Crash Course and Page Structure -    • HTML For Absolute Beginners: Build a Multi...   5 - Basic CSS Crash Course -    • Complete CSS: Styling Your HTML Page with ...   6 - CSS Flexbox -    • Flexbox in 15 Minutes - Crash Course   7 - CSS Grid -    • Flexbox vs Grid   8 - Portfolio Gallery in CSS Grid with Lightbox -    • CSS Grid Responsive Image Gallery with Lig...   9 - Example Portfolio Site from Start to Finish (in production) . . . . Looking for What Make Art merch? https://teespring.com/stores/what-mak... Other links for your browsing. What Make Art? on Twitter:   / whatmakeart   What Make Art? on Instagram:   / whatmakeart   You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!