Associate Frontend Web Development
exkl. MwSt.
Trainingsprogramm Fakten
Key learnings
Entwicklung der benutzerseitigen Teile von Webseiten und Apps mit dem Schwerpunkt, Designs mithilfe von
HTML, CSS und JavaScript sowie Frameworks wie React und Tools für Design wie Versionskontrolle (Git).
Anforderungen
- Digitale Grundkenntnisse und Basiswissen zur technischen Funktionsweise des Internets sind erforderlich.
- Erste Programmiererfahrung erleichtert den Einstieg und ist empfohlen.
Programm Inhalt
| Day | Modules |
| Saturday 1 | Module 1: Introduction to the Web & Frontend
· What is the web? How websites work · Understanding client vs server · What frontend 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 Intro 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: Intro 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 of user experience design 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 |
Fragen zum Programm?
Haben Sie Fragen zum Programm?
Ich möchte dieses Programm als Firmenprogramm buchen
Associate Frontend Web Development
Jetzt Anmelden
Associate Frontend Web Development
28.02.2026
18.04.2026
exkl. MwSt.
Zürich Airport