10 modern layouts in 1 line of CSS

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

Комментарии • 1,2 тыс.

  • @asdasdasdasd714
    @asdasdasdasd714 4 года назад +1757

    Me: Probably another library or something..
    Video: "place-items: center;"
    Item: **Actually centered**
    Me: **Standing ovation**

    • @akshy471
      @akshy471 4 года назад +37

      i still cant center without checking the browser window

    • @jerzyglowacki
      @jerzyglowacki 4 года назад +21

      Come on, another library? You could've used align-items: center; justify-items: center; for many years, this is just a shortcut.

    • @aniketmishra9265
      @aniketmishra9265 4 года назад +15

      @@jerzyglowacki it still doesn't work sometimes :'(

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

      @@aniketmishra9265 When?

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

      @@jerzyglowacki isn't that flexbox? Not grid?

  • @OneAndOnlyMe
    @OneAndOnlyMe 4 года назад +265

    This video improved my life expectancy.

  • @sharpesttoolintheshed492
    @sharpesttoolintheshed492 4 года назад +1378

    justify-self: center
    justify-content: center
    justify-items: center
    align-self: center
    align-content: center
    align-items: center
    line-height: 100%
    text-align: center
    margin: auto auto
    vertical-align: middle
    *place-items: center*

    • @Nurutomo
      @Nurutomo 4 года назад +53

      10 vs 1

    • @quazar-omega
      @quazar-omega 4 года назад +55

      ..and they don't stop coming, and they don't stop coming...
      (fitting with your pfp)

    • @ajayrawat5603
      @ajayrawat5603 4 года назад +191

      Can I add one more?
      position: absolute
      top: 50%
      left: 50%
      transform: translate(-50%, -50%)

    • @ephektz
      @ephektz 4 года назад +33

      I felt this.

    • @speedynote3169
      @speedynote3169 4 года назад +10

      lolz i have used all these values

  • @leeboyin945
    @leeboyin945 4 года назад +1460

    02:06 01. Super Centered
    place-items: center
    03:03 02. The Deconstructed Pancake
    flex: 0 1
    04:36 03. Sidebar Says
    grid-template-columns: minmax(, ) ...
    06:12 04. Pancake Stack
    grid-template-rows: auto 1fr auto
    07:45 05. Classic Holy Grail Layout
    grid-template: auto 1fr auto / auto 1fr auto
    10:04 06. 12-Span Grid
    grid-template-columns: repeat(12, 1fr)
    11:47 07. RAM (Repeat, Auto, Minmax)
    grid-template-columns: repeat(auto-fit, minmax(, 1fr))
    13:56 08. Line Up
    justify-content: space-between
    16:08 09. Clamping My Style
    clamp(, , )
    18:35 10. Respect for Aspect
    aspect-ratio: /

  • @Richienb
    @Richienb 4 года назад +3132

    yes i can finally center in css

    • @pushingpandas6479
      @pushingpandas6479 4 года назад +59

      only working on chrome browser

    • @VipinSharma-mr7sq
      @VipinSharma-mr7sq 4 года назад +253

      Display flex, align item center, justify content center.....go nuts!

    • @JorgeGutierrez-kb7rw
      @JorgeGutierrez-kb7rw 4 года назад +20

      @@VipinSharma-mr7sq works everytime

    • @abdullahwaleed5571
      @abdullahwaleed5571 4 года назад +53

      @@GergiH who the **** cares about IE4, even RUclips don't support it.

    • @typicalprogrammer3542
      @typicalprogrammer3542 4 года назад +9

      @@VipinSharma-mr7sq height : 100vh; is required to center it vertically.

  • @enijar
    @enijar 4 года назад +1035

    Imagine showing someone from 20 years ago how easy web layouts would be in the future :)

    • @BodawalaPratik
      @BodawalaPratik 4 года назад +30

      I'm from future, in 20 years, everything will run and support the web. PWA is just the tip of the ice burg.

    • @1001-w5q
      @1001-w5q 4 года назад +25

      @@BodawalaPratik in 20 years from your future web layouts will be made by AI

    • @DineshkumarPuli
      @DineshkumarPuli 4 года назад +116

      Actually, 20 years ago we didn't have to worry about responsive layouts

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

      @@DineshkumarPuli Just embed flash in an object set to 100% width and scale being exactfit.

    • @JonathonBroughtonUK
      @JonathonBroughtonUK 4 года назад +21

      I am from 20 years ago.

  • @havokca
    @havokca 4 года назад +32

    I'm only 4:30 in and already this is the most useful CSS tutorial I've come across in weeks of trying to come up to speed on where the web has gone in the 15 years since I last dabbled. Fantastically simple and straightforward presentation too. No useless fluff. Just dive into the details with visually compelling examples.

  • @tanvirmahbub3595
    @tanvirmahbub3595 4 года назад +119

    The happiness you are radiating in the video makes everything easier to understand.

  • @craigdanielmaceacher
    @craigdanielmaceacher 4 года назад +62

    Probably the most important CSS video for modern web I've ever come across, thanks!

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

      So true... I have to say though, I was looking for the IE11 fixes but then the video did say "modern layouts". IE11, the bane of my life! >''

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

      @Data I hear @Data, sadly sometimes, clients want compatibility with old browsers.

  • @greentea5593
    @greentea5593 4 года назад +124

    One of the best CSS layout videos that I've ever seen!

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

      Agree. I hate CSS but the way she simplifies it makes me actually want to use it.

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

      Agreed.

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

      True =]

  • @FlorianEagox
    @FlorianEagox 4 года назад +27

    Incredible. The level of sophistication and simplicity in modern CSS takes my breath away.
    I need to kick my flexbox addiction and start using grid as well

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

    Great and wonderful! I am updating my knowledge, but I would appreciate the way you speak, you let other people be interested to hear you

  • @josephjojo756
    @josephjojo756 4 года назад +94

    I'm not a design person, so whenever I try to do a design mock-up I have to write many lines of code and even that doesn't give me satisfaction on my work. But after watching this, I think my work can be reduced a lot. can't wait to try this out. Really nice presentation. Thank you for these great tips!

    • @carldressler3262
      @carldressler3262 4 года назад +5

      You should try a Prototyping/UI Design software like Adobe XD, Sketch or Figma. Figma has a free tier and Adobe XD is entirely free, give it a try (not as hard to learn as other Adobe programs luckily)

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

      @@carldressler3262 thank you so much for your suggestion. Yeah surely I'll give it a try.. 👍

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

      I'm sorry if this is annoying but is your name a flipping JoJo reference. Nice!

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

      ​@@shivanshkumar3754 man another freaking jojo fan
      KAKATANA AHOGA! THUNDER CROSS SPLIT ATTACK!

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

      @@callgrl What is "Jojo"?

  • @KingH242
    @KingH242 4 года назад +5

    Watched this video two weeks ago and today I had to use one of these valuable nuggets. Keep learning....you never know when and where you will need to apply what you learned.

  • @JustValxntine
    @JustValxntine 4 года назад +1148

    I've never been more ashamed in the lack of my CSS knowledge.

    • @FernandoJimenez-cd1ui
      @FernandoJimenez-cd1ui 4 года назад +6

      same bro haha

    • @KingH242
      @KingH242 4 года назад +60

      Just when you think you know web development......here comes CSS with some new properties you never saw in your life

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

      same here

    • @bloodaid
      @bloodaid 4 года назад +27

      I now prodly hate every css article I've ever read.
      I used to be angry because I thought I was stupid, it turns out not only am I stupid, but every css blog author is also stupid.

    • @Draecko
      @Draecko 4 года назад +19

      You don't have to be ashamed, some of these tricks became fully supported by mobile just days ago, so consider yourself on the cutting edge here.

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

    honestly this 21 minute video saves a lot of my time ! and the vibes while you explain things make it more exciting to do ! I love this, thank you so much.

  • @osogrizz2841
    @osogrizz2841 4 года назад +41

    I once tried to explain to someone at a job fair that manually centering a button was one of my earliest proudest moments in web development. I don't think they understood.

  • @Tyrant-X6
    @Tyrant-X6 2 года назад +1

    Months ( years? ) after visionning this video, that place-items : center finally saved me in a big company project :) . Transform translate (-50%,-50%) often makes content blurry because of antialiasing and other stuffs I guess so this simple css property is way more cleaner and finally feels like "the right thing to do" ! Thanks a lot

  • @kvncnls
    @kvncnls 4 года назад +14

    Don't apologize for the titles of your layouts. You've made it a LOT easier to remember them :)

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

    I keep coming back to this video and use it as a small CSS cookbook. Thanks for the video and the tips!

  • @masongoodnight3782
    @masongoodnight3782 4 года назад +8

    This is like the holy grail of videos ever - A backend engineer

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

      This is like the holy grail of videos ever - A dude that does full-stack currently. I didn't even know any of this and I'm knee-deep in CSS at least 10 hours a week...

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

    This video is a godsend. After hours of scouring stack-overflow for continuously more convoluted solutions that don't even work properly, this video finally showed me how to actually do what I wanted properly.

  • @evoltelectrical
    @evoltelectrical 4 года назад +22

    Super informative presentation! I am with you on that aspect ratio, that would be a great addition, can't wait!

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

      What a gamechanger! My life will be much easier when that's common.

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

      Tyler Robb Well you can already set aspect ratios by using padding with a percentage (like padding-bottom: 56.25% (for 16/9)) but it's not that readable. Would be way cleaner to implement it like this

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

    I've been looking at that little happy smiling face in the recommended videos for quite a few days, but only today I got the planning to watch it and I'm glad I didn't postpone it more. That was a really cool bunch of tips that I'm going to write it down and use it right away. I may have already know the couple of flex ones, but got much more from this than I hoped for. Seriously, what a cool format and straight forward way of presenting them.

  • @danil-old-web
    @danil-old-web 4 года назад +4

    This is the best CSS tutorial I ever saw in youtube! Give me more!

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

    I've switched from doing websites back in 2008 to strickly a back-end dev. It's amazing how much things have changed and the newer CSS features. THANK YOU!!!

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

    The aspect-ratio property is definitely a life-saver in the making. Hope it will come to each browsers near soon.

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

      Won't padding-bottom: calc(9 / 16 * 100%); save your life?

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

    Hey Una,
    that Video is awesome!
    Simple, straight forward, very nailed information without talking-overhead and very useful hints.
    I bet this will save me many hours of effort in the future.
    It's the best Video I've seen about CSS-styling for a long time!

  • @domwareapps508
    @domwareapps508 4 года назад +384

    10 modern layouts in 1 line of css:
    she minify it

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

    Mind blowing, the number of lines i have to type to get this same results. Thank you very much

  • @acidfreq7
    @acidfreq7 4 года назад +72

    Absolutely smashing. Not a media query in sight. This pairs perfectly with Andy Bell's CUBE methodology. Thank you! By the way, who downvotes a wonderful video like this?

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

      google haters, who knows?

    • @hariyapa
      @hariyapa 4 года назад +6

      This is earth and all kinda creatures are found here 😂

    • @The-Great-Brindian
      @The-Great-Brindian 2 года назад

      i'm a media query guy myself tbh
      if you go the bespoke route, not using css frameworks then media queries are inevitable.

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

    I just want to say I FRACKING ENJOYED READING the website’s source code!!! Holy moly IT IS SO DAMN CLEAN even tho I’m new to web development but I was able to read it and tell what it’s doing bc your code is SUPER CLEAN!! I LOVE IT ❤️❤️

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

      I just think you’re a great developer and on top of that a great person, I work with a team full people like you!

  • @archierm
    @archierm 4 года назад +41

    You don't know how long I have been doing the ol' position:abs top:50% left:50% and finally transform:translate(-50%,-50%) to center things XD

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

      I still do the same

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

      Before watching this video, I thought this was still the modern way to do it…
      Actually, when trying out `place-items: center;`, the child is not actually centered if the parent is smaller than the child. With `translate`, it still works!

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

      It really depends on the context of the situation, the solution you use works basically 100% of the time but the place-items: center; option only works sometimes which is why I tend to stick to the same solution

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

      @@woutermissler5371 dont go for place item rather use flexbox or more better grid

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

      I just had to deal with something that may be a bug in Firefox: when centering elements with the `translate` approach, it seems that the _print preview_ still considers the extra space created by the `left` and `top` positioning, even if everything should be centered on one page; the extra space completely break the paged media layout. With the Grid centering, no extra space is created at any point, so only this works.

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

    This is literally the most helpful practical and practical css guide I've ever seen

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

    Thanks for this great tutorial! You're very good at breaking down the concepts behind the tricks. This will make my life a lot easier, since I'm currently experimenting with some frontend technologies without a lot experience in it.

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

    There are some real gems here. I'm always coming back to watch this video again and check out the demo link

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

    This video is so straight forward and well explained. Saving forever

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

    This is superb. And I thought the Array Methods Song would be a hard act to follow! I am sending this link out at the end of my React course this week as all delegates were hungry for layout- despite being there for JavaScript. Delighted to see an aspect-ratio setter finally going native after wrestling with own workaround for long enough.

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

    that centered element is what I was exactly looking for!!!! I've been so perplexed by that one!!!!

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

    This is what all web dev tutorials/training should look like. Thanks! Please make a full course on practical CSS.

  • @lachlanjcampbell
    @lachlanjcampbell 4 года назад +9

    Sooooo useful & Una is an amazing presenter. Thank you!!!

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

    who knew centering in css is now THAT easy! Brilliant video!!!

  • @RideTheTeacups
    @RideTheTeacups 4 года назад +75

    CSS aspect-ratio!!! MAKE IT HAPPEN!!! I'm so excited.

    • @patrickc.6183
      @patrickc.6183 4 года назад +2

      Same here, probably one of the most needed properties for CSS!

    • @reactoranime
      @reactoranime 4 года назад +5

      padding-bottom: 56%

    • @RideTheTeacups
      @RideTheTeacups 4 года назад +6

      Pavel Ivanov I’ve been using that (56.25%) for now. This will he so much easier, especially for other ratios.

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

      @@RideTheTeacups It's easy - for other ratios like 4/3 just use padding-bottom: calc(3 / 4 * 100%);

  • @harshithp3007
    @harshithp3007 3 года назад +2

    This 20 minutes video will save me 20 hours of writing media queries in my next project❤️

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

    As a total noob it's actually good to see that others struggle with the same things as I am struggling with.

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

    nice. Firstly thought it would not be such easy and helpful. But even with all my experience found new things and it was just pleasure to watch this video. Good job!

  • @sheldonfernandes3588
    @sheldonfernandes3588 4 года назад +5

    Nice vibes :) You are so happy and seem to have a perfect fitting job Una. And great content too.

  • @radiowallofsound
    @radiowallofsound 3 года назад +2

    this is by far the best css video I've seen, exactly what I needed.

  • @Designguidetv
    @Designguidetv 4 года назад +363

    possible to add more then 1 like? i think i missed 10 years of css updates

    • @voltcorp
      @voltcorp 4 года назад +13

      same! I was in another tab searching like "is this flexbox thing a .js that I have to call first or what"

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

      I thought I was alone. I feel less ashamed now... lol

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

      Well most browsers mobile devices still dont have the updates required to support the css she tought .........So you are all good mate LEGACY CSS is still very much CURRENT

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

    I still se many tutorials online teaching Bootstrap for maintaining a good site layout, and students relying on that heavily without knowing the advancements flex and grid has come to. Great video

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

      Yeah these methods are good for most new browser versions but for those of us stuck supporting older browsers bootstrap is super helpful.

  • @indestructible-today
    @indestructible-today 4 года назад +3

    This is both amazing and exciting.
    I learned a bunch of new techniques, thanks.

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

    Una, thanks for sharing these cool tips! Also, I wanted to let you know that you have the most pleasant voice and that I love your podcast :)

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

    Wow, I learned so much from this video. Thank you for putting it together.

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

    This is a great video! I constantly tell people to use CSS grid. It's great. And you are wonderful, you personality if perfect for videos, very cheerful and accessible.

  • @slimyelow
    @slimyelow 4 года назад +6

    Amazing stuff. I had no idea Grid could do all that! Who needs Bootstrap ??

  • @ArunSingh-vp3pu
    @ArunSingh-vp3pu 4 года назад +2

    Much appreciated, doing something so simple that other people never thought of doing it... Please keep posting these useful tips, It will help a much larger community on a global scale.
    Thanks for such a simple presentation
    cheers :)

  • @jasonlotito
    @jasonlotito 4 года назад +5

    Simple, practical, clear and concise. Love it!

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

    MOOOOOREEE! This was such a useful video packed with good information and even better explanations!

  • @eoussama
    @eoussama 4 года назад +19

    The aspect ratio one is gonna save me a lot of trouble dealing with International Paper Sizes

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

    This is one of my favorite videos, Una is an awesome presenter and teacher.

  • @swyxTV
    @swyxTV 4 года назад +64

    you are so good at this 👏 just amazing to watch

    • @MattEland
      @MattEland 4 года назад +8

      Completely agree. A natural presenter with excitement, simplicity, and deep experience.

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

      Best thing is to see how much fun she has doing that stuff

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

      I believe I saw your photo on freecodecamp.org

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

    what an incredible presentation. i have been having an issue with centering something in my portfolio and you saved the day!! so happy to have randomly found this.

  • @mountainslopes
    @mountainslopes 4 года назад +6

    This was amazing, had me smiling. So simple!

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

    i am sure i will never find a better lesson in css than this one! thanks a trillion!

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

    Woah, It's been a long time since I've seen Una, I remember using your css based Instagram filters back in the day! Really nice to see you as part of google now. 🙌

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

    Every time I think I know CSS, a video like comes along to show me new stuff and creative ways of using old stuff

  • @RobHope
    @RobHope 4 года назад +8

    Thank you Una - this was wonderfully explained and presented

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

    Thanks for sharing. I've tried some grid tuts and I like your component approach lots, lots more. Can't wait to play.
    I also can't wait until clamp is fully supported. It'll make responsive font sizing *soooo* much easier.

  • @Submersed24
    @Submersed24 4 года назад +68

    Iroh once said that you must center yourself before you center in css.

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

    Been using Flex and CSS Grid for a while now, but really found this a great review of "Modern CSS Layout Hits!", so to speak. Great presentation. It should motivate a lot of F-E and so-called fullstack devs to reconsider their over-reliance on Bootstrap, or even the modern CSS frameworks like Tailwind or Bulma. They have their place, but, really, you don't need a CSS framework to deliver a web front-end anymore.

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

    Thanks, Una, awesome as usual!!

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

    Great video!! Had to save this to watch later cos we all know I’ll forget how to implement this by the time I’m done with my web dev course. Thank you!

  • @schwarzkopfb
    @schwarzkopfb 4 года назад +16

    Who still remembers the tag?

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

      Remember it? Google still uses it on their home page. I kid you not!

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

      @@justinbennet9050 that's because they want it to display properly on EVERYTHING.

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

      Oh damn I forgot about it!

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

      This tag does not center vertically... Centering horzintally was never a real problem.

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

    Una, thank you for this content. Very helpful!

  • @boallen2645
    @boallen2645 4 года назад +84

    Who remembers rounding corners with images? >.

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

      Image slicing!

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

      I remember adding rounded corners using VML in IE!

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

      And then putting them in tables ! Good times :D

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

      @@Liath666 Oh, I remember those days.

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

      and SlidingDor for button

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

    Very helpful! I'm bookmarking this! Please never take down the demo

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

    Love the passion here!

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

    Thank you for the information. I found that your enthusiasm and presentation style made the video fun to learn.

  • @hansschenker
    @hansschenker 4 года назад +5

    My Aspct-Ratio is clamping me ! ^_^ ! - thank's a lot for publishing - cool layout possibilities!

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

    Your enthusiasm is contagious! Thank you

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

    eagerly waiting for aspect ratio to be implemented. I'm still using "padding-top" on parent and "display absolute" on child to get this done :(

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

    After doing lots of grids with tkinter in python, then saw that line and fell in love in a second! Not even started with HTML and CSS and already wanting to learn it!

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

      @@The-Great-Brindian No, argentinian! My grandparents were from Italy, nowadays i end up in Salesforce, after studying Java, but happy with the journey!

    • @The-Great-Brindian
      @The-Great-Brindian 2 года назад

      @@fiorilli1 Yeah on closer inspection I should have known/guessed, the 'Maxi' part in your first name is a strong clue. How are you getting along with your HTML/CSS learning btw ? How are you finding it ? Also what kind of UI's did you build using tkinter ? any progs I could perhaps take a look at ?

  • @aakashbhadana7340
    @aakashbhadana7340 4 года назад +296

    We are in 2020, still not able to figure out how to center things in HTML/CSS 🤣

    • @johansmolinski
      @johansmolinski 4 года назад +18

      Just put everything within a tag and you’ll be fine.

    • @maxclifford937
      @maxclifford937 4 года назад +9

      Display: flex; justify-contnet: centre; align-items: centre OR use auto margins. Also firefox is much better for working out what css doenst work.

    • @ryonagana
      @ryonagana 4 года назад +6

      @@maxclifford937 in mid 2000's i use to use float: right then move left half value of the width like
      .t {
      width: 100px;
      float: right;
      left: -50px;
      }
      this works but its a pain to align children please do not use this way

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

      @@ryonagana and there was stupid clearfix solution etc. grid and flex layouts save us a lot.

    • @zzzdan
      @zzzdan 4 года назад +18

      Pff, easy. Just keep adding   in front of the element until it's roughly in the center of your screen.

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

    Loved it, the most useful 20 minutes of CSS layout tut. Thank you and please make more videos of this kind.

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

    waiting for full aspect-ratio support!

  • @libry-toolbox3674
    @libry-toolbox3674 4 года назад +2

    Great video on layouts. Excellent link to the code. Simple to write and easy to understand.

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

    18:35 10. Respect for Aspect
    - without newer features this is currently handled by using percentage padding hacks with absolute positioned children set to 100% width & height. Where the percentage padding is the aspect ratio.

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

      i think the whole point of this feature, is to make this easy to do

    • @meneereenhoorn
      @meneereenhoorn 4 года назад +6

      ​@@thirien59 I think the whole point of @Paul Newton's response is to inform people how it's currently done, which wasn't included in the video

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

      @@thirien59 support isn't guaranteed, this is the arcana of the old ways from a less elegant age

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

    😲😲😲😲😲😲😲😲 At last someone who take care about presentation, thank so much for your explanation, whatever I am a spanish speaker, however I got these CSS tricky very clearly, congratulations for your creativily exposition

  • @andreasmou6539
    @andreasmou6539 4 года назад +16

    Where we can find that editor ? Looks super useful

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

      codepen.io

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

      1linelayouts.glitch.me/ it is the link in the description

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

      For the source glitch.com/~1linelayouts
      glitch.com/edit/#!/1linelayouts?path=README.md%3A1%3A0
      I think this UI overall is pretty useful, and it's source is pretty instructional on building your own reduced test cases for exploring layout design patterns.
      The first improvements one could make is facilitate quickly seeing common sizes and comparisons. Such as fixed header buttons to quickly set sizes of the active|all demos, or open demos in new windows at specific sizes for comparison

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

    YOU CHANGED MY LIFE. THANK YOU SO MUCHHHHHHHHHHHHHHHH!!!

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

    Una, thank you

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

    Awesome tutorial, no time wasted, straight to the point...Thanks xD

  • @quachhengtony7651
    @quachhengtony7651 4 года назад +9

    finally, i can center my fricking button

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

    this is the most useful youtube video i've watched in my whole life

  • @TECHNOLOGYFAQ
    @TECHNOLOGYFAQ 4 года назад +5

    Thanks. Very helpful.
    10:47 we can use grid-column: 1/-1;

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

    21 mins of awesome content and quick refresher for someone out there looking to prepare for interviews, but would suggest remove click bait "1 line" from description

  • @muhammadmohaiminulislam7189
    @muhammadmohaiminulislam7189 4 года назад +80

    122 dislikes!!!
    What kind of people are they?? I guess they don't like their things centered.

    • @shocked-curry-omelette
      @shocked-curry-omelette 4 года назад +17

      Maybe people who stuck having to support IE / Safari lol

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

      Maybe people who were making money of these tips and now see their income go down. lol

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

      ppl who expected to type in the terminal 'make website like facebook pls'

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

      @@shocked-curry-omelette My view on supporting IE: If it barely works, then it works.
      Safari I'll grudgingly make exceptions for, even though it's a pain. IE has used up any patience I once possessed.

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

      The reason for DISLIKES is she tought like the CSS is compatible with every browser or device .........its not .. well not yet ..

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

    Fantastic job Una, thank you for preparing these super helpful examples.

  • @00euclid
    @00euclid 4 года назад +5

    The aspect-ratio property, I want it right now. Right bloody now. God that’s convenient.

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

    I love this!! I've had many frustrating experiences trying to center simple items. This really explains layouts well!