How To Make Responsive Website Design Using HTML And CSS Step By Step

Learn How To Make Responsive Website Design Using HTML And CSS Step By Step
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-----------------------------------
Here in this video you will learn to make a responsive website Using HTML and CSS step by Step. We will learn about media query CSS to make a responsive website design.
Download Images: drive.google.c...
-------------------------------------
Recommended Videos:
Login and registration form design using HTML, CSS
► • How To Make Login & Re...
Create Login and registration form Using PHP & MySQL
► • How To Make Login & Re...
Create Contact Form Using HTML, CSS, PHP
► • Create Working Contact...
Learn HTML and CSS form Beginning
► • Complete HTML & CSS Co...
Make Complete Website Using HTML, CSS, Bootstrap
► • Top 5 Complete Website...
-------------------------------------
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
-------------------------------------
Image Credit: freepik.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ KZbin: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

[@TrangLe-dp8jf]

You should make many responsive website tutorials mainly with HTML CSS like this

[@GreatStackDev]

Yes I already have many responsive website design tutorial below and will me making more. kzbin.info/www/bejne/pYq1lZRtitmonqM kzbin.info/www/bejne/onPJpJuhhdGAjZo kzbin.info/www/bejne/mmbdc555bNWYirs

[@passsacaglia]

@@GreatStackDev Can/have you done some in CSS Grids?

[@kirunali4446]

I sey you're good programmer do you have a telegram acc

[@ridafatimazahra498]

WHOOO LOVE YOU because of this easy tutorial i am able to surprise my parents that i can CODE!! as 13!!

[@GreatStackDev]

Thanks Samreen

[@yoyo12345]

Yo I can too code but not only html I can code c# and python of course I am in inerimidate level

[@iAbhijeetShukla]

Why the every teenager need to say that I am starting soon! Nobody cares!

[@bicboi9006]

@@iAbhijeetShukla don’t got to be a dick about it

[@bicboi9006]

Good luck bro

[@anangyoga1381]

I just want to say 'Thank you so much' good sir! It helps me improve my CSS skill. I learned a lot about flexbox, especially flex-grow and flex-basis thanks to this video.

[@pranitiparmar8584]

Timestamp: 12:54 is where the media queries start(To make the page responsive)

[@oddiybola_7076]

thanks bro

[@TikkieWillem]

when i put in @media screen it doesnt work why

[@Gato.Samurai]

@@TikkieWillem Hello there! You have to do it exactly like this: @media only screen and (max-width:700px) { BLOCK OF CODE }

[@butin12]

I'm step by step to learn. Your channel is really helping me. From Viet Nam with love

[@mouhajirahakim8447]

I started programming 9 years old my parents didn't care at all they just see then say, 😒 so. But I appreciate that I'm really Good at programming.

[@manishgupta8057]

I am able to make a first responsive website with the help of this video. Thanks a lot Sir

[@jojuthomas3406]

First of all, thank you for your videos. Videos are very informative and a beginner can learn them easily. But I have a suggestion. Your videos are in fast-forward mode as I cannot follow them at all. I think this will be the case for most of your subscribers. Even the videos are a bit longer it does not matter as this is for learning and not for any kind of entertainment. So please make it at normal speed so we can follow your videos. This video is taking more than two days for me to follow and understand step by step.

[@s.abirami8394]

True buddy😢😅

[@abbeykarylomisol3636]

Thank you for this. I am learning frontend just to make a UI for my webapp, but boy oh boy, that's a lot of work right there. :(

[@natizerai]

Very useful thanks. For the future, if you could add more explanation of what you are writing, it would have been better.

[@PuzaExplores]

Yes. I agree too. I can't figure out which code does what?

[@dorismonson4449]

This was so clear and easy to understand. Thank you so much. Wish I had seen it before I started my web page. Would have designed it better upfront

[@umerch9114]

Bro your videos are very easy to understand I created my first website with your help Thanks!

[@joshuaadewale1409]

Sir....I love your tutorials....I am always looking forward to watching them. Just keep doing what you're doing. You are making a lot of impact. God bless you bro!

[@nikeigsupport4374]

