Order Summary Component - Frontend Mentor Challenge

hello everyone today we're going to be doing the order summary component from fronted mentor [Music] so you can head over to frontendmento.io for slash challenges and then you can click on this challenge i have already completed it and i did it in react but for this video i want to use html and css so you can click on visit challenge hub and then right here you're going to have a download button but i already completed it as you can see it says view solution and you can just go ahead and download it if you would like to learn web development you can go to udemy.com and check out my course or you can click the link in the description as well once you've downloaded it then you can head over to your downloads folder and then you will find a zip file right here which can then extract and then i'm going to open this up in visual studio code okay so as we get started then i want to mention that i'm going to be using an extension called live server which will just allow me to do hot reloading which means i don't have to keep on reloading the browser manually every time that i make a change and the extension is right here it's called live server and you can go ahead and install it on your system so i'm going to open up the index.html file okay and just to see what we have on the screen that i'm just going to right click here and then i'm going to say open in the live server and this should open up on localhost 5500 and there we go so i'm going to place this to the side and we're going to have this okay so let's go ahead and create our styles.css file and inside here i just want to place some default styles and i'm going to say reset the margin to zero and the padding to zero and then add the box sizing of border box and for all the images i want the max width to be a hundred percent 100 right there okay and then for the body we're going to have a fun family which i'm going to grab in a moment so fun family and the fallback is going to be sun serve and i think that's going to be it for now so let's go back into our index.html and link our style sheet right here so link styles dot css like so okay and then we can grab this and remove it from here and add it in our style sheet and we can add it right here let's place a comment that says attribution and then just paste this in okay i think that should be fine so let me close this sidebar and then let's begin styling this out uh rather structuring this out so i'm going to grab all of this and then i'm going to place a d with a class of container like so and then for this i'm going to place this inside an h1 oops i'm going to cut it out so i'm going to cut it out and place it inside an h1 and then i'm going to grab this cut it out and place it inside a paragraph and then grab this once again press paste it inside a div and then grab this cut it out at the bottom and of course this is a button but i'm these two are buttons of course so i'm going to grab a day with a class of buttons like so and then cut this out place this inside the button once again and then this inside another button like so okay so i'm going to save this and it should reset a few things on the screens just like that so let's go ahead into our style guide marked on file and then let's grab the red hat display from foster google.com so just copy this link and then paste it in your omnibar and we're grabbing the 500 700 and 900 fonts so we want the 500 the 700 and the 900 and i'm just going to use the import so i'm just going to copy this and then i'm going to paste it right on top of this paste it inside here and then change this into red hot display and that should be fine there we go so our phone is going to reset okay so you'll notice that the buttons don't take up the font family of the body so we need to specify this so let's go back inside here and say that for the buttons then you want the font family it should be red hat display and sun serif as a fallback so save this and that should happen and i think i think you can just have this as inherit and it should still work yep you can place this phone for me to inherit and it's going to inherit the phone family of the body once you have that let's go back into our stack that markdown file and then just grab all of these colors so copy this and then let's place them inside root like so and then we can turn this into variables so dash dash spell blue okay and then this is dash dash bright blue and then remember to add your semicolons you can remove this so this is very pale blue this is desaturated blue and then this is dark blue okay and we should be fine so let's save this and then on the body let me just go into our design files let's look at the mobile design there we go so the body has a pair blue should be pale blue let me just check this out the saturated blue color blue let's test it out so background color let's say this saturated blue this should be a variable nope not that one let's say pearl blue i think that's it okay so pale blue and then let's go back inside our index.html and you'll notice that in our images we have a background pattern for the desktop and the mobile now it's a bit difficult to see the pattern on the on the mobile on the mobile design actually on this design but if you go into the desktop design then you will see this kind of a background pattern right here okay so we are going to need to add that in as well so let's go back into index.html and write about the container i'm going to add a deal with the class of bg underscore underscore image like so and i'm using emit i should mention that's why i can do div dot and then bg underscore underscore image which will create a div with a class of bg underscore underscore image so that's how i am doing this okay so let's save this and let's go into our style.css okay and let's go ahead and let's create let's tell our bg image like so and let's see the background for this should be url and set this to dot slash images for slash because of building a mobile phone so we want the mobile image first and then set the background repeat to no repeat if i can spell it and then posing to the center and cover and then let's give this a height of 400 pixels let's see where it will be right there so now we can see our background pattern right there right but we don't want it to push down our content instead one it position absolute and then the content is going to go on top of it so let's say position this position and spell it absolute okay so that that will happen right okay so once you position it as absolute notice what happens it kind of disappears right so in order to bring it back into view then we're going to say set it to the top by zero and then to the left by zero and then to the right by zero and then to the bottom by zero and we're going to save this and this is what is going to happen so it is now on top of the content in order to bring it back then we're going to add a z index of negative one or any negative number really which is just bring it behind our content and we're able to see our background pattern and then our text right there and we are fine now what we need to do is we need to change this background pattern when we get to larger screen devices so i'm going to add a media query here and i'm going to say at media for a min width of 768 pixels which are tablets then i want to target the bg image class and then i want to change the background so i'm going to say background url set this to slash images for slash the desktop pattern now and then set the no repeat and then to the center and cover like so and then probably increase this height to 500 pixels and you know what instead of 500 pixels let's say 50 viewport heights so that it takes up half of the screen so i'm going to save this and then let's see whether that works so we're just going to increase this and right around here you can see that the background pattern changes it's very subtle but it does change as you can see amazing so let's go ahead and build our mobile version and what i want to do is now let's begin targeting the container okay so let's go into the container right here dot container and i'm going to give this a background color of bg color of white let's see okay and then on the body not on the body really let's add imagine all round of 20 pixels which will push it inwards just a bit let's add a padding of 20 pixels to push the text inwards without affecting the color like so let's add a border radius of around 5 or 10 pixels so body radius let's say 5 pixels let's add a box shadow of rgba or sorry another gpa but let's say three pixels three pixels three pixels and then let's do um let's do this one let me see how this looks and then let's do 0.15 okay very very small very small so that's okay okay and then i've just realized that we need an image we need this image on top of this and this image as well so let's go back into our index.html right above this let's add an image the source for this should be images and it's called icon music nope not icon music but it's called what's the name of this illustration hero there we go so that we're going to have this okay and then let's go inside here and inside here we're going to have our image which is coming from dot slash images first icon music okay so that we're going to have this right here and then let's grab this annual plan place it inside an h4 and then grab this and place it inside the paragraph so that we're going to have this okay and actually this change button is where is this change button it should be right here okay so let's place it inside here just bring it upwards and then what i'm going to do is i'm going to grab the h from the paragraph cut it out and place them inside an article the reason for that is because we're going to be displaying this div as a flexbox so this is going to be the first item and then this they're going to be the second one and then the third one just as they are arranged here so the first second and third and actually what we could do is another way you could do this is because this is a bit closer to the music icon so what you can do is just bring this article upwards so that when you display flex on this then the article is going to be the first item then the button is going to be the second item so that when you say just find content to space between then the text is going to be closer to the image so save this nothing is going to change really but what i want to do is give this button a class a class of btn dash change okay and btn as well a class of btn and biting does change and do the same for this so give this a class of btn and then btn.primary and then this second one is going to be between the secondary because they are styled differently as you can see okay so let's go into style.css and let's tell our buttons okay so but also let me see the uh all the btn classes then i want the background uh sorry i want the border to be num let's see that okay let's add a padding of five pixels on the top and bottom and 10 pixels on the left and right that should be enough let's add a border radius of let's say 10 pixels and let's just have that for now and then let's go into btn dash change so the class of btn change then we want the background color to be transparent and they want we want the text color to be which one was it bright blue right uh where am i bright blue change this into a variable okay so bright bull right there and let's add text decoration to underline so we're going to have this underline right there so that's okay probably we want to change the font weight to bold okay and you know let me just confirm this all the buttons have a bold font to it so let me grab this and place it on the btn class right there okay looking fantastic let's increase the size of the buttons so let's say font size let's say around 16 pixels and actually i've just remembered that in our style gate we have a default font size of 16 pixels for everything so let me just go above here and let me see so let's change the font size to 16 pixels okay so let's target our h1 right hand side here since the container let me target the h1 and the what what's the color of the h1 actually it's very dark so change this color to this one that should be it okay and then let me go inside the body let's go inside the body and just say text align center so text align center which will move everything to the center as of course and then on the paragraph let's increase the line height to 1.6 okay so let's also add a color on the paragraph of what was it should be should be should be this one desaturated blue so let's say color set this to be saturated blue okay there we go so that's looking amazing and then we were studying our buttons right so let's go here and let's say btn dash primary okay change the background color for this to bright blue i think it was okay change the text color to white okay probably i should probably increase this padding let me just increase it here let me see the padding of 10 pixels all round okay and then copy this and paste it inside here as well for the no no no not for the bit and change the built-in change that it doesn't need to have extra padding and then let's go into the btn secondary let's give this a background color of transparent okay and the text color is going to be desaturated blue should be it is it yeah okay right there and then now we need to have hover states so let me grab this one first let's say that for the hover state for this then i want the color to be this one so let's see okay there we go and of course for the btn adjust all the buttons i want the cursor to be when i hover over it so cuz a pointer and there we go and then let's grab the btn primary let's have the hover state for this so on hover i just want to change the opacity to around 0.8 let's see there we go and then do the same for the btn change so i can actually do it right here so i can see btn change and then target the hover state like so and there we go okay so let's add a transition so right here actually i can add it on the bottom so let me add a transition of all so transition all the elements by 0.2 seconds and then let's just say is in out and there we go nice transition okay so let's go ahead and continue starting this out and i've just realized that i don't want the padding to be inside here because it moves the image in once so if i remove this then look at this and we are going to have this so let's go inside our container and let me just see how i style this out actually how i extracted it rather so i have the image okay so let me target the container img so dot container i want to get the image and then i'm just going to set the width to a hundred percent okay and actually i should probably explain that's why that's why we have this kind of space here because the image is just a bit less than 100 but if you define this then it takes up the entire width and then i want the border radius on the top and actually what i can do is i can add a border radius of 10 pixels on the top left and right and 0 on the bottom left and right okay so that we're going to have this and this is actually wrong this should be 10 pixels 10 pixels and then 0 and 0. otherwise this kind of pattern appears do you see it okay and this is what we want and this was actually five pixels we used five pixels okay and as you can see now that we've added the width of 100 on the image then it messes this up right so what i want to do is i want to give this image a class of its own so let me give this a class of hero like so okay and then let's go into index.html and let's give this image a class of hero so that it's the only one that is going to be affected okay so that's looking amazing and this just means target the container and the image that has the class of hero so that's what this means okay and then let's go ahead let me see this so we have a paragraph okay so let's go inside this div let me give this deal a class of pricing like so and then let's target it so the container and then i want to get the deal with the crowd the div actually with the class of pricing so then i can say i'd imagine let's say margin of 10 pixels in the top and bottom and there on the left and right okay so just move it away actually let me say 20 pixels yeah that's much better so 20 pixels on the top and bottom and zero on the left and right okay and then this div has a background color so background color of paint blue should be it there we go and then let's give this deal a width of 90 percent which means it's only going to take up 90 percent of the container which is which is the parent of the div and then let's say margin of uh sorry let's say right here 20 on the top and bottom and auto on the left and right which will center it like so and then let's give this a border radius radius of five pixels and just maintain the border radius okay and then finally we can say display flex so display flex okay and then align items to the center and then let's say justify content to space between which will move it to the end like so let's add a padding probably let me go below this let's add a padding of let's say 10 pixels all around okay and then let me go inside the article okay so inside this article and then display it as flex also and actually uh this might mess up a bit so let me grab this and place it inside the div like so so that when i go inside the article and display flex then this is the first item and then this is the second item so let's grab this so let's say container and then pricing and then um article right so let's say display flex let me see there we go and then aligning them center what i mean okay and just connect to the center so that this happens and then let's grab this once again and target the image so img let's say oops let's say margin right and set this to 10 pixels just push it away from this just a bit and then probably this is not pale blue this is not pale blue actually sorry for that it should be around very bad blue so very beautiful okay so very purple so that we are able to see this icon for the for the music algorithm so that we're able to see the music icon okay so this is almost almost complete but let me i've just realized something let me go back and add a bit of margin on the on the h1 so the container h1 actually should name in container h1 like so so let's say increase the margin here to be 10px at the top and bottom and 0 on the left and right okay i think that is much much better and then probably what's it what i should do is go inside this div increase this padding the margin to 30 pixels at the top out on the left and right and then 20 pixels on the bottom oh let's say just say 30 plus on the top and bottom i think that's okay that's okay and then finally or almost finally rather what you can do is let's add remember where we added the padding of the container actually we removed it but what we can do is we can add a padding bottom so padding bottom come on so that we are going to have some bit of leeway between this button and the end of the container so let's say padding bottom of 20 pixels so we're going to have this and then let's go inside the deal with the class of buttons so container and then buttons i think i named buttons let me just confirm so this div right here okay and then we're going to say display flex and then flex direction set this to column so that i'm going to stack one on top of the other and then align item center and justify content to the center so that we're going to have this and then once we do this then i want to target the btn primary and add a margin bottom on the b10 primary so let's just go back to the top right around here let's say margin bottom set this to 10 pixels to push away just a bit from this so and we're going to have this so you look at that we already have this for the mobile version and what we can do actually is i've just realized that we should probably change this so let me link my website you can link this to whatever you want change this to my name and spell it okay so that we're going to have this that's looking amazing now what we need to do is just scale it up for larger screens right and actually before we do that let me just add the margin on the top of it so that it pushes downwards just a bit okay and you know what you know what you know what we can do actually is we can go on the body and we can say display flex on the body and of course flex direction set this to row set this to column actually it's not true sorry and then align it percentage just for contact to the center and then let's say min height and set this to 100 report heights which is going to push it to the center so look at that it's always going to be centered no matter the device that you're looking it on and then look at this now we just need to scale it up just a bit because we don't want this to happen and probably you can add a padding on the left hand right of this paragraph so that this doesn't happen now let's see what we can do let's go inside our index.html and then let's target this paragraph give this a class of description or desk like so and then let's go inside our container or container here and then let's target the container and then the paragraph that has a class of desk like so like so and then let's add a padding of um zero on the top and bottom and 20 pixels on the left and right you push it inwards so that on large screens now it doesn't go all the way to blend and actually let's make this 30 pixels okay so that doesn't go all the way to the end and then now let's add a media query for the container because we want to limit it just a bit so right around this with actually let's target the container container and then i'm going to say the container should have a width of 500 pixels let's see what happens and it should go right there would you look at that and the reason why it doesn't go to the left as you would expect by adding a width is because we already have um display flex on the body so everything is naturally centered there we go look at that and that is going to be it so please like the video and subscribe to the channel if you're not already and i will see you in the next video bye mm-hmm

Channel: tsbsankara

Views: 6,459

Keywords: HTML, HTML5, CSS, css, css grid, css flexbox, javascript, es6, es7, react, reactjs, frontend, front end, web, web developer, web development, netlify, vscode, tailwind, tailwindcss, tailwind css, tsbsankara, frontend mentor, frontend mentor challenge, order summary component, front end mentor, coding challenge, frontend mentor coding challenge, sankara, fm order summary component

Id: uaM5F8O_VI8

Length: 26min 45sec (1605 seconds)

Published: Sat Aug 14 2021