Professional training – Web Development & Frontend

Web Components

Get confident with Web Components in 6 hours: focus on Custom elements, Shadow DOM and HTML templates and slots, live with a trainer, online or on-site.

Duration
6 hours, one session
Level
Intermediate
Format
Online or on-site
Language
German or English
Certificate
Certificate of attendance

Overview

“Web Components” is designed for roles such as Frontend and full-stack developers and Web designers interested in coding. In 6 hours you work your way through Custom elements, Shadow DOM and HTML templates and slots in a structured way – with plenty of practice and time for your questions.

Modern web applications combine design, interactivity, performance and security. Frameworks such as React, Angular and Vue, complemented by solid HTML and CSS, APIs and build tools, make up the toolkit of today's frontend teams. Our courses teach this knowledge hands-on: you build interfaces, connect APIs, test and optimize for speed, accessibility and security. Each course lasts one day, takes place online or on site, and uses prepared projects so that time goes into what matters: good frontend craftsmanship.

The course is delivered live – either online in a virtual classroom or on-site in our training rooms in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart and Kaiserslautern. We can also run it exclusively for your team.

Focus areas of the course

Custom elementsShadow DOMHTML templates and slotsLit overviewStyling strategiesUse within frameworks

Who is this course for?

  • Frontend and full-stack developers
  • Web designers interested in coding
  • Backend developers building user interfaces
  • Team leads and UX owners

What you will be able to do

  • You know the key topics of Web Components – Custom elements, Shadow DOM, HTML templates and slots, Lit overview, Styling strategies and Use within frameworks – and can apply them in practice.
  • You implement tasks with Web Components in a structured, maintainable way.
  • You connect data and APIs cleanly to your interface.
  • You test and optimize your application for speed and accessibility.
  • You avoid typical security gaps when using Web Components.

Course outline

Module 1 Fundamentals and concepts of Web Components
  • Placing Web Components in the web ecosystem
  • Project structure, tooling and dev server
  • Core building blocks and terminology
  • A first working example
Module 2 Focus areas: Web Components
  • Custom elements
  • Shadow DOM
  • HTML templates and slots
  • Lit overview
  • Styling strategies
  • Use within frameworks
Module 3 Hands-on: building interfaces and logic
  • Structuring components or pages
  • Loading, displaying and processing data
  • Forms, validation and user interaction
  • Analyzing typical errors in the browser
Module 4 Quality: testing, performance, accessibility
  • Automated tests for Web Components
  • Measuring and improving load time and rendering
  • Considering accessibility per WCAG
  • Cross-browser compatibility
Module 5 Security, delivery and transfer
  • Avoiding common vulnerabilities such as XSS and CSRF
  • Build, bundling and deployment
  • Integration into existing projects
  • Further learning paths
Module 6 Transfer to your daily work
  • Exercise based on a realistic case
  • Typical mistakes and how to avoid them
  • Checklist and templates to take away
  • Open questions, outlook and resources for further learning

Prerequisites

Basic knowledge of HTML and CSS is helpful; for framework courses you should bring JavaScript basics. Introductory courses start without prior knowledge. Basic knowledge of the topic is helpful.

Technical requirements

Laptop with a current browser; we provide the editor, runtime and practice projects.

Dates & locations

For every location we suggest a date roughly four weeks ahead. Your preferred date is always possible.

  • Munich Mon, 14 December 2026 6 hrs Request
  • Salzburg Thu, 10 December 2026 6 hrs Request
  • Berlin Wed, 16 December 2026 6 hrs Request
  • Augsburg Tue, 15 December 2026 6 hrs Request
  • Hanover Fri, 11 December 2026 6 hrs Request
  • Bremen Thu, 10 December 2026 6 hrs Request
  • Stuttgart Fri, 11 December 2026 6 hrs Request
  • Kaiserslautern Tue, 15 December 2026 6 hrs Request
  • Online Fri, 11 December 2026 6 hrs Request

Frequently asked questions

What prior knowledge do I need for Web Components?

That depends on the level. Introductory courses need no programming experience. For framework and advanced courses you should know HTML, CSS and JavaScript in outline. The focus topics of each course show what is assumed and where we start.

Do we work on our own projects in Web Components?

We work with prepared sample projects that reflect typical real-world cases. For group bookings we can adapt tasks to your technology stack. You do not need to bring your own source code; if you have specific questions, we are happy to discuss them in the course.

How much does “Web Components” cost?

The course costs a flat €949 plus VAT per participant – whether online or on-site. This includes 6 hours of live training with a trainer, course materials, a lab environment and a certificate of attendance.

Can I suggest my own date?

Yes. For every location we suggest a date roughly four weeks ahead. In the request form you can always describe your preferred date or period in free text – we check availability and get back to you within one working day.

Is the course online or on-site?

Both are possible: live online in a virtual classroom or on-site in Munich, Salzburg, Berlin, Augsburg, Hanover, Bremen, Stuttgart and Kaiserslautern. We can also run the course exclusively for your team.

Can the course be tailored to our team?

Yes. Tailor-made courses cost approx. €4,500 more, depending on the topic and by arrangement. We agree content, examples and exercises with you in advance.

More courses in Web Development & Frontend

All 28 courses in Web Development & Frontend