Make Your Website Stand Out with HTML, CSS and Web Animations

1. Introduction: are you looking at a bit of uniqueness and individuality into your own website or Web application itself? Then this is the course for you. Hi, I'm Sheila Brennan, a front of Web developer. In the last few years, there have been many advancements in Web browser technologies that allow for more creativity and how websites are well designed and developed. In this course, I'll be diving into several techniques that you can use using just HTML and CSS to add more visual interest into your website. Some familiarity with HTML and CSS is recommended, but not absolutely required as I'll be explaining concepts as we go. This course is ideal for freelancers inside hustlers looking to build more effective experiences for the clients. While the techniques will be covering are ideal for home pages and landing pages, they could just as easily be applied on a simple block site. Are you ready to dive in and learn some of these techniques? Then let's get started 2. Introduction to CodePen: in this video, we're gonna talk about cope in, which will be using for the rest of the course. If you already have a code pen account, feel free to skip this video and Elsie in the next one. If you don't, all you need to do is go to cope ended Io Click on this sign up for free link, creating account and then you'll be good to go. I'll see you the next one. 3. Background Gradients: In this first video, we're gonna go over how you can use background Grady INTs to add more visual interest to sections of your page, someone to start by creating a pen. And then let's go over a couple pen settings. I'll be using these throughout the rest of the course for each female I'm going to do is at this meditating so that if I end media queries in my CSS to change various properties like font sizes, that will be accurately reflected in the pen. If I change my browser with for CSS, I'm gonna choose this normalize option to minimize any differences between browsers and how things render and saving close. And then we can start on our each to mouth. I'm going to take advantage of the auto complete of cope in Aiken, just hit period that under my class name hit tab and it will auto complete. And then for each one tag, it's gonna be get outside, and that's gonna be it for all the html for this first lesson, and then I'm going to be adding a bit of HTML. These styles. These will apply for the rest of lessons as well, so that if I grow the screen with to at least 800 pixels for basement is gonna be increased 18 pixels, so all the fronts on the page will grow a bit. And then let's go ahead and pick a front. You can pull in and right from company. Using these asset options, you'll just click on the copy link tank I have actually pre selected front from Google phones. All you need to do is hit, plus on the one that you want, and then in this drawer, you'll copy and paste the link tag. I have selected front calm and time, so I'm gonna go. You'll put your link tag of choice right in here. It's even close now. We can actually in our front family so that we'll see that fun appeared. No, we have some fallback fonts as well. And then let's go and set up. Our CSS variables will be using those throughout. The course is, well, it's a good way it's set values and then reuse them. But I have you type in the whole thing again in these ways, and I have a green colors. Well, I'm gonna use RGB for the sea canoes, hex codes like the white that's up to you. And then let's next start setting up our hero section, which is the only section that will be creating in this show video 400 pixels men with. And then we're gonna set background color to use the variable we just created Sweet. It works, and then we are going to have this be a grid container and we're just doing that for layout . I'll show you why in a seconds we're also gonna add a media query so that wider screens, we're gonna make the hero bigger in terms of height. Okay, so we're good there. And now at our tagline styles, we're in a Senate toe. Wait so we can actually see it. And then we're gonna set up a fun size and a weight of 400 just so it's gonna default a bold for all your heading tags. We don't want bolds so you can read the text better. And I'm also adjusting the letter spacing just out of personal taste. And then we're going to set margin of auto, which is a way to make this as a grid element be centered. And that's looking good. And then I'm gonna copy this media query again, and I'm going to increase the font size on wider screens. We're gonna goto five. Rim Ram is a relative unit that will be using that is taking that base font size that we set here into account. Okay, so now we're gonna do is and in our radiant that's looking a little plane. So we're going to go to uni use CSS Cranie in Ohio. You can also use this year. I greediest dot com is really good as well. You just don't have as much control over the colors. So I am going. I have actually pre selected ingredient. But all you'll do is create the colors you want here for your various the stops on this, and then you'll copy and paste that radiant. I am going to and in my ingredient to add these to the hero section right here. Make sure you spell it right, and we have our first greedy it. And I'm gonna show how you can actually layer these by adding in a second ingredient. Do you just come a separate them? So that looks a little bit different, and then, but still looking a little bit plane. Let's add a back on image behind that. I have pre selected this image from unspool ash dot com. These are easy because you can use them without having to host the image somewhere. Just make sure to note what's the ideas on the image? Because that's how you'll use it. And then So let's end that in. Come on, we got your L. And there we go. We can see by default. Background images will repeat. We're gonna tell it to not repeat, and we're gonna set background side cover. And there we go. We can see how it's easy to layer Becker ingredients on top of an image to add some interest and also makes the text easier to read. You'll see if I cut out the Grady INTs. It's a little bit harder to read the text versus having ingredient in there, and it also allows you to add elements of your color palette in the ingredients and have a more uniform look on the page. 4. Animated Hero Text : in this video, we're gonna be talking about how we can use CSS animations and apply them to hero section text toe. Add some fun and visual interest. CSS animations are a way to transition CSS properties between two different states. You can control if they repeat multiple times or just run once if they run forwards or backwards if they have a special easing function, which basically is a way to add a different effect. For example, of bounce versus a fade in versus a slight and and then we can also set a duration which determines how long the animation will run for. And that can be five seconds, one second or we go into milliseconds. Key frames are the magic that will be setting up in CSS. This allows us to tell the browser what properties need to be at certain points in the animation, and the browser will handle all the middle values that were not directly declaring. And you'll see this in our demo. All right, we're going to start with our previously created pen, so we are using the previous lessons completed work where we have ah get outside text and the first thing we're gonna do is create the key frames which will determine how well animate this text, and we can call it whatever we want. I'm going to call it fade in up because it's gonna we're just gonna be using a change in opacity and the position of the text. So that's kind of descriptive over doing. And then I'm going to just declare some percentage values, so it 0% the text will be hidden. And then we're gonna playa transform, which is a pretty powerful thing in terms animation. You could do a lot with transform and encourage you to go to Indian is a great resource. Check out their docks and they have a lot of good example there as well. I'm gonna go with a translate three D, which is covered in their documentation. I'm basically only going to change the vertical position of the text, so it's pretty simple. So to start with, we have our 0% value. Then, halfway through the animation, we're gonna do a slight change in opacity. The text will become visible and I'm going t just might transform value zero. We're gonna go 20% there and then I'm just gonna add 100% value and that is going to the pesty with one. So the Texas really visible, and we're not going to do any more transform, so I'm gonna set that to none. So now we have our CSS animation key frame set up. Now all I need to do is apply this to our tagline and it's up to you. Sometimes these are better. Only applied a wider screens, depending on where what you're doing with animation, for this example, I'm just gonna apply it it all screen widths. I'm gonna go of point for a second. That's on this animation will run for and then feed in up. That was the name of the key frame that I created, and you can already see it taking effect. And then we could just use season. That's one of the common easing functions to use. So that was that. First, let's look at it. It's gonna run forwards. It's not going to repeat. This is just because I'm changing the values. It's rerunning it, and then a good thing to do is we'll be doing more of this as we go go into debug and you can see. It's a good way to if I option, click on Mac or right click and do inspect. I can really dig into what my values are for the animation that Aiken change them as needed and you'll see in here I can change. I could just Dewey's. If I click on this in in chrome deaf tools, I can adjust the values in preview how they look. So for this example, I'm gonna be a little fancier and use a cubic busy a function. I've pre selected some values, some skinny. Copy those in and there we go. It's a little more subtle. Only reloaded. Get another look at it, and that is an easy way to add a bit of visual interest in. I wouldn't overuse this, but for something like a landing page or a home page hero, it's definitely something to consider using 5. CSS Shapes: in this video, we're gonna cover how you can use CSS shapes to add visual interest in how you lay out text . You can actually use them to align text with a shape so that your having a custom look. So we're going to start with our HTML. We're gonna say this is like we're gonna use this for an employee bio section, so that's gonna be our main tive. And then inside here, we're gonna have article tag with the actual bio, and then we're going to have the employee name. The's are fictional. Of course, you can put whatever you want inside here and then for the we're gonna have an avatar photo , which is the thing. We're gonna use us a CSS shape, but I'm gonna be pulling in images from this site. Private are dot cc. They already have people images we can use. I'm going ahead and selected some specific ones where you can click on this image is and browse if you want to be specific in which ones. So I'm gonna use image tank and this is image 16. I'm also gonna added class to this so I could style it, and there is our fictional Gina, and then I'm going to do is add of hair graft tag. We're gonna add some text, which we'll be wrapping around the shape so you can put whatever you want in here as well. And let's get another paragraph. It's easier to see this effect if you have more text versus just having you're not going to really be able to see it. If it's just a couple lines, okay, and then we're going to start on our styles. We're gonna use the plate is a color, and then that really should do it. Let's end in our responsive typography that we did in the rest of the class so far. So the base funding will be 60 pixels, and it will grow for this one of doing it a bit differently, Um, or adjusting the fonts starting at 700 pixels, and we're gonna make it 20 pixels, which is showing here right now because I'm on a wider screen with and then we can was add in our fox next step, you can go through the process of adding a Google Funt directly from cope in like we talked about. Just copy the link tag. I have pre selected a Google front called Catamaran, so I will make sure my meta tag and then said Cameron in here. And you can also add your font family as a CSS Very bold. So definitely recommend it if you're gonna be reusing it. Okay, so now we have catamaran loading. It's looking better, and I'm gonna also be adjusting in the line height for my paragraphs. It's a little bit tight right now. That's something you also want to consider adjusting a different media queries. You can have, ah, tighter light height like smaller value of Mobil's. Okay, now let's work on our employees bios, and we're gonna set of Max with so that they're not gonna be so why and I will center it that is getting apply. That's looking good. And then we'll add our individual employed bio styles for that. This is where we're going to start adding the we're gonna initially constrain the wit to 80% of that 1200 pixels. So things get even narrower and also sending that and just the bottom padding is well marked by the margin, because I'm gonna be adding a second bio and I want them to have some space between them. Then we're gonna reuse that media query from earlier this 700 pixel one. And I'm going Teoh, adjust the mix with so that on wider screens, it's even more constrained just to keep the line length reasonable. Client lung lines are harder to beat. Oops, I meant 50%. Okay. Okay. So this is a part of we're gonna add inner CS, that sheep. I have a photo class applied to the photo. I'm gonna be declining a width on that. And we wanted to be a circle. Something used border radius of 50%. Now it is a circle, and then I'm gonna be using floats here, which is an older technique. But they were great for this particular use. And now we're floating it left. You can see the text is still kind of boxed in around the the circle. So we're going to add our CSS shape. She a sheep outside circle and there we have it. We can see the text is now aligning very tightly with that circle shape. But I actually wanted to have a little bit of breathing room, so I'm gonna add let's say 25 pixels and that is looking pretty good. And just to show a repeating use of this, we are going to add in a second employee, this is totally up to you. I think it will look more complete. We're adding in Ted. Um, I basically reuse the bio. All I did was change the photo and the name in the pronounce. So you can see how you could definitely create something interesting with this. And this is something that's definitely gonna work. Okay, Really. Old browsers and don't support this as well. We'll just ignore this so that they will look more. They're just gonna look square, which is totally fine as well. In terms of how the text, those if they support border radius, still still see the circle. It doesn't actually look too bad, but this gives it a little bit extra 6. Angled Edges: in this video, I'm gonna cover how you can use angle edges on sections of your page to add some visual interest. We're gonna be re using some of the code from the first lesson the hero section. So I'm gonna have been met. Attagirl. And then I'm going Teoh the same front, the same Google fund that we used there. And now I'm going to and my market for the hero section. All I've done that's different as I added a each one class as well, which will be using for styling. And then let's go ahead and add our CSS variables, which are the same that we used earlier in our responsive HTM ill media query is well based font size. So this is all from earlier a swell and let's add in our hero section styles as well that we used in that first listen. So now we have something showing up, which is good, and let's add our H one styles which will apply to that tagline. We also want this to be wait and we haven't added our body class styles yet, so we can do that now we will be setting up our font in there, which is insane that we did earlier as well. And we're gonna be using some other headings as well. So I'm gonna add some styling for those I just only minimal I don't want, um, margin top on them, since that's gonna affect layout. And while I'm appears really toe, add all my HTML tags styles at the top. I'm going t o this one to ensure the images don't exceed our the width of the browser, which is something you'll see everywhere. It's good to use. Okay, so now we have our hero section. It's display grid like we did earlier. We have our tagline. Let's give ourselves a little bit more space here, okay? I'm gonna We're gonna be using a H two classes. Well, so I'm just gonna and in the styles. And then I'm gonna copy the tagline styles which come from the first lesson as well. That will center it because it's using its a grid child. And it has a margin of auto right here. So now we have our first section done. And then in the next section, which will be new, we will be adding those angled edges. So I'm gonna copy and paste some html just for time's sake. For a second section, it's gonna be our store and e noticed. I'm sitting the color white so we can't even see that. OK, yeah, we already have color white. That only applies to the tagline. And then we need 1/3 section just so that will be a little the angle edge. So I'm gonna add a very simple third section. That will be events I did pulling all these images from unspool ash. So that's a good option like I mentioned before. So now we just need to add are some styling for this store section just so that we can get a more realistic look of how this would work. So I'm gonna add We're reusing a container tive in these this second and third section, and we will instead of mixed with for that. Okay, we have that done. Then I'm going to add some styles for the our store section, which is a little more in the second section that we're working on. Um, I'm going to be using position relative because we'll need that later, as well as a C index for the angle edges, so that's why that's there. And then let's add in some more store detailed styles. This is separate from the angle edges, and it's not is important. So I am just gonna copy that in for time's sake. You can really put whatever you want in this section. I'm just doing a three column layout with CSS Grid that is Onley a single comets stacked on mobile and then at 100 pixels it goes to three comes and then let's add in Our events section is, Well, there's not too many styles for that. So and you can put whatever you want in this section is well, just that Ah, third section to be able to accurately show the angle edges. And now you can start adding those edges when I'm gonna be using is a good reference. Is this article about how to do the edges with transforms? Their examples mentioned SAS, which were just using CSS, but it's the same general approach these covered right here in this article. Okay, so we're gonna be adding to suit elements to the store details section, and that is what is going to allow for those angle edges so we're gonna go up to store details, and that's where I am just gonna copy and paste this in because once a get it started because it's kind of a lot. And then I will explain. Let's send it back in color initially, though to White. And then we will be setting up being alleges. And this is for the tough edge first, and you can see it's not so that hard to set up. So sometimes it requires some finagle ing. What is in these sections, the top value you might need. You adjust as well as the height, but the Vergis using position absolute and the parent is positioned relative and the magic is askew. So that is that angle being applied 3.5 degrees. And then we're going to do the same thing for that bottom image. Very similar. We're gonna cup e, they use the same background color, and then the only thing that's gonna change is this will sit down below because we're sitting bottom of zero. So it's below the bottom edge of the that parents, which is the our store div. So now we have our angled edges and then one other thing I wanted to show here is that you could actually use a background image. That's something like a repeating pattern and that will also work with the angle edge. So I'm gonna add that in no and then add it to both our pseudo elements. And I'm also gonna add it to the parents. This waas something that I was able to generate online. There's tons of SPG petr generators. So that is definitely I just realized I had this to the wrong section. So it's definitely something to consider using, um, looking for our store. And there we have it. We have angled edges it just as a little bit of extra. And it's definitely something you can do when you are even using a repeating pattern, you can just make sure to apply the same pattern to you're too. So sue elements in that section and you are good to go 7. CSS Filters: in this video, we're gonna cover how you can use CSS filters to add visual interest in Photoshopped like effects all the CSS. So the HTML we're using is very simple. It we're just gonna have the hero section and that's it. In our tagline will be Explorer. And then let's go ahead and make sure pen settings how we have the response of minute tag And I'm gonna add the font so that I've pre selected just a Google fund. So that in and that is it for teach to mow Very simple. And I'm going to add next Are CSS variables really doing white? It's going to use the shorthand. If the all the characters are the same letter, you can just type the 1st 3 and then I'm gonna set up. We're gonna use this later as our CSS filter setting. I'm gonna be using an invert of 20% which you'll see later and like we've been doing before , let's add our HTML styles. I'm also gonna set a background color on the issue moment which is needed due to of bug with CSS filters. Currently on what I saw its chrome and Firefox. So we need to have this Aker and color set. It cannot be transparent. Okay? And then we're just gonna add our body styles for this. We're gonna be using pre selected a background image you can use whatever it would you want to be pulling that in from on splash like we've been doing for already. And I'm in a used the scene background properties that we've been using. Let's tidy that up. Okay? No, I just realized we're duplicating this. I don't want 100% cover, and then we're gonna have this beat a full height of the you part harmonies ah, 100 VH with just 100% of the height. And then we're gonna set a color for text here to wait. And we didn't yet to clear our front family. So it'll do that now, And this is also going to be a grid item, and then the only other section is the We're the only section of this page. It's going to be full height, and that's gonna be a flex container. I haven't just gonna copy and paste in my flex values to save time. It's just setting it up in the comb direction And then we're also, you know, center all over text. And because the body is a grid elements we can do margin of auto again to center are tingling. Then we're gonna do is and in the tagline styles I'm gonna go with a aren't weight of 600. We'll start off with font size of four friends for relative units. I'm gonna just the letter spacing just for personal preference. Make things a little bit closer together. And then for whiter screens, we're gonna have the tagline a lot bigger. We are going to go with 10 rooms. Boom! It's big. And then the only of Italy set the filter. So we are going to set the CSS filter on the body, Ted. So take a look at what we have now. This is with no filters. This is just with our styling in place. It's kind of contrast e with the the background has a lot of dark colors and then wait. And then our text is pure white filter. We're gonna be supplying our invert filter in blue. That is the result of that. It basically inverts the colors, but only by 20%. So it's kind of subtle, but it actually makes it kind of look more cohesive. Um, and you could definitely tweak these values as needed. If I open the debug you in my dev tools, that would be a good way to take a look at those values, and you could play around with other filters. You could do great skill. So that's all black and white you could do. There's tons of home, so I definitely recommend playing around with those in seeing what you like in what looks good will really depend on what you have on the page as well, so you can adjust the opacity. There's these are very powerful, and I help you give a chance and show I'm out. 8. CSS Blend Modes: and this video, we're going to go over how you can use mix blend modes in CSS to add photo shop like effects and will also be building on what we did in the previous list. So let's get our HTML set up. We're gonna end the responsible in a tag, and I'm gonna be using the scene based styles as the previous lessons. So it's gonna end in it funds and I want a copy and paste in the 20 bit of markup that we used because that's all we're going to use in this pen as well. And we will be using similar CSS variables to what we did before. We're gonna use the waiting in. We're also going to use black this one, and are mixed blend low that will be using. We'll be sending it to overlay. But there's just like with the shelters. There's tons of options and then later the end, I'll give the option of applying the filter that we used in the previous lessons. We'll have that available as well. Then we can set up our base html styles we have, but we've been using so cooking piece that and similar to the CSS filters. There's actually a bug in chrome. This appears to be Crumb on Lee. We need to set a background color on the HTML tag. It cannot be transparent. Otherwise, you won't be seeing any of the blend mode show up. So that's that. Then I am going to reuse the body styles that we used in the previous lesson. We'll be using the same background image and also the same a hero style. So I'm gonna copy does in this well still flex container and actually with puts implied that it is 100% with. So we have our hero, same styles before. And then we're gonna reuse the tiger in styles, Wells office, copy and paste. That is well, and then for this one, I'm not gonna put the text in the center just because for readability the effects were applying. It makes it hard to read on top of the back room, so that's why that's slightly different than the last. Listen, and then here is where I'm going to apply the mixed blend mode. It's going to go on the hero section, and it's a little bit subtle, but you can see how the fire. Remove it. We have black text because that's the default text color. And then when I apply the blend mode, it just starts blending it in with the background. It's kind of interesting effect, and there are a lot of options for this is, well, that you could play with. If you go into debug mode, you could do inspect, and then you can play with C. We said is a CSS variable so you can just play around. I'm sorry. That's the wrong. We want to play with mixed blood mood so you can set it to it might be easier. Just said it directly here. Okay, driven and hero tag color burn screen makes it basically disappear. Gold supply looks pretty similar to black. There's a lot of options here, so it's fun to play around with that. And then the other thing I wanted to show Waas. If we want, we could also apply that CSS filter that we used in the previous list. That way you can see that you can use the CSS filters along with the mix blend mode at the same time and get even more options, and I'll provide a link for code pen that I created where you cantata go between the two and set different combinations and see how that looks. And I also wanted to show you could try sitting a different font color if we put white here . That also is a interesting effect in you can see how there's like unlimited combinations you could do so I definitely hope that this is inspired you to try some of these out. Even if you're just using the filter or in the mix blend mode individually, you still have tons of options, and it's definitely can provide a lot of visual interest, so give it a try. 9. Bonus: SVG Animation, Part I: and these next two videos, we're gonna talk about SPG and how we can animate elements of SPG files with just CSS. If you're not that interested in SPG, feel free to skip Thies to consider them as bonus videos, and you can go on to the next the final lesson after that. So what is SPG? SPG is scale of elector graphics, and the great thing about them is that they are crisp at all screen sizes, including retina displays and non retina displays. They can be animated with just CSS like we're gonna dio. They can also be animated with JavaScript, and they're even multiple ways to use them. You can use them with Justin image tag like a regular image. You can also embed them directly in your HTML, which we're gonna be doing to give more control over styling so they're pretty powerful. And in order to creator Edit S P G's, I definitely recommend vector editing software like Adobe Illustrator or there's a lot of free ones out there is well, I believe escape. So feel for you, toe, take a look around. All right, let's get started with our phase one of our SPG bones video and this first phase, we're going to be preparing the assets that will be using for the second phase when we'll bring them into Copan. What we're gonna do is use this free Winter Mountain landscape, P and G, and then we're going to crop it a bit, and an illustrator will create an SPG that sits on top of it. And then we'll add our stars and illustrator. And then we'll bring everything in the Copan and will animate stars. And because everything is the same size, it will scale up and down with the browser with two. So you can download this image from here to get started. I've already done that. I'm going to create a new document in Illustrator. You can use whatever vector editing software you have. I'm gonna go with 2000 pixels by 9 60 long pixels for my document, because that's what I scaled the in the mountain image to. But you can use whatever rectangle size you want. Then I'm gonna do file place. I'm gonna bring in the mountain image, and I will show how you could craft the image directly here in Illustrator. So I'm gonna do crap. Then it's gonna auto select what it thinks that I should drop. But I'm going to override that. I'm gonna hit the lock to maintain the aspect ratio. I'm gonna go to 2000 pixels and hit, apply, and then it's still a bit too tall. So I really do crop again. It's begin auto selecting from an override. That and then I went uninsulated this aspect ratio because we were just gonna be rubbing empty space now. So I'm gonna go down to matching the size of our board approximately, um and then we'll do apply. So now our mountain image is ready. The mountain. It's good to name your layers. I'm gonna move it on to the airport. Then we are going to create a new layer for our stars. And first, we're going to create a rectangle just to make sure that the stars layer is the same dimensions as this photo. I can actually type the high in here, and it then the rectangle is created, and I'll just line that up with the image. And now that we have that actually gonna hide it so we can see what we're doing. The stars for the stars. I'm gonna use a black fill and transparent stroke. And then I'm going to be using the star tool, and I'm gonna be creating stars in three different sizes of star, like a normal signs from the zoom in of its We see better. So that's gonna be like the normal size. Then we'll use these layer names later for styling. So I'm just calling that star. And then we'll create a slightly larger star that will be our medium sized. We'll call that star dish medium and then we'll create one other size star a bigger one. It will call that started, and then I'm going to do is copy and paste to create more of these. And I will maintain the same layer names which will use later. If you want to continue on your own, feel free. I'm going to speed up the rest of the video. But first I'll explain how we will be exporting these assets for the stars we're gonna do. Make sure we have the rectangle visible to will do file export selection and then we have the correct has set. One looks good. SPG is a format and make sure this object ideas said to lay earnings because otherwise the layer names will not be in the SPG. And we need that for styling. And you'll do export asset and then similar for the mountain image. If you cropped it, you'll need to export that as well. We can do export for screens. I forgot, Teoh actually only want begin high the stars so you don't get confused. So do file export for screens and select our port one which will contain our mountains. And PNG is the format one X is fine and export airport. And now I'm just gonna be continuing to create stars. So feel free to stay watching. You can slow it down if needed, or I will otherwise see you in the next phase two video and we're set. 10. Bonus: SVG, Animation, Part II: All right, Now we're ready to start using our assets in company. Just one more step I'm going to do, which is optional. I am going to optimize my SPG by using this online tool called SPG org. It's free to use the only thing I want to make sure I don't have merged path set because that's gonna change. The actual underlying stars we want to maintain them is separate paths. So as long as you cook out, mark up and it looks something like this and you see the stars in here, you're good to go. I'm gonna download that from there, and then we will be ready to work on her pen. I've already started a new pen here, and I've added in the meditative we've been using. And I also added dancing script, which is a Google Funds. And I added, are based html styles that we've been using as well as this responsive image styling. Just to make sure the image scales appropriately and now we can work on our HTML. We're gonna have a div class of hero, and then I'm gonna have a container to hold my hero images. And then now it's time to actually use that SPG. We're gonna actually copy and paste it in entirely. So I'm going to open it up and control a or however you choose to a select all and then copy and then paste. And the only thing I want to do is add a class of stars. And while I'm in here when you changed the title to stars too and then I'm going to remove this first path, which was that rectangle because we don't need it anymore. So our SPD is set and in that same div, I'm going to include our image. You can feel free to reference the pen links that I provided. Use my image if you'd like or you can. If you have co print pro account, you can upload your own file directly to Copan. Otherwise you can host it on an image service like flicker Or it might even work from Dropbox. So I'm going to be using my let's see what do they close mountain crap. So I have the your available I'm just gonna pasted in here. It's always good to send a note tag. So now we have our mountains and our stars so we can start on while I'm here. I'm just going to add the rest of the HTML. It's just a tagline. And now we're done with HTML. Other than I see, I forgot to add our class, which will need her styling on the image that's gonna be a class of mountains. And now we definitely have some styling to do. First, I'm gonna copy and paste in some CSS variables which will be using including our font. And now we can go ahead and start adding in our styles. I'm gonna be using some styling that will stack the image, it, the mountain image and our SPG It's gonna be position lto. We're going to use some positioning values margin left of lady of 100%. And this is just another way of stacking things on top of each other. Now that we can, we see that they're stacked and I'm also going to set up some background on the hero section, which is gonna be default to blue and next of I'm going Teoh So that hero images did. I'm gonna add some styles there over full of hidden just to make sure everything fits inside that is our container fall inside zero just insures. There was a gap between the mountain image and the edge of the view port. So that gets rid of that because we can't normally might use display black, but we don't want to use that in this particular layout. Next, I'm gonna add by tagline styles and I'm gonna add in some media queries just toe increase the sides cause it's looking a bit small on desktop that's looking good. And then you can see that are SPG needs some styling. The stars are still using their their dark Phil, And we wanted to be Wait so we can just use the fill property to change that and height of 100% and save. Okay, so now is the point where we're gonna add in our star animations. I'm gonna be using a few different key frames just for some variation. But you could definitely just create one of these and use them for all of your stars. So this 1st 1 is for the regular size stars, and it's just changing the capacity at different points in the animation on. Then the bigger stars will get these key frames. So it's just just opacity change, but just slightly different property values at different times. And then for the medium stars, I have even a different one. So I just wanted to add lots of variation, but you definitely do not have to do that. And then we're gonna add in the animations so that we're using these key frames. So we need to use the data attributes and R selectors. So this will be for the smallest stars. And I'm gonna go four second store ation the animation key, frankly, twinkle star, it's gonna be easing out for the easing. I'm in a delayed it start for the first run for 0.2 seconds just for some more variation. It's gonna repeat forever, go in alternate directions and actually run backwards. And there you can see it's already taking effect. And the copy this and we'll dio a similar thing. But for the medium stars, we're gonna go with three seconds. It's good to vary these events just for some more interest. Just because nature is also has a lot of variance. We're gonna go with four seconds delay there and we won't use the backwards and then we'll head are these stars and I'm going to use two seconds there and that's gonna get the big, big star key frames. And we'll also go backwards on that again, just for variation, and you can see that's already happening. Now I'm things repeating and looks good, and there's just one other set of key frames that I'm gonna add. And that's for the hero section, the background color. I decided I wanted that, too. Change. It's going to start with the blue that we set, and then it's going to go to a darker blue and then an even darker blue, and we are going to apply that to the find our hero section. We're gonna go with sloth record on key frames, which I just created. I'm gonna set a duration of. That's something I needed. You can play with the values for sure. I'm gonna go with two seconds delay if I the first run maybe goes out for a while, and then we have been in place as well, and you can see how you could do a lot with these subtle animations put together. It's something pretty unique. I hope that this inspires you to try out some animations with SPG and definitely consider layering them with a PNG for additional styling options. 11. Site Considerations: and finally, in this video, I wanted to cover some considerations to keep in mind when using any of the techniques that we covered in this course. First of all, some guidelines for animations you'll want to avoid adding in animations that interfere with your users ability to interact with your site. So, for example, a block site you don't want to have some long animation that's flying all over the screen. That's making it hard for users to read your blood posts or on a retailer sites something that's gonna make it hard for a user to go through the check out float. You'll want to also set your animation durations appropriately, so typically, this would be half a second or less so something short that's not gonna be running forever and distracting the user and then, in terms of performance, the best properties to enemy our capacity and transform those give the smoothest performance. And if you're looking for more information on that, I will provide some links and the resource is in terms of styles. You'll want to make sure that text is readable when you have a lot going on underneath the text. Obviously, there's definitely a possibility. The text is gonna be not so readable. So you wanna make sure you take your font color, your background color and any grainy and supplied into account as well. Aziz. The colors of the image you're using and the front that you're using You should consider using a color contrast tool when you're selecting the color palette for your site. This will include colors use for backgrounds and for Fox, and I'll provide some links for that as well. And then, when you're using newer CSS properties, including CSS grid CSS filters blend modes, you'll want to take browser support into consideration you can use. Can I use dot org's toe? Look up what the browser support is and then make sure that you provide some fall backs for older rousers so that they still have a good experience. Leslie. You want to optimize your images. You can use image Optima Fear on Mac. You can use Web based tools, and I'll provide some more links. Make sure that you take that extra step just to prevent your users from waiting forever downloading huge images on your site, and I hope that was helpful 12. Conclusion: you've completed the course. Congratulations and thank you for taking this class. I hope that you'll walk away with some new techniques you can use in your next Web project , where you're looking at a bit of visual interests for the class project, you'll take two or more of the techniques that we learned in this class and apply them into your own Web project. Also, be providing a cope in that could be used as a starting point if you don't have a current project. If you like your code pen submission to be added to the class collection I'll be creating on Copan, let me know. Thanks again and see you next time.