minkaotic/css-workshop

CSS Workshop

Looking at the task to create a 'GitHub user search' UI, we'll explore a number of important concepts and techniques for laying out and aligning things in CSS.

👉 View the task on Frontend Mentor

Setup

1. Clone this repo & cd css-workshop/github-user-search
2. Run npm install
3. Run npm run start to run the app locally

Start from a static UI

Approaching things in the following order allows us to gather feedback from product early:

1. Break the design into pieces
2. Build a static UI (with stub data)
3. Implement behaviours of the app
   • Add state to allow for interactivity
   • Get real data from the backend

A static UI demonstrates what the app would/could do - and helps us iron out any questions or unclear requirements before getting too far down the line of writing the implementation.

The official React guidelines also recommend this approach.

💡 This workshop will only focus on the first 2 steps!

Let's go!

1. Breaking down the design
2. Understanding display modes
3. The CSS box model
4. Different layout techniques
5. Flexbox basics
6. Fun with Sass