Watch the video playlist

Computer shortcuts

Why?

Originally computers only had keyboards. And while most applications now support other devices, like mice, in many situations using the keyboard is much more efficient.

There’s a mental context switch when moving your hands from the keyboard to your mouse which can break your flow and thought process.

Lots of features are just easier with the keyboard: your fingers are already there when writing code—a couple extra keystrokes can make things much simpler & faster.

But—of course—they require practice, patience & persistence.

Symbol definitions

Shortcuts are ususally shown with a series of symbols. The symbols are thankfully written on most keyboards. But here’s a helpful overview of some important symbols.

Keys Explanation
⌘ Command
⌥ Option (Alt)
⌃ Control
⇧ Shift

Navigating between applications can make your coding process much smoother—and any computer use.

We’ll have lots of different apps open when coding: mostly our code editor & our browser. Learning to navigate beteween them quickly will help you keep in your flow.

Keys Explanation
⌘Q Will completely quit the application, not just close a window.
⌘W Will close a window or a tab.
⌘S Will save whatever file is currently active.
⌘O Will open new files.
⌘` Will cycle forwards through the last viewed windows in this application.
⌘⇧` Will cycle backwards through the last viewed windows.
⌘Tab Will go to the previously used application.
⌘Tab then Hold ⌘
  • Will display a list of all the open applications.
  • While holding ⌘ if you press Tab you can select which app to view.
  • Pressing Q while still holding ⌘ will quit that application in the background.
  • Pressing H while still holding ⌘ will hide that application.
  • Pressing 1 while still holding ⌘ will show all the windows open for that app.

Navigating text

Since, when coding, we spend so much time just moving words & letters around a box—it’s helpful to know how to do that in a more efficient manner.

Since our hands are on the keyboard already typing things, we can keep our hands on the keyboard and use them to navigate the text too—not just type the words.

Keys Explanation
⌘C Will copy some selected text.
⌘V Will paste the previously copied text.
⌘X Will copy then delete the text, cut.
⌘Z Will undo any number of changes.
⌘⇧Z Will redo the changes you undid.
⌘F Will search for some text in the document.
⌘G After finding results, will jump to the next search result.
⌘⇧G Will move backwards through the search results.
⌘➔ Will jump to the end of the line.
⌘← Will jump to the start of the line.
⌥➔ Will jump to the next word.
⌥← Will jump to the previous word.
⌘↑ Will jump to the top of the text.
⌘↓ Will jump to the bottom of the text.
Shift Arrows Will highlight text; Can be combined with ⌘ & ⌥

Manipulating files & folders

Finder is a very mouse driven interface—it was made for that purpose. But that shouldn’t stop us from using a little keyboard action to accomplish tasks more quickly.

Keys Explanation
Return Will rename a file or folder.
Space Will trigger a preview.
⌘N Will make a new Finder window.
⌘⇧N Will make a new folder in this location.
⌘ Delete Will move a file/folder to the trash.
⌘O Will open a file in the default application.
⌘D Will duplicate the file/folder.
Arrows Will move around the files.
⌘1, ⌘2, ⌘3 Will switch between “Icon”, “List” and “Column” views.

Browser shortcuts

As a web designer you’ll spend a significant amount of time in your browser. There are a few shortcuts that help exceptionally. These two will likely become your most typed keyboard shortcuts: Refresh (⌘R) & changing tabs: (⌘1, ⌘2, ⌘3, etc.)!

Keys Explanation
⌘L Will jump to the URL bar.
⌘T Will make a new tab.
⌘⇧T Will reopen a recently closed tab.
⌘1, ⌘2, etc. Will jump to a tab by it’s order in the tab bar.
⌘[ Will navigate the browser back.
⌘] Will navigate the browser forward.
⌘⇧] Will go leftwards, navigating through the tabs.
⌘⇧[ Will go rightwards, navigation through the tabs.
Tab Will jump around the web page highlighting controls you can manipulate.
Return / Space Will trigger the active control, click links or check checkboxes, etc.
Space When no control is selected it will jump down the page.
Shift Space Will jump up the page.

Video list

  1. Computer shortcuts: Navigating applications
  2. Computer shortcuts: Navigating text
  3. Computer shortcuts: Manipulating files & folders
  4. Computer shortcuts: Browser shortcuts

For code editors

Helpful apps