I did it! After nine months of intensive learning, I launched my own website where I can showcase my work, effort, and thoughts which are sometimes trapped or fade on this never-ending path of learning web development. The website has been built with JavaScript's typed superset, TypeScript, Next.js, the React framework, and for styling, Chakra UI, the modular component library for React.

I've built this website completely from scratch, however, this does not mean that I haven't had some help along the way. This website is basically an amalgam of all of the knowledge that I've accumulated thus far. Here, in this first blog post, I would like to dissect the building process of the website. This will not only provide you with the website's blueprint, but also give you an overview of my journey so far. So let's take a step back.

First Steps

My first encounter with web development was as part of my job in September 2020 with HTML when I attempted to improve the website (subdomain of the official website) of the international relations office at the University of Zadar. I wanted to have more influence on the structure of our website, and the overall way in which information was presented. A big issue which we had at that time was that students were getting lost on the website. They would dig through a heap of information in order to find what they were looking for, and eventually they would give up and come to the office to ask for the information in person instead. Not a great user experience, I would say. Unfortunately, the editing and shaping of the website for my colleagues and myself was somewhat limited only to changing the content via a content management system (CMS). This little research into HTML, however, opened up a door for me, and I was intrigued by the vast possibilities of web development.

Still, this wasn't the moment for me to make the switch, and fully commit to web development. My wife and I were expecting a child at that time, and shifting focus to changing my career did not seem appropriate. Fast-forward to July 2021, our daughter was already three months old. Having a child changes one's perspective, and you start thinking more about the future. Your effort and your need to contribute more rise exponentially.

At that time, I wasn't satisfied with my job, my career as a literary translator did not pan out, since it was very niche, and difficult to get in that closed circle. Either way, the job at the office was always supposed to be a temporary solution for my employment. It was difficult to break through, and due to the situation in my country where political affiliation is more appreciated than grit and diligence, I felt frustrated and stuck. I was not able to move forward and progress the way I intended. Something had to change. There had to be a profession, I thought to myself, where these qualities were appreciated, and where one could progress and climb up the ladder through hard work alone. Enter web development, again. It seemed like a viable option, one that had many benefits, so I did a 180, and decided to become a web developer.

Planning it All Out: The Six-Month

The first thing which I needed to decide was what kind of web developer will I be: front-end or back-end. Why not do both and become a full-stack developer, you may ask. I believe that it's initially more important to specialize, and then as you grow more confident in your skills and your domain, you can decide to expend your area of expertise. But back to the matter at hand. I'm more of a visual type of person, and I'm always obsessed with how things look and how they are presented. Also, I liked to draw for as long as I can remember, so becoming a front-end developer seemed like the obvious choice. Creating a website from scratch, and being able to interact with it, I saw as an exciting endeavor. Though at that moment all of that seemed like a distant future for me. The different tools one could use and different direction in which one could go was quite overwhelming at first. And because of this, I believe that having a mentor is crucial for the whole process of learning web development and getting your first job as a web developer. Luckily, my cousin Adrian is a front-end developer who guided me in this process, and gave me the moral support when it was most needed. Without any feedback, realistically, you do not know what you are doing, you're typing into the void, so to say. Sure, you might be following some tutorials, coding along, and feeling like you're making some progress, but realistically speaking, if you do not break away from the embrace of tutorial hell, your progress will be slow, and the frustration will only increase.

The crucial ingredient of learning is making mistakes and errors, and learning from them. I've gone through my share of tutorial hell, and just recently I've managed to break out of it, and start working on a crypto app and this website. Naturally, in the beginning, you're insecure, you don't know where to begin, and someone needs to hold your hand through this process, and some choose to find comfort, and a sense of progression in tutorials and courses. And that's completely acceptable, I've also gone along that road, and when I think about the whole process of learning, there's not much that I would change. I needed to accumulate some knowledge, and to build up the courage to start building projects on my own. For me, going through the tutorials and courses was a necessary step, and I learned a lot from them.

So in July 2021, I started planning the whole learning path and getting my first job as a web developer step-by-step. I gave myself a deadline of six months to learn as much as I can while also working in the international relations office. In the meantime, the plan was also to start applying for some jobs as well even though I didn't feel ready. I applied for maybe one or two positions, and only got a response from one of them. Unfortunately, I did not expect a response at all, so I did not see a message from one of the recruiters who reached out to me on LinkedIn. Side note: check your inboxes, and your spam regularly. In general, that's maybe one of the few things that I would change in regards to my learning path; apply more. Another thing which I would have changed is to use more version control systems such as Git at the beginning of my learning process. It's important to incorporate this into your workflow early on, but more on this later.

In July and August 2021, I learned HTML and CSS through a couple of courses. The first two "Introduction to HTML" and "Introduction to CSS" were online courses by the University of Computing Centre in Zagreb via their website. After that, I went through "The Ultimate HTML5 and CSS3 Series" by Mosh Hamedani on his website, and "Modern HTML and CSS From the Beginning (Including Sass)" by Brad Traversy on Udemy. From this course on, all of the courses that I took, were on the Udemy learning platform.

