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

Learn to create a responsive image gallery with lightbox

What you'll learn

Create An Image Gallery

Work with Images

Work with Arrays in JavaScript

Use CSS Grid

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, & JavaScriptA 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 JavaScriptHow 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: JavaScript Basics

Lecture 11 Manipulating The DOM

Lecture 12 Arrays In JavaScript

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