Responsive Order Summary Component | Frontend Mentor Challenge | Day 1

hello everyone welcome back to another video and yesterday i was watching this youtube channel named coder coder and i learned about a website named fontene mentor so if you don't know what this font inventory is that it is actually a website the url will be frontend mentor dot io i will leave the link in the description below so it has some challenges for the front end developers so if you go to the challenges space in here you can see multiple challenges for different testers and for different languages like some of these are for only for html and css some of these also got the javascript included there are total five stages i think newbie intermediate junior advanced and guru total five stages of difficulty so you can filter by the free and premium actually there are some premium projects as well so if you want to unlock the premium projects you need to buy it from here so i think the pricing is something like okay how is the pricing here it is so you need to pay a dollar per month yearly and monthly 12 per month so i don't have any premium benefits or i didn't pay so we are going to cover the free projects so if we uh filter out the free owns and for nubian junior there are uh lots of budget here so i will be covering total of 15 projects in the next 15 days so i will be uploading this video daily for next 15 days at around 8 00 am the eastern standard time or est i will create a playlist out of this and i will leave the link of the playlist in the description below as well so if you are not subscribed yet please don't forget to subscribe and also click the bell icon so that you will get notified whenever i upload a new video and for the next 15 days there will be no gap among them so for today we are going to create this first project here which is the order summary component and without any further deal let's get started so at first in order to go through this you need to log in with the github you can just click there and it will add the github link and will ask for your permission and after we do that i'm actually already logged in here so let's get into this order summary component and here is the thing so if you want to get the skills and figma design file access you need to unlock the access with the pro but i don't have that so i'm not going to get that so they will provide the jpg design files for mobile and desktop layout also for style guide for fonts color the video asset readme file to help you get started and the html file with the written content which will actually cover this text here so i have already downloaded it once that's why it is uh saying that i have already started this challenge but if you didn't do it then you will have a red color button like download the resources or something like that so i can download it again and there are theorists the first one is you can download the starter files then download that design file which we cannot do otherwise you have a pro access then you can also submit the solution if you want to see the solution here you can do that so i haven't submitted any solution but yeah okay so after that we are going to download the starter files from here and it will download this as a g file like that okay this is our component let's just extract it in the desktop here so it got multiple files the first one is for the design the jpeg format and the images we need to complete the challenge and this index.html got some text let's just open this up by the visual studio code now we can read that okay the styleguide.md got the font and style guide which got the layout they designed it with the following weight the mobile 7 3 7 50 pixels sorry it is 75 pesos and for desktop 1440 pixels the colors you also got some the colors they have used but they are in the ssl format although you can use it directly from here the font family is redhead display you also got the google font link here the phone right you can also read out the entire readme file i haven't read it yet and i don't need to okay actually don't know how does it either but let's just ignore that and we also get the gate ignore file we are not going to use git so it is completely useless to us now also this is the activist that means when you hover on something it looks like that is the desktop design desktop preview and mobile design so we can start directly from here so i'm going to do that let's just clean these things up so we don't need any style tags here let's sleep the title like this we can also keep the favicon let's see delete this comment here okay now we need to add some style sheet to install this so i'll just create a new file named install.css it will contain our stylings so we need to link that up blank css and style.css so this css style sheet is linked with the html we don't need this either let's delete that now we got it so let's create the markup first and we can see it directly from the visual studio code let's see the desktop preview so you need to always plan the styling first before creating the markup so we can add this background thing we got a background illustration here this is the pattern background so we can add the background with the body here and also some color and inside that we can create a something like container wrapper which will contain the entire thing okay let's start so i'll just create a tee with the class of container this container will contain this card here so at the card at first we got this image so yeah let's add that let's create it with the class of hero and inside this hero let's add our image the images are in the folder named these images they're in the root folder now this is the illustration hero okay so after that hero we got some of the test and as you can see here there are some padding at the top left right bottom so we can put all these things inside if and add some padding with that div so let's create a day with the class of text content maybe which will contain all the text here so inside it we at first has a title then a subtitle then a box which will contain these three items so let's add the title first i will just add a is to tag with the class subtitle and we can actually get the text directly from here let's just paste this after that let's add the subtitle i will use the paragraph tag with the class of subtitle now inside this let's just cut this and paste it here so after the paragraph tag we need to figure it out first so we got a box so we can create a div and add the background color with it so in this box we got three elements at the left most corner we got an icon which they provided us with i think this is this busy and okay after that we get two tests and all plan and some dollar per year then a change link so what we can do is we can put all these items inside a div and we can make the div a display flex then we can arrange them properly so in this case the first two items should be inside you here and then chains will be at another div so there will be gap which are in between each other so we can use something like justify content between so we are going to do that so let's use that dave and let's give it a class of plan box maybe okay so inside this we got two different contents in the first div and change in another actually we can actually use an anchor tag there so let's use a div with something like plan box left i'm actually very bad with this class name and id name so you can give it whatever class name you want you prefer so in the flex box left we got two items the first thing will be the image the image is images then icon music okay after that we need to put these two inside here so let's do that let's create a we don't need to specify any class or id or anything so inside this let's use an s5 tag for the title i like the plan name and let's also use a paragraph tag next which will contain the okay this thing the pricing so after this div actually uh these two are finished so we can add this with an anchor tag inside the plan box part after finishing up the plan box left let's add an anchor tag and that test will be changed okay now the box has finished so we need to add two buttons in here so for the first one let's add a class name of proceed btn we can just grab the test and paste it here so let's create a copy of this and the second one is for the cancel cancel btn which will be this one cancel order so let's grab it and replace the text okay the markup is done so if we click the go live it will open it by the chrome so as it said in here the readme sorry the stylegate.md it has been designed in 1440 pieces desktop point so let's use this breakpoint here 1440. okay so in here we have used this developer tool to see it in the 1440 pixel side as you can see it is in the 1440 pixel side now let's minimize this so we can see it live okay now we are done with our markup now let's get into the style.css so in here at first we need to add the font so if you click it uh the alter and click it will open the google font so in here they have added 500 700 and 900 right so 500 700 okay 700 and 900 now we are going to import this so let's import it inside the style.css and also let's copy this okay now let's target the body and at first i will just paste it here so as you already know the browser has some default margin and padding so for that case there is some gap and left and right so we are going to reset this by using the aesthetics here so margin will be zero padding will also be zero let's also make both sizing border box now the margin and padding are gone now for the body we got an okay let's open the image here we got a background image and these things are in the center and also got this background color of white also the corners are a bit rounded so we can use the border radius here so let's give this a body of minimum height of something like 100 people height so minimum height 100 people then let's set the background image url and it is inside the images then pattern background desktop now we got this but we don't need to repeat this so background repeat will be no repeat and the background size will be contained okay it looks better actually it doesn't look better let's try with the cover but the thing is covered is it will take the entire enter height and we actually don't need that so we will just make it contain okay now it is far better so inside this as you can see here it got also this uh background color so in this white space it will give it will get that color so for that color we need to get into the style design dot md so the primary color is pale blue and bright blue so i think this is the pale blue color so i'll just copy this color and add it as a background color now we got the similar effect here so after that we need to target this entire thing and make it center right so we put a container div here so we need to position this at the center that's why we need the position to absolute and we will position it in relative to the body so for that we need to give the body a position of relative and the container a position of absolute now we can make it from left 50 from top also 50 percent and in order to make it properly centered we need to use the transform property so transform translate and on the x-axis it will be minus 50 percent and around the i exist also minus 50 percent now it is centered let's give this a point so let's say we on the max weight to something like 450 pixels and let's give this a background color of totally hot color actually i think we need to maximize a little bit smaller than that okay let's uh keep this like 450 so the background color is height we can also add a border radius to make the corner rounded i will go with 20 pixels let's save now the corners are rounded but images are overflowing it so we can give this a overflow hidden now these two corners will be rounded too so now let's add some padding with this div which contain all the test in here okay now it got the class of text content i think uh let's go to the index.html and see it just to be sure okay it's the text content and in the text content let's add some padding we can use the percentage value here because this is too much okay now we got some nice padding after that let's target the title so we got a h2 with the class of title you can just target the title here directly so for the title we got a color i think it will be the dark blue let's just copy this and see it the design preview okay this is the dark blue color will be dark blue okay fine let's make it bolder by giving it a phone to it of 900 we have also imported this also let's make it a little bit bigger so font size maybe something like 32 pixels and let's also add some margin at the bottom so margin bottom let's try 20 pixels but as you can see here in the design all the text here at the center so we can add the text align center with the body or maybe with the text content text align center now they are all in the center so after designing the title here let's target the subtitle so text text content and then the paragraph tag with the class of subtitle let's give this a color of something grayish they actually didn't provide us with the color of this taste so i will just add any random color so in this case i'll just add something like totally black and then see it here so if we get the text content and okay let's get this so if you select here you can see it in the developer tool and you can choose whatever color you want so i think this color looks best so i'll just copy this and replace the color from here now it got this nice uh greyish color so actually don't need anything except we need a margin at the bottom so let's add that margin bottom something like 25 pixels now we are going to target this box here so all these things inside the box got a class of plan box let's give this a background color and they actually provided us with the background color this is the very pale blue color very pale yeah okay let's just paste it now it also got some nice border radius to make the corners rounded so let's add a border radius of something like 12 pesos so now we need to apply the flex here so if you see the index.html so this is the plan box we got two items in here the first item and the second item so we are going to make this plan box a display flex so let's do that display flex now there will be something like that so we put these two items inside a plant box left div so we can again put a display flex of that but before doing that let's add some padding with the plant box here so padding not the padding okay padding okay uh the padding let's try 25 pixels it will have some nice gap and all around it so after that let's target the div here so it got the class name of plan box and left so make the display of flex and make the align items center now there in the center we can also apply the align item center with this plan box but we need to create the gap between this so let's justify content and a space between so that will be most of the space gap between these two different items in here we have added the text align center with the text content that's why they are in the center but we actually don't want this with that so i will just add the text align to left okay now we also want to create some gap between these two so let's target the plan box left and the div between this so this div will contain is containing these two text here so i will just add some margin at the left maybe 20 pixels okay it's fine now let's target this text here so plan box left then div then this is the s5 let's make the phone to it to 900 so it will be bold then form size to something like 15 pieces it will be a little bit smaller actually they have given this the font size of 16 pixels with the body by default it is already applied but let's make it font size of 16 pieces the default is 16 pieces so it is already there now font size we made it a little bit smaller also we can give the color of the dark blue which we have given this the title okay this looks fine but we also need to make this something pale like this color and this color is the same so i'm just going to use the grayish color we have done before let's just copy this and started the paragraph tag here so let's make the font size to 14 pixels font right we don't need any and for the color it will be this hexagonal color code so i'll just copy this and replace it here okay we're done now let's uh target this change here so this change has this color of dark glue and it is also bold so let's target the plant box and the anchor tag make the phone toy to 900 which will be bold and we don't have any okay we actually got the underline here so we don't need to remove that now so for the color let's get the dark blue which is this one okay the box is done now let's style these two items here so they are actually the anchor tags that's why they are aligned in the same line because by default the anchor tags are inline element so let's target the a or the anchor tag with the class of proceed btn let's make the display block text decoration will be none there will be no underline let's make the color to totally height we cannot see it so we need to give this a background color and the background color it is the bright blue color as you can see this is the blue okay now let's add some padding like 20 pixels and zero because we don't need any padding in the left or right so we only need the padding at top and bottom so after adding the padding we can also add some border radius with that so i'm we'll just go with the 12 pixels because we have given this the same border radius with this box also now we need to add some margin so let's do that margin and top and bottom let's try 30 pixels and left and right zero now it got some nice gap so i think we are fine with this now let's uh style this cancel order button and as you can see it got this desaturated color here they have given us this saturated glue so i'll just okay let's just add the selector so can cell dash btn and color the color will be this desaturated blue color also we got no underline here so i'll just make that text decoration to none also let's increase the phone to it to 900 okay i think this is it this is the inactive stress but they also provide the active states so in active stress let's just do it with the first one the chance test so the inactive esters when you work on that they got no underline and the color has been changed so this is the pan box a and let's add plan box a and over so with the hover let's make the text decoration none so when you hover on that the underline will be gone now let's change the color so when you work on that it is actually the dark blue color and they also provided us with the bright blue i'll just go with this one i think everything is fine and we cannot see the hover effect in here but now we can do that so it is fine but we it will be better if we add a transition effect with that okay i cannot see anything because of the suggestions transition we only need the transition to add with that color so let's try three second is let's save okay it's fine now let's uh add some over effect with that so whenever on that it got this desaturated blue background so let's add a hover effect with that so it is the proceed button let's just copy this and create a hover stress so whenever on that we just need to change the background color and i think this is the color so this is the hover color here now we can also add some transition as well so i'll just copy the transition from here and paste it so in this case we need to effect the background color okay now it looks better now let's add the hover effect with the cancel order button as well so when you hover on the cancel order it becomes dark blue let's also add the transition here now okay with the close-up cancel button let's add the hover and make the color to the dark blue let's save okay so everything is fine for this breakpoint now let's talk about the smaller right or the mobile version so as i said the mobile version will be seven at 375 pixels so 375 pages so in the 375 pages it is actually looking very bad and broke so let's just go through all this and it looks better so we'll just work with the 425 pixels it will also cover the 375 pieces as well so let's add a media query media only screen and the maxoid will be 425 pixels so when will be when the viewport will be smaller than 425 pixels we need the container to have a max weight of let's say we can use the past sentence here 85 percent it is better actually let's uh increase this to 87 pixels okay that's fine now let's target this we bought the 375 pieces and style it to make it look like this so they gave a background color or background image for the mobile viewport the background pattern background mobile.sbc so we need to change the background as well although i don't find any difference in here let's target the body and give the background image url images and pattern background for mobile let's increase the font size to 14 pieces previously they are 16 pieces now let's make the title a little bit smaller title let's make the font size to 22 pixels or maybe 23. okay it's better we don't need to do anything with the subtitle here so let's target the plan box it is actually good for 375 pixels but in a smaller display like 320 pieces it blocks into two different lines and it doesn't look good so i'll target the plan box first then reduce the padding all over it so padding let's make the padding to 12 pieces i think it was 20 pixels before now they're in the similar line let's also decrease the gap between these two so plan box left and div it got a margin left let's make it 10 pixels okay it's fine now let's talk about these two so about that it looks good but if you make this uh fonts is a little bit smaller let's see what happens so anchor tag with the class of prosit okay proceed dash btn and it will have a font size let's say 10 pixels okay way too small 12 pixels it's better we can also try 13 pixels let's also do the same thing with the cancel button and the plan box and the anchor tag which will be this test here now let's see how this looks okay now inspect this again with all the viewport looks fine in [Music] 2500 pixels also 1440 pixels okay i think it needs some more gap at the bottom and we can reduce the gap between these two and add some gap at the top so let's target the media query here and i have added this with the con are the text content the padding is seven percent i'll just copy that test content class and edit here let's make the padding so we can leave the padding at left and right the same it is it is but for top to bottom let's make it nine percent and seven percent now we got some nice gap okay i think this is perfect so the project is done and i'm not going to upload this on github but i will upload this in the code pen so i will add the link of the code pen in the description below so you can go and check that out also if you've done the same project and want to share with me you can also upload this in your code pen and share the link in the comment so i can check that out so this is the first project we have done and in the next day we are going to do another project from front-end mentor let's see what we can do in the next day so in the next day we are going to create actually let's apply the filter here and uv so we are going to do this stretch preview card component so see you tomorrow in the next challenge and thank you very much for watching if you are not subscribed yet please don't forget to subscribe take care and good bye [Music] you

Channel: Mr Coder

Views: 2,514

Rating: 4.9506173 out of 5

Keywords: frontend mentor challenges, frontend, coding challenges, frontend mentor newbie challenges, Order Summary Component, css grid, frontend mentor, responsive design, frontend challenge, front end mentor challenge, web development projects, frontend mentor order summary component, frontend mentor tutorial, web developer tutorial, responsive design html css, web design tutorial for beginners, learn html and css

Id: rCBYZ7xn-us

Length: 38min 37sec (2317 seconds)

Published: Sat Aug 14 2021