super quick fast html & css with emmet
(and why c9 is your next thing)
From Today to Professional
Development Environment
Code in a Browser
Codepen
c9
local
Code in a Browser
c9
local
(Or why c9 is your next step)
FCC progression
FCC-Ballard progression
emmet class
Portfolio
class
Windows?Vagrant
Terminal or CommandLine
Project Navigator
Editor
Preview
c9.io
Create a new workspace called emmet
In project navigator, create index.html
Preview index.html (right click from project navigator)
<h1>Yo, this is some html!</h1>
With cursor at the last curly brace press "tab" on your keyboard to expand abbreviation
In the editor save index.html
Preview index.html; click on li elements in editor; see what happens in preview!
#page>div.logo+ul#navigation>li*5>a{Item $}
In the editor, undo. Should see:
#page>div.logo+ul#navigation>li*5>a{Item $}
Move cursor to end of "#page" and press tab on keyboard to expand
In the editor, undo; add:
expand abbreviation using tab
#page
In editor, delete down to:
What does the hash do? With no element what does emmet do? Where does cursor go?
#page>div.logo
What does the > do?
What does the dot do?
In the editor, expand this abbreviation
#page>div.logo+ul#navigation
In editor, expand this abbreviation
What does the + do?
#page>div.logo+ul#navigation>li*5
What does the * do?
In the editor, expand this abbreviation
#page>div.logo+ul#navigation>li*5>a[href=#$]
What does the $ do?
What does the [] do?
In the editor, expand this abbreviation
#page>div.logo+ul#navigation>li*5>a[href=#$]{Item $}
In editor, expand this abbreviation
What does {} do?
p>lorem
What does just "lorem" do?
In the editor, expand these abbreviations
p>lorem15
What does the lorem15 do?
p>lorem*15
What does the lorem*25 do?
In project navigator, create styles.css
#page {
}
In styles.css, add a selector
#page {
m10p
}
In styles.css, add then expand
What does the m do?
What does the p do?
#page {
mt10e
}
In styles.css, add then expand
What does the mt do?
What does the e do?
There are over 200 abbreviations in the emmet CSS tool
My experience: 1 abbrevation per week = amazing amount of increased productivity
In project navigator, create styles.css
#page {
}
In styles.css, add a selector
#page {
m10p
}
In styles.css, add then expand
What does the m do?
What does the p do?
html:5>div#wrapper>div#header>div.logo+ul.navigation>li*5>a{Item $}^^^+div#content>h1+p*4^div#sidebar>ul>li*5^^div#footer
Preview index.html
Starting with a blank page add and expand:
html:5
Undo; add more emmet and expand:
html:5>div#wrapper
Preview index.html
Iterate until done!