Zealur

🍳 Preparations:

Intro

• Workshop is ~3-4h long.
• Workshop topics are isolated - participants need to know only base stuff like selectors and base CSS properties/values like color, background, width, height etc.. If participant for example doesn't know how to rotate element in CSS then Presenter should be asked for help
• Each exercise should last until each participant ends it

🧑‍🏫 Presenter

• Uses materials and goes through Walkthrough with presenting on the big screen each material with explanation without reading the text, text is just a reminders of topics and things to mention
• Should be familiar with materials and understand each case
• Modifies in browser codepens to show what happens when we change some properties and how it behaves in other scenarios.

Zealur

Story of styled components:

First: create seperate component for every DOM element that needs any styling

small margin needed => create separate component in separate file with unique name probably like this:

export const StyledSearchSelectListItemPreviewButtonIconWrapper = styled.div'
 margin-left: 0.8rem;
';

and then you have separate component for each element that need slight styling which ends up in having 100 components with margin-left: 0.8rem or margin-left: 1.2rem or margin-left: 0.7rem... with such funky names.

Zealur

Setting up Gatsby project

Starter 📦

If you're new to Gatsby, it's the best to pick some already configured starter.

I personally have used this one: contentful/starter-gatsby-blog made by guys from contentful, includes contentful, react-helmet, sharp

But if I had to do this one more time I would try this one: