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.
Why Take This Course?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.
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
Never Stop Learning!