In September 2021, I began learning JavaScript through a lengthy course called "The Complete JavaScript Course 2021: From Zero to Expert!" by Jonas Schedtmann. Since I saw the importance of JavaScript as a programming language, as the main pillar of front-end development, and web in general, I went through the course slowly, and took a lot of notes. It took me more than two months to complete the sixty-eight-hour course.

Naturally, after that in December 2021, I would say that the necessary phase of my tutorial hell began. I felt that I have forgotten, or to be more precise, that I did not know enough HTML and CSS, so I decided to brush up on my HTML and CSS knowledge with two more courses: "Build Responsive Real-World Websites with HTML and CSS" and "Advanced CSS and Sass: Flexbox, Grid, Animations and More" both by Jonas Schmedtmann. Looking back I wouldn't say that these courses were unnecessary or a waste of time, since they were heavily focused on design, something that I'm interested in, and that I think about a lot while building websites. Despite of all of this, I believe that this is the period where I should have built more on my own.

The Leap

Six months have already passed. My, how time flies! So as promised, I quit my job in the office, and devoted myself completely to web development. The 3rd of January 2022 was my last day at the office, and from the 7th of January 2022 I started my developer workdays, eight hours a day, six days a week, as if I it was a regular job. I've decided that Sundays were going to be days for rest and spending time with the family. January was the month in which I've prepared my development environment, both digital and physical, installed Linux and started using it. Installing Linux as the sole operating system on a priorly Windows-based desktop computer was a challenge on its own, but I learned a lot from this process. I started to get more acquainted with the command line, and started using version control to a greater extent, which you can see in my contribution statistics on my GitHub profile. If I had been using it for the previous six months, things could have been a lot greener.

Of course, after going through HTML and CSS again in December, I had to go through one more JavaScript course as well, right? And that was "JavaScript - The Complete Guide 2022 (Beginner + Advanced)" by Maximilian Schwarzmüller. However, I decided that at the same time, I would try to break away from the tutorial hell a bit, and I started JavaScript30, a 30-day vanilla JavaScript coding challenge by Wes Bos. The good thing about this challenge was that, besides all of the many interesting projects that I got to build, I also got a chance to experience pull requests. The code that I wrote was reviewed by my mentor. I also completed "Git and GitHub - The Practical Course" by Maximilian Schwarzmüller and Manuel Lorenz, and was now more familiar with some advanced commands.

Now, this is the time when I started to have more confidence in my skills, but I still wasn't there yet. I could not build a website on my own. At least not the right way. I was lacking some more tools. I already had the idea for a cryptocurrency website, Crypton, but I could not realize it. My mentor, Adrian, advised me to learn React first, which I was planning on learning either way, and then build Crypton. He also advised me to learn TypeScript which would vastly improve my coding skills, and allow me to handle errors in a timely manner.

In March 2022, I completed the "React - The Complete Guide (incl Hooks, React Router, Redux)" and "Understanding TypeScript 2022" courses by Maximilian Schwarzmüller. I was now finally ready to start building my own projects. But then, the idea to build them with Next.js appeared. I already had a course lined up for Next.js, but in the end I decided to only use Next.js's docs, which are phenomenal. I highly recommend them.

The Finish Line

Finally, we arrived to the present, or the past, depending when you're reading this. I've started building this website on March 24th, 2022. It took me around two weeks to finish it. The first building block of the website was Next.js's "Create a Next.js App" tutorial on their website. With the help of it, I've built this blog page, and all of the surrounding functionality which allows me to use Markdown, the simple markup language, to write blog posts. I had the blog page already, and that was an excellent starting point.

For styling, as already mentioned at the beginning of this post, I used Chakra UI. As a modular component library, Chakra UI allows you to add a color mode easily. After doing the first switch to dark mode, something felt out of place. My light mode profile picture was too cheerful for the surrounding dark theme. Then it occurred to me. I need to make a second profile picture for the dark mode which would switch accordingly. And so I made it, the dark side emerged. To make things a bit more interesting, I've added the dynamic shadow image effect which I saw on Chakra UI's official YouTube channel. A great source of inspiration in terms of the minimalist design was the official website of Kent C. Dodds, one of the top React developers. I like the setting and the rising of the sun and moon icon on his website a lot. I wanted to implement something similar for my website, but in the end, I decided for a simple color change of the icons without any animations.

For the portfolio page, and for the project showcase, I took inspiration from Brad Traversy's course "Modern HTML and CSS From the Beginning (Including Sass)" as part of which I built an example of a portfolio website. I've built upon this idea, and added a modal which provides the user with more info about the project.

The about page is fairly simple with some text, and two grids showcasing the tools that I use during development. I just attached some tooltips to the icons in case some of the users are not familiar with the icon of the tool. Since a tooltip is primarily envisoned as a desktop tool, I had to make a custom tooltip which was touch-friendly, i.e. appropriate for mobile devices.

In regards to the landing page or the home page, I did not want to clutter it with too much content, as it was unnecessary, so I opted for a simple intro with two buttons that guide the user further into the website. In this way, the pages are interconnected and allow for a subtle and smooth user experience.

And that's it folks! This pretty much sums up the creation of this website, and my ongoing developer journey up to this point. I hope for this post to be the first among the many posts that I will write on this website, and I hope that I'll soon get the chance to write one of them in the context of my first web developer position.