Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Dismiss
  1. Code
  2. CSS
Code

Tools of the Modern Web Developer

by
Lessons:20Length:4.2 hours
CSSHTMLBootstrapYeomanMarkdownLESSCoffeeScriptHAMLWorkflowFoundation for Apps
Crs 54
For full access to all 20 lessons, including source files, subscribe with Elements.
  • Overview
  • Transcript

5.2 Haml

Haml is another templating engine that is commonly used with Rails or Sinatra.

Prerequisites
  1. npm
  2. CSS, HTML
Resources
  1. Haml, docs
  2. erb
  3. Haml as a Ruby gem – can be used as standalone, with Rails or with Sinatra

1.Introduction
1 lesson, 04:44

Free Lesson
1.1
Welcome
04:44

2.Boilerplates and Scaffolding
4 lessons, 1:00:43

Free Lesson
2.1
HTML5 Boilerplate
10:13

2.2
Twitter Bootstrap
09:29

2.3
Foundation
19:41

2.4
Yeoman
21:20

3.Markup Abstraction
2 lessons, 28:06

3.1
Emmet
15:47

3.2
Markdown
12:19

4.CSS Abstraction
3 lessons, 47:51

4.1
Sass + Compass
19:37

4.2
LESS
14:47

4.3
Stylus + Nib
13:27

5.HTML and Javascript Abstraction
2 lessons, 20:37

5.1
Jade
15:16

5.2
Haml
05:21

6.Javascript Preprocessing
1 lesson, 13:22

6.1
Coffeescript
13:22

7.Templating
2 lessons, 28:41

7.1
Mustache
15:17

7.2
Handlebars
13:24

8.Workflow
4 lessons, 44:14

8.1
Mobile Debugging
07:20

8.2
Local Web Servers
10:19

8.3
Autosave
08:38

8.4
Chrome DevTools - Inspect + Debug
17:57

9.Conclusion
1 lesson, 01:25

9.1
Conclusion
01:25

Sayanee Basu
Sayanee Basu
I'm an independent developer from Singapore working mostly with startups on product development. Dabbling with web technologies such as Ruby, JavaScript, HTML5 and CSS3 is part of my daily work. I share my learnings through screencasts called Build Podcast. I'm a voracious reader and love to backpack to far away countries meeting interesting locals. Connect with me at @sayanee_.
Unlimited Downloads
From $16.50/month
Get access to over one million creative assets on Envato Elements.
Over 9 Million Digital Assets
Everything you need for your next creative project.
Create Beautiful Logos, Designs
& Mockups in Seconds
Design like a professional without Photoshop.
Join the Community
Share ideas. Host meetups. Lead discussions. Collaborate.
Quick LinksExplore popular categories