Info
Demo 1.2
Attributes
An attribute is extra information attached to an element, written inside its opening tag:
<a href="https://gdwithgd.com/">A link</a>
href is the attribute and the URL is its value. Without it, a link element has no idea where to send anyone.
The rules
- Attributes go in the opening tag only, never the closing one.
- Values go in quotes.
- An element can have as many as it needs, separated by spaces.
The two you’ll use forever
class and id don’t change how anything looks by themselves. They’re labels, so that CSS and JavaScript can find a specific element later. You’ll be using class constantly by the end of the next chapter.
Keyboard Shortcuts
⌘ Z / ⌘ ⇧ ZCtrl Z / Ctrl ⇧ Z
Undo / redo
Tab / ⇧ TabTab / ⇧ Tab
Indent / unindent selection
⌘ ] / ⌘ [Ctrl ] / Ctrl [
Indent / unindent lines
⌘ ACtrl A
Select all
⌘ DCtrl D
Select next occurrence of selection
⌘ /Ctrl /
Comment / uncomment lines
Ctrl SpaceCtrl Space
Autocomplete
Ctrl EnterCtrl Enter
Reset layout
⌘ ⌥ [ / ⌘ ⌥ ]Ctrl ⇧ [ / Ctrl ⇧ ]
Fold / unfold block
Code
The editor didn't load — try refreshing the page. Navigation,
shortcuts and the info panel still work in the meantime.
Settings
View
Font size
14
Code
Preview
Delay
Zoom
Share
Reset
Preview
Currently previewing:
Dimensions0 × 0
Delay
Preview paused
Click to resume
Click to resume
The preview is disabled for this demo.
Use the console below.
Use the console below.
Console
›