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
-
Introduction
- Introduction 00:01:29
- About The Author 00:01:00
- Your Text Editor, Terminal, And Browser 00:01:27
- Installing Node 00:01:00
- Using The Working Files 00:01:15
-
The Terminal And Git
- Command Line Introduction And Navigating The File System 00:04:09
- Creating Directories And Files 00:02:32
- Git Introduction And Installation 00:02:52
- Git Basics 00:07:25
- Working With GitHub 00:07:16
-
Project Scaffolding And Working With Dependencies
- Generating A Project With Yeoman 00:05:09
- Managing Front-End Dependencies 00:07:28
-
Using A Front-End Build Tool
- Introduction To Build Tools And Gulp 00:05:51
- Using Gulp For Repetetive Tasks 00:04:15
- Using Gulp To Minify Assets - Part 1 00:06:42
- Using Gulp To Minify Assets - Part 2 00:07:11
-
HTML Templating
- Introduction To HTML Templates And Handelbars 00:02:36
- Our First Handlebars Template 00:06:35
- Handelbars Template Partials 00:06:25
- Handelbars Template Data 00:04:39
-
CSS Pre- And Post- Processing
- Introduction To CSS Pre-Processing And Post-Processing 00:02:22
- Writing A Less Gulp Task 00:03:31
- Modular CSS With Less 00:06:33
- Less Variables 00:06:28
- Less Mixins 00:04:58
- Less Nesting And Link Styles 00:06:43
- Layout With Flexbox 00:05:21
- CSS Post-Processing And Auto-Prefix With Gulp 00:02:27
-
Modular Javascript Code
- Javascript Code Organization 00:03:11
- Model-View-Helper Code Structure 00:02:58
- Introduction To Browserify And Setting Up Our Browserify Gulp Task 00:05:28
- Javascript Code Structure And npm Modules 00:06:06
- Modularizing Our Javascript 00:04:02
- More Models And Views - Part 1 00:03:54
- More Models And Views - Part 2 00:08:58
-
Front-End Testing
- Introduction To Front-End Testing 00:03:16
- Linting Our Javascript 00:05:28
- Unit Testing Javascript 00:07:52
- Automated Accessibility Testing 00:03:50
- Automating Our Tests 00:01:54
-
Conclusion
- Resources And Where To Go From Here 00:04:25
- Wrap Up 00:00:49
Product information
- Title: Introduction to Modern Front-End Development
- Author(s):
- Release date: September 2015
- Publisher(s): Infinite Skills
- ISBN: 9781771374736
You might also like
book
Modern Front-end Architecture: Optimize Your Front-end Development with Components, Storybook, and Mise en Place Philosophy
Learn how to build front-end applications that can help you ship applications faster with fewer defects. …
video
Modern Web Design with HTML5, CSS3, and JavaScript
Responsive websites are the future. They allow your site to adapt to different screen sizes, which …
book
Introducing Web Development
This brief book is an easy-to-digest introduction to the key concepts of web development. Understand the …
book
Learning JavaScript Design Patterns, 2nd Edition
Do you want to write beautiful, structured, and maintainable JavaScript by applying modern design patterns to …