Five Lessons From Teaching Someone CSS

When a friend asked me to teach her to code, I started the same way I had a dozen years earlier: with HTML, CSS, and a few forked Pens on CodePen. What I expected to be a one-way transfer of knowledge turned out to be a refresher course for me, too. Teaching a complete beginner forced me to reconsider habits I had stopped questioning. Here are the five most useful things it taught me.

Don’t Start With an Empty Box

My first instinct was to teach layout — the old discipline of floats, margins, padding, and positioning. It failed fast. Trying to explain how to center an empty box on a screen is uninspiring, and it immediately raises questions that have nothing to do with positioning: How do you change colors? Can it change shape when you hover over it? What fonts can you even use on the web?

I scrapped the 12-column grid plan. Instead, we pulled up a named color chart and started editing a forked Pen of a familiar logo. A few small CSS tweaks later, my friend had taken something recognizable and made it her own:

<a class="container" href="https://netlify.com" target="_blank"> 
  <div class="logo">
    <div class="uno"></div>
    <div class="dos"></div>
    <div class="tres"></div>
  </div>
  <div class="name">Prettier</div>
</a>

Then we modified a few simple declarations:

body {
  background: #F9F2DB;
  color: #092935;
  font-size: 50px;
}


a {
  color: #092935;
}


.logo .uno, .dos, .tres {
  background: #C61561;
}

.logo .dos {
  box-shadow: 0 0 20px #F9F2DB;
}

.logo::before {
  background: #F9F2DB;
}


.name {
  letter-spacing: 8px;
}

Within minutes she was hooked — not because of clever layout logic, but because a few lines of code made something familiar look completely different. We opened well-known sites in the browser and changed text and background colors live via DevTools. That was the moment it clicked.

Lesson: Don’t begin by building something from scratch. Play with what’s already out there.

Comments Are a Habit Worth Relearning

An early question came out of left field: why do some lines of CSS start with /* and end with */? That shifted our focus to comments, and it made me look hard at my own code.

I thought I commented diligently. Watching a beginner comment everything made it clear I didn’t. How many times had I looked back at my own JavaScript and wished I had left a note about what I was doing? A ten-second comment might have saved me five minutes or more later. It’s the kind of friction that adds up across a project.

Lesson: Comment more.

Positioning Without a Framework Is Worth Practicing

We tried some basic HTML next. It was a slog at first — raw markup doesn’t do anything interesting until your eye understands what it's for. If you teach this, take the advice I eventually took: don’t position empty <div> elements with 1-pixel borders. Put something worth looking at inside them.

We moved to Flexbox, skipping CSS Grid for the moment. Grid tutorials tend to assume you already know Flexbox, and my friend preferred to start with the simpler model.

Here is the uncomfortable part. I am so comfortable with UI frameworks, Bootstrap in particular, that I rarely write Flexbox from scratch anymore. I know how it works and remember most of the declarations, but I still don’t hand-code it. Reflecting on that, I remembered a recent project with two pages where I pulled in Bootstrap out of pure habit. It didn't need it.

Lesson: For a small project, skip the framework and code positioning from scratch. You’ll get a lighter, faster result and it’s far more satisfying.

Typography Stops Atrophy

Type is a discipline I care about, and working with strong designers has sharpened my sense of how line-height and letter-spacing lift a design. But when I tried to impress those nuances on my student, she only cared about one thing at first: the sheer number of available web fonts. There are so many choices now that services and foundries can serve custom type fast, with little impact on load times.

That experience exposed a blind spot. Designers and front-end developers tend to fall back on a short list of known fonts — Roboto and Open Sans in particular — because they are easy to implement and dependable. Exploring type alongside someone new pushed me beyond those staples. Now I am actively looking for new pairings, watching how they perform on screen, and paying attention to how they shape the whole design.

Lesson: Keep up to date with type.

Play Time Is the Point

Things were still fairly static until we stumbled onto :hover. That was an instant hook. Hover effects add interaction with almost no effort, making them perfect for a newcomer. Scaling an object, turning a square into a circle, showing and hiding content — these are all trivial enough to reward experimentation rather than frustrate it.

More importantly, messing around opens questions like “What if I just do this?” — something many of us rarely get to ask in day-to-day work, where we have defined designs to implement and little room to explore.

Lesson: Make time to play. Being asked “how do you make this thing do that?” pushed me to catch up on newer CSS techniques and then apply them on the job.

Relearn the Basics by Teaching Them

The biggest realization was that I rarely write code from scratch anymore. Code snippets and autocomplete save hours, but they also let me forget fundamentals I should know cold. Teaching someone — even fifteen minutes at a time — improved my own coding and opened my eyes to ideas I hadn’t otherwise considered.

As for my friend: she was so taken with CSS that she started an online course covering HTML. It no longer looks boring now that she knows what it can do.