Advertisement
  1. Web Design
  2. Cheat Sheets
Webdesign

20 Handy DuckDuckGo Cheat Sheets for Web Designers

by
Length:ShortLanguages:

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.

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.

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.

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.

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.

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.

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.

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.

9. AngularJS

This cheat sheet describes itself as “a quick reference” and gives you core information on AngularJS services and directives.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.