Thank you so much for the wonderful lesson. Your UI design is amazing. Where can I learn more about UI design and UX design?

[@baraakhaldi1068]

This time after 2 videos of experience I changed whole website from your playstion to an Xbox series s❤❤

[@tasfiulhedayet]

Thank you so much. In Shaa Allah, it will help me a lot to make my own project.

[@thabisosithole8761]

Because of this video I know I'm the best developer ever,Thank you

[@thomaswalsh8317]

There's something missing in the tutorial in regards to the positioning on the Add to cart button and text. For me I have the text on the bottom of the controller image instead of it being aside the controller and aligned in the center vertically as seen in the tutorial.

[@syednoohu8692]

@13:54, Line #149, we are targeting ".nav ul{...}, thats why children of "navbar' both img 'logo' and img 'menu-icon' stay apart, (ie. both are fixed to extreme left and right), if we just target ".nav {...}, then spaces between children of "navbar' both img 'logo' and img 'menu-icon' will shrink and sit next to each other, If my understanding is right?

[@sylvanusjoseph1140]

Great Video . Thank You Easy Tutorials. A little bit too fast, but great video.

[@Biglex524]

To move the color box to the right, I was also able to use a negative margin to move it instead of using it translate. Is that also fine? or is it wrong using margin is a situation like that?

[@divyeshsevra3097]

in 20minute video you clear my 1month doubt thank u.......

[@GreatStackDev]

Glad to hear that

[@yanedera1602]

thank you for this tutorial. it's a little bit fast but it is clear and easy to understand. I have a question though, is the size for smaller screen also applies to the tablet screen? thank you

[@nikeigsupport4374]

Yes i think it applies to certain tablets but i think you need to know the width px sizes of the supported tablets then you can adjust them with the max-width

[@hindustandigitalseva8320]

Sir, I want a specific style/theme in laptop view and another different style in mobile view. And both the style should be so different that you can't manipulate css to achieve. So, I have to write code for laptop view and then I write another set codes (in media query) for mobile view. Do you have any better way of how can I achieve this?

[@MrsMamta-zn2kh]

Hey Easy Tutorials, can you please tell me what flex-basis and overflow hidden means

[@reginamurguia4078]

I loved the video, it was pretty useful, thank you very much. I was hoping you could make a new tutorial using this site you created to explain how to adapt it to several medium-sized screens between your desktop design and the mobile one. Again, thank you. ❤❤

[@IbrahimJalloh]

Awesomeness is yours... You truly make it easy to understand...

[@massrdmdoer7348]

I love how fast you are!!! I'm half way through the video and have learned so much as a beginner. consider your self a great teacher

[@farolmassoussa2350]

Thank you very much for giving me a good insight on how I could make a site rersponsive.

[@samblake30]

Is it possible to create the toggle menu without the javascript but only using the HTML and CSS???

[@GreatStackDev]

yes it is possible, in place of toggle button add a checkbox, and keep the opacity 0; then add css like when it is uncheck menu will be hidden and when checkbox is checked the menu will be visible.

[@samblake30]

@@GreatStackDev can you give me link to refer or a KZbin video to see this in action?

[@industry4herindia283]

Hi Thank you for such beautiful vides which has definitely helped me a lot but I need your help in one video of yours (Start To End | Step By Step) in this video my slider is not working good as it shows in your video mine creates very big gap from right side and from top too pls guide how can I sole it. Thanks a lot again for great videos.

[@midstech]

Thank you @GreatStack for the awesome work !! Keep it UPP!!

[@inhvankhiem1827]

you're my hero, thank you so much bro

[@ennatim479]

Everything goes well till 13:00 after that when you started responsive design mine is not working i dont know why. Plus when i added image my all content move down like image was so big so i cropped image to fit in. Why did this happen. I did fix everyother value according to my screen if added your values i was becoming like left scrolling bar website look. Please guide why did this happen. Why my media queires not working properly.

[@kappaluka7532]

Me too😭😭

[@devendramahesh7995]

Hi My Name Is Devendra Mahesh I Love ur Content Thankyou

[@beardedraider4751]

Incredibly helpful, THANK YOU!!!!!

[@code2fresh259]

