Modern Front-end Literacy

Modern Front-end Literacy teaches all of the concepts and language students need in order to communicate and collaborate effectively, and gives students hands-on experience with JavaScript and client-side development tools.

SKU: WTMFE Categories: , Tags: , , , ,

Description

Modern Front-end Literacy teaches all of the concepts and language students need in order to communicate and collaborate effectively, and gives students hands-on experience with JavaScript and client-side development tools. The course goes beyond most introductory web development courses and teaches the best practices, tools, and principles that are used by professional developers.

Topics covered in the course are:

  • Web Development Fundamentals
  • HTML5
  • CSS3
  • Responsive Design Techniques
  • JavaScript History
  • Writing JavaScript
  • Test-Driven Development
  • Building with Webpack
  • Web APIs

Audience

This course is for junior web developers, developers who are new to front-end web development, and professionals who work with JavaScript programmers and need to be able to communicate and collaborate with them

Prerequisites

For the 3-day course, students should have at least an intermediate knowledge of web development and some experience with creating web sites using HTML, CSS, and JavaScript.

For the 5-day course, students should be comfortable working with a Windows or Mac computer and should have some exposure to web development.

Duration

3-day or 5-day course

The 3-day version is available for people who have prior experience with web development or JavaScript.

The 5-day version is designed for people who have no prior web development or programming experience. It teaches everything in the 3-day course, plus HTML, CSS, and fundamental best practices of web development.

Course Outline

  1. Introduction to Web Development
    1. The Web Platform
    2. Command Prompt
    3. Lab 01: Working with the Unix/Linux Command Shell
    4. How the Web Works
    5. Understanding Protocols
    6. Lab 02: Configuring an HTTP (Web) Server
    7. How Web Browsers Work
    8. Lab 03: Working with Chrome Developer Tools–Element Tab
    9. How Web Servers Work
  2. HTML
    1. Early History of HTML
    2. The HTML Dark Ages
    3. XHTML
    4. HTML5
    5. What’s New in HTML5?
    6. Purpose of HTML
    7. Hypertext
    8. Markup Language
    9. Meta-characters
    10. Entities
    11. Elements
    12. Element Example
    13. Tags
    14. Common Empty Elements
    15. Attributes
    16. Comments
    17. White Space
    18. Accessibility
    19. WCAG 2.0 Conformance Levels
    20. HTML Elements
    21. Lab 04: Exploring vim
    22. Lab 05: Writing HTML in vim
    23. Lab 06: Working with Code Editors-ATOM
    24. All You Need to Know: HTML
    25. Lab 07: Creating an HTML Form
  3. Cascading Style Sheets
    1. How CSS Works
    2. Default Styles
    3. CSS Rules
    4. The Box Model
    5. The Box Model
    6. Intro to Selectors
    7. Lab 08: Using CSS Selectors
    8. Cascading
    9. Values and Units
    10. CSS Layout
    11. Element Types
    12. Positioning Methods
    13. Flexbox Layout
    14. Lab 09: Positioning with CSS
    15. Responsive Design (RWD)
    16. CSS Libraries
    17. What’s Wrong with CSS?
    18. What Is a CSS Preprocessor?
  4. Introduction to JavaScript
    1. History of JavaScript
    2. JavaScript is NOT Java
    3. Is JavaScript “Real” Programming?
    4. Where Can You Use JavaScript?
    5. How JavaScript Works
    6. Is JavaScript Slow?
    7. Client-Side vs. Server-Side Code
    8. Browser Engine
    9. JavaScript Engine
    10. JavaScript Basics
    11. Lab 10: Using JSBin
    12. Lab 11: Using Chrome Developer Tools – JavaScript Console
    13. Lab 12: Using Array Methods
    14. Functions
    15. Global Functions
    16. Custom Functions
    17. JavaScript Objects
    18. The Document Object Model
    19. Lab 14: Performing DOM Manipulation
    20. Survey of Popular Libraries and Frameworks
    21. Lab 15: Using jQuery to Build a Chat Interface
    22. Lab 16: Using AJAX with jQuery
    23. REST
    24. Lab 17: Using JSON and REST to Work with Spark Rooms
    25. Lab 18: Using JavaScript Functions to Format Room Data
    26. Modularity
  5. Front-end Tools and Techniques
    1. Git
    2. Reproducible Builds
    3. Task Runners
    4. Lab 22: Setting Up a Task Runner
    5. Static Code Analysis
    6. Lab 23: Automating Linting
    7. Browser Development Tools
    8. Lab 24: Using Chrome Developer Tools – Sources Tab
    9. Test-Driven Development
    10. Lab 25: Getting Started with Jasmine
    11. Webpack