Build a Responsive, Mobile First Website - HTML5 & CSS3

[Music] hey what's going on guys in this project we're gonna be building a responsive simple one-page photography website using just html5 markup as well as some css3 including mobile first media queries and a little bit of flexbox for alignment and this project is absolutely fine for beginners we're not using any kind of framework or not using bootstrap or anything like that it's just pure HTML and CSS okay so let's take a look at the project so it's it's a fictional company called Acme photography and I tried to style it like most of the photography sites you see they're very minimalistic they have a lot of white and then they have a lot of high quality images and we're actually going to be using unsplash for some of these free stock images now this part here that you see is always gonna be the landing area so even if this is a smaller height it's gonna it's going to look like this and as soon as I scroll down it'll scroll out of that area and even if it's bigger like this as soon as I scroll down it goes out okay so this is the landing area split this way on desktop devices I'll show you the mobile version in a second and we just have some text we have a button that says view work with the little CSS transition for the background and is when I click that it'll bring us down to the artwork okay now we're gonna achieve this by using jQuery and I don't use jQuery for a lot of things but I think it is good for like animation and smooth scrolling and stuff like that now I could have used a specialized library a smaller library but I want to gear this more towards beginners and I know that a lot of beginners really like jQuery and use jQuery alright and I shouldn't even say just beginners but designers a lot of designers use jQuery web designers so we have some high quality images here these are going to be completely random from unsplash so if I was to if I were to reload the page you'll see they'll change however this top one I always want to be this image so we're gonna specify this specific image for the top for the landing all right and then we just have five of these images with some captions underneath with a title and some dummy text so you can see we have a bunch of these and then down at the ball we just have a simple footer we're using the Roboto condensed font which I think looks really nice and clean and then we have a nice box shadow around everything all right so very very simple but I think it looks pretty nice and elegant I'm not the best designer in the world but you know I try to go by some of the other photography sites that I was looking at so let's make this smaller and you'll see it has a max width of 900 pixels as soon as we go below that it'll start to kind of scale down and then when it hits 500 pixels it's going to change to this and it's gonna basically split the opposite way it's gonna split vertically and I can still click view work goes down to here you can see all the images everything is responsive looks nice what it looks good and that's it okay so that's what we'll be building guys I hope you enjoy it and let's get started all right so if you aren't familiar with the term mobile first it's basically just an approach to design it's and it's an approach to creating your website or your application UI on small screens first and then adapting media queries for larger screens and doing you know whatever whatever you want to change for larger screens so we're gonna start off with a mobile view which is basically just the stack to view so everything on top of each other and then we'll add media queries to for instance split the landing page up horizontally instead of vertically okay so that's basically in the the gist of what mobile first is and a lot of frameworks such as bootstrap 4 have adopted this this this approach all right so I'm using vs code as my text editor which I'd highly recommend for just about any kind of programming and I have a folder called Acme photography and it's completely empty so if you're following along go ahead and create an index dot HTML file and we're gonna create a folder called CSS and in that folder we'll have a file called style dot CSS we're also going to have a j/s folder for our javascript and we're gonna have a file on there called main j/s now our main j/s all its going to be is that little piece of jQuery that's gonna do the smooth scrolling effect we're not gonna do any other JavaScript aside from that so let's go to our index.html now visual studio code has something called Emmet and I'm sure many of you are familiar with it but if you're not Emmet is basically it allows us to use shorthands for HTML and CSS and it allows you to write it much quicker or not short hands I guess they're they're abbreviations and it comes default with vs code but if you're using something else like sublime text or atom or just about any any good text editor you can install Emmet as an extension or a plug-in so I would highly recommend it I couldn't imagine writing writing HTML without Emmet these days so in h2 index.html I'm gonna do exclamation tab and Emmet allows us to just generate this basic boilerplate so it includes the doctype okay it's an html5 doctype and it has the HTML tag with the Lang attribute set to English head tags body tags inside the head it gives us some meta tags including the viewport which is very important for a responsive design you want the width set to the device width and we have the initial scale set to 1.0 okay now before I forget I just want to include my CSS so I'm gonna put a link tag in here to CSS slash style.css and then for the title we're just gonna say Acme photography I cannot spell in and talk at the same time now I'm gonna save this and what I'm gonna do is I'm gonna open this using an extension a visual studio code extension called live server and if you want that you can click on this icon and search for a live server and just click the green install button and what this does is it allows us to open our HTML file on a dev server on a look on our localhost and it also has auto loads so our auto reload so that when we save something it will reload we don't have to actually go up and click the reload button so it's very helpful in that aspect I would suggest it but again it's not you know it's not needed you can just open up your your HTML file but you will have to reload after your change you make your changes so I'm gonna open it with live server by either right-clicking or on a Mac ctrl click and open with live server and it's just gonna be a blank page ok you can see our title at the top but our body is completely empty now again I know a lot of you know how to use Emmet you know what it is but for those of you that don't I do have a tutorial on my channel on Emmet where I go in-depth but just to show you a couple things so let's say we wanted an h1 tag we could do h1 hit tab that will give us the beginning and ending tag if we wanted an h1 with let's say a class of tests we could do dot test tab that'll give us a class if we wanted an ID we could do hash test tab and that will give us an ID now if we want to div with any of those we we don't even have to put the word div or the tag div we can just simply do ID test tab that'll give us an AIA div with the idea of test same with class and that will give us a div with tea with the class of test all right so you'll see me do this throughout this tutorial and I just wanted to explain you know how I'm doing that so we want to surround everything except the footer inside of a main tag for some reason main doesn't work with Emmet for me so I'm just gonna do put the actual tag in here so in the main tag and this is an html5 semantic tag and it's it's basically it's where you want to put your your main content all right now in here we're gonna have in a div with the ID of landing ok now I'm gonna keep the finished product open just so what you can kind of see what's what this div with the ID of landing is this entire thing so both of these sections right here and then I'm gonna split it up into this which will be a div with the ID with the ID of landing text and this will have a div with the ID of landing image so let's go in here and let's put another div with the ID of land texts and then I also want to just put an idea of landing text in ER as well and then that's where this content is going to go so the h1 which is going to be Acme photography and then underneath will be in h2 and we're gonna say beautiful natural photography okay now this here looks like a button but it's actually a link we're just gonna format it as a button within CSS so let's put an a tag I'm gonna give it a class of BTN that's what I'm gonna use to style it later on and this is gonna go to hash or number sign or Sharpe whatever the hell you want to call this thing and it's going to go to images okay and what this will do is it'll put it'll point to a element that has the ID of images which we're gonna create later on okay or in a few minutes and then I'm also going to add an ID to this link because that we need to grab on to it from within jQuery so that we can add the smooth scrolling and I'm gonna use an ID for that so I'm just gonna call this view - work and then for the text of the link or the button whatever you want to call it is gonna be view work so if I save this and we look at our version it looks absolutely horrendous but we have no CSS yet so it's gonna look horrible until we add our CSS and the way that I like to do things is do all of the HTML first and then start to style it I never got into doing you know part of the HTML styling that doing the other part and styling that I don't do that so we'll just do all the HTML so we have the landing we have the landing text landing text in ER now this part is going to be a div with the ID of landing image and that's going to go right under landing text okay still within the landing div so it's say id landing image and we're not going to put anything in here because this is actually good a background image so that means that we have to we have to insert this in the CSS not inline in the HTML all right and that's pretty much it for the landing so I'm just gonna put a comment right here and say landing area and we want to go under that div still within the main tag and that's what we're gonna put our images div okay so the images div is going to include from here so that this little heading as well as all of the images and captions so let's let's do that so we're gonna go in here and let's add the header so the header is actually going to have an ID of header and it's going to be an h2 and it's just gonna say our work save that and then we're gonna go under the header div and let's put the let's do the images so we want to put an image tag here with a source now these images are coming from unsplash which is a great service free service that gives you really high quality free stock images and you can just include URLs to generate random images let's see we want to go down and this is source dot unsplash.com by the way so you can get like images from a collection you can get a fixed daily or weekly photo you can also do random search terms and that's what we're gonna do for these these nature images and you can see they're actually using nature water as a search term so that's exactly what I want for the first one so I'm just going to copy this and we're gonna go back and put that in the source now since this is a remote image and it's not on your local machine it will it might be a little slow loading if you want you can download the image you could just go to this in your URL download it and include it in your in your strip file structure if you want but I'm not going to do that alright so if I were to save this you'll see that the image will show now it's going to go out of the screen it's not going to be fixed in the brow and the browser we're gonna do that within the CSS so don't worry about that yet now each image is going to have a caption so as you can see here each image has a little caption so directly under the image tag let's put a class of caption alright now if you're new to to HTML and you don't really understand the difference between ID and class there's no technical difference like functionality difference but there's a semantic difference so basically an ID is unique so for instance we're not going to have another div with the idea of images anywhere we're not going to have another landing ID or landing text these are all unique caption however we're gonna have a bunch of these so that's why I'm using a class for caption ok so just remember IDs should be unique and not everyone follows that but that's basically the best practice so captions will have an h3 will say photo 1 and then a paragraph and with Emmet we can say lorem 10 tab and that'll give us 10 words of dummy text so I'll save that and now under the image you can see we have this little caption so now we're gonna have five of these so I'm going to copy the whole image tag and the paragraph I'm sorry the image tag and the caption div ok and then we're gonna go underneath I'm gonna know two three four five we're gonna have five of these and then we don't want to keep the same URL because these will all be the same image so I'm gonna change the second one here to nature trees change this one to flowers this will be animals so you can basically just put any search term here and it will find an image that relates to its unsplash is a really really good service has a really nice API to work with as well and then here let's do clouds okay and then we'll just change the captions so this will be one that will stay photo one the second one will be photo two and then we'll do photo three four and five alright so we'll save that like I said it might take a second to load it depends on your connection but you can download these and include them locally if you want so now we have five images with five captions alright so that's it for the entire images div now what we want to do actually that's it for the whole main area so we want to go under main and now we're going to put the footer so we're going to use an html5 footer tag and inside the footer will have an h3 and we're just gonna say get in touch and put a paragraph and let's say email or call us to set up a consult okay so then we'll put another paragraph and we'll say email I'm gonna put the email inside of strong tags and I'm just gonna say contact at Acme photos dot test which I'm sure is not a real email address and then paragraph when we'll do phone put in a strong tag here and the phone will do let's say six one seven five five five five five five five all right so that should do it let's save and take a look at the footer and I know all this looks very very ugly but we'll fix that and the last thing we want to do in this HTML files is include our script now our script is going to use jQuery so we need to include jQuery as well so what I'm going to do is open up another browser here and we want to go to koat.com and we want to grab version 3 now you do not want to grab the slim version because the whole reason we're using jQuery is for the animate method or the animate function and the slim version does not include it so you'll get an error it won't work so we're gonna grab the minified version or the uncompressed and save this the whole script tag all right then we'll go back to our HTML and we're gonna paste this right above the ending body tag and then right below that we're gonna put our script tags so this should have a source attribute pointing to J s / main J s and save and that's it for our HTML that's done so let's move on to our style dot CSS file and we're going to be using a font called our font family called Roboto condensed okay which isn't included with your browser by default so we have to get it from google fonts so let's head over to fonts dot fonts google.com you can actually put the query in here as well but if you don't want to do that if you go to fonts google.com and just search for Roboto it'll show up here so we want the condensed we're gonna click the plus you'll see this pop up down here if you click that this will show you how to implement it you can either put it in a link tag in your HTML or what we're going to do is use the import in our style sheet so I'm just going to copy this import and let's go back to our style sheet and paste that in and now we're gonna say body okay so for our body we're gonna go ahead and let's go back to that page and we can now use this as a font family so we can say Roboto condensed sans-serif so let's throw that in there and now our whole website if I save it should be that font and you can see that it's changed if I go to the top here you can see everything is that fine alright I also want to just take away any margin from the bottom so I'm gonna say margin zero we're going to set a background color of a hexadecimal value of triple e which is a light a very light gray and then just set the height to auto okay so that's our body styles so next let's work on the h1 so this Acme photography right here and I'm just going to style the h1 because it's the only one here if you had other H ones you'd want to target this like you'd want to say maybe landing h1 or something like that but I'm just gonna use just h1 here and let's say font weight so font weight can take you know boulders and stuff like that but it can also take a number I'm going to put 400 and then the font size we're going to use to REM now I'm sorry 2.5 REM now if you don't know what REM units are I have a video on REM and M units on my youtube channel if you really want to go in-depth but basically a REM unit if you say one REM that's going to be whatever the core HTML tags font sizes x one okay and the HTML font size by default is going to be 16 pixels so one REM is gonna equal 16 pixels two REMS is going to equal 16 pixels times 2 which would be 32 and then 2.5 REM like we're using is going to be 16 pixels x 2.5 which would be 40 pixels and if we go and we open up our chrome tools over here I don't want it here Jesus let's put it down here and I go to elements and we select let's go to main landing landing text landing in there and we want we want to hover we want to click on the h1 and then down here in the CSS you'll see the wait a minute oh I didn't save this hold on let me save this first and now you'll see h1 has 2.5 REM now if we go down more alright let's actually click on computed it's hard on a small screen but you can see the computed font size is 40 pixels okay so it took the initial 16 pixel of the HTML and then times it by two point five and got forty pixels if I were to change this to just two REM and save now you'll see right here now it's 32 if I put it to one REM and save 16 pixels all right now I don't want to go too far into this like I said I do have a video on this but I'm gonna put this back to 2.5 and using R M or M units it just makes everything more responsive and if we were to go into the settings of Chrome and say we want the text to be large it would actually change the text it wouldn't do that if we use fixed pixels so what else do we want to do to the h1 we want to make it all uppercase even if the actual text is not so we for that we can use text transform and say uppercase and if I save that now you'll see it this is all uppercase and then I just want to take the margin away so say margin zero and save all right so now let's do the h2 which is the thing below it actually the h2 is that and also the caption weight is the caption titles h2s are the h3 all their H threes the our work is also an h2 though so it's going to style both of those and that's fine so let's say h2 and let's make the font weight 400 let's make the font size this time I'm going to do 1.2 REM so it'll be 1.2 16 pixels x 1.2 and then for text transform I want to do capitalize which will just make the first letter of each word capitalized and then let's take the margin away and save and there we go okay so it still looks like crap but don't worry now the images you can see are just horrible they're just full size they go off screen what we can do to contain these images is add the IMG tag so any IMG element on the page we want to display as a block level element and then we want to say we want the width to be a hundred percent of its container so if I save that now you'll see the images shrink down because they're now a hundred percent of the container which is basically the the browser window alright so now we want to deal with the main element so we'll say main and I'm gonna set a max width on the main to nine hundred pixels and we want to set a margin of auto so that it's in the middle now if I save this we won't see any difference now but if we were to make this bigger you'll see it ends at nine hundred pixels it's also pushed to the middle because of the margin auto now I'm gonna leave it like this for a second because I want to add the Box shadow which is the you know this drop shadow around the whole thing so for that we're gonna say box shadow and we're gonna set now there's a few different values I'm not going to go deep into this but it's basically the horizontal offset the vertical offset the blur and the color so we want to say 30 pixels for the horizontal offset zero and then for the blur we'll say 40 pixels and then the color is gonna be an RGB a value so that's red green blue alpha so it takes four things it takes the red value and I want this to be black so it'll be zero for red zero for green zero for blue and then the Alpha which is basically like the transparency or the opacity is going to be zero point one I want it to be a very light very light color I'm sorry very light whatever I don't know the word for it transparency and then for the bottom and right or top we want to do negative 30 pixels let's see if you want to do zero pixels and 40 pixels and then the color is going to be our GPA it's going to be the same value as this one so if we save that now you can see that there is a shadow around the box okay it's on the sides and on the bar now if you wanted this darker you could increase this let's say 0.4 and save and now you can see it's darker so if you want to do that you can but I'm gonna keep it at 0.1 I think yeah alright so that's it for the main now let's do the landing stuff so up here this is the landing right here and I'm just gonna make this smaller again so for the actual landing div it's not much I just want to add a background of white okay that's for the landing div itself but we have a bunch of stuff we want to do for the landing text and the landing image so let's start with the landing text now I want to properly align everything so we're actually gonna use flexbox here I do have a crash course on flexbox which if you're learning HTML CSS right now I would definitely suggest watching that and in checking that out but basically we can say display and we can display as flex okay I'm gonna save that you can see that the landing has has now has a white background whoops this should be ID there we go alright so we'll say display flex and then for the Flex property basically this is going to be it takes in three things flex Gro flex shrink and the basically the width which we're gonna say 40 V W now VW is viewport widths okay now let me just save this real quick and we're not really gonna see any difference here yet but for viewport Heights for VH and viewport widths V W you can think of it as slices and I've said this in quite a few videos if the height had a hundred slices and we set something to a hundred a hundred VH so 100 viewport Heights it would take up the whole thing okay and that's what we're going to do with the desktop version we're going we want the landing to be a hundred viewport Heights if you wanted it to take half the screen you would do 50 VH okay if you wanted it to take half the width you would do fifty vwv viewport widths we're doing 40 V W here okay if you wanted the whole thing you'd do 100 V W so what we want to do is add a height to this as well so let's say height and we're gonna add a height of 50 V H so 50 viewport Heights and save alright and now notice that this the landing text takes up 50% of the screen and it doesn't matter even if we make this shorter it's still gonna be 50% or I should say 50 viewport Heights now we want to align the stuff inside this landing text so since we use flexbox we can use like justify content and we'll say we want to justify it to the center if I save that that's gonna align it horizontally to the center now we also want to align it vertically to the center so for that we can use align - items and say Center and save and now it's aligned to the middle alright so using flexbox like this is easier than no I wouldn't say easier but it's it's more efficient it's cleaner then you know using padding's and stuff like that to put it down in the middle so we also want to add text-align:center because we want the actual text to be centered so text-align:center save that moves everything to the center and I want to just add a little bit of padding on the left and right so I'm gonna say padding right and I'm gonna do 15 pixels actually no it's not 2 pixels let's do one rim and padding-left one REM so that's actually going to be 16 pixels all right now that's pretty much it for the actual landing text div itself for the for the h2 here this beautiful natural photography I want that to be a lighter color so what I'm gonna do is I'm gonna just say landing - text and we want to target the h2 that's inside of it and then change the color to a hexadecimal of eight eight eight which is a gray so if I save that now you'll see that changes to that color all right so let's work on the button okay this right here which is just just a link right now so we're gonna go down and add the class of BTN because that's what we called it and we're gonna add a bunch of padding to it so let's say 0.5 REM so that's going to be top and bottom left and right is gonna be two REM okay so it's gonna be eight pixels by 32 now let's add a border around this so we're gonna say border 1 pixel and let's see for the color we're gonna do CCC which is a light gray and solid border so if I save this you'll see that the padding is here the border it kind of runs into the top that's because it's a link and links our inline elements so they don't they don't knock on to the next line we want to display this as an inline block so let's say display inline - block and save and now you'll see it's now not crammed up against that but I do want to move it down a little more so I'm gonna add a margin to it of two REM on the top so we'll just go like that - round top yeah all right we also want the border to be rounded so for that we add border radius and we're gonna do radius of 50 pixels save that okay and don't worry about it's gonna be bigger the button will be bigger when it's on a larger screen but like I said we're doing mobile first and on mobile I want the button to be smaller we also want to take away that ugly underline so we're gonna use text-decoration:none save that let's change the color as well from that ugly blue I don't know why they use that blue by default we're gonna change it to 3 3 3 which is a almost black and we also want to add a transition to the background no actually before we do that let's add the hover state so we'll say BTN colon hover and we want to just basically change the background so background to say f4 three times which is a light gray so now if I hover over it it turns gray but I wanted to have that that transition effect like that slow kind of like fade in so what we'll do is we'll add on a transition property and say that the property we want to transition is the background okay and we want it to be the length we'll say 500 milliseconds which is a half a second and we want it to ease in okay so we'll save that and now when I hover over it you'll see that it kind of fades in it's not just a sudden change and you can make that you can change that the time here if you want as well all right so I think that should be it for the entire this part here the landing text now let's do the landing image so let's go actually I'm gonna go above the button so right here landing image so the landing image is going to be a fixed image now I'm gonna pull unsplash back up and if you go down to right here you can actually use a specific photo and all you have to do is include the idea of that photo so I'm gonna copy this I don't even want the size I just want up to this point so I'm gonna grab that and I'm gonna paste that into background URL but I don't want this image okay so I want to find the ID for the image that I want which I don't remember what I searched for okay now just search the images we're gonna just go to unsplash.com not source unsplash and I can't remember what I searched for photography see it was a samsung camera and it was like a long photo maybe it wasn't photography because I don't think I went down this far I wonder if we search for Samsung no oh yeah here it is so basically if I click this in the URL you see the ID I just want to grab that so I'm gonna ctrl C I'm going to copy that and I'm gonna go back to my HTML I'm sorry my CSS and paste that in right here and then that will give us that specific image okay all the other ones are going to change they're just random depending on the category but this one will will be fixed now if I save it we're not going to see it yet because we didn't add any height or anything to it so let's go ahead and add some stuff here we're gonna add a background just some other background properties so background position is going to be Center we want this to be centered the background size is going to be set to cover okay we want the whole thing to show you don't want it to repeat so we want to say background repeat' set to no-repeat and for the height we're gonna set that to 50 VH because we wanted to take up 50 viewport Heights so basically the other half of the that the text is taking up and for flex we're gonna set this to zero and zero and one is just the default for the Flex grow on the Flex rink and then we'll set it to 60 viewport width and then just margin zero okay we'll save that and there we go so now the image takes up 50 viewport Heights this takes up 50 viewport Heights and I think that should do it for at least for the landing so now let's move on to let's see we have the header I guess yeah we'll do the header so we'll go down here and in our header ID and we want to style the h2 actually let's do the header first so we're gonna do the header and then we have some stuff that I want to do to the h2 as well that's in the header so for the header we're gonna display I'm sorry we're not going to do display we're gonna just add some padding so I'm gonna do let's do 1.5 REM save that so you can see that padding was added I'm gonna text a line to the center okay we're gonna add a background and let's do 333 so dark gray almost black we want to make sure we make the text white as well so we'll save that good now for the h2 itself we want to just but well first of all let me show you what I'm going to do I want a dotted border on each side so I'm going to do border dash left and let's do dotted that'll be the style one pixel will be the width and white will be the color all right and we're gonna want to do this oops we're gonna want to do this for the right as well so let's say border right same thing now if I save notice the borders are way over here and I don't want it I don't want that I want them closer so instead of being displayed as a block which h2s are by default I want to display as an inline block now if I save that you'll see the bores go in but obviously that's too close so we're just going to add some padding to the h2 on the right and left so let's say padding right we'll say one rim padding left one rim and save and there we go so that's the header now let's do the captions so notice the captions are right up against the side here I'm going to add some padding to those so caption is a class so and let's do padding and we'll say let's do 0.8 REMS and then I want to align everything to the center all right so there's our captions good so I think the last thing to do here as far as the mobile version is the footer okay so let's go down here we'll style the footer directly we want to text a line to the center and we want some padding so I'm going to say to REM top and bottom one REM left and right they'll say margin Auto to move everything to the middle and then the color of the text is going to be 333 so we'll save that now the h3 I want to be much bigger so I'm going to say footer h3 and we're going to set the font size to 3 R M so it'll be 16 pixels times 3 and let's add let's say margin bottom will be 0 and save and there it is alright so that is the mobile version if I reload these images down here will change to okay but you'll see this one this one's always going to be this image now let's make this bigger so this isn't really what I want for bigger screens okay we have the mobile set but for bigger screens I want this split up so it's not going to take much work to do that all we really want to do is display the landing div as a flexbox because when you display something as flex it'll automatically turn into a flex row which will go horizontal instead of vertically all right so what we'll do is add a media query so what's my doing it's not right so we'll say screen sizes five hundred pixels and up so to do a media query if for those of you that have never done them we do an @ symbol and then media and it's basically formatted like a function and it takes in a parameter of either a min width or a max width now since this is mobile first we're going to say min width of 500 pixels so basically this whatever CSS we put in here is only going to kick in if it's above 500 pixels when we say min width if we said max width it would be anything under 500 pixels and what we're going to do is take the landing okay the entire landing div and we want to display as flex and I'm gonna save that and let's check it out and you can see that it is now it's now displayed this way so when I hit under 500 it'll go back to the original now let's take care of the height so I'm going to set the landing to the height of 100% and save and notice that it still doesn't take up the whole thing what we want to do is set the landing text which is this whole block here in the landing image to 100 VH viewport Heights so remember the slices so we have a hundred slices we want it to set we want it to take up all of those 100 so let's add landing text and say we want the height to be 100 VH and then we'll take the landing image and say we want the height to be 100 VH let's save and there we go so now no matter how tall or short this is it takes up a hundred viewport Heights because that doesn't change it's not a fixed pixel all right now the only thing that I want to do the only thing left is this button I want to be bigger on screens that are 700 pixels or higher okay not 500 but 700 so around here or so so what we'll do is add one more media query so we'll say screens our screen sizes sorry about that traffic screen size is 700 pixels and up and we're gonna do media let me just move this up for you guys so media and then we want min width of 700 pixels and I'm just going to take the button class and I'm not gonna all I'm going to do is add extra padding so I'm gonna say padding is gonna be one REM on the top and bottom and three REM on the left and right which initially was what see button we had 0.5 and to REM so now we're just upping the padding which will make it look bigger so let's save and now if we go back you'll see that it's bigger but when we get to 700 just right there it shrinks down okay and it's still small on small devices on mobile devices or I should say really small mobile devices like cell phones because tablets I mean if it was a tablet it would probably be like right here something like that all right so I think that's it guys actually no it's not I almost forgot the jQuery so we want this we want this button to actually I mean it goes down to our work by default that's just default HTML behavior but we want that smooth scrolling so let's add that I almost forgot so let's go to main dot j/s and I'm just gonna say animate will say smooth scroll and what we'll do is we'll use jQuery to grab on to the ID of view work remember we added that ID to our button and then we're gonna say dot on and then an event so click so when that's clicked we're gonna run a function and in this function what I'm gonna do is I'm going to create a variable called images and we're going to set this to jQuery idea of images and we want to get the position so we want to do dot position and we want the top okay dot position top and then to animate this we want to use jQuery am i doing I want to use jQuery and in here we want to put it this on the HTML and body and this is a very common snippet what I'm doing here you'll find this all over the place and we're going to say dot animate and animate will take in this object where we want to say scroll top so basically we wanted to scroll from the top image it to images okay remember this this images is this variable here and then this takes in one more parameter which is going to be the time it takes so we're gonna say nine hundred okay it's milliseconds so nine hundred milliseconds to scroll so let's save that and you'll see that money changed up a little bit as far as indentation that's because I'm using the prettier extension for vs code to don't worry about that it's the same code it's just they just put some spaces and stuff so let's go ahead and try this so we come to the site we hit view work and there we go it Scrolls down to our work alright nice and smooth so that's it if you enjoyed this video please like if you are not subscribed and you like this kind of content please consider subscribing please consider supporting me on patreon if you can and that's it so I will see you next time

Channel: Traversy Media

Views: 220,859

Keywords: build a website, responsive website, website responsive, mobile website, responsive website tutorial, mobile first, create a website, html, html5, css, css3

Id: XsEnj-1hG2o

Length: 48min 23sec (2903 seconds)

Published: Tue May 29 2018