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 applications
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 ⌘ |
|
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
- Computer shortcuts: Navigating applications
- Computer shortcuts: Navigating text
- Computer shortcuts: Manipulating files & folders
- Computer shortcuts: Browser shortcuts
Supplemental links
For code editors
- Atom Keyboard Shortcuts
- Atom Editor Keyboard Shortcut Cheat Sheet
- Visual Studio Code Key Bindings
- Atom Vim-mode Plus
- Vim key bindings for VSCode