Learn CSS Positioning Quickly With A Real World Example

Sdílet
Vložit
  • čas přidán 18. 05. 2024
  • 🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
    Discord - / discord
    Source: github.com/RamziBach/Learn-CS...
    0:00 Absolute
    4:31 Static & Relative
    5:57 Fixed & Sticky
  • Věda a technologie

Komentáře • 644

  • @slayingthedragon
    @slayingthedragon  Před 7 měsíci +8

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

    • @pasikaterotv5542
      @pasikaterotv5542 Před 2 měsíci

      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 Před rokem +463

    One of the best CSS teachers I’ve seen

    • @slayingthedragon
      @slayingthedragon  Před rokem +19

      Thank you ☺️

    • @hmthanhgm
      @hmthanhgm Před rokem +7

      Exactly !!!. Thank you @slayingthedragon

    • @fizzinsoda
      @fizzinsoda Před rokem +4

      literally

    • @chocomuslim3074
      @chocomuslim3074 Před rokem +1

      TRUEEEE :D : D

    • @abhisaragarwal9084
      @abhisaragarwal9084 Před rokem +1

      @@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 CZcams video for every css any tips for it so that I can do css without CZcams videos

  • @ogredev
    @ogredev Před rokem +237

    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  Před rokem +11

      Thank you ☺️❤️❤️

    • @TradeWithJon
      @TradeWithJon Před 10 měsíci +3

      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 Před 7 měsíci

      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 Před 6 měsíci +1

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

    • @danieltumanyan9782
      @danieltumanyan9782 Před 6 měsíci

      @@slayingthedragon wil you send that css code?

  • @haritpatel5001
    @haritpatel5001 Před 11 měsíci +7

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

  • @deweywsu
    @deweywsu Před 11 měsíci +12

    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!

  • @stephenmurya
    @stephenmurya Před rokem +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!

  • @Maho2109
    @Maho2109 Před 10 měsíci +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.

  • @dezlymac
    @dezlymac Před 7 měsíci +10

    Just subscribed to your channel. This is honestly one of the best tutorials on CZcams 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🤘🚀

  • @Miguelskytwins
    @Miguelskytwins Před rokem +13

    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!

  • @collingreens7
    @collingreens7 Před rokem +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!

  • @vicadajomarie1076
    @vicadajomarie1076 Před 7 měsíci +4

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

  • @ethanamjad
    @ethanamjad Před rokem +6

    your way of explaining things with details is really amazing

  • @ayushagrawal8519
    @ayushagrawal8519 Před 8 měsíci +2

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

  • @tiktokspicyfyp9195
    @tiktokspicyfyp9195 Před 11 měsíci +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

  • @madamadalin645
    @madamadalin645 Před rokem +1

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

  • @mutalechanda2388
    @mutalechanda2388 Před 8 měsíci +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.

  • @adriansandoval4617
    @adriansandoval4617 Před rokem +4

    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

  • @greysquid1432
    @greysquid1432 Před 8 měsíci +2

    ❤ clear and concise video! Thanks!

  • @0xTRellyx0
    @0xTRellyx0 Před 2 měsíci +1

    This is fantastically explained. Thank you!

  • @SamtheSWE
    @SamtheSWE Před rokem +7

    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!

  • @Mwtorres89
    @Mwtorres89 Před 11 měsíci +3

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

  • @miracledesign1968
    @miracledesign1968 Před 6 měsíci +1

    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...

  • @jx2pd
    @jx2pd Před 8 měsíci +1

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

  • @mihalore
    @mihalore Před 8 měsíci +1

    you make CSS seem so easy, thank you for the video!

  • @diudude288
    @diudude288 Před rokem +2

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

  • @jphearson
    @jphearson Před rokem +1

    Glad I found your channel. You make it much easier to understand.

  • @williamsseyi886
    @williamsseyi886 Před 11 měsíci +7

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

  • @user-vo2sk7lt6b
    @user-vo2sk7lt6b Před 5 měsíci +2

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

  • @someoneyouveneverheardof
    @someoneyouveneverheardof Před 9 měsíci +2

    Man this was so helpful! Thanks!!

  • @amishapatil9703
    @amishapatil9703 Před 5 měsíci +1

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

  • @abdelhafidachtaou2940
    @abdelhafidachtaou2940 Před 10 měsíci +1

    Your teaching pedagogy is next level. Thank you!

  • @anirban12d
    @anirban12d Před rokem +12

    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.

  • @kathfennemore1131
    @kathfennemore1131 Před 7 měsíci +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!

  • @zenoxdesigns1795
    @zenoxdesigns1795 Před 7 dny +2

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

  • @asmmahfuz8569
    @asmmahfuz8569 Před rokem +73

    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  Před rokem +11

      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 Před rokem +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.

  • @danya1667
    @danya1667 Před rokem +1

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

  • @amityadav-np1rk
    @amityadav-np1rk Před 7 měsíci +1

    Man, you’re a legend !!

  • @facucu5957
    @facucu5957 Před rokem +1

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

  • @basseyoliver3972
    @basseyoliver3972 Před rokem +1

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

  • @vitorribeiro2002
    @vitorribeiro2002 Před 9 měsíci +2

    Thanks, dude! Very nice crash course

  • @vedymin7
    @vedymin7 Před rokem +1

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

  • @hertechera
    @hertechera Před 9 měsíci +1

    This is such a great way of teaching. Thank you for the real-life example.

  • @dikymiso
    @dikymiso Před rokem +1

    Fast&easy tutorial, amazing work. Keep it up.

  • @shrishkumar8158
    @shrishkumar8158 Před 11 měsíci +2

    I really needed this video very much. Thanks for your hard work.

  • @zandemon
    @zandemon Před měsícem +1

    This video totally boosted my css game, thank you.

  • @nakoskyranos4080
    @nakoskyranos4080 Před 10 měsíci +1

    these are the best css videos on youtube! thanks!😊

  • @Manki96728
    @Manki96728 Před 3 měsíci +1

    One of the best videos i've seen so far, keep it up

  • @SandhyaB-ve5xs
    @SandhyaB-ve5xs Před 7 měsíci +1

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

  • @locolalo1364
    @locolalo1364 Před rokem +1

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

  • @kossylazy2730
    @kossylazy2730 Před rokem +1

    thank you for your work ,we need more of your amazing tutorials

  • @bogdanmiron4238
    @bogdanmiron4238 Před 3 měsíci +1

    No words, besides Thanks and golden tutorial! awesome

  • @durodolavictor5635
    @durodolavictor5635 Před rokem +1

    Amazing video bruv! Brilliant work. Keep it up.

  • @berbudy
    @berbudy Před rokem +1

    You are the guy I have been looking for, amazing presentation

  • @cutiehammy3566
    @cutiehammy3566 Před rokem +1

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

  • @mykelcee
    @mykelcee Před 5 měsíci +1

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

  • @LewisandToniaTV
    @LewisandToniaTV Před 9 měsíci +1

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

  • @AnthonyMolina-fh1gt
    @AnthonyMolina-fh1gt Před 6 měsíci +1

    you the goat bro thank you for all your hard work

  • @MattBiddick
    @MattBiddick Před 10 měsíci +1

    Clean, clear & concise. Bravo 👏

  • @piyaphongklanmor7873
    @piyaphongklanmor7873 Před 8 měsíci +1

    one of the best explanation ever!

  • @mertcangurcan8752
    @mertcangurcan8752 Před 8 měsíci +1

    this is beyond amazing. tysm. I was so confused with positions

  • @user-rq2ek3he9w
    @user-rq2ek3he9w Před 4 měsíci +1

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

  • @StephenPasco
    @StephenPasco Před 10 měsíci +1

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

  • @akifodul8473
    @akifodul8473 Před 10 měsíci +1

    I have learn a lot more than I expected so thank you.

  • @CodingCopilotYT
    @CodingCopilotYT Před 11 měsíci +1

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

  • @vlnsrikanth3242
    @vlnsrikanth3242 Před rokem +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.

  • @theanimators8202
    @theanimators8202 Před měsícem +2

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

  • @user-ko3kg1eu7f
    @user-ko3kg1eu7f Před 10 měsíci +2

    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.

  • @Jcmacielh
    @Jcmacielh Před 7 měsíci +1

    Your videos are just majestic

  • @darkbluebossa
    @darkbluebossa Před 7 měsíci +1

    Real cool. Love these real world examples.

  • @adalbertojosebrasaca9697
    @adalbertojosebrasaca9697 Před 8 měsíci +1

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

  • @lev5679
    @lev5679 Před 5 měsíci +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

  • @user-ej3dv8ks6p
    @user-ej3dv8ks6p Před 8 měsíci +1

    Amazing and just sensational !! ❤❤

  • @tawhidkhondakar731
    @tawhidkhondakar731 Před 9 měsíci +1

    Thank you so much. Very nicely elaborated

  • @gokturkbuyuktuna8557
    @gokturkbuyuktuna8557 Před měsícem +1

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

  • @d.o.nmuzic3802
    @d.o.nmuzic3802 Před rokem +3

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

  • @heidizhang4348
    @heidizhang4348 Před rokem +2

    Thank you for the video! Very helpful to understand this topic.

  • @covjeksirena6966
    @covjeksirena6966 Před rokem +45

    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  Před rokem +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 Před rokem +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 Před 8 měsíci +1

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

    • @covjeksirena6966
      @covjeksirena6966 Před 8 měsíci

      @@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 Před 5 měsíci

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

  • @maxwellalexander6474
    @maxwellalexander6474 Před rokem +1

    I love the way how you explain. You make easy to understand.

  • @damilolasalako4051
    @damilolasalako4051 Před měsícem +2

    beautiful... thanks for this

  • @nikolapuzovic6929
    @nikolapuzovic6929 Před rokem +1

    Best explanation i found, simple fast and easy to understand. Great teaching skills.

  • @sergio_saad
    @sergio_saad Před 9 měsíci +1

    again, just impressive this class. Man, you`re different. just perfect

  • @uncleted470
    @uncleted470 Před 2 měsíci +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.

  • @ebbsonline2780
    @ebbsonline2780 Před rokem +1

    This tutorial is too good. I just understood everything without hesitation. Thumbs up bro 👍 👏

  • @kilian5932
    @kilian5932 Před 9 měsíci +1

    Such a good tutorial, PLEASE KEEP UPLOADING

  • @broadshare
    @broadshare Před rokem +1

    Your teaching is amazing, very comprehensive

  • @kamdanibwp
    @kamdanibwp Před rokem +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...

  • @Hufi6
    @Hufi6 Před 6 měsíci +1

    Thank you, I found it extremely helpful! I like your explanations and the examples you showed. Great one!

  • @Shadow-wo4yx
    @Shadow-wo4yx Před měsícem +1

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

  • @cleyannotfound1744
    @cleyannotfound1744 Před 8 měsíci +1

    Thank you so much, i was struggling with that but now i understand it very well !

  • @haruru5082
    @haruru5082 Před rokem +3

    Thank you very much for putting this video, you managed to give us so much information and knowledge in very simple and easy to understand way. Can’t wait for more videos from you, have a great day! ❤🌸

  • @guitarcrax127
    @guitarcrax127 Před 4 měsíci +1

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

  • @nexus2056
    @nexus2056 Před rokem +1

    You're amazing man, dev=finitely one of the best CSS tutorials on YT. Keep up the good work 🔥

  • @richochet
    @richochet Před 7 měsíci +1

    This is brilliant, thank you. If only there was someone like this style for JavaScript 🙏🏼

  • @bl7937
    @bl7937 Před 8 měsíci +1

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

  • @royandescartes
    @royandescartes Před rokem +1

    wow. just wow. i am in shock at how you made me understand this. thank you . i got so much more to learn.

  • @giuseppemarziale9071
    @giuseppemarziale9071 Před měsícem +1

    tutorial very very clean , all in to positions in less minutes

  • @athira2023
    @athira2023 Před rokem +1

    Great tutorial with simple explanation.Expecting more. ❤️

  • @dbzdbz-ol1et
    @dbzdbz-ol1et Před 3 měsíci +1

    great content. Enrolled to the CSS course. Thanks for your time and efforts..

  • @KwameGyanko
    @KwameGyanko Před 9 měsíci +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

  • @ahtishamchaudhary436
    @ahtishamchaudhary436 Před 3 měsíci +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.