I recently reread Peak by Anders Ericsson, which is the source of the term “Deliberate Practice” that was popularized by Malcom Gladwell’s “10,000 hours”. The truth is more complicated, and I highly recommend reading both Peak and Kathy Sierra’s Badass, which deep dives on the practicalities of gaining expertise.

I wrote some thoughts on applying deliberate practice to learning how to code a couple of years ago. Looking that over, I was very focussed on what I thought you should do, which was to turn vague descriptions into code (not transcribe code tutorials). I had not remembered another important point, though. One purpose of the training is to help build a mental representation that makes it easier to do the task.

One of the mental representations I have is that UI layouts are primarily about nested rectangles and the relationships of their sizes and positions to each other.

If I were learning to code HTML/CSS now, I would try to learn this first and only make pages of different colored rectangles in common layouts. I would try to limit CSS to just the layout attributes and the HTML to just <div> and maybe just enough to see the layout.

Next, I would add the concept of invisible rectangles that are just helping with the relationships.

Next, we could explore media query breakpoints and other responsive features of web coding.

Only then, would I attempt to make “real” pages. And, I would start with getting the layout done first.

The key is to identify the mental representation that helps to do the harder task and to break it down to a simple task that you drill over and over to make it automatic.