week-1.md

Week 1

Table of Contents

• Inspiration
• Slides
• Theory
• Lab

Inspiration

The Experimental Layout Lab by Jen Simmons by @jensimmons.

Slides

• Lecture-1
• Lab-1

Theory

• Why do all the websites look the same? by Boris Müller.
• Frontend design by Brad Frost
• The Great Divide by Chris Coyier
• Devtools for Designers by Chris Coyier

Lab

Steal like an artist

Recreate your chosen piece of artwork in the browser.

Synopsis

• Time: 16:00h
• Goals: subgoal 1, subgoal 2, subgoal 3 & subgoal 4
• Due: before lecture 2

Description

Build your artwork inside the browser. Start with an html breakdown, sketch out on paper. What html elements do you need? Then start creating a boilerplate inside of your github repository. What files do you need? Play around inside of the Developer Tools (firefox, safari, chrome) to tweak your design.

• Do you need SVGs for certain elements?
• What types of styling can you do with CSS? What selectors can you use?
• How are you going to layout the page? Do you need to use flexbox or css-grid?
• How does it need to look based on different screen sizes? Should it be responsive?

Extra resources

• Shay Howe - Transforms
• Sara Soueidan - SVG articles
• MDN - SVG Tutorial
• CSS Tricks - Flexbox
• CSS Tricks - Grid
• Webflow University - Box Model

Playground

• Layout Land
• CSS Grid Garden
• Flexbox froggy
• CSS voor de dames (Sanne 't Hooft)
• CSS Dinner