I will be helpful For your video Thank you So much Sir Love From Pakistan, 😘

[@mirketz4431]

Amazing tutorial! I learned so much in 19 minutes

[@ergashevweb3463]

Hello Uzbekistan Very well👍👈

[@uiopdfy]

I got not bad experience watching this. Very nice

[@gabrielreja3682]

I like this design. Simple but attractive

[@taiwoakinsanya9067]

This was soo helpful! Than you so much sir God bless you

[@Yours_Curiously]

It's a brilliant tutorial. Please keep educating us.

[@GreatStackDev]

Thank you Partha, ye will do

[@suhrobtirkashev9600]

Thanks again bro your videos fully help me with my work

[@alexftw356]

this is a good tutorial for a beginner. very well explained

[@eTravelVlog]

Thanks! I made a website using your video tutorial.

[@ricardoparada3606]

Thank you for sharing. Bare in mind there's no hover on mobile. Cheers

[@Jishnucreations2021]

I never have understood how this coding exactly places objects or elements in right place. I am a designer and I always wonder about coding.

[@misterh9362]

Your designing software is coded too to place items at right place.

[@BoDuke73]

I really appreciate this walkthrough.

[@ramu_lamborghini]

thats really great and it helps me. can you please explain the usage of some keywords in CSS in your words....thank you

[@Gato.Samurai]

Hey man, what can I say? You´re the best! Thank you 😁

[@-zerenity-2322]

Hi, at 50% window size of the browser, will the content remain intact without content overflow and/or side scrolling? Could you demonstrate in the future (if you do more of these) various window sizes of the browser, thanks :)

[@GreatStackDev]

you can use different css properties to different window size, explained at the end of this video: kzbin.info/www/bejne/fnnXfoCJaZeWjdU

[@-zerenity-2322]

@@GreatStackDev okay i will check this out, thanks!!

[@darkgaming6595]

@@GreatStackDev how to get imagesssssssssssssss

[@StylishBanditSlayerS]

Thank You So Much Bro!!!!! This Is So Usefull For Us!!!

[@michelventura9897]

friend, thank you very much for your videos, i'm from brazil and i'm getting your projects to use as a portfolio to get jobs, thank you very much!

[@sylvanusjoseph1140]

me too hope you are going well

[@44_prithvirajpatil20]

Video was very excellent & it was very understandable.

[@EnAmiX]

You came from heaven. Thanks for the short but verry helpfull tutorail. LIKE!

[@pranabhanche7906]

Great tutorial.. Loved it XD

[@arvsnacs422]

I will do this one and I will understand it since Im done on the basic tutorial on youtube... Lets take it baby step at a time... thanks.

[@rownakcodes638]

When hovering, the text "Buy Now" is snapping to the left, is it possible to make a transition for that too? At least to make the text snap left slower? Thanks in advance!

[@Mr.JayPlays69]

Big respect Love From Pakistan

[@rutikkhandekar2518]

Great video i was really helpfu;

[@GreatStackDev]

Glad it helped

[@themarin1992]

thank you man on this, it is great, but my friendly advice is that you write code slower in video, it is hard to put up, listen and type:)

[@lucaslima1573]

This is amazing work, thank you very much sir!!!

[@RajakumariH-m3m]

very usefull thankyou

[@GreatStackDev]

Welcome 😊 Glad it helped you.

[@jagdishparihar5168]

so beautifull and deeply explained

[@GreatStackDev]

thanks jagdish, glad you liked this tutorial

[@matthewguillen2823]

If you think your going to learn something from someone who doesn’t explain the context to what their doing like in this video you are very wrong!

[@last-mfk]

thamks a lot bhai for this amzing video

[@cmdaltctr]

Your video is good, but it's too fast. I have to slow down the video to 0.5. Perhaps you can explain why you are doing so-and-so on too, that'll be helpful! Thank you again, I'm subscribed!

[@GreatStackDev]

I can't explain each html and css properties in each video, it will be very log, That why i recommend beginners to watch this beginners tutorial first: kzbin.info/www/bejne/fXK9h6mmn92Mh7s

[@SamyarBorder]

that was exactly what i wanted thx 😀

[@z1982_]

