Design An Image Gallery From Scratch Using HTML, CSS & JS (with Lightbox) | Godson Thomas | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Design An Image Gallery From Scratch Using HTML, CSS & JS (with Lightbox)

teacher avatar Godson Thomas, Full Stack Web Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

16 Lessons (1h 28m)
    • 1. Introduction

      2:22
    • 2. Tips On Working With Images

      4:22
    • 3. Create A Loading Screen Using Canva

      1:29
    • 4. CSS Grid - The Basics

      5:48
    • 5. Setting Up The Project

      3:55
    • 6. Writing The HTML

      5:56
    • 7. The Image Grid CSS

      8:16
    • 8. The Lightbox CSS

      8:23
    • 9. Making It Responsive

      4:10
    • 10. Basics of JavaScript (Manipulating DOM)

      4:34
    • 11. Arrays In JavaScript

      6:17
    • 12. Populate Images In The Grid Using JavaScript

      7:19
    • 13. Display The Lightbox Using JavaScript

      10:54
    • 14. The Next & Previous Buttons Using JavaScript

      9:44
    • 15. Testing & Deploying

      4:24
    • 16. Conclusion

      0:29
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

32

Students

--

Projects

About This Class

Hi, welcome to this class. In this class, we will design a Responsive Image Gallery from scratch using HTML, CSS, and JavaScript. Image galleries are common in lot of modern websites.

There are a lot of libraries that help you add image galleries to your websites. That can save you a lot of time. But, the aim of this class is to help you understand the mechanics of an image gallery and how it works under the hood.

This is how the image gallery is going to look.

3cd58d51.PNG

This is how the lightbox looks:

9709fb04.PNG

So, in this class, we will write all the code for the image gallery from scratch explaining all the code along the way. We will also take a look what are the things you need to consider when using images in your website.

Prerequisites for this class:

  • The basics of HTML, CSS, & JavaScript
  • A computer that can run VS Code editor

We will also make it responsive (which means it will work good in smaller devices as well) using CSS media queries. We will also use some CSS grid properties for responsiveness.

After completing this class, you will learn:

  • How to work with images in a website
  • How to work with CSS Grids
  • How to manipulate the DOM using JavaScript
  • How to deploy and update websites online

I have written all the code on screen. I will guide you through all the lines of code.

So, I hope this class will be helpful to you. 

All the best :)

Meet Your Teacher

Teacher Profile Image

Godson Thomas

Full Stack Web Developer

Teacher

Start this class

