18 Learning Resources for Front-end Developers

As many of you are aware, it’s tough to keep up with what’s new in web development. Even from a front-end perspective alone, it can be easy to fall behind and allow our skills to become a little stale. I’m certainly guilty of this.

So every once in a while it’s good to take a few minutes, or even a few hours, to sharpen your coding skills by learning a new technology, API, or library. Or maybe there’s an area you’re already familiar with but want a more in-depth refresher.

To help you out in this regard, in this post I’ve collected together 20 learning resources — which includes interactive sites, guides, cheat sheets, and lots more — so you can level up your skills in more areas of front-end development.

1. CSS Grid Playground

A visual guide produced by the Mozilla team to help you learn CSS’s new Grid Layout features, with lots of code example and demos. The guide works as somewhat of a promo for the Firefox Developer Edition browser, but this is still an excellent guide that will be useful for anyone just getting started with CSS Grid.

2. Modern JavaScript Cheatsheet

This collection of JavaScript tips and concepts by Manuel Beaudru works as a nice overview of many of the things you’ll need to be familiar with if you’re just getting started with a modern framework like React, or any large codebase that uses new ES6 features. So this would not be a good starting point for JavaScript beginners, but useful for any familiar with JavaScript but not familiar with modern tooling and features.

3. CSS Support Guide for Email Clients

Campaign Monitor, the popular email marketing and service provider, has had a CSS email guide available for a number of years. The purpose of the guide is to allow you to look up a CSS feature and it will tell you what email clients and platforms that feature is available in. The guide has been recently updated to include new CSS features and new mail clients.

4. Learn Git

Git is pretty much standard in most team environments, so if you haven’t yet gotten around to understanding how to use it, this might be a decent starting point for you. It’s produced by the Microsoft Visual Studio team and the guide covers Git and version control basics, installation and setup, and lots more.

5. Learn Regex the Easy Way

A comprehensive, GitHub-based guide translated into eight languages to get you started with Regular Expressions, a skill useful in just about every programming language. Each section discusses a specific feature of regular expression syntax, with examples and live demos via a popular RegExp playground.

6. ES2015+ Cheatsheet

If you’re experienced with JavaScript, but still haven’t gotten up to speed on many of the new features introduced after ECMAScript version 5, this summary with code examples might be exactly what you’re looking for.

7. Essential Image Optimization

Performance expert and Google Engineer Addy Osmani authored this detailed guide to image optimization. He refers to images correctly as “the number one cause of bloat on the web” and talks about different image types, optimization techniques, automation tools, content delivery networks, and lots more.

8. Grid by Example

Grid Layout Module expert Rachel Andrew put together this site that gives you “everything you need to learn CSS Grid Layout”. Includes code examples, pre-built layout patterns, a video tutorial series, and lots of links for further reading.

9. React Cheat Sheet

Recently updated for the latest version of React (version 16) and the site itself is now a fully functional progressive web app (PWA) that works even offline. You can search by keyword or select one of the predefined filters.

10. React Accessibility

If you’re using a library like React, you should be concerned about potential accessibility issues due to the nature of the library. This guide in the official React docs covers some accessibility tips for React projects and includes suggestions related to WAI-ARIA, semantic HTML, forms, managing focus, and accessibility tools.

11. Polymer 2.x Cheat Sheet

This blog post by Monica Dinculescu, a Google Engineer who works on the Polymer project, serves as both a quick-reference and in-depth resource on the latest version of the popular Web Components library.

12. Bootstrap 4 Cheatsheet

A handy categorized cheat sheet for Bootstrap, the popular front-end web framework, with a one-click option to highlight the stuff that’s new in Bootstrap 4. Click on a category, then click on any item to view code and a live preview of the selected component.

13. Learn CSS Grid

Another extensive guide to Grid with a nice, clean, and simple layout. The author explains that this resource “was organized in a way I thought made the most sense when learning it.” That sounds like a good selling point for those of us overwhelmed with the number of similar resources that exist on this subject.

14. React Express

A 6-chapter tutorial and guide to learning to build web apps with React. Discusses setting up your environment, build tools, JSX, along with all the fundamentals of getting started with writing apps in React.

15. CSS Cheat Sheet

A very nicely designed and simple to use one-page reference for CSS selectors and properties. I like that this one is categorized so it can work well as a tutorial for beginners. It also includes categories for Flexbox and CSS Grid.

16. The Modern JavaScript Tutorial

A comprehensive resource for learning JavaScript, useful for all levels of JavaScript developers. The site is divided into three sections: The JavaScript language, the DOM, and other miscellaneous articles.

17. React FAQ

This is an interesting collection of React concepts in Q&A format covering a number of different subjects. Can work well as a beginner’s tutorial or even as a quick reference for experienced developers.

18. HTML5 Mobile Feature Checker

This is a reference website to get an overview of support for various Web APIs on mobile. It lists “safe” vs. the not-so-safe ones (called “unsupported”). You can click each individual feature to get detailed info on what devices and platforms support it. A website like caniuse.com might be your primary source for info like this, but this provides a little extra in terms of specific mobile devices.

Louis Lazaris is an author, freelance writer, and web developer. Louis is a co-author of HTML5 & CSS3 for the Real World, published by SitePoint, and he writes about front-end web design technologies on Impressive Webs. You can follow Louis on Twitter or contact him through his website. More articles by Louis Lazaris
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress