Learning Log

Progress notes from a self-taught designer

12 day streak

I keep this log so I can see my own progress. Every week or two I write down what I learned, how long it took, and how confident I feel. Seeing the little bars move is what keeps me going.

How to use this template: open index.html in Notepad and replace the journal entries and skill names with your own. The colours and spacing live in style.css, which sits beside it. Each progress bar is a plain box, and the coloured part is just a width set in the HTML — change that number to move the bar.

Recent entries

18Jun 2026

Flexbox finally clicked

I stopped memorising properties and started asking one question: which box is the parent, and which direction does it flow? Once I saw rows and columns that way, centring things became almost boring.

  • CSS
  • Layout

11Jun 2026

Cutting my stylesheet in half

My file had grown to 500 lines of near-duplicates. I grouped the repeated colours at the top, deleted everything I was not using, and ended up with something I could actually read.

  • CSS
  • Habits

04Jun 2026

Building progress bars with two boxes

A track and a fill. The track is a grey rounded rectangle, the fill is the same shape with a colour and a width. No JavaScript needed — which surprised me more than it should have.

  • CSS
  • UI

28May 2026

Why all my headings looked the same

I had never given them a scale. Now I set one size for each level and leave a little more space above than below, so a heading clearly belongs to the text underneath it.

  • Typography
  • Design

20May 2026

Starting again with a simple reset

Browsers each bring their own spacing. Clearing the default margins at the top of the file means my page looks the same everywhere, and I stop chasing gaps I did not create.

  • CSS
  • Basics