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

Made with Slides.com

Emmet on C9

emmet on c9

  • 1,843

More from Ric McLaughlin