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!
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.
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.
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.
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.
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
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.
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
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.
This cheat sheet describes itself as “a quick reference” and gives you core information on AngularJS services and directives.
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.
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.
It’s not just languages that get DuckDuckGo cheat sheets; frameworks do too! The two framework behemoths are currently represented: Bootstrap and Foundation.
Quickly look up exactly which class to apply when creating grids, responsive layouts, navbars, tables and buttons with this Bootstrap cheat sheet.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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!
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post