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 bit stale and we are all certainly guilty of this.
Every once in a while it is good to take a few minutes, or hours, to sharpen our coding skills by learning a new technology, API, or library. Or even maybe there’s an area you’re familiar with but want a more in-depth refresher.
Today in this post you find a collection of 12 great learning resources, which includes guides, cheat sheets, so you can level up your skills in more areas of front-end development.
1. The Modern JavaScript Tutorial
The Modern JavaScript Tutorial is 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.
2. Modern JS Cheatsheet
This resource is a cheatsheet for JavaScript you will frequently encounter in modern projects and most contemporary sample code. This guide is not intended to teach you JavaScript from the ground up, but to help developers with basic knowledge who may struggle to get familiar with modern codebases (or let’s say to learn React for instance) because of the JavaScript concepts used.
3. The Ultimate Guide to CSS for Email Clients
The popular email marketing and service provider, Campaign Monitor, has had a CSS email guide and 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 are available in.
4. Bootstrap 4 CheatSheet
A handy categorised cheat sheet for Bootstrap 4, the popular front-end web framework, with a one-click option to highlight the stuff that’s in Bootstrap 4. Click on a category, then click on any item to view code and a live preview of the selected component.
5. CSS Cheat Sheet
A simple to use one-page reference for CSS selectors and properties. It also includes categories for Flexbox and CSS Grid.
6. HTML5 Mobile Feature Checker
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.
7. Essential Image Optimization
A detailed guide to image optimisation and this guide talks about different image types, optimisation techniques, automation tools, content delivery networks, and lots more.
8. Learn Git
Git is probably the 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. The guide covers Git and version control basics, installation and setup, and lots more.
9. Learn Regex the Easy Way
A comprehensive guide to getting 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.
10. React Express
A chapter based tutorial and guide to learning to build web apps with React. This guide discusses setting up your environment, build tools, JSX, along with all the fundamentals of getting started with writing apps in React.
11. 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.
12. Block, Element, Modifier
The Block, Element, Modifier methodology (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between the HTML and CSS in a given project. This guide is here to helps you to create reusable components and code sharing in front-end development
