Introduction to Web Programming

5-Day Course Taught Live as In-Person or Online

Course Description

Training 4 Developers’ Introduction to Web Programming training course teaches students how to use HTML, CSS, and JavaScript to build modern web applications. In the course, the principles, concepts, and ideas of HTML, CSS, and JavaScript will be explained, demonstrated and practiced by the students. Students will learn how to utilize HTML, CSS, and JavaScript within a web browser environment. Students will explore various web browser APIs including how to make requests to a REST service. This course prepares students for more advanced web programming classes that dive deeper into user interface libraries such as React, Angular, and Vue.

Course ObjectivesObjectives

  • Understand what HTML, CSS and JavaScript are and what problem they solve
  • Explore the basic architecture of a web browser
  • Gain deeper knowledge of HTML and the DOM Tree
  • Explore the semantic nature of HTML
  • Learn how to build forms, tables, video, audio with HTML
  • Apply CSS to style a web page using selectors
  • Learn important layout strategies such as FlexBox and Grid
  • Learn how to format text, position content and the box model
  • Explore strategies on how to incorporate CSS into web applications
  • Explore the basics of responsive web design
  • Learn the latest JavaScript language features and APIs
  • Utilize JavaScript tools such as Webpack and Babel
  • Go deep on asynchronous programming with JavaScript
  • Understand the JavaScript memory model to do mutable and immutable programming
  • Explore JavaScript ideas such as closure, prototype inheritance, and the value of “this”
  • Utilize Web Browser APIs with JavaScript such as the Fetch API

Course PrerequisitesPrerequisites

Attendees should have general programming experience.

Course RequirementsRequirements

We teach all classes online. Students will need to be able to join an online session using a popular online meeting service such as Zoom, Microsoft Teams, GotoTraining, etc… If the client has no preference, Zoom will be used.

We recommend that each student have two displays. One display to view the instructor presentation and one display to use for note-taking and programming along with the instructor. The second display can be a tablet connect to the session if the meeting software provides an app for the student’s tablet.

All course materials are distributed via GitHub and Google Drive. Access to those services is needed for the class, please ensure your firewall and network policies will allow students to access those resources. If students cannot access GitHub or Google Drive, alternatives will be discussed.

Course OutlineOutline

  1. HTML
    1. Purpose of HTML
    2. Semantic Elements
    3. Common Elements
    4. Forms and HTML5 Validation
    5. Tables
    6. Semantically Structure a User Interface with HTML
    7. Video and Audio (quick overview only)
    8. Canvas (quick overview only)
    9. SVG (quick overview only)
  2. CSS
    1. Purpose of CSS
    2. Selectors
      1. ID, Element & Class
      2. Attribute
      3. Combinators
      4. Pseudo Class & Element
      5. CSS Selector Specificity
      6. Best Practices for Selectors
    3. Layout
      1. Box Model
      2. Box Sizing – Width and Height
      3. Display, Position & Float
      4. Flexbox
      5. Grid
    4. Styling
      1. Text and Boxes
      2. Colors
      3. Vertical and Horizontal Positioning
      4. Box Model for Inline Content
    5. Animations
      1. Transitions
      2. Transformations
      3. Animations
    6. Responsive Web Design
      1. Viewport
      2. Flexbox & Grid
      3. Media Queries
      4. Text
      5. Images
      6. Video
    7. SASS
      1. Variables
      2. Imports
      3. Nesting Selectors
      4. Mixins
      5. Inheritance
      6. Operators
      7. Control-Flow Statements
    8. CSS Modules
    9. CSS-in-JS (overview, more coverage in week 2)
  3. JavaScript (2 days)
    1. Purpose of JavaScript
    2. Types
      1. Primitives vs Objects
      2. Number, String, Boolean, Symbols
      3. Objects, Functions, Arrays
      4. typeof and instanceof operators
    3. Scopes – Function, Block & Lexical
    4. Functions
      1. Arguments
      2. Return Values
      3. Functions as Object Constructors
      4. Functions as Objects
      5. The value of “this”
      6. Closures
    5. Destructuring, Spread Operator, Rest Operator
    6. Classes
      1. Understanding how classes are the same thing as function constructors (just an easier syntax)
      2. Creating Classes
      3. Class Inheritance
      4. Access Properties
      5. Static Properties
    7. Asynchronous Programming
      1. How JavaScript Executes
      2. Callback Functions
      3. Promises
      4. Observables (overview of Reactive Programming)
      5. Async/Await
    8. ES2015 Promises
      1. Chaining Asynchronous Operations
      2. Grouping Asynchronous Operations
      3. Error Handling
      4. Compared to Callbacks and Observables
      5. Best Practices
    9. ES2017 Async/Await
    10. Generators
      1. Iteratables and Generators
      2. Creating Generator
      3. Iterable Symbol
      4. Using with for-of loops
  4. Web Application Projects
    1. Transpiling and Bundling
      1. What is transpiling?
      2. What is bundling?
      3. Common transpiling and bundling tools
    2. Babel
      1. What is Babel?
      2. Using the Babel CLI
      3. Babel Plugins
      4. Selecting Plugins based upon Environment
    3. Webpack
      1. What is Webpack?
      2. What is the Webpack development server?
      3. Setting up a basic Webpack configuration
      4. Using tools like Parcel.js
  5. Web Browser APIs
    1. Global Objects
      1. Window
      2. Document
      3. Location
    2. Debugging the Browser (mostly covered in the JavaScript part of the course)
      1. Element Tree
      2. CSS Inspector
      3. Console
      4. JavaScript Debugger
      5. Network
      6. Performance
      7. Memory Tools
      8. Application Data
    3. Working with the DOM
      1. DOM Selection
        1. Get Element By Id
        2. Query Selector
        3. Query Selector All
      2. DOM Manipulation
      3. DOM Events
      4. Event Bubbling and Capturing
      5. Events and Memory Leaks
      6. DOM Breakpoints
    4. Networking
      1. AJAX Calls (mostly covered in the JavaScript part of the course)
        1. What are AJAX Calls?
        2. XML vs. JSON
        3. XmlHttpRequest API
        4. Fetch API
        5. Managing Multiple AJAX Calls
        6. Uploading Files
        7. Canceling Requests
      2. Web Sockets
        1. What are Web Sockets?
        2. Web Socket API
    5. Web Workers (demo only)
      1. What are web workers?
      2. Overview of using a web worker
    6. Geolocation
      1. What is geolocation?
      2. Capturing a user’s position
      3. Tying together Geolocation and AJAX calls
    7. Drag and Drop (demo only)
      1. What is drag and drop?
      2. Drag and Drop APIs
      3. Adding Data to Drag and Drop
      4. Drag and Drop File Upload
Scroll to Top