1. Home
  2. Web Development
  3. JavaScript
  4. Modern JavaScript Tools Training

Modern JavaScript Tools Training

The goal of this Modern JavaScript Tools Training class is to educate web developers about the numerous tools available to help them build, test, and maintain their web applications. While these tools can be categorized into distinct areas (such as JavaScript tools, JavaScript libraries, CSS tools, testing tools, build tools, etc.), there is a lot of overlap in the various tools' behaviors and use cases. In addition, there are literally hundreds of tools available that perform the same task with minor differences.

This course is designed to introduce the web developer to a subset of popular JavaScript tools in use today. It is the developer's responsibility to research and vet what he or she believes to be the best tools for his or her particular purpose and environment.

By the end of this course, a developer should know two main points:

  1. There are tools that can help automate and execute tedious tasks more efficiently and accurately than the alternative manual approach.
  2. These tools can be improved and customized by a developer-he or she can even build new tools.

This course assumes that you are a desktop or mobile web developer or designer, fairly well versed in HTML, CSS, and JavaScript, and in how they come together to create a web application.

Goals
  1. Discuss the use of modern JavaScript tools
  2. Describe the use case for these tools
  3. Use the Command-line Interface to execute common web-development tasks
  4. Instal and use Node.js and npm
  5. Install and update third-party-developed code modules, packages, and libraries
  6. Maintain a web project's dependencies
  7. Update 3rd-party developed code modules, packages and libraries.
  8. Use the WebStorm Integrated Development Environment (IDE)
  9. Automate the creation of a web-app directory structure
  10. Automate the creation of build tools
  11. Describe various popular JavaScript libraries and frameworks
  12. Install Git and creating a GitHub account
  13. Acquirie code libraries and frameworks from Git
  14. Scaffold an application automatically
  15. Run common web-development tasks with Grunt
  16. Create a wide variety of Grunt tasks
  17. Understand the role and use case of a variety of CSS tasks
  18. Use a CSS preprocessor
