Top 5 Frontend Development Topics to Learn - Jan 2024

#frontend #developer #learning #update #2024

Ah, Today or anytime.

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.

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 recommendI’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, but I’ve done my best to not let that influence what I recommend and to make sure I have free options throughout as well.

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.

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.

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 Maximilian Schwarzmüller.

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 [Updated]. 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 one of the most current favorite frameworks, 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.

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.

• 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 this year 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 so I haven’t tried them out that much.

• 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 wiht React: The Complete Developers Guide

Framework independent (but focused on backend)

• The Modern GraphQL Bootcamp