We are a family owned USA based Corporate Training Company determined to help professionals, teams, and organizations improve.

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.

banner-img
Home » Technology » Web Development » Core Web Technology

Course Skill Level:

Foundational

Course Duration:

5 day/s

  • Course Delivery Format:

    Live, instructor-led.

  • Course Category:

    Web Development

  • Course Code:

    COWETEP21R09

Who should attend & recommended skills:

New and experienced web developers

Who should attend & recommended skills

  • 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
  • There are no specific skills/experience needed for this course

About this course

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.

Skills acquired & topics covered

  • 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
  • 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)

Course breakdown / modules

  • Architecture of the web
  • How the W3C works
  • How to exploit modern browser capabilities

  • Why have tooling?
  • Npm and yarn
  • Modules with JavaScript
  • Import npm libraries vs local
  • Export vs export default
  • Eslint and jslint
  • Transpilers
  • Webpack

  • Available tools
  • Node inspector
  • On-the-fly HTML/CSS changes
  • Inspecting HTTP packets
  • Emulating phones and tablets

  • The proper structure of HTML
  • The most critical elements
  • Best practices on placing styles
  • CSS selectors

  • Just enough JavaScript to write a program. (if, while, for, comments)
  • Mathematic and logical operators
  • Short-circuiting

  • Let, var, and const — When to use each
  • Truthy and falsey
  • Destructuring
  • Easy string templates with `${}`
  • Iterating arrays with for-of
  • How to spread arrays
  • Array.prototype.map()
  • Array.prototype.filter()

  • Which should I choose?
  • Caution! It’s not Java
  • Variadicity
  • Pure vs. impure functions
  • Function statements
  • Arrow functions
  • Default parameters
  • Constructors, get/set

  • Why use them?
  • Section, article, nav, aside
  • Header, footer, main

  • Basic selectors
  • Compound selectors
  • Relationship selectors
  • Reinforcing structure vs style
  • Styling text
  • DataURIs for speed
  • Border effects

  • Position: absolute vs relative vs fixed vs static
  • The box model

  • How flex works
  • The two ways to think about flex
  • Wrapping flexbox
  • No-wrap flexbox
  • How grid works
  • Lines, tracks, cells, and areas
  • Defining the grid
  • Placing elements in the grid

  • Mobile app development
  • PWAs defined
  • Responsive and Adaptive
  • Creating media queries
  • Offline caching of pages (time permitting)

  • Why use them?
  • Scaling
  • Translation
  • Rotation
  • Skewing
  • CSS animations and transitions
  • Advanced transitions

  • Making RESTful calls
  • JSON
  • Stringify() and parse()
  • The fetch API

  • A complete form tag
  • The most useful inputs
  • Selects
  • Configuring the soft keyboard
  • How to write declarative data validations
  • The legal structure of tables
  • Spanning
  • Styling techniques

  • Writing and running unit tests with Jest
  • TDD/BDD
  • Karma and Jasmine

Browse our programs to take the next step toward advancing yourself, your team, and organization.

Browse Courses