Easy Fullscreen Landing Page With HTML & CSS

[Music] hey what's going on guys in this mini project we're going to be creating a landing page with a full-screen image background now this is something that stumps a lot of new developers and new designers is how to get it so that no matter how how the browser is sized the image the background image stays full width and full height so that's what we're going to be doing today and what we're building is not going to anything special it's not going to be a full-fledged website but we're going to focus on the showcase the the landing page the image and then we're going to add some content down here well style it a little bit we're going to use a little bit of flex box but you'll see if I resize this page here this browser window the image is always going to stay full width and full height no matter what until we scroll down and then we can see the content all right and it's completely responsive if we go down to you know mobile size it'll look like this and you can see the rest of the content we're using flexbox to align the content here as well as these boxes down here but again this is not a flexbox tutorial if you're interested in learning flexbox I do have a video called flexbox in 20 minutes so let's all be doing today guys hopefully you enjoy it and let's get started this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time job in the industry to learn more visit dev mountain comm or click the link in the description below alright guys so we're going to get started here we're going to start off by grabbing the image now of course you can use whatever image you want the one that I'm using is this Beach image from pixels comm which is a fantastic site for free stock photography very high quality images and you have different sizes to choose from this is the URL for this image if you want this one and I'm grabbing the large which is the nineteen twenty by twelve eighty so let's click download and we're actually going to save this to the project folder that I've already created called beach landing okay there's nothing in it right now so I'm going to create a new folder in there called IMG that's for our images and we're going to save this file as showcase dot JPEG all right so now that we've done that because you have downloaded a couple times now that we've done that I'm going to open up atom which is the text editor I'm using which opened on the wrong screen all right you can see over here I have my beach landing folder with our image folder so there's a few other things we need to create here of course we need an HTML file so we're going to create index dot HTML and then we're going to need place for our CSS file so let's create a folder called CSS and inside there we'll create a file called style dot CSS and that should be it as far as I'm the structure so let's go to the index.html and we need to generate some head and body tags standard HTML document structure now I'm using a plug-in called Emmet which is absolutely incredible it allows us to quickly add HTML and CSS abbreviations I just did a video on it I think two videos back so you guys may want to check that out but that allows us to do exclamation and then tab and it generates our structure for us gives us head body tags HTML tags also gives us a viewport for responsiveness so very handy plugin and i'd highly recommend it so let's go ahead and just change the title i'm going to call it the beach and we're going to have to link our CSS files so we're going to put in a link tag here so that's going to be CSS slash style dot CSS and then we're going to go into the body now the main image showcase area I'm actually going to put in a header tag alright so I'm going to say header and we're going to give this an ID of showcase ok now I can do this here because I'm using Emmet so I can say header and then we want an ID of showcase and then hit tab and that's what it'll give us all right so in this header we're going to have a couple things we're going to have an h1 so when the h1 I'm just going to say welcome to the beach and then we're going to have a paragraph and I'm going to generate some text here so I'm using Emmet so I can say lorem 15 tabs that will give us 15 word some sample text again if you're not using Emma just go ahead and type you know put whatever you want in here so let's go ahead and put and create a link that's going to be styled as a button so it's going to be an a tag I'm going to give it a class of button alright and it's not going to go anywhere we'll just put a hash in there and then for the text we'll say read more all right so that takes care of our header now I'm going to save this and I'm using a plug-in called atom live server which will allow us to open up this directory on my localhost and a browser of course you don't need that you can simply open up your index.html file but I'm going to go ahead and say start server and it's going to open it up in the browser and this is what it's going to look like so far alright now what I'm going to do I'm going to hold off on the rest of the HTML the sections below it because I really want to focus on this part of it the showcase image so we'll hop back into atom and we're going to go to our CSS all right so let's add some stuff for the body okay so for the body we're going to zero out the margin so there's no spacing around it you know what let me open let me split the screen here yeah well just I guess I guess that's good so margin and this is all the load by the way this atom live server as soon as I save this will update so we got rid of the margin around the body let's go ahead and change the font because I don't want Times New Roman it's very ugly I'm going to say font family I'm going to use Emmet and just say FF font family : a tab and that will give us Arial with a backup of Helvetica and sans-serif save that and you'll see the font changes alright so lets change the size of the font i want it to be a little bigger than the default so we'll say font size and I'm going to set it to 17 pixels alright and then we're also going to change the color to a brownish color which is the hexadecimal value of nine two six two three nine all right and then we're just going to set the line height the default line-height 21.6 and save alright so that's that's the styles for the body now we're going to work on the image the showcase area remember we gave the header an idea of showcase so we're going to use that and we want to give it the background image so background image and then URL okay so the URL it's going to be dot dot slash because we want to go outside of our CSS file and then into the image folder so into IMG and then showcase dot jpg now what this has done is it's given a back it's given the image background to the showcase header but it's only taking up the amount of the actual content which is the h1 the paragraph and the link so what we want is it to take up the entire thing now when you're starting out you may think that you can just say height 100% like that but what that's going to do is it's not going to change anything because it's taking up a hundred percent of its content all right now we could also set it to a fixed pixel like if we said 800 pixels and save that we'll make it 800 pixels high which is okay if your browser is always going to be at that that 800 pixel mark which it's not you know a lot of people are going to view your your content your website on different devices different browsers different sizes so that's not going to work either so what we want to use is we want to use the VH CSS unit so if we look up CSS units you know we have pixels we have percentages we have points what we want is VH and this stands for viewport height okay so this is the the main secret of what we're doing here and the viewport height what you can think of is the whole viewport which is the body of this browser here think of it as a hundred slices across okay and then you can fill it you can fill whatever amount of slices that you want so we want it to cover the entire thing so we want a hundred viewport Heights so we're going to set it to 100 VH and save and now it's at 100 by the way the space you're seeing up here is just from the the margin from the heading okay by default actually you know what I'll do is I'll just zero out all the margin and padding by using an asterisk right here okay so this is actually called a reset we're going to set margin zero and padding zero by default there we go alright so we have a hundred VH now if we wanted to take up half the size we could do fifty VH and save and you'll see it takes up those fifty slices of the hundred slices available and you can do V W as well you can do it with wise but we're going to stick with just the VH now as it is the image is taking up the full window but we can't see the whole image we're just seeing a piece of it so we want to add a couple extra things here we want to add a background size property so I'm going to go right here and say background size and we're going to set that to cover okay and then we also want to set the position I want to Center the image so we're going to set background - position and we're going to set it to Center alright so now let's go ahead and save it and there we go so now if I go ahead and I resize this you'll see that it's a hundred it's going to be a hundred viewport Heights now if I add some content below it under the header let's put in a section I'm going to give it an ID of section - a alright and then we'll just put let's put some content will say lorem 100 tab and actually let's put that in the paragraph so lorem 100 tab save and now even though I have some content in there we have to scroll down to see it because the image the header takes up a hundred viewport Heights alright so that's that's the main ingredient in creating this this full screen landing page now I don't want to just stop here and leave you with this even though we've really covered the the viewport height so we're going to continue to style this now this text and this content I want be in the middle here there's a few things you could do you could add you know padding to the to the top you could Center it but we're going to use flexbox which makes it really easy to align things and is really the recommended way to do things like this at least recommended by me so we're going to set the showcase to display flex this makes it a flex container as soon as we do that it's going to take all the content within it all the you know we have the h1 the paragraph and the link and it's going to align them horizontally as flex items okay now there's different properties we can use here to change the layout and I don't want it to go across like this I want to go down so we're so the default is actually a flex row but we want to change it to a column and we can do that by saying flex - direction and we're going to set it to column and we'll save that and now it's going to go you know vertically instead of horizontally now I want to set it to the center I wanted to I want to align to the center both horizontally and I want it in the middle here okay vertically so there's two properties we need to add here one is to justify content and we want to justify it to the center if we save that that's going to move it down to the to the middle and then we want to align it to the center as well so we'll say a line content center and save I'm sorry not online content Hawaiian items and save and now it's in the middle okay and I do again I have a flex box in 20 minutes video that you may want to watch a few if you want to learn more about flex box so I'm also going to just add a little bit of padding on the sides here because when the window gets really small you'll see that the text is right up against it so let's go ahead and just say padding you'll say zero top and bottom and then 20 on the left and right okay that way when the screen is really small it has some space on the sides so now let's take care of this stuff in the middle so we'll start with the h1 I'm going to make it little bigger so let's go over here and say showcase h1 and I'm going to set the font size to 50 pixels okay so make it bigger and then I'm going to set a margin bottom actually well we don't need the margin bottom I initially was I was going to do that because I didn't have this reset up here at first but I'm just going to leave the reset alright and what that reset does again is just takes away the margin and padding from all elements on the page because by default h1 and paragraphs they have default margins so that's just going to remove it so for the paragraph I want to make that a showcase paragraph and I just want to make the font a little bigger on that so we're going to say font size and we're going to set that to 20 pixels all right and then for the button or it's actually a link formatted as a button so showcase remember we gave it a class of button so for that we're going to change the font size to font size to 18 pixels and we're going to take the the underline off so text decoration we're going to set that to none we're going to change the color to to that brown color which is this right here this hexadecimal value okay we're also going to add a border around it if I save it so far it's going to look like that but let's go ahead and add a border border is also going to be that brownish color so just grab that we'll say one pixel solid we also want some padding so padding is going to be 10 pixels talking bottom 20 left and right and then let's make it a little rounded so we'll safe order radius we'll set that to 10 pixels and save and there's our button all right now we're going to have to push it down a little bit so what I'm going to do is add a margin top of let's try 10 pixels actually let's do strike 20 all right so that's good now when I go when I make this smaller you'll see that it kind of messes up that's because we need to add a text-align:center - to the items in the showcase as well so right under a line-item Center let's do text-align:center there we go all right now the line height for the heading and see when it breaks into two lines I want this a little smaller so what I'm going to do is in the h1 I'm going to set the line height line height we'll set that to one point to save and that looks a little better all right so that's the showcase that's yeah that's the whole showcase now what I want to do actually we want to take care of the button:hover I wanted to have an effect where the background turns brown so real quick let's just say showcase class button on its hover State we want to add a background of this color here and we want to make the color of the text white okay so now we have that hover effect all right so the showcase is done now let's move on to the sections I'm going to go back to the HTML let's just make this a little bigger all right and we have our section a here and we're going to have a section B as well so I'll just copy this whole thing and we'll go ahead and paste that in and we'll change this to Section B and then we're going to have a section C section C is actually going to have three divs within it so let's say section ID will be section - C and then in here we're going to have a div with the class of box 1 and let's put alarm we'll put 20 words in here and yeah so let's copy that we're going to have box 1 box 2 in box 3 alright so if we save it this is what it's going to look like by default just a bunch of mess so let's go back to our CSS and let's see we're going to add some padding to we're going to start with section a so ID section a we're going to add 20 pixels padding okay so 20 pixels padding let's add a background of the brown color now we can't see any text because the text color by default is that brown color so we're going to go ahead and just change the color to white all right and then let's just text-align:center all right there we go now for section B I'm just going to copy this so section B again will have 20 pixels padding but the background we're going to say the background is going to be very light gray so f4 three times and then the color is going to be the brown color which is the default so we don't actually need a color all right so let's save that and there we go and then for section C I want these three divs to be aligned horizontally so we're going to turn them into Flex items so we're going to say I D section C we want to display as flex okay once they save that you'll see that they'll automatically align horizontally so what I want to do is each the first and the last box box one in box 3 I want those to have a dark background I'm actually going to put a - box - one two and three all right so let's say we want to take section C and we want the class of Box one okay we also want Section C the class of box three that actually should have a dash there okay so one in three and we want the background to be the brown color so I'm going to grab that base that in and scroll down we'll also need to make the color white okay let's actually add some padding to each of these divs here so I'm going to say section let's say section C div and say padding 20 pixels okay there we go now the middle one here you could leave it at white if you want but I had it at a slightly lighter gray than this gray so what I'll do is grab that and let's do box two and we'll set the background to f9 three times get rid of the white coloring save and now it's it's light gray and it's it's a little lighter than this one alright so that looks good guys I think that's it yeah so let's just just you know make this a little bigger see how it looks good let's change the height and notice that that the image is going to stay in the background no matter what size until we scroll down on mobile devices it'll look like this which looks pretty good so that's it hopefully you guys enjoyed this project and I know it was kind of simple but I think you know a lot of you guys seem to like these kind of front-end projects with CSS and HTML and stuff I try to keep my content very diverse you know I think the other day we did an ionic 3 mobile app and now we're doing you know CSS landing pages so expect things to you know be pretty diverse I want to kind of you know reach everybody so that's it guys please subscribe please you know leave a like follow me on social media you know support patreon whatever you guys can do is fine or just watch the videos so thanks for watching guys and I will next time so if you guys really like my videos and you learn a lot from them and maybe you have a couple extra dollars to spare check out my patreon page I'm working on creating special content for patrons you also get special deals on future courses and there's even an email support here for all YouTube videos and projects to learn more visit patreon.com slash travis e media

Channel: Traversy Media

Views: 271,441

Keywords: html, css, html css landing page, fullscreen landing page, image landing page, html landing page, full screen landing page

Id: hVdTQWASliE

Length: 22min 37sec (1357 seconds)

Published: Mon Aug 14 2017