O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Introduction to Modern Front-End Development

Video Description

In this Introduction to Modern Front-End Development training course, expert author Adam Scott will teach you modern techniques, tools, and best practices for modern front-end web development. This course is designed for users that already have some experience with HTML, CSS, and JavaScript.

You will start with an introduction to the command line and Git, then jump into learning how to create a project with Yeoman. From there, Adam will teach you how to use a front-end build tool. This video tutorial also covers HTML templating, CSS pre-processing and post-processing, and modular JavaScript code. Finally, you will learn about front-end testing, including unit testing JavaScript and automated accessibility testing.

Once you have completed this computer based training course, you will be fully capable of applying these techniques, tools, and best practices to your own web development projects.

Table of Contents

  1. Introduction
    1. Introduction 00:01:29
    2. About The Author 00:01:00
    3. Your Text Editor, Terminal, And Browser 00:01:27
    4. Installing Node 00:01:00
    5. Using The Working Files 00:01:15
  2. The Terminal And Git
    1. Command Line Introduction And Navigating The File System 00:04:09
    2. Creating Directories And Files 00:02:32
    3. Git Introduction And Installation 00:02:52
    4. Git Basics 00:07:25
    5. Working With GitHub 00:07:16
  3. Project Scaffolding And Working With Dependencies
    1. Generating A Project With Yeoman 00:05:09
    2. Managing Front-End Dependencies 00:07:28
  4. Using A Front-End Build Tool
    1. Introduction To Build Tools And Gulp 00:05:51
    2. Using Gulp For Repetetive Tasks 00:04:15
    3. Using Gulp To Minify Assets - Part 1 00:06:42
    4. Using Gulp To Minify Assets - Part 2 00:07:11
  5. HTML Templating
    1. Introduction To HTML Templates And Handelbars 00:02:36
    2. Our First Handlebars Template 00:06:35
    3. Handelbars Template Partials 00:06:25
    4. Handelbars Template Data 00:04:39
  6. CSS Pre- And Post- Processing
    1. Introduction To CSS Pre-Processing And Post-Processing 00:02:22
    2. Writing A Less Gulp Task 00:03:31
    3. Modular CSS With Less 00:06:33
    4. Less Variables 00:06:28
    5. Less Mixins 00:04:58
    6. Less Nesting And Link Styles 00:06:43
    7. Layout With Flexbox 00:05:21
    8. CSS Post-Processing And Auto-Prefix With Gulp 00:02:27
  7. Modular Javascript Code
    1. Javascript Code Organization 00:03:11
    2. Model-View-Helper Code Structure 00:02:58
    3. Introduction To Browserify And Setting Up Our Browserify Gulp Task 00:05:28
    4. Javascript Code Structure And npm Modules 00:06:06
    5. Modularizing Our Javascript 00:04:02
    6. More Models And Views - Part 1 00:03:54
    7. More Models And Views - Part 2 00:08:58
  8. Front-End Testing
    1. Introduction To Front-End Testing 00:03:16
    2. Linting Our Javascript 00:05:28
    3. Unit Testing Javascript 00:07:52
    4. Automated Accessibility Testing 00:03:50
    5. Automating Our Tests 00:01:54
  9. Conclusion
    1. Resources And Where To Go From Here 00:04:25
    2. Wrap Up 00:00:49