Teaching the Box Model to beginners

[PamVanLonden]

I’ve designed a diagram to help beginning college students learn the box model.

What else does the diagram need?

[Jerba]

I like the idea and I see all the functionality is there, but as a college student myself I feel the design is a little bland try spice it up a little and make it look more aesthetically pleasing and maybe animate it slightly.

EDIT: Also, when you hover below the lorum ipsem paragraph and move the cursor it makes the entire div flicker.

[__]

What else does the diagram need?

kittehz

I would explicitly label the Content area.

Also,

background colors display behind images which display behind content.

should be

background colors display behind background images which display behind content.

Make sure you teach them about border-box vs content-box : )
You could create a whole presentation about it, titled “Things Internet Explorer Got Right”!

[nixnerd]

kittehz iz in yur box model makun naps

Ha ha ha.

“Things Internet Explorer Got Right”!

@traq What’s up with that glitch-tastic ‘s’? Did you use Zalgo? I can’t replicate it via copy and paste.

Edit: If you don’t put that kitteh in the jokes thread, I will.

[nixnerd]

I̡͕̫̖̩̳̟ͤ͋͌̾̌͒̆͠’̩̻̯̤͍͖̳͌͌ͥ͆̾̈ͬ̾̃͜͝m̴̱̌ͧͦ̿̐ͧ̀͡ ̊͆̑̑̾҉̷̝̖̜̺s̥̓̇̒̀̕o̠̳̔́̿͜ ͤ͆̄̃̕҉̜̳̦̰̩̺̼̥g̹̱͖̯͕͕̘̬ͣͩ̓ͫ͋̅̈́̀̚̕l̹̲̜̮̐ͭͨ̌ͩ̾̚͟ĭ̹̹͉͍̈́̓͝t̜͓̺͈̹̪̑ͭ̀͌̌͌c̡̩̟̫͍̼̦̔ͭ͒͜h̨̹̟͖̝̺ͦ̾̏̀͝-̡̼͈͔̒͗ͭ͊͘t͎͈̬̞͓̞̖̖ͨ̿̏ͭ͑ā̧̘͕̫̣̓̀̕ş͇̯̳͎̓̔̂̿̾ͨͤ̽͘͠t̻̔͌̃̆̀͡ǐ͕̰̆ͤ̂̅̿̉̑ͩ͝͝c̼̰͇̣͍̱̃ ̬̣̳̣̼͍̪̙͈ͫͩ̄̌̆͌̇̇r͉̗͕̾̌͟į̩͓̣̜͉̘͚̹̜̇̀ͦ̿ͫͪͭ̀g̴̳͉̳ͣͦ̔́͢͡h͙̫̫̰̭̹̗͖̥͆̈͂̒̓̑̏ṯ̸̢̌ͣ̎̈́ ̰͕͍̊̌́̀͑̓ͪ͘͟͟n̗͚͔͓̦͕̦̒̐ͨ̀̚͟ͅỏ̫͖͔̹̼̜̖ͥ̂̉̓w̛̮̩̥̝̬͍͐͛ͬͥ̚͢.̣̼͔̭̄͘͢ͅ

[Jerba]

I threw something together which demonstrates the box model. I can send you the markup if you’re interested, however, it’s not particularly interactive as of now… But it’s nothing a few hover states and transitions can’t fix!

http://i.imgur.com/OPwNJwe.png

[Author]

Posts