WA2958 Introduction to the Modern Web Application Development Environment Training
This class serves as a quick level setting for students with limited exposure to current front end web application development. This one day session introduces the core concepts needed before attending a MERN, MEAN, Angular or React class.
Online Virtual Class
This class, while not a deep dive in any of these topics, provides a basic lay of the land and understanding of the web environment to prepare participants to successfully participate in a MEAN, MERN, Angular or React class.
Audience
Experienced programmers needing to prepare for developing and - or supporting current front end web applications.
Prerequisites
- Basic understanding of the architecture and interaction between Web Clients and Web Servers.
- Development experience with scripting or a high level programming language like JavaScript, Java, PHP, C++, etc.
- Basic understanding of HTML and JavaScript are helpful
Duration
One day
Outline for Introduction to the Modern Web Application Development Environment Training
Chapter 1. Intro to Web Apps
- Architecture reference models with history of how we got here
- Serves as overview to orient them
Chapter 2. VSCode
- Introduction to show the basics of how to work with the tool
- Highlight features needed for future training and work:
- the terminal
- extensions
- settings
- hands on - and continued for each of the modules below
Chapter 3. HTML and the DOM
- how one becomes the other and why it's important
- mention Browser APIs and where to find doc for them
- also the Document (DOM) API and DOM nodes
- Introduce Chrome dev tools
Chapter 4. CSS
- How to style an element, CSS classes
- Work with API docs
- Show CSS features in chrome dev tools
Chapter 5. ES6 JavaScript
- ES6 fundamentals and key features - focus on API beyond client side validation which most developers already know
- Show code in chrome dev tools
Chapter 6. Chrome developer tools
- finding errors
- using the console
- working with the debugger
- meaningful extensions
Chapter 7. What is a SPA (Single Page Application)
- Why have them (MVC, Ajax, Smart client)
- MEAN and MERN stack