Last updated 8/2021 MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz Language: English | Size: 918.80 MB | Duration: 1h 29m Learn to create a responsive image gallery with lightbox
What you'll learn Create An Image Gallery Work with Images Work with Arrays in jаvascript Use CSS Grid Requirements Basics of HTML, CSS & jаvascript A computer that can run a code editor (eg. VS Code) Description Hi, welcome to my course. This course will help you teach you how an image gallery is created. We will create a Responsive Image Gallery from scratch using HTML, CSS, and jаvascript.In modern websites, we can see that image galleries are used a lot. There are a lot of jаvascript libraries that help you create an image gallery. It is not a bad thing to use those libraries in your website. But the main aim of this course is to help you understand how an image gallery works. So, creating it from scratch will help you become a better programmer.Here are the prerequisites for this course:Basics of HTML, CSS, & jаvascriptA Computer that can run a code editor (Eg. VS Code)What will you learn:How to create an image galleryHow to use CSS GridHow to manipulate DOM using jаvascriptHow to deploy a website onlineWe will write all the code on-screen. There won't be any code copied and pasted from anywhere. I will also try to explain everything that we write. I will provide the source code as a downloadable resource. So, if you are stuck, you can check that out. By the end of the course, if you follow along with me, you will have created a responsive image gallery from scratch.So, if you are interested in improving your web development/coding skills, then you can join me in this course. I hope you will learn a lot in this course.Happy coding! Overview Section 1: Introduction Lecture 1 Introduction To The Course Lecture 2 Course Structure Section 2: Working With Images on Websites Lecture 3 How To Optimize and Resize Images Lecture 4 Create A Loading Screen Using Canva Section 3: CSS Grid - The Basics Lecture 5 CSS Grid - The Basics Section 4: The Design Lecture 6 Setting Up The Project Lecture 7 Writing The HTML Lecture 8 CSS for The Image Grid Lecture 9 CSS for The Lightbox Lecture 10 Making It Responsive Section 5: jаvascript Basics Lecture 11 Manipulating The DOM Lecture 12 Arrays In jаvascript Section 6: Functionality Of The Image Gallery Lecture 13 Populate Images In The Image Grid Lecture 14 Displaying The Lightbox Lecture 15 The Next & Previous Buttons Section 7: Conclusion Lecture 16 Test & Deploy Website Lecture 17 Conclusion Beginner/Intermediate Web Designers