In this project-based course you'll delve into the realm of advanced Figma features to craft a responsive website for a fictional, AirBnB-like rental service company called "Flexrent".
Design a Responsive Airbnb Website with Figma
11h 17m 58s
English
Paid
This isn't just any Figma practice project. The project takes you on a journey from initial client brief to a captivating website design, encompassing the entire design process from concept, to execution, to handoff!
About the Author: zerotomastery.io
Whether you are just starting to learn to code or want to advance your skills, Zero To Mastery Academy will teach you React, Javascript, Python, CSS and more to help you advance your career, get hired and succeed at some of the top companies in the world.
Watch Online 84 lessons
0:00
/ #1: Project Demo
All Course Lessons (84)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Project Demo Demo | 02:53 | |
| 2 | The Brief | 08:45 | |
| 3 | What We're Building In This Section | 02:22 | |
| 4 | Competitor UI/UX Audit | 08:17 | |
| 5 | User Flows | 05:41 | |
| 6 | Sitemaps | 11:58 | |
| 7 | Assignment - Create Your Own Userflows and Sitemaps | 01:15 | |
| 8 | Wireframes - Assets Overview | 03:21 | |
| 9 | Wireframes - Home | 09:45 | |
| 10 | Wireframes - Booking | 12:37 | |
| 11 | Assignment - Create Your Wireframes | 01:23 | |
| 12 | Typography | 13:13 | |
| 13 | What We're Building In This Section | 01:22 | |
| 14 | Colors - Primary and Neutrals | 07:19 | |
| 15 | Colors - Accents | 05:50 | |
| 16 | Elevations | 06:09 | |
| 17 | Icons | 02:00 | |
| 18 | Assignment - Set the Foundation | 01:33 | |
| 19 | What We're Building In This Section | 03:17 | |
| 20 | Badges - Avatars | 08:11 | |
| 21 | Badges - Review Badges | 11:01 | |
| 22 | Badges - Simple Location Badge | 03:43 | |
| 23 | Buttons - Interactive Basic Buttons | 15:49 | |
| 24 | Buttons - Interactive Icon Buttons | 07:03 | |
| 25 | Buttons - Interactive Profile Menu | 07:47 | |
| 26 | Buttons - Interactive Toggles | 10:44 | |
| 27 | Buttons - Interactive Like Icon | 09:46 | |
| 28 | Data Detail | 01:38 | |
| 29 | Assignment - Create Your Basic Components | 10:33 | |
| 30 | Navigation - Main Navigation Desktop | 13:30 | |
| 31 | Navigation - Main Navigation Mobile | 09:22 | |
| 32 | Navigation - Footer Desktop | 11:43 | |
| 33 | Navigation - Footer Mobile | 03:29 | |
| 34 | Navigation - Tabs | 09:17 | |
| 35 | Cards - Image Cards | 12:19 | |
| 36 | Cards - Image and Button Card | 07:24 | |
| 37 | Cards - Stacked Search Results Card | 14:04 | |
| 38 | Cards - Horizontal Search Results Card | 08:36 | |
| 39 | Cards - Booking Card Desktop | 08:49 | |
| 40 | Cards - Booking Card Mobile | 07:24 | |
| 41 | Forms - Messages | 04:54 | |
| 42 | Forms - Inputs | 09:00 | |
| 43 | Forms - All Purpose Inputs | 14:08 | |
| 44 | Forms - Checkboxes | 09:38 | |
| 45 | Forms - Radio Buttons | 08:54 | |
| 46 | Action Panels - General Action Panel | 08:22 | |
| 47 | Action Panels - Callout Panel | 04:51 | |
| 48 | Action Panels - Search Panel Desktop | 07:28 | |
| 49 | Action Panels - Search Panel Mobile | 09:48 | |
| 50 | Action Panels - Reserve Panel | 09:07 | |
| 51 | Popovers - Desktop Filters | 10:35 | |
| 52 | Popovers - Mobile Filters | 04:59 | |
| 53 | Popovers - List Menu | 07:39 | |
| 54 | Popovers - Guests Menu | 08:16 | |
| 55 | Reviews - Rating Scale | 09:16 | |
| 56 | Reviews - Collapsible Card | 09:45 | |
| 57 | Assignment - Create Your Advanced Components | 02:31 | |
| 58 | What We're Building In This Section | 02:45 | |
| 59 | Homepage - Hero Section | 11:16 | |
| 60 | Homepage - Locations Section | 13:44 | |
| 61 | Homepage - Attractions and Rentals Section | 09:57 | |
| 62 | Homepage - Action Panels and Footer Section | 11:41 | |
| 63 | Search - Filters and Results | 14:21 | |
| 64 | Search - Map and Alternate Views | 10:36 | |
| 65 | Listing - Page Setup | 09:20 | |
| 66 | Listing - Amenities and Reviews | 12:41 | |
| 67 | Listing - Policies | 09:32 | |
| 68 | Listing - Layout and Responsiveness | 12:37 | |
| 69 | Booking - Booking Creation | 19:31 | |
| 70 | Booking - Booking Creation Alternate Layout | 05:31 | |
| 71 | Booking - Confirmation | 08:16 | |
| 72 | Booking - Confirmation Alternate Layout | 04:29 | |
| 73 | Assignment - Create High Fidelity Designs | 02:10 | |
| 74 | Prototyping - Search Interaction | 11:52 | |
| 75 | Prototyping - Search Results Sticky Header | 07:05 | |
| 76 | Prototyping - Search Results Filtering | 09:07 | |
| 77 | Prototyping - Listing Scroll Behaviour | 06:09 | |
| 78 | Prototyping - Booking Flow | 13:01 | |
| 79 | Assignment - Create High Fidelity Prototypes | 02:29 | |
| 80 | The Handoff Doc | 06:52 | |
| 81 | What We're Building In This Section | 01:58 | |
| 82 | Component and Screen Documentation | 08:51 | |
| 83 | Showcasing Designs | 04:19 | |
| 84 | Showcasing Prototypes | 07:25 |
Unlock unlimited learning
Get instant access to all 83 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscription