https://github.com/5hraddha/huddle-landing-page

A Huddle landing page with alternating feature blocks taken from Frontend Mentor challenges
https://github.com/5hraddha/huddle-landing-page

frontend-mentor frontendmentor-challenge huddle-landing-page react react-hooks reactjs styled-components

Last synced: 6 days ago
JSON representation

A Huddle landing page with alternating feature blocks taken from Frontend Mentor challenges

• Host: GitHub
• URL: https://github.com/5hraddha/huddle-landing-page
• Owner: 5hraddha
• Created: 2021-12-15T17:18:38.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-11T02:18:16.000Z (almost 3 years ago)
• Last Synced: 2024-04-18T08:14:35.561Z (7 months ago)
• Topics: frontend-mentor, frontendmentor-challenge, huddle-landing-page, react, react-hooks, reactjs, styled-components
• Language: JavaScript
• Homepage: https://5hraddha.github.io/huddle-landing-page/
• Size: 5.91 MB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

# Project: Huddle Landing Page

- [About the Project](#about-the-project)

- [Screenshot](#screenshot)

- [Technologies and Standards Used](#technologies-and-standards-used)

  - [ReactJS](#reactjs)

  - [Styled Components](#styled-components)

- [Components Hierarchy](#components-hierarchy)

- [Live Demo](#live-demo)

## About the Project

This project is a solution to the [Huddle landing page with alternating feature blocks challenge](https://www.frontendmentor.io/challenges/huddle-landing-page-with-alternating-feature-blocks-5ca5f5981e82137ec91a5100) taken from Frontend Mentor and made in *ReactJS* using *React Hooks* and *Styled Components*.

## Screenshot



## Technologies and Standards Used

**The technologies that have been used are:**

1. HTML (Hyper Text Markup Language)

2. CSS (Cascading Style Sheets)

3. ReactJS

4. React Styled Components

### [ReactJS](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)

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*](https://reactjs.org/docs/typechecking-with-proptypes.html) for the UI components that needs some props.

### [Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)

[*Styled components*](https://styled-components.com/) 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](https://styled-components.com/docs/basics#motivation)

- [React Styled Components Tutorial](https://www.robinwieruch.de/react-styled-components/)

- [Easily debug styled-components' random classes](https://www.daggala.com/easily-debug-styled-components-random-classes/)

- [Styled Components Best Practices](https://www.robinwieruch.de/styled-components/)

## Components Hierarchy

You can read about the structure and usage of the different components - [here](https://5hraddha.github.io/huddle-landing-page/../../../styleguide/index.html)  



## Live Demo

Check the live page [here](https://5hraddha.github.io/huddle-landing-page/)