Responsive Web Design Tutorial

Learn how to create a responsive web design in this tutorial using the css grid & css media queries. We’ll be doing a comprehensive look and creating the HTML5 and CSS from scratch, without using any css frameworks.
Download the starting files here: github.com/wilsmex/edu/tree/m...
CSS Grid tutorial referenced in video:
• CSS Grid Tutorial | Re...

[@crookedfallstudios4406]

Hey thanks for taking the time to make this video. You explained things clearly and went at just the right pace for people to follow along. I wish more channels would take note. Keep up the good work.

[@rickfearn3663]

Congratulations, Andrew. You have exceptional skills as an educator: well prepared, pausing and repeating topics that are challenging. And your video presentation format is outstanding. Thank you. Rick

[@FollowAndrew]

Thanks Rick!

[@MemphisBelle291]

OK...I just finished the Video and built up my webside from scratch together with your "assistance", I cant describe how much I am blown away now from what you made me realize. I learned so much and cant express enough on how much thankfull I am. Liked and subscribed and of course checking out your other Videos...thank you.

[@geren6821]

I've been looking for tutorial like this for a while Thank you from the bottom of my heart

[@FollowAndrew]

Watch the CSS Grid tutorial: kzbin.info/www/bejne/iYGpdX9-g9JogbM Just released this new responsive web design tutorial! It's a quite a bit longer than the typical tutorial vid (and about 30 mins longer than I was aiming for), but I hope you find it informative! Post questions, comments, and tutorial requests below!

[@m4rcocruz]

Thanks great tutorial thanks for share your knowledge

[@andreagyledetorres3346]

StudentWebHosting.com The javascript for the mobile navigation isn't working on me. The menus are not appearing when I click the "MENU" button. Why is that?

[@pepsicoder]

I would have loved to have the finished files to this superb tutorial its one of the best.

[@LearnKinyarwanda]

You don't have to apologize for the tutorial length buddy! You are just amazing!

[@khanriza]

Thank you.

[@harishkandikatla9791]

I am a beginner to CSS, along with responsive web design this video really helped a lot explore some other CSS tricks too! Worth watching this video!!!

[@flnnx]

Some good content here. Exactly what I need right now. Thank you!!

[@michaeldunahee4537]

Wow-wow-wow! This was an amazing tutorial. My only difficulty was no having a monitor that displays such a wide page layout, but it was an easy workaround. I will be using these new skills starting tomorrow (literally)!!!

[@FollowAndrew]

Awesome Michael, hope the projects turn our great

[@ziggydog24]

Really enjoyed your tutorial and most of all your time bringing your skills to help all. Thanks again.

[@The72Rabbit]

Your presentation is well organized. I am trying to migrate from ASP into Responsive Design web pages. Have played with CSS but your video takes me up a huge level of understanding.

[@andrewliamdesigndevelopment]

Your content is always so thorough when it comes to explaining the things that matter. It is almost like you remember the concepts that originally stubbed you, and you make your content from that viewpoint. PS I've been screaming at my computer because one of my children elements were being stubborn...spelling error..😞

[@FollowAndrew]

Oh the amount of time I've spent yelling at my computer because of my typos.. :)

[@celesteemmerinthiajacobs1751]

For the first time I understand RWD. thank you for a thorough explanation!

[@FollowAndrew]

You are welcome!

[@ozzyfromspace]

I’m two minutes in and I can already tell that I’m gonna love this 😭💃🏽❤️✨

[@seyiajayi9242]

This is a really great tutorial..i learnt alot actually

[@galickidigital]

👍 educational high quality video material. Really nice. Thanks 🙏

[@nooraldeenali4628]

It is really perfect. Thank you very much

[@aricohen7930]

Thank you very much for this tutorial.

[@sajjadabouei6721]

easy to follow start to finish this is what I like thanks a lot!

[@NjTV4]

What a nice content!!! I can now work from home and earn more because of you. Keep it up!

[@SpoorthiPraDev]

Thank you very much! Helped a lot!

[@adnantariq3346]

57:45 "last .. last.. last" lol! hey thank you so much for this tutorial.

[@Radu]

Thank you for this. Subscribed!

