The search engine DuckDuckGo is best known for its privacy-respecting, tracking-free web searching. But did you know it can also be a web designer’s best friend through its long list of in-built cheat sheets?
When you’re stuck and can’t remember that one little code snippet, or that keyboard shortcut in your favorite code editor, just enter <language / tool name> cheat sheet into DuckDuckGo and the chances are good you’ll immediately be presented with a cheat sheet and a rapid solution to your problem.
In this article we’re rounding up twenty of the most useful DuckDuckGo cheat sheets for web designers. I’ll also be listing some tutorials, courses, quizzes, and other resources if you’re interested in learning more about each topic. Let’s check them out!
Markup
To begin with, let’s look at a couple of cheat sheets for the most integral part of web design: the markup we use to create content.
1. HTML Cheat Sheet
The HTML cheat sheet covers everything from the basics of a page through to elements for forms, content sectioning, images and multimedia, embedded content, text content, inline text semantics and scripting.
- Direct Link: HTML Cheat Sheet
- Tuts+ Learning Guide: The Best Way to Learn HTML
2. Markdown
Markdown isn’t super complex, and that’s great news because it means the whole language fits pretty much entirely in this cheat sheet. Want a refresher on referencing links or creating sub list items? It’s all here.
- Direct Link: Markdown Cheat Sheet
- Tuts+ Tutorial: Markdown: The Ins and Outs
CSS
With our markup all sorted out, let’s take a look at some cheat sheets to help us with styling via CSS.
3. CSS Cheat Sheet
There’s a lot to CSS, so you won’t find all of its ins and outs covered in this cheat sheet, but you’ll definitely find the most essential components, including stylesheet insertion and general syntax, as well as properties for text, the box-model, backgrounds, lists, fonts and position. This one is particularly good for newer web designers.
- Direct Link: CSS Cheat Sheet
- Tuts+ Learning Guide: Learn CSS: The Complete Guide
4. Sass
If preprocessors are your bag, this Sass cheat sheet might be just what you need. It focuses on Sass’ in-built functions, great for when you need to manipulate colors and work with numbers.
- Direct Link: Sass Cheat Sheet
- Tuts+ Course: 14 Days to Learn Sass
5. Flexbox
Let’s be honest, who hasn’t spent an inordinate amount of time checking on the correct properties and values when working with flexbox? This cheat sheet is all set to make that process a lot easier from here on out, with at an at-a-glance summary of the values that correspond with the display, align-items, flex-direction, flex-wrap and justify-content properties.
- Direct Link: Flexbox Cheat Sheet
- Tuts+ Course: 6 Flexbox Projects for Web Designers
JavaScript
Now we have the markup and styling covered, it’s time to get some cheat sheets to help us add a little extra functionality flavor.
6. JavaScript Methods
The vanilla JS cheat sheet focuses on core JavaScript methods. This is super helpful for working with arrays, strings, math and other JS fundamentals.
- Direct Link: JS Methods Cheat Sheet
- Tuts+ Course: JavaScript for Web Designers
7. ES6
Are you making the transition over to ES6? If so, this cheat sheet will help you along the way with syntax guidance for declarations, functions, classes, arrays, proxies, promises, modules and iteration.
- Direct Link: ES6 Cheat Sheet
- Tuts+ Quiz: JavaScript ES6, Do You Know the Right Tool for the Job?
8. jQuery
The jQuery cheat sheet is one of the larger and more comprehensive examples, and you’re pretty likely to find whatever information you’re looking for here. It covers selectors, events, traversing, CSS manipulation, markup manipulation, ajax, utilities, events and effects.
- Direct Link: jQuery Cheat Sheet
- Tuts+ Course: Introduction to jQuery
9. AngularJS
This cheat sheet describes itself as “a quick reference” and gives you core information on AngularJS services and directives.
- Direct Link: AngularJS Cheat Sheet
- Tuts+ Learning Guide: Learn AngularJS
10. React
Much like the AngularJS cheat sheet, the React cheat sheet is dubbed a “quick reference” and gives you essentials on the ReactDOM, components and lifecycle methods.
- Direct Link: React Cheat Sheet
- Tuts+ Learning Guide: Learn React
11. CoffeeScript
The CoffeeScript cheat sheet provides syntax guidance on variables, operators, aliases, functions and arrays, and it also gives you quick access to seeing what commands to run in a terminal to compile or evaluate CoffeeScript on the fly.
- Direct Link: CoffeeScript Cheat Sheet
- Tuts+ Course: Cleaner Code With CoffeeScript
Frameworks
It’s not just languages that get DuckDuckGo cheat sheets; frameworks do too! The two framework behemoths are currently represented: Bootstrap and Foundation.
12. Bootstrap
Quickly look up exactly which class to apply when creating grids, responsive layouts, navbars, tables and buttons with this Bootstrap cheat sheet.
- Direct Link: Bootstrap Cheat Sheet
- Tuts+ Course: Building WordPress Themes With Bootstrap
13. Foundation
The Foundation cheat sheet gives you a full list of classes for large, medium and small grid creation, as well as buttons, colors and random utilities.
- Direct Link: Foundation Cheat Sheet
- Tuts+ Course: Getting Started With Foundation 6
Code Editors
In another category of non-language cheat sheets we have these helpful entries for code editors, which help you check up on each program’s default keyboard shortcuts.
14. Atom
The cheat sheet for Atom gives you shortcuts for working with Github integration, file management, line editing, find & replace, view settings, and some additional general controls.
- Direct Link: Atom Cheat Sheet
- Tuts+ Tutorial: Tips and Extensions to Make Your Atom Awesome
15. Sublime Text
Sublime Text is a fairly keyboard shortcut-friendly application so there’s quite a bit in this cheat sheet. Check out the controls for general use as well as working with marks, tools, file navigation, folding, selection, views & windows, word manipulation, finding and line manipulation.
- Direct Link: Sublime Text Cheat Sheet
- Tuts+ Course: Perfect Workflow in Sublime Text
16. Visual Studio Code
Like Sublime, Visual Studio Code serves up quite a few keyboard shortcuts to work with. In this cheat sheet you’ll find the controls for basic editing, rich languages editing, display settings, navigation, file management, window management, debugging and tasks.
- Direct Link: Visual Studio Code Cheat Sheet
- Tuts+ Tutorial: Visual Studio Code: My New Favorite Code Editor
- Tuts+ Course: Essential Extensions for Visual Studio Code
17. Brackets
Brackets shortcuts are a little simpler than the aforementioned applications, so in this cheat sheet you’ll find controls for editing, files, navigation, view settings and debugging.
- Direct Link: Brackets Cheat Sheet
- Tuts+ Course: Introduction to Brackets
- Tuts+ Course: Essential Extensions for Brackets
Extras
There are a few extra cheat sheets that are helpful for web designers but don’t fall into the above categories. Let’s take a look.
18. PHP
PHP remains a core language for web designers working with WordPress and other PHP driven CMSs. Get a refresher on some of its main functions and constructs in this cheat sheet, including language constructs, file functions, array functions, string functions, sorting functions and date functions.
- Direct Link: PHP Cheat Sheet
- Tuts+ Course: PHP Fundamentals
19. Git
Git is an ever useful tool in the web designers kit, but transitioning from using git via a GUI to working with command line can be quite a task. This cheat sheet will help you along with commands for reviewing history, configuration, refactoring filenames, redoing commits, debugging, creating repositories, making group changes, making changes, synchronizing changes and saving fragments.
- Direct Link: git Cheat Sheet
- Tuts+ Course: Introduction to Git and GitHub
20. npm
Last but not least, we have a guide to npm commands so you can take advantage of that package management goodness. This cheat sheet covers “getting started” commands, package installation, package uninstallation, and checking package details.
- Direct Link: npm Cheat Sheet
- Tuts+ Tutorial: How to Install NPM and Bower
Wrapping Up
So there we go, twenty awesome web design cheat sheets you can bring up in seconds, any time you need them, via the privacy focused search engine DuckDuckGo!
Be sure to take advantage of them when you’re working on your next web design project.
Do you know any more awesome DuckDuckGo cheat sheets? Share them in the comments below!
