Top 5 Frontend Development Topics To Learn in 2019

Ah, January.

A time of optimism, a time for starting afresh.

For making new goals and resolutions.

And in the web development world, for looking at the landscape and deciding what we need to learn just to keep up.

Because let’s face it - web development is always changing, and if we aren’t constantly learning we’re falling behind.

Deciding What To Learn

Because things are changing so fast, deciding what to focus on is key to not getting overwhelmed.

I’ve covered before how I decided what to learn, with a ‘3 mos’ framework of looking for Motivation, Momentum, and Money.

The barebones of the idea is looking for topics I’m excited to learn about, that will give me some momentum in future learning, and where I can either get paid to take it or there’s a clear market for the skill.

Below I apply that framework based on what I’m seeing right now in the web development ecosystem, and for each area I recommend I’ve rounded up some resources to help you get started.

For each topic I’ve provided a range of free and paid resources. As an FYI, some of the paid resources do use affiliate links, which means I may receive a commission if you decide to buy a product or service I have recommended. But if you’d prefer I didn’t receive a commission, that’s cool too. Just Google the vendor’s site instead of using my link. 🙂

1. TypeScript

TypeScript was one of the most surprising growth stories of 2018. The npm survey found an astonishing 46% of npm users are using TypeScript. It is now not only the default language for using Angular, but also a commonly used option in React and an increasingly used option for Vue.

It has been announced that Vue 3 is being written in TypeScript, and the creator of Node.js is working on a new node-like project that is TypeScript first.

Now that Babel supports TypeScript, chances are you won’t even need to change your build system.

So if you’ve been a holdout (like me, to be honest), 2019 is definitely the year to learn TypeScript.

It has momentum, there’s a rising number of jobs that require it, and it’s pretty clearly the way the JavaScript ecosystem is moving.

Resources and Articles

• Learn TypeScript in 5 minutes. A great quick start to TypeScript.
• TypeScript Deep Dive. An entire book, freely available online.
• TalkScript. For those who like podcasts, this is a good one on TypeScript by the developers at Sitepen, including one of my favorite podcasters (and co-panelist on JSParty), Nick Nisi.

Free course

• Want to learn TypeScript? Here’s our free 22-part course. This is a post about the course that includes an overview of topics covered. The course itself is on Scrimba.

Paid course

• Understanding TypeScript. The top-rated course on TypeScript on Udemy, by one of my favorite instructors Maximilian Schwarzmüller. I’m just getting started on this course myself, but so far quite happy with it, and I’ve never had a bad course from Max.

2. React

For many of you, React is old news, but I’m putting it high on the list again for two reasons.

First - it is still very definitely winning the ‘money’ and ‘momentum’ games. There are more jobs and contract gigs out there for React than anything else in the frontend world, so if you haven’t already picked it up, you definitely should.

Second - It keeps changing, and some new features (especially hooks, but also things like the context api) promise to completely change the way we write React code, so even if you’re already using React you should brush up on them.

Resources and Articles

• The React Handbook. an 80/20 introduction to React on the Freecodecamp blog, aimed at giving you a fast-path start to being productive in React.
• Hooks at a Glance. The hooks documentation for those already comfortable in React; probably the best place to learn hooks.
• Full Stack React. Both a blog and a newsletter with great in-depth React articles
• The React Podcast. If you’re into podcasts, this one by Michael Chan AKA Chantastic is great.

Free Course

• Start Learning React. The most comprehensive free course I’ve found on React. Very beginner focused, but I haven’t seen any advanced courses out for free.

Paid Courses

• Modern React with Redux [2019 Update]. The React course I took when I was getting started with React, updated with new content to handle the latest and greatest features.
• React 16.6 - The Complete Guide (incl. React Router & Redux). React course by Maximilian Schwarzmüller. I haven’t taken it but I’ve never seen a course by Max I didn’t like.

3. Vue

Vue.js is my current favorite framework, the framework the most developers have said they wanted to learn in both the 2018 and 2017 State of JavaScript surveys, and only keeps getting better.

I already wrote a whole post on how to learn Vue, but I’ll quick link some of the resources from that post here for those who are interested.

Free Resources

