This post is an overview of the process of building the website you're looking at right now. My goal is to show how actually creating something can be a great learning experience for those trying to learn how to code.

Goals

These three factors motivated me to begin building this website in the summer of 2022:

• I wanted to improve my knowledge of Hygraph - the product I'm responsible for;
• I wanted to improve my knowledge of the developer experience as a whole, as well as my coding skills;
• I had a stale and abandoned tiny Telegram blog that I constantly wanted to get back to but never did.

Starting point

I had a pretty good command of HTML, CSS and GraphQL developed at work and a few online classes. At the same time, my JavaScript level was elementary at best - I knew the very basics of the language but wouldn't write a working function if my life depended on it.

Process

The key impulse to start was discovering the JS Mastery YouTube tutorial titled Build and Deploy THE BEST Modern Blog App with React | GraphQL, NextJS, Tailwind CSS. The video is a thorough, extremely beginner-friendly walkthrough of the whole process of creating a blog website based on Hygraph - a perfect 10/10 match for what I needed. It seemed rather stupid to let such an opportunity go, so I started simply following the incredibly thoughtful and helpful instructions from the tutorial.

Very soon, it became clear that simply following the incredibly thoughtful and helpful instructions wasn't the best course of action:

• I had a different vision for the website's functionality. I didn't need the categories or recent posts features for the sake of simplicity and actually releasing the website, and I didn't want to dive into the comments feature rabbit hole because it seemed too scary.
• I had a different vision for the website's design as well. For example, I wasn't super keen on having this blue background:

Naturally, I took to Figma and the first version of the design was born:

This is where the fun part began: following the prescribed steps was easy and a little boring, but using the tutorial as a core while making my own tweaks and changes was very satisfying. For example, I have changed my initially hardcoded About, Experience and Contact sections to CMS-powered pages based on the Displaying Posts part of the tutorial. This approach also allowed me to better understand how JavaScript works. I've gotten a better grasp on such concepts as displaying dynamic content, the export/import thing, and, most importantly, the general structure of the language.

After I had found the comfortable way of working, everything was going pretty smoothly. In a matter of days, I

• finished the early bare-bones version of the website with the basic functionality in place;
• bought the easytofind.co domain on Namecheap.com;
• learned how to deploy a website on Vercel.

Then the robbery happened - someone broke into our flat in Berlin. In the context of building this website, the main problem was a completely empty new laptop that replaced the stolen one. Since I didn't have any proper cloud recovery process in place (I still don't), I had to set up the entire development environment all over again. This sounded scary because to this day my heartbeat gets a little faster whenever I have to run more than a couple of terminal commands.

At this point, I knew that I will have to use one of the essential product management skills - asking a bunch of stupid questions. Luckily, I knew the right people to address these questions to, and thanks to my colleagues Fred and Anmol, my development environment was up again. From here on out, it went back to pretty smoothly: the very well-timed vacation came around, I had loads of free time to spend on shaping up the updated version of the website and finally releasing it.

Takeaways

Having a goal in mind is very helpful

I have made a few attempts at "learning JavaScript" without a particular project in mind, and failed every time. It's like going to the Louvre without knowing exactly what you want to see - you end up wandering around a gigantic building for a few hours and then remembering nothing about your visit.

Knowing how the end result is supposed to look made it so much easier to focus on learning exactly what is needed to make it happen, and nothing else.

Having a developer friend is crucial

Fedor Borshev claims that hiring a teacher is key to making progress in pretty much everything. I didn't hire anyone but I agree with the general idea - having a mentor figure is incredibly useful. In my case, people with more experience helped me get unstuck and, ultimately, not lose hope and desire to continue building.

Lightning round

• the golden ratio for font size and line height is 150%. E.g. for 16px font size, the line-height of 24px is perfect (I don't follow this rule everywhere).
• you can find a couple-of-lines-of-code tool for every single thing that you need if you know how to use Google. For example, I'm using react-helmet to create dynamic tab titles, moment.js to format dates, and next-themes to quickly switch between light and dark modes (coming soon).
• all it takes to add dark mode to your website is attaching a few dark:... variations to your TailwindCSS classes.
• speaking of TailwindCSS - it's absolutely wonderful. You don't need every single color or text size in the world, and once you get a good grip on Tailwind's syntax and most used expressions, the speed of coding and testing increases dramatically.
• surprise-surprise: GraphQL is even more wonderful. I tried using the Spotify Restful API to fetch my top artists and most recently played song and has failed miserably. After this experience, I now have an even stronger appreciation for such GraphQL features as visual query building, fetching only the data you need, and intuitively easy filters.
• for some reason, it's very satisfying to see {post.title} correctly return a title for a given post.

All in all, building this website was a very fun and rewarding experience. I'm quite surprised and very happy that I have overcome the desire to fix "just one more thing" before releasing and have actually finished this little project.

Do you want to ask a question, give feedback, or share a suggestion? Use my LinkedIn or Telegram to connect, I'm always happy to chat.