[@sencho6744]

very nice work, thanks for help!

[@theodorn]

Thanks a million, extremely helpful. I'm taking an HTML&CSS course and your tut gave me a lot of explanations and ideas on how to style a website.

[@FollowAndrew]

You're very welcome!

[@blacksky5537]

i can finally get my site done thanks bro more life! dont feel like a rookie anymore :)

[@RahulKumar-qt1tm]

Thanks a lot. Really awesome tutorial.

[@kotopes5719]

like for the content and especially for the keygen intro :)

[@videloco84]

This was vey useful. Thx a lot

[@parishare2750]

Great content. I love the way you walk through the entire process and it was very understandable. I will check the rest out. I'm a developer by discipline, so I was wondering if on your next video, you can share some of your rationale around why you adjusted the content the way you did for tablet and phone views? For example, is the rule of thumb to make everything 100 percent width on a phone? Thanks a ton. I look forward to checking out more of your content.

[@kavitadakhare7754]

It's very helpful, Thank you... :)

[@msaad8053]

Awesome tutorial thanks

[@nematjonabdulloev3568]

Beginner friendly and easy to follow tutorial.

[@FollowAndrew]

Glad it was helpful!

[@dr_e-commerce]

Thanks for this video,

[@leninmisle9702]

Congratulations good explanation.

[@GerritforBazeja]

Thank you very much Andrew. A nice tutorial for responsive design with Grid. Like it!! Please keep on going this SUPER job. I learn a lot from you especially CSS. I am trying to find CSS for text under and beside (left or right) form an image by Flex or Grid?!

[@drhastings]

Great video...Thank you Mr Andrew

[@FollowAndrew]

You bet

[@kingmonger4456]

Awesome Channel keep it up. def subbed and shared.

[@zlatkozeco7951]

Thx, subscribed 😉

[@silkeschumann7261]

If you use a checkbox and CSS you can increase the accessibility of the responsive layout, so the site is still pretty and focused on the content without having the navigation prominent before content when javascript is not available.

[@markchristophercornelio8161]

Thank you so much

[@amdesignbd5604]

thanks a lots bro....

[@ShillBullshit007]

Nice one buddy ;o)

[@bferster]

Excellent!

[@FollowAndrew]

Many thanks!

[@muthukumars8656]

Awesome 😊😊

[@galihanggorojati3455]

thanks sir 🙏🙏

[@ElisaLowenstein]

Great walkthrough! Is the starting HTML file available for download?

[@FollowAndrew]

I've updated that description with a link to the starting files. Here is the link: github.com/wilsmex/edu/tree/master/responsive_grid_tutorial

[@pierrelemon2273]

Yeah! Good tutorial but I think it is best to begin first in mobile design and develop in steps for steps with responsive design to desktop.

[@jw8219]

Yes, I just wanted to know if there was a way to modify the code for sub1,sub2, & sub3 so that it could portray the same effect for a jpg or a png picture that I upload and not necessarily one from the website, during tablet mode?

[@aronraszkiewicz1942]

Which program did you use to do that? I like the preview that automatically refreshes after you change something.

[@FollowAndrew]

That program is called “Adobe Brackets”

[@nevinmurad9075]

Hi, How did you create the logo? How can I insert a picture in the main content box that has big resolution?

[@niyagentleman8143]

you are agreat great pedagogue! ^^

[@IanGoodsman]

Hi, many thanks for this tutorial, it has helped me a great deal on the HTML and CSS side of thigs. However, and for some unknown reason, I cannot seem to get the app.js to work on Mobile view. The Menu and 'burger icon' show along with the menu items in a vertical format. Pretty sure I have followed your CSS correctly, the script link is in the HTML, and the app.js file is in the same folder as the other files, but it doesn't work. Any suggestions? Am using latest version of Firefox.

[@IanGoodsman]

Scrub that question - my bad. Somehow the updated CSS including the mobile hide and show, did not save for some reason. All OK and, once again, many thanks.

[@user-hc8ih2gl3v]

thank you very much!! can I please help me here, what coding languages and softwares do I have to master to be a good web developer? thanks again

[@FollowAndrew]

