17: How to Make a Website Responsive | Learn HTML and CSS | Full Course For Beginners

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 694

  • @Dani_Krossing
    @Dani_Krossing  Год назад +5

    NEW UPDATED 2023 COURSE AVAILABLE! 🙂
    You can find it here: ruclips.net/video/v8jDnBYc0bs/видео.html&ab_channel=DaniKrossing

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

      I am having such a hard time with this. My website works fine for most phones but, when it comes to the Galaxy S10, or phones similar, it just doesn't want to adjust to fit within the space provided and instead forces the user to use a scroll bad to swing left to right. Nothing I change fixes it either. Very annoying. Apparently it has something to do with touch being enabled or disabled and I have no idea how to force it to be enabled so everything looks right.
      Update: The answer was the size of my photos on the page. They were too large for the screen size so they would not adapt properly causing the issue. In case anyone was having the same issue.
      I resized each image to 320px and everything works fine now.

  • @MattMcGurk
    @MattMcGurk 4 года назад +90

    Literally the best explanations. Not just a code along, you're the first instructor who actually explains what the lines of code mean. Superb job Dani, Thank You!

    • @thegreenroom5820
      @thegreenroom5820 2 года назад +2

      And he didn't strech it into a 20 hour video series like many others. Dude is a ninja

  • @spoonman9584
    @spoonman9584 4 года назад +237

    You pretty much compressed my 11 week web design class into a zip file in one video.

    • @mastermindinclude7198
      @mastermindinclude7198 3 года назад +5

      Even for me...

    • @samueljackson5182
      @samueljackson5182 2 года назад +16

      Great job, but the 11 weeks was not a waste of time, cos it helped you to understand every single thing he was doing there...if you hadn't taken the class,there is no way you will understand what he is doing...so RUclips is mainly to help you with a few areas where you need help with what you already know

    • @rsmith1_
      @rsmith1_ Год назад

      Me too 😂😂😂

    • @momawhothat
      @momawhothat Год назад

      im self taught and is understanding everything he's saying you for sure grasp it quicker through a course or college though yes, but sometimes that isn't free @@samueljackson5182

  • @sukhvsin2
    @sukhvsin2 4 года назад +45

    I've been searching for this for ages and I got You ...
    Thanks, brother

    • @louzynerd129
      @louzynerd129 4 года назад +1

      when i change options from another display it changes it for all displays, what am i doing wrong?

    • @diwakardayal954
      @diwakardayal954 3 года назад +1

      @@louzynerd129 check your pixel values of mediaquery

  • @RainOnline
    @RainOnline 4 года назад +24

    Im just gona comment again showing how much I appreciate this, THANK YOU from the bottom of my heart.

  • @marianag843
    @marianag843 7 лет назад +56

    Thanks man, your the best. The only one that knows how to explain this things

  • @Thebrokenrobot273
    @Thebrokenrobot273 5 лет назад +47

    Despite this video being a few years older, this has helped me so much in my classes as I learn to be a web designer. Thank you so much

    • @louzynerd129
      @louzynerd129 4 года назад

      when i change options from another display it changes it for all displays, what am i doing wrong?

    • @pxCode
      @pxCode 4 года назад

      You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free.
      Try it out www.pxcode.io , there's tutorials on our channel as well ;)

    • @farvillage
      @farvillage Год назад +1

      hi, I'm in 2023 and it has helped me a lot too

  • @nylivehc9008
    @nylivehc9008 6 лет назад +14

    8:23 fudge thanks for that. i didn't know there is such thing. that will save me a lot of time.

  • @tifftiff1230
    @tifftiff1230 4 года назад +11

    Thank you 🙏🏻 I was scared to try responsive web and thought it was gonna be hard but you made it so easy to learn it.

  • @codeinswahili9505
    @codeinswahili9505 5 лет назад +1

    For the first time I have learnt responsive web design even after going through many tutorials. Very brief and clear.

  • @Dani_Krossing
    @Dani_Krossing  3 года назад +82

    I get A LOT of people trying to convince me that Lorem Ipsum IS a real language 😅 so just so I don’t have to copy paste the same answer over and over again...
    So just to make things clear...
    Lorem Ipsum is NOT a real language 😅 Just so you don't look silly if you tell your college professor that it is hehe 😊
    It's gibberish that is based on Latin, but it isn't Latin. It's half made up and half Latin, that is designed to appear as a real language. You can't write or speak it in a sensible way you could understand like you can with for example English, German, Spanish, OR Latin hehe 😉
    Here is documentation in case you want proof: 🙂
    www.makeuseof.com/tag/lorem-ipsum-case-wondering/#:~:text=While%20lorem%20ipsum%20text%20looks,32%20and%201.10.
    en.wikipedia.org/wiki/Lorem_ipsum

    • @victorfrancis1378
      @victorfrancis1378 3 года назад

      Thank you so much bro. I'm new and I'm getting the hand of it with your help

    • @briantw
      @briantw 3 года назад +4

      Nice try, but the words are real Latin words from a, you know, REAL LANGUAGE.. Your inability to pronounce "ut" and "viverra" is not simply brushed off by waving your hands and saying that it's not a real language; just admit you can't pronounce the Latin words and move on instead of doubling down on your justification.
      Saying those very real words aren't from a real language is very insulting to all the Latin friends I don't have.

    • @tinaweiss3590
      @tinaweiss3590 3 года назад +1

      Lorem Ipsum is not a language, but then, no text "is a language". An English text "is" not "a language", either. A valid question would be if Lorem Ipsum contains meaningful sentences in any language and another valid question would be if it contains words from any language. Obviously, the answer is no to the first question, but also, yes to the second question, because it does contain Latin words amongst others. Wise guy mode : end

    • @Wuddigot
      @Wuddigot 3 года назад +1

      I thought you were going to say: "So just to make things clear....
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      "
      😂

    • @razforceuniverse6091
      @razforceuniverse6091 3 года назад +1

      I like the fact that you used a wikipedia site as you proof, lol. Lorem ipsum is a real languange!
      Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

  • @motivees3934
    @motivees3934 4 года назад +7

    this is the shortest and best explanation i have ever seen

  • @kuntahouen3835
    @kuntahouen3835 5 лет назад +14

    Thank you! This is more comprehensive and helpful than my university classes.

  • @BummerSlug
    @BummerSlug 4 года назад +2

    I am self taught and only have a basic understanding of java, objective C and JS (arrays and such but not much exp) I really appreciate the explanation you give for “why” you are doing what you do. It helps so much more for me to hear why you did various parts (ie padding). I had to sub and am off to watch ever one of your videos now TYVM! Great instructions

  • @elluzion.
    @elluzion. 4 года назад +6

    The Video is some years old, but when it First came out this series really boosted my knowledge when it comes to HTML and CSS, and even programming in general!

  • @DINO92AVFC
    @DINO92AVFC 5 лет назад +8

    5:53 small tip: you can avoid going to external web site just to copy lorem ipsum text, there is a shortcut inside Atom to do just that. You type something like "lorem" where X is the number of words you want to generate (for example, lorem30 or lorem120), and then go either enter or double tab (I use VS Code, so I don't know how is it in Atom).

    • @kiwicami287
      @kiwicami287 5 лет назад

      Does that work for VS code too ?
      Edit: i should research before asking question like that, yes you can, with "loremNum"

  • @EzraKiprop-e9i
    @EzraKiprop-e9i 5 месяцев назад

    Man, 6 years ago and still sinks in like it was from yesterday, some epic explanation there! Great job!

  • @kikatabratt1846
    @kikatabratt1846 3 года назад +5

    From these 21 minutes I learned more then for a whole year at school studying the subject (HTML&CSS). Thank you a lot, you put great work into the video and earned my subscription too!

    • @PoboyMusic
      @PoboyMusic 2 года назад

      Thats why school is a scam.

  • @smylmvv
    @smylmvv 2 года назад +1

    Thanks for the tutorial! I didn't remember a lot about so much about hot to make a responsive website, but now I remembered again it!!

  • @chavesoutradimensao2513
    @chavesoutradimensao2513 5 лет назад +1

    I remember when I subscribed and you had around 40k subs and look at you now 🙌🏽 I’m so proud of you!
    You were very gifted, you make it so easy for us to understand.
    Thank you!

  • @Fraguille94
    @Fraguille94 6 лет назад +29

    You're great Daniel thank you bro! I thought I was good enough at CSS and HTML but your courses always teach me something new. Awesome content my man!

  • @saquibiqbal2350
    @saquibiqbal2350 6 лет назад +6

    Thanks Daniel you deserve more than 88k

  • @triplea0070
    @triplea0070 5 лет назад +1

    man really really thank you
    you can teach better than some teachers in my engineering college
    well to be honest you are a legend

  • @praveenpsg77
    @praveenpsg77 6 лет назад +4

    This is so sweet feel how things can be done with you. May god bless you !!

  • @HanulakTV
    @HanulakTV 7 лет назад +7

    Great tutorial as always. I study in IT college and thank by you from subject on which we using JS, PHP, CSS, HTML I have best marks - 6. I waiting for more tutorials like this which learns me more think's. Love you ❤️ #nohomo

  • @proudmuslim9139
    @proudmuslim9139 3 года назад

    dude, amazing work. i make websites for fun. Now i got a chance to make website for school and only problem i faced was it not being responsive. this helped me out a lot! i would definitely recommend others

  • @kimothe2nd
    @kimothe2nd 5 месяцев назад

    You dropped this 👑
    I have been struggling with responsive design for a while but you just gave the BEST explanation so far! TYSM

  • @jspr-rnty
    @jspr-rnty 7 месяцев назад +1

    going back to this tuts, because I almost forgot everything and I love how Dani teach such content.

    • @Dani_Krossing
      @Dani_Krossing  7 месяцев назад

      I have a newer 2023 course on my channel 🙂 which is a better version of this course

  • @naveensg6712
    @naveensg6712 3 года назад

    Thanks a lot brother I've been struggling with css for 3 days now I got it...

  • @Oppositemirror96
    @Oppositemirror96 Год назад

    man after all these years you saved my life and time much love keep it going

  • @SEMHRAY
    @SEMHRAY 7 лет назад +5

    Love your work bro i Am just Student so i dont know much but Am studying hard

  • @jg.7838
    @jg.7838 4 года назад

    THANKS!!! I looked at multiple pages and sites but this finally put it all in context!! Thanks again!!

  • @ritaiheanacho1388
    @ritaiheanacho1388 3 года назад

    You are simply my best teacher . Thank you Dani Krossing

  • @LesterShipMirOleg1992
    @LesterShipMirOleg1992 6 лет назад +2

    Great! Enjoying your tutorials here from a Caribbean exile living here in Tokyo, JPN.

  • @jawwadrehan2866
    @jawwadrehan2866 4 года назад

    I want to give BIG THANKS to Daniel. You explained it really well man

  • @yoshiro1698
    @yoshiro1698 Год назад

    THIS HELPED ME ALOT LIKE SERIOUSLY, I WAS SEARCHING FOR REPONSIVE WEBSITE TUTORIALS BUT I
    CANT UNDERSTAND SOME THEM. BUT THIS VIDEO EXPLAINED EVERYTHING CLEARY. THANKS SO MUCH

  • @allenjoshua7692
    @allenjoshua7692 2 года назад +1

    one of the best thing i learned in this video..
    "toggle soft wrap"
    it's called word wrap in vs code

  • @googleuser6875
    @googleuser6875 3 года назад

    Great! Thank you Dani, now I finally understand. Thanks for teaching an old dog some new tricks.

  • @abrarahmad9265
    @abrarahmad9265 4 года назад +1

    Great sir now i dont have to learn a new language like bootstrap to make my design responsive this is great.I do not know this before that we can make design res with css.

  • @brianredman5569
    @brianredman5569 5 лет назад

    Thank you. I had no idea how complicated I was making my own website. I will be following you for a long time. You are very helpful and your video makes it look so simple.

  • @akramer83
    @akramer83 4 года назад +4

    This is perfect instruction for the subject matter! Subscribed!

  • @puspamadak
    @puspamadak 4 года назад

    I have been learning web development since class 10 onwards and your videos are really very helpful for me.

  • @gonzalohernan4169
    @gonzalohernan4169 4 года назад +2

    Muy bien explicado, muy claro! Muchas gracias, me sirvió un montón.

  • @marcelclaude5438
    @marcelclaude5438 8 месяцев назад +1

    FANTASTIC.........SENSATIONAL, you came at the right time, thank You very, very much!

  • @shikharsinghkushwaha8246
    @shikharsinghkushwaha8246 2 года назад

    No. 1 Video for responsive design ❤️❤️🙏🙏. Shukriya

  • @bjmgraphics617
    @bjmgraphics617 3 года назад +1

    I think it's easier to cut down than to build up. I am a graphic designer and I make visual experiences the whole enchilada and it's all gorgeous. I use the "do without" logic when I scale down for lesser devices. Thanks

  • @stepbystepscience
    @stepbystepscience 6 лет назад

    That was a great video, clear and concise. Thank you very much.

  • @andrewwarren654
    @andrewwarren654 2 года назад +1

    Great video, presentation and content. Thanks. :)

  • @AngelTorres-ot6mb
    @AngelTorres-ot6mb Год назад +2

    I really enjoy this project. As a beginner you explained it very well and it was easy to follow you. I want to learn from you. Great job! Thank you..

  • @luckyhappy65
    @luckyhappy65 4 года назад +1

    You are so great! Thank you! I was a web designer like 8 years ago....and now I need to design a website but the rules have changed a lot! Your lesson is just great for me!

  • @tradingwithazoak
    @tradingwithazoak 11 месяцев назад +1

    I did not attend class all semester because of some serious issues, exam is tomorrow and I have already made my project to submit. thank you

    • @Dani_Krossing
      @Dani_Krossing  11 месяцев назад +1

      Hope you managed to make a good project in time. 🙂

  • @NoirMorter
    @NoirMorter 4 года назад

    This is the video that I was looking for! My class is going past the html section already so for now on it is all me!

  • @ajc155
    @ajc155 5 лет назад

    your gift of teaching is an asset to the humanity

  • @gaurisharma2253
    @gaurisharma2253 4 года назад

    Thank you so much Daniel.....I've looked into many , literally many videos but the concept could not go into my head....but ur video made it so crystal clear to me
    Thanks a lot!!!

  • @Noellenoelle1526
    @Noellenoelle1526 4 года назад

    I am new to design. Did not realize it would much easier to create the mobile version first. I created a really nice project in desktop version and now that I am trying to convert it to mobile version, it is quite difficult. Lesson learned.

  • @RussellTeapot
    @RussellTeapot 4 года назад +2

    Excellent video! Not only for learning responsive design, but for designing in general: there were some ideas that helped me grasping the general picture about widths and content organization. I will watch the other videos of this list too, I'm sure that there will be some other gems. Subscribed!

  • @WorldTimeLineChannel1
    @WorldTimeLineChannel1 4 года назад

    AWESOME VIDEO. YOU HELPED ME MAKE MY SITE MORE RESPONSIVE ON ALL DEVICES LISTED ON CHROMES DEVICE TEST. THANKS. 100,000 THANKS.

  • @biplobguragain5685
    @biplobguragain5685 7 лет назад +28

    Keep it up lad! It hurts to see that you only got 50k subs, you deserve a lot more.

    • @KimKongKun1337
      @KimKongKun1337 7 лет назад +4

      That's because only 50k people code and actually have a future

    • @notmeiko
      @notmeiko 6 лет назад

      you can double it bro

    • @aadilgoyal4198
      @aadilgoyal4198 4 года назад

      @@KimKongKun1337 because of your comment their are now 305k subs

  • @musicwithcode1322
    @musicwithcode1322 2 года назад

    Great content! I was able to follow along easily and have changed my website accordingly. Thanks so much!!

  • @afiq.muhsin
    @afiq.muhsin 5 лет назад +5

    thank you so much for making this tutorial, i appreciate it so much as.

  • @thenikhiltailor
    @thenikhiltailor 2 года назад

    I cleared my confusions related to the responsive web designing after watching this video...

  • @mm-yp5pv
    @mm-yp5pv 4 года назад

    I'm a beginner
    But I'm sure this is the best tutorial i have seen about responsive web
    God bless you

    • @pxCode
      @pxCode 4 года назад

      You don't have to Hand-Coding anymore if you use pxCode to build Responsive Webpage, and it's for free.
      Try it out www.pxcode.io , there's tutorials on our channel as well ;)

  • @helenameadows8143
    @helenameadows8143 3 года назад

    You're AWESOME!!
    Many thanks for your lessons!

  • @slyaustine2311
    @slyaustine2311 3 года назад

    Hi Dani Krossing. Thank you very much for this video. Its one of the best video. I wish to watch more of your videos from html, css, php and java script. Thanks and God Bless You.

  • @revvnijaa4177
    @revvnijaa4177 4 года назад

    5years wasted my college life but i now am very eager to learn
    Thanks for u bro

  • @mofurry8430
    @mofurry8430 4 года назад +1

    Man this was super helpful! super easy explained and easy to follow! Thanks a lot man!

  • @apbosh1
    @apbosh1 3 года назад

    Nice tip with the inspect and set different devices! Thanks

  • @GeorgesMayrink
    @GeorgesMayrink 4 года назад

    Thank you for the video. I was making an unnecessary mess with flexbox. I ended up using it but the code got much simpler after watching your video. Much appreciated. 👍

  • @henrythomas7112
    @henrythomas7112 9 месяцев назад

    Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

  • @gibran5208
    @gibran5208 2 года назад

    Nice thank you very much! this is great help even 4 years after!

  • @ronaldjeffersonjr
    @ronaldjeffersonjr 3 года назад

    Masterful! Just helped me so much with the website I'm building. Now I need to see if I can put it into practice. Media queries just changed my life and of course I built for desktop 1st...Ugh! Thanks!

  • @nba1shorts
    @nba1shorts 4 года назад

    im loving the responsive website woo thanks bro
    more power to you

  • @otete3020
    @otete3020 4 года назад +1

    Thank you for concise explanations 😊
    It was easy to understand!

  • @nuggets5787
    @nuggets5787 2 года назад

    Thank you🙏. I have been avoiding this for a year now lol.

  • @GfoxSim
    @GfoxSim Год назад

    Very helpful! Super easy to understand. Thank you so much.

  • @amanfaridi7997
    @amanfaridi7997 3 года назад

    u are amazing. u have teached 3days lesson in just 21 mint

  • @VuthavadooVikshay
    @VuthavadooVikshay 3 года назад

    Got what I came here for. Thank you

  • @yepyepyep3
    @yepyepyep3 5 лет назад

    These tutorials are great for getting an understanding of HTML and CSS fast!

  • @Fisayobabalola1
    @Fisayobabalola1 Год назад +3

    This is an extraordinary explanation.

    • @Dani_Krossing
      @Dani_Krossing  Год назад

      Thank you 🙂 My new “2023 HTML course” is much better and more updated. It’s linked in the pinned comment I believe, if not then it’s on my channel if you are curious

  • @manimaranbhuwaneshwaran5617
    @manimaranbhuwaneshwaran5617 4 года назад +1

    Wonderful approach for responsive site, Thanks buddy

  • @judyannmasungsong871
    @judyannmasungsong871 4 года назад

    This is definitely helpful for beginners in website design like me. Thank you so much for uploading this vid. 😭❤️

  • @fsasfsas1
    @fsasfsas1 7 лет назад +1

    Hi mmtuts
    I like your tutorials a lot. There is one thing that I would like to mention though. Your tutorials are great if the projects you want to learn are quite large. However, if you are searching for some smaller stuff on youtube, your tutorials come up but are usually too large to search for the wanted stuff. As an example I would like to mention CSRF. If you type this in in youtube together with the name of your channel, you get some hits with your tutorials but often the projects are too large. Perhaps you mention it ans I would love to hear you explain it, but ususally I choose a smaller video specifically dedicated to the subject.
    To sum it up: you leearn a lot by following all your tutorials, but I found that searching for something specific is not always easy to do with your tutorials.
    I really like your tutorials, the above comment is merely to let you know my (and perhaps of more people) choices.
    Thanks for your tutorials!

  • @mohamedesalem
    @mohamedesalem 4 года назад +1

    thanx very very much the (media rules) are very useful 💖💖💖💖💖💖

  • @shufflepack
    @shufflepack Год назад

    Wow! Just WoW!

  • @brianahunter1825
    @brianahunter1825 3 года назад

    Loved this video, I already knew this information but needed a refresher thanks!

  • @themultilangualcoder8832
    @themultilangualcoder8832 4 года назад

    what a clear tutorial ! Thanks Dani

  • @jacobsiegel9144
    @jacobsiegel9144 6 лет назад +2

    I loved the video!! I feel like the media query thing puts people who don’t know about conditionals in JS at somewhat at a disadvantage. When I tried learning it before I knew about it, I was like whaaaa? Also, some feedback: if you can, try to type. Copying and pasting doesn’t work well on mobile. That’s where I’m taking notes :\.

  • @azraewolfina
    @azraewolfina 3 года назад

    this video useful and educated so much even after 3 years

  • @RainOnline
    @RainOnline 4 года назад +2

    you literally just saved my life. thanks man

    • @louzynerd129
      @louzynerd129 4 года назад

      when i change options from another display it changes it for all displays, what am i doing wrong?

  • @Hahahawhatsup
    @Hahahawhatsup 7 лет назад +2

    Dude you're amazing!! I'm signing up on patron

  • @naina..
    @naina.. 7 лет назад +6

    It's was awesome and easy to understand..

  • @penny-ii6oi
    @penny-ii6oi 6 месяцев назад

    the tutorial is awesome! thanks a lot for demonstrating!

  • @Natalie-hf2vs
    @Natalie-hf2vs Год назад

    Hey, Dani. Thanks for your videos - best tutorials I've found to date.

  • @human1947
    @human1947 5 лет назад +1

    One of the best video that i watched ever

  • @evoo9863
    @evoo9863 4 года назад

    Thank you for clear and fast instructions!

  • @andrewdre8487
    @andrewdre8487 3 года назад

    I love your way how u explain this things. Thanks a lot.

  • @dennismutemi4479
    @dennismutemi4479 3 года назад +1

    this is great bana,,,,,thanks alot👍👍👍👍

  • @luisantoniobedoya
    @luisantoniobedoya 3 года назад

    take my like, you saved my life. Now I can do my coursework btw, your explication was excellent!
    Thanks so much!

  • @lazaromaia4518
    @lazaromaia4518 3 года назад

    Omg, YOU'RE AWESOME. Quality content. Thanks a lot

  • @aleksandarbutulija739
    @aleksandarbutulija739 5 лет назад +2

    You are amazing, thank you bro