All these course cards over here and we also have a hover 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 and this is also completely responsive so if i decrease the window width this is how it looks on a tablet so you.
Can see we have just two columns and if i decrease the width even more this is how it looks on a mobile version so it is completely responsive so this is what we're going to design in.
This tutorial series now in this first video we will just write the html of this design so let's get started .
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.
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 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 will 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 Wesdigital
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 a class of.
Card and in that we will add an anchor tag and we will add all the content inside the card into this anchor tag now the first thing we need to do is add this category so we have this category.
For each of these course cards so for that let's create a division with the class of category and in that i'll just type art for the first one now right now we are adding.
These categories directly over here but later i'll show you how to add these dynamically using javascript all right the next thing we will do is get the image.
So let's create an img tag
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.
A 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 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 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 you can see we have all these details displayed over here.
So that's basically it with the html of our design now in the next video i'll show you how to add the css and make it look like this so that's it for this video if you have.
Any doubts you can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a.