HTML & CSS Mobile UI Layout | CVS Clone

[Music] this video is sponsored by Ella node anyone can build on the node whether you need a development portfolio to land your next job or you're ready to put your app into production lonoa can get you there for $20 in free hosting credit click the link below or sign up at lynda.com / traversée hey what's going on guys so in this project we're gonna be building a mobile first layout using HTML and CSS and we're actually cloning the landing page of the cvs/pharmacy web app and I just called it T vs just to change things up a little bit but you can see we have the the top part here with the search bar this little area these different buttons which will be using CSS grid 4 and then we have this sticky footer at the bottom with some font awesome icons and if you look at the actual app here this is what we'll be building I may actually add a project to my modern HTML and CSS course on udemy where we create all these other sub pages as well but for now we're just going to build the home page and what you're looking at here is just a device toolbar and the google chrome dev tools so this icon if I click that we can toggle it and you'll see that this is what it will look like on larger screens which still looks pretty good and you can change devices as well so we can look at like iPhone X we can look at the pixel we can look at an iPad and I'm just going to keep it on the 6 7 8 just because it gives it this nice chrome and it looks like an actual phone and what I mean by mobile first is as we're building this we're going to keep it on the mobile screen and build it for the mobile device and then if we need to add any media queries for larger screens later on we'll do that okay so let's go ahead and get started I'm going to actually put this down here and make this smaller so that we can have both on the screen at the same time both vs code and the in the browser all right so as far as the file structure I just have an IMG folder an image folder with all the different images and you can get these in the link in the description to the code pen I have all the images hosted in the cloud so you can grab them from there or of course you can use your own images so in addition to this folder we just need an index.html and we just need a style dot CSS and we're gonna start off with the markup here in the HTML file so let's use Emmet to create a boilerplate so exclamation enter and then for the title we'll say T vs pharmacy and let's add a link to our style sheet okay and then we're gonna be using font awesome so I'm just gonna go ahead and open up a new browser tab here or browser and I'm just going to search for font awesome CDN I'm gonna use font awesome for that way we don't have to actually let's login and download a kit and stuff like that so we just click this bootstrap CDN link we can grab it right here so this link right here I'll just click and copy it and then we'll paste that right above our link to our stylesheet and then the last thing we need is just a font I'm going to be using the Roboto font from google fonts so if we go to font stock Google and just search for Roboto grab that real quick I'm just gonna grab the link copy it and then we can close that up paste it in and there we go so I'll save that and then I'm just going to open this up in my browser so I'm using an extension called live server so I'm going to right click and just open with live server okay and obviously there's nothing here because the body is empty but I'm going to open my chrome dev tools with command option I and I already have my device toolbar selected if you don't you can just click it and you can just toggle it on and off like that okay I'll just make this smaller all right so now we have this nice chrome around our user interface so let's start on the body so for the body we are gonna have that splash page we'll use a little bit of JavaScript to just make it flash at the beginning but we do need the markup for that which is simply going to be an ID of splash and then we're gonna have an image with the class of logo that's gonna go to image slash logo.png all right we don't need this right now so what I'm gonna do is just comment that out for now those lines out then we're gonna have a Content class and basically the content class is going to wrap around everything except for the footer because I want the footer to be sticky and I'll show you how to do that later on but just know that everything is gonna go in this content class except the footer okay including the header so let's add our header we use the html5 header tag with a class of app - header and inside here we're going to have a container because we basically want to push everything here into the middle and we want to set a width ok so inside the container we're going to have two things the logo and the text input the search input so let's do the logo so image with a class of logo logo PNG and then underneath that we'll have an input and that's going to have a class of search and let's give it a placeholder of search dot and then we should be able to go under the header and we want our sub header so basically this part right here I'm gonna give a class it's gonna be a div with the class of sub header and you want to make sure you're still within your content div which ends right here all right so in sub header we're going to have two flex items we're going to align this with Flex blocks so this is going to be the first flex item which is a div with two paragraphs and then the image is the other so let's create the div with the first paragraph which is going to say now delivering see now delivering our X and more and then we'll have another paragraph which just says find out now and we want to use a Chevron icon here so we use an I tagged with a font awesome class FA and then another class of FA - Chevron - right okay so we'll go ahead and save that and take a look at our application or our UI and that's what it looks like so we also need the delivery image in the sub header which is going to go under the div so right under this div let's say image and give it's a source of image and then delivery PNG which we won't be able to see because it's white just like the logo for now at least so that's it for the sub header now we want to do this area which are the grid items of boxes so we're gonna go under the sub header but still within the content div and let's create a class of grid that's going to be a grid container where we actually set the display property to grid and then I'm also going to add the container class to just move everything into the middle so in here we're gonna have six items okay they're each going to have a class of item and this is the first one which is this right here so we have an H for this one is pharmacy and then we have a paragraph let's say to our exes that are ready to refill and then an image which this one is gonna be the medicine bottle so it's medicine PNG alright if I save that we take a look we just have a giant image we'll fix that later now for the rest of these the other five items I'm gonna paste these in just because I don't want to be too repetitive you can just copy em or you can grab them from the code pen so under this item which ends right here I'm gonna go ahead and just paste these in okay so the second one is the deals and rewards and we have the second clinic instead of the Minute Clinic the shop the photo and the weekly ad all right and then I'll save that see we have all those images now all those items and now we want the footer so we're gonna go under the content div now so it should be the very last thing right above the body and let's add a footer tag with a class of app - footer and this is going to be a UL with some allies and each Li is going to have an icon so this one is FA and then FA - heart and then the text is just gonna say home okay and then I'll just I'm just going to copy and paste in the other three okay so we have home we have show card account and fine store all with different icons so if I save that and we go all the way down you can see our footer okay which is very ugly so now we're gonna jump into the CSS so we can close that up open up our CSS and I'm gonna start off here with just creating a couple variables or CSS custom properties on our root scope meaning we can use these anywhere so we're gonna have a primary color which is going to be hexadecimal CC 0 0 0 which is like the sorry for zeros which is like that CVS red and then let's do secondary color which is a slightly darker red so 7c 0 0 0 0 and I have a whole video on CSS custom properties if you're interested and then for the let's see we're gonna say HTML body and we're going to set a font family of Roboto sans-serif and then I'm gonna add a height here later when we get to this sticky footer but I'm not going to do that just yet I also want to add a reset for box-sizing I want to set that to border box and we want to reset the margin and padding for everything so margin zero and padding:0 okay so down here let's start on the container so that the point of the container is basically to kind of move everything to the middle give it a width I'm gonna give it a fluid width of 90% and for the margin we're gonna say zero top and bottom auto left and right to move it to the middle and let's add a little bit of padding say 10 pixels and we'll just set the overflow to none and save okay you can see the search is pushed over a little bit so let's work on let's start top down so work on the header so that has a class of app - header and we're gonna give it a background color of the variable we have of primary color so we need to use this VAR and then open then parentheses and then the name of the variable ok and then I'm gonna set a box shadow so that right here we have a little bit of shadow so for that I'm going to use 3 pixels 3 pixels we'll do 10 for the blur and then for the color will do 888 okay so that just gives us this little shadow which looks pretty nice and then we're actually going to X before I do anything let's make the the size of this logo a little smaller so we'll say app header and then class logo let's set the width to 170 pixels okay so I want these to be aligned on top of each other so what I'm gonna do for the container in the app header so I'm gonna say app header container I'm gonna make that a flexbox so I'll say display flex which if I save by default flex box is going to align horizontally however if I change it to if I change the Flex direction to call them it'll they'll go on top of each other which is what I want and the reason I put it on the container is because if we look at our HTML if we look at our header the immediate child is the container so if I set this to flex then the container would be the Flex item and I don't want that I want both of these to be the Flex items so I put the Flex on the container okay let's see in addition to that let's line the items to the center okay since we're using flexbox we can do that and then let's also justify the content to the center and I'm gonna set padding so we'll do 15 top and bottom 10 left and right and then let's move the will add some margin bottom to the logo to move that down a little bit so let's say margin bottom we'll do 16 pixels okay now I want to style this this search box just because it doesn't look very good we want it to be a little bigger add some padding so let's do app header and then search we actually don't even need the search class since it's only one input we could just target the input with the type of text and let's set some padding we'll do 7 pixels and let's set a width I think 300 is good I mean I don't think any smart phones are going to be that you know smaller than that so I think 300 should be safe what else let's say let's change the border color too let's do 777 let's do border color actually no let's not do that let's let's leave the border off I don't know why I did that okay and then we're just gonna add a border radius of three pixels just a slight want to set border zero there alright so that should be it for the text input now let's move to the sub header which is this part here okay so it's a class sub header background is gonna be the secondary color so let's use a variable or custom property of secondary color that image is huge so I'm just gonna I'm just gonna shrink that down real quick so we'll say sub had our image and let's give it a width of 40 pixels okay so back up here in sub header let's make the color of everything white okay and then let's add a box shadow here as well I'm actually gonna use the same shadow I used up here so I'll just grab that okay so now you can see that has a little shadow now I want this to be slightly slightly thinner than the the header here so and I also want basically margin Auto as well so let's say margin and let's set this to zero on the top and bottom Auto I'm sorry let's do zero top Auto right and then I want some margin on the bottom so we'll do we want to do here 16 pixels and then Auto on the left and then I'm gonna set a width here of 90% which should make it a little yeah there we go so now it's in more than the app header okay so I want to I want the font size to be a little smaller so we'll say font size it's 16 by default so let's do 14 and of course we want to add some padding here okay move it away from the sides and then as far as alignment goes I'm gonna display flex because remember we have two flex items this div in this image and by displaying flex now they're going horizontally okay I'm just going to add the aligned items Center and then I want basically the the truck icon I want to be over here so when we use flex we have a property called justify content and I can take the remaining space and do what I want with it in this case I want it to be in between the two so I'm going to choose space between for my value here and I'll save and then you can see the remaining space is now in between the two flex items so let's see think that's all we need to do here so for this paragraph these the text is really close together so I'm just gonna add sub header and then our paragraph let's just give it a will save margin for pixels just to kind of split it up a little bit alright so I think that looks pretty good looks clean now for the grid for these items here let's see we have grid that's the main grid container and then we have grid and then the item and we have the image say grid item image and I just want to shrink that these images up so we can see what the hell is going on so let's say with and the grid item images we're gonna do a 30 pixel width alright now we want two columns right if we look here we have two grid columns so the way that we do this is on the parent which is the class of grid we want to set the display property to grid I also have a grid crash-course if you're interested in that now doing that itself doesn't do anything we need to add grid template columns and we want to even columns so we use fractional Zef so we can say one fractional or one fractional yeah I'm sorry and one fractional this will give us two columns if I save now we have two columns if I wanted three I could add another one and that will give us three so the grid system is is fantastic now another way we could do this is we could say repeat twice one fraction and that will do the same thing gives us two columns okay now let's add some spacing or some gap we can use the grid gap property I'm going to set that to 10 pixels just just kind of split it up a little now the items let's go down here into the items we're gonna set a property display property flex which by default will align everything in the item horizontally I don't want that so I want to set Flex direction to column which will make them on top of each other make them vertical alright and I'm the reason I'm doing this is so I can easily align the image over here which I'll show you in a second now we want to add a border of one pixel and let's do ccc which is a light gray and solid okay so each item has a border around it let's add some padding to take it away from the border so we'll do ten pixels and then I'm gonna do a lightbox shadow let's do one pixel and two pixel blur and color will be CC C so it just gives it that kind of raised effect so we're going to do here the H fours here are very close to the the paragraph text so let's grab those we'll say grid item h4 and let's just add a margin bottom of five pixels just to move those down a little and then for the paragraphs themselves a grid item paragraph I'm gonna shrink the font a little from 16 to 14 and I'm also gonna add a color of the secondary color so we'll use our custom property here our secondary color alright I'm also gonna set the font weight to bold and set a margin bottom just to push the image down a little bit so our margin bottom 20 pixels okay now since I used flexbox for the item itself on the image I can use the align self property so we're gonna set that aligned self to Flex end which is basically to the right so if I save now you can see all those images are now aligned to the right okay so I think that's pretty much it for the the grid items looks like I just wrote two here instead of four just change that it doesn't really matter but say for refill alright so now these are identical except for the footer so let's not let's work on the footer styling so before I do the sticky footer and show you how to do that I'm just gonna style it add the background color align them and so on so let's do app - footer and we're gonna add a background of light gray so f4 three times and then color of 444 which is a lighter color and then a padding of 10 pixels if I save it looks like that so far let's shrink down the font size a little to 14 and let's add a margin top to push everything on the top up 10 pixels okay now for the alignment remember these are list items right so I'm gonna make the UL the unordered list a flexbox so let's say app footer ul and let's go ahead and set that to flex so if I do that you'll see they'll align horizontally and I'm gonna set the align items to the center and then the justify yeah justify content so justify content I'm going to use space around and what that does is this remaining space here it's sort of like space between where space between it would put it in between each item but space around that it'll actually put it on the outside as well so it'll go in between and on the outside it'll basically distribute that evenly so if I save there we go okay we also want to remove list style set that to none so let's see I also want to set the list items themselves to display flex and then put them in a column so that the icon is on top of the text so let's say app footer ul Li so now we're targeting the list items and we're gonna say display flex but we're gonna set the Flex direction to Col them instead of Rho and now you can see they're on top of each other now we want to Center them so we want to use a line items Center and save and now you can see that the icons are in the middle now I just want to make the icons a little bigger than that so I'm gonna say AB - footer ul Li icon and set the font size 2:22 pixels okay just to make them a little bigger all right now you can see that this is not this footer is not sticky okay there's space underneath it which I don't want and I'm gonna show you an article that is really really cool it gives you a bunch of different ways to add a sticky footer because this was a pain point for me for a long time but it's at CSS tricks and if you just search for a sticky footer basically it gives you five different ways to do this and I used to do this kind of stuff here with negative margins and so on but what I want to do is the third option which is flexbox or fourth right here so basically we've already done this we have content around everything except the footer and then we just simply need to add this a little bit of CSS so on the HTML and body we want to add a height of a hundred percent and in we want to display body as a flex item set the Flex direction to column meaning vertically set flex one on the content and flex shrink zero on the footer so doing these things should push the footer down to the bottom and keep it there all right so let's go back and let's go up to the top here and I actually wanted to I didn't want to do that I wanted to have body here and put this whoops put this down here and then in here we wanted to put our height a hundred percent and then on body let's display flex and set the Flex direction to call them all right and then we have to just add this flex 1-0 Auto to the content and then flex shrink zero to the footer so let's go down to content actually we didn't put content anywhere so we'll put it right here and then in the footer so app footer which is right here let's add Flex shrink zero and save and now you can see that this is now stuck to the bottom so I think that that's one of the easiest and cleanest ways to do this rather than using negative margins and all that crap okay so now we just have the splash page to do so I'm gonna go back to the index.html actually know before we do that let's let's handle desktop widths so I'm gonna just copy the link here and then open up a new tab and stretch this out just so we can see see what it looks like so let's paste that in so it doesn't look too bad but I think it would be better if we had three columns instead of two so this is actually really easy we can also make the images a little bigger if you if you see something else that you might want to change on larger screens that's fine but I think that I just want to have three columns instead of two and just larger images so this is really easy all we have to do is add a media query so say media and we're going to use in this case a min width okay so what we've been doing is a mobile-first approach we designed for a mobile screen and now we're going to we're going to work on larger screens so typically what I usually do is mobile last I'll do the you know the larger screen first and I'll add my mobile queries with max width in this case we're doing the reverse we're doing this the small screen first and then min width and I'm gonna do a min width of 768 pixels okay so basically if the screen is 768 or larger then let's take our grid okay so this is our grid container and let's set the grid template columns which initially are repeat to 1fr so two columns but now we're going to do three on larger screens and then I'm gonna take the image so grid item image which I believe we have set to a width of 30 I'm gonna set it to 60 make them a little bigger so now if I save now we have three columns and we have the images much bigger not much bigger but I think it looks it looks a little better okay and I mean if you want to add some other stuff maybe you want to make these bigger or something you can do that but I'm focusing mostly on mobile here so let's close that up and this still looks the same we still have our two columns here because this is all done in the media query so now let's do the splash so I'm gonna go ahead and uncomment this right here so basically we just have an idea of splash and then we have the logo just kind of above everything so we need to add some CSS to this so we'll go right here and let's just put a comment in here this is the splash screen has an ID of splash and we just want we want it to cover everything so the way we do that is we set the position to absolute okay so absolute meaning that it's kind of it's it's taken out of the regular flow of elements and then we can set set it to the top zero left zero so basically we're saying start here okay so put it here absolute and then let's make the width 100% so it goes all the way across and then the height is going to be a hundred viewport Heights meaning it takes up the entire page so now the splash div which only has the logo in it is taking this whole area up now I'm going to set a background color and I'm gonna use the variable I'm gonna use the primary color and save and you can see it covers the entire thing okay now I'm gonna make sure that it's it's always on top by just setting a z-index of 2 and let's let's now take this image will shrink it up first of all so let's say splash image and we'll set the width here to 300 pixels and then I want to move it to the middle so its parent which is a splash ID I'm gonna display flex okay and then we're gonna set the Flex you know I'm gonna set the Flex direction to column and we want to align items to the center okay so that moves it to the center that way now I want it to move to the center vertically as well so let's do justify content to the center okay that moves it to the middle and then basically what we want to do as far as making it disappear is we're going to add a class of fade and that fade is gonna set the opacity to zero meaning that it'll it'll disappear so I'm gonna go oops I'm gonna go under the image here and let's say splash and then class of fade and set the opacity to zero which is invisible okay and we're going to dynamically put that on with JavaScript now I wanted to have a fading effect so we simply need to add a transition property on the splash element and we're going to transition the opacity property with one second so it gives it that that it takes takes one second to change the opacity to fade out so let's save that now obviously this isn't gonna do anything it just stays there so this is where the JavaScript comes in and I'm not even going to create a new file or anything because it's so simple so I'm just gonna go down to the bottom here and add in a script tag okay and what we want to do is call a set timeout and set timeout takes in a function I'm going to use an arrow function and it takes in the second parameter of the time that you want to wait for whatever you put in here to happen and I'm gonna wait 3,000 milliseconds which is three seconds actually it's two two so two seconds and what we want to happen in here is we want to toggle the fade class so let's say document dot get element by D and we want to select the splash element okay so we're selecting splash and then we're going to say dot class list dot add this is a way in JavaScript that you can add a class actually I'm not going to add I'll just let's use toggle so toggle will add it if it's there or remove it if it's not there and then we're gonna add in the fade class okay so let's save that and now let's reload this what did I do here why isn't it fading so have splash fade opacity zero oh so what I've done here is I've said there's a faith that this is styling a fade class inside of splash fade is actually going to be attached to splash so it this should be no space here so we'll save that and there we go so we reload waits two seconds and then it fades because what's happening is it's getting that fade class put on actually we don't even have to use toggle we can just use ad and that'll do the same thing all right so that's it and this project is up live right now at Traverse see mediacom slash tv s if you want to check it out on specific devices but yeah so that's it hopefully you guys enjoyed this little project please leave a thumbs up if you did and I will see you next time

Channel: Traversy Media

Views: 90,411

Keywords:

Id: 1_ljUv6cvVE

Length: 35min 34sec (2134 seconds)

Published: Mon Dec 16 2019