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.
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
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.
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.