Useful Guides for Front-End Developers

Over the last years, we’ve seen noticeable growth in an entirely new generation of web applications. These apps have become much more complicated, leading to a huge increase in complexity of the front-end. As a result, front-end developers are becoming more and more needed.

The most important part of every front-end developer is to be up to date and stay familiar with all the new tools, trends, and workflows. Around the Internet there are lots of useful information about front-end news and trends, but sometimes it’s too hard to find and to read all of them. Therefore, we’ve collected the most useful docs and guides about the front-end world.

The resources provided below are a great way to bookmark a few things, maybe for some evening or weekend reading.

1. Superhero.js

superherojs1

A collection of great help articles, presentations, and videos to create, test, and maintain a large JavaScript code base.

2. Static Web Apps – A Field Guide

static-apps

This guide provides the basic information on static web applications and offers solutions to common challenges that can appear while building these apps. The main idea of this guide is to promote an architecture that eases the development process.

3. JavaScript: The Right Way

js-the-right-way

A guide that can introduce new developers to JavaScript and help experienced developers to learn more about its best practices. This guide collects articles, tips, and tricks from the best front-end developers.

4. Open Web CSS Reference

open-web-css-reference

A comprehensive alphabetical list of CSS Properties with data types, functions, media types, at-rules, and descriptors. It also includes links to the spec for everything listed.

5. CSS Values

css-values

The site provides an easy way to look up a CSS property and quickly view the possible values. Also it includes browser support charts for each property that is powered by caniuse.com

6. Liquidapsive

liquidapsive

A very simple website that lets you choose between Responsive, Adaptive, Liquid, and Static layouts, so you can see what is the difference between the four layout types.

7. Web Accessibility Checklist

web-accessibility-checklist

A useful site to help you check off various items on your projects for accessibility. It looks pretty simple, but it’s a good idea to have a final look, in addition to perform accessibility validating.

8. HowToCoffeeScript.com

hotocoffescript

A simple sheet for learning and remembering CoffeeScript syntax.

9. The Elements of HTML

elements-html

A one-page chart of HTML and XHTML elements that indicates which specification the elements belong to.

10. The HTML Landscape

the-html-landscape

A W3C document that describes the differences between three HTML specifications: WHATWG, W3C’s HTML5.0, and W3C’s HTML5.1.

11. JavaScript Equality Table

js-equality-table

A nice comparison chart that helps you to understand JavaScript’s double- and triple-equals operators.

12. OverAPI.com

over-api

This is a site that is collecting all the cheat sheets. The cheat sheets will link to the relevant authoritative resources (MDN, PHP.net, etc.)

13. The HTML5 JavaScript API Index

the-html5-javascript-api-index

A comprehensive source to search for HTML5 API info. HTML 5 JavaScript API index is automatically generated from the HTML 5 specification documents. It’s easy to navigate through the site using the 3-paned view.

14. Zeal

zeal

It’s a simple offline API documentation browser that lets you search 130+ API docs offline. You can display Zeal from any place in your workplace using a simple keyboard shortcut.

15. jsCode

jscode

An app that enables you to create your own custom JavaScript coding guidelines. Also you can check the custom guides created by others and share you own with friends or coworkers.

Hope that these resources can help you to improve your front-end development skills. If you know of any useful guides or docs that should be added to that list, then you’re welcome to share them with us in the comments.