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.
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.
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.
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.
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.
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.
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.
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.