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.