• The Vue Guide. The Vue docs are phenomenal, and a great way to learn. I’ve gone back to the content in this guide time and time again.
• Vuejsdevelopers.com both a blog and a weekly newsletter highlighting deep in-depth articles.
• Vue Feed, a website, newsletter, and twitter feed highlighting curated Vue news, tutorials, plugins, and more.

Free Courses

• Learn Vue 2 Step By Step (Laracasts). A great introductory course. I don’t think it does quite as good of a job of sequencing as the first paid course I’ll introduce below, but on the other hand it is free.
• Intro to Vue.JS (VueMastery). This is a shorter course than the one above, and I think the videos are not quite as good, but VueMastery does a great job of giving you more than just a video. You get the lesson in text as well, download any of the resources used, and participate with CodePen based exercises.

Paid Courses

• Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex). This is the course I started with. It’s great, I highly recommend it.

4. CSS Grid

CSS Grid has reached critical mass across browsers for almost any audience you might be trying to address, and is an amazing step forward from previous layout technologies.

If you’re still using heavy-weight grid frameworks from UI toolkits like Bootstrap or Foundation, you are falling behind. CSS Grid gives you more power with less markup and complexity.

The only barrier is learning. Which is the point of this post. So if you’re still a holdout, make this the year you learn CSS Grid.

Free Resources

• A Beginner’s Guide to CSS Grid | Free Code Camp. A Great, simple, and very visual step by step guide to CSS Grid.
• A Complete Guide to Grid | CSS Tricks One of the most thorough online resources available for CSS Grid, shows all of the grid related properties, their potential values, and visual demonstrations of what all of those values do.
• Best Practices With CSS Grid Layout | Smashing Magazine CSS Grid has been around and being used long enough that we’re starting to see some best practices congeal. Rachel Andrew goes through a set of them, informed both by her own experience (she’s one of the foremost advocates and teachers of CSS Grid, and was involved with the spec) and a survey of developers using grid.
• Another Collection of Interesting Facts About CSS Grid | CSS Tricks A set of lessons learned on how to use CSS Grid, some of the shorthand properties, and ways to handle explicit and implicit rows and columns. Filled with codepen-based examples, so you can dig in and tinker with the code to your heart’s content.
• Grid By Example. A set of curated CSS Grid examples.
• CSS Grid Garden. A great game-based learning tool.

Free Course

• CSS Grid | Wes Bos. Great intro course, taught by Wes Bos and sponsored by Firefox so completely free to you or I.

Paid Courses

• CSS Essentials: Getting Started with CSS Grid. This is a shorter intro course, and kind of a special case on the “Paid” side as it is through Skillshare (included for members, and you can get 2 months free though this referal link). It’s by Rachel Andrew, who as mentioned above is one of the foremost experts on CSS Grid.
• Ultimate CSS Grid Course: From Beginner to Advanced. The most comprehensive course I could find that focused exclusively on CSS Grid

5. GraphQL

GraphQL is one of the big up-and-coming things, and I think 2019 may be the year it really starts to hit the mainstream.

It has been getting a lot of buzz of course, especially in the react ecosystem, but npm’s data shows that buzz is also coming with extremely rapid usage growth.

I’m not sure how many jobs are yet requiring GraphQL, so this may not be an immediate money-maker, but from a motivation & momentum standpoint learning this now will put you in a very good position for the future.

Free Resources

• GraphQL.org Docs. The official documentation here seems pretty good, though I’m new to this (it’s on my list for the year) so I haven’t tried them out that much.
• The Road to GraphQL. A free book (though does require email signup), along with the option of a paid upgrade that gives you a bunch of starter templates and related.
• GraphQL Weekly. A weekly newsletter roundup of GraphQL related articles

Free Courses

• How To GraphQL. Free and open source, a combination of video and written tutorials.

Paid Courses

Depending on your frontend framework:

• GraphQL with React: The Complete Developers Guide
• GraphQL with Angular & Apollo - The Full-stack Guide
• Full-Stack Vue with GraphQL - The Ultimate Guide

Framework independent (but focused on backend)

• The Modern GraphQL Bootcamp

Wrapping Up

There you have it. My top 5 recommended topics to learn about for frontend development in 2019.