Introduction to emmet on c9
super quick fast html & css with emmet
(and why c9 is your next thing)
Fast HTML/CSS with emmet on c9
- From coding in a browser to ?
- What is c9 technically?
- Cool, what is emmet?
- emmet syntax beat down
- emmet HTML abbreviations
- emmet Lorem Ipsum generator
- CSS completion
Today
- No dev environment
- HTML/CSS?
- JavaScript?
- Angular/React/d3?
- Node/Database?
- Analyze/design/Agile?
- Low collaboration
- Network?
- Telling "I'm a dev"
Professional
- Code in editor
- 6+ HTML/CSS Projects
- 25+ Javascript Projects
- 6+ FrontEnd Projects
- 6+ Backend Projects
- Customer Prob->Solution
- Multi-user; Geo-Diverse
- NETWORK!
- Showing "I'm a dev" (portfolio)
From Today to Professional
Today
- Code in a browser
- No tool chain
- No version control
- No DevOps
- Single User
- Low collaboration
- Windows, mac, linux, chromebook, mobile device
Professional
- Code in editor
- 2+ Chains
- git
- DevOps Start, build, deploy
- Multi-user; Geo-Diverse
- Highly collaborative
- mac/linux ONLY
Development Environment
Coding in a browser to?
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
Server = Machine = Computer















What is a virtual machine?

Ok, so what is c9?











The C9 Workspace

Terminal or CommandLine
Project Navigator
Editor
Preview




The advantages of c9
- Easy to "restart"
- Decent editor
- Complete set of tools
- Easy Collaboration with pair programming
- Bash shell (CLI)
- One workspace per project
- Saves your place
- Free!
Ok, so what is emmet?
- Emmet is a plugin
- Enables you to write HTML Really, Really FAST
- CSS completion -> CSS really, really fast
- Integrated into the c9 editor
- Available for every major editor = forever skill
- Save code for reuse using snippets
- Somehow it is complete Free!
- From thinking about HTML/css molecules to compounds

c9.io


Create a new workspace called emmet
Getting Started

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
Behold emmet Power

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
emmet #, >, .

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?

emmet +, *, $, []

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?
emmet {}, lorem

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?

emmet css m, p

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?

emmet css mt, e


#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
whoa... is there a cheat?
http://docs.emmet.io/cheat-sheet/
My experience: 1 abbrevation per week = amazing amount of increased productivity

emmet css m, p

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
The Page You Want:



Emmet Build Page Play: Add, preview, undo



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!
Emmet on C9
By Ric McLaughlin
Emmet on C9
emmet on c9
- 2,001