Unlike the development model of a few years ago, when we do front-end design or development today, we often have to combine many different technologies, frameworks, and different tools. It is not easy to get used to these new things, especially to master them, especially when it takes a long time to remember the commands and syntax. Many people turn to books or search the Internet to use them, but this can make you less productive. I start with good Cheat sheets. They are usually only one or two pages long, but they are scientifically summarized and designed to help me quickly find shortcuts to commands, grammar rules, or tools THAT I need, thereby greatly increasing my productivity. Here are some Cheat sheets that I’ve compiled at work that are useful for both designers and front-end development.
HTML5 & CSS
CSS Cheatsheet
This Cheat Sheet contains common syntax for CSS selectors, box models, backgrounds, colors, fonts, and more, along with instructions.
HTML5 Cheet Sheet [TAGS]
HTML5 introduces a lot of new tags, and this Cheet Sheet breaks down those new tags in HTML5 into a separate section that lets you quickly learn how to use them.
HTML5 Cheet Sheet
An HTML5 Cheet Sheet, designed by Antonio Lupetti, summarizes HTML5 tags in a novel way.
HTML element index
HTML Elements Index contains all HTML Elements and is indexed alphabetically.
JavaScript & JQuery
JavaScript Cheet Sheet
JQuery API quick reference site
JQuery Quick API Reference this site contains all oF the jQuery apis, and clicking on an API will take you directly to the official documentation. In addition, you can query based on different versions of JQuery, which is very convenient.
Popular front end library
Bootstrap 3 – Cheat Sheet
Bootstrap is probably the most popular CSS framework out there. Here is a Cheat Sheet for Bootstrap 3, with instructions for adapting to Grid systems and different devices.
Font Awesome Icon Reference
Every time you use Font Awesome you have to go to the website and look up the icon you want. For those unfamiliar with English words, searching for an icon can be a bit of a headache as the icon library expands. With this Font Awesome icon reference, just print it out, put it on your desk, and you’ll find the icon you want when you need it.
Bootstrap 3 Glyphicons Cheatsheet
Bootstrap 3 Glyphicons Cheatsheet is another set of ICONS that are very commonly used, especially when using Bootstrap.
Design tools
Sketch Shortcuts Cheatsheet
Skech has become a UI design tool I have used most often. I will use Sketch to complete a complete UI plan or a small picture. Here are some common shortcuts used in Sketch.
Adobe CC Cheat Sheet
THE ULTIMATE ADOBE CREATIVE CLOUD KEYBOARD SHORTCUTS CHEAT SHEET contains SHORTCUTS for all Products in THE ADOBE CC series. For the full version, please refer to the resource links provided at the bottom)
Adobe Illustrator CS6 Shortcuts Cheatsheet
Adobe Photoshop CS6 Shortcuts Cheatsheet
The development tools
Sublime Text 3 (OSX) Cheat Sheet
PDF version (refer to resource links at the bottom for PDF version).
Atom Editor Cheat Sheet
Atom is Github’s cross-platform text editor for programmers. Has a concise and intuitive graphical user interface, and has a lot of interesting features: support CSS, HTML, JavaScript and other web programming
Markdown
Markdown Cheatsheet
Markdown is the standard for many development or design documents because of its simplicity and efficiency. The Cheat Sheet below contains common grammatical standards found in Markdown.
Developer tools in the browser
Chrome Devtools Cheatsheet
Chrome comes with a very powerful developer tool that you can control with keyboard shortcuts to speed up your application debugging.
Firebug Cheatsheet
Firebug Cheatsheet, a powerful website debugging plugin for Firefox, contains all the shortcuts.
The operating system
Command Line Cheat Sheet
This Cheat Sheet contains the most commonly used Linux command lines, along with examples of their use.
Git & GitHub
Git Cheat Sheet
Git has replaced SVN as the most popular version control and distribution collaboration tool. This Cheat Sheet can help you quickly find the commands you need.
Conclusion:
These are just a few of the Cheat sheets that I recommend you collect and use on a regular basis to greatly improve your development or design. (As some Cheat sheets are in PDF version, I have shared them with the craftsmen club, students who need them can access them)
Jane book signed by: technical craftsman, welcome to share the above content to circle of friends/micro blog, etc.