AirBnb: Tutorial
Discover what you can do in Agua!
In this tutorial, we'll walk through the process of replicating the UI of Airbnb.
You will start by building a button, followed by a card, and the site header. By the end of this tutorial, you will have a responsive interface and its React code resembling Airbnb's homepage.
Basic Setup:
Retrieve all necessary Airbnb assets from GitHub and start your project in Agua
1. Fork and clone GitHub Repo
Repo URL:
2. Open your Repo folder in Agua
Sign in URL:
2.1. Register with your Google Account.
-Inside the Sign in-
2.2. Open the Editor.
-Inside your Dashboard-
[Click] the Open Editor button.
2.3. Create a project.
-Inside the Editor-
[Click] the Open folder button.
2.4 Locate your folder.
-Inside your File Explorer-
Find your Repo folder an [Click] the Select button.
2.5. Grant files permission.
-Inside the Chrome permission prompt-
[Click] the Edit files button.
2.6. Access your project.
-Inside your project Editor-
Your will Create:
To understand the basics of Agua, you will build a series of components and sections of the Airbnb UI.
Click here and create an Airbnb button in 5 minutes!
Click here and create an Airbnb card in 15 minutes!
C. Home Screen: Header
Click here and create an Airbnb Header in 30 minutes!
Last updated