This project is a solution to the Huddle landing page with alternating feature blocks challenge taken from Frontend Mentor and made in ReactJS using React Hooks and Styled Components.
The technologies that have been used are:
- HTML (Hyper Text Markup Language)
- CSS (Cascading Style Sheets)
- ReactJS
- React Styled Components
React.js is an open-source JavaScript library that is used for creating single-page applications and reusable UI components. In this project, we are using React Hooks for creating UI components and have enabled typechecking With PropTypes for the UI components that needs some props.
Styled components are a CSS-in-JS tool that bridges the gap between components and styling.
Why Styled Components?
-
Automatic vendor prefixing - We can use standard CSS properties, and styled components will add vendor prefixes should they be needed.
-
Unique class names - Styled components generates unique class names for our styles. We never have to worry about duplication, overlap or misspellings.
-
Simple dynamic styling - Adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
-
Painless maintenance - We never have to hunt across different files to find the styling affecting our component, so maintenance is a piece of cake no matter how big our codebase is.
Read about Styled Components
- Motivation behind Styled Components
- React Styled Components Tutorial
- Easily debug styled-components' random classes
- Styled Components Best Practices
You can read about the structure and usage of the different components - here
Check the live page here