HTML & CSS
Article

20 More Docs and Guides for Front-End Developers

By Louis Lazaris

To start out the week, you might be in the mood to learn something new or maybe refine your abilities in a particular language or technology on the front-end.

In April, I put together a collection of useful docs and guides, which was a pretty popular post. Since then I’ve collected quite a few more. Enjoy!

1. Adobe Web Platform Team

The newly-designed Adobe Web Platform site with lots of info and examples of new technologies on the web platform. Includes content on SVG, CSS Regions, Filters, Web Extensions and more. Many of these are emerging standards that the Adobe team is contributing to in the spec, so the website showcases some of these with links to the spec and code examples.

Adobe Web Platform Team

2. Flexbox Cheatsheet Cheatsheet

Joni Trythall’s ‘cheatsheet based on cheatsheets’ to help with understanding Flexbox. It’s a ‘flow chart decision tree-ish thing’ that covers the different aspects of the Flexbox spec, so you can visualize everything at a glance. Available as a PNG image right on the page or as a full-size PDF.

Flexbox Cheatsheet Cheatsheet

3. Flexy Boxes

A Flexbox playground and code generator. I like all the extra options on this one. Each feature has a help description next to it, and you also have the option to use RTL writing mode, generate legacy code, and view only the standard CSS version of the code without prefixes.

Flexy Boxes

4. Grid by Example

An extensive resource by Rachel Andrew covering usage examples for CSS’s Grid Layout Module. Includes lots of related external links as well as detailed coverage of the various parts of the spec, with visual examples.

Grid by Example

5. CSS Guidelines

Harry Roberts’ “high-level advice and guidelines for writing sane, manageable, scalable CSS.” There’s lots in here for all levels of CSS developers.

CSS Guidelines

6. Foundation 5 Cheat Sheet

A one-page (albeit a long page) reference site for quickly looking up class names used in the various parts of ZURB’s popular front-end framework. I like that it contains examples of the components directly on the page, with the necessary predefined classes listed near each component.

Foundation 5 Cheat Sheet

7. Cheetyr

“A handy collection of cheatsheets and shortcuts to speed up the work of designers and developers.” The project is still growing, but for now includes searchable cheat sheets for CSS, Git, Vim, Photoshop, Illustrator, and InDesign.

Cheetyr

8. keyCod.es

A nice quick reference to help you get the correct code for different keys on the keyboard. This comes in handy if you’re using event.keyCode or event.which in your scripts to figure out what key was pressed.

keyCod.es

9. AngularJS Style Guide

“A starting point for AngularJS development teams to provide consistency through good practices.” Really extensive documentation that covers more than 20 categories in AngularJS syntax.

AngularJS Style Guide

10. Poor Man’s Styleguide

“It’s a quick-and-dirty frontend styleguide, designed to be copied and pasted into your CMS.” The code for all the different elements is provided in HTML and Markdown, with all the default styles displayed on the page.

Poor Man's Styleguide

11. Web Fundamentals

Google Developers’ “best practices for modern development”. Covers a number of different areas including multi-device layouts, forms, and it even has a section on monetization.

Web Fundamentals

12. CSS PRE

A “one-stop reference” for comparing the different CSS preprocessors. Includes a blog section, a comparison chart, and a set of conversion tools for Less, Sass, and Stylus.

CSS PRE

13. GitHub Cheat Sheet

“A list of cool features of Git and GitHub.” Even if you’re an advanced Git/GitHub user, you’ll definitely find something in here you’ve never seen before.

GitHub Cheat Sheet

14. HTML Vocabulary

Similar to the “CSS Vocabulary” that I featured in the last collection, this one focuses on the different parts of HTML.

HTML Vocabulary

15. iOS Human Interface Guidelines

This is available on the iTunes store for free. It’s primarily for iOS app developers but there are some general UI design principles discussed here that could be valuable for web platform developers/designers. This should be great for helping make web-based responsive sites comply with many of the design principles that make native apps more usable.

iOS Human Interface Guidelines

16. HTML5 Cheat Sheet

This is a really nicely designed HTML5 tag cheat sheet. It’s available as a PNG or PDF in a printable format, if you want to have it as a handy hard copy.

HTML5 Cheat Sheet

17. jQuery Coding Standards & Best Practices

One developer’s set of best practices for writing jQuery. You might not agree with everything described, but you’ll no doubt find some of the suggestions worth considering.

jQuery Coding Standards & Best Practices

18. HTML5 Game Engines

This is really cool. It’s a comparison of various libraries for creating HTML5-based games. Each entry offers lots of details, cost (if any), tags for filtering, and the page even includes Amazon-like user ratings and reviews.

HTML5 Game Engines

19. You Might Not Need jQuery

You may have seen this one already, because it was pretty popular when it came out. It’s an overview of many of the vanilla JavaScript equivalents of various jQuery methods. But take note of the follow-up document created by some experienced jQuery devs, which points out why you shouldn’t be too quick to ditch jQuery.

You Might Not Need jQuery

20. Airbnb JavaScript Style Guide

A style guide from the developers of the popular international lodging website. Not necessarily something you’d follow strictly, but like any style guide, you might pick up some tidbits that you can incorporate into your own work.

Airbnb JavaScript Style Guide

Got More?

If you’ve written a tool or style guide for mastering some aspect of front-end languages or technologies, share it in the comments and maybe I’ll include it in a future post.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • http://www.codylindley.com/ cody lindley
  • Jen

    This is awesome. Thanks heaps

  • LouisLazaris

    That’s great, @codylindley:disqus, thanks for mentioning it. I always love your stuff. :)

  • Aurelio De Rosa

    Great list @LouisLazaris:disqus. I saved a couple of those links for a later read. Thank you.

  • Phil

    uuurgh …

    Hours and hours of reading and “I’m proud of the knowledge I amassed” – crushing revelations ahead.

    Thanks :)

    p.s: don’t get me wrong, in a way I love it. So keep ’em coming ;)

    • LouisLazaris

      Haha, no problem. :)

      I’m just as frustrated and intimidated as anyone else, believe me! There’s so much to learn but unfortunately, the day only has 24 hours in it. :)

  • Tarabass

    Looks more handy then ‘HTML Vocabulary’, which seems very useless for me. Thanks for sharing :)

    • LouisLazaris

      Yeah, HTML vocabulary is more for beginners. I tried to include a variety of things. I didn’t know about Cody’s thing. Would definitely have included that too, as it’s better than many of the ones I included. :)

  • http://ericnjanga.com Eric Njanga

    Great article Louis. This is an excellent list to consider.
    Thank you.

  • sudheer

    Thanks for including foundation cheat-sheet..

  • vandana

    extremely helpfull …. Thanks

  • http://hostviet.info/ Nguyễn Minh Khôi

    A great introduction. This is my first time seeing CSS Guideline from Lonelyplanet!

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.