I developed enterprise software (.NET) for about six years, when I started to dive into web development. Today I’m going to tell you about the journey, what I could have done better, and what I plan for the future.

How everything started

I always liked the idea of becoming a web developer. At 14–18, when I was still in school¹, I liked to fiddle around with HTML and CSS and build smaller websites with it. Altough I wasn’t very good at it, it catched my interest. Then I started working as a software developer for enterprise software and didn’t do much regarding web development for the next few years, until I had to write a thesis for my part time study, where I chose to write about JavaScript Frameworks, and how they affect software quality of single page applications in comparison to using Vanilla JavaScript.

Angular and the MEANÂ stack

I thought if I just focus on doing one tutorial after another, I would be able to create something on my own soon

I really liked what I learned while writing that thesis, so I continued learning about AngularJS (back then it was Angular 1) and focused on doing tutorials to learn more about it. At some point I decided that I want to know how to build a backend to a simple angular app. This was also the point when I discovered something called the MEAN stack. I was amazed how all of this works together. I liked it. So I did a bunch of full stack tutorials. I thought if I just focus on doing one tutorial after another, I would be able to create something on my own soon. Oh boy I was soooo wrong.

Angular 2

After spending some months doing tutorials in the evening some days a week, Angular 2 was in late beta and there were rumors that the first release candidate would be published soon. Okay… new is always better (wink ;)), so I had a look at Angular 2 which was a great experience. I liked the concept of components and the whole thing felt a bit cleaner to work with. So again, I did a bunch of tutorials until a colleague told me about an idea and asked if it was possible to build it. The first time since I started learning about web development, I could build something real. Something that could be useful some day. Almost every workday after work I would come home and spend the evening trying to build that web application with that MEAN stack I learned before. And suddenly I realized that I don’t know shit about how to do all of those things. Basically everything I learned in all those tutorials was lost.

I told myself that was because I just have to get used to all that new stuff and it will get better if I build more and more things. Over the next months, I spent a massive amount of time on relearning everything, and growing my application step by step. All of that, while having to keep up with regular updates to the Angular 2 release candidate. Almost each of them had a lot of breaking changes, which meant a lot of work for me as a beginner.

React

One sunny day when another Angular 2 RC was released with a backlog of breaking changes, it was enough. I threw everything away, just to learn ReactJS and start all over again. My friends told me good things about React before and it is backed by Facebook, so what could possibly go wrong? (I feared that small frameworks may get abandoned, so I focused on the ones that are backed by big companies) Learning React was awesome. Within short time I was able to build some cool little stuff and run it locally. Learning was a lot easier and faster this time because I already knew the JavaScript basics. Now that I was comfortable with the new framework, I focused on learning how to make a production ready web application with React, MongoDB, NodeJS and Express. (Of course that was too much new technologies for a beginner)

I was overwhelmed of how much stuff you need to get that thing up and running. Apparently, Webpack and Babel were things you must know to create a state of the art application so I tried to get into that. Fortunately that was around the time when create-react-app was released. Yippieh! No longer fumbling around with cryptical configs! Now I could just focus on learn how to get this thing running because create-react-app can also be used for creating production ready applications.

Since that day I’m building little things for myself – things that never got published because I never finished them. All for the purpose of learning and building experience. And although I still don’t know everything about React, web development, backend development, I’m comfortable enough with it to create something real, something shippable, which I’d like to do in near future.

Now why did I tell you all of this? Because I made a terrible mistake. A mistake that held me back from gaining experience and growing faster into my desired role of a web developer: I did one tutorial after another. As soon as I finished one, I already started the next one without even thinking about what I just learned.

Takeaways - What could I have done better?

I wrote this article for people who think about becoming a web developer but don’t know where to start. As the way I did it in the beginning was not a good one, I want to tell you how to do better.

Don't do too much tutorials

Takeaway number one of this article: Don’t focus too much on tutorials. They are great for getting a glimpse of a concept. But after you finished it, think about what you learned. Try to build something small on your own where you use this newly acquired skills. E.g.: Dave Ceddia wrote in one of his articles, you should copy existing things. Start small, but build something. It’s all about the practice. When following a tutorial you will think you understand, but as long as you don’t build something on your own, you don’t. Newly acquired skills have to be practiced, otherwise you will simply forget them.

Get an overview, start with the basics and build!

Before starting, think about what you want to do. Which framework do you want to learn? What about the eco system?

For example, if you want to learn React, I would recommend to start at the basics. If you don’t have experience with JavaScript, learn the basics. Learn ES2015/ES6, you will need it. After that, make yourself familiar with the NPM package manager or Yarn. Choose the one which feels the best for you.
Now that you covered the basics, have a look at the official tutorial for React it covers a lot of things that you’ll need later. As soon as you finished, think of something small, and build it. Visit a page you are familiar with (e.g. Twitter, Facebook, etc.) and build a component that shows a tweet or a facebook entry. Try to copy it as exact as possible. Then, try to render a list of posts / tweets. If you managed to do that, you could try to connect your app to the Twitter or Facebook API (or maybe you find another API). That’s a good point to learn about how APIs work and how to use them within your project.

The key is to know when you need to know what. Start at the basics and try to use as much as you can in smaller projects. Don’t think of a fully grown scalable full stack application ready to use by a hundred thousand users. Just create something small for practicing and throw it away afterwards. If you are comfortable enough with what you do, level up and add some difficulty. Be it a connection to an API or server side rendering with code splitting. Just keep improving and growing.

Wrapping up

I love to learn about new technologies. But at some you are just overwhelmed by the amount of new frameworks and libraries. That was the moment for me where I realized that I just can’t learn and try everything. So I sticked to the basics and improved all the way until today. And there is still so much to learn. I never really learned about server side rendering, so that’s what I’m going to do in the future. It looks like I will have to learn about Webpack and Babel first, because Webpack’s code splitting functionality. And the most important thing: I will learn all of this by building my own stuff. As soon as I’m comfortable with it, I’m going to write about it. That’s how I manage to keep things stuck in my head.

EDIT: As a more detailed extension to this article, I would totally recommend to read this article by Gosha Arinich. (TL;DR: Learn one thing at a time, practice with learning projects, don’t care about best practices in the beginning, don’t try to keep up with every new library or concept) I wish I had read such an article before I started :-D

PS: I also want to add, that although I switched from Angular to React, I don’t think that Angular is bad. Both are great frameworks and I think each of them solves a lot of problems. Also I’m going to have a look at Angular in the next months since I get to use it in my daytime job. I’m really looking forward to get a better comparison now that I have more experience.

Call to Action

You also want to get a better developer? I'm sharing what I know on my blog, and if you subscribe to my weekly newsletter, I will deliver tips and tricks about web development right into your inbox.

This article was originally published at http://www.andreasreiterer.at

[1] I went to a school called HTL (Hoehere Technische Lehranstalt) is a secondary education school that permits students to acquire the university entry qualification and professional training at the same time. I‘m not sure if something like this exists outside of Austria – at least not with that name.