You how to add this design to your blogger website so let's get started so here we can see this is how it looks we can see that we have all these course cards over here and we also have a horror effect and we can add any number of courses over here and it will be stacked up in the correct place over here after the last course right i have opened up this folder called course cards and i just opened it with vs code so i also have this folder called images.
And in that we have these four images which we're going to use in our design so let's start by creating all the necessary files so let's click on new file and we'll create an html file i'll just name it index.html and we'll also create a css file i'll just name it style.css and we'll also create a javascript file all right now let's start with the index.html file and in vs code you have this shortcut where you can just press exclamation and press tab and you'll have this basic html5 code.
And let's link our css file over here so i'll just type link and press tab and in the hr file just type style.css and we'll also link our javascript file over here so i'll just type script called an src press tab and here i'll just type main.js and let's also get the link of the font that we're going to use so we're going to use a font called roboto so let's get the font from phones.google.com right here i'm in phones.google.com and here we can see we have the robot of font if you don't have the font displayed over here you can just search for the font over here right let's click on the font and we.
Need to have two styles of this font so we need to have the regular font so this is the regular font and we also need to have this bold version so let's select the regular version so let's click on select this style and let's scroll down and let's also get the bold version so we'll just get black 900 and we have these two phones displayed over here and here we have the link of the font so let's copy this and let's paste it in our html file so here i'll just paste it inside the head section.
Right now let's start with the markup of our course cards right now the first thing we will do is we'll create a container division and we'll give the class of courses container and in that we will have all these course cards now we can see that these are all links so you can just add the link of your course over here for each of these cards so what we need to do is we need to add all these course cards into anchor tags so that we can add links to that so let's create a division with the class of card and in that we will add an.
And here i'll just type images forward slash course1.png and the next thing we need to have is this heading so let's create an h2 and we'll give the class of title and here i'll just type drawing essentials and let's open this in our browser and let's see how it looks so i have this extension called live server installed in vs code so once you install that you can just right click over here in the html and click on open with live server.
And here we can see that our design is displayed in the browser right now the next thing we need to have is this description of the course so for that let's create a division and let's give it a class of description and here i'll just add the text all right now the last thing we need to have is this section right here where we have the price and the duration so for that let's create a division with a class of info and in that we will have a division with the class of price and here i'll just add the price so for this we have a.
Price of 299.99 and then we have this duration so for that let's create a division of the class of duration and in that we need to have this icon and after that we need to have this text so for the icon we will use hero icons so you can just go to this website called heroicons.com and just search for time and here we can see the icon so let's copy this svg and let's paste it over here i'll just create a division for that so i'll just start time.
Icon and paste it over here and the last thing we need to have over here is the unit so here after this division i'll just create a division of the class of unit and here i'll just type 12 because it's 12 hours so that's basically with the first course and we have all the elements over here so we have the category we have the image the heading the description and the icon and we also have the time over here so now let's go ahead and copy and paste this course card for the other courses.
So i'll just copy it from here till here and let's paste it three more times because we have four courses over here right now we are directly copying and pasting this into our html but later i'll show you how to display these courses dynamically using javascript using an array for now let's go ahead and paste it three more times and i'll just quickly go ahead and change the details all right so i have changed the details.
Of all these courses so here we can see we have different headings and details over here i also changed the link of the Wesdigital
Images so we have course four dot png over here here we have course three dot png and now let's go to our website and let's see how it looks and here we can see we have all these details displayed over here so that's basically it with the html of our design right here's the source code of our.Design and if you scroll up here we can see we have already linked our css file so let's start with the css of our design the first thing we will do is we will style this card division over here so we have this division with the class of card so let's go to our style.css file and let's type courses container which is the container division this division right here and in that we have a division with the class of card and first of all let's set the width of the card to 240 pixels and we will set a background color of.
White and we will also add a font family of roboto and sensative and i will also set a padding of 16 pixels and let's also add a box shadow and we will set the values to 0 9 pixels 17 pixels negative 6 pixels rgba 0 0 0 and 0.2 so this is how it looks right now we can see that we have this width of 240 pixels for these cards.
Now inside the card division we have an anchor tag so if you go to the html file here we can see we have this card division and in that we have the anchor tag and in the anchor tag we have all the content so now let's style the anchor tag so here i'll just type courses container card a and first of all let's remove the underlines so let's type text decoration and set it to none and we'll also set the default text.
Color so we'll set the color of the text to 14213d now the next thing we will do is we will set the display of the anchor tag to flex now if you go back to the original design here we can see that we have these cards over here and all of them have the same height even though this third card has more content over here but we can see that all of these elements are positioned correctly that's because we have set a display of flex so.
Let's set the display of the anchor tag to flex let's go back and let's type display of flex and now we can see that all the elements are one next to the other so we have to set the flex direction to column and i will also set the justify content to space between so that all the elements are spaced correctly now the next thing we will do is we will remove these spaces around the image so for the image we have 100 width so for that let's go back to our css and let's.
Target the image so let's type courses container card img and we need to set a negative margin for that because here we can see for the card we have set a padding so this padding will be applied to all the elements in our card so we have to remove the padding from the image so for that we have to type margin and we have to set it to a negative margin so we have to type negative 16 pixels because we have a padding of 16 and now we can see we have the correct width for the image and.
We'll also set object fit to cover so that the image has the correct proportions right now the next thing we will do is style the category so here we can see we have these categories for all these cards so let's go back to our html file and here we can see we have this division with the class of category so let's style that so here you start courses container card category.
And we need to position this category relative to the card so for the card let's type position and let's set it to relative and here we'll set the position to absolute and we will set the top position to 8 pixels and we'll set the right position to 8 pixels and now we can see we have this category displayed over here let's add some more styles let's set the background color to 14213d and let's set the color of the text to.
White and we'll also add some padding so let's tap padding
And let's set the padding to two pixels top and bottom and 16 pixels left and right and i will also set the font size to 13 pixels and we'll set the text transform to uppercase and we'll also add a border radius so let's set the border radius to 10 pixels and that looks all right.All right now the next thing we will do is we will style these titles so for the titles we have a h2 with the class of title so let's type courses container card h2.title and let's set the font size to 20 pixels and we will set a margin of 28 pixels top 0 for right 10 pixels bottom and 0 for left and we'll also add a line height and let's set it to 1.4 for headings.
With multiple lines now if you right click over here and click on inspect and if we select this card we can see that we have a width of 272 pixels so here at the bottom left you can see the width 272 pixels but we had set a width of 240 pixels now we have a width of 272 pixels because of this padding right here so it is also adding the padding on the left and the right to the width now if you don't want that to happen then you can go back to your css and you can select.
All the elements inside courses container so let's type courses container and also courses container asterisk to select all the elements and here you type box sizing and set it to border box and now if you go back and if i right click over here and click on inspect and if i click on card we can see that we have a width of 240 pixels right now let's style this description so let's go back and in the html we can see that for the description we have a division with the.
Class of description so let's type courses container card description and let's set the font size to 15 pixels and we will set the color of the text to 333 and let's set the margin to zero and we'll also add a line height of 1.7 all right that's it with the description now let's style these two elements right here we have the price and the duration.
So for that we have a division with the class of info and in that we have the price and the duration so let's target this info division here i'll just have courses container card info and the first thing we need to do is we need to place them one next to the other so here we can see we have the price on the left side and the duration on the right side so let's type display of flex and we will type justify content to space between so that they are on the.
Extreme left and right sides and let's set a background color and let's set it to edf 6f now even for the info we need to have full width so we need to add negative margins so let's type margin of negative 16 pixels and let's also add some margin top so let's type margin top and let's set it to 20 pixels and we'll also add some padding so let's set a padding of 12 pixels top and.
Bottom and 16 pixels left and right and let's also bring these two elements to the center vertically so let's type align items to the center right now let's style this price so for the price we have a division with the class of price so let's type courses container card info price and let's set the font size to 28 pixels and let's set the font weight to 900 and let's set the color of the text to.
Df0688 now for the price we also need to have a dollar symbol on the left so for that we will use before selector so let's tap courses container card info price column column before and let's set a content of dollar symbol and let's say the font size of this dollar symbol to 18 pixels and let's say the font weight to normal and now we can see we have this dollar symbol over here on the left.
Now let's style this duration so for the duration we need to have the icon on the left and the number on the right so if you go back to the html file here we can see we have this division with the class of duration and then we have this time icon over here and then we have this unit i think we should rename this to value right now let's go back to our style.css file and let's target this duration and we want them to be one next to the other so let's tap courses container.
Card info duration and let's set the display to flex now we can see that the time icon is not being displayed so let's go back and we need to add a height and a width so if we go back to the html file we have this division of the class of time icon so let's target that let's type courses container card info time icon and let's set a width of 18 pixels and a.
Height of 18 pixels and now we can see we have this icon now after the duration we need to have hours written over here so here we can see we have 12 hours 4 hours and so on so for that we will use after selector so here let's type courses container card info duration column column after now let's set the content to hrs and let's set a margin left of 4 pixels.
And now we can see we have 12 hours displayed over here now we also need to have a hover effect for these cards so let's go back and here for the card let's type courses container card colon hover and let's set a transform scale so let's tap transform scale and let's set it to 1.03 and here we will add a smooth transition so let's stop transition and let's say to all 400 milliseconds is.
And now we can see we have this hover effect for all these cards now the last thing we need to do is we need to position all of them one next to the other three in a row so let's go back and let's target this courses container division so this is the main division right here in that we have all the course cards so here i'll just type courses container and we will set the display of the courses container to grid and now we need to specify how many columns should be there inside this grid.
So let's type grid template columns and we will set it to 1fr 1fr 1fr which means 3 items will be on the same row and we'll also add a gap of 32 pixels and now we can see we have all these elements over here i will also set a max width so let's set a max width of 800 pixels and we'll also bring it to the center so let's start margin 20 pixels for top and bottom and out of left and right now the.
Last thing we need to do over here is that we need to bring these two info sections to the bottom like this one right here so for that we have to set the height of the anchor tag to 100 so let's go over here to the anchor tag and let's set a height of hundred percent and now we can see everything looks alright so that's basically with the desktop version of our course cards now let's make it responsive now we'll set a breakpoint for 850 pixels.
So here i'll just create a media query let's type at media max width and let's set it to 850 pixels now if the width of the browser is less than 850 pixels then whatever styles we have over here will be added to the page so the first thing we will do is uh we will set the grid template columns so let's tap courses container and let's see the grid template columns to 1fr 1fr this is for the tablet.
Version so let's decrease the width of this browser and now we can see there are two items in a row now let's also set the width of the elements to 100 so let's type courses container card and we'll set the width to 100 right now let's set a height for these images so here i'll just type courses container card img and we'll set a height of 200 pixels.
So this is basically our tablet version now the last thing we will do is style the mobile version so let's decrease the width even more let's create one more media query so let's tap at media and let's set a max width of 600 pixels and here we'll type courses container and we'll set the grid template columns to 1fr which means just one column and now we can see we have just one item in a row when we are on a mobile version.
And we'll also add a max width for the courses container so here i'll just type max width and let's set it to 320 pixels and that looks alright so that's basically it with the design of our courses cards now in this video i'll show you how to make it dynamic so we will store all these details inside a javascript file and we will generate all these course cards based on the data that we have in our javascript so let's get started right here is our source code and if you scroll down we can see that we have.
Already linked our javascript file over here and if we take a look at this source code here we can see that we have added all these card divisions over here inside the courses container division so we have this card division over here for the first card and in that we have the category and the title and all of these things over here so we have added all of these things over here in the html itself now what we're going to do is we're going to generate all this code of this card division using javascript.
So let's go to our javascript file and the first thing we need to do is we need to create an array of objects so let's tap const and we'll just name it courses and let's create an array and in the array we will have several objects so for the object let's create curly braces now in this object we will store all the details that we have over here so we need to store the category the thumbnail image the title the description the price the duration and also the link of the course so let's go.
Back to our javascript file and let's add all of those details over here so let's type url for the link of the course and for now i'll just type hash you can add the link of your course over here and let's add a comma and the next thing we will have is the title so let's type title and the first title we need to have is drawing essentials so let's type that over here and the next thing we will have is the thumbnail url.
So i'll just type thumbnail and the thumbnail url is basically the link of the image now all the images are inside the images folder so let's type images forward slash and the first image is called let's see it's called course1.png so let's type that over here so this is the value of the thumbnail now the next thing we need to have is the category so here we have a category.
Of art so let's create a new value over here so let's type category art and the next thing we need to have is the description so let's stop description and let's add the description over here and then we need to have the price so let's type price and the price is 299.99 and then lastly we have the duration so let's start duration and the duration is 12 hours.
So that's basically it with the first course now in this way you can go ahead and add any number of courses you want so just quickly go ahead and add the details of all the other courses all right so i have added the details of all the courses over here so here you can see we have the course one which is drawing essentials then we have design master class which is the second course over here and in this way we have added the details of all the courses over here now if you want to add more courses you can just go ahead and copy this and paste it.
Down here and just change these details right now the next thing we need to do is we need to create this markup so we need to have this card division and in that we have the anchor tag and in that we have all these elements now we need to delete all of this from here from the html and we need to generate all of these using javascript so let's go ahead and create a function for that so here i'll just create a function and i'll just name it display course.
Now in this function we're gonna get some arguments over here so we need to get all these arguments into this function and we're going to use them inside this function so let's add the names of the arguments over here so i'll just name it url value for the url value and then we have the title so i'll just name it title value and then we have category so let's name it category value and then we have thumbnail value you can name these anything you want.
Description value price value and lastly we have duration value right now the next thing we will do is we'll create all these elements so the first thing we need to create is this course card so let's create a constant and let's name it card equals document dot create element and we'll create a div element so here we can see we have this div with the class of card so let's add a class.