Web Tooling & Automation - Google

Intermediate

Approx. 3 weeks

Assumes 6hrs/wk (work at your own pace)

Built by Join thousands of students Course 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.

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.

Prerequisites and Requirements

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.

See the Technology Requirements for using Udacity.

What Will I Learn? Projects Project 1: Meet-Up Event Planner You will build a responsive web application that allows the user to establish a meet-up event. The goal is to create an app that is a joy to use on both desktop and mobile. The application must allow someone to name their event, search for a host location (using a location API like Foursquare), set the capacity of the event, the start and end times, and input a description of the event. 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