Responsive Web Design
HTML-код
- Опубликовано: 6 фев 2025
- Get the Code Here : goo.gl/ixFYz2
Best Responsive Web Design Book : amzn.to/1L6amHO
Support me on Patreon : / derekbanas
Responsive web design is used to make sure a site is optimized for any device. In this tutorial I'll create 3 optimized sites in one video and walk you through my process the whole way through.
Hi Derek I am a gynecologist with some interest in computers. I have learned a lot and enjoyed your videos. Thanks a lot
xd
Hemant Damle Can't wait your tutorials on your field though
I've decided to visit you channel to see if there is something new and a tutorial about responsive web design just uploaded a dew minutes ago. This made my day a bit better.
Hermann Bernzweig It is funny how that works out :) I'm glad I could help.
Once again, you're my hero.
+Alejandro Villena Thank you :) I'm happy that I can help
Derek, you got quite extensive channel man. I keep getting more and more videos in the recommended section. I'm surprised I haven't seen it earlier. You got yourself a subscriber.
Thank you very much :)
Awesome video. It's hard to find content that is as direct as this. Thanks for making learning easy!
Hey Derek, thanks for all of the tutorials I've watch by you so far... in regards to this one (Responsive Web Design) you are basically saying, if I want a responsive web design I must make it responsive for all devices by having "a separate" --- and CSS file-- assigned separately in a different size for similar devices, computer, Ipad, mobile phone devices etc.... thanks..
I'm happy you like them. Yes you are correct
Thank you Sir, I'm glad I was right, while paying attention. I will start my web design with those techniques and tricks in mind. Good work on editing and tutorials always. Peace!
WAs just learning about this in treehouse, your have the best free tutorials!
BALLAsTvDotCom Thank you :) They will always be free.
You could turn this into a series. I love this style of all in one video.
+Neceros Thank you :) I have a playlist on my RUclips channel that is based around learning many things in one video.
I love how you keep making those great layouts within 60 minutes all the time :P
The Honest Blogger! I've been making layouts since 1993. That is the benefit of being old :)
haha and you are fast as heck
You are just too close to being perfect. I enjoy watching any of your tutorials
Kevin Ogbonna Thank you for the compliment :) I do my best
you make it look so simple, really enjoyed your workflow
+Nazier Amoo Thank you :)
I can't thank you enough for these videos
SpencerTV You're very welcome :)
I am so glad I have found your videos!
+MrBlah Thank you :)
Yes, please make a video on the fluid layout. Thank you very much for all your videos! You are really great :)
+7oktarini Thank you :) Check out my handlebars tutorial. I have a couple of videos on how to set that up using easy to use tools.
Really good work done for creating such tutorials.
+Yuri T. Thank you :)
I find this video to be very useful and will continue to refer back to it frequently.
Hey,
Nice introduction to responsive design bases.
I don't know if you've already planned it, but you should talk about css grids (and preprocessors at the same time).
Helvanic Thank you :) I covered SASS and Susy recently. I plan on covering more. I like the look of my current videos. It is fun for me to cover massive topics in one video.
Great job Derek! May I suggest to update this video with responsive drop down menu? For instance, when we use the web page on mobile devices that have less then 5' or 4' displays, menu items automatical group in one menu item icon. Then when we click on it ,the drop menu appears. Keep up good work!
+TheMisionar Thank you :) I cover that in my Bootstrap tutorial ruclips.net/video/gqOEoUR5RHg/видео.html
+TheMisionar Here is another in which I make a complex responsive drop down menu from scratch ruclips.net/video/A1iu7EjVaG8/видео.html
definitely going to start using a grid like to help map out the future webpage and to count pixels
the best free tutorials
a p Thank you :)
you're such a boss for doing all of these
Thank you :) I'm happy it helped
Most awaited tutorial...great one...
Pratik Waikar Thank you :) I did my best to approach this topic in a different way.
again, nice vid. watched on my way to work... you have so much bloody content, I've got a lot of watching to do! thanks
Thank you for the nice compliment :) I'm glad you liked it
Derek Banas I'm just happy that a celebrity has responded to my comments 😀
I'm definitely not a celebrity, but thank you for that. I'll tell my wife and kids :)
Haha, don't sell yourself short, mate!
I love watching your tutorials,
But apart from browsing your video playlist
i don't see any C# Tutorial, Can you make some of it ?
The 30 Minute Videos are so awesome :)
Great!, your videos are the best! you are a good designer, I think so.
Keep it up bro!
chiclezs2 Thank you :) It is fun to make stream of consciousness videos like this and make some nice designs.
Excellent Derek. Thank you. Five Stars from me. Please carry on with this excellent videos.
Paul Juverdeanu Thank you :) I'll make at least 2 more videos in this vane.
Really awesome, i did not believe that you will be able to finish
Thank You
Omran AbazId Thank you :) I'm happy that you liked it
Derek, Just like the other videos, this one is awesome. I have 2 questions if you don't mind. First, is this the latest video you have on responsive design, and if so, is it still good for today? Second, how did you get the grid layout on your completed site? I am trying to figure out how to come up with some type of grid layout like this to plan out the site from the beginning. I am very new at web design, but I am much better thanks to your videos.
Appreciate another quality tutorial. Thanks!!
+dark room Thank you :) Your welcome
Hey Derek
. I would also love to see videos and your ideas on REST-ful WS, JAX-RS , groovy on grails(JAVA) and Spring MVC framework.
Thanks for all the excellent tutorials BTW.
You're welcome :) I have all of those tutorials on the list.
Are you going to do a video on Bootstrap 3? If so, that would be great!
This is a fixed responsive style. The common style is liquid or flex. I know you said it, but I'm looking forward to the liquid responsive style tutorial.
twenty1aboutdis I'll see if I can make one soon.
Thanks man. I enjoy your vids. Great teaching!
Hey Derek I was wondering what you used to mark up the page? and also there are some debates about using the tag for a nav bar could you clarify?
Your videos are brilliant. You are such a huge help and a great teacher.
I haven't looked into your RUclips too deeply, I am a new subscriber, but is there anywhere I can look to see you explain that grid layout you use in this video?
+Jonathan Payne thank you for the nice compliment. I have a commented code link in the description that I hope helps
Your videos are incredible - thank you!
Why do you never bother with indentation?
+Fabroskii Thank you :) I do use indentation most of the time, but for some reason my editor won't work properly and auto indent and I just keep writing the code.
You are awesome my friend, thanks for the tips and your time to make the video.
I'm very happy to be of help :)
underneath it, inside it; not 'underneath of it' or 'inside of it'. Aside from that, great content!
Just Thank you, man. You do cool tutorials
Andrey Elusive You're very welcome :) Thank you
hey derek banas,I enjoy each and every video u provide.can you kindly explain a video regarding the easiest way to do a responsive website?..if so it will be helpfull.. :)
great video! thanks for all your tutorials
Thank you for watching them :)
Hi, I have a question. I noticed that in your code, you use old coding styles, for example, instead of ", you leave off the forward slash. And also the same is true with I was wondering if this is something new with css3/html5 to go back to the old way that we used to code. I have not learned html5 or css3 yet, and that is why I am asking.
+Done4uNinja /> is used when you want to be compatible with xHTML, but aside from that it isn't used in HTML5
can you please tell me more about how the images have been used, do they scale according to css screen size. and what is the size of the digital content initially. does this matter to start at a specific size, format, etc... Thanks.
hello Derek, I can't find the style sheet for (smart phone device size?)
Responsive Web Design video
LOOKED IN index.html
I just wanted to say thanks for all the good videos! Keep it up ... :)
is their a bootstrap video coming anytime soon?
Brenton Reittinger Sure and in the mean time I have already covered Susy and Sass which is what I use instead of Bootstrap
23:51 ever heard of vertical align or line height ?
I just love your videos ! Thanks !
Thank you very much :)
Great video as usual. Thanks for doing these!
Marvelous Marv You're very welcome :) Thank you
Great stuff again! I'm uing this for a school project. Thanks :D
+ImStorm Thank you :) I'm glad it helped
Thank you so much! This method seems so much easier than using Flex boxes and even Bootstrap. What are some of the disadvantages of using this method versus using something like flex boxes and Bootstrap? Thanks again!
+ZoommaiR You're very welcome :) The only downside is that some people find this harder then using Bootstrap. The positive is that you have complete control.
+Derek Banas Well, There's still a lot about Bootstrap I don't understand, so that's probably why this method seems like it's so much simpler to implement for me. Plus, like you said, gives me complete control!
do you have a video explaining the differences between em px and %
why use em or % over px
+Jacob Groder It is rather simple. Don't use px unless you plan on changing the layout completely for the changing screen sizes, which is what I did here. I like to use pxs for the inner content and ems or % for the outer layout. % and em are the same if you use a default medium font. They scale well, but some times misalign in different browsers. Use pts only when the document is only going to be printed.
Thanks Derek. This was great!
+Jaikanth CK You're very welcome :)
Great teaching, God bless you real good
Daniel Oyeleke Thank you :) May God bless you as well.
Do you think that this is the best way to create a complex, responsive web application, or are there better ways? Thank you!
+Benso Rota This works, but many people use things like Handlebars as well.
What is the sheet that you're using to know the height, width, between spaces for the web page?
If I have an image to be converted into a html, how do I get the graph styled sheet for the image? @derek
Hi Derek, i like your way but is it good for page load speed? Are browsers smart enough to download only the right css file based on the screen width? Or are they downloading all css files and then use only the one for the actual screen?
Thank you for your time and answer.
Ales (developer from Czech Republic :))
Thank you :) I think they are all downloaded. I'd have to check
I have measured the load time with one css file and than with 3 css files (desktop, tablet and mobile device) and the difference was not too big, so I will use your technique, thanks :)
Hi, why do you keep using instead of if the property of is not necessary?
It's just a way of making things easier when styling. Also it's easier to edit span tags inside p tags but you need to have ids to edit p tags in p tags if that makes sense.
Hey Derek, did you make that responsive wed design with a fluid layout? Would be useful.
ShakespeareAvenue I'll make one, but my drop down menu tutorial I just made shows how to make a fluid design
Thank you for this wonderful tutorial.I have a question though.Why did you use background images for the navigation ,but for the Social images?I always get confused as to when to use an img tag over a background.
Moussa Harouna Your welcome :) I use background images when it isn't part of the content. Background images are also used when you want to use a sprite, which is common with navigation. Those are basically all of the rules.
Derek Banas I appreciate it:)
Great Job, thanks!
the right layout that gives you all the needed dimensions.... what tool is that?
Aron Sereny You're very welcome :) I was sizing by calculating a percentage lower. Sorry I didn't show that. I thought it would be boring.
Very cool! May I ask what you use to view your work in?
Thank you :) I drew those designs and the grid in Illustrator
What package did you use (to layout your design) for the design. On the right of your css/responsive web site? How did you do it?
I used Illustrator, but you can also use Inkscape
Hi Derek. where can i download the image in the video?
Thanks for the great videos, Derek. Since you can't post the images for this tutorial due to rights issues, will you please post the image dimensions so that I could at least add FPO replacements? Thanks!
JeffSFO Sure sorry about that
eyes : 728 x 455
social icons : 34 x 34
nav icons : 33 x 31
art thumbnails : 164 x 115
logo : 124 x 143
Derek Banas
Thank you, Derek. BTW, I've posted the placeholder icons I created to my Dropbox account--please feel free to make them available for your tutorial:
www.dropbox.com/sh/v7cqhc4dcjzu953/AABZNiUkaHGxozrysce7LuYIa?dl=0
JeffSFO I like to use this for placeholder images jfoucher.com/flickholdr/
Derek Banas
Thanks, I didn't know that one. lorempixel.com/ and placehold.it/ are good ones, too.
It looks like it doesn't work in IE11. Does IE11 support HTML5/CSS3?
And why some other classes mentioned in the markup (like article-block) are missing in css?
Wonderful tutorial and well done. Is there a PSD file for download to crop the images to add into the markup at all? Or should I just somehow get a screenshot and go from there? @DerekBanas
Thank you :) Try these for image placeholders lorempixel.com/
Hey Derek, what is your take on CSS Grid? Would you consider doing something similar as what you do in this video using CSS Grid (seeing how it's a groundbreaking feature and it's gaining more browser support by the day)? It would be awesome to start from mobile displays and build up while using the mobile stylesheet as fallback for older browsers.
Needless to say, you are my favorite youtuber on the coding field. Even when watching your let's plays I learn a lot of interesting tips. Thanks a ton.
Yes I was quite impressed with Grid. It is definitely improvement over Bootstrap which surprised me. I hope to cover it soon
Sweet, just what I wanted!
atombot89 I'm glad I could help :)
So, why not discuss in your intro that this is all automatic and easily achieved via bootstraps columns? I appreciate the fact that you're showing this, just to show it. But what is the purpose of doing this, considering bootstrap does this a lot more cleanly?
hi sir, amazing videos, i learn a lot, but it would be great if you cuold upload the assest, so in this way i could see the resolution o dimension of them, thanks.
How would you go about making a website out of pixel art or look like a retro game?
+PerkelatorZ Check out these tutorials and examples :
www.hongkiat.com/blog/pixel-art-tutorials/
design.tutsplus.com/articles/20-inspiring-pixel-artists-tutorials-and-resources--psd-305
Thank you for the information, and I have a good idea of what I am going to do now
Great video!!
Can you do a video on google polymer?
Also node.js
Can you make a tutorial for Perl please?
Very USEFUL!! Thank you!!!
+Roby Orzei You're very welcome :)
I perfere using JS to see if (this.innerWidth > 600px && his.innerWidth < 800px){change the href attribute of the link using the .setAttribute() function}
Is that a good practice? I have been told it is a bad practice a few times by other people cause they think it is not practicle to use more stylesheets when we have bootstrap and other frameworks but i personally perfere being in control on the product i build and not being limited by given propotions like 4x2 or something like that...
Do you code so fast normally or did you prepare for this video? As a beginner I think I could make this kind of website on my own, but it would take me something like 5 hours rather than 30minutes.
+Evaldas Zmitra I edit out the pauses in the video. This is pretty much out of my head, but I have been making websites since around 1994 so I have been doing this forever.
Guess what I needed lately ;D Thanks again, Derek!
btw. do you use Git and if so: are you planning to make a Git tutorial? Just asking :)
Vladhin Check the playlists. It's up there
Thanks, mate :)
Vladhin Here is my Git tutorial ruclips.net/video/r63f51ce84A/видео.html I hope it helps :)
Och it will xD
What texteditor do you use?
As always thanks for great stuff
Thank you :) Sublime, Atom, VS Code are all great
Any reason why you didn't use the `nth-child` pseudo class instead of defining specific classes for your items?
+sillyfly I like to target specific classes so it is easy to see what I'm trying to do, but either way is fine.
Ok. Thanks for the quick reply!
Please do one with fluid layout :)
joshmanufan Sure I can do that
Sweet :)
how can i find this image/template like logo.png first-sb.png etc.
Well the code is on the website, but where are the files? I cant really find them
+Søren Jakobsen yes, I'd like the files too. I'm following along and just wishing there were links to the images so my screen wouldn't show broken links. And I don't want to waste my time searching the net and then editing in photoshop...but..I guess that's what I'll have to do - welcome to the real world, eh? :P
What software do you use for your grid? Thanks for the video, really helped!
Brett Bonikowski I measure everything with either Illustrator or Inkscape. Inkscape is free and i have tutorials on it
Okay, thanks so much!
where is article class in html for which you have this css code
.article {
display: inline-block;
width: 166px;
margin-right: 16px;
}
i am not getting this plz help me
Do we still need to do the same thing these days for creating a WordPress theme or is there a short cut/other service that'll make our WP theme responsive automatically?
Thanks
+Hani Yahya I show the easy way to make responsive sites using Bootstrap here ruclips.net/video/gqOEoUR5RHg/видео.html
what programs are you using?
Thank you for this awesome video!!
You're very welcome :)
whats the website you are using on the left??
+Rene Corona It is a software program called Sublime Text
Okay thanks man, great video btw
thank you so much . can you give us the image that you used as a support i want to try it by my self
Hai, This is greatly useful and recognized video that is you have shared and I like It. Responsive Web setup is the approach that suggests that blueprint and progression should respond to the customer's lead and condition in light of screen size, stage and presentation. If you require some help so you can imply this association address.( goo.gl/fAZ33S)
What SublimeText theme are you using?
TheV0idMan IDLE
You are awesome Derek, thanks for videos... Would you please make a video on how we put Geo Location, viewer/traffic static, Facebook link etc. on web page without any 3rd party plugins ie. by natural code.
Thank you :) I'll see what I can do
Thanks for response. I am waiting for that.
I can't find file with images :( where is it?
Derek The Best!!! You totally rock!))))
+Maximillian Developer Thank you for the compliment :) I do my best
If this is a main nav for an entire site should you use the aside tag?
Will anything conflict with this?
Thank you
You can use aside yes
Very interesting but I'm asking myself where did you find eand learn all this commands? How do you know how to use spaces and stuff..Seems really hard stuff..
I mainly learn by just making many site designs. At one point I made numerous layouts per day
Gotta say, love it
+Jiang Shayne Thank you :)
What did you use to draw the grid layout that you kept referring to whilst doing the stylesheets?
Illustrator or Inkscape would work
Derek Banas Thanks! Whilst I'm here, I'd like to say thank you for all your videos. They've helped me massively (Especially JS)
I'm very happy that they have helped :)
Wow nice tutorial, good job! ;)
Fallout Thank you :)
Sorry, but can't find out where is the link with imgs files.
www.logomakr.com and get or create your own icons..
What did he design the website in? That graph with the dimensions
+Andrew Ryan You can use either Illustrator or Inkscape which is free
Thank you so much for sharing
I'm very happy that you liked it :)