Create An Image Gallery From Scratch Using HTML, CSS & JS
Image Gallery Creation with HTML CSS JS:
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 JavaScript.
In modern websites, we can see that image galleries are used a lot. There are a lot of JavaScript 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, & JavaScript
- A Computer that can run a code editor (Eg. VS Code)
What will you learn:
- How to create an image gallery
- How to use CSS Grid
- How to manipulate DOM using JavaScript
- How to deploy a website online
Image Gallery Creation with HTML CSS JS
We 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!
Working With Images on Websites
CSS Grid - The Basics
-
3
How To Optimize and Resize ImagesIn this lecture, we will see where to get royalty free images for your website. And I will also show you how to optimize and resize the images so that we will have a better performance in our website.
-
4
Create A Loading Screen Using Canva
In this lecture, we will see how to design a simple loading screen using Canva, an online designing tool.
The Design
JavaScript Basics
-
7
Setting Up The Project
In this lecture, we will set up our project for getting started with the coding.
-
8
Writing The HTML
In this lecture, we will write the HTML for our image gallery.
-
9
CSS for The Image Grid
In this video, we will start writing the CSS. We will write the CSS for the image grid.
-
10
CSS for The Lightbox
In this lecture, we will write the CSS for the lightbox in our image gallery.
-
11
Making It Responsive
In this lecture, we will make our design responsive.
Functionality Of The Image Gallery
-
12
Manipulating The DOM
This is a basics video for JavaScript where we will look at some ways to access and manipulate the DOM (Document Object Model). JavaScript is a huge topic to cover. In this video, we are just looking at some basics of JavaScript that is needed for this course.
-
13
Arrays In JavaScript
In this lecture, we will learn about arrays in JavaScript. We will be using array of objects to store the information about our images.
Conclusion
-
14
Populate Images In The Image Grid
In this lecture, we will write some JavaScript to dynamically add images to the image grid in our HTML.
-
15
Displaying The Lightbox
In this lecture, we will write the code to display the lightbox of our image gallery using JavaScript.
-
16
The Next & Previous Buttons
In this lecture, we will write the functionality for the next and the previous buttons in our image gallery.
Related Courses
