Keyboard Shortcuts

Work faster with keyboard shortcuts

Learn the essential keyboard shortcuts that every web developer uses daily.

💡 The Concept

Coders use keyboard shortcuts, and you need to learn them to work efficiently. When you apply for coding jobs, hiring managers expect you to use them. If they see you right-click to copy and paste during a job interview, that could be a mark against you. Experienced programmers use keyboard shortcuts.

Most shortcuts use the Command key on a Mac (labeled command or ⌘ on your keyboard) or the Ctrl key on Windows. In documentation and tutorials you will see it abbreviated as Cmd.

The most important keyboard shortcut to learn is Cmd/Ctrl + Z (Undo). It is your safety net when coding: it lets you experiment freely and step back whenever something goes wrong.

Editing

Shortcut (Mac / Windows)	What It Does
`Cmd + C` / `Ctrl + C`	Copy
`Cmd + X` / `Ctrl + X`	Cut
`Cmd + V` / `Ctrl + V`	Paste
`Cmd + Z` / `Ctrl + Z`	Undo
`Cmd + Shift + Z` / `Ctrl + Y`	Redo
`Cmd + A` / `Ctrl + A`	Select All

Workflow

Shortcut (Mac / Windows)	What It Does
`Cmd + S` / `Ctrl + S`	Save
`Cmd + R` / `Ctrl + R`	Refresh the browser
`Cmd + F` / `Ctrl + F`	Find (search on the page or in a file)
`F12`	Open browser DevTools

If you forget a shortcut, right-click anywhere on the screen. Most programs display the keyboard shortcut next to each menu item, so you can look it up and start learning it. The more you use a shortcut after spotting it in a menu, the faster it becomes automatic.

Make a big mistake? The most important shortcut is command/control Z.

Exercise: Try It Yourself

If you already use keyboard shortcuts regularly, you can skip this exercise. If not, this will help you build the habit.

Step 1. Copy the list below and paste it into a text file (Notepad on Windows, TextEdit on Mac):

Sperm whale
Killer whale
Pilot whale
Humpback whale
Chimpanzee
Orangutan
African elephant
False Killer Whale
Gray whale

Step 2. Using only keyboard shortcuts, rearrange the list into alphabetical order. To move a line, select it, cut it (Cmd/Ctrl + X), click where it belongs, and paste it (Cmd/Ctrl + V).

Step 3. When you make a mistake (and you will!), use Cmd/Ctrl + Z to undo and try again.

Step 4. Press F12 in your browser to open DevTools and look around.

Step 5. Press Cmd/Ctrl + F and search for a word on this page.

❓ Frequently Asked Questions

Do these shortcuts work in all programs?

Most of them work across nearly every application on your computer — text editors, email, word processors, code editors, and browsers. A few are browser-specific, like Cmd/Ctrl + R for refresh and F12 for DevTools, but the core shortcuts (copy, paste, undo, save) are universal.

What is the difference between Cut and Copy?

Copy leaves the original in place and puts a duplicate on the clipboard. Cut removes the original and puts it on the clipboard. Both are followed by Paste to place the content somewhere new. Use Cut when you want to move something; use Copy when you want to duplicate it.

Does Cmd/Ctrl + R clear the browser cache?

A regular refresh (Cmd/Ctrl + R) reloads the page but may serve some files from cache. To force a full reload that bypasses the cache, use Cmd + Shift + R on Mac or Ctrl + Shift + R on Windows. This is useful when you have made CSS or JavaScript changes that are not showing up.

What is the Find shortcut useful for in web development?

Cmd/Ctrl + F opens a search bar that lets you search for any word or phrase. In a browser, it searches the visible page. In a code editor, it searches your file. This is invaluable for finding a specific CSS property, a class name, or a piece of text in a long file.

Why is Undo so important when coding?

Coding involves a lot of trial and error. Undo lets you step back through your changes one at a time, which means you can experiment freely without fear of breaking something permanently. Most editors keep a long undo history, so you can go back many steps.

What are DevTools?

DevTools (Developer Tools) is a built-in panel in every major browser that lets you inspect HTML, view and edit CSS live, check for JavaScript errors, and see how fast your page loads. Press F12 in any browser to open it. It is one of the most useful tools a web developer has.

★ Key Takeaways

Keyboard shortcuts are small habits that add up to big time savings. The ones in this lesson work across almost every program you will use as a developer. The more you use them, the more automatic they become.

Next Lesson: What Is a Framework?

← Back to Special Topics Lessons

← Back to All Lessons