Тёмный

HTML5 and CSS3 Responsive design with media queries 

Quentin Watt Tutorials
Подписаться 159 тыс.
Просмотров 684 тыс.
50% 1

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

 

7 окт 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 908   
@vibhutidesigner
@vibhutidesigner 5 лет назад
I searched the entire internet trying to find the perfect explanation for responsive websites thinking you didn't have one. AND I LANDED HERE AGAIN! You posted this like 5 years ago damn! You, Quentin, are the best teacher with the most simplified and logical explanation. Thank you thank you thank you!
@QuentinWatt
@QuentinWatt 5 лет назад
Thank you. :)
@noone-gr4is
@noone-gr4is 4 года назад
One of the greatest tutorials on web development! You explained everything cleanly!
@QuentinWatt
@QuentinWatt 4 года назад
Wow, thanks!
@graphicisland5860
@graphicisland5860 10 лет назад
i have been looking for tutorial on responsive website for two days without sleep. i am going to sleep now. this is all i needed. thinks 100%
@chrismachabee3128
@chrismachabee3128 6 лет назад
Absolutely Fantastic. From a guy who has had a ton of instructors, you are top 5. Clear, sharp, correct, and great. Thank you. past few weeks studying CSS Gris, Flexbox, Responsive design. I had a few questions. So, I says to meself, I look up Responsive CSS. OK, I find your RU-vid instruct video. Ties everything in a nice neat bow. Thanks again, you sir, are the best.
@ArtandPianoTF
@ArtandPianoTF 9 лет назад
Very good tutorial! I just have a little hint concerning the scaling of pictures: img{width:100%} means that every image will be stretched to the whole screen, even if the original size is smaller. IMHO img{max-width:100%} works better and is scaling down only.
@QuentinWatt
@QuentinWatt 9 лет назад
+Thomas Fischer Yes, you are are correct. That is a better style rule.
@ZonkoKongo
@ZonkoKongo 9 лет назад
+Thomas Fischer thx
@ZonkoKongo
@ZonkoKongo 9 лет назад
btw nice video really helpful and good
@fusion5329
@fusion5329 8 лет назад
+Quentin Watt Hey if you would have time to respond to my question i would be more than greatful! :) So you know the way you put @media screen and(max-width:960px) or similar do you have to put in the exact same text? I have tried expirment with it but i have to have all of the text in one with that i mean this media and screen thingy. I was just wondering if its possible to put in something else? or a smaller text?
@MattTravisMedia
@MattTravisMedia 5 лет назад
Thomas Fischer Thank you sir!
@remnant1018
@remnant1018 9 лет назад
Excellent! I asked my teacher what to do about testing/designing for smart phones. I found this video the very next day ☺️ Squeak all you want. I'm all ears.
@MrRight1000
@MrRight1000 8 лет назад
That was most lovely presentation. I knew the material, but still enjoy watching it. Thanks.
@alisonedmondson5558
@alisonedmondson5558 8 лет назад
I was totally and utterly stuck with making my website responsive. I followed your tutorial and it worked!! Can't thank you enough. Assignment due in tomorrow!!!
@flick00
@flick00 8 лет назад
Fuck yeah... This shit is what I have been looking for, for weeks... Thanks a lot mate... Pardon my language...
@patrickmadlang-awa2190
@patrickmadlang-awa2190 9 лет назад
Quetin Watt's Chanel should really grow, for being unselfish with his knowledge..
@sajiraghavan
@sajiraghavan 9 лет назад
Hi Quentin.... Yours are the best of all tutorials I have come across on the net. I am quite a beginner with an Art Background. I am able to understand every point and see them working perfectly making me very confident that I too can create a website. Appreciate your philanthropic nature.
@GaryBarker-cartoonist
@GaryBarker-cartoonist 9 лет назад
Finally! Someone who can explain coding in a way complete novices like me can understand, thanks Quentin. All I have to do now is figure out how to apply this to my site!!!
@illegalCommunityM2
@illegalCommunityM2 9 лет назад
Such a great tutorial. Looks like i wont sleep tonight.
@devanshutripathi9589
@devanshutripathi9589 5 лет назад
why what are you thinking about
@bchitala
@bchitala 8 лет назад
Excellent tutorial. In my view Quentin is among the top best web development tutors on RU-vid. Gives out his best knowledge without reservation. As a matter of fact, I cannot agree more with other commentators that say he is perfect.
@LakshmiDevilifentravels
@LakshmiDevilifentravels 10 лет назад
Explains so cool and simple.Really loved the way you walked through.Excellent Tutorial.Keep going!!!
@akshaytomar7030
@akshaytomar7030 7 лет назад
i m from India ,i fallow u last 10 month u r just awesome...i like your teaching method
@jromeroevo
@jromeroevo 10 лет назад
You are the best . This was so simple to follow.
@criticalhacker8581
@criticalhacker8581 6 лет назад
Jose R I agree, honestly I've never had a better teacher! And when I say awesome I mean it. Awesome work with the video, in my opinion you deserve more then 1mn likes, how dare 100 pepole dislike this video?!
@jamdownmatket
@jamdownmatket 5 лет назад
You are the only one that I was able to follow and do exactly what you demonstrate. You are a very good teacher you make it very simple. Thank you for taking the time out to do theses video "I find them very helpful".
@sjoerdschepers3095
@sjoerdschepers3095 9 лет назад
A like for a man who helps me out!
@danielromen1858
@danielromen1858 7 лет назад
So I am a Coder and I really wondered about what I should do at the condition the screensize is under my minimum size. Just a perfect video.
@ivano.garcia5222
@ivano.garcia5222 9 лет назад
Thanks You! Very useful and exactly what I was looking for!
@devanshutripathi9589
@devanshutripathi9589 5 лет назад
firstly dude correct your grammar or use grammarly dont keep designing
@programmingjo
@programmingjo 9 лет назад
Hi, Quentin, Your videos on HMTL5 & CSS3 helped me a lot so far. I'm going for IT Web & Software developer, and your videos were and are extremely helpful to me. More than Murach's book. I would like to thank you for your generosity in sharing your knowledge with us. I have to admit. I download all your videos and keep them as a bible for this subjects. Thank you man! You're awesome!
@Gallery296.photography
@Gallery296.photography 8 лет назад
Linked this tutorial for a Web Design II undergraduate course. Thanks
@jacobmade9566
@jacobmade9566 8 лет назад
This is probably the best tutorial on this subject, I havent understood the media queries until now, THANK YOU!!!!
@arkano01
@arkano01 8 лет назад
simple but very effective!! thanks!!
@intraprisesolutions5496
@intraprisesolutions5496 4 года назад
Very well done. Just the right amount of information, sizing details, and concepts to enable one to begin playing around, even as display and device sizes change over time...
@susheelindulkar
@susheelindulkar 8 лет назад
JUST PERRRRFECT !!!
@noelasaji5238
@noelasaji5238 4 года назад
Guys who take time to share their knowledge are the best!!!
@QuentinWatt
@QuentinWatt 4 года назад
Thank you
@wjfox2006
@wjfox2006 9 лет назад
This was an incredibly helpful video - thanks! :)
@brightsideduo6020
@brightsideduo6020 9 лет назад
Best explanation of media queries I've come across. Easily. Thanks very much!
@prodz1719
@prodz1719 7 лет назад
@bryandelacruz9066
@bryandelacruz9066 6 лет назад
@mlsdd
@mlsdd 6 лет назад
Where to we add the media screen, on top of the css or at the end?
@gerwinkuijntjes4738
@gerwinkuijntjes4738 6 лет назад
Star Cat at the end
@soumen9458
@soumen9458 9 лет назад
I must say....!! you're seriously a very good instructor and a teacher...i really loved the way you explained...and i understood every part of it...and because i'm a newbie in website designing...i really got to learn so much ...thanks buddy...!! :)
@RevafallDCUO
@RevafallDCUO 9 лет назад
And they say heroes doesn't exist
@ragn594
@ragn594 4 года назад
don't*
@charankumar9897
@charankumar9897 4 года назад
@@ragn594 haha nice catch ....hero doesn't and heroes don't.
@aidn_sthu3567
@aidn_sthu3567 4 года назад
@@ragn594 lol English is probably not their first language.
@noobgamer1562
@noobgamer1562 6 лет назад
I was learning it in an online tutorial bui i did't get the best result ,but by the help of this video i have cleared ,.,.... thank you so much
@kidsu3678
@kidsu3678 8 лет назад
It's a awesome tutorial! Thank you :)
@studiocity10
@studiocity10 8 лет назад
i've been avoiding this vid for 4 months.. So glad i watched it. Thanks , youre a very talented teacher indeed!!
@theatifkhan
@theatifkhan 6 лет назад
/* Good tutorial */
@raymondsantos6128
@raymondsantos6128 9 лет назад
You just save our lives. Thank you for explaining everything thoroughly and clearly. Love lots!!!
@priyankatanwar5681
@priyankatanwar5681 8 лет назад
Awsom.... :) really very hlpful
@mikemerr
@mikemerr 6 лет назад
Not sure why ppl give a thumbs down on this video, this was very awesome! very helpful
@HiDefinition1080p
@HiDefinition1080p 9 лет назад
@5:50 the media queries part begins
@devanshutripathi9589
@devanshutripathi9589 5 лет назад
you are guy
@MohiyuddinShaikh
@MohiyuddinShaikh 5 лет назад
This video is definition of clear and concise.
@OfficialDevTips
@OfficialDevTips 10 лет назад
What is the browser tool you are using to scale the site? 10:40
@QuentinWatt
@QuentinWatt 10 лет назад
It's the responsive desgin tool built in to Firefox. Keyboard shortcut shift+ctrl+m.
@OfficialDevTips
@OfficialDevTips 10 лет назад
oooohhhhhhhhhhh. cool.
@simonpatis
@simonpatis 10 лет назад
DevTips When using the Firefox responsive design mode I find that using the Shift key is really helpful for incrementing the scale in units of ten ;0)
@QuentinWatt
@QuentinWatt 10 лет назад
Thanks for the tip.
@evorty9179
@evorty9179 4 года назад
Lol are you still here?
@kelvinkipchumbakoech9758
@kelvinkipchumbakoech9758 6 лет назад
Wow! Have been looking for way to make my website responsive but this tutor has just taught me
@RazacxX
@RazacxX 9 лет назад
These days phones can have resolutions up to 2560px x 1440px (larger than most computer monitors). Would this method still be applicable to these types of devices?
@swallowedinthesea11
@swallowedinthesea11 6 лет назад
Wow!
@jacobtodd275
@jacobtodd275 5 лет назад
well adjust ur css media query to those resolutions.
@jimcoburn7856
@jimcoburn7856 9 лет назад
Worked for me. Tried it on another sample HTML5/CSS4 site I was building, and it worked perfectly.
@creationduwal
@creationduwal 4 года назад
I dont think internet is expensive for somebody if he/she is being a developer and is using a device for programming and designing.
@synthtv5976
@synthtv5976 4 года назад
People are in unique circumstances, circumstances that you know nothing about.
@synthtv5976
@synthtv5976 4 года назад
People are in unique circumstances, circumstances that you know nothing about.
@Jourden82
@Jourden82 4 года назад
To the point, easy to understand and simple. Thank you. Have answered a number of my questions.
@sergeynazarov2473
@sergeynazarov2473 7 лет назад
Conceptual, but not useful... Will be great to do tutorial on real site as landing page and response it from start to end with note as many conditions.
@QuentinWatt
@QuentinWatt 7 лет назад
Soon.
@OlovForsgren
@OlovForsgren 9 лет назад
Thank you Quentin, the best tutorial on responsive web design so far. Just in an hour I had a very well working web site, and a template for many more. I need to check out more of your videos.
@boldbileg
@boldbileg 7 лет назад
We get it... you need money. Get on with the video.
@SoItGoesCAL34
@SoItGoesCAL34 6 лет назад
Thanks for showing how simple this is. I have a website that needs to be converted to responsive but have been too overwhelmed and afraid to begin. No fear now. I can do this. I have some planning to do in how to display a couple of pages that have a table with 8 columns but no problem... seems like fun. Must look at your other videos for ideas. Thanks again.
@abdikafimohamud2931
@abdikafimohamud2931 7 лет назад
Thank you so much Quentin. You really helped me because I was confused how to make a website responsive and you gave me the exact answer I needed within short amount of time. I can't thank you enough.
@tomvanlier1533
@tomvanlier1533 7 лет назад
Great tutorial, I recommend it to start with css3 resp design and media queries. In fact, later today I will start adapting a site to be responsive thanks to this very clear explanation.
@alexlar23
@alexlar23 10 лет назад
congratulations sir you just learned me in no time how to do responsive web design!thank you so much!
@harrisonkamau597
@harrisonkamau597 8 лет назад
I never thought that media queries would be so easy to grasp! Thank you sir!!!
@rotrose7531
@rotrose7531 7 лет назад
You are great, though I sometimes try to figure out the these rules by myself, this is the first time that I understand the logic behind it. Thank you.
@paulcamposgil
@paulcamposgil 8 лет назад
Thanks for all your videos Quentin. Just finished all 52 HTML5 and this one. Great help. Will continue with Javascript and bootstrap now. Keep it up !
@melindabrack
@melindabrack 9 лет назад
Thank you Quentin, I've been running in circles trying to work out how to do this. Who would have thought it was so straight forward. Great video.
@EnglishVocabularyBooster
@EnglishVocabularyBooster 8 лет назад
Very good! Thanks a lot for video! While others teaching this for hours and hours, you made it clear in 15 min.
@marseljgn
@marseljgn 8 лет назад
Your tutorials are such a blessing! Thanks you so much! Im watching your html&css tutorials and I am learning a lot. Thank you! Thank you! Thank you!
@konstantinsemenyuk5123
@konstantinsemenyuk5123 7 лет назад
Quentin I love you You're the most informative tutorial guy out here. Thanks
@okijohn7153
@okijohn7153 2 года назад
Wow Wow Wow, simple and precise. Thanks so much for saving me all the stress
@edonl4555
@edonl4555 8 лет назад
You are diffferent that others; Simpe and Professional Thanks the best explain ever for Responsive
@rameshguttula34
@rameshguttula34 9 лет назад
Your Tutorials are VERY EASY to UNDERSTAND and the way of YOUR TEACHING is EXCELLENT.... Thank You Friend...
@pacaron714
@pacaron714 8 лет назад
Stunning how that works.. and it works very well. Thanks Quentin for the 'easy to learn and follow' lesson. I couldn't find the source code so I typed it from the video AND I subscribed.. I want more!
@jasonroy2308
@jasonroy2308 8 лет назад
Thanks for letting me know about Audience Retention. I used to download the videos since I have to refer back to it. But from now, I'll make sure I watch it on RU-vid. :) You deserve it, bro.
@me-jk9rl
@me-jk9rl 7 лет назад
Awesome lesson given ever..Even the beginners could easily understand this video!! Hats of yu Quentin.. Hope this video makes everyone a good web developer...
@farzadfara1
@farzadfara1 7 лет назад
Excellent Quentin. Short, clear and comprehensive to start with "Responsive Design". Hope to see advance tutorials. Thank you.
@robertsacamano
@robertsacamano 9 лет назад
Hey, a good trick is to use DPI in media queries, now that a lot of smartphones are coming wigh high-res screens, and that kind of mess our use of resolution. Great tutorial btw, clear and precise.
@mharrsch
@mharrsch 7 лет назад
Quentin, forgive me for coming so late to the party but I'm a retired education technologist and assumed I would no longer be dealing with recoding websites to be responsive to different-sized devices. However, a non-profit for whom I once developed a website over 12 years ago has pressured me to rewrite the website so it can now be viewed on today's smaller mobile devices. Your tutorial has been very helpful and I commend you for your clear instructions. However, I'm having a little trouble getting the secondary media screens to alter display for the much smaller devices to work properly. In your example for the media query designed for a device with a maximum width of 640px, you only copied the CSS for the columns that you wished to display below each other into that media query. On a more complex web page where there are multi-column s both above and below the targeted columns, is it necessary to include all multi-column in that media query to get it to work correctly? Do you have any more tutorials on responsive design that address issues with dynamically constructed content using PHP scripts?
@mariebrown3532
@mariebrown3532 7 лет назад
Thank you for this very informative tutorial! I am taking my first class in html / css and was having troubling with this process.
@charankumar9897
@charankumar9897 4 года назад
Shit man , why I didn't know you till now??? Your way of explaining is simply superb. If you explain like this one can easily learn complicated things with keen interest and it's very easy to understand too.
@QuentinWatt
@QuentinWatt 4 года назад
:) thanks
@sarojbudhathoki8786
@sarojbudhathoki8786 4 года назад
6 years ago and it is still helpful for me :))
@QuentinWatt
@QuentinWatt 4 года назад
Glad to hear that.
@MrLaxr-op4be
@MrLaxr-op4be 5 лет назад
Your content was so helpful .. my responsive design wasn't working. After watching your video I figured my fault. So, thanks again !
@QuentinWatt
@QuentinWatt 4 года назад
Happy to hear it helped.
@nuralam-lx8gf
@nuralam-lx8gf 7 лет назад
i have seen lot of tutorial with various language but your tutorial is seems to me very useful to understand. i wana salute you once again! and also have to say...love you broooo...
@davidmack9842
@davidmack9842 5 лет назад
Your tutorial skills are excellent. One of the best web development videos I've seen. Well done, and cheers!
@karimtahraoui3344
@karimtahraoui3344 8 лет назад
DUUUDE you make it very clear in 15min !!! you just got a new subscriber you rock my man!
@AzTreandwealth
@AzTreandwealth 7 лет назад
incredibly simple and easy to understand video. Thank you so much Quentin.
@ikravchik
@ikravchik 10 лет назад
Thanks Quentin, a clear and easy to comprehend tutorial. Helped me a lot.
@AlistairEdwards
@AlistairEdwards 9 лет назад
Responsive design makes so much more sense now. Thank you!
@ashleyseeley7813
@ashleyseeley7813 10 лет назад
Thank you!! This video was awesome! I am taking an online class and this has been the biggest help!!
@daveelderdotcom
@daveelderdotcom 7 лет назад
Quentin, Once again I want to thank you. A year ago, I felt I was facing a major uphill climb, since I had 3 websites to convert to mobile-friendly designs. Then I watched your video, and within days, I was already putting 1 of the 3 together using your template. Within a few months, I had both my book site (mentalpushups.com) and my film site (theviewfromheredoc.com) completed. It took me a lot longer for my main music website, daveelder.com, because that site has a lot more pages, but I finally got it done back in mid-December, and I feel like your video made it all possible. Thank you, thank you, THANK YOU! -Dave
@sueholder703
@sueholder703 5 лет назад
Excellent, clear and a good pace with awesome explanations!
@lunarninja76
@lunarninja76 4 года назад
This is what I searched for 👌great man 👍👍
@ranjitshah7563
@ranjitshah7563 3 года назад
thank you so much for teaching us in a very easy and simple way
@prakashkrishnan3283
@prakashkrishnan3283 9 лет назад
Thanks for this dude, this is a really nice demo of responsive styling. You nailed it with this. Short and sweet
@QuentinWatt
@QuentinWatt 9 лет назад
+prakash krishnan thank you :)
@srushtidaware7978
@srushtidaware7978 8 лет назад
best video to understand a sample of RWD!
@Squamousepithilium
@Squamousepithilium 4 года назад
If they teach like this, why don't I learn plenty of things fast? Very nicely explained.
@QuentinWatt
@QuentinWatt 4 года назад
Thank you :)
@chintandd
@chintandd 3 года назад
awesome. thank you so much. I am beginner to responsive UI. this gave me good start/confident.
@QuentinWatt
@QuentinWatt 3 года назад
Thanks for the feedback
@SherylJohnson0102
@SherylJohnson0102 9 лет назад
Great video - I was working with existing code and didn't understand it. Now that I've seen this video, it's all perfectly clear!
@lakshmikumar6057
@lakshmikumar6057 8 лет назад
Very simple and clear tutorial, Thank you so much.
@kanprincess7520
@kanprincess7520 6 лет назад
thank youbso much buddy i was finding for this from last 1 week ... now i came to understand how to make responsive
@BerrisfordEdwards
@BerrisfordEdwards 8 лет назад
Clear, succinct and to the point. What more could one ask?
@abdessamdriague3078
@abdessamdriague3078 4 года назад
thank you very much, i'm from morocco and i enjoyed this video, it's really helpful
@QuentinWatt
@QuentinWatt 4 года назад
Happy to hear it helped.
@larryhoover1302
@larryhoover1302 9 лет назад
Thanks for your free training. It is really appreciated and I find it super high quali ty. Larry
@artemlobov3685
@artemlobov3685 8 лет назад
Why did I not watch this before, great tutorial, thanks!
@IanClarkOM
@IanClarkOM 9 лет назад
questo è il miglior tutorial che ho visto
@RainParadis
@RainParadis 9 лет назад
Badass, thanks so much!! Your explanation was super easy to follow and understand. You explain what each part does and how it works which help tremendously. Thanks so much! subscribes!
@bfresh913
@bfresh913 8 лет назад
Very nice video it showed me how to correctly make a page responsive with out using bootstrap. You also explained it very well!
Далее
5 simple tips to making responsive layouts the easy way
15:54
小丑家的感情危机!#小丑#天使#家庭
00:15
JSON and AJAX Tutorial: With Real Examples
40:45
Просмотров 1,8 млн
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Просмотров 380 тыс.
Flexbox Tutorial (CSS): Real Layout Examples
28:46
The Easiest Way to Build Websites
10:56
Просмотров 520 тыс.
Award Winning Animation With Only 20 Lines Of CSS?
6:59
A practical guide to responsive web design
23:13
Просмотров 216 тыс.
Responsive Design in Figma: Crash Course 2023
20:47
Просмотров 118 тыс.
Build A Responsive Website With HTML & CSS Tutorial
40:46
Useful & Responsive Layouts, no Media Queries required
11:03