Create An Image Gallery From Scratch Using HTML, CSS & JS

Name: Create An Image Gallery From Scratch Using HTML, CSS & JS
Rating: 5.0 (4 reviews)

Learn to create a responsive image gallery with lightbox

Created byGodson Thomas

Last updated 8/2021

English

What you'll learn

Create An Image Gallery
Work with Images
Work with Arrays in JavaScript
Use CSS Grid

Course content

7 sections • 17 lectures • 1h 29m total length

Introduction To The Course2:21
This is an introduction video where I show you the demo of the image gallery and also mention who this course is for.
Course Structure1:02

Setting Up The Project3:55
In this lecture, we will set up our project for getting started with the coding.
Writing The HTML5:56
In this lecture, we will write the HTML for our image gallery.
CSS for The Image Grid8:16
In this video, we will start writing the CSS. We will write the CSS for the image grid.
CSS for The Lightbox8:23
In this lecture, we will write the CSS for the lightbox in our image gallery.
Making It Responsive4:10
In this lecture, we will make our design responsive.

Manipulating The DOM4:34
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.
Arrays In JavaScript6:17
In this lecture, we will learn about arrays in JavaScript. We will be using array of objects to store the information about our images.

Populate Images In The Image Grid7:19
In this lecture, we will write some JavaScript to dynamically add images to the image grid in our HTML.
Displaying The Lightbox10:54
In this lecture, we will write the code to display the lightbox of our image gallery using JavaScript.
The Next & Previous Buttons9:44
In this lecture, we will write the functionality for the next and the previous buttons in our image gallery.

Requirements

Basics of HTML, CSS & JavaScript
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 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

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!

Who this course is for:

Beginner/Intermediate Web Designers

Create An Image Gallery From Scratch Using HTML, CSS & JS

What you'll learn

Explore related topics

Course content

Introduction2 lectures • 3min

Working With Images on Websites2 lectures • 6min

CSS Grid - The Basics1 lecture • 6min

The Design5 lectures • 31min

JavaScript Basics2 lectures • 11min

Functionality Of The Image Gallery3 lectures • 28min

Conclusion2 lectures • 5min

Requirements

Description

Who this course is for: