To my surprise, my daughter asked me if I would teach her how to build a web site today. She more or less wants a blog to keep track of what is going on at a recess club she made at school: regular notes, calendar, things like that.

I had her draw out on paper what she wanted to build. It was interesting to see her reinvent the concept of a blog. For example, her first iteration only showed the post from “Today.” I asked her how you would see yesterday’s post. So she add a “Today” and a “Yesterday” button. So I asked her how to see the post from last week. Her answer was approximately, “Well, they just need to keep up!” However, she eventually conceded to a “Previous” and “Next” button.

Even on one’s first encounter, it seems that it’s impossible to teach this stuff without also teaching about concessions:

Daughter: OK, here’s a picture of what I want to make (shows few buttons on top, content underneath)

Dad: (Talks about closing and opening tags, gets a word on the page)

Daughter: Make it bigger.

Dad: (adds h1 tag)

Daughter: Add the other buttons.

Dad: (adds two more h1 tags)

Daughter: Why are they not next to each other?

Dad: (mumbles about ul and li - makes them a list)

Daughter: Now they are too small again and have those dots.

Dad: We need to “style” them. Let’s remove the dots. (inlines styles: list-style-type:none;)

Daughter: OK. Now make it bigger again.

Dad: (adds font-size:50px; to the first one) There.

Daughter: What about the other ones?

Dad: How do you think we make them bigger too?

Daughter: (eventually adds inline style to other ones). Perfect! Now put them next to each other.

Dad: (adds display:inline;)

Daughter: You’re amazing! Ok, now make the background gold.

Dad: (background-color:Gold)

Daughter: That’s yellow.

Dad: Here, look at this.

Daughter: Wow, so many choices! (picks GoldenRod)

Dad: (shows how to change to that)

Daughter: Perfect! Now make the buttons this one (points to DarkTorquise)

Dad: (adds links makes them background-color:DarkTurquoise;padding: 10px;)

Daughter: OK, let’s add the main words. In a white box.

Dad: (adds div with background-color:White; and a few words)

Daughter: Why is it so small?

Dad: We need more words. (pastes Lorem Ipsum)

Daughter: (not impressed) It needs to be bigger and in the middle.

Dad: (adds padding:20px;margin-left:auto;margin-right:auto; to horizontally center content) How about that?

Daughter: Also in the middle between the top and bottom.

Dad: (sighs heavily. googles “vertical center div css” for the 100th time. reads for 7 minutes.)

Daughter: What’s wrong?

Dad: Are you sure you don’t want it near the top?