In these 3 hours we will go through a lot when it comes to CSS layouts, variables and ways to use them in the React world.
Remember that whatever way you decide to continue using is merely a choice, none are better than the previous.
- Starter Sandbox: https://codesandbox.io/s/no-design-21zy2
- CSS Version: https://codesandbox.io/s/css-design-g6t0v
- CSS Variables: https://codesandbox.io/s/css-design-variables-ri1nl
- CSS Modules Version: https://codesandbox.io/s/css-modules-design-qroru
- SCSS Version: https://codesandbox.io/s/scss-variables-xfrvk
- Emotion Version: https://codesandbox.io/s/emotion-styled-jrw8n
- Emotion Theme Version: https://codesandbox.io/s/emotion-styled-themes-i37f5
- Tailwind: https://codesandbox.io/s/tailwind-7bzr2?file=/src/App.js
- Frontend Mentor: https://www.frontendmentor.io/challenges?types=free
- Flexbox Guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- CSS Grid Game: https://cssgridgarden.com/
- Flexbox Game: https://flexboxfroggy.com/
- CSS Variables: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
- Sass: https://sass-lang.com/
- Emotion styled docs: https://emotion.sh/docs/@emotion/styled#gatsby-focus-wrapper
- Emotion Global Styles: https://emotion.sh/docs/globals
- Emotion Theming: https://emotion.sh/docs/theming
- Styled Components: https://styled-components.com/
- Tailwind: https://tailwindcss.com/
- Tailwind VS Code plugin: https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
Thank you
Sara Vieira @NikkitaFTW