Modern websites and applications have a component-based UI that has to work on every screen size. The CSS language was not designed for large and complex frontends but there is no other choice so we still have to use it.

This course will help you create large web applications that have manageable and maintainable stylesheets. You will learn how to embrace the cascade and balance encapsulation. You will look differently at Designs provided to you and learn how to provide useful feedback to your designers.

Course objectives

• You can create responsive components that look great on any screen in every Language.
• You learn the modern layout technologies Flexbox and CSS Grid.
• You understand the difference between semantics and styling.
• You can correctly extract primitives form a provided design.
•  You can keep complexity under control by lowering the specifity and number of your selectors.
• You learn the pitfalls and common mistakes that you have to avoid.
• You can recognize errors and omissions in the designs provided to you.
• You know how to use a frontend framework to its fullest potential
• You can create components that always look great even when you don’t have control over the layout, e.g. in a CMS context.

Course contents

•  Structural thinking
• Semantic HTML
•  CSS concepts
• CSS technologies Flexbox, Grid and Variables
• Working with Frontend-Frameworks
• Working together with Designers

Target audience

Frontend Developers, Interaction Designers

Previous knowledge

Basic HTML and CSS knowledge

Bring with you

Laptop with installed Browser, Git and Code-Editor

Form

Theory lessons, some excercises, Videos

Referent

Simon Bächler, ti&m