CSS Positioning Tutorial #2 - Box Model Review

แชร์
ฝัง
  • เผยแพร่เมื่อ 13 ม.ค. 2025

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

  • @quantumdelta123
    @quantumdelta123 8 ปีที่แล้ว +56

    Thank you thank you thank you. You have no idea how much this video has impacted me right here. I took a web dev course on udemy, feeling really comfortable with some little app there and then being hand held by the instructor.
    Then I went on to replicate a site as a practice on my own without any help and bam, I can't even get the elements to line up together. I almost cried and gave up everything all together after reading the documentation and but still not understanding why things aren't working.
    I was on the verge of tears and then this video solved my problem.
    I just really want to say thank you from the bottom of my heart. I know this video just explains what seems like a really simple premise to you but for me it made a world difference.

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

      Same story mate (y). Thanks to the The Net Ninja.

    • @value_sniper4056
      @value_sniper4056 4 ปีที่แล้ว +1

      Sort of the same thing here for my IST assessment.

  • @rod5751
    @rod5751 6 ปีที่แล้ว +11

    you've distilled many hours from other videos into 5 minutes of gold.

  • @Sri-wg3ne
    @Sri-wg3ne 4 ปีที่แล้ว +3

    Man, the amazing thing is that you explained positioning so simply based on practical doubts every beginner has. Every other tutor on this subject describes positioning with no empathy.

  • @psaikumargoud2835
    @psaikumargoud2835 4 ปีที่แล้ว +5

    You should get an award for this content
    Litterly no one talked about css like this in a TH-cam video
    Thanks you so much broooo

  • @Andre-ah
    @Andre-ah 7 ปีที่แล้ว +1

    Thank you! I am doing web development for a summer project and I often get hung up with CSS doing things I'm not sure why. This video helped, and I'm looking forward to the rest!

  • @dotunn
    @dotunn 9 ปีที่แล้ว +28

    best explanation i've had on this, thanks man!

    • @NetNinja
      @NetNinja  9 ปีที่แล้ว

      +dotunn Cheers man, glad you like :)

    • @dotunn
      @dotunn 9 ปีที่แล้ว +1

      +The Net Ninja I was wondering do you have a video on divs to make layouts? I'm a newbie coder so...Thanks.

  • @ahmedshahriaradnan9919
    @ahmedshahriaradnan9919 4 ปีที่แล้ว +1

    There are channels I am indebted for my life, the neso academy, the new boston and now this

  • @Normanabutler1
    @Normanabutler1 5 ปีที่แล้ว +2

    Thank you!!!!! You have explained this perfectly!!! Made it so simple to understand!! I was ready to throw my laptop under a car I was getting so frustrated with block-sizing and positioning!!!

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

      Haha, really glad it helped :)

  • @KanagawaMarcos
    @KanagawaMarcos 7 ปีที่แล้ว +3

    DUDE, THIS TUTORIAL WAS SO SIMPLE AND SO PERFECT! Thank you so much.

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

    Ive been struggling with how to position my content and after watching this i feel relieved ... Thank you

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

    That's better teaching than all the lecturers I know so far.

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

    Fantastic reviewing content. I teach Web Design and my "Advanced" students need to watch these to brush up. Thanks.

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

      I hope they can find some use in them :)

  • @muhammadtalha9834
    @muhammadtalha9834 4 ปีที่แล้ว +3

    ThIS IS AWESOME

    • @NetNinja
      @NetNinja  4 ปีที่แล้ว +1

      I wish! :D

  • @mr.diyventor8925
    @mr.diyventor8925 5 ปีที่แล้ว +3

    *In two words: Just Awesome! Thanks man!*

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

    this is the best tutorial i've seen so far, all your tutorials are simple, easy to understand and effective specially for us beginners in web dev. cheers, insta sub..

  • @bereketmolla7125
    @bereketmolla7125 4 ปีที่แล้ว +1

    The content is on another level !
    but, man , I gotta say ur accent is so cool.

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

    Best explanation I have seen so far! Thanks mate.

  • @Charlie-hn3nw
    @Charlie-hn3nw 5 ปีที่แล้ว

    Shaun awesome videos! Keep going. This is the best explanation of the box model i have ever had.

  • @leonelleonardis9564
    @leonelleonardis9564 8 หลายเดือนก่อน

    You are a legend, mate. Greetings from Argentina.

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

    Couldn't be more clear, thanks! Just subscribed!

  • @abayganteng-dl2qn
    @abayganteng-dl2qn ปีที่แล้ว

    May god bless you my brother. It so helpful. I struggling with css and this help me a lot 🙏🏻🙏🏻🙏🏻

  • @mikenje5409
    @mikenje5409 5 ปีที่แล้ว +3

    Top top explanation. I did TreeHouse, Udemy this and that and now I only watching you and doing FreeCodeCamp..............

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

      Thanks Michael :)

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

    This video is well made in explaining about this topic, good job!

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

    One of the best channels ever on TH-cam. Loving every bit.
    How do you reload all the changes in real time... looks like you are using a server. Can you show us how to do it??

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

    sir, your tutorials are best... RESPECT!!!

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

    Awesome now only I understood Difference between block and inline-block

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

      what is the difference I don't understand yet

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

    Really great videos. Literally the best I've seen. You've taught me so much! That said, the graphic for the box model was very confusing.

  • @oskrm
    @oskrm 7 ปีที่แล้ว +4

    Nice video and very excellent series
    good thing that you are using the _live preview_

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

    Thank you very very much, NET NINJA. Thank YOU so much. I appreciate every ounce of your work on this subject matter.

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

    Very Nice and has made me clear about box model. Thanks a lot.

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

    this is wicked! got it in a second, much better than scratching my head on codecademy and reading the explanation over and over again. but codecademy is still good for the practice though. I love your tutorials and how you get to the basic fundamentals. subscribed 🤓

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

      Awesome, thanks :)

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

    Thank you! One of my good channels to follow for web dev :)
    You are really a ninja haha

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

    Are anchor elements the only elements that are inline by default?
    Great video btw, as already said one of the most clear explanations of this I've heard

  • @stepan.furman
    @stepan.furman 4 ปีที่แล้ว

    Cool! Thanks for this awesome tutorial!

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

    i can say this "Excellent" || "WOW" and thanks.

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

      Thanks :)

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

    hey mate i juste discovered your channel and I really like the way you explain things i've learned many things thanks to this playlist ( positioning ) well done your dropped some mad knowledge over there +1sub

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

      Thanks so much :)

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

      @@NetNinja keep it up bro you'll get more views and subs 🙏🙏

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

    Very nice Tutorial , Thanks a ton

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

    Wow.. you cleared my head thank you.

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

    Very informal, helped me alot! Thanks a ton!!!!

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

    Excellent and clear! Thank you!!!

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

    going through all of these today, thanks :)

  • @increment-
    @increment- 2 ปีที่แล้ว

    Thank you! Well explained!

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

      Thanks Harri, hope it was helpful :)

  • @stefania7720
    @stefania7720 7 ปีที่แล้ว +2

    Amazing, thank you so much!!!

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

      Thank you :)

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

    This is awesome!~

  • @TechnowulfTV
    @TechnowulfTV 8 หลายเดือนก่อน

    Thank you for an excellent demonstration! can I just ask, why when I added to one of the and created #only_block_this{ display:block; } it did not work? Im new with the selector behaviour so Im thinking maybe its just on my machine. :)

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

    wow good job sir thank you very much :)

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

    Thank you for your videos sensei. Question: how did take a width value in '%'. How did the width take a %value without html or body's width declared ?

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

    good one man !!

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

    obssesed with your videos

    • @Sri-wg3ne
      @Sri-wg3ne 4 ปีที่แล้ว

      Definitely. Guess you were here from HTML->CSS series. Me too, progressing towards JS.

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

    That was awesome-thanks.

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

      :D. Thanks.

  • @jelodev-j1f
    @jelodev-j1f 8 ปีที่แล้ว

    This is great! Subscribing!

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

      +Tsu Kun Thanks :D

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

    Thank you.

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

    Hi @TheNetNinja how can you select the elements's border, without write border in the css, in the preview page? ps. Your video is really good, thank you! I love also the ninja-cat effets! XD

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

    you beauty, it is gold, Thank you

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

      Awesome, glad it's helpful :)

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

    Tnhx! Clear explonation!

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

    Is the live preview/ live selection only available for Brackets? Or is it possible to do it with Atom? (like selecting different elements and the browser showing which one is selected). Thanks!

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

    Awesome

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

    Hey master, I think you once showed us how to prevent margins from collapsing. I can't remember the vid your tip was in, could you give me the link of the video or explain it to me ?

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

      Hey... I think it may have been this video - th-cam.com/video/nE9lIRbIfI0/w-d-xo.html :)

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

    thanks ninja

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

    what are your extensions that make blocks visible?

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

    awesome

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

    Hi. Good video. I have been playing with this but i still find that all of the elements margins still overlap

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

    a, p{
    margin-right: 0px;
    background: red;
    border: 2px solid red;
    display: inline-block;
    }
    even with these CSS settings, there is a little space between the two p inline-block(I am sure it is not the right margin because its value is 0 in the inspection window). How can I remove that space and what is it?

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

    Came to polish css🙂🙂❤ninja

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

    nice

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

    Good going...Can you please share the download link of your editor?

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

    may god bless you

  • @europetravelwithmijan1002
    @europetravelwithmijan1002 3 ปีที่แล้ว

    You are awesome

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

    hello brother....
    I didnt understand how your webpage work continously without refreshing on the browser ???
    can you explain plz :) thank you

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

    in 4m 08sec onwrads every frontend developers should listen

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

    what is the software name ?

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

    editor ??

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

      The name of the text editor is Brackets.

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

    What the hell is going on! Thank you dude!

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

    Thank you.