In recent months, I’ve collected a number of different learning resources, including guides, docs, and other useful websites to help in learning different front-end technologies. I’ve rounded up some of the best ones in this post.
So please enjoy the eighth installment of our Docs and Guides series and don’t forget to let me know of any others that I haven’t yet included.
A configurable, interactive tool that allows you to view data on keyboard events, showing legacy info as well as event information as outlined in the UI Events Specification.
A one-page cheat sheet of jQuery features, covering versions of jQuery up to 1.10/2.0. Just click a feature and it will open the page from jQuery’s docs in a modal window.
Ok, this is not so much a “doc” but more of an interactive help guide where you can chat with an expert. As the site explains: “The BugRex chat is operated by a community of developers who truly enjoy helping others. Use it to understand new concepts, ask questions or fix annoying bugs.”
If you enjoyed SitePoint’s recent CSS Survey then you might also appreciate this data, compiled by the Microsoft Edge team. They scan over one million web pages quarterly to compile usage stats on CSS properties. And it’s searchable too!
A collection of resources to help you improve your workflow and to deliver better and faster websites. Resource categories include tools, articles, videos, slide decks, books, courses, and performance audits.
“A collection of front-end development features not supported by Opera Mini and some crowdsourced workarounds for them.”
Baymard Institute, an organization that does e-commerce usability research, has put together a guide to encourage developers to optimize form fields for touch keyboards. For example, how to set the appropriate type and when to use attributes like
autocapitalize, etc. The page’s forms are testable on a touch device.
An attractive and simple cheat sheet for HTML5 tags and their meanings, available as a PDF or PNG.
“Unofficial diff viewer for WHATWG HTML Standard and W3C HTML 5.1. The Diff of HTMLs provides side-by-side diff view of each section between the specifications.”
“A complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.”
Not a new project, but the site has been recently redesigned. It’s a “community-driven effort to make web accessibility easier.” Includes accessibility-related how-tos, myths, tests, tips, information on assistive technology, and more.
An interactive flexbox CodePen demo that lets you easily test the different properties and values.
The proposed standard specification for HTTP/2.
A searchable HTML tags reference specifically designed to help Spanish speakers understand HTML terminology, including audio recordings to hear the definitions in English and Spanish. It looks like the reference is still low on content, but you can contribute if able.
Nicolás Bevacqua, who has written a number of ES6 (i.e. ES2015) posts on his blog, has created this summary of all his previous articles, which works as a quick reference for ES6 features.
A simple and practical guide to help web developers get up to speed with HTTPS — what it is, how it works, and how to set it up.
Bigcommerce’s Sass style guide, influenced by SUIT CSS and Medium’s CSS.
“Case studies and experiments demonstrating the impact of web performance optimization (WPO) on user experience and business metrics.”
- Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification
- Your guide to the (sometimes overwhelming!) React ecosystem.
- The SQL style guide
- CSS Refresher Notes
If you’ve built or know of another learning resource for front-end developers, drop it in the comments and I’ll consider it for a future post.
In the meantime, here are the previous posts in this series:
- 20 Docs and Guides for Front-end Developers (No. 1)
- 20 Docs and Guides for Front-end Developers (No. 2)
- 20 Docs and Guides for Front-end Developers (No. 3)
- 20 Docs and Guides for Front-end Developers (No. 4)
- 20 Docs and Guides for Front-end Developers (No. 5)
- 20 Docs and Guides for Front-end Developers (No. 6)
- 20 Docs and Guides for Front-end Developers (No. 7)
Your First Year in Code
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers