I love helping people. I love teaching Web Development. In my lecture I use a lot of analogies to help explain some of the basic concepts. One of the most common things I find that many students struggle with is understanding when and how to use padding and margin. What if I told you that the element you are trying to style is a couch in your living room? Using HTML and CSS you state where in the living room you would like to place the couch in reference to other items you have in there. Using CSS you also move this couch around. So what in the world am I getting at?
Easy. Margin is the space around the couch. It is what keeps your couch a certain distance away from the chair and the TV stand. Now padding. See that is the fluffiness of the couch. That's all internal to the element that is the couch. In this case the border would be the fabric on the outside of the couch. It's what holds the padding in.
For some of my students picturing things this way helps give them a visual way to understand how things are behaving. Granted not every student needs these visuals, but that doesn't mean that they can't still help.
So as I can't help every new or experienced developer this past weekend I wanted to try and take my analogies and give them some visuals and publish them for the whole world to see.
BeeDev's Helper's is the site that I have started to do just this. I am sure that this will always be a work in progress. I mean why wouldn't it be. There is always another way to describe things or picture things. Right now there isn't much to the site, just a few pages but they are good pages.
It isn't mobile friendly yet either, but I will get it there. What matters is I am proud of what I have done so far, and that I won't stop adding to it.
Feel free to share the link, give suggestions on what to add or make better. I welcome the advice.
Top comments (0)