Summary

In this course, you’ll learn how to setup your development, get super productive during daily work and iteration, prevent yourself and your site from disasters and save a lot of time and effort with automatic optimization and automation. Finally, you’ll learn how to do all this while being confident your code runs on a multitude of devices in the real world.

Expected Learning

Front-end developers need to work quickly and efficiently to be productive. Having a good set of tools and libraries is crucial. This course will introduce you to a opinionated set of tools and libraries to improve your workflow.

Syllabus

Introduction

Learn how to protect yourself from micro and over-optimization.

• Being pragmatic vs. idealistic when choosing tools
• Identify the real value of the tool (is it well maintained? Does it have a large community? Is it documented?)
• Keep things modular and replaceable
• Staying away from micro-optimizations

Lesson 1: Productive Editing

Learn how to setup the very core of your development environment, namely your editor.

• From Notepad to IDE
• Set up your editor
• Install Sublime Text
• Install Plugins

Lesson 2: Powerful Builds

Learn about build tools and why you should use them.

• Overview of build tools
• Getting started with Gulp
• Install gulp plugins
• Create gulp tasks

Lesson 3: Expressive Live Editing

Learn how to reduce context switch with live editing.

• Why live edit?
• Approaches for live editing
• Browser Sync

Lesson 4: How to Prevent Disasters

Learn how to use tools to automate a few alarms and safety nets that will make our lives much easier.

• Why rely on tools to prevent bad things from happening?
• Linting
• ESLint
• Unit Testing in Gulp

Lesson 5: Awesome Optimizations

Learn how to polish your project for production

• CSS Concatenation
• JS Concatenation and Minification
• Writing Future Proof Code
• Sourcemaps
• Optmization

Required Knowledge

We expect that you have basic experience with JavaScript and a text editor, like Sublime Text or Atom.

If you need more experience with JavaScript, check out our JavaScript Basics course.