https://github.com/asbhogal/react-airbnb-experiences-landing-page

A landing page for 'Airbnb Experiences' created as part of the freeCodeCamp's React tutorial, coded with HTML5, CSS3, SCSS, JavaScript (ES6), React and leveraging Babel and Webpack. The design has been adapted from a Figma file (see mockups directory.) This repo is currently under development.
https://github.com/asbhogal/react-airbnb-experiences-landing-page

babel css3 figma freecodecamp freecodecamp-project front-end frontend html5 javascript js react scrimba scrimba-react scss webpack

Last synced: about 8 hours ago
JSON representation

A landing page for 'Airbnb Experiences' created as part of the freeCodeCamp's React tutorial, coded with HTML5, CSS3, SCSS, JavaScript (ES6), React and leveraging Babel and Webpack. The design has been adapted from a Figma file (see mockups directory.) This repo is currently under development.

• Host: GitHub
• URL: https://github.com/asbhogal/react-airbnb-experiences-landing-page
• Owner: asbhogal
• Created: 2022-11-27T21:54:40.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-01T23:35:34.000Z (about 2 years ago)
• Last Synced: 2023-04-24T16:12:11.266Z (over 1 year ago)
• Topics: babel, css3, figma, freecodecamp, freecodecamp-project, front-end, frontend, html5, javascript, js, react, scrimba, scrimba-react, scss, webpack
• Language: JavaScript
• Homepage: https://react-airbnb-experiences-landing-page.vercel.app
• Size: 23.9 MB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


React Airbnb Experiences Landing Page Project - freeCodeCamp


![](https://api.checklyhq.com/v1/badges/checks/8382f657-60f9-4adf-8ac3-ef5902818ecd?style=for-the-badge&theme=dark) ![](https://api.checklyhq.com/v1/badges/checks/8382f657-60f9-4adf-8ac3-ef5902818ecd?style=for-the-badge&theme=dark&responseTime=true) 

 ![GitHub deployments](https://img.shields.io/github/deployments/asbhogal/React-Airbnb-Experiences-Landing-Page/production?label=DEPLOYMENT%20STATE&style=for-the-badge&labelColor=000) ![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/asbhogal/React-Airbnb-Experiences-Landing-Page?style=for-the-badge&labelColor=000) ![GitHub repo size](https://img.shields.io/github/repo-size/asbhogal/React-Airbnb-Experiences-Landing-Page?color=blueviolet&style=for-the-badge&labelColor=000)



A landing page for 'Airbnb Experiences' created as part of the freeCodeCamp's React tutorial, coded with HTML5, CSS3, SCSS, JavaScript (ES6), React and leveraging Babel and Webpack. The design has been adapted from a Figma file (see mockups directory) which replicates the layout from AirBnb. Data for the card is returned from the data.js file using .map and conditional rendering is leveraged to return a badge stating either 'ONLINE' or 'SOLD OUT' if a set of conditions are met (ie. 'truthy' values.) An object of the individual props are then passed to the component.

:heavy_check_mark: Features:


  - Designed from Figma mockup

  - Leverages .map() and conditional rendering

  - Passes an object of props as a singular prop to card components

  - Fully responsive

  - Optimised for the web

:nerd_face: Stacks & Tools Used:























:link: Links


 - React 'Airbnb Experiences - Landing Page' Project

 - freeCodeCamp course - YouTube

 - freeCodeCamp course - Scrimba