Learning Web Development in 2018
Tags: webdev, javascript, css
Published: 2018-08-15 16:28:07

---
title: Learning Web Development in 2018
published: true
tags: webdev, javascript, css
canonical_url: https://zendev.com/2018/08/14/learning-web-development-2018.html
---

Learning web development in 2018 is overwhelming.

There's just _so damn much_ to learn.

The JavaScript ecosystem is [growing more quickly](http://www.modulecounts.com/) than any other.

There is. So. Damn. Much.

[Guides to becoming a web developer](https://codeburst.io/the-2018-web-developer-roadmap-826b1b806e8d) look like the freaking flying spaghetti monster.

![](https://zendev.com/assets/img/posts/learning-web-development/frontend-spaghetti-monster.png)

## It's Never Been Better, It's Never Going To Get Better

I've been in the software industry since 2004, and it's felt like drinking from a firehose the whole time.

In that time, some things have gotten better.

We've gone from manually setting up servers to spinning up entire _clusters_ automatically in the cloud.

JavaScript has gone from being considered a [toy language](http://www.davidarno.org/2010/05/18/why-javascript-is-a-toy-language/) to being the [most widely used language in the world](https://insights.stackoverflow.com/survey/2018/#technology-programming-scripting-and-markup-languages).

We've gone from manually coding and styling everything on our websites to dozens of [CSS Frameworks](https://www.webdesigndegreecenter.org/ten-best-css-libraries-developers-designers/) and [Component Libraries](https://blog.bitsrc.io/11-react-component-libraries-you-should-know-178eb1dd6aa4) with hundreds of functioning, beautiful pre-packaged patterns and components.

We've gone from no grid system, to a [single clunky 960 pixel grid system](https://960.gs/), to an [incredibly powerful customizable grid system](https://css-tricks.com/snippets/css/complete-guide-grid/) baked INTO THE BROWSER.

We've never had it better than we do today.

And yet.

We've gone from being able to simply load files to a [complex array of front-end build tools](https://survivejs.com/webpack/appendices/comparison/).

We've gone from having no good JavaScript libraries, to essentially having [1 dominant tool (jQuery)](https://royal.pingdom.com/2010/03/26/jquery-triumphant-march-to-success/), to having [3 massive front-end frameworks and dozens of minor ones](https://javascriptreport.com/the-ultimate-guide-to-javascript-frameworks/).

The pace of change has never been faster, and it keeps going up.

It's never going to get better. We'll always have to keep learning.

## The Three Mos: A Framework For Deciding What To Learn

I take it as a given that as long as I'm in this industry, I'll need to keep learning.

Even so, it can be overwhelming to figure out what to learn. To help me decide, I use a simple 3-part framework that I call the "Three Mos". Motivation, Momentum, and Money.

1. **Motivation: How excited am I about learning this?**
2. **Momentum: What does learning this set me up for?**
3. **Money: What is the business/financial opportunity?**

### Motivation

How excited am I about learning this?

When I was in school, my grades correlated far more with my interest level than the difficulty of the course.

Not only will I have more fun learning something I’m excited about, but I will learn better and faster.

### Momentum

How does learning this me help do or learn other things?

Does learning this look to be a skill that will be useful long in the future?

For example - I might learn a JavaScript based server technology over a non-JavaScript one simply because I know that improving my JS skills will give me more momentum on the Frontend as well.

### Money

Will someone pay me to learn this? (ideally a current client or employer). If not, what is the marketability/demand for this skill?

My ideal situation is to literally get paid for learning. For me, this usually happens when I'm able to provide value to a client or employer in an adjacent area, and learning this skill will help me deliver even more value.

Or when I'm coming in with a level of skill that is already valuable, and can get paid to work on a project using that skill and really polishing and improving on it.

## Applying The Three Mos To JavaScript Frameworks

A common question for new web developers is "which JavaScript Framework should I learn?"

I'm going to limit to the "big 3" frameworks of React, Vue, and Angular, but if one or more of the "three mos" points you to another one, don't hesitate to include it in your consideration.

For **Motivation** , only you can answer that. Vue is kind of the “hot ticket” right now, having just passed React in terms of stars on Github, but React has a lot of great things and a much more mature ecosystem, and Angular has a ton of enterprise adoption.

In terms of **Momentum** , it’s probably a wash. Learning any of these frameworks deeply will actually set you up very well to learn any of the others, as many of the core concepts are the same.

Once you deeply understand component-based architectures, component lifecycles, and Flux-style state management you can take that knowledge to many frameworks.

With regards to **Money** , unless you have a specific client, employer, or lead already who is interested in Vue or Angular, I think the current advantage goes to React.

[React usage is still much higher](https://dev.to/kball/github-stars--usage-react-is-still-blowing-vue-and-angular-away-2kk5), and there appear to be more job & freelance opportunities available in React. That said, Vue is catching up fast and there are plenty of opportunities out there.

If you’re still stuck, one last tiebreak to throw in is that Vue seems to be easier for people to learn, so it will probably be faster for you to get to productive if you pick Vue.

## How To Learn: Project Based Learning

Your first step is to find a project.

This is the number one way to learn a new piece of technology: find a project you are motivated to complete, and apply the technology to it.

Ideally, this is a project you are being paid to work on, but it can also be a private project so long as you are extremely motivated to finish it.

Having a project will force you to learn much more holistically than simply following a course or tutorials.

You will be forced to grapple with edgecases that tutorials often do not.

You will have to adapt solutions without having a fallback for "the right way to do it".

There is no substitute for project based learning.

### Start with a course, then move to Google and documentation

Once you have identified with a project, I usually start with taking an overview course on the technology I'm learning.

This is a kickstarter for me - it gets me over the hump of "I have no idea what I'm doing" to being able to do basic things.

I rarely completely finish a course, but I will usually go through a fair chunk of it to get an overview understanding.

Once I have that overview, I simply work on my project. Every time I run into something I don't know how to do, I use google and the documentation for the technology I’m learning to figure out how to solve it.

This approach seems to work better for me than purely taking courses or purely sticking to documentation and articles.

Courses get me to a big picture understanding faster, while diving through documentation and articles to solve specific problems helps me build a much deeper knowledge base.

This also lets me augment my understanding with more fundamentals. A React course is unlikely to spend much time on JavaScript fundamentals, but when I'm googling to solve a problem I have, often I end up digging down into language basics.

### Recommended Courses

I have used this approach to learn both React and Vue in the last year or two. While can't necessarily say what the _best_ courses in these domains are, I can recommend the ones I used.

**React:** [Modern React with Redux](https://click.linksynergy.com/deeplink?id=hIdOL5Z4eK4&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Freact-redux%2F)

**Vue:** [Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)](https://www.udemy.com/vuejs-2-the-complete-guide/)

I haven’t taken an Angular course that I can personally recommend, but a friend recommended this one, and the teacher is the same as the Vue course I took, so I can vouch for him.

**Angular:** [Angular 6 (formerly Angular 2) - The Complete Guide](https://click.linksynergy.com/deeplink?id=hIdOL5Z4eK4&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-guide-to-angular-2%2F)

## Learning More Strategically

While we don't know what the web development of the future will look like, I'm confident that the pace of change is not going to slow down.

We're going to have to keep learning new things, but if we try to learn them all we'll never be able to keep up.

Instead, we need to change our learning approach to be more strategic.

We need to optimize our learning to keep building momentum, to take advantage of our own motivations and energy, and get paid to learn.

In other words, we need to be guided by something like the "Three Mos" framework.

Is this exactly right? I doubt it. It has worked well for me, but I'd bet it can get even better.

What do you use to guide your learning? Let me know below in the comments.

* * *

P.S. - If you're interested in these types of topics, you should probably [follow me on Twitter](https://twitter.com/kbal11) or join my mailing list. I send out a weekly newsletter called the ‘[Friday Frontend](https://zendev.com/friday-frontend.html)’. Every Friday I send out 15 links to the best articles, tutorials, and announcements in CSS/SCSS, JavaScript, and assorted other awesome Front-end News. Sign up here: [https://zendev.com/friday-frontend.html](https://zendev.com/friday-frontend.html)