Viewport Units Tutorial: The Magical CSS Unit of Measurement

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ธ.ค. 2024

ความคิดเห็น • 69

  • @sashaikevich
    @sashaikevich 8 ปีที่แล้ว +17

    I can't get over how incredibly useful these videos are given my current skill level. I know just enough to realize what I'm doing wrong, to get really excited about these css tricks. Thanks for taking the time!

  • @Daveyo89
    @Daveyo89 8 ปีที่แล้ว +14

    In an ocean of generic html/css tutorials, this is really refreshing. Thank you!

  • @omenaabenabe3361
    @omenaabenabe3361 6 ปีที่แล้ว

    No, I do not 'feel' like I learnt something. I ACTUALLY learned something. Awesome tutorial.

  • @MrBenjjj6
    @MrBenjjj6 8 ปีที่แล้ว

    You're a great teacher (very to the point, I am learning every second of the video). Thank you for talking about how well VW/VH is supported and fallbacks, whilst it's fun to learn new things what I really need to know is whether I SHOULD be using it in designs, so thank you for covering that.

  • @agi1041
    @agi1041 6 ปีที่แล้ว

    Watching this channel means it's Christmas every day. I've learnt so much from these videos. Thank you!

  • @jamhurdavronov5363
    @jamhurdavronov5363 8 ปีที่แล้ว +1

    love and respect
    one of the best teacher in youtube

  • @Colstonewall
    @Colstonewall 8 ปีที่แล้ว

    Very cool. As a developer who's fairly new, and has basically never taken the time to really study CSS, this is really neat. Makes things much simpler when you know you want a certain width or height, but don't know exactly how many px to use.

  • @jamhurdavronov5363
    @jamhurdavronov5363 8 ปีที่แล้ว

    Ohh, man this is what I was waiting for Brad, I was hoping that you had always new videos,
    I'm so happy that my dream come true and by the way Im about to buy your new video when I get home

  • @kfogo7459
    @kfogo7459 2 ปีที่แล้ว

    very nice video, the intro was funny, the information really useful and the examples helped visualize it perfectly, thank you!

  • @turboromy
    @turboromy 6 ปีที่แล้ว

    Besides quality contents, you got a very pleasant voice.

  • @HoustonBrownPhotography
    @HoustonBrownPhotography 8 ปีที่แล้ว +6

    A very enlightening tip. I will use that one for sure.

  • @richardsangohil
    @richardsangohil 7 ปีที่แล้ว +1

    Really awesome one, This will polish my css knowledge really well. Thank you for sharing knowledge.

  • @Amrdys
    @Amrdys 8 ปีที่แล้ว

    A great tip, very clear tutorial and awesome Cat. all in one video :)
    Thank you Brad

  • @gerryattrik4410
    @gerryattrik4410 8 ปีที่แล้ว +9

    Need more cat!

  • @thebibleproof
    @thebibleproof 4 ปีที่แล้ว

    Very nice examples. Thank you.

  • @inteltone
    @inteltone ปีที่แล้ว

    Great info! Great presentation! Thanks a lot for this video!

  • @salimaatis8721
    @salimaatis8721 8 ปีที่แล้ว

    Thank you Brad. I am following the udemy course religiously :)

  • @LearningSimplified
    @LearningSimplified 7 ปีที่แล้ว

    This is certainly a very useful resource! Thanks a ton sir!!!

  • @adamwillsconsulting
    @adamwillsconsulting 5 ปีที่แล้ว

    Excellent tutorial!

  • @AlessandroScaltritti
    @AlessandroScaltritti 8 ปีที่แล้ว

    great video (as always), simple and clear. thanks!

  • @amazingvipul8392
    @amazingvipul8392 6 ปีที่แล้ว

    Awesome tutorial!!

  • @kevinzhang8974
    @kevinzhang8974 8 ปีที่แล้ว

    Very nice tip and information. Thank you!

  • @alonasanbira1491
    @alonasanbira1491 8 ปีที่แล้ว +1

    really awesome video! please do more css and maybe an intro to sass?

    • @alonasanbira1491
      @alonasanbira1491 8 ปีที่แล้ว

      which vid are you reffering to? anyway, your thought process makes a lot of sense to me, and i was your sub before the last couple of uploads, you were on our lecturer's syllabus under further reading material 😎

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว

      Hi lonchac c, thanks for the message! Bart was referring to an earlier video on my channel that is an Intro to Sass. That's awesome to hear that I was on your lecturer's syllabus! Here's a link to that Sass Intro video: th-cam.com/video/8F1Vof0gTG4/w-d-xo.html

  • @abadialemadi
    @abadialemadi 8 ปีที่แล้ว

    Thank you so much, this is very helpful. I will use it right away.

  • @bksubramanyarao
    @bksubramanyarao 7 ปีที่แล้ว +1

    awesome tutorial !

  • @martinlowpezart6597
    @martinlowpezart6597 5 ปีที่แล้ว

    Great video man. Thank you!

  • @luismendez7708
    @luismendez7708 7 ปีที่แล้ว

    how does he keep pulling up that px ruler? How can i do that?

  • @SimonCantan
    @SimonCantan 8 ปีที่แล้ว

    Thanks for the excellent video!

  • @muhammadishtiaqhussain749
    @muhammadishtiaqhussain749 4 ปีที่แล้ว

    Just amazing!

  • @akbarshaikh8708
    @akbarshaikh8708 6 ปีที่แล้ว

    very important information

  • @MrBenjjj6
    @MrBenjjj6 8 ปีที่แล้ว

    Any plans for Ruby or Liquid tutorials? :)

  • @riyaadhfakier8537
    @riyaadhfakier8537 7 ปีที่แล้ว

    Great video!!

  • @shisho8700
    @shisho8700 5 ปีที่แล้ว +1

    ohh man thanks! in my last project i used like 10 media querys just for fontsizing and now i have only one or two meida Q

  • @alessandroscaltritti7092
    @alessandroscaltritti7092 8 ปีที่แล้ว

    In the first example, if I set .box { margin: 0 auto } the .inner div don't take the full page width but it uses the left-margin: auto; declared for the .box div.
    How can I take the full width of the browser page with the .inner div?

  • @premier69
    @premier69 8 ปีที่แล้ว +1

    ok so supporting legacy browsers, going out of my way to to do. it feels like keeping a typewriter and a Fax around just to support, whoever doesn't want to get with the times I guess.

  • @amazingvipul8392
    @amazingvipul8392 6 ปีที่แล้ว

    I understand why we added position: absolute inside h1 styling. But, why did we add position:relative inside hero-banner?

  • @UmeshGupta-of9wp
    @UmeshGupta-of9wp 7 ปีที่แล้ว

    hello Brad vh and vw property is not working safari browsers so please explain how to work this browser and thank you

  • @prasadkarmarkar495
    @prasadkarmarkar495 6 ปีที่แล้ว

    Thank you very much 😉👌👌

  • @jedidiha
    @jedidiha 8 ปีที่แล้ว

    are you using ST3? if so, what's the theme called?

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว

      Yep, Sublime Text 3. The theme is "El Capitan" and the color scheme is just the basic "Mac Classic" that comes bundled with Sublime. Before this theme, I used the "Material" theme for quite a long time (which was great, just wanted a change of scenery).

  • @andromedae-maxima
    @andromedae-maxima 7 ปีที่แล้ว

    love the video
    and the cat

  • @haytred56
    @haytred56 8 ปีที่แล้ว

    What program do you use to record / edit your videos?

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว

      Hi, I use "ScreenFlow" to record and edit my videos. If you're using a Mac I can't recommend ScreenFlow enough - super easy to use and fairly powerful. If you're on Windows, I haven't used it myself, but I've heard several people recommend the "Camtasia" editor.

  • @RmonikMusic
    @RmonikMusic 8 ปีที่แล้ว

    Quick question, you use transform without any vendor prefixes, is this safe to do at this point or should you still include the webkits, mozes, o's etc for fallback?

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว +1

      Ahhh, good point. According to the "Can I Use" website we'd gain an extra 13% support if we use prefixes. I completely forgot about prefixes because Autoprefixer has spoiled me: github.com/postcss/autoprefixer

  • @brunogigliofreitas
    @brunogigliofreitas 6 ปีที่แล้ว

    best fuckin teacher on youtube

  • @bartscholtus
    @bartscholtus 8 ปีที่แล้ว

    Great! My width-nightmares are gone!

  • @PMTechHelp
    @PMTechHelp 7 ปีที่แล้ว

    Thank you!

  • @louierichardson123
    @louierichardson123 4 ปีที่แล้ว

    Thank you so much! :)

  • @BrothersChannelb
    @BrothersChannelb 8 ปีที่แล้ว

    Can you please just show us how to make a onepaged portfolio website i am stuck i can't build one .
    p.s I have completed you wordpress series awesome work thank you

  • @MarkoKozlica
    @MarkoKozlica 6 ปีที่แล้ว

    Thank you! :)

  • @davejackson1281
    @davejackson1281 8 ปีที่แล้ว

    Is this tutorial in the git- course??

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว

      Hi Dave, no it is not. This video was created exclusively for TH-cam :) We do however write all of the CSS for an entire page together from scratch in the Git course.

  • @sids_studio
    @sids_studio 8 ปีที่แล้ว

    very helpfull

  • @ImaMusic2k
    @ImaMusic2k 6 ปีที่แล้ว

    Wahooooo!!! Merciiiiiii

  • @TijmenJanssen
    @TijmenJanssen 7 ปีที่แล้ว

    what if you wanted to scale the text size relative to the parent element instead of the viewport? would percentages work? honestly I've never used dynamic font sizes before.
    also, implementing a legacy fallback is not that easy as you imply, you still have to implement the extra steps to get the full height of the viewport when scaling 100% height for a div. I honestly find that the worst part of past HTML and CSS. first using tables.. then shitty css with tens of different ways to have things aligned the way you want it. and now a mix of that with more intuitive CSS styling but still having to think about people stuck in time. haha.

  • @MrXYZMEE
    @MrXYZMEE 6 ปีที่แล้ว

    best

  • @threeone6012
    @threeone6012 7 ปีที่แล้ว

    Another great video! I checked Can I Use caniuse.com/#search=vh and VH and VW are supported all the way back to IE 9. Unfortunately Vmax and Vmin still have spotty support.

  • @smithen85
    @smithen85 8 ปีที่แล้ว

    Fucking love your videos

  • @justkamilcom7721
    @justkamilcom7721 8 ปีที่แล้ว +1

    Great video but really this course cost 95 € ? I know that this is value knowledge but 95 is too much.

    • @LearnWebCode
      @LearnWebCode  8 ปีที่แล้ว +4

      I've seen courses that cover much less go for much more; having said that, there was supposed to be a discount applied to the link but it looks like it expired - that should be updated and back in place now.

    • @jimmyjimmy64
      @jimmyjimmy64 8 ปีที่แล้ว +5

      95 for the teachings of this guys is peanuts. He's by far one of the best instructors on the web.

    • @jimmyjimmy64
      @jimmyjimmy64 8 ปีที่แล้ว +2

      Don't listen to this guy. You could charge much more and I'd still think it was a great price.

  • @juliannafotheringham7101
    @juliannafotheringham7101 2 ปีที่แล้ว

    you look like nick from new girl

  • @AbhishekDasQZ
    @AbhishekDasQZ 8 ปีที่แล้ว

    Thanks. Detailed information on browser compatibility - caniuse.com/#feat=viewport-units

  • @HoNow222
    @HoNow222 4 ปีที่แล้ว

    This reminds me how much I hate CSS.