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

Подписаться 1 млн

Просмотров 737 тыс.

50% 1

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
👉 easytutorialspro.com/go/course/
-----------------------------------
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.com/file/d/1f-pU...
-------------------------------------
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
► • HTML And CSS Tutorial ...
Make Complete Website Using HTML, CSS, Bootstrap
► • Top 5 Complete Website...
-------------------------------------
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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:
◼️ RU-vid: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr

Опубликовано:

25 сен 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 478

@anangyoga1381 2 года назад

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.

@butin12 3 года назад

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

@joshuaadewale1409 3 года назад

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!

@TrangLe-dp8jf 3 года назад

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

@GreatStackDev 3 года назад

Yes I already have many responsive website design tutorial below and will me making more. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-oYRda7UtuhA.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-lBfshkPlMW8.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-d5zBkC7peTY.html

@passsacaglia 2 года назад

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

@kirunali4446 2 года назад

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

@dorismonson4449 2 года назад

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

@jojuthomas3406 2 года назад

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.

@pranitiparmar8584 2 года назад

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 }

@mouhajirahakim8447 2 года назад

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.

@IbrahimJalloh 3 года назад

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

@ridafatimazahra498 3 года назад

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

@GreatStackDev 3 года назад

Thanks Samreen

@yoyo12345 3 года назад

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

@iAbhijeetShukla 3 года назад

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

@bicboi9006 2 года назад

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

@bicboi9006 2 года назад

Good luck bro

@reginamurguia4078 2 года назад

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. ❤❤

@umerch9114 2 года назад

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

@inhvankhiem1827 3 года назад

you're my hero, thank you so much bro

@abbeykarylomisol3636 2 года назад

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. :(

@farolmassoussa2350 2 года назад

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

@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

@lucaslima1573 3 года назад

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

@manishgupta8057 3 месяца назад

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

@mirketz4431 Год назад

Amazing tutorial! I learned so much in 19 minutes

@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.

@hindustandigitalseva8320 3 года назад

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?

@tasfiulhedayet Год назад

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

@nikeigsupport4374 2 года назад

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

@kesavnarean23 3 года назад

You make really awesome videos!! Thanks!!

@arvsnacs422 3 года назад

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.

@naity909 2 года назад

Maravilhosoooo!!!!!

@beardedraider4751 Год назад

Incredibly helpful, THANK YOU!!!!!

@EnAmiX 2 года назад

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

@Alectius 3 года назад

Thank you

@gabrielreja3682 3 года назад

I like this design. Simple but attractive

@auruds3592 3 года назад

Thanks for the tutorial, Sir ^ ^

@sylvanusjoseph1140 2 года назад

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

@Biglex524 2 года назад

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?

@alexftw356 2 года назад

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

@BoDuke73 2 года назад

I really appreciate this walkthrough.

@Gato.Samurai Год назад

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

@baraakhaldi1068 Год назад

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

@44_prithvirajpatil20 2 года назад

Video was very excellent & it was very understandable.

@digigoliath 3 года назад

Awesome!!! TQVM!!

@ismailaouad9097 2 года назад

Thank you so much for this Video 🙏

@eTravelVlog 4 месяца назад

Thanks! I made a website using your video tutorial.

@SamyarBorder 2 года назад

that was exactly what i wanted thx 😀

@uiopdfy Год назад

I got not bad experience watching this. Very nice

@danielnadeem3589 3 года назад

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!

@rownakcodes638 2 года назад

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!

@taiwoakinsanya9067 10 месяцев назад

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

@petermuturi4402 2 года назад

Good stuff, keep up the good work

@suhrobtirkashev9600 Год назад

Thanks again bro your videos fully help me with my work

@gauravbathla8666 3 года назад

Great work Sir😇🙏

@RealCreativeShaurya 3 года назад

Thant you soooooooooooooooooooooo much! it works!

@Brandingbysophie 3 года назад

THANK YOU so much

@ramu_lamborghini 2 года назад

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

@MrsMamta-zn2kh 2 года назад

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

@FifaWorld76 3 года назад

Very Nice it was so helpful for my website also

@reghunt2487 2 года назад

Good refresher. Thanks!

@thabisosithole8761 Год назад

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

@aadirajuthup 2 года назад

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

@StylishBanditSlayerS 3 месяца назад

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

@storyplayer4636 3 года назад

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

@benjaminchang7275 Год назад

What a great video , thank you Sir

@Yours_Curiously 3 года назад

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

@GreatStackDev 3 года назад

Thank you Partha, ye will do

@abubakarhashi5907 3 года назад

Awesome my buddy

@gamerok127 3 года назад

Спасибо огромное братишка ты супер верстальщик

@syednoohu8692 2 года назад

@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?

@pranabhanche7906 2 года назад

Great tutorial.. Loved it XD

@ranjithsai333 3 года назад

Tq for teaching

@code2fresh259 Год назад

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

@029_mariaamali_csea8 2 года назад

Really very Useful.Good work

@ankushmane1333 3 года назад

Wow this is owsome

@lpodcaster 3 года назад

Good job 🌸💙

@manurajput8421 3 года назад

Awesome video Bro Please make a Video on Mobile E-commerce website in html css and bootstrap

@ricardoparada3606 2 года назад

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

@devanandankv 2 года назад

Excellent!! I managed to disappear menu total! lol

@themarin1992 2 года назад

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:)

@durjaygp 3 года назад

thanks man

@hanmadragoniod4445 2 года назад

Thanks for this help dude 🎉🎉

@terimummymerihoja2590 3 года назад

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

@dantedt3931 Год назад

Best, truly nice work dude! Subbed.

@GreatStackDev Год назад

Thank you!

@zacdu93600 2 года назад

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

@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.

@thecoderraj3777 3 года назад

Thanks 🙏

@user-id8uq4dk2y 3 года назад

Please make this type of blogger template!

@natizerai 3 года назад

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

@PuzaExplores 3 года назад

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

@sanjay_divakar112 2 года назад

you can just inspect it and find out

@sanjay_divakar112 2 года назад

Don't criticize him

@-zerenity-2322 2 года назад

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 2 года назад

you can use different css properties to different window size, explained at the end of this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-HHtMMS42cWs.html

@-zerenity-2322 2 года назад

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

@darkgaming6595 2 года назад

@@GreatStackDev how to get imagesssssssssssssss

@antoniomartinv Год назад

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

@praveenandrew 3 года назад

bro superb !!!!!!!!!

@cyberinfomatic7512 2 года назад

Thanks man This is helpful

@peligrosos3431 2 года назад

Thank you very much

@divyeshsevra3097 Год назад

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

@GreatStackDev Год назад

Glad to hear that

@josephShamad 3 года назад

thanks a lot

@michelventura9897 2 года назад

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 2 года назад

me too hope you are going well

@last-mfk 2 года назад

thamks a lot bhai for this amzing video

@danz0denzi686 Год назад

Thanks You Sirr😍😍

@sohadmad1823 3 года назад

the most beautiful channel in the world , keep going

@GreatStackDev 3 года назад

Thank you so much Soso Ana

@yanedera1602 2 года назад

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 2 года назад

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

@emmanuelpeter2003 2 года назад

you are amazing guy thanks so much

@zelliesvlog Год назад

Thank you💖

@jagdishparihar5168 2 года назад

so beautifull and deeply explained

@GreatStackDev 2 года назад

thanks jagdish, glad you liked this tutorial

@Jishnucreations2021 2 года назад

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 2 года назад

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

@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 ?