top of page
GeekGuy

Top 5 Frontend Development Topics to Learn - Jan 2024

Top 5 Frontend Development Topics to Learn - Jan 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

Free course

Paid course

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

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

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

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

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:

Framework independent (but focused on backend)


Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
Stationary photo

Be the first to know

Subscribe to our newsletter to receive news and updates.

Thanks for submitting!

Follow us
bottom of page