Let us help you find the training program you are looking for.

If you can't find what you are looking for, contact us, we'll help you find it. We have over 800 training programs to choose from.

Core Web Technology

  • Course Code: Web Development - Core Web Technology
  • Course Dates: Contact us to schedule.
  • Course Category: Web Development Duration: 5 Days Audience: Current and future web developers who want to gather enough HTML5, CSS3, and JavaScript skills to be successful with modern frameworks like Angular, React, and/or Vue.

Modern web apps are written using a framework like Angular, React/Redux, or Vue. But these require expertise in HTML, CSS, and JavaScript. This course will fast-track you to a sufficient foundation of these web technologies to be able to start learning any of those popular frameworks. 

You will not only discover the fundamental secrets of the inner workings of the web but you’ll also learn advanced topics like semantic tags, progressive web apps and responsive design, CSS transforms and transitions, CSS layouts with flexbox and grid, functional vs. OO JavaScript,  

Modern debugging techniques, consuming RESTful data with Ajax calls. 

This is an intro class but it covers some very advanced topics. Every minute is spent in preparation to use React, Vue, or Angular with nothing extraneous. 

Audience: Current and future web developers who want to gather enough HTML5, CSS3, and JavaScript skills to be successful with modern frameworks like Angular, React, and/or Vue. 

Prerequisites: None 

Length: 5 days 

Objectives 

Upon completion of this course, the student should be able to: 

  • Create web pages and web sites using HTML5, CSS3, and pure JavaScript 
  • Debug HTML and CSS 
  • Understand the architecture of web applications including why we have build tools like bundlers, linters, and transpilers. 
  • Lay out pages using CSS flexbox and grids 
  • Describe progressive web apps and use responsive design with CSS3 media queries to make pages work on laptops, iPhones, iPads or any mobile device 
  • Explain modern tooling environments like webpack, npm, yarn, eslint and successfully set up a continuous integration system (CIS) 
  • Write well-organized and properly structured JavaScript modules 
  • Consume a RESTful API with Ajax using the fetch API 

Topics 

  • Course Intro 
  • How This All Actually Works 
  • Modern Web Tooling 
  • Debugging Tools 
  • Page Setup 
  • Intro to JavaScript 
  • Variables and Arrays 
  • Functional vs OO JavaScript 
  • Semantic HTML 
  • Modern CSS Formatting 
  • Positioning with CSS 
  • Page Layouts with Flexbox and Grid 
  • Progressive Web Apps and Responsive Design 
  • CSS Transforms and Transitions 
  • Ajax 
  • Deep Dive into Forms and Tables 
  • Unit testing JavaScript (Time permitting)Page Break 

Outline 

This outline will be adjusted based on the students’ needs and updated software. 

  1.  
  1. Course Intro 
  1. How This All Actually Works 
    1. Architecture of the web 
    2. How the W3C works 
    3. How to exploit modern browser capabilities 
  1. Modern Web Tooling 
    1. Why have tooling?  
    2. npm and yarn 
    3. Modules with JavaScript 
    4. import npm libraries vs local 
    5. export vs export default 
    6. eslint and jslint 
    7. transpilers 
    8. webpack 
  1. Debugging Tools 
    1. Available tools 
    2. Node inspector 
    3. On-the-fly HTML/CSS changes 
    4. Inspecting HTTP packets 
    5. Emulating phones and tablets 
  1. Page Setup 
    1. The proper structure of HTML 
    2. The most critical elements 
    3. Best practices on placing styles 
    4. CSS selectors 
  1. Intro to JavaScript 
    1. Just enough JavaScript to write a program. (if, while, for, comments)  
    2. Mathematic and logical operators
    3. Short-circuiting 
  1. Variables and Arrays 
    1. let, var, and const — When to use each 
    2. truthy and falsey 
    3. Destructuring 
    4. Easy string templates with `${}` 
    5. Iterating arrays with for-of 
    6. How to spread arrays 
    7. Array.prototype.map() 
    8. Array.prototype.filter() 
  1. Functional vs OO JavaScript 
    1. Which should I choose? 
    2. Caution! It’s not Java 
    3. Variadicity 
    4. Pure vs. impure functions 
    5. Function statements 
    6. Arrow functions 
    7. Default parameters 
    8. Constructors, get/set 
  1. Semantic HTML 
    1. Why use them? 
    2. Section, article, nav, aside 
    3. Header, footer, main 
  1. Modern CSS Formatting 
    1. Basic selectors 
    2. Compound selectors 
    3. Relationship selectors 
    4. Reinforcing structure vs style 
    5. Styling text 
    6. DataURIs for speed 
    7. Border effects 
  1. Positioning with CSS 
    1. Position: absolute vs relative vs fixed vs static 
    2. The box model 
  1. Page Layouts with Flexbox and Grid 
    1. How flex works 
    2. The two ways to think about flex 
    3. Wrapping flexbox 
    4. No-wrap flexbox 
    5. How grid works 
    6. Lines, tracks, cells, and areas 
    7. Defining the grid 
    8. Placing elements in the grid 
  1. Progressive Web Apps and Responsive Design 
    1. Mobile app development 
    2. PWAs defined 
    3. Responsive and Adaptive 
    4. Creating media queries 
    5. Offline caching of pages (time permitting) 
  1. CSS Transforms and Transitions 
    1. Why use them? 
    2. Scaling 
    3. Translation 
    4. Rotation 
    5. Skewing 
    6. CSS animations and transitions 
    7. Advanced transitions 
  1. Ajax 
    1. Making RESTful calls 
    2. JSON 
    3. stringify() and parse() 
    4. The fetch API 
  1. Deep Dive into Forms and Tables
    1. A complete form tag 
    2. The most useful inputs 
    3. Selects 
    4. Configuring the soft keyboard 
    5. How to write declarative data validations 
    6. The legal structure of tables 
    7. Spanning 
    8. Styling techniques 
  1. Unit testing JavaScript (Time permitting) 
    1. Writing and running unit tests with Jest 
    2. TDD/BDD 
    3. Karma and Jasmine 

View All Courses

    Course Inquiry

    Fill in the details below and we will get back to you as quickly as we can.

    Interested in any of these related courses?