Monday 14:30 – 18:30 & Tuesday 15:30 – 18:45 Summersemester 2026
Now that we finished our first printed catalogue we are slowly leaving Adobe InDesign and a transfer from Adobe Indesign to CSS (and HTML).
Please download the Indesign Template for the first part of the assignment. You will find a set of paragraph styles to change type size and the amount of columns. Use only the paragraph styles to design the text:
For the second part of the assignment we move to codepen.io where we find the first HTML/CSS-template. The enviroment of CSS-classes is similar to the paragraph styles from the InDesign file. You can add classes in the HTML OR add HTML-tags in the CSS-file to the classes.
Design the text by changing either the HTML and CSS file.
In the third part we want to add a button to our design and make the static layout interactive. Look at the documentation of the detail/summary-tag and add buttons in your HTML.
See what happens if you put one detail/summary-element into the other und see what it does to CSS-attributes like column-count.
Now we learn two other principles to organize and design (multi-column)-layouts in CSS – none of them is better or worse, they are different so it’s not either or but important to learn both. If you know both of them, the world is yours and you will be able to build any kind of layout.
Pick a website of your choice and open the developer tools in your browser (Opt + cmd + c [if you are using Safari, you first have to enable the developer tools in the settings]). Mess with the design using CSS FLEX/GRID and all the other CSS rules you have learned so far.
Note: FLEX and GRID are rather advanced methods to create layouts. If you are looking for the basics rules of postioning take a look at this tutorial.