Being a front end developer, I work often with people who have never wrote code or are scared of programming. I have worked with managers, communicators, and business analysts who fall into this category. Many of the terms that are industry standards, mean nothing to them. Explaining a few key concepts has drastically improved my workflow, empowered them to ask better questions, and they feel more involved and understanding of the process.
Bob the Skeleton
I can draw a recognizable cartoon skeleton (he's named Bob). Whenever I explain HTML, CSS, or JavaScript, I often start with drawing a skeleton on a white board or piece of paper. This always gets a few laughs and makes them feel more comfortable.
HTML
Skeletons are great for explaining basic HTML. They have a head, feet, and a body. The order of the parts in a skeleton is the same order for page. I will write examples of the HTML next to that part.
<head>
<title>Skeleton explanation</title>
<head>
<body>
<header>
<h1>Bob the skeleton</h1>
</header>
<div>Shirt</div>
<p>Pants</p>
<footer>
<p>Boots</p>
</footer>
</body>
CSS
My skeletons have clothes. I will draw a t-shirt on the skeleton and give it the class .shirt. I work through basic CSS specificity and inheritance by adding other classes like .red, .long-sleeved, or .striped. I then repeat this process with pants or shorts on the skeleton.
.shirt {
background: blue;
}
.red {
background: red;
}
body .green{
background: green;
}
JavaScript
This part I act out. I am stick out my arm and wiggle it back and forth and say:
JavaScript is the muscles that make the skeleton move.
There is more bad acting and explanation depending on their questions.
Bob helps me explain how asking for new behavior (JavaScript) can take more time than changing the color of the header (CSS) because changing how muscles work is harder than changing the color of a shirt.
Caboodles
Caboodles were very popular in the 80s and 90s. They were used for storing and organizing makeup. Think of them as a pink, purple, or teal tackle box or toolbox for makeup.
I use caboodles when explaining content audits. I am a big believer in doing a content audit whenever changing a website's framework or platform. Websites often get old stale content that no one looks at or cares about. In my opinion, why move that content if it isn't needed?
The caboodle is the website in this example. Whenever moving to a new caboodle, you would take everything out of the old one and notice you have 17 Dr. Pepper Lip Smackers (scented lip gloss), five of which haven't been opened. Do you need to put all 17 in your new caboodle? Do you have room for them all? Do you even like that flavor of lip gloss anymore?
This example can easily be adapted to fishing lures (tackle box) or hand tools (tool box).
How do you like to use to explain the basics of web development to others?
Top comments (1)
This seems like a great way to explain it, both visually and "interactively". It reminds me of how I once explained relative and absolute paths, I established a comparison using real-world addresses:
If you want to go to John's house, you would go to 54th Street, number 203, 3rd floor, in New York, USA. That's absolute.
But if you are in John's house and just want to tell him to go to the kitchen, you don't say the whole address, just the relative part: Go to the kitchen.