Create Featured Section With HTML & CSS | Frontend Mentor Challenge

so hello everyone welcome to this video today we are going to make this feature section as you can see that that's HTML and CSS section so we made it and also if you notice that that's fully responsive section as you can see that that's fully responsive section here and this is a front and mentor challenge if you know what is front end mentor so it's a platform for HTML CSS and JavaScript actually for the front end section and here what you can do is you can find some challenges which will help you to be a better front-end developer as you can see that you can practice with all these challenges so come here and take this challenge so today we are going to make this section which is as you can see that this four card featured section so in this video I will show all the process and how we can make this section also we will make it responsive as you can see that for this challenge we need to make it responsive so before that I want to thank all the people who subscribe the channel and supporting this channel for a long time and few days ago we just crossed our first 1000 subscriber so I am very very grateful to all and thanks for the support I really really appreciate it so no more talk let's dive into the video [Music] so as you can see that I'm in front and mentor and here let's go to the challenges and if I sort it with the easy so we are starting with the easy one so here as you can see that there are so many challenges available that you can accept and make something awesome so let's go to the first one so this is the one for card feature section and here as you can see that that's what we need to build that's an extra design and if you also can bu the mobile design as you can see that so this will be the mobile design and that's will be the desktop design so as you can see the download starter file so what you need to do is you need to click this button and each will download all the file that you need to start the challenges and as you can see that there are some step which you can follow so read these steps so once we finish download here as you can see that this is the zip file that we downloaded a moment before so what we need to do is we need to extract this file so if X track tipped so here as you can see that there is my extracted file and if I open it as you can see so Han here is all the file as you can see so what I need to do is I need to drag this file and into my vs code so if I drag it and as you can see that that's already set up and here as you can see that all the images that we needed in this project we have all here so as you can see that we have these all the images that we need and also the SVD as you can see and also we have this design so this is the design and this is the preview for our desktop and this is the mobile preview as you can see so in this design folder we have distri preview for our design and all the other thing that we need to start so if I come and open our index dot HTML file and here as you can see that this is the index file and here if you notice that we have all that text that we need it so if I come here as you can see that there are the text which we need it and in the index file actually these texts are given here so we do not need to worry and also if you can see that here in our folder we also have a style guide if I open it so you can see that there are some style guide that you can follow so in this style guide as you can see there are all the guide that we needed something like for the color as you can see that we have this primary and this neutral color as you can see so we have already discover so we do not need to worry about anything all thing is given here and as you can see that for the body the font size will be 15 pixel and the fonts for the overall project we will use Poppins and the font way it will be 200 400 and 600 so all the guide is given here you can follow heat so let's start our project actually so if I come here and that's open our mobile isn't PNG as you can see that's our mobile design PNG so let's so mean as you can see so in the HTML as you can see that we are going to make this so that's our mobile design and that's our desktop design so as you can see that the layout for the card is looking good and to make it what I need to do is how we need to so for that what we need to do is so we need to make a deep for all cards and here in these steep we will have three column one column two column and three column and in this three column for the first column we will have this one card for the second column we will have this two card and for the third column we will have this four card as you can see so after that what we need to do is we need to display them as the flags so basically these will do the work so that's the plan what we need to follow to create this layout so let's start it so for the index as you can see here we already have the text and here as you can see that for the mobile so we will design the mobile design first so we can separate this whole section into two part first part is the header and second part is the cards so here what I need to do is here we need to separate it into two parts header and the second one will be that deep with a class of cards in the header what we will have is as you can see that in our design we have this text so if I copy these two heading and this program and paste it in our header and what I need to do is I need to paste all the four cards into the our div so as you can see that's perfect and in the header as you can see that this is two heading so let's say that first one will be H 1 and second one will be also a H 1 not H 1 let's say that H 2 and also we have this prayer up so this will be the prank raft so after that in the cards as you can see that we have these four cards and basically what I need to do is inside the card we will have three column for these four cards so first column this will be second column will be this one and third column will be this one so let's create 3d with a class of column and duplicate so as you can see that we have G deep with a class of column and in the first column what I will have is I will have these fast card so just deal with a class of card and here we will have our first card content so we will have this perfect and for the second column if I come here as you can see that we have these two card as you can see for the second column so what I need to do is I need to copy this second column content and paste it here and what I need to do is I need to separate them with leave of card because we will have two card here actually so as you can see that in this column we are having already one card and also will have this second card perfect so if you can notice that inside our column we will have this card for the first column we have this one card and second column we have this two card as you can see and for the third column let's come here and let's say that in this D we will have our so let's come here in the design so as you can see that for the third column we will have this card which is the calculator all right now so as you can see that this is the one left if I copy and we will have a deal with a class of card and inside this card we will have our content perfect if I open it as they can see so all the thing is looking perfect and if you notice that in our card we have a h1 or h2 and also a program so if I come here in our card let's make it a h1 and inside the h1 paste the text and this will be our program for so h2 let's make it h2 instead of h1 so H to paste the text and this will be our program and also here we will have our h2 and this will be our program and for the last one also this will be H 2 and this will be our program perfect and the last thing if I notice that we have this icon which is the SVG for the project and if I come here in our project file we have all 4 SVG as you can see that inside the images folder so what I need to do is in our program after the program let's add our image and here in the source inside the design we have these 4 as VT as you can see so for the first one we will have this supervisor and for the second one let's say that I am G this will be the team builder and for the third one IMG design this one will be karma and the last one will be the calculator so that's fine all the thing is perfectly set it up and if I save and open it with our life server so as you can see that that's our X structure which is looking now ugly so we will make it beautiful with the TSS so let's add a CSS file here so let's add a CSS file style dot CSS and Link it with our HTML so before this style on after this title link our CSS and here will be our standard CSS and as you can see so for the CSS first of all let's remove the gap so margin will be zero and padding will be zero in the universal selector so also the box sizing will be border box and that's fine after that into the body let's say that our font family will be so let's come here into the style guide and as you can see that we need to use poppins so come to our browser and open font google.com and here what I need to do is I need to select our Poppins and in the Poppins what I need to select is 200 and 400 and 600 weights so if I come here this is the 200 so extra light 200 and 400 this one and last these 600 semi-bald so once we select that what I need to do is I need to import that so copy this import tag and come here in our style dot CSS and paste it in the top so that's fine so now we can use Poppins in our product so apply it here Poppins and also let's give it a sensory fallback so that's looking fine as you can see that so after that lets say that font size will be 15 pixel and also let's say that there will be a padding of 0 and 30 pixel because we are designing the mobile design and as you can see that in the mobile design we have this padding as you can see here for the overall section so for the mobile we need to give it a padding in the body so let me make it perfect as you can see so what I need to do is so after that let's come to the header so here in the header if I come as you can see that in the header we have text-align:center so what I need is I need to make a texture line center and also if you can see that we have a big padding from the top and from the bottom so what I need is I need to make a padding of about 70 pixels for the top and also zero pixel for the left sorry for the right and fifty big zeal for the bottom and zero pixel for the left so as you can see we have some gap from the top that's fine so after that what I need is I need to come here in the header we have a h1 which means this h1 for the first heading as you can see so if I come here in my HTML inside the header we have this h1 perfect so we selected our h1 and let's say that font size will be about 1.5 Prem and also say that font weight will be about 300 or 200 perfect and also say that color so for the color as you can see that in our a style guide we have this we have this four color here and also this 3 color so as you can see that in our style we have this color which is I think our dark blue so if I copy this dark blue color and paste it here so it is looking perfect as you can see that so after that let's design our h2 so header h2 so this will be font weight about seven hundred which is the old one and font size of about 1.5 bream similar the previous one so the color will be as you can see that this will be the same color which is the dark blue if I paste it and as you can see that looking perfect so as you can see this is already looking similar and let's come to our program and here in the upper graph so had our red crop for the prep graph let's say that font weight will be about three hundred or two hundred two hundred is too much I think instead of two hundred we can use four hundred here yeah four hundred is looking perfect so font weight for hundreds and also let's say that font size will be one Ram means 15 pixel and color the color will be if I come to our mobile design as you can see that this is the light gray so if I come here and as you consider this will be the bluish gray means grayish blue I don't know which is the right one blueish gray or grayish blue so this will be the color for our program taste it and perfect as you can see so the last thing what I need is I need to make sure about some space between these prop and heading so what I need is under this h2 we will have a margin bottom so when the margin bottom let's say that 1.5 Prem perfect as you can see we have much depth so after that let's come to our cards so in the cards what I need to do is first of all I need to make it as a display flex if I save and as you can see that if I give it this place it is already taking a structure which is similar to our desktop design as you can see for the first column we have these for the second column we have that too and for the third column we have this fourth card but for the mobile design we need to make it in column so what I need to do is I need to say that flex direction will be the column so when we will go to the desktop we will make it row once again so after that let's come here and say that a line items will be Center and justify content will be Center and also let's say that margin bottom will be 80 pixel because we need some margin for the bottom so perfect so after that what I need is we need to design our card so for each individual card as you can see we need to make a box shadow so for the Box shadow to pixel X and to picture not to it pixel Y and 14 pixel and 0 pixel and for the color we will use our if I come to our style guide let's say that this will be the same grayish blue for the box shadow so as you can see that we have this shadow going on here so perfect this shadow is working so after that let's give it a border radius also eight pixel and padding of about 30 pixel and margin for to Ram and zero for the left and right perfect as you can see we have this box shadow going on and after that we need to make it max width of about 400 so this will be the maximum width so now everything is looking perfect as you can see so max width of 400 and if you notice that the gap is not same for the all cart for here as you can see we have about 60 pixel gap but here we have 30 big fellah also once again we have here 60 pixel gap so we will fix it in a moment so before that what I need to show you is if I come to our design if you notice that we have something a border into the top this border is not same it is different for the 4/3 so for that what I need to do is in our HTML beside this card we will have another class for the each one so for the first one we will have a aqua because if I come here into the desktop the color is aqua so that's why I am giving an aqua class besides this card so also for the second one as you can see this is the red so let's give it a red class and for the third one we have an orange color so Orange and for the last one we have this blue color perfect so what I need is I need to make a border top into the card so card with a class of aqua will have a border top about 5 pixel solid and also will have a color of aqua so if I come to our desktop preview so if I come to our still get this is the color for our aqua so if I come here and copy this color and paste it so if you notice that we have a top border in our card so that's looking perfect so after that we will have same thing for our 3 cards so for the second one which is the red so if I come here in our style guide we have also given is red color so copy this color and paste it here and for the orange we have this orange color copy that and also make sure that you changed the class name so for this one we'll have this orange and also paste this color and for the last one we have this blue color copy this blue color code and paste it here before that let's change the class name perfect and as you can see that we have this border in the top perfect so the next thing what I need to do is I need to remove the 30 pixel gap which is given extra here because as you can see that before earlier we extractor it with a column so that's why we having this problem so what I need to do is for the second one if I come here which is the red we need to say that margin will be zero if I save as you can see that there is no more and also for the third one which is the orange and let's say that margin will be zero perfect sorry not for the third one it should be for the fourth one margin will be zero so as you can see that we have this constant gap going on here perfectly so perfect so after that what I need is so after that we need to position our image so if I come to our design as you can see that this image is actually in the right side so for that if I come to our CSS so inside our card we have this image and we need to say that display will be blocked and what I need to make margin right will be Auto it will make it sorry not margin right margin left so if I make margin-left:auto it will give the position for the image in the right side perfect so what I need is for the last thing if I come here in the design as you can see we have a gap between these content and this icon so we have a gap so let's give me the gap let's say that margin top for our image will be about 20 pixel which will make a gap similar so perfect we have these all let's make it 30 because I'm looking better now so once we join we need to design our prayer group and also these h2 for the cards so for that let's come here and say that card h2 and let's say that the color will be the which one so let's say that the color will be the dark blue because if I open as you can see that we have this dark blue I believed it's an dark blue I don't know it's kaleidos so also let's say that font size will be 1 ram and let's give a stile not one Ram actually 1.5 flame will be good yeah 1.5 Ram is looking better now so also let's style our prayer up so let's say that for the program font size will be about one room so one room is looking better and for the color we have this grayish color so if I open this gray color and let's say that the color will be this one perfect so it's looking perfect as you can see our cards are looking good I think we should change our this box shadow so here it is the box you know so if I decrease the opacity I think this will look good so copy this box shadow so it will be better I think if I give it a subtle like that so that's fine as you can see that so the last thing what I need is I need to make it also for our desktop so as you can see that for now it will be looking like that and also if you notice that our prank drop is not looking good so in the header play graph let's say that the max width for this backdrop will be 500 pixel so now it is in our left side so to make it Center let's say that margin zero or two so looking good as you can see so the last thing what I need to do is I need to make it responsive for our desktop so in the bottom let's come here media screen only screen and max width or min width let's say that to all f100 Enzo and here let's say that what I need to do is if I come here in the cards what we did is the Flex Direction column so we need to remove it for now so let's say that for the cards flexed reaction will be the row sorry we mistake so this will be the cards actually so as you can see that the layout is already taking place perfect so the thing what I need is we need to make sure about the left and right margin so in the cards but I need not in the cards in the card actually why I need so we need margin to ram for the offside looking perfect so what I need is if I come here instead of giving margin zero to our thread one we can give it to our aqua cart so as you can see that if I come here in our mobile design so this aqua has now no margin for our mobile design also as you can see we have removed margin:0 from our red card so which means we have now Martin which is from our red card as you can see this margin is from our red card instead of this aqua card so this will fix a problem so high and we will come to our desktop design actually as you can see that so it's looking perfect so also if I come here into the desktop I think we should increase the font size here so let's say that in the header or let's give it font size in the body actually font size will be about 18 pixel and also here in the header we have this h1 and h2 we need to make the font size 1.8 RAM which is looking or 2m let's try to ram looking good not bad not bad so also let's increase this font size which is in the header our red cup so the font size will be about let's say that 1.2 m too much one point wonder perfect so that's it as you can see that's our project which is looking good as you can see if I come to our mobile this is looking like that if I come to our desktop this is looking like that perfect so you can preview this project in a life site the link in the description so also you can get the source code for this section in the description so you will find all the necessary link in the description don't worry take a look and that's it for this video so if you like this video please give it a thumbs up and don't forget to subscribe the channel and please let us know if you want to see more challenges from front end mentor I will happy to make these all challenges for you please let us know in the comment section and if you want you can join our Facebook group the link in the description don't miss it and join the group and if you have any problem with the code please let us know in the group and I will try my best to help you and that's it for this video my name is Arvind and I will see you in the next video till then stay home Astra save to the office [Music] [Music]

Channel: WEB CIFAR

Views: 4,926

Keywords: coding, programming, design, design to code, html, css, frontend mentor, four card feature section, design to html/css, tutorial, github, netlify, static website, website, html tutorial, css tutorial, website section, web cifar, How to make a featured section, Frontend Mentor Challenge, Create Featured Section With HTML & CSS, how to make a website, card design, css card, flex box, flex box design, frontend development, frontend developer, coding challenges, css tips, arfan

Id: Smhq54B5w_s

Length: 33min 50sec (2030 seconds)

Published: Mon Apr 13 2020