How to make responsive Blog Website using HTML and CSS Step by Step

Hi there welcome to this channel and today at this channel, we are going to create this amazing looking blog website as you can see right here. And in this blog website, we have added different sort of animations, different sort of responsiveness. You should know that his website is completely responsive and it contains different sort of animations in it and it is completely responsive for mobiles, for laptops, for big screens, absolutely for everything. Before going to different features of thi

s website, of this front-end website, let me tell you that all these things - all these illustrator things, all these logos - I am going to teach you those things as well. So, right here let us explore its features. Right at this logo as you can see. It has this amazing animation of gradient as I hover on it, it looks really amazing. All these characters of title of this website, you can see that when we hover it contain, it get different sort of random color inside them, and I will teach you ho

w to make that as well. This is tagline of this blog. As I hover, you can see this is amazing gradient animation that gets here. So this logo, it is actually made in illustrator so I will teach you completely how to make these templates or files or images that I have created for this project in illustrator. This will be a full form tutorial for making such amazing front-ends. So, I will tell you how to make this logo according to your customization and preference and this background in this hero

section also contains this amazing image which contains different illustrations. This is actually a transparent image. I would teach you in illustrator that how to create this background image for hero section for your project as well. After this, there is another amazing feature if our user comes here and leaves it till here, it snaps back to this section. So that user may not miss any information. So, if I come here and leave it near these cards, it will snap there and if the user comes here

and scrolls it and leaves it somehow in the middle of this section, it would scroll back to these cards. These cards contain this amazing animation when I hover it get popped up in front of us as from this stack. This is completely scrollable. All of our cards are present right here. They can be clicked and moved to that respective blog article. So, right here comes our next section. If I come here and leave the scrollbar near it, it scrolls and snaps near it on this section so that our user can

see our section easily. So, right here as you can see, when I hover on different sections, it come in this amazing animation form and this sections could be used for showing and showcasing different sort of categories that you cover in your blog. This is very amazing section if you hover, like you can see this is an amazing animation as we can see in this page. After this if I scroll and leave it near this section, it snaps as well and these articles right here these are here as well. After thi

s, there comes our footer. I would tell you how to create this amazing looking partition between this footer as well. So, right as you can see as I hover, it contains this amazing animation the gradient animation. For this names as well, logo as well. You will be able to replace each and everything in this website for your branding as well. So, I will teach you everything for that. These are our footer links right here. So, this website is completely responsive as you can see, these cards would

not look like this in smaller devices they would just change their view. Let us just see it for the responsiveness as well. So, this navbar. Let us go to our inspector. Right here as you can see this is our view for bigger screens. All of the thing is aligned in center as you can see. These cards use grid for showing these blog articles. So, right here if I come to our tablet and laptop screens as right here you can see this is our breakpoint for that. So, you can see that our navbar has just co

me into this burger menu and this animation is right here and these articles and these name. As you know that inside our inspector we can't hover this way. So, in smaller screens like laptop and tablets, the user would be able to hover it and it would just happen as in our big screens. So, these are the animations. All the animations are visible right here. They are all working here. This scrollbar can be scrolled like it is done in small screens with touch as well. Right here this section snaps

here when we click and as you can see, for responsiveness we have moved these different tabs for different categories to upside rather than from left side so that we may make them look pretty good and friendly for the user. After this as you can see for these smaller screens, the grid display for these articles also get changed. As you can see, it has changed to two columns actually so that the user may visualize it easily. Our footer has got responsive as well. So lets move to our even smaller

screen which are mobile screens on which most of the blogs are read most of the times. So, right here as you can see, it is responsive for our mobiles as well. This is the breakpoint for mobiles. All of these are cards for mobiles. This is the actual screen that a mobile has. So, you can see that all animations are working in it. So, if I come and hover or click on any of the card, it comes in front of us and it is completely scrollable. For smaller screens, we have done another thing that we h

ave removed the scrollbars and user would not get those irritating scrollbars that irritate in smaller screen. Whereas, in bigger displays, those scrollbars will help them. So, right use can scroll them. When they click the card pops up like this and after this comes this section. It is completely snapping scroll in our mobiles as well. So, right here there are different categories that we have and they are scrollable. We can select different sections as well. So, after this comes our cards. As

you can see, they are responsive for our small devices as well it has changed to single row so that use may see it easily. And this display, whole of the display, is snapping for our footer as well. If I leave it here, it snaps to the bottom of the footer as well. As you can see, our footer has just changed according to the display and it is now visible and it contains all the animations and its links also have changed to that display of single row. So, lets get started and get into this amazing

websites development. I hope you would like the video because I would show you each and every aspect from graphic designing, from styling, from coding, from HTML, CSS everything you would learn everything responsiveness, animations everything you would learn. Learn it and after that if you would like you can rebrand it and you would use it as well. And one more thing, important thing that all this websites source code would also be present inside the link you would be able to get it just go to

the description if you want i t to start from a different point following us, you can get it the link is in description. So, lets get started and get into our project's development.