365 days of JavaScript

A year ago, I decided to start learning frontend web development. Having been a product designer for over a decade, I had reached a point where I wanted to break out of Figma and actually build the things myself. I wanted the buttons to actually do something, not just navigate to another static screen. I love designing, but learning how to implement my designs felt like the next natural step in my career.

I was under no illusion that it would be a challenge, but there have been moments where I have genuinely wondered why I'm putting myself through it. But when things work, it's a great feeling. I set myself a two-year target which was to be able to read, write and understand JavaScript code without constantly needing help. At the halfway point, there have been highs and lows, but I'm happy with the progress I've made in the last year. This is a candid reflection of the journey so far.

Why I started

Aside from the obvious benefits that understanding frontend development would bring to me professionally, the catalyst for wanting to start was a recipe app. For years now, I've been using an app called Recipe Keeper, and for the most part it's quite good. It has great features like, for example, being able to upload a photo of a recipe or link to a recipe on a website, and it will extract the metadata, ingredients, and directions. I use it regularly, but the design lets it down. It's not terrible, but it could be significantly better. At some point, I thought to myself, “I wish I could just build my own”.

The timing was particularly good because I was also working on a full product redesign at itris which bought with it a new visual language and token-based design system. A perfect opportunity to learn while doing.

The advances in AI are obviously another reason why now was a good time to start. I recognised that this could really help and grease my wheels. While I could write extensively about this, for now I'll just say this: I didn't consider how dangerously easy it would be to rely too heavily on AI throughout my learning. It is both a blessing and a curse and honestly, I'm still trying to find the right balance here.

The roadmap

Over the years I've picked up a base level of HTML and CSS, but JavaScript was the missing piece. Before diving into a framework, I first wanted to learn the fundamentals of JavaScript, so my loose roadmap was to learn enough JavaScript for React, then learn TypeScript and eventually move on to Next.js. After that, my roadmap is more blurry, but I want to dive deep into accessibility and advanced CSS patterns. I've already started with animations and I recently bought Emil Kowalski's Animations on the Web course which is really good so far.

I've also had first-hand experience of how vanilla CSS becomes unmanageable at scale, so I also wanted to explore different styling options such as Tailwind, CSS in JS and CSS Modules.

When I started, I spent the first few weeks dipping my toe in with JavaScript introductions on YouTube and looking through Reddit for suggestions of good learning resources. It wasn't long before I discovered Jonas Schmedtmann's JavaScript course on Udemy. I can't recommend it enough for beginners – the pace and structure is good, the projects are interesting, and it is really well taught. I completed this course at the end of July and moved onto his React course as well.

Around the course, I also supplemented my learning with other resources like MDN and The Odin Project, and YouTube channels like ColorCode and WebDevSimplified. Scrimba is also excellent – I took the free TypeScript course and was impressed by the interactive format.

Tutorial hell

I fell into tutorial hell pretty early on. I saw a great quote somewhere about tutorial hell:

The great thing about following a course is that it never goes wrong. The worst thing about following a course is that it never goes wrong.

It felt really good coding along with a course, but as soon as I tried to do anything on my own, I would stare at the screen, not remembering anything. I had learned the theory and seen how it should be written, but I wasn't actually retaining anything. This is when I realised I was in tutorial hell. Around that time, I read a great article by Josh W Comeau on how to learn stuff quickly, where he talks about how to balance guided and unguided learning. He talks about using a physical Leitner box to retain knowledge, and this was the inspiration for my Flashcards app.

I thought that my problem was that I didn't remember the syntax, and while that was true, the bigger problem was that I didn't have the mental models built up. JavaScript is like a huge tool box, and I didn't know what tool to use for a particular job, and more importantly, why one tool is better than another. Questions like:

• What's the difference between filter() and find()?
• Should I use map() and forEach()?
• Why would I want to use an arrow function over a declaration or expression?
• When should I prefer the bracket notation over the dot notation for property accessors?

The advice on how to get out of tutorial hell is paradoxical. You need to start building something, but you don't know how to yet. It feels counterintuitive, but it does work. When I built Flashcards, the first version was terrible, but I did it on my own without looking at tutorials or copying code. Since then, I've also built a personal finances app, which is a better way to see a breakdown of mine and my wife's monthly outgoings, savings, and financial commitments. This gave me a lot of practice with arrays, objects, functions, and DOM manipulation. I'm currently rewriting my personal finances app with React, TypeScript, Supabase and Tailwind. It's taking me longer because I want the struggle. I only seek help when I have exhausted all roads and can't work out how to unblock myself.

Time and breaks

Having a full-time job and learning something new requires a lot of time management and prioritisation and that can be quite challenging. The key is consistency and balance between doing too much and not doing enough. I try to find at least an hour every evening to learn.

In February 2025, I was laid off, and I found myself at the beginning of a long journey to get a job in a rough market. While applying for jobs, I simply didn’t have the mental capacity or energy to learn code, so I took around 2–3 months off while I prioritised the job hunt. This was really frustrating because I was starting to find my rhythm.

After receiving my offer from PandaDoc, I started learning again, fully expecting to have forgotten a lot of what I'd learned. But I found the opposite had happened. I was really surprised at how much I had retained, and more than that, concepts were clicking quicker, and I felt much more confident, and I found a fresh motivation to learn. Since then, I have found a handful of times when I have lost a bit of motivation or felt overwhelmed, and I allow myself these mental breaks to recharge. For example, when learning useEffect in React, it wasn't clicking, and I felt frustrated and demotivated, so I took a 2-week break. When I came back, I had a couple of penny-drop moments and my understanding of it improved. What I've learnt is that taking breaks is beneficial to learning, retaining knowledge and avoiding burn out.

What's next?

I’ve been enjoying learning React. Aside from rebuilding my personal finances app and I also have a React playground for practicing components. In 2026, I’ll move onto Next.js which I know is a step up from React with concepts like React Server Components and other server-side concepts, but I’m excited to start. I want to rebuild my flashcards app and personal site with MDX support.

I’m particularly looking forward to rebuilding my personal site. When I was looking for a new job, I needed to build a portfolio because I'd never had one before. Because time was a factor, I used Cursor to help me build it and fast-forward the process. It served its purpose. I didn't notice at the time, but looking back at it, it has several structural and architectural quirks that I need to address. I want to rebuild it from scratch so it can serve as my new personal site that I can treat as a maintained product. It will be my experimental playground where I can intentionally over-engineer features to learn.

A year ago, I'd never written a single line of JavaScript. Now I'm building apps with React and TypeScript. The two-year goal feels both closer and further away. Although I know so much more than I did, I still have absolutely no idea what a closure is or why I'd consciously use one. I'm excited to see where I am at the 2-year mark.