Career Switch to Frontend Web Development
excl.
Training program facts
Key learnings
Development of user-side components of websites and apps with a focus on designs using
HTML, CSS, and JavaScript, as well as frameworks such as React and design tools such as version control (Git).
Requirements
- Basic digital skills and fundamental knowledge of how the internet works are required.
- Some programming experience makes it easier to get started and is recommended.
Program content
| Day | Modules |
| Saturday 1 | Module 1: Introduction to the Web & Frontend
· What is the web? How websites work · Understanding client vs server · What front-end development is · Browsers and rendering engines · Overview of HTML, CSS, JavaScript · Developer tools (Chrome DevTools, VS Code) Module 2: HTML Fundamentals 2.1 HTML Basics · HTML structure (<!DOCTYPE html>, <html>, <head>, <body>) · Common tags: headings, paragraphs, lists, links, images 2.2 Page Structure & Semantics · Semantic tags: <header>, <nav>, <section>, <article>, <footer> · Best practices for semantic markup · Accessibility basics (alt text, labels) |
| Wednesday 1 | 2.3 HTML Forms
· Inputs, select, textarea · Form attributes (action, method) · Basic form validation (required, minlength) |
| Saturday 2 | Module 3: CSS Fundamentals
3.1 CSS Basics · CSS syntax & selectors · Colors, typography, spacing · Classes vs. IDs · Inline, internal, external CSS 3.2 Box Model & Layout · Margin, padding, border · Display types (block, inline, inline-block) · Positioning (static, relative, absolute, fixed, sticky) 3.3 Modern Layout Techniques · Flexbox (axis, alignment, ordering) · CSS Grid (rows, columns, templates) 3.4 Responsive Design · Media queries · Mobile-first design · Units: px, em, rem, vh, vw · Introduction to responsive images |
| Wednesday 2 | Module 4: JavaScript Fundamentals
4.1 Introduction to JS · Variables (let, const) · Data types · Operators · Control flow (if, loops) 4.2 Introduction to Bootstrap |
| Saturday 3 | 4.3 Functions & Scope
· Function declarations & expressions · Arrow functions · Block vs. function scope 4.4 DOM Manipulation · Selecting elements (querySelector) · Changing content & styles · Creating/removing elements · Event handling (click, input, submit) 4.5 Basic Browser APIs · localStorage · Timers (setTimeout, setInterval) · Fetch basics (GET requests) Workshop and Hands-On Training |
| Wednesday 3 |
Module 5: TypeScript· Types, interfaces, enums · Functions & generics · Modules · Working with TS in React/Angular/Vue projects |
| Saturday 4 | Module 6: Version Control (Git & GitHub)
· Installing and configuring Git · Basic commands: init, add, commit, status · Branching and merging · Working with GitHub (clone, push, pull) Module 7: Web Development Tools · VS Code essentials (extensions, debugging) · Package managers (npm basics) · Prettier & ESLint (code formatting and linting) Browser DevTools (Elements, Console, Network) · Build practical projects Module 8: Introduction to UI Frameworks (Optional Beginner Exposure) (Not required for basics, but helpful) · What frameworks are (React, Vue, Angular) · When/why to use them · Simple "Hello World" in React (optional) Module 9: Develop design and user experience skills. User design is a large part of front-end development. You need to understand the importance ofuser experiencedesign principles and the tools available to help you. You’ll also need a solid grasp of the use of color and typography. Consider learning design software and tools like Adobe XD to create visual representations of user interfaces. |
| Wednesday 4 | Module 10: Introduction to React
· Introduction to React and its ecosystem · Setting up a development environment · Creating a simple React app · Understanding JSX and component structure |
| Saturday 5 | Module 11: Components and Props
· Creating and using functional components · Passing props to components · State management in React Handling user events Module 12: State Management · Introduction to React state and lifecycle methods · Managing state with useState and useEffect hooks Handling form inputs and validation · Practice exercises and mini-projects |
| Wednesday 5 | Module 13: Workshop and Hands-On Training
· Writing clean, semantic HTML · Keeping CSS organized · Naming conventions (BEM basics) · Avoiding “spaghetti JavaScript” · Accessibility fundamentals · Performance basics (image optimization) |
| Saturday 6 | Module 14: Project work
· Work on a final project that incorporates all the concepts learned · Guidance and feedback from instructor · Presentation of final projects · Wrap-up and next steps Module 15: Hands-On Training (Beginner-level project ideas): · Personal portfolio webpage · Responsive landing page · Image gallery with grid · Simple to-do list using JS · Calculator · Contact form with validation |
| Wednesday 6 | Module 16: Styling in React
· Introduction to CSS-in-JS libraries (e.g., styled-components) · Applying styles to React components · Responsive design and media queries · Optimizing styles for performance |
| Saturday 7 | Module 17: Best Practices for Beginners
· Writing clean, semantic HTML · Keeping CSS organized · Naming conventions (BEM basics) · Avoiding “spaghetti JavaScript” · Accessibility fundamentals · Performance basics (image optimization) |
| Wednesday 7 | Module 18: Final project work
· Work on a final project that incorporates all the concepts learned · Guidance and feedback from instructor · Presentation of final projects · Wrap-up and next steps |
Questions about the program?
Do you have questions about the program?
I would like to book this program as a corporate program
Career Switch to Frontend Web Development
Register now
Career Switch to Frontend Web Development
28.02.2026
18.04.2026
excl.
Zurich Airport
