Create An Image Gallery From Scratch Using Html, Css & Js

0

1

2

3

4

5

Posted on 24 Nov 10:21 | by mitsumi | 15 views

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