Frontend Mentor Coding Challenge with HTML & CSS

hi guys welcome back another video so today I'm going to be taking a look at a website called front-end mentored IO and this is a great site because basically rather than sort of just showing you how to create CSS or write HTML or write JavaScript they don't really do any of that on what they do instead is they give you specific challenges so these challenges can range from really basic challenges so things like just creating some basic layouts or they can be really complex where you have to build them up in JavaScript and kind of put all the behavior in and stuff like that so we're gonna be having a bit of a crack at this today and see how far we can get now with this site you can get loads of free challenges like these ones here like this job listings we're filtering these are all free and they don't give you any technologies or instructions on how to build it they just sort of give it to you as a client would give it to you for example and then it's up to you how you implement it so you could be using react you could be using view you could just be using a vanilla JavaScript whatever you want really is it's entirely up to you and then once you've created your solution there's then up to you to then post it you can post it to their website like you can see this one here was submitted an hour ago and then you've got like the design and the solution you get this kind of cool slider things so the solutions on the left and the design is on the right so as you can see it's pretty close there's some fun differences there and then you can kind of like see a report on it and post feedback and all of this kind of thing so it's it's really good because you can just build the site out or build the the challenge out and then you can get feedback on it which is really really helpful so if we just log in I've already got an account just login on our dashboard we can then click on challenges and we're going to go to filter by the free ones because we like free and then we're just gonna go to newbie and then if we go to there you can just see the free ones for the newbie you can see the newbie ones because they're kind of marked at the bottom here is newbie I'll fight these little the five one two five sort of stars in terms of difficulty so the one we're going to do is the first one in the list which is this one it's a four card feature section we'll just click on this and we can kind of see what we get here you can see the desktop design the desktop designer was what I'm going to focus on today I'll do the mobile design probably in another video so a video for basically taking a fixed design and switching it to a mobile design that's the mobile design that's the desktop you can download all the files here so if we just do this you get this zip file and we'll deal with that in a second once that's there and then the download includes JPEG design for the mobile and desktop so we can see it optimized assets I believe that's just like SVG's the readme to help you get started and then a style guide fonts colors blah blah blah and they also provide the HTML one thing you can do is you can buy the sketch files I don't run sketch I tend to run figma for most of my stuff now and but I believe sketch have a in the cloud inspector I think it's called so you can actually see these files even if you're not running on a Mac I run on Linux now so sketch isn't really something that I use too much so in the brief it's basically giving you the outline it's essentially to build out this section and getting it to look as close as possible as we've said before you can use any tools that you like to complete the challenge or if there's anything that you want to practice just give it a go and then it also mentions like device sizes so mobile optimization as well it mentions they slack sorry the slack and others like the style guide and then also it's got like the over on the right-hand side it's got the getting started steps so you know get the starter code download it so get with it and then you know you can find all the other information on in the style guide it mentions a preprocessor here for using things like sass don't think we're going to do that we're just going to write bog standard CSS I think just vanilla CSS for this one and working in a team now we're not doing that we're doing it on YouTube so the first thing that we need to do is unzip this so I shall do that now so we've got that extracted if we now go over to the terminal and in the terminal we can just do for now LS see what we've got just got a style guide to read me and index some images and then some design I'm just going to initialize all of these and then just do git add everything and then we can just do git commit and then just do the classic first right so we've got a clean repo now so that's good if we open this up in vs code just get this over here if we go to index.html hopefully that's big enough I think it is too big too small Oh leave it at that size that should be okay okay so what we got in here we've got the design so this is the desktop design this is essentially what we're going to be building today and then we've got the mobile design this is what we'll do when we're looking to making things a mobile and then we've just got some SVG's so these SVG's you've got four here they are in relation to like these images here so like this little magnifying glass this bulb this house in a browser type thing and then this computer so they're the images and then in the style guide we've just got some tips on things like layout colors sizings of things like font sizes and stuff and and obviously fonts so yeah so that's straightforward and then in the index page we've just got a bog-standard index page there's nothing really here we've got some content as well but obviously we've got to put all that inside the correct place now the first thing I'm going to do is I'm just going to get rid of this attribution stuff just to tidy things up a touch if I don't get rid of the footer as well that means we don't need any of this style stuff but one thing we will need to do is add in our own Styles folder or CSS folder and then from inside there I'm going to create a style dot CSS alright so within our index I now want to link this so if I just copy this why I wrote earlier just a link cut in so that means we're now pulling the actual stylesheet in and then we've got this title we've got the stylesheet we've got the five icon everything's there okay let's open this up in a browser so as you can see we've now got this open in a browser there's no Styles no HTML it's just literally the text so I guess the first thing we should probably do is start making some markup that we can use some structure and we're going to do this in a semantic way and then build up from there really so what do I see when I look at where is it the design this one yeah so when I look at this design I see a couple of things the first thing I see is a header section which is kind of this section here at the top the three blogs well the two headers and then the block of text then I see a content section and I see three columns within each of those columns I basically see a card so we see one card in one column here two cards in the second column and one card in a third column I also see sort of a container div literally we could call it just container that's centered so it's a set width and then we Center it so that's what I'm seeing at the minute so let's try and build some of this out for a second so the first thing I see is a container and then I see a header section and then within that header section there was a h1 and we could say that that will be this first one here and then also we could say that this is also a h1 as well same with because it's the heading the whole things the heading right so what I would probably do there might be a better way of doing this but this is kind of the way I would approach it I wouldn't put a div inside of here because having divs inside of H ones is not actually valid thinks buns is fine so we're just going to have these here just for styling purposes let's just go with top because then we can and then bottom and then outside of that there's then this P tag and that P tag contains our text so that's the top two things here and then we've got our text here which can literally just sit on this okay once we've done that I think the next thing that we need to do is create a div for the content so this is not in the header this is content on its own and although we've only got one row here I would be tempted to kind of say that the first thing that we need to do is have a row because that way we could then add more rows further down the line and then I think we're going to have a class column like so the next thing I see is we need to start building out these cards so if you do the first one I'm going to give this one an ID so we could say like this is the supervisor card I'm also going to give it a class because it still is just a card we want to apply the styles of whatever card might be and then we could just say supervisor just like this yeah and then I believe the next thing is we have yeah so supervisor and then some content and then an image so the content would just be default sort of P tag which would be this guy here so I'll just delete the content as I use it really and then finally we're gonna have an image we'll just set that to nothingness that let me know and that can just go there what's next I think the next thing is we need to replicate what we've done so we would take I just take the next column which I guess is going to be here so that's the first column this will be the second and this will be the third so in the second column we're going to have team builder believe this is the second column yep I'm going to change this here because this is the card name so this is going to be team builder it's a card yeah and then we can just say team builder blah blah blah oh and there's another card within this column so you've got two actual cards in this middle one so they're just the one I've seen we've got team builder and we've got karma so change the ID here karma and karma and then if we just take this content here and we can just take that delete that and then we can drop that in right here and then for the last one the last card we've got calculator and then we grab in this here just get rid of all this supply space and then change this now the next thing I want to think about for each of these cards is the images now we've got these SVG's so in the first image I'm going to use images and then it's this one supervisor isn't it so yeah and then this one is team builder was a team builder here and then this one is karma and then finally this one supervisor cool so I think that's our markdown in the next thing I need to do is if we look at the fonts you see they're all a set sort of fun and things so if we go into the style guide we've gradually got this link here open that's fine and we're at google fonts so we can select what is it two four and six hundred so that's two four or 600 cool so then if we want to embed these we've now got our link so we just grab this link and we can drop that in where do we want to draw this in let's drop it in right here so that's dropping it in and then this is our fun family and we can use that in a second with our CSS so if we go back to our page now which I believe is this guy here you can see we've now got our structure and obviously there's no styling involved at all here just yet we're gonna get to that in a jiffy right so the first thing that we want to do is we want to go and look inside style dot CSS and we need to add a few styles for a few different things here the first thing that we need to do is kind of like the sort of top-level Styles so for example the font family we want that to be this new font so if we do that we can see we've got this new font pull them we also want to set in the background color if I look at the background color I think it was this very light gray so we're just going to snatch that and drop that in there see what that does it was very very subtle but there's a difference there I don't know if it comes from the video and then I guess the last thing that we want to do is put in the actual color of the text which is going to be I believe this one see what we've got at this point okay that's kind of close I guess to what we're trying to achieve but let's let's carry on so if you remember we had the container and then with the container we wanted to center that so we're going to do margin:0 auto so that's the left and the right them the margins are automatically determined I'm also going to add in a width of 1440 pixels so yeah so when when the containers are fixed width for example in this case it's 1440 pixels the margin on the top will be 0 and then on the left and right it will be auto so it means it is enough to Center it essentially so let's have a look where we are now okay so that's got this bit centered which is fine just just have a quick look here because one thing I've spotted and you may have spotted this is this content it's fine but it should be within that container so it needs to be within this here basically in this example this content div with everything inside of it isn't within that container so if I just refresh that now it is everything's in there cool what's next then I think we're going to take a look at the header now so if we go look at the header tag that is this up here so that header tag is essentially this stuff so if we get the header tag and we say we want to align the text to the center and that sets a font size is it gonna be let's try 1.7 we might be a bit smaller than that yeah 1.7 run with a minute let's just see okay it's a bit big but not to worry we'll come back and we'll tweak that the next thing we want to do is we want to change the style so we've got these top and bottom things within the h1 so the way that we could do that is we could say head and then we want to target a span there's the top with a class of top and we could say display:block because a span is not a block element and then let's give it a fun way if you remember the top one is lighter than the middle one it's the middle one so we'll say 200 and this one and then see what we get okay so yeah so the top one is lighter and the middle one is kind of a bit more intense so let's go for the second one now I think it was bottom I think that's what we called it let's just double check that yeah I called it bottom four now again this is gonna be a block scenario and then the font weight let's put that at 600 cuz it was quite heavy yeah that's kind of the default I guess there the next thing that I want to do is I want to sort out this span here so let's say header and then direct descendants which is going to be the P tag let's set a width on this to say 70% for now let's just save that yeah that's that's a width and because we're now set a width we want to do a margin also on it so that should Center it yep and then we need to do a font weight I think I think it was quite a light weight if I remember from the design which is this one no this one yeah it's kind of a light design so it's not a million miles away we can mess around with the spacing and stuff later like this gap between reliable and powered is quite a bit smaller than what we've got the minute but we'll worry about that later [Music] so now we've got that in just one second 100% on that that's cool so the next thing that I want to start working on is like the columns and things and the rows so I'm going to use flexbox for this so if we go for the row first I'm gonna do a display flags let's just see what that does yep everything's just in a flexbox so it just kind of all butts up against each other which is nice I want to add some padding to the top because if you look it's kind of to close this gap here there's no gap and so if I just save this refresh it kind of just adds a little gap which is nice we want to align the items to the center so you kind of got this there connot you can't really see it at the minute but it's kind of like the vertical like if I just I just get rid of this and then you see like supervisor team builder and calculator there are all kind of at the same level if you remember in the design they're not they're kind of like middle and then these two a middle and then yeah you can see so we want to kind of have them or sent it that way vertically I'm trying to think what's next oh we want to do flex wrap to actually do that and then shall we say the width of the row is going to be a hundred percent because it just needs to be the full width okay cool so that's getting closer get in there the next thing is we need to target the individual columns so display flex flex direction on this we can change so rather than row we're going to set this on a column we need to flex basis this 200 and we'll just do flex one see where we're at with that yeah that's looking a bit more I think that's real 'evil won't know until we get the the card stuff on and we'll do that now so with the card how are we going to do this there's a couple of things that we need to do here first of all I want to do a position:relative now the reason I want to do this is because I want to position that image in the bottom right which is going to be absolute so if this is relative that's going to be fine and then we want some padding within this card so 20 pixels to 35 pixels okay so that's kind of moved it a bit closer tightened it up just a little bit we're going to add some height to this so let's say it's 250 pixels high I don't want to add a margin in between them because at the minute they kind of all snug up against each other like here you can't see it because we've got no borders but like these are all touching essentially like here here and here so let's do 25 pixels oh and the border radius as well don't forget the border radius let's do two percent it looks like two percent enough think contella the minute so again that's added a bit of spacing but then tightened up the design the background color of these cards Bolivar white let's have a quick look yeah so the gray on the background of them white on the foreground so I'm gonna yeah you can get hopefully you can see that in the video but this is a very different color to the background which is nice and then we're gonna add this box shadow now I'm kind of gonna guess this at the minute three pixels by three pixels let's say I pick so six pixels and then like almost white okay that's not too bad I think we're astir I think we're a bit aggressive with ours but us okay we'll leave that for now again not important I think the next thing I'm going to do is I'm going to sort that image I'll put this image in the right place so if you remember on this we're doing relative that that means that we can now do any card that has an image inside of it we want to position that to absolute and then say the bottom is going to be what did we do it before so we had a padding top of 25 on that and then on the card itself is 20 and 35 pixels so the bottom will be 25 pixels and then on the right will be 35 pixels believe that should sort the imager yeah and the last thing that I think we need to add in terms of the style is the stripes along the top yeah you remember these here so we've got like this red stripe these are all from the style guide the actual colors so we can grab those in a second now if you remember I put an ID on all of these so we had an ID for the team builder the comma a calculator supervisor the reason I did that is because we're not really going to reuse these styles these styles are very specific for very specific divs so I think what I'm gonna do is it's gonna be a card that I want to target with the ID of saying calculator must be that one first border I'm just gonna do a border top say five pixels and then it's going to be solid and then I don't need to get the color for that let me just look in the style guide it's one of these thinkest this blue one so we'll grab the blue one and we'll do that there you know what I might put these on a single line because the kind of replicated so we've got calculator what was the other one team builder Karma think it was and what's the last one supervisor supervisor right okay so now let's go back to the style guide we want team builder team builder I think is this red I mean it doesn't ultimately matter I forget the colors a bit mixed up but I think from memory that's correct and then karma what color was karma I think that was gonna be the I think calm is this orange color I think and then the last one that we wanted was the supervisor I think that was gonna be the the cyan yeah it was because you had the blue colors either side so if i refresh this today we get these in it's kind of cool yeah so that's kind of what we have done just a quick sort of I don't know it was that 10 20 minutes if we look at the design that's kind of what the design was this is kind of what we've got we can still tighten this up some more but that's going to be it for the video today I just thought I'd go over this and feel free I'll put a link in the description below to front and mentor and feel free to take a look at that it's it's a pretty good tool and I think if you were to jump on that and do what you know one of these every couple of days or even once a week you know it's gonna make you err about a developer because you're going to hit these problems and as you get into more complex things you know you're going to be learning more by doing stuff sort of active learning rather than passive so that's it for today guys in the next one we'll make this responsive because this just isn't at the minute and then I'll catch you in the next video so thanks for watching and I'll see you next time Cheers

Channel: Richard Bagshaw

Views: 3,322

Keywords: html, css, frontend, frontend mentor, frontendmentor, frontendmentor.io, html5, html tutorial, html tutorial for beginners, flexbox, css tutorial, web development, developer, frontend designer, html basics, html and css, coding challenge, coding challenges, learn html, learn css

Id: iHF_PP6yurQ

Length: 31min 7sec (1867 seconds)

Published: Thu Apr 02 2020