Learn CSS Positioning Quickly With A Real World Example

Поділитися
Вставка
  • Опубліковано 21 лис 2024

КОМЕНТАРІ • 728

  • @slayingthedragon
    @slayingthedragon  Рік тому +17

    🚨🚨🚨 New CSS Course - slayingthedragon.io 🚨🚨🚨

    • @pasikaterotv5542
      @pasikaterotv5542 8 місяців тому

      Hello sir. New fan and follower here✋ how can I fixed this code because whenever I view it portrait it is okey but when in landscape view it moves. Can you fixed it sir?
      .box1 {
      background-color: blue;
      width: 100%;
      height: 100px;
      margin: 10px;
      }
      .box2 {
      background-color: violet;
      width: 30%;
      margin:10px;
      height: 100px;
      }
      .box3 {
      background-color: green;
      width: 67%;
      height: 100px;
      margin: 10px;
      margin-top: -110px;
      margin-left: 120px;
      }
      .box4 {
      background-color: red;
      width: 100%;
      height: 100px;
      margin: 10px;
      Box Model 1




      |

  • @zeusyt4658
    @zeusyt4658 Рік тому +542

    One of the best CSS teachers I’ve seen

    • @slayingthedragon
      @slayingthedragon  Рік тому +22

      Thank you ☺️

    • @hmthanhgm
      @hmthanhgm Рік тому +8

      Exactly !!!. Thank you @slayingthedragon

    • @fizzinsoda
      @fizzinsoda Рік тому +4

      literally

    • @chocomuslim3074
      @chocomuslim3074 Рік тому +1

      TRUEEEE :D : D

    • @abhisaragarwal9084
      @abhisaragarwal9084 Рік тому +2

      @@slayingthedragon how can I improve my css skills I know the syntax but I don't know where to use which css while making a website I need to watch UA-cam video for every css any tips for it so that I can do css without UA-cam videos

  • @ogredev
    @ogredev Рік тому +294

    Man, you rock. Ive been a web dev for 15+ years and I’ve always put off mastery of css because I hated it. You’ve instructed in such a way that it takes a lot of the confusion away. Thank, you truly have a gift for teaching.

    • @slayingthedragon
      @slayingthedragon  Рік тому +17

      Thank you ☺️❤️❤️

    • @TradeWithJon
      @TradeWithJon Рік тому +5

      I can agree as well; been coding for a long time now, even got a senior role and my CSS is still bleh 😂 Thanks to this video though, it’s bought a lot of clarity to positioning

    • @mailman1021
      @mailman1021 Рік тому +2

      I thought you had to know HTML and CSS/ styling formats to be a web dev… is my self study wrong or am I stacking my resume when I only need an HTML basic? LOL

    • @danieltumanyan9782
      @danieltumanyan9782 Рік тому +1

      @@slayingthedragon Bro, how di you color the items in div wihout anything?

    • @danieltumanyan9782
      @danieltumanyan9782 Рік тому

      @@slayingthedragon wil you send that css code?

  • @miracledesign1968
    @miracledesign1968 Рік тому +3

    An absolutely time and money saving tutorial, i watched 8-9 hours of css course material, none of that made it this clear. Thank you so much...

  • @Miguelskytwins
    @Miguelskytwins Рік тому +19

    I can't believe I've just learned positioning in just a little over 8 minutes.
    Honestly man you are a legend. You have no idea how much I'm learning with your videos.
    Thank you so much!

  • @anirban12d
    @anirban12d Рік тому +16

    Gotta say bro, I have watched a lot of turorials regarding css, but none of them could make it look like a piece of cake like you do...I am glad that I found your channel. Thank you so much for making these quality tutorials for us, keep up the good work buddy.

  • @deweywsu
    @deweywsu Рік тому +17

    You are a great teacher. You don't skip steps, you move at a good pace, and you build on knowledge. Keep them coming, please!

  • @thedonner7746
    @thedonner7746 3 місяці тому +6

    3:30 I love that you actually explain what position DOES and how it works with other containers so we can REALLY understand it. underrated AF

  • @adriansandoval4617
    @adriansandoval4617 Рік тому +7

    Spent 3 hours yesterday trying to position 4 boxes three hours Are Not Going to come back in today I found this video and it was able to position 4 boxes in less than minutes 10 minutes I was struggling with flexbox and flexbox was not the key thank you so much my man

  • @ChrisMartin-i7k
    @ChrisMartin-i7k Рік тому +90

    great video, just find it a little ironic that you made a website for someone who is selling a product for building websites.

  • @williamsseyi886
    @williamsseyi886 Рік тому +9

    This guy really deserves to get a million subs rn😐, honestly one of the best teachers on here

  • @ayushagrawal8519
    @ayushagrawal8519 Рік тому +2

    That was the best explanation possible to find all over the internet for absolute, relative, fixed and sticky. LOVE YOU MAN

  • @uncleted470
    @uncleted470 8 місяців тому +1

    Yoooo! I just stumbled on this by mistake as i'm working on my html and css skills. U are absolutely and relatively the best CSS teacher.

  • @stephenmurya
    @stephenmurya Рік тому +12

    I wish I met your channel during my early days of Web dev. CSS was such a pain, but the way you explain things is just so succinct! Thank you!

  • @haritpatel5001
    @haritpatel5001 Рік тому +9

    I've never watched such detailed and on point css tutorial ever before. Great content, appropriate it a lot.

  • @YepTriedToTellYou
    @YepTriedToTellYou 9 місяців тому +1

    If anyone wants an accelerated css boot camp in just a few minutes this is the place. I’ve been coding for 28 years and this the source for css. Subscribed.

  • @Website_TV_1
    @Website_TV_1 2 місяці тому +1

    I've been struggling with CSS for a while, but your video made everything click! Thank you!

  • @person81045
    @person81045 Рік тому +2

    This guy knows his css. And he knows how to tell you what you need to know to get to mastery. I love it

  • @RanoAbduvasiqova
    @RanoAbduvasiqova Рік тому +3

    just fabulous. You can't even imagine how difficult it was for me to learn this. Most websites use some difficult language and jargons to explain.

  • @bhaimohsin
    @bhaimohsin Рік тому +3

    I'm from Pakistan and I really appreciate your teaching skills.
    A good student can not teach good.
    But a good teacher can make thousands of good students.
    Love You sir

  • @vicadajomarie1076
    @vicadajomarie1076 Рік тому +4

    Finally found a best teacher for this! Very clear and concise, thank you!

  • @maddyshorts267
    @maddyshorts267 2 місяці тому +1

    I must admit that you are a gem, and a blessing for beginners. To the point, easy to understand, practical content is the way forward and you are upto it. Great going, wish you best of luck and requests you to continue explaining topics.

  • @mutalechanda2388
    @mutalechanda2388 Рік тому +1

    I have watched a number of tutorials on positioning but never got to really understand these until I stumbled upon your video. Thanks a lot bro, you've earned my sub.

  • @tiktokspicyfyp9195
    @tiktokspicyfyp9195 Рік тому +2

    I have always struggled with css never understood it and I never found a video that explained it well and it makes sense now. I'm binge watching all your videos , bro you are my hero

  • @yatin1370
    @yatin1370 4 місяці тому +1

    I just can bow down to your mastery, simplicity and effectiveness of pouring knowledge into us. You nailed this one just like flex and grid videos. 🙏

  • @symere1529
    @symere1529 Рік тому +2

    Holy shit this is honestly not only the best programming tutorial I’ve seen but the best overall tutorial video I’ve seen on UA-cam.

  • @juanramon3223
    @juanramon3223 Рік тому +5

    BRO WHAT??? I didnt know tutorials could be so gooooood!!!
    Keep the great work dude. In zero time you will have a million subscribers. This is pure GOLD.

  • @ahtishamchaudhary436
    @ahtishamchaudhary436 10 місяців тому +1

    Bro you literally Nailed it the real life website demonstration also made the concepts to grasp easily by seeing in which situations we are likely to use position property.

  • @TheAverageTea
    @TheAverageTea 7 місяців тому +2

    that was crazy good, I cant believe I have only discovered you!!!

  • @kiwiskilled
    @kiwiskilled 23 дні тому +1

    dude that was so well explained in a short amount of time.

  • @druganov962
    @druganov962 2 місяці тому +1

    Ive been a backend web developer for about 4 years now, but i have ALWAYS struggled with frontend, recently i started tinkering with tailwindCSS and i kinda teached myself how flexbox works and absolutely love it, but you explaining this is just amazing and very understanable.

  • @covjeksirena6966
    @covjeksirena6966 Рік тому +46

    I think it would be absolutely amazing and extremely useful if you made a bigger video going through the process of making a website. No video cuts, just making a website with your commentary. That practical example would really show us how a frontend dev thinks when structuring a website. Thank you once more for these videos ❤

    • @slayingthedragon
      @slayingthedragon  Рік тому +14

      I'm finishing up a video on CSS unit, might be up tonight or tomorrow and then right after I was planning on making exactly what you're asking 😁

    • @covjeksirena6966
      @covjeksirena6966 Рік тому +3

      @@slayingthedragon Wow, thank you so much. I’m currently kinda struggling with html and css in college since it’s the first time I came into contact with it so it’s kinda hard to follow. Your videos really help. Thank you again and keep it up ❤️

    • @zettai8087
      @zettai8087 Рік тому +1

      So did he make it. Send the link if he did

    • @covjeksirena6966
      @covjeksirena6966 Рік тому

      @@zettai8087 It’s on his channel, should be one of his latest videos and is longer than usual. You should be able to find it

    • @N1rOx
      @N1rOx 11 місяців тому

      @@zettai8087 go to his channel and under videos, it's the build your own portfolio video

  • @asmmahfuz8569
    @asmmahfuz8569 Рік тому +76

    Another great tutorial. No wasted mumbling, always on point. Thanks again. I hope that you make tutorials on more complex topics such as "Pseudo Classes" and "Pseudo Elements" in the future. But instead of talking them in a single video, maybe you can go into details into 2-3 separate videos. But before that, from the general topics, maybe you can teach us about all the units such as rem, em and fr. It's a simple topic but many beginners have problem with these various units and don't know when to use which. Thank you for making things so simple for us

    • @slayingthedragon
      @slayingthedragon  Рік тому +12

      Thank you, great suggestions I'll definitely do videos on those soon. If you have more suggestions feel free to comment them, I add every video suggestions to my list of videos to make 😁🔥

    • @asmmahfuz8569
      @asmmahfuz8569 Рік тому +4

      @@slayingthedragon I usually suggest a new video once you release a new one because I don't wanna overwhelm you with suggestions. But I suggested 3 today.
      But I hope that you make multiple parts on "Pseudo Classes" and "Pseudo Elements" and expand upon them since there are so many of those and they are so important for making a web beyond basic (beginner) level.

  • @dezlymac
    @dezlymac Рік тому +14

    Just subscribed to your channel. This is honestly one of the best tutorials on UA-cam on this topic. The fact that this video has real world examples and is still only 8 minutes is insane!
    After watching this, I'm like "Why the heck was this so hard to understand before?!". Excellent video! Rock on🤘🚀

  • @BOONE.PARINYA
    @BOONE.PARINYA 3 місяці тому +1

    Hi Ramzi, thank you for creating all these free tutorials online. They’re incredibly helpful for people around the world who want to learn from home. Cheers!🙏🙏🙏

  • @AritraGuha-b8b
    @AritraGuha-b8b Рік тому +2

    Finally someone who taught so fluently. Now every concepts are cleared. Thanks man !! ♥️

  • @enehchinedu9099
    @enehchinedu9099 4 дні тому +1

    I love your content. Its so educational, just discovered your channel on time, especially now that I am taking lessons on Web Dev. Loving it❤

  • @SohaibHasan
    @SohaibHasan 2 місяці тому +1

    One of the best tutorials. Did not skip a second.

  • @zenoxdesigns1795
    @zenoxdesigns1795 6 місяців тому +3

    that's actually the best video of positioning i have ever seen clear and simple thanks man

  • @roninleo5679
    @roninleo5679 Рік тому +1

    Best of bests , you know you’re smart when you can explain something complex easily

  • @Kanakapallianurag
    @Kanakapallianurag Рік тому +1

    i usally dont comment but, you are the best teacher. direct to the point with out mumbling. everyone should learn from you.

    • @slayingthedragon
      @slayingthedragon  Рік тому

      The fact that you commented when you usually don't is, as far as I'm concerned, an honor. Thank you for the support ❤️

  • @LewisandToniaTV
    @LewisandToniaTV Рік тому +1

    Thank you for giving real-world examples of how CSS can be used. The best video I've seen

  • @guitarcrax127
    @guitarcrax127 10 місяців тому +1

    honestly the best css explainer, I literally started understanding CSS after watching your videos

  • @gokturkbuyuktuna8557
    @gokturkbuyuktuna8557 7 місяців тому +1

    The real world examples make this video absolutely incredible. Great work 🎉

  • @himanshuagarwal7925
    @himanshuagarwal7925 8 місяців тому +2

    Was so lazy to learn such basic stuff. Your presentation and explanation has helped me finally understand positions in css thank you very much 💗

  • @SamtheSWE
    @SamtheSWE Рік тому +8

    This is my first video I’ve seen on your channel and I have to say I’m quite impressed. You made CSS make much more sense than most bootcamps. Thank you for sharing your knowledge. Instant sub!

  • @collingreens7
    @collingreens7 Рік тому +2

    Just recently started a Software Dev class and the way you explain things just click instantly! Watching this video made me realize how easy it is to actually use flexboxes. Great video!

  • @KwameGyanko
    @KwameGyanko Рік тому +1

    Instant sub. Getting back into webdev after being a motion designer and i was going through the code of a website template i downloaded.
    All my confusion in some aspects has been solved by most of your videos. thank you

  • @bl7937
    @bl7937 Рік тому +1

    I’ve struggled with positioning and when to use and what to use. I must say, best video on UA-cam for explaining this topic.

  • @ethanamjad
    @ethanamjad Рік тому +6

    your way of explaining things with details is really amazing

  • @Maho2109
    @Maho2109 Рік тому +6

    Absolutely wonderful little tutorial, it's at the exact line between too easy or not explained enough, extremely useful to me to review basic CSS rules that I ended up misunderstanding or forgetting over time. Thanks a lot, keep it up! The pace, examples you've picked are great.

  • @muthi_hib
    @muthi_hib 7 місяців тому +1

    I just want to give an appreciation, thank you

  • @amishapatil9703
    @amishapatil9703 11 місяців тому +1

    I understood it so quickly! I was indifferent about css for 5 years but you made css interesting now. Thank you so much

  • @Mwtorres89
    @Mwtorres89 Рік тому +3

    Extremely well explained.. actually better than any other video I’ve seen. It clicked in me with this video!! Thanks keep it up

  • @abdelhafidachtaou2940
    @abdelhafidachtaou2940 Рік тому +1

    Your teaching pedagogy is next level. Thank you!

  • @mdzaidahmed121
    @mdzaidahmed121 Рік тому +3

    I usually don't comment in UA-cam video but .. hats-off to your content and your way of teaching ❤❤❤❤

  • @anuragdhami5968
    @anuragdhami5968 Рік тому +2

    best explanation video after wacthing many video.... now waiting for css box model

  • @kompetenzbox
    @kompetenzbox 3 місяці тому +1

    Thanks man! You made my school project stand out from the others (my teacher thought the sticky paragraph was nice). Also the z-index thing is something that I didnt know so thats cool. Definitely worth my time

  • @vedymin7
    @vedymin7 Рік тому +1

    I can't believe what a gem channel I just found :D I get goosebumps from the feeling that I finally understand

  • @kyrix8665
    @kyrix8665 10 місяців тому +1

    bro stg you helped me so much with this. im currently working as an intern for a webdesign company and they want to see how good i am before they take me in as a full time webdeveloper and this literally helped me so much to understand what they do😭

  • @mykelcee
    @mykelcee Рік тому +1

    You're one of the best tutor I have ever seen in the entire youtube planet! awesome men keep it up

  • @drixares3569
    @drixares3569 Рік тому +1

    These 4 last videos i've seen of you are seriously ones of best tutorials in the internet for learning CSS

    • @slayingthedragon
      @slayingthedragon  Рік тому

      Wow that's a HUGE compliment, thank you so much ❤❤ !!

    • @drixares3569
      @drixares3569 Рік тому +1

      I am french and i understand clearly what you're saying in these videos. I hope you will continue de share some nice tutorials like this ;)

    • @slayingthedragon
      @slayingthedragon  Рік тому

      @@drixares3569 I'm french too, well french Canadian ☺️

    • @slayingthedragon
      @slayingthedragon  Рік тому

      @@drixares3569 Oh you have a brawlhalla banner, I'm like 1 win away from diamond !

    • @drixares3569
      @drixares3569 Рік тому +1

      @@slayingthedragon yeah but i don't play Brawlhalla anymore and my banner is very old. I was 2200 elo last time i played ranked in 1s

  • @methanesulfonic
    @methanesulfonic 9 місяців тому +1

    You and Kevin Powell are one of the best css teacher out here in youtube🙏 I cant thank you guys enough for this

  • @adalbertojosebrasaca9697
    @adalbertojosebrasaca9697 Рік тому +1

    I believe this is the best explanation about positioning elements using CSS that I've ever seen. Awesome !!! 👌👌👌

  • @generationshub
    @generationshub Рік тому +1

    Wow - What a tutorial
    To the point
    Less word used
    Very well structured
    Excellent

  • @Saffrox
    @Saffrox 3 місяці тому +1

    Thank you so much for this - very helpful, clear & concise.

  • @Wraith0100
    @Wraith0100 7 місяців тому +1

    This is an amazing tutorial!
    Showing how it works and how other elements affect it, then how you implemented it on the website

  • @caioartus
    @caioartus 4 місяці тому +1

    First video where I actually got it. And the real world examples are just exellent.

  • @vlnsrikanth3242
    @vlnsrikanth3242 Рік тому +2

    Sir!!
    You are Awesome and nailed it!. No words to praise for your way of teaching in such a crystal clear manner. I think UI freshers will be blessed after watching your explanations.

  • @renealbrechtsen9743
    @renealbrechtsen9743 Рік тому +2

    Where have you been all my semester ? Your videos are incredibly helpful

  • @danya1667
    @danya1667 Рік тому +1

    Bro you explain css styling so well. Thank you for the concise explanations.

  • @kamdanibwp
    @kamdanibwp Рік тому +3

    I thought i knew the position property well, but honestly i came to know some concepts now by seeing your video...
    Once again many many many thanks for all the hard work of yours in creating this video...

  • @facucu5957
    @facucu5957 Рік тому +1

    You are the best css teacher I´ve ever seen, thanks for making this video.

  • @CodingCopilotYT
    @CodingCopilotYT Рік тому +1

    one more underrated channel, you deserve more my friend, great work keep it up!

  • @kathfennemore1131
    @kathfennemore1131 Рік тому +1

    This is brilliant. I'm trying to self teach from scratch and I'm trying to put together a website with some buttons. Been battling to position them for ages and this just simplifies it so nicely!

  • @sojimotive7166
    @sojimotive7166 Рік тому +1

    Man, I just got home thinking how to fix my top nav bar and got this video into my recommendation, I got to say that you teach absolutely fantastic! +1 subscriber

  • @jx2pd
    @jx2pd Рік тому +1

    The best CSS positioning tutorial I've ever seen! Thanks a lot! Great job man

  • @d.o.nmuzic3802
    @d.o.nmuzic3802 Рік тому +3

    I’m really liking your videos.
    Thorough explanation, clear examples and easy to understand use cases.
    Thank you 🙏🏾

  • @obaro-q1m
    @obaro-q1m 10 місяців тому +1

    you are indeed good in your craft.
    you have helped me get clarity on some subjects in css, thank you.

  • @CaioCromos
    @CaioCromos 5 місяців тому +1

    i been tryingto understand the position property for a while now. i read the css documentation, but i couldnt quite get it.
    your tutorial not only made me understand, but also gave me a bunch of new ideas to try! thanks!

  • @Squilzz_
    @Squilzz_ Рік тому +1

    Holy flippin heck how has this video not been recommended to me before. THANK YYOOOOUUUUUUUU

  • @cutiehammy3566
    @cutiehammy3566 Рік тому +1

    Out of many tutorials out there, this one is the best ngl

  • @madamadalin645
    @madamadalin645 Рік тому +1

    The way you explain is so well done! Congrats for being a good teacher

  • @osoblwqeilow5817
    @osoblwqeilow5817 Рік тому +1

    Stressing about this for a whole day then watched this video 😀 thx bro :)

  • @LD9_YT
    @LD9_YT 8 місяців тому +1

    very underrated, the best css teacher in youtube

  • @Marceloamado1998
    @Marceloamado1998 6 місяців тому +1

    Your content is very well put and exposed in a concise way thank you for teaching your knowledge with us!

  • @locolalo1364
    @locolalo1364 Рік тому +1

    I watched this video three times a day for two weeks straight. now i've learned this by heart. thanks brother.

  • @mk002
    @mk002 9 місяців тому +1

    bro really called footer the "bottom-header". haha excellent way of teaching. Thank you!

  • @SandhyaB-ve5xs
    @SandhyaB-ve5xs Рік тому +1

    Thank you so much for a clear and precised tutorial on CSS positioning.

  • @basseyoliver3972
    @basseyoliver3972 Рік тому +1

    Wow!
    Learnt a whole lots of new techniques here. Been confused of certain properties and values but have been clarified. Thanks Sir!

  • @ZyzzJamer
    @ZyzzJamer 7 місяців тому +1

    this was my first video i watched from your channel and i think you deserve more support

  • @JorgesTales
    @JorgesTales Рік тому +1

    UNDERATED, MANS NOT GETTING NEARLY AS MUCH CREDIT AS HE DESERVES

  • @olerban5204
    @olerban5204 10 місяців тому +1

    You are doing this stuff in an amazing way dude. You actually helped me a lot. I don't know it this is the thing that makes you happy, but you do help people. Continue like that mate!

  • @diudude288
    @diudude288 Рік тому +2

    Absolutely stunning way to explain.. Huge appreciation brother. We want more of these.

  • @EmC5133
    @EmC5133 3 місяці тому +1

    Bro this dead*ss changed the way i look at objects and positioning in css, awesome video!👍

  • @mailman1021
    @mailman1021 Рік тому +2

    As someone who is about 2 months into learning front end web dev, I wish I would have seen this week one. Sooo much valuable information in a straight forward and simple explanation. Way better than any other word vomit babbling UA-camr “influencer” out there. You get a like and sub from me my friend.

  • @lev5679
    @lev5679 Рік тому +1

    I have picked up a lot from this video, not just about positioning but also minor details like overflow x and such. Please keep on making great contents

  • @sagarbharati1438
    @sagarbharati1438 Рік тому +1

    This is what called the modern way to learn . Waaw just Waaw . You deserve not million but billion subscribers

  • @peterhuang1431
    @peterhuang1431 Рік тому +1

    I really LOVE these short videos of learning. clear and simple. LOVE IT

    • @slayingthedragon
      @slayingthedragon  Рік тому

      Thanks ☺️

    • @peterhuang1431
      @peterhuang1431 Рік тому +1

      @@slayingthedragon I would also love to see you teach us to build 1 project with mobile layout 1st and using flexbox only. I dont see much of those on youtube and so much teachings are from full then @media into small and backwards.

  • @StephenPasco
    @StephenPasco Рік тому +1

    You have a knack for teaching. Great use of examples. Keep making videos.