CSS Tutorial - Image Gallery | Telmo Sampaio | Skillshare

Playback Speed


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

CSS Tutorial - Image Gallery

teacher avatar Telmo Sampaio

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

4 Lessons (41m)
    • 1. Intro

      1:12
    • 2. Create Image Gallery

      11:41
    • 3. Modal Images with CSS

      11:20
    • 4. Modal Images with JavaScript

      16:20
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

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.

28

Students

--

Projects

About This Class

In this course you are going to learn how to create modal images with Zoom transitions, turning your website or app more interactive and fun for the users.

By taking this course you will learn the following skills:

LEARNING OUTCOMES

  • Create Pop up Images on CSS
  • Using JavaScript to select and display the images you click

And don’t worry, I will cover everything at a very slow pace, and explain each step of the process, if you have any questions, post them down and we will be happy to help you

Meet Your Teacher

I'm Telmo Sampaio, a full stack web developer from Manchester, UK. I love to share what I know through my training courses, teaching and speaking on my youtube channel. Any questions get in touch with me, I would love to meet you!

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. Intro: Do you want to know how to create an image gallery that you can click an open A model window? So these courses exactly for you. So let me show you what we're gonna build. We're gonna build thes image gallery, and when you have over one of the images, he gets a bit fade out. But then you can also click on one of them. So I'm going to click this one's from the mountains, for example. I'm gonna click and is gonna open a mortal window so we can see in here a bigger preview of that image. And if you look in here, he also has an all text. OK, so it's a description of that image we can click in here on the top. Where is Thes X to close down our model And then I can just click on another image. So this is what we're gonna be learning today. So you're gonna learn everything that you need with CSS and also javascript. So this is an awesome project for you to optimize your skills with CSS and JavaScript, and you could even potentially put this project on your portfolio website. If you are looking for that first job is a Web development. So I hope you guys like these and I hope to see you inside of the course. 2. Create Image Gallery: All right, guys, Welcome back. So let's get started with our project. The first thing I'm gonna do is open my coat. Editor. I'm using visual studio code. So I'm going to start a new filing here on the top file new file, and I'm going to save it. Us inside of my project. Ah, I just created these folder called Image Pop Up inside. I just have some images which I'm going to share with you guys if you want to use them. But you can use yours as well. So I'm going to call this file in here as index dot html. OK, now, I'm just gonna press html and I'm is going to come up these pop. These, um, drop down. If I click, it is going to show me all of these template code for a for HTML page. So this is fine. Now, I'm just gonna put in here h one, okay. And I'm gonna put for example, travel destination. Okay, we got the travel destination would agreed to more files. So these filing year, I'm going to save it as styles dot CSS. This is where I'm gonna put all my CSS code and I'm gonna create another file called Main Dodgy s main dot Main Dutch chairs. Okay, so we have all the files that we need. So let me just see if I can go in here. Double click on these. And now, if you seen here on the top, I have traveled destinations. So my code is working. Let me just see if my styles don't. CSS is working. So for that, I'm just gonna put something like thes body. I'm gonna put background color to be Ah, Royal Blue. Okay. And on my main door chest file, I'm gonna do a console dot log off running. Okay. This is just to make sure that our files are actually working. So having said that, let's go back to our brows and I'm going to refresh nothing still happens because we didn't link our files with our HTML. That's what we're gonna do now in here on the top. I'm gonna press link, okay? And I'm gonna click the's. That's is in here. The link CSS is going to generate all of these for me. The name of my file of CSS styles. Okay, so it's plural. I need to update this one in year and down here on the bottom of the body, Just the last thing I'm going to create the script and the script in here is called men dot Js. That's the name of our JavaScript file. So let me refresh the page. I got my background color with Royal Blue. Okay, so this is working. Now. If I right click, inspect on the page just like I did, I'm going in here into the developer. Tools on groom. That's the browser that I'm using when I click on console. And if you guys seen here on the top, I got the email, the the message saying running. So our javascript file is connected. All right, so we got all of these stuff. Now let's actually start putting some content in here. I'm gonna start a dif. Okay. A dif dot image container. So if I do these, this is like a shortcut just with visual studio code that allows me to create a deve with a class of image container. So if I pressed top on my keyboard Look, it creates automatically these for me. Now, I'm gonna create some image, Okay? When you create the image element. And these image element is gonna have a source and is gonna have Ault. Okay, The altar is just to make sure that if my image cannot be displayed or for screen readers or whatever, we can have some kind of ah related text to these image. So I'm gonna put in here at the altar is gonna be, for example, beach. Okay, let me close my image. And where is my image? I'm going to say that my images inside of, um is inside of images ends. Where is thes so images. And then it should be beach dot j peg. Okay, we go back, let me refresh the page. And here it ease my image. Okay, so I put one of the images. So I'm just gonna copy these, By the way, I have thes image because, like I said before, I have these folder called Images. With all these images that I'm gonna use. You guys can use these ones because I'm going to share my coat, or you can use yours. Okay, So I'm using at the moment, he's imagine you're called Beach Thought J peg. That's what I have in here now. I'm just gonna copy these codes and put four more images. The other ones that I have one is for the desert when it's for forest and one is for Mountain. So this one is gonna be desert. This is gonna be mountain, and this one is going to be forest. Okay, let's update these old as well. Forest, This is Mountain, and this one is desert. Okay, let me save these. Refresh the page. And look, I got all the images in here at the moment. They are no looking the best. So we are going to style them a little bit in here. So let me go back in here. Let me go to the styles. First of all, on my body. I'm gonna put that my text. I want to be aligned on the center. Okay. Then I'm gonna grab my H one that I've been here. I'm going to give you the class off title, for example. Okay. Going to go in here? I'm gonna do it. Title. Okay, Now, I'm going to say these I want these caller to be white, for example. Okay. I want to have a margin away from the top 50 pixels. Ends I want to have a margin. Bottom to be zero. Okay, I'm just see how those things look like, Um, what's missing in here? I got a I miss a dot I miss a dot in here because DC's gonna do some more zoom. Probably. You guys can see better. Okay, so I got all these coding here for my html. I got my styles in here with a title, so let me refresh now it's better. Okay? Exactly what I want, but I want to give you the different font family. Okay. Have different font style. So I'm going to go in here and say Google funds. Okay, This is some free fonts that you can grab from Google. So Google phones, and then I'm just gonna scroll down a little beat and let me see if I can find something that I would like, Uh, just scrolled on the beads. I actually like which one. Um, it could be this 18 this matter. Somebody click this plus, okay. When a click down here and look, I need to copy these codes these link into my html. So just before my CSS, I'm gonna pace down these link from Google. Okay. And then when I want to use my actually front family, I need to copy these goats and set it in here on my title. Okay, so they should be goods if I refresh. Look, I got to travel destination now with these funds that I wanted. Okay, This is fine. The next thing that we can do is actually start styling a little. Beat our images. So let me go back. I have been here a dif with a class of image container, so let's start with this one. So I'm going to go in here. I'm gonna do image container, okay? And I'm going to set thes toward this plight of flex. I'm going to say a justify content. Toby center. Okay, I'm gonna do a popping top to be 100 pixels. Okay, so this should be goods. Now, one more thing. All these images I'm going to give them a class of, for example, holidays image. So all these images I'm going to give them thes Kloss. Okay, All of them. They got these. Now I'm going to go in here into my CSS again. I'm gonna target holy days. You much okay? I'm gonna do a cursor pointed, and I'm going to do a transition to be 0.3 seconds. Because if I want to do some kind of transition like I'm going to show you in a second, I'm going to give it a with off 300 pixels. Okay, I'm going to give it a margin off. For example, zero pixels topping bottom in 25 pixels left and right. And finally, I'm going to give it some kind of, um, box shadow lets you see How do they look? Like right now. Look much better. Okay? Much better. Let me just finish something in here whenever I over my images. So I'm going to select these images, and I'm going to do Ah, over. Okay, I'm going to do Ah, capacity. I'm gonna do a positive Toby as 0.7, for example. And I'm going to give these in here some back. Some box shadow. So again, we're going to Google. We're gonna do box shadow generator. We're going to select thes and in here. Look, you can try out and see how a box shadow looks like. I'm just gonna play around with these a beat you guys want to check these out by ourselves is just like box shadow generator on Google. And you should come up with these, then these generates the code that you need when a copy it, and I'm gonna just base it in here. So when I hope for my image, I should see these me refresh. Of course. And look at these quiet, cool, quiet school. Okay, so basically, that's it for these first video. And in the next one, we are actually going to start creating our model. So when you we click in one of these images, you're going to see some kind of pop up and they imagine they're alright guys. So I'll see you in the next video. 3. Modal Images with CSS: All right, guys, welcome back in this video, we're going to start creating our model image pop up. So the first thing that we do is going back to our visuals to the occult. Let's go in here into our index dot html and just below our image container dif that we created before. So let's create another dif. Okay, this time I'm going to give these thieves a 90 of my model, for example. Ends. Okay, we're going to do these, and I'm also going to give you the class off mobile, okay? And we don't really need to have these two classes, but we will use the i d for is able to target the element with JavaScript and probably we can use just like the class to style it. Okay, So, inside of these model what one wants to put I want to put first of all, a span, okay? And I'm going to give these span a class of clothes, for example, And inside of these the span, I'm just gonna put one of these HTML codes for the X. You know, when you want to close something, whoever next. So I'm gonna put in here and times and seven Golan. And now I'm gonna put an image inside. At the moment, I'm just gonna put, like, a random image. So I'm gonna put the one, for example, from the beach. So images beach thought J pay. And what else I'm gonna put I'm gonna put that Alz. Okay. I could just basically copy these, okay? I'm gonna put this one here. I'm gonna give these one a class of mortal image. Okay, so this should be fine. And finally, I want to put in here another dif another Deve with the i d off caption. Okay, Right now, I'm just gonna put something there. Beach. Okay, so we got these. If I refresh my page, okay. We got this image that is on the pop up. We got in here, our ex other, if you guys can see it well or not. But this is not how our our model window should look like, So let's start styling it up first of all, so let's go back in here. Let's go out to the styles on CSS. Gonna select my mortal class. Okay? I'm just toe scroll a little bit down. Then what? I'm gonna put in here. I'm gonna put this one to be with a position fixed. So, you know, you see these fix on the page all the time in the same place I'm going to give it popping on the top to be 100 pixels. Okay. And I'm going to say that this is going to be with a position I would just put position fix . So I'm gonna put in here with the left. Okay, So the images when assault on the left zero, he's going to start on the top zero. Okay, this is just to make sure that our model window is gonna occupy all our screen and I'm going to show you now, in here with the with with off 100% 100% of the body of our page, it's gonna have a height of 100% as well off the page. I'm gonna put some overflow to be. Also, if we need to scroll a little bit, it should be fine. But it's always good to have these. And I'm gonna put the background color to be rgb a Okay, so these rgb a is just gonna say that I can have a background color with some opacity. So I'm gonna put these all black, and the opacity is going to be 0.9, so it's gonna be almost like, completely opaque, but it gives you a little bit of transparency. So let's check. How does he look like? So far. So as you can see now, our image is just like taking all the space of our model window. So let's fix that. Let's fix that. So, uh, let me put in here. My model image is gonna be with the with of, for example, 80% of the parent. I'm going to send this one to be a display off block, so I'm just gonna put in here this play block. I'm gonna put the margin to be zero, also to be centered on the page. And I'm going to say that if the with of my screen is too big, I don't want my image to be bigger than 700 pixels. Okay, so let me refresh now. It looks much better. Okay, he looks much better. One final thing is we need our caption in here that we set up with the idea of caption so I'm going to select these I D off caption. Okay, I ds you need to use the hashtag. Okay. Like thes Now, this one. I'm also gonna put it with a display of block. Okay, I'm gonna also set it with a week of 80%. I'm gonna set it to the margin zero out. So Toby centered on the page two. Same thing is before I'm gonna set it with the marks we've off 700 pixels. What else? I want to the text inside Toby center and I went to the call it off the text to be this one . Okay, Is that beats? Let me see if this is fine. Yeah, this should be fined easy collar. And now I'm gonna put the parting of, for example, 10 pixel stop in bottom and left and right. Zero. I'm going to set the height to these diva 150 pixels. Okay, let's refresh. And here it ease. Okay, so this is our caption of the image. We got this image. Now we are missing only our X, You know, the X to close the model window or not. So if you guys remember well, where is it If you guys remember. We got a span in here a spon with a class of close. So let's go to the styles that CSS I'm gonna put in here a close. I want to set this one as a position. Absolutes. Okay. I want to these to be away from the top 15 pixels. I want this to be away from the right. 35 pixels, maybe. Let's see 35 pixels. I'm gonna put the caller to be if want f one to f one. Okay, I'm gonna put the font size to be 40 pixels. I'm gonna put the front weight. Let's scroll down a B to find the front, wait to be bold, and I'm gonna put the transition. Toby 0.3 seconds. If we're gonna do some kind of ho over this transition is gonna take 0.3 seconds. Let's refresh the page and look. Heat at the top is our ex. But let's do something else in here. The X Let's go close. Okay? I want whenever I hope over it. And then I'm gonna put the coma as well. Four. Whenever I have it on focus, it means like I'm in clicking on it. For example, I'm gonna have a color of a BB like this. I'm gonna have a text decoration. Where is the text decoration, Toby? None. Okay, this is just turn out to have these kind of underlying that. Sometimes we have when we click on links. And I also want to ever cursor to be pointed. Okay, so we have these kind of glove when we over time, you refresh the page and look when I over it in here now, I can see some kind of different effect when I over it and my cursor transforms into a pointer. Still, nothing has happened because we just created our model image. This is how it should look like when we click one of our other images. But we want these initially when we look the page Toby completely, um, to be completely, like, not being displayed on the page. One more thing that before we ended these, we could actually create him here, some kind of media with media query, because if I shrink down my, uh, my screen, if you guys see, look, maybe from, like, the tablet size, which is 700 pixels or mobile. Maybe we want this image to take, like, the full whiff off the off the screen. So what I'm gonna do down here is I'm gonna do at media, and I'm going to say at media. Okay, I think you like these arts media and mocks week marks with off 700 pixels. Okay, So at ease, I want to check my model image, and I want to set my model image to be 701 100% off the with. Okay, so let's try these out. I'm going to refresh and look. Now, if you guys can see need on the top when I shrink down the the page, the screen, when we go less than 700 pixels, my image becomes 100% of the parent for all the other resolutions, he gets like, 80%. That's what we have. 80%. But we also set it up if you guys remember a max with of 700 pixels. All right, so that's it for these video guys, and they should be all set up Now. There's just one more thing. Let me just go back in here. Our model I want initially when we look the page to be display None. Okay, so let's get rid of it for now. So let me refresh the page. It's gone. Okay, so we're we are going actually to learn how to make it active with the JavaScript in the next video. Alright, guys. So I'll see you in the next one. 4. Modal Images with JavaScript: All right, guys, welcome back. So in these videos, we're actually going to use some javascript to make sure that our images pop up on the screen. So let's go to our ah, visual studio code. Let's go in here to our main dot chairs. Let's get rid of these console dot log that we use in the in the first video. So the first thing that wants to do is grab our model window. Okay, So I'm gonna do in here, let and I'm gonna call motile. Okay? So I'm creating a variable called model, and I want to grab my model image that you remember that too created last video. So for that, I'm gonna use javascript with document dot Get element by I d. Okay. And what was the idea of our model window? Let's get Let's check it in here. I d my model. Okay, So using these cold in here document Don't get element by i d. My model. I'm grabbing with JavaScript debt elements. Okay, so I'm gonna do the same now, for example, for all my images. So I'm gonna do Let's I am geese or I'm going to say images. I'm just gonna say I am G I think it should be fine. So let I am G is gonna be equals to document dot Queary selector. All because I'm going to select all my images Weed the class off. Let's check holy base image. Okay, so we've got four of them. Okay, So when you are grabbing all these images, we JavaScript using these documented out query selector all you are actually gonna have some kind of sort of an array. So let's check these out. I'm gonna do a console dot law of these. I am G that were just grabbing Now, Okay, this is just to show you guys, how does it look like going to refresh? And look, if you open in these in here on the console you got there, Ray 01 is gonna be These image is even getting highlighted if you see. Look, when I over this is the 1st 2nd the third and the 4th 1 this is treated almost like an array. So what I'm gonna do right now is I'm gonna do a four loop to look through all these images , so I'm going to say, Let's I equals 20 Okay, Let I equals 20 So my loop is going to start with with the counter. I equals 20 He's gonna run until my eye is less than image. Don't length. Okay? And I want these two increments by one. Every time that you run the loop, these image dot length if you guys are not sure what is thes because up here we're grabbed all our images with the class holidays image that is actually a property from javascript that allows you to use on a race called the dot length, and it's gonna tell you how many elements are in there. So if I do a console dot log off image dot length Okay, the image that we just grabbed in here. Okay, I'm going to save thes. Gonna refresh. And look what I got in here on the screen. Four because I got four elements in there, So basically my loop that I'm going to do in here, he's going to start from zero until my loop is gonna increment by one every time that I run it. So it's going to run until I equals 23 and three. He's gonna be less than four. So the total times that my loop is gonna run is four. Because it's gonna be zero. I'm just gonna put in your on the screen. Zero The first time they didn't runs, I equals 20 The second time that I the loop runs. I is one third. Time is running Ieast two, and the last one is going to be three. I equals 23 The next time that you were gonna run the loop four eyes going to be 44 is less . Then image out languages for this is not gonna be true. Okay, so I'm just gonna put in here on the top. Okay, So for last, then four, Which is this image? Not length. This is not true. So that's why our our loop is only going to run for these numbers, so, as you can see is gonna run four times. So what do I want to do with these loop? I want to do a image that we grab up here and I can actually grab each one of the images like these. I could grab image zero to grab my first image. I could grab image, want to grab the 2nd 1 because this is based on the race. So basically in here what? I could put his image. I I know that these I variable that you created appear this kind of counter is going to go from zero until three. So basically, with this I in here, I congrats. All the images that we grab appear And what do I want to do? Every time that I run these loop, I'm gonna look through all these images and I want to add an event listener off click. Ok, And when we click on it, I want to run a function. Okay. I just created in here empty aro function. So what do I want to do with these? Whenever I click on them, I'm just gonna put in here a consul dot Log off, for example. E much clicked. Okay, let's just see image clicked. Refresh the page. Looking here on the right side. I'm going to click these image and look, image clicked when I click on this one. Now, two times you see three times four times. So it looks like that our function toe click on the image is working. So what can we do now, after we could do inside of here instead of using this, I could do, um, a model that we just grab it up here model. I want to access the style so I can use, um, CSS inside in year of my JavaScript file. And I'm gonna set that this play off these model if you guys don't remember, what is the mortal? This is our dif with the idea model. OK, that we grabbed up here, okay? And we stored it in these variable called model. And I'm going to say that whenever I click on image on a model, I want the style display. Toby, look. Okay. And what this is doing is make sure that our our model becomes visible. So I'm just going to click on a random image for you to see Donna. So as you can see, my model now is completely visible. So let's go back in here to the visuals to do gold. Now I want because at the moment let me just go back here. Um where is it? Where is it? Let's go. Let's refresh whenever I clicked. For example, this one, the desert, it doesn't come up. The desert in here. I want to come. Obviously we can't even cause because we didn't do Or if I click the forest I want the forest to show. So what I can dio is I'm going to do after my, ah, mortal image. So I still didn't grab my model image. So I'm gonna do it up here. So I'm gonna do let mortal mortal image he's gonna be equals two. Document dot queries selector and let me see what's my mortal image. Okay, so, query selector and I could even put in your gets, Uh, he should be fine. Okay. Model image. So I'm just gonna put the dots, okay. And now that I grabbed my model image, I can do it down here, and I want to access What? The source property off these image. If you guys remember in these model image, we have initially the source to be the beach. Okay, But now when we click on these, I'm going to set the source of these image to be what? Whatever image, we are looping right now, okay? Or we are clicking right now because you will see that and I'm going to set it equals two They image that we are clicking right now. Source. Okay, so let's refresh if I click on these. Look, now I got the forest. Let me refresh If I click on the desert now, I can see the desert. But as you guys can see in here, the caption is still not updated as well. So let's do that. So I'm gonna grab the caption as well I'm going to do, Let's and I could say cop sh in text he's gonna be equals two document dot Get element by I d. I can do get element by idea or if I want to use a query selector is gonna be exactly the same thing Okay, so I just show you appear to get element My i d But I could use the query selector So the query selector Now I need to put the hash type Okay, because this is like any selector that I want, So I'm going to select my i d of corruption. Okay, if you guys look up here when we use the get element by I the model because we are using this property get element by i d. I don't need to put in here the hashtag for the i d. When I'm using the query selector, I need to pass the hashtag saying that this is an element with an idea of caption. Okay, so we grabbed the caption text. Whenever I click on something, I want to access the inner HD male of it. Okay? And the html of these is going to be equals to the image. Okay, I that we are clicking at the moment and I want to grab the same all text. Okay, so I'm gonna refresh the page. I'm gonna click in here, and it is no working. Let's see, what is wrong in here is no lost child. Okay? He should be ald. Let's refresh again. Click and I got desert. Let's refresh the page. I'm going to click this one and it says mountain. Okay, so so far, this is working. Now there is only one thing left, which is how we can go in here on the top on these X and just close the model window. All right, So what I want to do now is I'm going to go in here. I'm going to do well, let's and I'm going to call these for examples. Span equals two documents dot queary selector. And let's see, what did we grabbing here? We give it the class of clothes. OK, so I'm going to do in here a dot because this is a class, so I'm selecting that spun, and I'm going to do something in here down here. I'm going to select the spun. That element that we just grabbed up here, I'm gonna add an event listener of what's of click. Okay, Whenever I click on it, I want to run a function. I just created the empty arrow function in here. Now, what do I want to do? I want to grab my model. Okay. Like we grabbed in year on the top. I want to set the style dot display Toby equals two none. Okay, so if I refresh the page, let's check thes desert. Now we got desert. If I go up here now, I click. It disappears The movil. Now I'm going to click the mountain, I click And here it disappears and so on. Look, forest for us. So everything is working Fine. Now there's one more thing that we could actually add in here to make this even more cool. And these would be creating some kind off of an animation, for example, of the transition. So let's see what we can do with these. I'm going to go first of all and create some kind of ah CSS animation. So in here on, my style's not CSS down here on the bottom, I'm gonna do I'm gonna create an animation. So I'm going to start with key frames. Okay, that's what you need to use. First of all, when you're going to use some kind of CSS animation and then you give it a name for a simple I'm gonna call it Zoom. These name is completely up to us. So I want to say that this animation is going to go from okay, this is where it's starting. I'm gonna use the property called Transform. Okay, Transform. So I'm just gonna put in your transform, and I wouldn't set the scale of my image to be initially zero. So if the scale initially zero, it means that you don't see the image initially. Then I'm gonna put the to okay, and now I'm gonna put the transform. Okay? Trends form to be with a scale of one. Okay, so in here it starts from a scale of zero which you don't see, And then he's gonna be with a scale of one, which is the original size of the image. So where can we put these animation now? I'm gonna select my first of all my mortal image. I'm gonna put the coma. So now I can also select my caption. Okay, the text. So caption Now I'm gonna Boston The animation Ani may sure name What is the animation name ? I want to pass this one that we just created the zoom. Okay. And I'm going to give it to the animation duration. Okay, view oration. And these animation duration is gonna be, for example, 0.6 seconds, like almost half a second. So let's go back. Let's refresh the page. I'm going to click in these one and look what we got. Quiet school. Quiet. Cool, isn't it? So, basically, that's it for this course, guys is a very short and the precise course, just one how to build a model image, pop up with some CSS and JavaScript. So I really hope you guys enjoy these scores and If you have any questions, let me know in the comments on below, I'm going to share these files as well. Eso you If you guys want to use these images or you have just like struggling with some of the code, make sure that if you enjoy these course, leave me. A nice review is really, really helps promote my courses and helps me create much more. And that's it for these video guys. Thank you so much and I'll see you in the next one.