Thanks a lot!! FYI, when creating the vertical bar, ::after didn't work out for me, only ::before did

[@terimummymerihoja2590]

Can we use px in code if we have to publish it online or should we use something else Pls tell which is better

[@gourabakhuli7206]

Why media quary is not applicable in my codding.... Web page's responsibility is not working..

[@Alectius]

Thank you

[@kesavnarean23]

You make really awesome videos!! Thanks!!

[@harmeetkaur8238]

sir , which editor you use ....???

[@goodnewsjohn2482]

Nice UI first of all. cool video

[@danielnadeem3589]

brother love the videos you make keep up the good content, The only thing I ask please can you make a video with a split screen one side shows the input and the other side shows the output, please!

[@antoniomartinv]

what is the extension you use to resize the window to preset device resolutions?

[@shivrajnag12]

Sir please suggest me how to level up my CSS skill? How did u learn? I am not new to CSS but I always struggle with CSS.

[@thedude7503]

Just practice....😬😬 don't copy paste codes .

[@-zerenity-2322]

Hi, when you are changing your flex basis to 100% in your media query, is it the width or the height of the col that's becoming 100%? I assume its the height right? (Because of flex direction)?

[@GreatStackDev]

flex basis is for width

[@-zerenity-2322]

@@GreatStackDev alright, thank you!

[@FifaWorld76]

Very Nice it was so helpful for my website also

[@sohadmad1823]

the most beautiful channel in the world , keep going

[@GreatStackDev]

Thank you so much Soso Ana

[@storyplayer4636]

Bro you are awesome, any advice for me am just starting.

[@danz0denzi686]

Thanks You Sirr😍😍

[@dantedt3931]

Best, truly nice work dude! Subbed.

[@GreatStackDev]

Thank you!

[@suryansh775]

hi bro. everything is good but my color box is not appearing. plz help :)

[@MilanQii]

Woo good video 😊😊😊😁😮

[@ismailaouad9097]

Thank you so much for this Video 🙏

[@himanshusingla1189]

sir my menu button is not working

[@aadirajuthup]

Amazing tutorial bro! I've gotten a lot better cause of you!!!

[@dearkalakaar7992]

bro could you make some tutorials but slow because of that we are beginners we want to learn step by step so pls make videos you are awesome thank so much for you give us best tutorial and I'm also beginner

[@GreatStackDev]

Sure, will make make slow videos except one video that i will publish today. After that new videos will be slow. Thanks for the comment

[@auruds3592]

Thanks for the tutorial, Sir ^ ^

[@naitikkathiriya]

so nicely explained and shown very definely!! thank u so much brother✨ by the way what's your name?

[@GreatStackDev]

Thanks Naitik, My name is Avinash

[@naitikkathiriya]

@@GreatStackDev ok avinash bhai, u treat well !.. aur ha, kabhi kabar thoda hindi bhi use kar lena bhai😁 wese english aati to hai par apki samjane ki style ekdam nirali hai video editing bhi jabardasht hoti hai to agar isme hindi bhi aa jaye to sone pe suhaga ho jayega✨👍

[@GreatStackDev]

Is channel pe bht sare subscribers south india se v hai, is liye english me v videos upload karta hu, Hindi me abhi kuch videos hai other channel pe, or bhi new videos hindi me upload krne ka koshish krte hai Hindi Channel: kzbin.info/door/a_AniecsHvzS1J1zyHU3qgvideos

[@naitikkathiriya]

@@GreatStackDev thank u very much for your kind response brother... ✨👍👍

[@naity909]

Maravilhosoooo!!!!!

[@benjaminchang7275]

What a great video , thank you Sir

[@falconshorts2622]

1:42 You have used the image url as images/logo.png but when I put that in my code it is not getting redirected to that path. Can you please tell the path what I have to use for getting the image ?

[@emmanuelpeter2003]

you are amazing guy thanks so much

[@noobzalert8781]

i enjoyed watching your video

[@GreatStackDev]

glad you liked my tutorials

[@029_mariaamali_csea8]

Really very Useful.Good work

[@RealCreativeShaurya]

Thant you soooooooooooooooooooooo much! it works!