See full profile

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hi, welcome to my course, design and Image Gallery from scratch using HTML, CSS, and JavaScript. In this course, I'll show you how to design a responsive image gallery with different options like light books next and previous buttons, and also a download button will not be using any library or any pre-written code will create everything from scratch. The whole idea of this course is to learn the mechanics of image gallery and how it works. So here's how the image gallery is going to look. And here we can see there are six images in our image gallery. And let's click on one of these images. So let's click on the second image. And here we can see that the light box is being displayed over here. And we also have the title of the image displayed over here at the bottom. And if we click on the Next button, we go to the next image. And if you click on the previous button, we go to the previous image. And then we can download this image by clicking on this download button. And here we can see that the image is downloaded to our system. And then we can close the light box over here. Now this image gallery is also going to be responsive. So let's take a look at how it looks on a smaller device. Let's decrease the width of the screen. And here you can see there are two images in a row. And if you go to the mobile version here we can see there's one image in a row. So the image gallery will look good on all screen sizes. Now let's look at the prerequisites of this course. You will need to have a basic understanding of HTML, CSS, and JavaScript, and also a basic computer that can run a code editor. In this course, we'll be using VS Code for writing the code. Now let's look at what will be covered in this course. We will look at some tips on how to work with images in a website. We'll also take a look at some JavaScript basics required for an image gallery. I'll also show you how to use CSS grids to position the elements in your website. Now this course is basically for intermediate web developers who know the basics of HTML, CSS, and JavaScript. Now by the end of this course, you will have created an image gallery from scratch. You'll also learn how to deploy your website online for free. I will write all the code for this image gallery on screen so you can follow along with me. I'll also explain as much as I can as I write the code. Now these are the sections that discourse is divided into. I'll also provide the source code as a downloadable resource. So if you're stuck, you can look at the code. And if you have any doubts or questions, feel free to ask me in the discussion section. So let's get started. See you in the course. 2. Tips On Working With Images: In this video, we'll take a look at where to get royalty-free images for your website. And we'll also look at how to compress the images for better performance in a webpage. And whenever you work with images in websites, you should always make sure that your images are as optimized as possible. You should not just download an image or get a photo from your camera and directly uploaded to your website, you should make sure that it is optimized first, most of the times the images are not optimized by default. You can use different tools to optimize the images. There are also free online tools that can help you optimize the images. First of all, let me show you some websites that you can use to get free images for your websites. Now the first website is called unsplash.com. You can go ahead and write your search query over here and just go ahead and download the images for free. I don't know all the images for our image gallery from this website. So you can just go ahead and search for any of your terms. So I just searched for car. And here you can see how all these images, you can just go into any of these images. And here we can see we have this Download Free button. And you also have an option button where you can go ahead and choose the size of the image and just click on any of these options and the image will be downloaded. And then the next popular website that you can use to get images for free is called pixabay.com. And here we can go ahead and enter your search stone and just go ahead and download any of these images. Here we have this option called Free Download. And if I click on that, we have these options to choose the size of the image. And again, go ahead and download the image. Now in Pixabay, you can also filter the content by vector graphics or illustrations. And you also have videos. So you can go ahead and download free videos for your websites. And then the next website for free stock photos and videos is called Pexels.com. You can go ahead and enter your search term over here. So I'll just type technology. And here we have all these images. You can go ahead and click on the image. And just like the other websites, you have these options over here, you can go ahead and download the image. You can also enter a custom size if you want and click on Free Download. Now there's one more website called andro dot col, which can be used to download free illustrations. So you can go ahead and click on Browse. And here we can see all these illustrations. You can go ahead and download all of these for free. And you can also go ahead and change the color of the images. From here. You can just click on the Search button and just type your term over here. And then just go ahead and download the images. You can download it as SVG or PNG. These are the images that I downloaded for our image gallery. Now let's go ahead and compress these images. You can just Google for tiny JPEG and just go to this website called tiny JPEG.com. And we can just drag and drop our files over here or so. Here are all the images that we need. And let's go ahead and select all of these. And let's drag and drop them over here. And we can see that all the images are compressed and the HIV can see on the right how much it has compressed the images. So it has removed almost 50 percent of the image size. Here we can see the ordinal size of the image was 549 KB. And after compressing the image size is 283 KB, right now let's go ahead and download it. So I'll just click on Download All. And we can see all the images are downloaded right here, the compressed images, Let's go ahead and extract them. So I'll just click on extract here and we'll just replace all the images are. Now let's resize these images for the thumbnails. You can just Google for resize image and just go to this upset called, I love IMG.com. You can go ahead and drag and drop your images over here. So let's select all of these images, and let's drag and drop them over here. And here are the resize options. So we can go ahead and resize that pixels if you want, you can enter the width and the height of the images. So if you clearly know the size that you want the image to be in the neck and go ahead and add those values over here. But for now, I'll just select by percentage and I'll just select 50 percent smaller. And let's click on resize images. And we can see that all the images are downloaded. And here are all the images that we just downloaded, or that's it for this video. In the next video we'll create a simple loading screen using Canva. So see you in the next one. 3. Create A Loading Screen Using Canva: In this video, we are going to create a simple loading screen for our images. And we're going to use a tool called Canva for this. So Kendra is basically an online design tool. You can design presentations, social media posts, and a lot of things. You can use any design tool you want for this. I'll just use Canvas, so I'll just select Custom Size. And here I'll just select 1280 into 720 pixels. Now there are a lot of different templates that you can use from Canva. But I'm just going to create a simple loading screen. We'll just have a text written over here called loading. So just select this frame and I'll just change the background color. So I'll just click on this. And let's select a dark color. So I'll just move it around here. And now let's add a text elements. So let's go here to text. And you can go ahead and drag any of these texts from here. I'll just drag this right here. And I'll just delete the second text and just change this to loading. And let's change the font size to, let's say 28 pixels. And let's bring it to the center. Right, That's going to be our loading screen. So let's go ahead and download it. So let's click on Download, and let's just save it as P and G and click on Download. The image has been downloaded, right? That's it with the loading screen and we have all the images ready for getting started with our image gallery. So that's it for this video. See you in the next one. 4. CSS Grid - The Basics: Css Grid is a grid-based layout system for webpages. Earlier we used to have table tags and floats to position the elements on your website. But it wasn't inefficient way to lay out your website. Css grid helps you solve the issues that we had with the earlier methods and it provides an easy way to position your elements in a webpage. In this video, we'll take a look at some of the basics of CSS grid. We will not go into the details of CSS bid, but we'll just take a look at some of the properties that we're going to be using in our image gallery. So let's get started. Here I have some basic HTML5 code, and here we can see we have a division with a class of box container. And in that we have some divisions with classes box and box1 Toolbox file. This is all basic stuff and we also have a style.css file. And I have linked it over here. And if I go to the style.css file, I have some basic styles for the box. So this is how it looks right now. Now let me show you how to work with CSS grid. Now the first thing I'm gonna do is set the display of the parent element to grid. So if we go back to the estimator, we can see that we have this parent element called box container. So let's target that over here. So just type box container. And we set the display to grid. And right now we cannot see any changes in our design. Now by default, grid positions all the elements one below the other. Now you have to specify how many columns and rows your layout should have. For that, you can use a property called grid template columns. And here you can set the number of columns you want. Now one of the commonly used unit in greed, ease and FR. So if I type one FR, FR, and if I save it, we can see that there are two columns in our grid. Let's also add some gap between all these grid items. So let's type gap, and we'll set it to eight pixels. And now we can see we have eight pixels of gap between all of these grid elements. Now this one FR means one fractional. So if I type 2 FR, FR over here, then the first column will have twice the width of the second column. In the same way, you can also add more columns over here. So if I type one FR over here, we can see that we have three columns over here and the first column has half the width of the complete grid. And you can also add pixel values over here. So let me just delete this one here. And here, if I type 200 pixels, we can see that for this column we have 200 pixels of width and all the other width is taken by the first column. So that's how you can set the number of columns that you want in your grid. Now let me show you how to span one of these elements, the next column. And here we have this box file and we will set the width of this box to 100% of the grid. So if we go back to our index.html file, we can see that for the box 5, we have this class called box file. So let's target that over here. And here we'll just type box container, box 5 and Helio to set the grid columns start and grid column end. So let's type grid column start and visit it to the first line. And then we'll type grid column end, and we'll set it to three. And now we can see that box five spans both the columns and again also span rows. So let's spend the first box and a little Spanish, 22 rows. So let's start with the first box. For the first box we have this class box1. So let's target that over here. I'll just type box container, box one. And here you have to type grid row starts. And we set it to one and grid row end, and we'll set it to three. And now you can see that the first box spans both the rows. So in this way we can create complicated layouts using CSS grid. Now let me show you a function called repeat inside CSS grid. So let's just delete this. And there's a property called repeat. So let's type repeat. And here you can type how many times we wanted to repeat. So let's type three. And then we have to set the value. So I'll just type 100 pixels. And now we can see that there are three columns with 100 pixels of eat. And in the same way, if a Type 4, then we will have four columns. And if instead of 400 pixels, if I'll just type one FOR, we see that it fills up the width of the container. Now let me show you one more function called min-max. So here I'll just tap min max. And here you can type a minimum value and maximum value. So for the minimum value, I'll just type at least, let's say 200 pixels. And for the maximum value, I'll just type one FR. And here for the repeat value, I'll just type auto fit. Now what happens over here is that it will have at least width of a 100 pixels. And if it has more space available, then it will take that as well. So here we can see if we increase the width of the browser. We can see that the width of the boxes also increases. And if I increase the width of the browser to a point where four of the boxes of 200 pixels width are able to fit in one row. Then it will add that over here. So here we can see when you pass this point, we can see that there are four boxes with at least 200 pixels of width. And in the same way, if we increase the width even more, we can see that there are now five boxes with at least 200 pixels of width. Now let me just decrease the width of the screen. And here we can see now there are four boxes and now there are three boxes. There are two boxes. So that's how min-max and auto fit work together. So this can be really useful for responsive design. So here we can see even for small screen, we have a design that looks nice. Or these are the basics of grid. And we haven't looked at all the features of grid because there were a lot of things that you can do with grid. But we just looked at some of the basics of group that we're going to be using in our image gallery. Now with this knowledge of the basics of CSS grid, you can go ahead and learn more about greed. So that's basically it for this video. See you in the next one. 5. Setting Up The Project: In this video, we will set up the project so we'll get everything ready for getting started with the coding. So the first thing I want to mention is the code editor that I'm using. So it is called Visual Studio Code. So you can just go to this website code dot rstudio.com forward slash download. And you can go ahead and download the version for your operating system or else you can just search for VS Code download on Google and you'll find this webpage. And once you download it, just install it like all the other applications or the hallux installed VS code on my laptop. And I also have this folder created called image gallery. And I'll just open this in VS code. So I'll just right-click over here in the folder and just click on Open with code. And we can see that the image gallery folder is opened in VS Code. Now let me show you the extensions that we're going to use in our project. So if you go over here to extensions and just search for live server over here, and just go ahead and install this extension. This extension will launch a local development server on our system, and it will also have the live reload feature. So whenever you make any changes to your files and whenever you save the files, you'll be able to see the changes in your browser instantly. So it will reload the browser automatically when you save the changes in your files. And the other extension that I'm using is called prettier. So just search for prettier. And here's the extension. Just go ahead and install this extension as well, and it will format your documents. So it will have the correct indentation for your code, which will make it easier for you to read the code. And you also need to enable format on Save. So just go over here to File and go to Preferences and then go to settings. And then just search for format on Save. And here we can see this option called editor format on Save, just enable it. And now whenever you save the file, the code will be formatted. Now let's create the files that we need for our project. So let's click on this New File button. And I'll just name the HTML file index.html. And we also need to have a CSS file. So I just click on New File and we'll just name it style.css. And we also need to have a JavaScript file. So I'll just click on New File and we'll just name it main.js, or these are the three files that we need in our project. Let's also write some boilerplate code for HTML. Now in VS code, you already have an extension called emmet installed. So emic basically helps you write HTML and CSS faster. So I can just type exclamation and press tab. And you'll have this basic STL file boilerplate code. And let's also link our stylers, CSS, and the JavaScript files over here. So here in the head section of HTML, I just type link and press Tab. And in the Esref I'll just type style.css. And we'll also link our JavaScript file over here, so it will go inside the body. And here I'll just type script, call an SRC and press tab. And in the SRC we'll just type main.js. Now the last thing we will do in this video is add the links of the fonts and also the icons. We're going to use a font called Poppins in our project. So just go to this website, fonts dot google.com, and just search for Poppins. And here's the font. Let's click on the Font. And I think we need to have just the bold version, so I'll just select the bold version of the font, maybe this one right here. So I'll just select this. Let's copy this link from here. And we'll just paste it over here in the head section. And we also need to get the link of Font Awesome. So just search for Font Awesome files CDM on Google and you'll find this link of cDNAs.com. So just go to this link and I'll just copy this link of all dot main.css. So I'll just click on this button called Copy link tag. And let's go back over here to our HTML. And let's paste it over here inside the head section. So that's it with the setup from the next video, we will start writing the code. So see you in the next one. 6. Writing The HTML: In this video, we will write the HTML for our image gallery. Now we have already started with the SML in our set of video. So here we see we have already created some basic estimate phi. Good. And we have also linked our font over here, and also the link of the Font Awesome library. Right now let's start with the markup of our image gallery. So let's go inside the body tag and let's create a division, and we'll give it a class of gallery container. Now to create a division with a class of gallery, continue to type def, and then type class equals and then the name of the class. So let's type gallery container and then close the division right here. So this is how you create a division with the class, but there's a shortcut in VS Code. So you can just type dot and then the class name. So I'll just type gallery container. And then this plus tab. And here we have a division with the class of gallery container created for us right now let's create an H2 for the hitting of the gallery and we'll also give it a class. So I just typed gallery title. And further hitting, we'll just type awesome cars. I will just open this in a browser. So here I have an extension called Live Server. So I have installed it on VSCode. So now you can just right-click on the STL file and click on Open With Live Server. And we can see that our design is being displayed over here. Now let's go ahead and add the images. I have created this folder called images, and in that we have these images. So we have an image with a full size and then we also have an image for the thumbnail. So this is a smaller image. And here we can see we have six images and their thumbnails. Now we're going to add the images using JavaScript. But for now, we need to have some images over here so that we can style it. So let's create a division of the class of image grid. And in that will have some images. So let's create a division with a class of image. And in that will have the mid-side just type IMG and in the SRC edge type images slash. And let's select the first terminal over here. And we need to have six images. So I'll just copy this image division from here, and I'll just paste it five more times. Or at That's it with the image grid. Now then we'll add the JavaScript will just remove all these images from here, and we'll just dynamically add the major season JavaScript. All right, Now the next thing we need to add is the light box. So let's go ahead and create a division and we'll do the class of light box container. Now this light box container is going to be the overlay of the light box. So let's create one more division of the class of light box. And this will be the actual image. So in the light box we need to have a close button. We also need to have a download button. So I just create a span for that. So I'll just tap span and we'll just give it a class of close button. And I can also create a division over here, but the span is basically used to create elements which are inline, which means that we're going to have multiple elements in the same line. So that's why we are using span. But you can also add a division and style it to be whatever you need. But at night you're going to add the close icon. We're going to use Font Awesome for that. So here we can see how already linked the CDN or Font Awesome over here. So now let's go to the Font Awesome official website and see how to get the icon of the close button or so here I'm in the official website or font awesome.com, and let's search for the icons I just typed gloss over here. And here we can see all the icons for clothes are displayed over here. So we wanted this icon right here. So I'll just click on this icon. And this is the estimator for the close icon. So let's copy this. I just click on this. And let's go back to our HTML. And let's paste it over here. Now let's go back to our website and let's see whether the icon is being added. So let's scroll down. And here you can see the close icon is being displayed here at the bottom, right now in the same way, we need to add the download icon as well. So let's go back to the HTML. And for the download icon, we need to add an anchor tag because we need to have a link for the image in the download button so that the image can be downloaded. So let's create an anchor tag and we'll also give it a class. So I just type class, and we'll just give it a class of Download button. Now let's get the icon of download from Font. Awesome. So let's go back over here and I'll just search for download. And let's select this icon right here. And let's click on this code, and let's paste it over here. Right now the next thing we will do is add the image. So let's type IMG. And in the source I just add the first image over here for testing. So I'll just select one dot JPEG. Let's go back to our website. And here we can see we have the close and the download icons, and we also have this full image over here. Now we also need to add the title. So let's go back and after the image, let's create a division with a class of title. And I'll just type testing over here. And here we can see the title is being displayed over here. And the last two things we need to add the previous and next buttons. So after this title, Let's create a span and let's give it a class of previous button. And let's add the icon of previous button over here. So let's go back to Font Awesome. And let's search for previous. So if we scroll down, we can see that there are a lot of icons. Let's select this on right here, chevron left. And let's click on this code and paste it right here. And I'll just copy this and paste it down for the Next button. And I just replaced this with next. And Chevron left with Chevron right. Now let's go back to our website. And here we can see we have all the icons and all the elements ready for styling. So that's it for this video. From the next video, we will start styling this image gallery using CSS. So see you in the next one. 7. The Image Grid CSS: We have finished writing the HTML of our image gallery, and this is how it looks right now. Now in this video, we will start with the styling. So the first thing we'll do is we'll style at this heading and this image grid. And then in the next video we will see how to design this light box right here. So let's go to our CSS, and before that, let's check whether the seasons is being added over here. So here you can see in our HTML head section, we had already linked our CSS file. So let's go to our style.css file and let's add some styling over here. So the first thing we will do is we will add some background color for the body. So let's type body, and we'll set a background color of 580 FFD for. So now we can see we have this background color. Now first of all, let's disable this light box right now, so we'll just hide it using CSS so that it's easy for us to design the other elements. So let's type light box container. So if you go back to the HTML and if we scroll down here, we can see we have this division with the class of light box container. So let's set the display to none. And now we can see that the light books is not being displayed. So now let's start styling this image grid. Now the first thing we will do is we'll style the gallery container. So we'll set a maximum width to this gallery container. So in our HTML we can see that we have created this division with the class of gallery container. And in that we have all these elements. So let's target this gallery containers. So I'll go back to the style.css and here and just type gallery container. And let's set a maximum width of 100 pixels. And let's add a background color to see whether it's been applied. So here we can see we have this width of 100 pixels and we'll bring it to the center. So for that we can just type margin. And for top and bottom we will just set a margin of 0. And for left and right, we had to set a margin of auto. So now it is in the center. And let's also set the font to Poppins. In our HTML, we have already added the link of the font. So you can see this is the link of the font Poppins. So let's add the font over here. So I'll just type font family and we'll set it to Poppins and sensitive. And now I just remove this background color from here or not. Let's style this heading. So let's type gallery container x2. And for the hitting we have a class called gallery title. So let's add that over here, gallery title. And let's set the font size to 40 pixels. And we'll text align it to the center. And let's set the color 2073 before C. And we'll also add a border bottom. So let's type border bottom of one pixel, solid. And we'll set the color to RGBA, 0, 0, 0, 0 point to. Now using this RGB format for the color, we can change the opacity of the color. So this launched a over here is for the Alpha. And we have said the Alpha 2.20. And here we can see we have this border bottom. We'll also add a padding bottom so that we have some space between this border. So let's start padding bottom, and we'll set it to 20 pixels. Now it looks all right. Now let's style this image grid over here. So if we go back to the estimator, we can see we have a division with a class of image grid. And in that we have the image division and in the image division we have the images. So first of all, let's target the image grid. So here I'll just type gallery container image grid. And we will use a CSS feature called grid. So I'll just type display of grid. And we need to add some more properties over here for display grid to work. But before that, let's add some width and height to the images inside the maze grid. So let's gallery container image grid. And we'll set a width of 100% of the parent, which is the image grid, and also a height of 100% of the parent. And we said the object fit to cover so that even if we have a 100 percent width and height of the parent, the image should not be stretched. So if you use this line of code object fit of color, then the image won't be stretched and it will have the correct aspect ratio. Or it will also add a border-radius for the image so that we will have rounded corners. And I'll just set the border-radius to eight pixels. And here we can see we have these images and we also have these rounded corners over here. Alright, now let's work with the properties of the grid. So the first thing we will do is we will add some gap between these images. So I just type gap and we'll set it to 10 pixels. And now we can see we have a gap of 10 pixels between all these images. Right now Let's add a property called grid template columns. So I'll just type grid template columns. And here we have a lot of options that you can use in our grid. So I'll just show you a basic example. So I just have one FR, FR and 10 far. And now we can see we have three images in a row, and every image has the same visit. Now this one FR means one tracks null, so it will have 1 fraction of the three images. Now if we just have one FR and then we have two images in a row. Now we can also have different values over here. So for example, if you have one FR and to FOR, then we can see that for the first image we have half the width of the second image. And the same goes with all the other rows. Now you can also have fixed values over here, for example, instead of two FOR I'll just tap 300 pixels. And now we can see that for the second image we have a width of 300 pixels and the rest of the space is taken by the first image. Now we're going to use a keyword called repeat. So I'll just type a repeat over here. And here we can specify how many times we want to repeat. So for example, if I type three and comma, and then the next value over here. So here I'll just type, let's say 200 pixels. And now you can see that it is repeated three times and we have a width of 200 pixels. So this is the shortcut of writing 200 pixels three times over here. So you can just type, for example, if I type six, we have six items in one row and each of them have a width of 200 pixels. Now we're going to use a property called auto fit. Now when you add auto fit, it will try to fit all these elements in one row. And if it cannot, then it will go to the next row. So here we can see we have four elements with 200 pixels, and we can't fit one more element of 200 pixels over here, so it goes to the next row. Now we will take this to the next level and we will use a function called min-max. So I'll just start min-max over here. And for the minimum value, we want to have at least 300 pixels. And for the maximum value we will have one FR. Now this line of code will make our grid responsive. So here we can see we have three elements in one row. Now let me show you how it looks on a smaller device. So I'll just open the inspector. And let's go over here to the responsive version. Right now you can see we have three elements in a row. And if we decrease the size of the screen, the width of these images are decreasing. But once they hit the width of 300 pixels, we just said over here, then it will go to the next rule. So here we can see the image width is less than 300 pixels. It goes to the next row. And in the same way if we decrease the width of the screen again, here we can see we will have only one image in a row. So this makes it completely responsive. Now the last thing I want to add in this image grid is that when you hover over this, we want to have the pointer. So let's go back to our CSS and let's target the image. So we have this division of the class of image. So let's target that. Are we going to target this IMG tag? So I just type cursor pointer. And now when we hover over this, we have this pointer, right? That's it for this video. In the next video we will see how to design the light books. So see you in the next one. 8. The Lightbox CSS: In this video, we will style the light box. So in our HTML we can see that we have created a division with a class of light box container. So let's target this division right here. So I'll just type light box container. And if we scroll up, we can see that we have set the display of the lightbox container to none. So let's delete this line of code. And let's add some styling to the light box. First of all, we will set the position to fixed. And I will set the top position to 0 and the left position to 0. We'll also set the width to 100% and the height to 100 viewport height. And we'll also set a Z index of, let's say, a 100. And let's add a background color and see whether it is being displayed. So I understand RGBA and we'll set the background to 00 000 00 point that says, oh, 0.9. And now we can see that the light box is being displayed over here, and we have this background color over here behind this image. Now let's set the width and the height of the actual image. So the image is inside this light box division over here, and that we have the IMG tag right here. So first of all, let's target the light books container, light box. And we'll set the width to 80 percent. And we'll set the max height to 90 viewport height. And let's also set the height and the width of the IMG tag inside the light box. So let's type light box, container, light box. And we set the height to 100% of the parent and also the width to 100% of the parent. And we'll also say the object fit to cover so that it will have the correct proportions. And let's see whether it works. So here we can see we have this image and it has 80 percent width of the screen. Now let's bring this image to the center. For that, we will go to the light box container and we set the display to flex and will align items to the center and justify content to the center. So both these lines of code will align the elements horizontally and vertically. Now let's add a border to this image. So here in the light bulbs, Let's type border and we'll set it to four pixels, solid white. And we'll also add rounded corners. So let's type border-radius. And we'll set it to eight pixels. Now let's position this download and close buttons right here. We will set the position of these elements relative to this light box. So for the light box, we have to add a property called position relative. And, and I'm against tile, the download and close buttons. So if you go back to the HTML, here we can see we have this close button over here and also this Download button. So let's target both of them. So here are just type gallery container, light box, close btn, and also gallery container lightbox. Download btn. Now let's set the position to absolute. Now this position will be relative to this parent, which is the light box. So we'll set the right position to four pixels and the top position 24 pixels. And now we can see that the download and close buttons are over here at the top right of the light box. Now here we can see that the image extends this lightbox division. So for the light box, we will add a property called overflow hidden. Now this will hide everything that goes beyond this light box division. So now we can see that everything looks all right. Now let's continue styling these download and close buttons. I will set a background color of dark gray. And we will add a padding of 10 pixels, top and bottom and 20 pixels left and right. And we'll set the font size to 20 pixels. And I will set the color of the text to white. And we will add a border-radius of eight pixels. And also set the cursor to pointer. So now when you hover over this, we have this pointer. Let's also add a box-shadow. So I'll just type box shadow. And we'll set the values 0, four pixels, eight pixels, negative 4 pixel's RGBA. And let's add the value to 0.3000. And we have a typo over here. It should be RGBA. So let's type RGBA. Right now we have the box-shadow. Now the Download button is on top of the close button. So let's add some spacing for the download button. So I just typed gallery container lightbox Download button. And we'll set the right position to 70 pixels. Now you can see everything looks all right. Now let's style the title. So let's type gallery container, lightbox title. So if you go back to the SML here we can see we have this division with the class of title, and in that we have testing written. So let's set the position of this title to absolute. And now it will be positioned relative to the container, which is the light box. So let's set the position to bottom 20 pixels. And here we can see the title. Let's also add the left position to 16 pixels and right position to 16 pixels. And let's add a background color of RGBA, 255, 255, 255. And for the opacity will just type 0.9. And let's also add some padding. So we'll add a padding of 16 pixels top and bottom and 24 pixels left and right. And let's also set the color of the text to dark gray. And we'll also add a border-radius of eight pixels. Let's set the font size to 18 pixels. And we'll also add a box-shadow. And let's type the values 0, four pixels, 16 pixels, negative 8 pixel's RGBA, 0.8000. Now the title looks all right. Now the next thing we will style is the next and previous buttons. So if we go back to the HTML here, we can see we have these buttons over here with classes Previous and Next BBN. So let's target them over here. So here I'll just type gallery container, light box next btn and gallery container lightbox previous btn. And let's set the position to absolute. And this will also be positioned relative to the light box. And let's say the top position 250%. And let's add a background color of fff 81 F. And we'll also set the font size to 18 pixels. And let's add a padding of 16 pixels. And right now we're going to see it over here because we haven't added the left and the right positions. So if I just type left over here, we can see that the button is being displayed over here, but we need to have different positions for next and previous buttons. So I just remove this from here. And we will add that separately for these two elements. So here we'll also set the cursor to pointer. And let me just add a left position of 0 over here. And now we can say that this next button starts from the middle over here. Now we don't want it to start from the center. We want it to be completely in the center over here. So we have to move the element 50 percent of itself. So for that we can just type, transform and translate y, and we'll set it to negative 50 percent. Now it is exactly in the center of the light box. Right? Now Let's remove this left from here. And then let's add different positions for left and previous buttons. So I'll just tap gallery, container, lightbox, next btn. And for the next BTN rule, set the right position to 0. And for the previous button, we'll just set the left position to 0. And now we can see that we have the next interviews, but in this lid over here, and we also have the title and the clothes in the download buttons. So that's basically it with the design of the light box. So that's it for this video. See you in the next one. 9. Making It Responsive: We have completed the design of the light box. Now in this video, we'll make it responsive. So we will have a different styling for the mobile version. Then I'm gonna make a lot of changes in our mobile version. We're just going to make some changes to the positioning of some of these elements. So let's get started. Now we're gonna consider it a mobile screen if the width of the browser is less than 700 pixels. So let's add a media query for that. So I'll just tap Add Media. And here I'll just type max width of 700 pixels. And now if the width of the screen is less than 700 pixels, what we're styles we have over here inside this block will be applied to the design. Now let's test whether it is working. So I'll just stop asterisk and this is select everything. So here I've just typed display of none. Now we can see that nothing is being displayed over here. Now if I increase the width of the browser, we can see that everything is being displayed over here. So when we go below 700 pixels of width, nothing is being displayed. If you want to see the width of the browser, then you can just right-click over here and click on Inspect. And now on the right side over here on the top, you can see the width. So now we can see that the width is 740 pixels. Now if we decrease the width of the screen and if we go below 700 pixels, we can see that the CSS over here is applied. Alright, now that we know that the media query is working, all right, Let's go ahead with the styling. So let me just remove this line of CSS from here. And if we scroll up, we can see that for the light box, we have given a width of 80 percent. Now for the mobile version, we will have a width of 95 percent. So let's call down and let's type lightbox container, light box. And we'll set the width to 95 percent. Now in the mobile version for the left and the right arrows, we will have a little bit of opacity. So let's type gallery container light box next to the DN and also galley container light box, previous btn. And let's set the opacity to 0.8. Now let's target this download and close buttons. So let's type gallery container light bulbs, close btn and gallery container lightbox. Download btn. And let's set the font size to 16 pixels. And we'll set the padding to 10 pixels top and bottom, and 18 pixels left and right. And now we need to move the download button to the right a little bit. So let's type gallery container, lightbox, download btn, and let's get the right value to 60 pixels. And now it looks all right. Now here we can see that below this image we have a little bit of gap. Now to remove that, you have to add a line of CSS to the IMG tag. So let's scroll up and let's find the I-N-G DAG. So here it is. Helio to type Vertical Align and we had to set it to middle. Now you can see that it doesn't have that gap. So let's scroll down. Now the last thing we will style in the mobile version is the title. So let's type gallery container, lightbox title. And we'll set the bottom value to negative 20 pixels. And here we can see a part of the title is not being displayed. Now the reason for that is that we had added overflow of hidden to the light box. So here we can see in the light books, we have said the overflow to hidden. Now in the mobile version we have to set the overflow to visible. So let's scroll down and here in the light box and just type overflow and we'll set it to visible. Now you can see that the title is being displayed over here. But we have a little bit of opacity for the title. So if we scroll up, we had added an opacity in the title. So here we can see we have set a background color with an RGBA value, and we have set the opacity to 0.9. So let's copy this from here, and let's scroll down. And here in the title, we'll just set this 0.9 to one. And now we don't have any opacity for the title. And with that, we have completed the design of the mobile version. So that's it for this video. See you in the next one. 10. Basics of JavaScript (Manipulating DOM): In this video, we're gonna take a look at some of the basics of JavaScript, which will be useful for us in designing our image gallery. So we'll write all the interactive part using JavaScript. Now, JavaScript is basically a scripting language that is used to make a website interactive. Now one of the simple examples of what you can do with JavaScript is to show a pop-up when a button is clicked on a website. But there are other complex things that you can do with JavaScript, like you can also create a game using JavaScript. In this course, we're going to use JavaScript to display the light books in our image gallery, and also to display the next and the previous images. Now one of the basic things you need to know when working with JavaScript is what is a DOM Document Object Model and how to reference or manipulate the DOM. Now the dome is basically a representation of all the elements inside of the page as nodes and objects. So here's an example of dome. On the left side we can see the HTML source code, and on the right side we can see how it will be represented in a dome. So here we can see we have this HTML tag and in that we have the head tag, and in the head tag we have the title. And then you have another tag inside the HTML tag, which is the body tag. And in that we have a division, and that division we have an S1. And in the S1 we have the textContent. And in the same way, we also have a paragraph over here, and in the paragraph tag we have the textContent. So here on the right side we can see how the DOM is represented. At the top we have the document and under that we have the HTML, which is the root element. And here on the left side we can see the head object. And in that we have the title object. And in that we have a text content. And in the same way we have the body object on the right side and we have all these children objects inside that. So just make sure that you understand how the elements are represented inside a dome. Because we need to access these elements in our JavaScript or our now let me show you how to access the elements inside the estimate using JavaScript. So here I have a basic estimate document and let's create some elements over here. Let's create an epsilon. And we'll just give it a class of main heading. And here I'll just type Hello. And we can see that the heading is displayed over here in the browser. Now let's create a JavaScript file, and let's try to access this S1. So I'll just go over here to file browser and let's create a new file. And I'll just name it main.js. And I'll just include that over here in the HTML. So here I'll just type script SRC. And here on this top, main.js. Right now let's go to our JavaScript and let me show you how to access the S1. Now I have already opened the console over here, so I'll just show this inside the console. So just type console dot log. And now to access this S1 yada type document. And then you type dot query selector. And here in the parentheses you have to type the class name or the ID, or whatever the tag you want to access. So if you go back to the HTML, we can see that we have an S1 and we also have a class called main heading. So for the DOT type in quotes, dot main heading, we can see that the H1 is being displayed over here in the console. Now we are adding a dot over here because it's a class. If it's an ID, then yada type hash, or that's how you access an element from HTML inside JavaScript. Now we don't just access the elements, we also manipulate the elements. Now for that, the best thing you need to do is create a constant and store water we access into that constant. So I'll just type const, and we'll just name it main heading. And we'll type equals, and I'll just copy this. And basically over here. And this is delete this. And now the main heading, ETC1 is stored inside this main heading constant. Now we just access the text content inside the main headings. So for the data type console, dot log and he will type main heading dot inner text. And here we can see Hello is being displayed over here in the console because it is a text inside our H1 and I feed it to change this heading here. You can just go ahead and do that in the JavaScript. So you just have to set the inner text to whatever you want. So I'll just type main heading dot inner text equals, and I'll just type this is the updated text. And let's save it. And now we can see that the text of the H1 has changed. So that's how you access and manipulate the elements inside your HTML using JavaScript. Or that's it for the basics of JavaScript. In the next video, we'll talk about arrays in JavaScript. So that's it for this video. See you in the next one. 11. Arrays In JavaScript: In this video, we'll take a look at arrays in JavaScript. So an array is basically a list of items, for example, a list of colors. Or in our project, we have a list of image info. Now let's see how to create an array. So I'll just create a constant over here and we'll just name it colors. So just create an array of colors. Now to create an area to use square brackets. And in that you can go ahead and add your values. So let's add our values over here. So I'll just add some colors, red. And for the next value, Let's stop yellow. And for the next term, I'll just type pink. And for the last one we just type green. Or this is an array. Now let me show you how to access the elements inside this array. Now we have to use the index values inside the array for accessing the elements. Now the other stamps with an index of 0. So if you want to access the red color you how to use the index 0 and for the local area to use the index one, and so on. So let's just display this red color inside our console. So here I'll just type console dot log. And here I'll just tap colors. And in square brackets, you had to type the index value. So I'll just type 0 for the first value. And then we can see red is being displayed over here. Now turn to access pink, then the other type 2, because it starts from 012. So let's type tool over here. And now you can see pink is displayed over here in the console. So that's how you access an element inside an LA. Now let me show you how to know the length of an array. So for video to type the array name dot length. And if I save it, we can see four is being displayed over here in the console because we have four elements in our array. Now the next thing I'm going to show you is how to know the index of an item inside an array. So for that you will type the other name, dot index off, and then the item name. So I just type yellow over here. And now we can see it says one because it is the second element, it starts with 01. And here if I type green, we can see it says three because it is the fourth element inside the array. So that's how you know the index of an item inside an array. Now the next thing I'm going to show you is how to loop through an array. Now there are multiple ways of looping through an array. I'll just show you the one that's popularly used. It's using the for each loop, so you have to type the name of the array, dot forEach. And here in parentheses, you had to create something called a callback function. So you can create a function over here. And this is a function. Now here in the function we have to have an argument. So let's name it color. Now this variable right here will help us access each of the individual colors. So let's type console.log and color. And let's save it. And now we can see all the colors in our array are displayed over here in the console. So that's how you loop through an array. Now in modern JavaScript, you don't need to type function over here. You can just type color and then you can use this Newton called arrow function. So you just have to type equals greater than. And we can see we have the same result. Now you can easily integrate this with your estimator. So if you go back to our HTML and let's create an unordered list. So I'll just type UL and we'll just give it a class of close. And let's reference this close UL inside our JavaScript. So here we'll just type const colors UL, and we'll just type document dot query selector. And here we'll just type colors. Now let's create an ad, the list items inside the colors you're using JavaScript. So let's just remove this console.log from here. And here we'll just create a variable and we'll just call it color. And I'll just create an LI, which is a list item in estimate. So let's type document and here go to Type create element. And here we'll just type ally. Now let's add the color to the list item in our text. So let's type color LI dot text equals, and we will type color. And we're getting each individual curves using this color variable inside the for each loop. And let's add the allied to the colors UL. So let's tap close UL, dot append child. And let's type color, ally. And let's save it. And we haven't ever, because we haven't saved the HTML. So let's save it. And now we can see that all the colors are displayed over here in the US are now the last thing I'm gonna show you is how to create an array of objects in JavaScript. We're going to be using array of objects in our project. So let's type cones and we'll create an array of objects for users. So just type users. And here you have to create an array and in that year to create object. So you can create object by just creating curly braces. And in that you can have key-value pairs. So let's type name, colon, and we'll just type the name over here. So I'll just type John. And let's type age. And we'll just type an age over here. So this is the first object. You can add as many key-value pairs as you want. I just create one more object. So I'll just copy this and paste it down here. And we'll just type a different name. Hi, I'm Sara, and it is type 24. And now let me show you how to access the values from this array of objects. So let's type console.log. And here are two type users. And then type the index value inside square brackets. So for the first one I'll just type 0 and then you have to type dot. And here you can see we have two options, age and name. So if I select name, we can see the name of the first-person is declared over here. And if I type one over here instead of 0, we see that Sarah is being displayed over here. In the same way we can also access the age. So let's type user 1 dot h. And now we can see we have the age of Sarah. So that's basically how you create and use an array of objects in JavaScript. So that's the basics of arrays in JavaScript. That's it for this video. See you in the next one. 12. Populate Images In The Grid Using JavaScript: All right, Now that we're done with the design of our image gallery, Let's start with the JavaScript. Now in our project, we have already created a JavaScript file over here called main.js. And we have also link the JavaScript file over here in the HTML. So now in this video, I'll show you how to display the images inside the maze grid using JavaScript. So first of all, let me just hide this light box. So let's go over here to style.css and let's hide the light box over here. So here for the light box container, I'll just type display of none. And now the light box is not being displayed and we have these images displayed over here in the image grid. If we go back to the HTML here we can see we have created this division with the class of image grid. And in that we have this division with the class of image. And in that we have the image. So we have all these images over here. And we're going to remove all these images from here, and we're going to add the images dynamically using JavaScript. So let's go to the JavaScript and we will store the links of the images, the thumbnails, and also the title. So we just create a constant and we'll just name it images list. And let's create an array of objects. So here, let's create an object and we need to have the image URL, the thumbnail URL, and also the title. So let's add all of them over here. So I'll just type some URL. This is for the thumbnail URL, so I just type colon and you need to have the link of the thumbnail. So if we go back to our file browser here you can see we have this images folder, and in that we have all these thumbnails. So this is the lingo, the first thumbnail images slash one hyphen term dot JPEG. So let's type images. Slash hyphen Tom dot JPEG. Or that's it with the thumbnail. Now let's add the link of the image. So let's type image URL. And the link of the image is emitted slash 1 dot JPEG. So let's type images slash 1 dot JPEG. And now the last thing we need to add is the title, because the title is displayed in the light box. So let's type title. And for the first title, I'll just type the first title, or this is the data of the first image. Now in this way we can add the data of all these images over here. But before that, let's go ahead and test whether it works. So let's create a function to display these images in this image grid. So let's create a function and let's name it, populate images. And we'll just create an arrow function. And in this arrow function we will have a foreach loop. And we will loop through all the images inside that, this LA. So let's type images, list dot forEach. Let's create a callback function over here. So I'll just name the argument i. And here I'll just create this arrow function. And in this, we need to create the elements of the image grid. So here we can see we have a division with a class of image. And in that we have the IMG tag. So I'll just copy this and paste it over here so that we can reference it. I just add a comment. Now this is what we need to create. So we need to have a division with the class of image. So let's create a division for the ideal type const. And we'll just name it image until you need to type document dot create element. And given it a type DIV or another division has been created. Now I'm going to add this class image, do the division. So let's type image and dot class list dot add. And here I'll just type image. So this will add the class image to the division that we just created or another. The next thing we need to do is we need to create this IMG tag. So let's type const and we'll just name it ING. You can name these anything you want. So let's type equals document dot create element. And here I'll just type IMG. So this will create an IMG tag. And we need to have the source of the ING as the link of the thumbnail. So for the datatype IMG, the name that we're given for the IMG tag. And then you had a type dot SRC equals. And here we need to add the link of the thumbnail. Now we can access the data of all the images list data using this I variable. So let's type I dot. And here you can see we have these suggestions. So let's select com URL. And next we will add the alt. So I'll just type IMG dot Alt. And I'll just type I dot and we just select title for that. So the title of our image will be the Alt of the image. Or another last thing we need to do is we need to add the IMG tag inside the image division and the image division inside this image grid division. So let's do that. First of all, let's add the IMG tag inside the image division. So for that you have to type image dot append child. And in parenthesis you are the type I and G. So now the IMG tag will be appended inside the image division. Now let's reference the image grid from here, because we want to add the image division inside the image grid. So let's reference the image grid inside our JavaScript. So let's go back over here and here I just create a constant and I'll just name it image grid. And I'll just type equals document dot querySelector, and I'll just type image grid. Now let's add the image division inside the image grid. So let's type image grid dot append child image. Right now let's see whether it works. So let's go ahead and let's delete all of these image divisions from here. And now let's go back to our JavaScript and let's call this function. So it's called populate images. So let's type that over here, populate images. And now let's go back to our website. And here we can see the first image is being displayed over here. And if I click over here and go to Inspect here, you can see for the Alt we have the title of the image. Right now let's add all the other images. So let's go up here to the array and I'll just copy this. And we have six images in total, so I'll just paste it five more times. And I'll just quickly change the URL and the titles. That is type 2 for the second image. And here for the title, I'll just type the second title. And for the third image, we'll just type 3 and 4, the third title at this time, the third title. And for the fourth image, Alice type four. And let's tap forward title. And then we have the fifth image. And then lastly we have the image. Alright, now let's go back to our website and we can see that all the images are being displayed over here. Let's also check the Alt and see whether the titles are being displayed. So let's go to inspector. And here you can see we have the title, the third title. And for all the images we have the correct ALT. So everything is working all right for the image grid. So that's it for this video. In the next video we will add the functionality of displaying the light box. So I'll see you in the next one. 13. Display The Lightbox Using JavaScript: Now in this video, we will see how to add the functionality of displaying the light box whenever we click on any of these images. So let's go back to our source code, and let's go to our style.css. And whenever we click on any of these images, we're going to add a class called active to the light box container. So if you go back to the HTML, we can see that for the light box, we have this division with the class of light box container. And we're going to add a class called active to this light box container. When we add the class active, we're going to display the light box. So let's go back to our style.css file. And let's write the CSS for the lightbox active state. So I'll just delete, display none from here. Another lightbox is being displayed over here, but we're gonna hide it. Now what we're gonna do is we're going to set the alpha value of the background color to 0. And when we have the active class for the light books container, we're going to set the value back to 0.9. So I just copied this from here. And let's type light books container dot active and hero to make sure that you don't have any space between these two classes, because you're going to have these two classes in the same element. So for our lightbox continuum, we will also have a class called active. And when we have the class active, we're going to set the alpha value to 0.9. And we'll also add a transition so that we will have a smooth animation. So I'll just tap transition, and I'll just set all the values to 500 milliseconds. Now if we go back, we can see that the background color is not being displayed over here. And if we add the active class, so let's go back to our HTML. And in the light box container, let's add a class active, an IV. Go back to our website. We can see that the background color is being displayed or not in the same. We will also add some styles to the light box. So inside the lightbox container we have this light box division. So if you go back to our HTML, we can see that we have this division right here inside the light box container. Now when we don't have the active class for the light bulbs container, we're going to set the position of the light box to above the screen. So here we'll just tap the Transform, Translate Y and we'll set it to negative, let's say 120 percent. And now it is about the screen and we cannot see it. Now when we add the active class, we're going to reset the value. So let's go here and let's type light box container dot active. And he will just type light box. And we'll just set the transform translate Y to 0. And by default we will also set the opacity to 0. And here when we have the active classrooms at the Opacity back to one. We'll also add a transition so that will have smooth animation. So I'll just type all to 500 milliseconds. Now if you go back to our design, we can see that the light box is being displayed over here. That's because we have this class active inside this light box container. Now let's see what the active class, and now let's save it and let's go back to our design. And now you can see that the light box is not being displayed. Now there's one more problem with our design. We can see that we cannot click on any of these images over here. We don't have the cursor set to pointer. Now to fix that, you have to go here to style.css. And for the light box container, by default, you have to set the pointer events to none. And when we had the active class, we're going to set the pointer events back to auto. So I'll just type pointer events auto are. Now let's go back to Design and now we can see that we are able to interact with these images are now let's add some JavaScript to add and remove the glass so that when we click on any of these images, the lightbox should be displayed. So let's go to our JavaScript and we're going to create a function called show light box. So let's type const show light box. And we'll just create an arrow function. And just for testing, I'll just type Alert and I'll just type high over here. And I'm going to add an event listener to all these images so that when we click on any of these images, this function should be called. So here we can see we are accessing the images inside the image list in this for each loop. So here we will also add an event listener to the image. So let's type image dot add event listener. And we will listen for the click event. So I just double-click over here. And here we'll just create an arrow function. And let's call the show lightbox function over here. So I'll just tap show light box. Now let's go back to our design. Right now let's click on one of these images. And now we can see that the alert that we added in our shoreline books function is this lid over here. So when you click on any of these images, the function runs. Now let's write the code to display the light box. So let's remove this alert from here. And we need to add the class active to the lightbox container. So we need to reference some elements from the HTML. So let's go to the HTML. And here we can see we have this division with the class of light box container. So let's reference that. So I'll just type const lightbox container. And he will lose type equals document dot query selector, lightbox container. And the next thing we need to reference is the image inside the light box container. So let's go back to our HTML. And here you can see we have this ING tag. So let's reference this IMG tag. So let's go to our JavaScript file and I'll just type const lightbox image. And I can name these constants anything you want. I just type equals document dot query selector, and I'll just type lightbox IMG. So this will reference the IMG tag inside the light box. Right now the next thing we need to reference is the title inside the light box. So let's go back to our HTML file. And here for the title, we have this class called title. So let's reference this. So I'll just type const light book's title, document.ready selector. And here I'll just type lightbox title. And we also need to reference the clothes and the download buttons. So here you can see for the close button, we have this class called closeby dn. And for the download button we have this class called download btn. So let's reference these two elements. So here I'll just type const closeby Dn equals document dot querySelector. And I'll just type light box, close btn. And for the download button, Let's type const download btn equals document dot querySelector, lightbox, download btn. Now when we call this function show light box, we also have to pass the image that we need to show. So here we can see, we can access the image using this variable called i. So let's pass the I value over here. And let's go here to show light box function. And let's receive the variable over here. So I just type some variable name and just type data. You can type anything you want over here. Now in this data variable, we'll have all the values of the image. So for example, if you're passing the first image over here, then we're gonna get all these values, the Tom URL, the image URL, and the title of the first image. And all of this data is going to be inside this data available over here. So let's add the values inside the elements. The first thing we will do is we will add the class active to the light box container. So let's type light box container and let's type class list dot add and here this type active. So this will add the class active to the light box container. Now we need to fill in all the values inside the elements. So the first thing we need to have is the source of the image inside the light box. So here we can see we have this IMG tag. And here we have this source set to this static value or here. And I'll just remove this from here and let's go to our JavaScript file. And by default we're going to add this loading image to our light box container image. So this is the loading image. So we'll just add that to a light box until our image is loaded. So your lightbox image dot SRC, and we'll set it equal to images slash loading dot PNG. Now this image has a small size, so it will load quickly. Now let's load the full image and add it to the SRC. So this is the full image. So we need to add the full image. So let's type lightbox image, SRC, and we'll set it equal to data dot. And if you scroll up, we can see that we have this value inside image URL. So we're going to access this image URL. So let's type data dot image URL. And next we will add the Alt of the image. So let's type light box image dot alt. And we'll set it to data dot title. And the next thing we need to have is the light book's title. So let's type light box titled dot. And here we'll type inner text. So this will change the text of the light book's title and he would just type data dot title. And the last thing we need to do is add the link of the image to the Download button. So if you go back to our HTML here we can see we have this Download button and here we have this Esref. We're going to add the link of the image inside this sf. And we also need to add an attribute called download for it to work for it. Let's go back to our JavaScript. And here with this type, download, N dot H ref equals data dot image URL. Right now let's also add the functionality for the close button. And the close button we just need to remove the class active from the lightbox container. So let's copy this line of code from here. And we have already referenced the close button over here. So here we'll just type closeby the n dot add event listener. And we will listen for the click event. And let's create an arrow function over here. And I just paste the line of code over here. And instead of add will just type remove. Right now let's go back to our design and let's see whether everything is working. All right, so let's click on one of these images. Let's click on this third image. And we can see that the third image is being displayed over here in the light box. And we also have the third title over here, and we also have the Download button. Let's click on the Download button. And the third image is being downloaded. Let's click on the image and we can see that it's the correct image. And if you click on this close button, it goes back. So everything is working. All right, Let's download this image. And the image has been downloaded. So that's basically with the light box of our image gallery. Now in the next video, we will add the functionality for the previous and next buttons. So that's it for this video. See you in the next one. 14. The Next & Previous Buttons Using JavaScript: In this video, we will add the functionality of the next and previous buttons in our light box. So right now when we click on any of these images, the light box is being displayed over here. And here we have the next and previous buttons. So the first thing we have to do is reference the next and previous buttons in our JavaScript. So let's go back to our HTML. And for the next and previous buttons we have these classes previous btn and btn. So let's reference these in our JavaScript. So let's go to main.js file. And here we'll just type const next btn equals document.ready selector, light box next btn. And in the same way will also reference the previous button. So I'll just tap const previous btn equals document.ready selector, lightbox. Previous btn or analogies add event listeners to the next and previous buttons. So let's scroll down and let's type next btn dot add event listener. And we will listen for the click event. And let's create an arrow function over here. And here we'll call a function called show next image. And we haven't created it yet, but we will in a moment. Now for the previous button, we'll create a function called show previous image, and we'll call that, just copy this and paste it down here. And instead of next video, and I'll just type previous btn. And here we will call a function called show previous image. Right now to show the next and the previous images, we need to know which image is currently being displayed. So we had to pass that variable over here into these functions. But before that we need to store the current image somewhere. So for that we'll create a variable and let's call it current image. So let's type let current image equals, and by default we will set the value to blank. And whenever the light books will be displayed, we're going to change the current image available to whichever image is being displayed. Let's scroll down and this is the code where the light books is being displayed. So after all of this, Let's type current image equals, and we will set it to the current image. Right now we have this variable called data. And in that we have all the information for the current image. So let's type data over here. So this current image variable will be set to this data. And now I'm in or someone clicks on any of the images, this function will be executed and we will have the data which is the current emit stored in this current image variable or acknowledge pause the current image available to these two functions. So let's type current image. And even here we will have the current image. Now let's write these two functions. So let's just type const, show next image, and we'll just create a function over here. Now what we're gonna do is we're going to get the index of the current image. And then we can just increment it by one and W will have the reference to the next image because everything is in an array. So let's create a variable for the next image index such as type. Let next image index equals. And here when we call this function, we're passing this current image variable and we'll just receive it over here. And we'll just call it data. And we'll just get the index of this data inside the image least allele that we have over here. So let's type images list, and then we'll type dot index off. So let's type data over here. And this will return to us the index of the current image and we'll just increment it by one. We will just log it to the console so that we know that everything is working. All right, so let's type console.log, next image index. And let's see whether the index is being displayed. So let's go back to our design. Let's click on the first image, and let's click on the Next button over here. And now we can see in the console we have one written over here. That's because array starts with 0 and the next value is one. So we're getting the value one over here. Let's go ahead and select this image right here. This is the image. Let's click on the Next button. And here we can see five is being displayed over here, which is the sixth element in our array. And I also need to take care of the last image. So when we click on the last image, and if you click on the Next button, we have six being displayed over here and we don't have a seventh element in our image array. So this is throws an error. So for that you have to check whether it is the last image. And if it is, then you can just choose to do nothing or you can just bring them back to the first image which has an index of 0 or a. So let's go ahead and start doing that. I'll just remove this console.log from here or a now here we will create an if condition. So I'll just tap IF. And here we will just type next. Image index is less than the length of the array. We can get the length of the array by just typing the array name and just typing length over here. Now here we are checking whether it is the last image. So if the next image index is less than the total number of images in the array, then we can just go ahead to the next image or else we can do something else. So let's type show light box, which is a function we had created earlier. So here you can see shore light box function. And here we need to pass the image. So let's type images list. And for the index, we'll just type next image index. And this will show us the next image. So let's go ahead to our design and let's test it out. Let's click on the first image. Let's click on the Next button. And we can see that the next image is being displayed. Let's click on the Next button over here. And everything is working. All right. Now this is the last image and when you click on the Next button, nothing happens. Now if you want to bring them back to the first image, when you click on the next image, then you can go over here and just type else. And he'll just tapped show light box. And here I'll just tap images list. And we'll just pass 0 over here, which is the first image. And let's see whether it works. Let's click on the last image and let's click on the next image. And we're taken back to the first image. And everything is working. All right, now let's also write the code for the previous button. It is almost the same as the next button. So I just copy this and paste it down here. And I'll just change this to show previous image anterior instead of incrementing by one, I just type minus1. And here instead of next image index, we had to type previous image index and just change it over here as well. And even over here. And in the if condition here to check whether the value is greater than or equal to 0. Because when we are on the first image, the index value will be 0. And if you go past the first image, we're going to show the last image. So here we need to pass the index of the last image. So I'll just type images list dot length minus one. We have to add minus 1 over here because Alice starts from 0. Right now this should work for the previous button. So let's go ahead and test it out. Let's click on this image and let's click on the previous button. And we have taken back to the first image. Let's click on the previous button once more, and we're taken back to the last image. So everything is working or light. The previous and next buttons don't have any problems. Now the last thing we're gonna do in this video is that we're going to add some CSS where when we hover over this light box, we're going to display it the next interviews buttons. And when we go outside this light bulbs, they should disappear. And we'll also do that with this title over here. Let's go back to our CSS, and let's go to the CSS of the next and previous buttons. So here we have the next and previous buttons or a tail going to set the opacity to 0 by default. And we'll also add a transition so that will have smooth animation. We'll just set it to 500 milliseconds. And let's add a hover effect to the light box. So I'll just tap gallery container, light box, column hover. And as you start dot next btn. And we will do the same for the previous button. So I just typed gallery container, light box, colon hover, previous btn. And here we'll just type opacity and we'll set it to one. And now if we go outside this light box, we can see that the next and the beads buttons are not being displayed. And when we go back into the light books, they are being displayed. Let's do the same for this title. So let's scroll up and here we have the CSS for the title. Now here in the title we're going to set the bottom value to negative 20 by default. And we'll also set an opacity of 0. Let's also add a transition and find a milliseconds. Right now let's add a hover effect for the light box. So I'll just tap gallery container, lightbox Collin Hover title. And we'll set the opacity back to one. And we'll also set the bottom value back to 20 pixels. And let's see whether it works. So let's go outside this light box and the title and the next and previous buttons are not being displayed. So everything is working. All right. Now let's take the mobile version and let's see whether we have any issues. Now in the mobile version, we're going to display the title always. So let's go to our media query. And here for the title, we'll just type gallery, container, lightbox, colon hover, dot title. And here we're going to set the bottom value to negative 20 pixels, even when you hover. And here for the title, I'll just set the opacity back to one. And let's go back and we can see that the title is being displayed, so everything looks all right. So that's it with an x in the previous buttons in our light box. And that's it for this video. See you in the next one. 15. Testing & Deploying: In this video, I'll show you how to deploy your website online. Now before that, let's go ahead and test whether everything is working. All right, so this is our digital version, and let's click on one of these images. And we can see that the light box is being displayed. And when we go outside this slide books, the title and the next and previous buttons are hidden. Let's click on the Download button. And the download is working. All right? And let's click on the Close button and it's working. All right, Let's click on the Next. And the Beatles buttons. And everything is working. All right. All right, The distal version is working. All right, Now let's take out the mobile version. So I just like to go over here and click on Inspect. And let's just click on toggle device toolbar. And this is how our website will look on a smaller screen. And we don't have any problems. Let's click on one of these images. And we have the light books being displayed. So everything is working. All right, we don't have any problems. Let's also check out the console and let's see whether we have any JavaScript errors. So in the console we can see that we don't have any issues. All right, everything looks all right. Now let's go ahead and deploy our website online. Now for deploying our website, we're going to use Netlify, provides a free plan to upload your websites. So let's go ahead and click on Login. Now there are different options to login. You can go ahead and login with your GitHub account or you can even log in with your email. Now I just logged in using my GitHub account. Now here are some of my science which are already being deployed on Netlify. Now let's add a new site. So let's go over here to sites. Now if I scroll down here, you can see it says Drag and Drop your site output folder over here. So let's go back to our site. And these are our files. Now we have to add everything inside a folder and we have to drag and drop the folder over here. So let's create a folder and I'll just name it public disorder, anything you want. So I just select all of these and drag and drop them into this folder. And we'll just drag and drop this folder over here into Netlify. And we can see that our site has been deployed. And that's how quick and easy it is to deploy a website using Netlify. Now let's go ahead and change this website URL. So let's go over here to Domain Settings. And let's go here to Options and click on Edit side name. And let's change the name over here. So I'll just type image gallery. Let's see whether we have it available. It's already taken, so I'll just type 123 and save it. And now we can see we have our image gallery on Image Gallery 123 dot Netlify dot app. If you want to use your own domain, then you can go over here to add custom domain and add it over here. Let's open this website. And here you can see our website is being displayed. So let's go ahead and click on one of these images. And the loading screen is not being displayed. So let's go ahead and check what is the problem. So let's go over here and let's open this in VS Code. Now to solve the problem, you can go ahead and add the loading screen image over here. So here we can see this is the light box. And by default in our estimate will just add images slash loading dot PNG. And now it should work. All right, so let's go ahead and close this. Now let me show you how to update your website in Netlify. So let's go back over here and let's go to deploys. And now if we scroll down, we can see that it says, I need to update your website. You can just drag and drop your updated output folder over here. So I'll just go ahead and drag and drop this folder over here. Are the website has been updated. Now let's open it and let's click on one of these images. And we can see the loading screen was displayed. Let's click on the Next button and we have the loading screen displayed. So everything is working. All right. So that's basically how you deploy a website on Netlify are at. That's it for this video. See you in the next one. 16. Conclusion: Congratulations for completing this course. I hope you learned something new and have fun. If you have any questions regarding the code, you can ask me in the discussion section and also don't forget to complete the project that I prepared for you so that you'll have a better understanding of the code that we wrote. So that's it for this course. If you're interested in learning more, you can check out my other courses in my Skillshare profile. I also have a YouTube channel called GT coding varieties, Web Design and Development. You can take that out as well. So thanks a lot for watching. Have a nice day.