Coding Tips & Tricks: Emmet, Sass, & Code Editors

Coding doesn't have to take a long time.

In this class, we'll help you shave hours off each project you create by using Emmet, Sass, and Sublime Text.

Emmet is a plugin that works with a variety of text editors.  It speeds up your workflow by allowing you to use shortcuts to produce large amounts of code.  Sass, a CSS preprocessor, saves you time by allowing you to make global changes to your stylesheets with a single line of code.  We'll also take you through Sublime Text, a popular text editor with features designed to take the monotony out of coding from scratch.

Here’s an overview of what you’ll learn:

• What is Emmet?  How does it work? 
• What are Sass variables?  How can we make changes across an entire stylesheet without scrolling and changing each parameter manually?
• How can we use Sublime Text to speed up our workflow?

You'll learn tips and tricks like these:

• Type a keystroke and 6 characters to turn a plain list like this:

  Chocolate
  Fruits
  Candy
  

  into this:

  <ul>
    <li>Chocolate</li>
    <li>Fruits</li>
    <li>Candy</li>
  </ul>
  

• Make the following 290 characters by only typing 24 characters!

  <ul>
    <li class="item1"><a href=""></a></li>
    <li class="item2"><a href=""></a></li>
    <li class="item3"><a href=""></a></li>
    <li class="item4"><a href=""></a></li>
    <li class="item5"><a href=""></a></li>
    <li class="item6"><a href=""></a></li>
    <li class="item7"><a href=""></a></li>
  </ul>
  

• Quickly change a tag by editing start and end tags simultaneously.
• Place multiple cursors to edit multiple lines or attributes at the same time. 
• Paste new code into an existing project without worrying about indentation.

This class focuses on coding efficiency.  While we will teach the SCSS syntax required for Sass, a solid grasp of HTML and CSS are prerequisites for this course.