My first 3 months of web development

From zero to hero in 3 months

It's been more than 3 months since I went all in on web development, so it's about time I wrote a status update. In March, I wrote my first blog post outlining the plan I was going to follow to get myself up to speed on the latest and greatest web dev technologies and build up a skillset that can land me a job in today's market. For the most part I followed my plan pretty faithfully with only slight deviations where I deemed a change was necessary.

With that being said, the actual "learning" part (that is taking online courses & tutorials) only took me about 3.5 (intense) weeks and the rest was putting that knowledge to good use and building things. We all know that to be a good developer, learning new things is only a small part of the game. You have to be able to use your skills to build them into your "muscle memory" so it's not just some vague theoretical knowledge but knowledge you can apply in real life.

So what have I been up to?

Here's all the resources I used, courses I took, skills I acquired and projects I built in this 3 months period:

Courses

  1. The Complete 2020 Web Development Bootcamp: This one was only a refresher since I took this course a long time ago. It's a course that touches a bit on everything, so it was a good way to start and brush up that little unused knowledge I had beforehand.
  2. NodeJS - The Complete Guide (incl. MVC, REST APIs, GraphQL): Another refresher, since I took this one some time ago as well. I only skimmed through it since my primary focus this time is frontend development.
  3. Get Started With CSS (Plus Flexbox, Grid, and Sass): Excellent and very in-depth course from one of my favorite instructors, Maximilian Schwarzmüller. More than 22 hours of CSS goodies. I feel like it gave me some pretty strong foundations on the topic.
  4. JavaScript - The Complete Guide 2020 (Beginner + Advanced): Another mega course (~52 hours) from the same instructor, this time on JavaScript. It was great, comprehensive and had both sufficient breadth and depth. This and the CSS one gave me the foundations that I beleive is the bare minimum every web developer should have before moving on to more advanced frameworks.
  5. React 16: The Complete Course (incl. React Router 4 & Redux): Once I got the foundations down (and made sure I understood them well, more on that later), it was time to move on to my frontend framework of choice, React. At this point I was so happy with Max's other courses that I figured I can't go wrong with his React course either, and I was not disappointed. This course teaches you the ins and outs of React and some related technologies. This was the last course I took, then it was time to build some sites.

Other resources

  1. syntax.fm: Web dev podcast. I use it to get informed about trends, popular and upcoming technologies & frameworks. Listening to it gives me a clear perspective of what's out there in the web dev world and what are the strengths and weaknesses of each technology.
  2. Medium articles, MDN docs, blog posts etc.

Skills I learned

  • HTML
  • Javascript
  • (S)CSS
  • React
  • Next.js
  • Netlify
  • Jamstack
  • Serverless functions
  • Firebase: Authentication, Hosting, Realtime Database, Firestore, Cloud Functions, Analytics
  • Google Cloud Platform
  • Visual Studio Code
  • Google Maps JavaScript API

Web dev projects

  1. Prio: My first "serious" project. It is a full-featured todo list app that has both web and iOS components (both made by me), and the two sync together in real time, thanks to Firebase Firestore. It was built in vanilla Javascript without the use of any frontend framework, using Web Components and Firebase services (Authentication, FireStore, Hosting) under the hood. My primary goal with this was to build a project using only the fundamentals (so no frontend framework), to really drill in that HTML, CSS and JS knowledge. I made this before I even started learning React, intentionally so I couldn't get tempted to use anything but the basics. From start to finish it took me about 1.5 weeks to build the landing page and the app itself.

  2. This website: My second project, that I started after I finished all the courses outlined above. This time my goal was to build a simple blog, personal site with my newfound React knowledge. No restrictions this time, so I built it using the React, Next.js and Netlify trio, which I instantly fell in love with. Next.js's static site generation and Netlify's automatic deployment are incredible tools that take care of all the heavy-lifting for you, so you can just focus on writing code. I had a lot of fun with this project and I'll continue improving it as I go. The first version took about a week to build, since then I've spent an additional few days on tweaking and improving it.

  3. Hide & Seek World: This really is the crown jewel that took me about 2 months to build. It's a turn-based online multiplayer game inspired by two of my personal favorites: GeoGuessr and Skribble.io. The premise of the game is simple: hide somewhere on Earth by selecting a street view location, then the other players have to find you based on the street view image. As for the tech stack: the backend component was built in a serverless way, using Google Cloud Functions. I used Firebase Firestore and Firebase Realtime Database for data storage. The frontend uses React, Next.js, Firebase Authentication, Google Maps JavaScript API and Stripe for payment processing. It's hosted on Netlify. It was an interesting and complex project that really put my skills to the test. There will be a follow-up post about it soon, detailing the development process.

What's next?

Obviously 3 months is not enough to learn everything, but with a solid engineering background (including some basic web dev knowledge), clear goals and a good amount of hard work I feel like I managed to get a lot out of it. I am now ready to tackle complex web dev tasks and I feel confident in being able to perform in a professional environment. With that being said, I am not stopping here. I am in this for the long haul and I can't wait to see where I'll be in 1, 2, 5 years. Hopefully a rockstar developer with millions in the bank!