CodeinWP CodeinWP

A Huge List of Summer Learning Resources for Front-end Devs

As summer officially approaches, you might find a little down time during a vacation or other weekend getaway to do some reading, watching, or listening — or maybe even take a full-blown online course of some sort in order to pick up a new skill.

In the past, I did the occasional “Learning Tools” issue in my newsletter, where I would list resources like these. But because I have so many regular tools to include, I’ve stopped doing those for now. My list of learning resources is still pretty big, so I thought a roundup here would be appropriate. Enjoy!

Free Online React Bootcamp

The bootcamp itself is finished, but you can view about 7 hours of recordings and sign up for future bootcamps.

React Bootcamp


The Beginner’s Guide to React

This course is for React newbies and those looking to get a better understanding of React fundamentals. With a focus on React fundamentals, you’ll come out of this course knowing what problems React can solve for you and how it goes about solving those problems. You will have a good grasp on what JSX is and how it translates to regular JavaScript function calls and objects.

The Beginner’s Guide to React


The Complete React Web Developer Course

Learn how to build and launch React web applications using React, Redux, Webpack, React-Router, and more!

The Complete React Web Developer Course


React Armory

Learn React by itself. No npm, no webpack, no Redux, no Router. You’ll learn React’s fundamentals by building an animated fractal.

React Armory


React in Patterns

A free online book about common design patterns used while developing with React. It includes techniques for composition, data flow, dependency management, and more.

React in Patterns


Testing React with Enzyme and Jest

A video series to enable you to test React components thoroughly, refactor with confidence and abstract logic out of components.

Testing React with Enzyme and Jest


Redux Course

A course for those already familiar with JavaScript and React, to help understand Redux and see how it can benefit their React apps.

Redux Course


Master React Native Animations

Simple, easy to follow, step-by-step lessons for every type of animation. This is a lengthy 3-part course made up of more than 60 videos to show you how to build animations with React Native.

Master React Native Animations


Learn Bootstrap 4

For those new to Bootstrap or those not yet familiar with version 4, this is a Scrimba course of 10 interactive screencasts that will take you through everything you need to know to create full-blown websites with Bootstrap 4.

Learn Bootstrap 4


Learn CSS Variables

Also a Scrimba course, this one is 8 interactive screencasts covering CSS variables (aka CSS Custom Properties).

Learn CSS Variables


Learn CSS Grid

Yet another Scrimba course covering CSS Grid in the form of 14 interactive screencasts.

Learn CSS Grid


CSS Grid by Wes Bos

Mr. course-master himself, Wes Bos, has released this free 4-hour course covering CSS Grid Layout.

CSS Grid by Wes Bos


Master CSS Grid

Video tutorials and resources to help you master CSS Grid Layout.

Master CSS Grid


CSS Grids for Everyone

Bite-size episodes teach you CSS Grid in this Laracasts course.

CSS Grids for Everyone


Grid Critters

An extensive interactive course to help you master CSS grids.

Grid Critters


Vue.js 2.x by Example

Learn the fundamentals of Vue.js with this book by creating complex Single Page Applications with Vuex, vue-router, and more.

Vue.js 2.x by Example


Code Super Mario in JS

A 14 episode YouTube series showing you how to create the classic Super Mario Bros. game using JavaScript.

Code Super Mario in JS


Functional-Light JavaScript

This book explores the core principles of functional programming (FP) as they are applied to JavaScript.

Functional-Light JavaScript


Introduction to ES6+

One more Scrimba course, this time consisting of 14 interactive screencasts covering new features introduced in the ECMAScript specification in recent years.

Introduction to ES6+


JS Party

A JavaScript podcast with a number of different participants who are well known in the JavaScript community.

JS Party


Fun Fun Function

An informative and entertaining YouTube show by former Spotify engineer Mattias Petter Johansson.

Fun Fun Function


Practical AWS Training

Complete and detailed training to master common AWS services, designed for beginner, intermediate, and advanced levels.

Practical AWS Training


Hacker101

A free class for web security. Whether you’re a programmer with an interest in bug bounties or a seasoned security professional, Hacker101 has something to teach you.

Hacker101


Learn Git

An interactive Codecademy course covering the popular version control system.

Learn Git


Let’s Build Instagram From Scratch with Ruby on Rails

A free book that teaches you to build an Instagram-like app from scratch using Ruby on Rails.

Let’s Build Instagram From Scratch with Ruby on Rails


Got Any More?

If you know of any other books, courses, podcasts, or other learning resources, drop them in the comments and I’ll consider them for a future post.

8 Responses

  1. fernando says:

    I found CSS Grid Garden and Flexbox Froggy to be fun ways to learn css too.

  2. Kyle Mani says:

    Thanks for sharing the great stuff about Learning Resources for Front-end Devs

  3. Carmen says:

    React vs AngulerJS, which is best for future opportunity?

  4. Hi All
    which programming language is more power full and most useful ? e.g python,java ?

  5. Veni watson says:

    I also found CSS Grid Garden and Flexbox Froggy to be fun ways to learn CSS too.

  6. Ahsan says:

    These online courses are good to learn. AI is famous these days.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).