Introducing Divs and controlling them with classes and ids

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

Комментарии • 317

  • @Empower_women_suji
    @Empower_women_suji 2 года назад +53

    Best video in youtube

  • @tonygomez4085
    @tonygomez4085 Год назад +39

    Thank you very much for still keeping this video after nine years have passed. I am almost 70 years old and I have decided to learn something new for the sole purpose of keeping my mind active. It's been four weeks of a lot of effort, searches for visual resources and many hours of practice. But when I see the results I feel very happy for the dedication. At my age, many people spend their lives sitting around doing nothing, but that's not the lifestyle I've ever wanted for myself. Being retired from the USA Army and later from the public service (USPS), I can only thank you and people like you, who share your knowledge. In this way, people like me can stay mentally and physically active.

    • @QVisible
      @QVisible  Год назад +9

      Hey. One of the best comments I ever got! 👌. Thanks. Great that your learning web dev.

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

      Tony, I was about to go and watch a movie and your comment has kept me here for a bit longer! Inspiring, I hope you're doing well! Thank you!

  • @EduardoBuenoamigo
    @EduardoBuenoamigo 6 лет назад +117

    You are so calm, no irritating music, and what you do makes sense! This is what I needed. It makes it seem very basic, but it has a lot in it. I loved it! Thanks!

  • @sethseth9608
    @sethseth9608 8 месяцев назад +2

    10 years ago and still the best video I've come across. Love it

  • @VisualOverland
    @VisualOverland 8 лет назад +25

    I was seriously lost with divs in my class. Found them intimidating as the class was moving so fast. This video has made it so easy and such a good way to explain divs, class and id's in one video! Life saver! Thank you!

  • @pragtinarang
    @pragtinarang 3 года назад +9

    I loved how you built the whole thing and explained the concept. I was so easy to follow. All other videos just kept telling when to use ID and class and nothing made sense. Thank you so much!

  • @seedpartwormlimbs
    @seedpartwormlimbs 2 года назад +2

    so informative i was sitting here about to use my belt as a neck tie and greet the ceiling fan for an afternoon of black air crushing my throat now i am saved by the grace of imitation, i have inspired the current affairs in each dialect, i inspire the rotting cell

  • @odin-project
    @odin-project Год назад +2

    One of the best tutorial video i've watch. Concise and easy to understand. Thank you Q.

  • @theofficialfcq6011
    @theofficialfcq6011 Год назад +2

    Best tutorial and forever will be. (It's been 9 years)

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

    This is the best video on CSS and divs I've come across. Everything is explained simply and always demonstrated clearly, so that understanding is a no brainer. Thank you!

  • @mikes8012
    @mikes8012 Год назад +1

    Absolutely the best video I have seen on creating independent panes within html/css. Thank you.

  • @zeeshan1829-e7k
    @zeeshan1829-e7k 9 месяцев назад +1

    Thank you so much sir , here after 10 years and yes your method is still better than lot of our modern RUclips teachers

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

    8years old tutorial and it's so far the best in terms of explanation and everything. Thank you sir

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

    YOUR THE MAN. You know your good when a newbie can follow your instructions. Thanks

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

      Great comment. Thanks!

  • @Karthik-kx2xc
    @Karthik-kx2xc Год назад +4

    This 9 year old video is the best video in RUclips for me..

  • @connorpayne7324
    @connorpayne7324 2 года назад +2

    Thank you! I was working on a project and i needed alignment of the elements, this tutorial helped alot. Clear and concise.

  • @klatewilson5170
    @klatewilson5170 8 лет назад +2

    At last, I FINALLY found someone who explained the ID/Class thing so I could understand it

  • @badmashito4059
    @badmashito4059 Год назад +3

    For me this might be 9years old video..but the concepts taught in this video is crystal clear for me. Thanks a lot buddy !!

  • @TheReddzone
    @TheReddzone Год назад +1

    Thank you so much! I've been stuck for hours trying to turn my homework in, helped a lot.

  • @AgeofReason
    @AgeofReason 5 лет назад +1

    15 years of not knowing how to use div properly explained. Wow. Thank you!

  • @Zanbox8873
    @Zanbox8873 7 месяцев назад +1

    Divs are epic and very powerful. This is exactly what I needed. Thanks!

  • @ronniecyrus2279
    @ronniecyrus2279 2 года назад +1

    Best content I've seen on divs thus far. Thank u

  • @JoseMoreno-if6vs
    @JoseMoreno-if6vs Год назад +1

    What a great teacher, thanks bro for the great content. 2023 and the video makes great sense. Work appreciated 🤝🏾

  • @ratorahts
    @ratorahts Год назад +1

    Beginner here, this clears up a lot of the "unknown" in terms of grouping and classes/ Id's. Great video

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

      I'm envious. I'd love to be a beginner again!

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

    Extremely helpful. Know im late but for some reason its ALWAYS the low watched old videos that are the best

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

    Thank God for this tutorial! Finally a tutorial like this! I never understood how they use div-s instead of tables to organise and give a layout to a webpage.

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

      Great comment. Thanks 😊.

  • @SamMoussa-qd3gz
    @SamMoussa-qd3gz Год назад +1

    Thank you sir. This was a very simple video that we needed in order to get back to bare-bone basics. Than you.

  • @mooss8709
    @mooss8709 Год назад +1

    this is a gem. Best explaination ever!!!!!! thank you so much

  • @9jawarrior130
    @9jawarrior130 Год назад +1

    Clear and concise. I couldn't be more appreciative.

  • @LesterShipMirOleg1992
    @LesterShipMirOleg1992 6 лет назад +16

    Extremely informative. Appreciate your time and accurateness in helping others.

  • @studyaccount1234
    @studyaccount1234 Год назад +1

    Sir just wanted to tell you, even after 9 years . Your video is still helping beginners like me!

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

      Nice comment. That is good to know 👍. Thanks.

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

    Literally so helpful and uncomplicated. Thank you sir!

  • @Clickstartyourbusiness
    @Clickstartyourbusiness 8 лет назад +1

    Awesome demonstration to show something that had been a bit murky for a while for me and I was just sort of 'winging' it in my development projects! This was crystal clear, thank you for such a great explanation! You're a diamond mate. Much love :)

  • @carlosanaya2889
    @carlosanaya2889 2 года назад +1

    Thanks for this clear explanation. Greetings from El Salvador.

    • @QVisible
      @QVisible  2 года назад +1

      Thanks for the note. Its nice to put a location in my head that makes viewers more real!

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

    Thank you for the video, it helped to clear up the concepts of divs, classes and id's. Very grateful.

  • @Jez1963UK
    @Jez1963UK Год назад +1

    Fantastic explanation - Can't wait to check out your other videos! Thank you so much!

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

    Wow ..Thank you so much ... Super easy to learn and clearly understand. This clip really opens the CSS world of my mind

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

    u're really a good teacher ,i liked the way u did it
    thank u so much

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

    thank you, so so helpful, this is one of the best videos for understanding where and how to use the div tag appropriately

  • @Duffyy1223
    @Duffyy1223 2 года назад +2

    u so calm and relaxing I learned so much thanks

  • @itmoindrive
    @itmoindrive 7 лет назад

    Basic is best. This is one of the example of Basic Div. Carry on.

  • @Schatzliste
    @Schatzliste 9 лет назад +1

    hands down one of the best tutorials on youtube. Have you considered doing this for a living?
    Your voice is soothing and your accent cute and motivating. everything is structured in a really understandable fashion. thank you so much for this, it helped me greatly

    • @QVisible
      @QVisible  9 лет назад +2

      +Schatzliste The most feel good comment i've ever received I think! I'm going out the door ready to take on the world this Friday morning! Thanks.

  • @VikasSharma-vt4kl
    @VikasSharma-vt4kl 2 года назад +2

    Super-helpful; everything to the point!

  • @mktwatcher
    @mktwatcher 10 лет назад +2

    Thank you for taking the time to review the use of Divs ob wex. Nice job.
    You can never review the use of Divs enough.

  • @rajparmar7697
    @rajparmar7697 8 месяцев назад +1

    Nice job . Small topic video very important for the beginners. All the best 👍

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

    Best tutorial I've ever seen thank you!

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

    Cheers for the clear tutorial! Very useful. I know it's a relatively simple concept but it was giving me grief until I watched this

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

      Great comment. Thanks.

  • @letsgotoget
    @letsgotoget Год назад +1

    I watched 3time full vedio...really nice

  • @nathanwavichian2354
    @nathanwavichian2354 7 лет назад +1

    Thank you Ob Wex! very easily understood. You made coding looks friendly for novices like myself.

  • @yoyojoe5395
    @yoyojoe5395 8 лет назад

    An excellent presentation that I found was a clear, succinct, crisp explanation that has helped to lay a useful, and memorable, foundation with this aspect of my 'studies'; many thanks for sharing this. Ahmed Balfaqih, good suggestion, gets my vote also.

  • @Antagonist97
    @Antagonist97 Год назад +1

    9 year old tutorial that I've been waiting for years.

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

    Your Explanation is Amasing when you The writing the Code all and all Thank you 👍

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

    So cleanly and clearly explained 💯🔥

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

    Thank you so much and I learnt many things bro..
    Well organized..

  • @Rakesh-gj5ux
    @Rakesh-gj5ux 3 года назад +2

    Finally I learnt after so many tutorial 🙂🙂

  • @Ooopss85
    @Ooopss85 2 года назад +1

    You're really an awesome teacher

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

    good explain brother thankyou somuch , Love from India

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

    you're the best sir, thanks for such a good explanation!!! really helpful

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

    2020 and this video is still very helpful and informative thank you

  • @joshclemons6612
    @joshclemons6612 7 лет назад

    excellent video 5star review for helping me understand something that I previously didn't understand! :)

  • @ayyeyo
    @ayyeyo 2 года назад +1

    Like it. A lot learned. Much appreciation.

  • @royandescartes
    @royandescartes Год назад +1

    gotta say this is a pretty neat trick with divs

  • @plut057
    @plut057 4 года назад +88

    best tutorial lol 7 years old

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

    Wow.... Just awesome. Thank you so much

  • @savanonymous5375
    @savanonymous5375 9 лет назад +1

    very helpful keep it up,i like the way how you simplify everything

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

    Thanks mate! It really helped me a lot ...make more videos like this 😊

  • @kevfla
    @kevfla 8 лет назад

    Thank you! But how can I make the squares to be centered on the page and not left?

    • @QVisible
      @QVisible  8 лет назад +1

      On the wrapper container set margin-right and margin-left to auto and make sure there is a width set on it.
      width:510px;
      margin-left:auto;
      margin-right:auto;

    • @kevfla
      @kevfla 8 лет назад

      ob wex thank you!

  • @lscanlon9908
    @lscanlon9908 Год назад +2

    Nice!! This was a great foundation-setter for understanding divs. I am super new to web design and am working on my first website, so I am trying to understand how to arrange different sections of a webpage. I see you have a CSS Layout Introduction series! *click* :)

  • @hamidmohajir9461
    @hamidmohajir9461 7 лет назад

    Amazing and easy to the point explanation. Thank you.

  • @muhammadsuleman8771
    @muhammadsuleman8771 7 лет назад +2

    When i gave float:left then one of the hide behind the first one. And the other one comes following the downward by following previous one. They won't placed side by side? why

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

    hello, can you help me, why me css file dosnt reflect on me site? when i put colors in css

  • @VinayKumar-it1ek
    @VinayKumar-it1ek 2 года назад

    how to make that text inside div called "test" to place centre of that div?

  • @saywot9688
    @saywot9688 Год назад +1

    This has to be the best into to CSS around, and also to classes and IDs.

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

    Thanks a lot for this easy explanation..

  • @acryfoxcz1756
    @acryfoxcz1756 6 лет назад

    I have only one problem. I am making a page with links on another web page with pictures, name and description. It works but I have problem with second borderd. It's on the right side of page but I want it under first. And when I tried repair it margin:200px; and bottom orientation it move with secondary class without any reason.

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

    Great loved this tutorial exactly what I needed

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

      thanks for the comment1

  • @niteshsingh5236
    @niteshsingh5236 7 лет назад +1

    Thanks a lot. It really helped me..keep uploading.

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

    Thank you so much for posting this tutorial!

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

    question, how would i go about PLACING content inside those boxes now?

    • @QVisible
      @QVisible  Год назад +1

      If you mean showing content in the divs - then just insert content inside the element. If you mean positioning within the the the css box model applies; that is its just another container and all the usual rules apply except the dimensions are smaller. Is that helpful?

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

      @@QVisible i tried that and it appears on the outside of the element/div boxes. like outside oitside. i placed a new Test Paragraph like this just after one of those div tags in the html page and it appeared on the outside of Box 5 , not inside one of the divs

  • @pritijain1986
    @pritijain1986 6 лет назад +3

    thankyou. exactly what I was looking for

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

    Can we make buttons different colors and when you click them it changes the color of the rectangle
    Please let me know
    Thank

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

      yes. make the button from a div and change the style using javascript.

  • @sankalpporwal9646
    @sankalpporwal9646 5 лет назад +2

    Great video man
    Thanks

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

    best video so far

  • @AhmedBalfaqih
    @AhmedBalfaqih 9 лет назад +2

    Great tutorials. Keep it up. Try to come up with a complete project across a number of videos. Thank you very much.

    • @QVisible
      @QVisible  9 лет назад +1

      Great idea. It would be easier to put all parts into an overall context..

  • @notran288
    @notran288 2 года назад +2

    This video is 9yo and still better than my college classes😅

  • @racelanecentral7570
    @racelanecentral7570 2 года назад +1

    Very good tutorial!

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

    question! hod do i make another row with these so there is more squars in diffrent rows. so its 4 than 4 under and then 4 under for pictures??? thx

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

      just add more divs in the wrapper in the html and adjust the width of the wrapper to suit the number of squares you want in each row.

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

      @@QVisible I am very new, and i have no idee hehehe i am sorry! i dont know the commands and stuff

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

    awesome explanation!

  • @InsightsVisual
    @InsightsVisual Год назад +3

    How old were you 9 years ago and u were mastered in programming like now?

    • @QVisible
      @QVisible  Год назад +1

      😁 I don't know what age I was then but I still feel like Im 15 today!

  • @laurencover751
    @laurencover751 6 лет назад +1

    This was super helpful! Thank you so much!

  • @adeelzahid9622
    @adeelzahid9622 7 лет назад +2

    Good Job, Really helpful.

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

    this was so helpful! thank you!!!

  • @hk_build
    @hk_build 8 лет назад

    Nice video..
    I have one div with box within that text content..there is hover property on border of box..now when I hover on border text content shrink ing(small shift)..how to avoid shift of text....

  • @yuridork0541
    @yuridork0541 6 лет назад +1

    Thank you for the awesome tutorial!😁

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

    Masha allah: It was very helpfull to me

  • @Kumarproductions10
    @Kumarproductions10 2 года назад +1

    coz you did great work on the video, thank u for your help o7

  • @atiyer2001
    @atiyer2001 2 года назад +1

    9 years ago this was published and I'm watching now, I was just a 11y/o child back then

    • @QVisible
      @QVisible  2 года назад +1

      Evergreen !😃

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

    Can you tell how to change softal instrunt in Serum, please ?!

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

      Sorry No experience with that.

  • @thatoneguywholovesthena-4529
    @thatoneguywholovesthena-4529 2 года назад

    Just curious, since this was quite a while ago and the language probably has evolved, can you say there are now better ways to do this or things have changed at all

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

      Too big moves forward with css3 has been "grid" and "flexbox". These are fantastic advances and in many contexts replace some of what is covered in this video. Also worth nothing are sematic containers in the html standard such as "main, "aside" etc. But these are still div containers with semantic labels The items covered in this video are still an essential part to layout for Web designers. As much advanced as things have become, the general foundational structure of html and css are still the same.

  • @swallowedinthesea11
    @swallowedinthesea11 7 лет назад +1

    Very well explained! Thank you ob wex!