Code+Design CSS/Webdesign Workshop

Final Website

• Starter Template? ➔ https://css.code.design/start
• Presentation? https://css.code.design/presentation
• Style? ➔ //css.code.design/css/style.css
• Image? ➔ //css.code.design/img/img.jpg

Help

CSS/HTML

• Which classes to use? https://tailwindcss.com
• Learn more Tailwind? https://gitlab.com/codedesigninitiative/awesome-tailwindcss-for-beginners
• How does it work in CSS/HTML? https://developer.mozilla.org/de/search?topic=css&topic=http
• More icons? https://fontawesome.com/icons?d=gallery
• More patterns? https://www.transparenttextures.com/
• More images? https://pexels.com
• More fonts? https://fonts.google.com/
• More inspiration? https://land-book.com/

Functionality

• Safer forms? https://getform.io

Class Order

(not strict, just for orientation, esp. in team)

1. Layout: Flex
2. Position: Width, Height, Margin, Padding, Height
3. Typo: Font weight, font size
4. Color: Text Color, Background Color
5. States: Shadow, Rounded, Icon, Background Image

Cheatsheet

HTML terms (HTML)

Box model and spacing (HTML)

CSS terms (CSS)

CSS terms (CSS)

Multiple classes (HTML)

Nested tags (HTML)

HSL colors (CSS)