« Previous
Next »
Keyboard Shortcuts
Keyboard shortcuts speed up everything — coding, debugging, navigating the web. Here are the most useful ones for HTML developers.
Browser (works in most browsers)
| Shortcut | Action |
|---|---|
| F12 or Ctrl/Cmd + Shift + I | Open developer tools. |
| Ctrl/Cmd + U | View page source. |
| Ctrl/Cmd + Shift + R | Hard reload — bypass cache. |
| Ctrl/Cmd + F | Find in page. |
| Ctrl/Cmd + + / - | Zoom in / out. |
| Ctrl/Cmd + 0 | Reset zoom. |
VS Code
| Shortcut | Action |
|---|---|
| Ctrl/Cmd + P | Quick open by filename. |
| Ctrl/Cmd + Shift + P | Command palette. |
| Ctrl/Cmd + D | Add next match to selection. |
| Ctrl/Cmd + / | Toggle line comment. |
| Alt + ↑ / ↓ | Move line up / down. |
| Shift + Alt + ↓ | Duplicate line. |
| Ctrl/Cmd + Enter | Insert line below. |
| Ctrl/Cmd + ` | Open terminal. |
Emmet (HTML expansion in VS Code)
| Type | Expands to |
|---|---|
! | Full HTML5 document boilerplate. |
div.card | <div class="card"></div> |
ul>li*3 | A <ul> with three <li> children. |
a[href=/] | <a href="/"></a> |
Tip: Don't try to memorise everything at once. Pick three shortcuts a week, paste them on a sticky note, and use them until they're automatic.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Shortcuts</title>
</head>
<body>
<h1>Keyboard Shortcuts</h1>
<p>This is a demo page for the "Keyboard Shortcuts" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Which keyboard shortcut on this site opens the AI assistant panel?
Ctrl +
A single letter — first letter of "intelligence".
Test yourself
« Previous
Next »
Discussion
Loading…