Build a responsive card - HTML and CSS tutorial

hi there my name is Kevin and welcome to my channel where we learn how to make the web and how to make it look good while we're at it with weekly tips tricks and tutorials and in this week's video we're looking at how to make this cool looking card I think it looks pretty good we're going to be exploring responsiveness a little bit with it as well we're looking at the basics of flexbox how we can get the two columns to work how we can make sure and think about it a little bit well we're putting everything together to go from having it just stacking on top of each other to breaking into two columns so I really do want to be exploring the thought process that I'm doing throughout it as much as possible especially for layout purposes but you know we're making something it looks like this we might as well also look at how we can make it look good let's jump right into it already so let's get started on this card and what we wanted to look like so the first thing obviously we need is a div class of card cuz you know we need something to work inside of and now we have two parts to this card it's gonna have a left side and a right side on it and we want to do that we're gonna be using flexbox for this one so we need to have two dibs now so I'm gonna be putting a display flex on my card to create these two columns now at the small screen size it's not actually going to be two columns it's at small screen sizes is going to be one column but I have to think this will be two when I get to a bigger size we have to organize our content with that in mind so let's do that I'm gonna do a profile a sidebar and what I'm using right now is something called Emmet if you're using BS code like I am it is built-in if you're using a different if you're using a different editor you may have to install that yourself through an extension so if I do dot profile sidebar and I push tab on my keyboard it does everything else for me so it speeds me up a little bit so that's gonna be one of my columns and the other column is going to be we'll call it profile will call it profile main that makes sense because we have a sidebar and then the main area let's go into the sidebar now and we can start working around in here we really need two things we're going to need an image and we're also going to need to have our social list right we need those social icons those social icons that I'm going to be using font awesome I haven't brought those in yet so I'll have to grab that in a minute and but for that we will need a unordered list that will have three list items in it so this is Emmet here so Li times three and then inside of that each one will be a link and I'll push tab to spit everything I need out there and we're not gonna have them go anywhere for now if you want to set those up obviously you could um so that's the basic structure for that I'm not gonna bring all the text in in my image yet will I'll do that ah you know fast-forward while I do all of that so you don't have to watch me paste in all the boring stuff so inside my card we have my first column done now we can come into my profile main and we can start working away in here so in my profile main what do we need we don't need as much this one this one's pretty simple I think we have my I'm gonna use an h2 assuming there's an h1 somewhere else on the page because this is just a component within you know could be part of a larger page so my h2 we'll call it profile name like that we're also gonna have a paragraph of profile position where this is gonna be like the graphic designer thing that we have on there as well as a paragraph that we can call profile body just that you know the regular paragraph text and all of that I'm going to fast forward will I bring in this content here just because it'd be kind of boring to watch me type that and then I'm going to talk a little bit more about the image and these social icons in one second all right so there we go I've brought the image in but I just do want to mention it this is a placeholder service so every time the page loads it's possible another picture or actually I guarantee it a different picture will come in so it's a placeholder service called private are you can check it out private are dot C C and whenever the size you put here is how big your image will be the maximum is 1000 but I'm gonna stick with 125 for now because that's roughly the size that I want to be using so for something like this a quick demo or something where you don't have your picture ready yet it can't be really really handy obviously you wouldn't want to use this in production for these links here what I'm going to do I'm gonna be going and using the CDN here from font awesome our for font awesome from CDN Jas which is just a place that links like thousands of libraries so you can use them really nicely and easily and quickly so I'm just gonna set that up using that but if you wanted to do it for your own project I probably set it up with the actual font awesome stuff cuz here if you go start for free they'll ask you for your email they'll send you a custom link you can sort of set things up specifically for your projects and stuff so but for a quick demonstration like this one I think the easiest thing is to use there there we go just to bring in the one from CDN j/s so I can actually use them and now I want to use those font awesome icons luckily that's super easy to do you go to font awesome on their icons page and you can just grab the icon that you want there's like a big can I I wanna you start using this icon picture I'm not going to do that I'm just gonna click here so it copies that and then you can paste that in and hit save and it's going to work right there so that's really really nice and in this case I want the dribble square not in an address book so I need to change this and you can get all of these right from dribble square from there the easiest thing to do is get it from their page instead of trying to remember exactly what to set up there so that is the little dribble icon coming in I'm gonna set the next two up in really quickly then we'll jump into our CSS now you might have noticed things are set up a little bit so if we jump over to my CSS file here I have switched my box sizing over to border box because that just makes life easier and I set up my font family and I put them in height and this display grid and place item center just keeps everything right in the middle of the screen so that just makes our life a little bit easier and for a single item like that putting it in the middle of the screen can look kind of nice so the first thing we do is put a box shadow on here just so we can see it a little bit I wanted to be pretty subtle so I'm gonna go with a guy point two and yeah we go we can start seeing it just a little bit I'm gonna give it a width of 80% but I'm also going to give it a max width of will try 600 pixels and we'll play around with it a little bit but I don't want to get much bigger than that I think once even and once we break into our two columns now as I said we want to break this up into two columns when right our big screens so I'm going to do a display flex on here so that will break it over to two now that's all fine and dandy and at big screens we're gonna want it to be like that but when we get to our small screens we want it not to look like that so I'm gonna do an inspect on here I'm gonna leave this off screen just so it doesn't take up any room but I am gonna use that to turn on if you're in Firefox it's on this side if you're in Chrome it's over on this side there's a little phone icon and you get you know now we can control the size a little bit better so we'll drop it down to a small screen size and we want to play with it so we're gonna start mobile first sorry I'm gonna do it display flex like that and then I'm gonna do my Flex Direction is column to switch the main axis so now we're working up and down now it seems like a lot of work to go back almost to what we had but I think it's an important stuff to do because we're gonna be able to use and take advantage of the fact that we have a flex on this if we need to I'm gonna bring in that background color so it's the blue just like that one and for now I'm gonna switch the color over to white and just the pure white but we're gonna have to overwrite that but it's going to make it easier to see everything that we need to see for now and beyond the mobile text align we will do a center on there to keep everything centered like that and the last thing I'm gonna do is I don't want anything ever touching the sides so let's bring a little touch of padding on there we'll go with a 2m which should just give us a nice little bit of spacing around the sides um there's gonna be a bit more on the bottom and well just on the bottom because our paragraph also here has some margin on it but we'll get rid of that a little bit later before I really start wearing with the layout I do like fixing the typography but I think the very first thing that's driving me nuts right now are these icons um let's do that now one thing I didn't do when I set this up actually is I didn't give anything here a class so I think I'm gonna give this ul a class of social list and let's come on all of these so I'm going to command click or control click and go down like that and then on here so we're doing all three at once we can give these the class is equal to and I'll call it a social item and then we can come on each individual link as well and we can give each one of those a class of social link we could also call that social icon I guess as well but I'm used to doing my lists this way so I'm gonna stick with that so it just makes it so much easier when you do this to know what your CSS is actually doing so I'm not just targeting like this generic list and what list is it my social list super clear so if aunt somebody looks at this CSS right away they know exactly what we're doing now we want it to be in column so right away a display of Flex would put that into columns and of course we want those bullet points to disappear so we'll do a list style of none I'm also going to do a margin of zero and padding of zero now I might come back and change this margin away from zero but I like resetting it all just so the weird spacing and stuff doesn't get in the way we want everything here to be centered and when I have the padding set to if I don't have it to set to zero there's padding on the left side of a list so turning that off just lets me have full control over exactly what it is and it won't offset everything by that padding amount so there are a few different ways that we could Center these items I could do a justifying content center which would Center them on the screen like that and then I could add margin to the individual pieces but since we're using you know I much as possible I'm gonna stick with just doing it on my social List so what I'm gonna do is actually give this a whip let's start with just like a width of 150 pixels and we'll see from there and I'm gonna give it a border so we can actually see what this is going to do let's do 3 pixels solid and we'll do red because I think we'll be able to see it pretty clearly so there we go um so we can see that we've put this box around my list now we can do a margin:0 auto on that to center it there we go and now what I can do is because I've limited the width of the space that I'm using for these icons I can also do my justified content but do a either space between or space around I think it's one of the few times space around and it will spread my icons out if I used a space between it would space them out a little bit more at the end of the day it doesn't really matter for something like this but if you want to make sure that you're stuck to the sides space between is the one you want to use so obviously we don't need my border and I'm actually going to make this a little bit smaller just based on the size of my image that I have and I think that's going to look a little bit better I might even shrink that a bit more later we'll see um so those are okay but obviously the color and the size of the meringue so let's come on to my social link itself so on my social link the color of its obviously way off and so for this one I have a color that I want to be using so I'll bring that color in right away but I find them really really bright so what I'm actually going to do is I'm going to lower their opacity down do you like I don't know point five or something get them to blend into the design a little bit more so that looks nice but then we can have my social link hover and social link focus both go out to be opacity capacity of one so when we hover on top we get that nice bright color comes back in or if we're tabbing through we get the nice bright color that comes through but you know the rest of time it just sort of blends into the design a little bit more and it's working they're really hard to see the icons though so I am in a boost the font size a little bit especially that dribble one is like really hard to see it's not gonna be a big size difference but just a little scooch there I think makes it a little bit more clear what each one is and again this one's really not super easy to read but we'll stick with it and now that I'm looking at those I did forget one thing I'm gonna come back to here and if we have links like this that don't have any text in them a screen reader literally has no idea what it's for so we could use an area label on these just to replace what the text is so we could have a Tribble like that and Twitter so it's always a good idea to do this if your link is an image or if your link is an icon like these ones to include you area labeled just so if there is a screen reader it knows what it actually is like why would I click on this instead of just having literally no idea what the link is doing or where it might go to normally I would go through all my typography but since we're focused on this top section here I am gonna just do the image right away um so I did I don't think I gave this a class either I wasn't very good at setting that up so class is equal to profile image it's probably the easiest name to remember and so here we can have my profile image and well the first thing that's quite clear is border radius of 50% because it's this perfect square it will turn it into a perfect circle and I gotta save both files when you make a change and there we go so there is our new picture that is a nice perfect circle I will add a border to that the original border I don't think was quite big enough so I'm gonna try a little bit bigger five pixels solid white well see what that looks like I think that's a little bit better maybe like a four I think something like that I don't want it to be too strong maybe we could have it as a lighter color but yeah I think I'm gonna stick with that for now and then we can get into down here so for that one I'm you know I'm gonna come up to here actually and do it just because it's my main content so we have my profile name so the font size on this one obviously a lot bigger we're gonna go with a two rim on that you can see when it is on two lines it doesn't look good so my line height can be probably a 1 when you get to bigger font sizes you can really reduce that maybe a one point one but it's working out pretty well with this name a little worried if it was a different name that the Y and the H there might be touching so I think I'll boost that up to like a one point one point one just to give it a little bit more space and with these really bold font this is like a super bold or black font the letters are super close together it is a big size but I think I'm also gonna give it a little bit of letter spacing just to help make it a touch more readable we're probably eventually going to want to play with our margins but for now I think it looks ok what we want though is to add that line that's going to go underneath it if I come here and I do my profile name after we can add in our pseudo element so the pseudo element if you don't know them I have many videos on them so you can check those out there should be a card coming up for it now but we need to have some content on there and either a position or in this case I'm just gonna use a nice little display block it's gonna get a height of 1 pixel it's usually what I give it and a width I don't know I'll start with 2 I'll try to M you can do a pixel value for something like this and obviously be ok and we need to see it so let's give it a background color I'm gonna give it this same background color that I used here and once again we'll just drop the opacity on that so it doesn't stand out too much but let's see if we can actually get it showing up on our page you know what I did I was just looking at why can't I see it anywhere I chose the wrong blue there I wanted to take the blue that I used here instead if you blue on blue you're not gonna see it right there we go that looks a little bit better um we want it to be in the middle its display:block so if it's display:block a nice little margin:0 auto well look go right in the middle like that but I do want some spacing on the top and the bottom of it so instead of a zero let's try point five em and see where we go from there nice that's looking good but then you see how the space on top actually looks different from the space on the bottom part of that's coming down to the spacing on here which we could deal with right away so that would be my profile position I think we want to keep a margin bottom but for now I'm going to put margin zero and we'd always fix that after and that didn't actually change anything like I thought it would so the spacing isn't coming from this it's actually coming from that so what I'm going to do is I'm going to keep the actual I'm going to keep the bottom margin at 0.5 but I'm gonna increase the top margin and try and balance it a little bit and I think that looks much more centered so we're gonna stick with that I'm happy with that a little bit more work to do so I my profile position here we want to be all caps so we can do a text transform on that upper case I'm actually going to shrink the font size on this just a touch font size no let's try like 8.8 75 REM and letter spacing which I don't usually go too crazy on but I am gonna give it quite a bit here three pixels is a lot when it comes to letter spacing and see that really does a nice job spacing it all out and the color we want to switch it over it once again to this nice color that we have right there in this case I'm not gonna lower the opacity I think that looks just good there and what I am gonna do though is I find they're a bit too similar and I'd rather people focus on this than the line in between them so up over on my pseudo-element let's lower the opacity on that one maybe to a point I don't know a point two five or something we can lower it probably quite a bit mm-hmm we'll try a three five I wanted to be pretty low and not stand out too much but it should be visible but it's really a decoration and that's what pseudo elements should be right they don't have content they're usually decorations so it's just this little decorative element that I don't want it to be really in your face or anything like that it's just sort of an extra detail that is in there so pretty pretty happy with what that's coming together the last thing I'm going to do is come on to this which is my profile body and what do we want to do on there I think the only thing I'm going to do is give the font weight ahead of 300 loaded in just to lighten it up a little bit and we can drop the opacity on this one a little bit as well that's working maybe it's a little bit let's try 0.8 maybe and I just want to make it so it's not as super in your face it's a light font I think we're really pushing the limits of the contrast ratios and stuff but overall I am pretty happy with that I'm just going to do a margin bottom of zero to get rid of that extra space and with the space I'm going to add a little bit right here of margin bottom I'll bring it up to like a 2m just to increase the space on that a little bit and there we go I'm SuperDuper happy with that at the small screens but now we need this to work on big screens as well because at one point it's not going to look so great let's give it a bit more room here because at one point you know when we get to here it still sort of works but it's not looking fantastic so let's come all the way down we and make a media query so at media I'm gonna go inside my friends here and do a min with I'm gonna do like 450 pixels bit arbitrary at the moment I'm just thinking you know my actually 450 might be a bit narrow let's do like 600 so it's right around here so I'm really just seeing where we are here I think it's really good at the narrow screens but when we get to about 600 which is here is when you know it's starting to get a little bit wide this spacing at the top I'm not such a big fan of now it looks a little bit bottom heavy so that I think would be a nice place for my card to switch it's flex direction so my flex direction can go back to being a row and that means the children become columns so when we and of course you need your pixels up here 600 what we want there we go so that's working so when we get to that 600 the spacing gets a bit awkward boom it falls down and looks something like that which looks a lot nicer I'm pretty happy with that falling down and looking like that now there is some fixing up to do though because it is far from perfect so if you remember we had my profile sidebar and profile main so I'm going to grab my profile main and you a text align I've left on that one to pump that over to the side now obviously we don't want these things touching because that looks really really bad so since we're already on my profile my profile sidebar and add the space there but since we're already here I'll just add a margin left of 2m to give me the space I need super so that looks a little bit better and the biggest problem right now is this is stuck off over there so that was my profile named after and the easy solution for that is if you remember how we got it to go in the middle which by doing a margin:0 auto so it is sitting around in the middle like we do with block level elements all the time so I'm just going to say that my margin left is zero now and look at that it is looking nice and dandy I'm actually really happy with that it works at small screens it's working here when we come to that size it's working and everything is SuperDuper and I think it looks really really nice now thing just before we go as a quick reminder and it's why I set things up from the very beginning because even though a lot of the work we did was at this stage when we wanted to get our two columns here I really had to set it up here with this with the profile sidebar and my profile main here because when I do display flex on this it's making this one column which is right here and then it's making this my other column which is right there so just planning ahead because you know sometimes you look at the mobile design you don't realize that you need to break those off into different pieces and then it sort of bites you in the butt so just remember to plan these things ahead when you're getting them ready and don't just focus on one screen at a time so I hope you've learned a couple things along the way and I hope you enjoyed this video if you did learn anything leave a comment down below and let me know what it was I love knowing what you guys are learning if you're new here and you haven't yet subscribed please consider subscribing it's videos just like this one every single week and one thing I just want to let you guys know before I let you go is this is the type of thing that I've put into my new course the responsive web design a boot camp where we're looking at how to build responsive websites and how to think responsively we're building out cards like this one but we also build out to three page websites we're exploring the fundamentals of CSS all the way up into deep dives into grid and CSS grid and then we were building stuff throughout and we're also doing it all on scrim ba' if you don't know about scrim but it's this amazing platform I go and check the link I have down below just to see what scrim is all about because when you were watching me do all that stuff wouldn't have been cool if you could pause and edit the code that I had already did just to see a couple little changes you can do that in scrim ba' you literally in the video player itself you're editing the code it's really really cool and fun so throughout I'm offering you challenges where before I do something I try and get you to do it and then you can compare how you did it to how I end up doing it because when you hit play it just resumes the lesson right from there the course itself has over a hundred and seventy lessons in it it's more than 15 hours of content and for the next two days it is on sale for $29 after that it goes up to its full price of $99 so get it before August the 30th after that the sale is over if you're watching this after the fact I'm sorry but yes the course is still going to be there it's still gonna be open but will go be going up to the full price if you have any questions about the course there is a link that has more information about it down below or of course you can just leave a comment and let me know about it thank you very much for watching once again I really hope you learned one or two things along the way I hope you enjoyed the video and big huge massive thanks to my patrons for helping support me and everything I do here on my channel I really appreciate you guys support without it I would not be able to keep doing what I do here so thank you very very much and of course until next time don't forget to make your corn in the Internet just a little bit more awesome

Channel: Kevin Powell

Views: 31,464

Keywords: Kevin Powell, tutorial, html, css, responsive css, responsive card, build a card html css, flexbox tutorial, flexbox

Id: 51DbAwcmqD8

Length: 23min 48sec (1428 seconds)

Published: Wed Aug 28 2019