Cheat Sheets for Front-end Web Developers

A snippet of an HTML Help Sheet with a 'Template' tab selected, showing basic HTML structure elements and syntax examples for HTML and XHTML tags.

5 min. read
William Craig

CEO & Co-Founder
President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.

Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office and can prepare you for client questions regarding web development. In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery). So go ahead – print out your favorites and pepper your workspace with these wonderful references.

HTML/XHTML

1. HTML Help Sheet

2. HTML Cheat Sheet

HTML Cheat Sheet - Screen shot.

3. HTML Character Entities Cheat Sheet

HTML Character Entities Cheat Sheet - Screen shot.

4. XHTML Cheat Sheet v. 1.03 – PDF

XHTML Cheat Sheet v. 1.03 - screen shot.

CSS

5. CSS Cheat Sheet (V2)

CSS Cheat Sheet (V2) - screen shot.

6. CSS Cheat Sheet

PDF
HTML

7. CSS Shorthand Cheat Sheet

CSS Shorthand Cheat Sheet - screen shot.

8. CSS Level 1 Quick Reference – PDF

CSS Level 1 Quick Reference - screen shot.

9. CSS Level 2 Quick Reference – PDF

CSS Level 2 Quick Reference - screen shot.

10. CSS2.1 Quick Reference Card – PDF

11. CSS2 Reference Guide – PDF

CSS2 Reference Guide - screen shot.

JavaScript

12. JavaScript Cheat Sheet

JavaScript Cheat Sheet - screen shot.

13. Addison-Wesley’s JavaScript Reference Card – PDF

Addison-Wesley's JavaScript Reference Card - screen shot.

14. JavaScript and Browser Objects Quick Reference

JavaScript and Browser Objects Quick Reference - screen shot.

15. The most common DOM methods at a glance – PDF

16. JavaScript Quick Reference Card/Cheatsheet

17. mootools 1.2 cheat sheet

mootools 1.2 cheat sheet - screen shot.

18. jQuery Cheatsheet

jQuery Cheatsheet - screen shot.

19. jQuery 1.2 Cheat Sheet

20. jQuery Visual Map – PNG

jQuery Visual Map - screen shot.

Miscellaneous

21. RGB Hex Colour Chart

RGB Hex Colour Chart - screen shot.

22. The Web Developer’s SEO Cheat Sheet

23. The WordPress Help Sheet

The WordPress Help Sheet - screen shot.

These are great resources regardless of the size of your clients. It could be a small restaurant or a large college. Basic web design principles you can include on cheat sheets are both applicable.

Hope you picked up a cool cheat sheet or two for your web design. If your favorites aren’t on the list, don’t forget to share it with us in the comments.

President of WebFX. Bill has over 25 years of experience in the Internet marketing industry specializing in SEO, UX, information architecture, marketing automation and more. William’s background in scientific computing and education from Shippensburg and MIT provided the foundation for MarketingCloudFX and other key research and development projects at WebFX.
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more