[VIP] DesignCode: Build a web app with React Hooks

Design and code a web app using React, Gatsby, Contentful, Netlify and advanced CSS techniques with Styled Components

Reset your CSS, set up your fonts and create your first React component

Structure your Section component and install the Styled Components React library

Set your text styles and light/dark mode themes based on your design system

Create a reusable button component and receive React props

Learn to position and align elements in a flexible layout

Create a beautiful mouse over interaction using CSS transform properties

Powerful tricks to select elements, components and apply CSS filter effects

Learn how to create a beautiful frosted glass effect in CSS

Use CSS transform properties to apply perspective 3D effects

Learn how to loop with the map function using arrays and objects

Work with your static data and apply repeatable grid columns

Pass props to your Styled Components and use conditions to apply interesting effects

Show and hide a floating menu using React useState

Apply a CSS transition on your toggle interaction and show React components based on a condition

Handle the click event and prevent links from their default behavior

Create a wave background and use inline styling for quick CSS properties

Create a beautiful start animation in CSS using delays

Apply a gradient to your texts and use media queries to make your layout adaptive

Control the lifecycle of your app and publish your site online