COURSE

Front-end Web Development

Deep-dive into modern HTML, CSS and browser-based JavaScript. Understand core web technologies that are foundational to modern frameworks.

  • 2 Days
  • Intermediate
  • In-person / Online
  • £ On Request

Your team will learn...

How to build and test modern HTML and CSS applications

Best-practice techniques for managing CSS on applications big and small

Modern CSS features like Grid and Flex, Container Queries, Cascade Layers

Patterns for performant, semantic and accessible HTML development

Overview

This is an engineering-focused training course giving software developers the skills they need to deliver front-end applications successfully. Learn the foundations of modern HTML and CSS, discover the patterns you need to scalably develop consistent front-end applications, and learn the techniques required to build high-quality user interfaces.

This course takes a framework-agnostic approach to development. It's an ideal foundation to build on with our JavaScript framework training courses like Introduction to React, Angular and Vue, as well as our specialised UI training courses including Integrating with Figma and using Tailwind CSS.

Outline

UI Design Foundations

  • Why friction arises between developers and designers
  • Pixel perfect designs and imperfect websites
  • The Design process and customer sign-off
  • Usability and Accessibility Concerns
  • The Plurality of devices and the problems that result

A refresher on HTML

  • Why web development is the way it is - a brief history of HTML
  • The basic structure: elements and attributes, block vs inline
  • “New” elements from HTML 5 you may not be aware of
  • The importance of semantic meaning
  • Embracing the browser platform vs custom elements

CSS

  • The simple structure of CSS, selectors and rules
  • Scaling CSS, the cascade, variables, layers
  • Cross-browser support - Responsive Design, Media Queries
  • Layout techniques: Flex, Grid, Floats and others

Techniques for managing HTML & CSS at scale

  • How Pattern Libraries and Design Systems can help
  • Using tools like StoryBook to manage front-end components
  • Refactoring and Agile development of Front-end applications
  • Performance concerns of browser-based applications
  • Architectural Patterns: BEM, CUBE, GPC, SMACSS, Atomic CSS etc.
  • How Frameworks can help: Tailwind, Bootstrap, MUI etc.

Browser-based JavaScript

Please note that this is not a JavaScript course. We recommend combining this course with one of our JavaScript focused courses for example, Introduction to TypeScript, Introduction to JavaScript, or a framework course like Introduction to React

  • Targeting HTML elements with the Document Object Model (DOM) API
  • Creating custom elements using Web Components
  • Loading scripts using ES6 Modules
  • Validating forms
  • Supporting offline mode with Service Workers
  • Improving user experience with the History API and Client Side Storage

Accessibility and Usability Concerns

  • Understanding the need for accessible UIs and the range of impairments your users may experience
  • The legal requirement for accessibility
  • Standards and Guidelines for accessibility, WCAG and WebAIM
  • Basic steps you can take when developing websites
  • Using WAI-ARIA with complex applications

Tools for Front-end Development

  • Learn how to get the most from your IDE
  • How browser DevTools make development easier
  • Using tools like Lighthouse for validation and verification
  • Build and deployment tools necessary for modern websites

Testing Front-end UIs

  • Automated Testing of web pages using Playwright
  • How Snapshot testing can provide confidence
  • Using UI Fuzzing to identify security defects
  • The importance of testing on real devices

This practical course will give you the tooling and practice you need to develop websites using HTML and CSS with confidence.

Requirements

This course is intended to be delivered to software engineering teams.

Delegates are expected to have a basic programming knowledge and a good understanding of how to use their IDE.

COURSE

Front-end Web Development

Deep-dive into modern HTML, CSS and browser-based JavaScript. Understand core web technologies that are foundational to modern frameworks.

  • 2 Days
  • Intermediate
  • In-person / Online
  • £ On Request

Deloitte logo
Atlassian logo
Bose logo
Workday logo
BMW logo
Amex logo
McAfee logo
PWC logo