All righty. Before we get into our main project, I'm gonna start by showing you an amazing resource for getting inspired as a design conscious developer. So, we're gonna go to code pen.io. And on here there are many examples of websites components and unique 2d and 3d animation to interact with, including being able to see the full and functioning code and experiment with it. In this first video, I'm going to show you a simple way to make a responsive video background that you can use as a landing page. This will be very basic and use just HTML and CSS.

We're going to be utilizing a new feature in html5, specifically a video element. We can set this element to loop autoplay, and this will also need to be muted because of new browser rules, but that's fine because we're using it as a background. Alright, so onto the coding, we're going to go over here, we're going to click start coding. And I'm going to zoom in just to make it easier to see with control plus zooming in in Chrome. And see that gives us a little bit of a different layout here. And to start with, we're going to create a video element, we're just gonna type the video and press Tab that'll kind of autocomplete for us.

We're going to remove this source for now and we're going to add it back after as a separate element. We're going to make sure that this element loops is muted and autoplays. Then we're going to give it an ID of video dash background. All right, and then inside we're going to create a separate source element And we're going to add back our SRC source. And now we need to go out and get a video. So to make this quick and easy, we're going to get a video that's already online.

So we're going to go to pixabay.com. And we're going to click videos. And we're going to want to get a video where the camera doesn't move. So that will make it for a more convincing infinite video. I'm going to type in waves cuz I want to see. Alright, so I like this one, it doesn't really seem to be moving.

And it's a nice view of some waves crashing. So we're going to click on that. And then we're going to click free download, and you can decide the quality that you want. I'm going to go with 720. We don't want our video backgrounds to be huge, even this is probably a little bigger than we want, but in this case, that's all right. So we're going to right click and on the download button here and copy the link address.

And then we're done with that. And we're going to paste that into the source. And you can see now we have, we have something going on in here. You know what, I'm just going to actually fullscreen this to make it even easier to see and control plus one more time. All right, so in our CSS, we're going to begin by targeting our video dash background ID. And we're going to start by giving it a position fixed, so that means it's going to stay where it is in the page and things will be able to scroll over top of it.

We're going to give it a right zero, meaning it's going to start at the absolute right side of the page. We're going to give it a bottom of zero meaning it's going to start at the bottom of the page. Next, we're going to give it a width of 100 v w, which stands for viewport width, which is the width of whatever screen size you have right now you can see that mine is kind of constrained into a square. And because of this, this will not look ideal as I'm showing it to you. But on a regular desktop, it will look good this way. And we're also going to give it a height of auto.

If I wanted to make this look good, right now, I could actually flip these. So one of these can be 100. But one of them needs to be auto in order for the video to fill up a space of any size. So you can see I'm actually going to switch these for right now. I'm going to do auto and 100 viewport height, and you can see that it fills up the square perfectly even though it's not a square video. It's a rectangle.

It's a 16 by nine. But for you guys, if you're going to be doing this on a record regular size screen, you have to remember I'm very zoomed in here to show you guys. It should be with 100 vw and height of auto. Okay, so moving on, we're going to target our video element. And we're going to give this a position absolute. Again, meaning that it won't move, we're going to give it a top 50%.

And we're going to give it a left 50%. And then the third part that will make this work is transform translate bracket minus 50% comma minus 50%. So that's the vertical and horizontal axes. So these three things together, combined to center our video in the page. So you can see it's centered vertically, and obviously it's taking up the whole width horizontally. And now moving on We're going to make a overlay for our background.

So this is going to be a layer that's kind of see through, it's usually black, but white or any other color can work. And this is gonna allow you to conceal any imperfections in your video, especially if you're using a video that is very low file size, meaning that it's not going to be as sharp as like a 4k video would be. So to start out, we're going to create a div back in our HTML. And we're going to give it the class equals video, overlay. And back in our CSS, we're going to target our video overlay class. We're gonna give this a position fixed We don't want this to move, we're gonna give it a left zero, meaning it's gonna stuck start at the we're gonna give it a left zero, meaning it's starting at the very left of the page, and we're gonna give it a top zero, meaning it starts at the top of the page.

But it's kind of irrelevant because the height is taking up the whole height, and the width is also taking up the whole width. The most important part of this, of course, is adding an actual color. So we're going to give this a background color, RGB whoops, or GB b a, and we're going to give it zero comma zero comma 0.5. So that means that we're giving a black overlay of everything and point five meaning it's half see through. So you can see that this darkened everything up quite a bit. But this is also going to provide another benefit and that will Make it easier for our title to be seen.

So we're going to go ahead and go back to our HTML and we're going to add a title, we're just going to make an h1 press tab. And we're just going to write your title here. So we're gonna want to actually change this up a little bit. And we'll target that down here. Normally, you would have a class for this, but because I'm just showing you quickly, I'm just going to leave it as an h1, we're going to give this a position of absolute so we can position it exactly as we want on the page. We're going to give it a top of 50%.

So we want it to be 50% down the page. Let's, let's make it 40%. Yeah, that ends up mostly in the middle. And we're going to change the font color to be white. So it's going to really pop on our black overlay so you can see it's a lot easier to read. We're going to give a font family of how the QA and lastly we'll just give a font size of three REM.

Okay, so if you're not familiar with REM units, I'll provide a link in the course to read more about it. But basically on an average screen size, one REM equals 16 pixels, therefore two Rams would be 32 pixels and so on and so forth. Alrighty, so now that we've finished our code pen project, I'm actually going to zoom out to show you what I was talking about earlier. So you can see I was at 175%, I'm actually going to zoom out all the way to 75% because my Windows is zoomed in even more so that you guys can see the code that I'm writing. But you can see now on this different size here that our video is filling up our whole screen. And for you, it should look more like this when you're working on code pen, then what mine looked like and so you can see It does, in fact work if you have the right screen dimensions.

Awesome. Alright, so in your version, I want you to feel free to experiment with different fonts, videos, and overlay colors. And don't forget to submit your code pen link for assignment one. I'll personally give feedback to all submissions. And I've created a collection on code pen where you can see everyone else's work. Alright, so now on to the main course.

I'll see in the next one. Bye for now.