Start using Git to track changes and collaborate with other developers, and learn Emmet, Sass, and Sublime Text to speed up your coding.
Git is the most commonly used version control system. Git tracks the changes you make to files, so you have a record of what has been done, and you can revert to specific versions should you ever need to. Git also makes collaboration easier, allowing changes by multiple people to all be merged into one source. It’s an important skill for any coder to have.
Git can seem mysterious at first, in part because many people use the command line to run Git. In this class we'll demystify Git and explain the typical workflows you'll encounter. We'll cover the most commonly used Git features to get you up and running quickly.
We'll focus on using the terminal commands (which are not as scary as you might think), but once you understand how Git works, you could use a desktop app (or Git integration in some code editors) if you want to use a GUI (graphical user interface) instead of the command line.
In the second section of this class, you'll learn how to code faster with Emmet, Sass, and Code Editors.
Did you know there are faster and easier ways to code? If you’re not using Emmet (coding shortcuts), Sass (a CSS preprocessor), or Sublime Text (a code editor), you should be! These tools can greatly speed up your coding with less typing. Every web developer needs to know these. Let us show you how to dramatically speed up your development.
Here’s a sampling of what you’ll learn:
- What are Emmet, Sass, and Sublime Text? How do they work? Why should I use them? (It will become very obvious.)
- Sass variables let you re-use CSS. Example: After using a color throughout your CSS, you only need to update one place to change the color throughout your CSS!
- With Sublime Text and Emmet you can navigate files faster. From finding a specific CSS rule amoung dozens, to moving the cursor to the right place in your code, keystrokes let you navigate quicker!
- 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. This is phenomenal!
- Wrap tags efficiently and beautifully (nicely indented).
- Paste new code perfectly indented.
- Even more awesomeness!
This class will focus on coding efficiency, assuming you understand HTML/CSS code. NOTE: We’ll teach the SCSS syntax of Sass.
What you will learn
- What Git is and how it works
- How to track changes in your code using Git
- Work with other developers to merge your changes with theirs
- Installing and setting up Git
- Command line basics
- Git commands such as commit, push, pull, branch, merge, and more
- Work with remote Git repositories on GitHub & Bitbucket
- Work with branches and merging code changes
- How to use Emmet, Sass (SCSS), and Sublime Text to code faster
- Use Sass variables to re-use CSS
- Navigate files faster using Sublime Text and Emmet.
- Create lists quickly using a keystroke and 6 characters
- Quickly change a tag by editing start and end tags simultaneously.
- Place multiple cursors to edit multiple lines or attributes at the same time
- Wrap tags efficiently and beautifully (nicely indented)
Learn with Hands-on Projects
Learn practical skills by working on real projects with instructor guidance and lectures to strengthen and improve your skill.
Learn more about Front-End Tools & Portfolio at Practical Programming.