Learn Javascript for front-end (and backend with Node.js). Ruby, php, or python for server side.

[@MemphisBelle291]

if we want to add a dropdown to one of those menu items, how would we do that? A dropdown is generally not that difficult, but to intigrate it properly to provide the menu responsivenes is a bit tricky though

[@911madza]

whats the best framework for responsive design in 2019 Q1?

[@DKTProductions2011]

Good day, how do you link an external website to one of the pics

[@tassarna93]

How did u do so that when u hover in html it shows the element in tje browser.. kinda hightlighted. Is it an extention??

[@amalyusli38]

hi! my footer isn't displaying a grid like it's supposed to in desktop view, it only stays stacked no matter what size the screen is, I wonder what am I doing wrong.

[@amalyusli38]

wait I got it

[@anthonytadas9164]

please can we get the link to your CSS-grid tutorial?

[@codemason1006]

kzbin.info/www/bejne/iYGpdX9-g9JogbM

[@nadiac7627]

Hi, You mentioned a tutorial on CSS grid. Can you post the link please? Or if you already did, can you direct me to it? THX

[@FollowAndrew]

@

[@gazzzou]

Thanks for the tuts! really helpful and nicely done. May I ask how you got this nice little feature that allows you to see which element is selected on webpage when editing in the editor? Exemple in 1:13:00, when working on with .featured > div

[@FollowAndrew]

Sure, that’s actually a feature called “live preview” of the code editor I’m using called “brackets” (brackets.io/). It’s enabled via the little lightning bolt symbol in the upper right of the editor.

[@gazzzou]

@@FollowAndrew thanks !! I know another one exist directly into the browser but I cannot find the name. Cheers. Thanks again for your time and all

[@FollowAndrew]

Ah, maybe your looking for what are know as “dev tools” generally called “inspect element”. It’s built into the browser (but you have to enable it in safari). Just right click and select “inspect element”

[@mohammadyeasin9062]

@@FollowAndrew is there any similar feature like "live preview" in VS Code ?

[@FollowAndrew]

@@mohammadyeasin9062 This will give you similar functionality in VS code: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

[@erinm7441]

At the very end I compared my desktop layout to yours, and all of my footer content was in the center. I thought we put justify-content: center not under a media query. What did I do wrong with my code? Thanks! .footer { display: grid; margin: auto; grid-template-columns: minmax(20px, 300px), minmax(20px, 300px), minmax(20px, 300px), minmax(20px, 300px); justify-content: center; grid-template-rows: 1fr 1fr; background: linear-gradient(rgba(0,0,0.6), rgba(0,0,0,.1)) border-box, url(source.unsplash.com/1600x400/?art) no-repeat center center; color: #fff; }

[@senangcoding4747]

watch this 33:46 change grid-template-columns: minmax(20px, 300px), minmax(20px, 300px), minmax(20px, 300px), minmax(20px, 300px); to grid-template-columns: minmax(20px, 300px) minmax(20px, 300px) minmax(20px, 300px) minmax(20px, 300px);

[@codelearner4663]

Sir can you upload how to create blogger. blogspot responsive templates

[@DonaldLHayes]

Are you available for web dev...I have a web domain we are starting up?

[@shoxruxrustamovshoxfitnes3673]

👍

[@kevinpawan4539]

Sir can you develope linkedIn home page?

[@aakashthakur7061]

Hi there is no css file in git plz upload it

[@anadayinufioortega8652]

Can this be an email blast?

[@janlano3854]

It is great, but it doesn't work in IE11 :-(

[@elinriahi7969]

Name editor Plz !

[@FollowAndrew]

This editor in this video was Brackets: brackets.io

[@Veri7a]

If you have JavaScript blocked like I did, you might spend an inordinate amount of time troubleshooting those few lines of JS before you turn the NoScript off. LOL.

[@abhinayganu]

learn to understand these formula

[@BDogg2003]

Well, let's see if my highschool-level understanding can actually make heads or tails of this.

[@industrialhomestead4028]

algorithm

[@parkernugent7354]

great video until he said "On accident" ahaha i dont care its just a pet peeve but still a good vide

[@rajtec1846]

Thank you very much for this tutorial.