Outline
  1. Introduction
    1. About modern Web-development tools
      1. What is a Web project?
      2. What are Web-development tools?
  2. Modern JavaScript Primer
    1. What does modern JavaScript mean?
    2. ECMAScript 2015
    3. JavaScript basics
      1. JavaScript comments
      2. JavaScript statements vs. JavaScript expressions
      3. Variables
      4. Exercise: Declaring variables and inserting comments
      5. JavaScript types
      6. Exercise: JavaScript primitive types
      7. Exercise: Using JavaScript primitive methods
    4. Functions, hoisting and scope
      1. Function declarations vs. function statements
      2. Demo: Function declaration vs. function statement
      3. JavaScript function signatures and parameters
      4. Demo: Functions and function arguments
      5. Demo: Functions as arguments
      6. Immediately Invoked Function Expressions
      7. Exercise: JavaScript variable scope
      8. JavaScript keyword: "this"
      9. Demo: Scope and "this"
      10. Exercise: Scope and "this" local
    5. ECMAScript 2015
      1. Introducing ECMAScript 2015
      2. Using ECMAScript 2015 today
      3. ECMA6 Variables: var, let and const
      4. Exercise: JavaScript let and const
      5. ECMA6 Arrow Functions
      6. Demo: Understanding arrow functions
      7. ECMA6 Classes
      8. Demo: Using Classes and Modules
      9. ECMA6 Default Parameters
      10. Demo: Using default parameters
      11. ECMA6 destructuring
      12. Demo: Understand destructuring
      13. Other ECMAScript 6 Features
      14. JavaScript resources
  3. Utilities: The tools for our tools
    1. The Command Line Interface
      1. What is a Command Line Interface?
      2. Operating System Shells
      3. Macintosh: CLI Terminal
      4. Exercise: Getting comfortable with the Macintosh Terminal
      5. Windows CLI: Cygwin
      6. Exercise: Installing Cygwin
      7. Exercise: Getting comfortable with Cygwin
      8. The Cygwin Path Structure for Windows
      9. Linux Ubuntu CLI: Terminal
      10. Exercise: Getting comfortable with the Ubuntu Terminal
      11. DIY exercise: Command-line interface
      12. Command-line Interface (CLI) Summary
    2. Node.js
      1. What is Node.js?
      2. Exercise: Installing Node.js for Windows
      3. Exercise: Installing Node.js for Mac
      4. Exercise: Installing Node.js for Linux (Ubuntu)
      5. Exercise: Getting comfortable with Node.js
      6. Node summary
    3. Modules, Packages and Package Managers
    4. What is a module?
    5. Exercise: Getting comfortable with modules
    6. Exercise: Creating a web application’s root directory
    7. DIY exercise: Modules
    8. Packages and the Package.json file
      1. What’s a package and what is a package.json file?
    9. Package Managers
      1. What is a package manager?
      2. What is npm?
      3. Exercise: Installing npm for Windows
      4. Exercise: Installing npm for Mac
      5. Exercise: Installing npm for Linux (Ubuntu)
      6. Exercise: Getting comfortable with npm
      7. Common npm commands
      8. npm and dependency management
      9. Exercise: Getting comfortable with package.json and npm
      10. Exercise: Launch WebStorm and create a project
      11. Exercise: Use npm to install and update JS libraries
      12. DIY exercise: Creating modules and using npm
      13. Node resources
      14. npm resources
  4. Tools for building Web applications
    1. JavaScript Libraries
      1. What is a JavaScript library?
      2. Finding open-source JavaScript libraries
        1. Google-hosted libraries and frameworks
      3. Vetting a JavaScript library
      4. DIY Exercise: Finding and using a JavaScript library
    2. GitHub
      1. What is GitHub?
      2. Exercise: Using Git and GitHub: Basic Steps
      3. Common Git commands
      4. Exercise: Using Git Bash to clone a repository
    3. JavaScript Frameworks
      1. What is a JavaScript framework?
      2. How frameworks can help the developer
      3. Framework differences
      4. Framework pros and cons
      5. Exercise: Comparing and choosing frameworks
      6. Resources for vetting and understanding frameworks
    4. Scaffolding a Web application
      1. What is Web scaffolding?
      2. What is Yeoman?
      3. Exercise: Installing Yeoman
      4. Exercise: Using Yeoman
      5. DIY exercise: Scaffold an application with Yeoman
  5. CSS Tools
    1. CSS Preprocessors
      1. Introducing SASS
      2. Preprocessor variables
      3. Preprocessor functions
      4. Nested styles
      5. Mixins
      6. Exercise: Installing Sass
      7. Exercise: Using the SASS preprocessor
    2. CSS online tools
      1. Online minifiers
      2. Exercise: Using an online minifier
      3. Using an online CSS tool to clean/beautify your CSS
      4. Exercise: Using an online CSS beautifier
      5. Formatting CSS: a better approach
      6. Using an online tool to sort your CSS rules
      7. Exercise: Sort your CSS rules
      8. More online CSS tools
  6. Task automation and build tools
    1. What are build tools?
    2. Task runners
      1. What are task runners?
      2. Understanding task runners with Grunt
      3. Using Grunt
      4. Exercise: Creating a project to use with Grunt
      5. Exercise: Creating CSS-related tasks with Grunt: Autoprefixer
        1. What is postcss and a postprocessor?
        2. The abstract syntax tree
      6. Exercise: Creating CSS-related tasks with Grunt: concat and minify
        1. Minification vs. optimization explained
      7. Exercise: Creating CSS-related tasks with Grunt: Remove unused CSS
      8. Exercise: Creating CSS-related tasks with Grunt: Process Sass code
      9. Combining tasks with Grunt
      10. Exercise: Creating CSS-related tasks with Grunt: CSS build
      11. DIY exercise: Watch Sass files for changes
    3. Automating JavaScript tasks with Gulp
    4. What is Gulp?
    5. Exercise: Install Gulp and create tasks
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following is required for this JavaScript class:

  • Knowledge of and ability to write HTML, CSS, and JavaScript.
Preparing for Class

Training for your Team

Length: 4 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors
Request Class

Training for Yourself

$2,100.00 or 4 vouchers
Request Class
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

The class was great, and I will use the techniques I learned right away in my work.
Evan Klein
Intuit, Inc.
The instructor was highly knowledgeable. She made the class both entertaining and educational.
John Murphy
United Technologies Research Center
The course materials were clear and easy to understand. The instructor was very knowledgeable, and helped me through the sections that were difficult. I would recommend Webucator to anyone looking to improve their skills through distance learning.
Wayne Zitkus
Rockwell Collins
The course material was thorough and well organized and delivered in easy to digest doses.
Diane Suzuki
Convergence Graphics, Inc.
More Testimonials

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,415

Students who have taken Instructor-led Training

11,764

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.29

Students rated our trainers 9.29 out of 10 based on 29,272 reviews

Contact Us or call 1-877-932-8228