Build A Responsive Website With HTML & CSS Tutorial

hello everybody in this episode we are gonna do a follow-up video on that laptop UI design that we just did a few days ago so I know a lot of you requested for me to build this out with code so that's what we're gonna do we're gonna build this out with code we're gonna make it responsive and have a touch of animation to that so if you want to get started I highly recommend you to go to the description and get the files I'm gonna put them up to github so we can do it together and follow along so before we get going I also want to thank Skillshare for sponsoring this video Skillshare is an online learning community for creators with more than 25,000 classes and design web development and pretty much every creative outlet that you can imagine you can find some great courses there's one on becoming a full stack web developer if that's what you're interested in one of my favorite design courses is on here and I always come back for it for some tips and tricks these courses contributed a ton to my success and I always come back to them whenever I want to extend my skill set if you ever think about these courses are that they're straight to the point I don't have to sit there for 10 or 20 hours to get some valuable information out of them they're short and sweet and for me that's one of the best ways you can learn if you're a student or you're just curious about learning you can have access to all of these courses for less than $10 on an annual subscription you can join by clicking the link in the description and the first 500 of you will get a two month free trials you have nothing to lose okay let's have some fun so the first thing we have here is just the folder with the images again you can get that in the description so yeah and we can start from scratch so we're gonna do an index dot HTML like that alright and this is where our HTML goes landing page perfect control save we're gonna go into the body actually we're leaving the body and we're gonna create a style dot CSS okay to link it all we have to do is go up here and link it and there we go and the font I also used for this one is called the Papa and this is one of my new favorites I love to use it it's it looks it's my alternative to Montserrat so let's copy this I lost it let's go back here we're gonna oh by the way you can select the font so Poppins you can go on fonts out Google and the ones I'm selecting are no I press clear also I guess I'll show you from scratch okay so I want to customize here and I choose regular and medium as well so i'm gonna choose both of them yeah and then i'll just copy this link tag here and just paste it right above here above our stylesheet okay and we also have this so i'll just copy this from here and just bring it into our CSS and i'll just drop it and now so I'm just gonna go to the body and just add this font family to the body this is the only one we're gonna use so we're gonna get rid of this issue from the start of fonts and also I'll just remove the margins and everything from all the elements by adding the star so margin:0 padding:0 and box-sizing border box okay so this is kind of a small reset so we don't have any issues in the future okay so let's see what we have here in our body and the structure is gonna be we're gonna have a header we're gonna have a main section with the laptop and some texts and that's pretty much gonna be it we're gonna have some background bubbles and and yeah so let's go back here and let's cover we're gonna do it piece by piece so we're gonna do the header and then we're gonna build out the CSS we're gonna do the section and so on and so forth so the first thing I want to have is a header you usually use a header to add your logo your nav links and things of that sort okay so we're gonna do a header here and in this header we're gonna actually have a couple of nav links and here a couple of divs my apology so we're gonna have a div I can add a dot and say logo container and hit tab that's gonna create me a div automatically with the class of logo dinner and here I'm just gonna drop in the image so we're gonna go to the images and you can get it by going to logo SVG and I'll just add a logo altering alt tag here okay then I'm gonna create the h4 here this is gonna be the class of logo so this is the actual text logo and this is called three dots I know super super creative okay that's the first one the second one still in the header is gonna be the nav so and then they have you actually want to put the nav links and in here we're just gonna have a ul I'm gonna give it to class ul with the class of nav links okay and then in here we're gonna just have an li and an anchor tag that's gonna take us nowhere in this case but I highly encourage you to add multiple pages to this if you want and this is just gonna be specs of the laptop and I hold shift alt and press down and that's gonna create two more for us I'm gonna rename these this one is gonna be products and this one is kind of contact okay and these should also have a class now if I know my shortcut which I don't oh my god how do you do that where you select multiple lines so you can add the classes I have no idea right now so I'm just gonna add a class like this and nav link alright so these are gonna be the individual nav links and just paste this like so okay and that should be all actually we have a cart SVG as well so I'm gonna go outside of this nav and I'll just add a div with a class of cart like that I'm gonna just drop in this cart image cart SVG from here cart and hit save okay that's all we have it's our header so let's fix this up and make it look nice so I'm just gonna open this up with live server if you don't have the extension you can get it off here in the extension market let's open this sucker and let's see what we have so Wow looks gorgeous perfect this is what I want it okay so the thing we want to do is I'm gonna go here and the style that's here so I'm gonna select the hinder and I'm gonna add display flex and that's gonna move everything in one line so display flex like so there we go that's gonna move everything in one line I'm gonna add the wit let's add a background color I usually do this I highly recommend you to do this add a background color to all your boxes so you can see what's going on a bit more clearly so this is gonna be light blue all right so this is our whole navbar a Heather okay this is our whole header here so the thing I want to do is in our design we had some space here on the left and on the right so around 10% margin so the way we can do that is we can just make that whit oh no make that with 90% like so okay cool but let's take a look on what happened Edie this is not good we have too much space here and those space here how can we solve this well we have the magic of margin and if we set it to auto that's gonna figure it out for us and we don't have to worry about it and that's it that's all we have to do now let's fix up these items as well so I can remove this background okay and then move on to the next one so in the header we have three divs we have the logo container nav links and the cart so I'm gonna select all of these this is gonna be a logo container so that's one alright then we have the nav links and we have the cart actually I can just select nav here not nav links cuz this is the actual child of the Heather so I'll select be nav I'm gonna select the nav and we're gonna select the cart like so cart all right perfect and the thing I want to do is I'm gonna just add a background like we usually do light blue so just this just so we can visualize that okay copy this just paste it here and I'm gonna change the color to something like greenish color and this one is gonna be a reddish color so that's what we have oh my goodness alright so to stretch these out all we have to do is add flex one and that's all that does is it's gonna take up all the available space left in this 90 width so flex one takes up all these space as you can see it took up all these space now it didn't fully pick up everything because we have text and the other containers and we have the logo so it's basically just gonna take up all the space it needs and it's just gonna leave these like so now what if I want to make these equal lengths well then I just add flex one to all of them flex one flex one that's gonna make everything equal in length as you can see now but what I want to do is I actually want to stretch the middle one out of it so I'm gonna add flex you to this one okay well not this one the middle one I apologize there we go so I'm gonna stretch the middle one how it because I'm gonna need more space here because these are also going to come in one row so so yeah okay that's one let's do let's go back to the header a bit I make this a bit larger so I'm just gonna add a height of 10 VH okay there we go that's a bit larger now and what I want to do is I actually want to take all of these and put them straight in the center so to do that in the header what we can do is we can say a line items Center hit save and take a look now everything is aligned in the center in that big 10 VH container so on that big header alright it just took everything and put them in the middle okay so that's all we need there we can remove these background colors that's fine or yeah let's remove them so we can see what's going on hit save and now what we can actually do is go up here and I'm just gonna select everything and so the logo container again I'm gonna select the nav links now the madelung is actually what's inside the nav so these this UL okay this one and I'm also gonna select the card so I'm just gonna select all of these because I'm gonna add some styles that are gonna repeat themselves and we don't want to write 10,000 lines of code for another reason so I'm just gonna start all of these and I want to add display flex to all of them alright hit save and take a look that's gonna put the logo with the text 1 next to each other it's gonna take these and put them one next to each other and this one was alone so nobody cares about the poor cards unfortunately so okay that's one we're also gonna do let's go down here and let's fix up this one now a bit alright so the thing I want to do is add the font white and a bit of margin here so we have more space between the logo and the text so we can go to the logo let's go down here and just say logo because we added the class of logo to the text and we can say font weight and we can change this to 400 okay and we can just add a 5 pixel margin to give it a bit more space there we go we have that space ready up and going okay now to stretch this out we can select the nav links so this one again okay let's go down below the nav let's do nav links alright and all I have to do this one is display flex already up here as you can see so all I have to do down here is just say justify content to space around take a look perfect I'm gonna remove these styles and the underline and the dot from there I'm gonna say list-style:none that's gonna remove the thought and to remove the color of that or we can do say nav link so the individual link then add a color of let's do five f5f seven nine that's the one I use and my design and we can just increase the font size a bit to 18 pixels I think this is the larger and we can say text-decoration:none that's gonna get rid of that ugly underline and it's not getting rid of it all right why you do this to me Nev link okay let's take a look why this is not working okay so the reason why this is not working is because I added it to the L I and the the the underline is actually happening on the anchor tag so the list it doesn't have that issue so we can just move everything from here to the a tag okay just copy this and paste it in here and that should fix our problem hit save and look at that there we go it's fixed so that's good and now what I want to do is I want to move this all the way to its containers and so to do that we can just go to the cart and just say justify content flex and it's safe take a look and we moved everything right there if you want to move these a bit closer you can just mess around with the header maybe make the width a bit smaller here like 80 as you can see that brings everything a bit closer together yeah and that's all you have to do and it's very easy to modify this I'm gonna leave it like this for now even though I actually think the AV one looks better but okay let's just move on good let's move on to the next section with the text and the logo and everything so below our header and here what we can do is we can create a main section now there's a lot of confusion of why why would you use a main or a div or whatever just use a main where all your just all your site's actual content isn't okay so the header is kind of useless it's just nav links usually you have a nav in their logo burger menu of further again it's kind of useless you just have some additional information about these sites and things of that sort Amina's where your actual dentist so what I like to do is just do a main tag in here and just put all my content in here and if I have multiple pages or sections I use a section so but for this one we're only gonna have one section so I'm just gonna create a section with a class of presentation all right and in here I'm gonna have the introduction part and the image so I'm gonna create another class called introduction okay and then here I'm gonna have a couple more tips hang around with me I know this is this is getting depressive with so many does so I'm gonna create an intro text and here we're gonna have the actual h1 with laptop for the future and the P tag is gonna be the new 14 inch bezel-less display offering a 4k display again with four would touch screen there we go it's safe okay and that's all we need in here after our intro text we're gonna do a CT a class and that all it means is call to action so that's where my buttons are gonna be and in here I'm just gonna have two buttons button with a class of CPA select and this is gonna say 14-inch model is selected and then I'm gonna have a button with the class of CTA ad and this is gonna say Add to Cart okay it's safe and after this let's go outside of the introduction and we're gonna add a covered class alright and this is where we're gonna have that image cover of our laptop and that one is the made book here and this can say made book as well so what's happening here is we just kind of made two big classes one is the introduction as you can see it highlights it from here to here and then we have a cover and the reason why I did this like so is so we can display flex them and then we can move them one by each side and then we can kind of worry about whatever is happening here yeah we don't care about that now but yeah that that was the idea there so we can just kind of move back into our style the TSS all right let's see what we have and here oh my goodness this is kind of huge that's what she said let's move on so in here we can do a presentation and I can just display flex all right take a look so now we moved all of them each to one side and before we actually move on I think I'm just gonna make this image a bit smaller so I'm just gonna say cover image and I'm gonna add a height of like 60 VH or something to it okay just something like that make it a bit smaller good okay well let's go back here so we added a display flex and the next thing I want to do is kind of do that margin thing that we did up here so to do that just add a width of 90 percent like so we can have a margin of auto-aim in height of 80 VH all right so it's about this height right now that's good because this one's 10 VH this one is 80 so we're gonna have 9 P and then we're gonna have the dots to select the laptop down here and they in the last 10% or you can add a footer or something in there okay so that's what we have and then all I'm gonna say is a line items center like so it's safe that's gonna align everything vertically for us perfect now do you remember how we can make these bigger or the same size these divs we used flex so that's exactly what we're gonna do we're gonna position these with flex and then we're gonna see how everything looks so let's go here and add an introduction I remember the introduction is let me just add a background color for you is this one all right and this one is the color so here if I just add a flex one now it stretches all the way we can also add it to the cover so I'm gonna do the cover div and then here I can just and a flex one and look at that that's gonna make it the same excuse me the same width perfect and now what I want to do I'm gonna get rid of this one like that it's safe now I'm just gonna get the intro text and I'm gonna get the h1 I'm gonna add the font size of 44 pixels make this way larger gorgeous I'm gonna add a font weight of 500 so we're using the medium one and poppins good and then oh we added a weird linear gradient to the text so how can we add a linear gradient well what we do is we actually add it to the background first so say background linear gradient and then we're gonna say - right that's the direction I want to go like that and then I'm gonna do the colors I use were 4 9 4 9 16 9 X 64 4 and then we're gonna do six f6f 89 okay it's safe and look at that so this is a lighter gray a darker gray and but I wanted to add it to the text so what is this bull okay what is this well but there is a cool trick that you can use and we can do it in two lines to add gradient to the text so what you can use is this is a WebKit so we're gonna say WebKit backgrounds clip alright we're gonna clip the background to the text so that's exactly we're gonna say text we're clipping the background to the text and then what we do is we get the the text we're gonna say WebKit like that text fill color we're gonna make that transparent so the background color actually feels fills up the text color whoo let's take a look take a look looks pretty cool huh okay let's move on to the intro texts B so our P tank is gonna just have a margin on top of like five pixels is to five pixels the font size is gonna be around 22 pixels and I just took these from the design so if you're wondering where I took these from is actually from the design so eight five eight seven seven to a better way probably to do this because I'm gonna repeat this color a lot of times you can use a variable and store that but this is a very small project so it's not actually that's necessary okay let's take a look there we go that's what we have let's grab these buttons and push them down a bit so we can select that call-to-action div I can just add the padding of 50 pixels zero pixels zero pixels zero pixels and if you don't know what this means basically if you use four values here 50 is the top just go clockwise 50 top right zero bottom zero left zero okay and as you can see now we have 50 on top right zero bottom zero let's zero okay and then in here what we can do is get the CTA select that's the first button here with a 14 inch and I can just add a border of two pixels solid and we're gonna use this c36 CBB color alright it's gonna be a nice pinkish color we're gonna make the background transparent like that and we're gonna add the color of the actual text yes I'm just gonna copy this again from here to here good and I'm actually gonna add a normal a fixed width and height to this sales 150 and 50 height and the cursor is gonna be pointer it's safe take a look that's what we have and I believe that the actual font doesn't apply to the button I might be wrong and they see any tune for myself I don't know everything but as far as I know for some reason doesn't apply fonts to buttons so let me just quickly take a look here let's try it this is there any change or am i blind you know what I actually should have moved this back in here so we can kind of see what's going on let's see yeah see okay so it actually adds it that's so strange okay let's go up here and we're gonna add the font here and I want to make sure all the buttons also have this font good perfect all right let's make this full screen again go down here let's see the font size let's have a font size of 16 pixels there we go a bit better and let's also get the CTA ad all right CTA ad I'm gonna add a background of c36 CBB to this so the same as we have up here I'm just gonna kind of copy/paste everything from up here and paste it down here that should be fine and as you can see we have that border so we don't want that border none' there we go and the colors being also white color white it's safe perfect looks good okay let's also add a margin to the right so how do we add that margin all right will you learn that top right left bottom so if I want to have margin only on the right we can do margin let's do we can do 30 pixels zero pixels zero pixels zero pixels so that's gonna add 30 on top here okay but I also want to add to the right so top right left bottom left see this is a very confusing even for me actually we have the Add to Cart selected here so to add it to the left that's gonna be top right left bottom left no so this is the one okay the last one it's let's take a look at there we go we added a bit of space if that was confusing don't worry I'm just being very stupid I'm I'm tired so I apologize okay so we have that that's fine the laptop here is okay and let me actually show you a very cool trick on how we can add a shadow to this laptop so what I want to have is this kind of looks a bit out of place and I want to have a bit of shadow underneath the laptop and the way we can do that is let's try it whoa what would we normally do we would add a box shadow but if we add a box shadow let's do three pixel three pics of three pixel black then as you can see that doesn't look too good but we can actually add it to D PNG so the actual image and that's gonna make it look a bit more and the website here it's gonna make it look a bit more realistic and what we're gonna do is add the shadow right below the laptop so to do that all we have to do is just add a filter to it and we can see drop shadow on the filter and just do zero pixel five pixel and three pixel here and then we can just give it a black color hit save and take a look but we have a shadow right underneath there so that's super super cool so if you want to add a shadow to your pngs that's how you can do it okay that's it let's add the nice circles because this seems fine let's go back here so we have this section and to be honest this one can go outside of the section because it's gonna be just kind of some background images I'm just gonna add an image source and I'm just gonna get all these circles big Eclipse let's get the middle one image it's gonna be the tear this my mouse cursor is on top of it oh my goodness all right let's get the small one to you again the mouse cursor okay a hobby s code hates me okay let's see what we have if we go back in here and there right down here Wow looks amazing okay and I want to have them on top here so let's go back to our CSS and the thing I'm gonna do is I'm actually going to add the and a position:absolute so I can kind of move them around wherever I want so I'm gonna say big circle is gonna be a position:absolute I'm gonna move it to the top top zero and top zero pixels and we're gonna say right zero pixels okay that's gonna that should move it up to the top yeah it should if I add a class to it a big circle and class a medium circle and class of small circle it's it and now it should do it so there this now this is kind of in the front I don't like it so I want to move it to the back to do that it's kind of like layers in Photoshop all we have to do say z-index and puts minus one that's gonna move it to the back so now the images on top okay and you know what this is actually a bit too sharp in my opinion so I'm gonna do I'm gonna raise down the opacity of that 0.7 all right just get rid of it a bit and I'm gonna make it a bit smaller - that's a D that's at the height of 80% okay did that make it smaller I can't tell I actually have is use yeah it does 80% yeah that's fine okay and I'm just gonna do it to all of these circles I'm gonna do to the medium one let's do a position:absolute here as well like that top this is gonna be around 30 right around 30 and z-index around - this is gonna be minus one as well I'm gonna change the height to 60% as well all right make it a bit smaller there we go that's one two and the last one it's kind of gonna be the same thing I actually have this one saved in here so I'm just gonna copy paste them but mess around with them do it however you want get creative with this one position:absolute bottom left 20 is the index - once there it is it's kind of faded it's not that obvious which is perfect because I wants to kind of grab so much attention okay and you know what even these are kind of like way too strong so I can just kind of put down the opacity 0.5 0.4 maybe and this one too like 0.5 all right it's safe something like that yeah there we go and lastly I'm just gonna add the arrows and we're gonna do the drop animation and we're gonna quickly make it into mobile friendly so to get to do that let's go back to our where's my yes code just go back here and right below this section I'm just gonna do a laptop select div laptop select and then here I'm gonna have a lot of images image the first one is gonna be the left arrow then we're gonna have a dot image I'm gonna have a dot then we're gonna have a full dot let's go get the full dot dot full I'm gonna copy this another time and then we're gonna have the right arrow so arrow right it's safe that's it let's quickly style this and I'm gonna position this absolute as well so I'm gonna say laptop select all right let's see what we have where are you there this on the left side my laptop is blocking the screen and all I want to do is I want to stretch this out I'm gonna give it a bigger width 50% and I'm gonna display this flex so just basic flex box display flex justify content space around like that and I'm gonna add let's take a look now there we go a position:absolute there we go and so now we can position it however we want I'm just gonna add a right 20 and there we go that that should be fine okay let's do the the drop of the laptop so to do that we can add a keyframes and I can give it a name like drop and what I want to happen is on 0% this is basically the starting value of how the animation starts so you can define like the initial position of it so I wanted to start by not being visible and I also want to start from it a bit up so I'm gonna say transform translate why I'm gonna move this up with like minus 80 pixels okay just move it a bit up and when the animation finishes I'm gonna do 100% I basically want to copy Pastis and change this to 1 and this is 0 okay we can go back to the cover image here and I'm gonna add the animation so we're gonna say animation is the drop okay and 1.5 seconds is okay the name of the animation is drop because we defined it here and that should be fine let's take a look boom there we go okay let's also make this a bit mobile-friendly because I don't think it is let's press f12 and we can go here to this icon toggle device and there we go look that's what we have oh my goodness and we can change here to something like iPhone 10 and that's what we have so yeah doesn't look good so what we can do is I'm gonna just dog this in here to make this way smaller so we can kind of see the code and also work on it at the same time so there we go at around let's take a look at around this size it still looks okay at around here it doesn't look that good anymore so what we can do is add a media query to kind of the position that it doesn't look at anymore so media screen that's how we write it and and here we can define a max width on where this should apply so it should reply around 124 pixels I just get the body at the display:none to it we can actually see this disappear so as soon as it kind of hits that that mark it's gonna disappear okay so we don't want this to happen though what I do want to happen is let's make this even smaller what I want to happen is I want to get the presentation I'm gonna add a flex direction column to this so you remember that one the big big presentation DIF that we had up here so this one the one in our main so this section and this one that we displayed flex well all we have to do is add flex Direction column and that's gonna move them one below each other and that's all we have to do we can get the introduction and I can just add a bit of margin on the top here to make more space margin top I'm gonna say 5vh like that and I'm gonna text align everything in the center like that perfect look that's super cool good let's get the intro text and make it smaller h1 let's make this font size 30 pixels there we go now let's also get the the paragraph so intro text P this is gonna be font size 18 pixels good okay let's go to the buttons we're gonna say CTA padding is gonna be 10 pixels zero pixels zero pixels zero pixels on this one there we go that's just gonna get rid of all that big space because we added it in here so we could make space between the text but in here on mobile we don't need that much space okay for this one like this one looks okay here if you're going like really small you can remove them if you want and then maybe add a burger menu so and here you would make a burger menu you would add a display:block to a burger menu and you would move this away somewhere else I do have a tutorial on this if you search drop down menu or something I think it's even with animation and I did it I think a month ago so if you want to do that you can do that as well good we can also do let's see let's see let's do a let's do the laptop select this one I want to move it to the center and see bottom 5% right let's do 50% I'm gonna add the width of 50% as well something like that and I'm gonna transform translate this to 50 percent and 5 percent just to move everything back into its place okay that's one we can make this image a bit smaller it's very big cover image I can see height just make it a bit smaller 80% okay that messes something up so let's take a look why cover image okay we have the height on here so I can move it to the container up here and I can add a height of 100 percent here so it takes the height of the cover hits save and now as you can see everything works fine okay so now I can just mess around with this however I want good so I like to do this just add the height to the container and then you just add a percentage to the image and these ones these bubbles look okay but we can just make them less accentuated small circle medium circle and big circle and I can just add a opacity of like 0.12 or something there we got something like that just having it in the background is fine but not too super super visible and yeah that's it take a look we build a full-on mobile responsive website works perfectly fine if you're having issues even when you go down here so I think if you make the smaller even smaller this button doesn't jump that nicely so what you can do is let's take a look here let's make this super small actually it's not that bad I thought it was gonna jump here but it's fine but if if you have another some issues with it you can always just add a media screen and max-width and you can just define like 36 pixels and then you can make additional modifications to this so there we go now you officially know how to do everything you know how to design out a website you know how to build it and I also did a video on hosting it so you can put all of these together and they'll out some very cool projects let me know if you want to see more of these design and coding websites because I actually I'm having fun doing them so just write it down in the comments and until next time drop the sub do the bell and all the good stuff and I will see you in the next one

Channel: Dev Ed

Views: 725,523

Keywords: responsive website, html tutorial, css tutorial, html css, how to make a website, responsive website using html5 and css3, responsive website tutorial, responsive website html css, build website, build website from scratch, how to build your own website, html5, css3, html5 tutorial, css3 tutorial, mobile website, responsive css, media queries, website tutorial, create website free

Id: ZeDP-rzOnAA

Length: 40min 46sec (2446 seconds)

Published: Tue Jun 04 2019