CourseFlix

Design a Responsive Airbnb Website with Figma

11h 17m 58s
English
Paid

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".

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!

Additional

https://danielschifano.notion.site/Flexrent-Project-Resources-ea03299c354d430dab59dbaa330a5413

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 84 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 84 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Project Demo
All Course Lessons (84)
#Lesson TitleDurationAccess
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

Course content

84 lessons · 11h 17m 58s
Show all 84 lessons
  1. 1 Project Demo 02:53
  2. 2 The Brief 08:45
  3. 3 What We're Building In This Section 02:22
  4. 4 Competitor UI/UX Audit 08:17
  5. 5 User Flows 05:41
  6. 6 Sitemaps 11:58
  7. 7 Assignment - Create Your Own Userflows and Sitemaps 01:15
  8. 8 Wireframes - Assets Overview 03:21
  9. 9 Wireframes - Home 09:45
  10. 10 Wireframes - Booking 12:37
  11. 11 Assignment - Create Your Wireframes 01:23
  12. 12 Typography 13:13
  13. 13 What We're Building In This Section 01:22
  14. 14 Colors - Primary and Neutrals 07:19
  15. 15 Colors - Accents 05:50
  16. 16 Elevations 06:09
  17. 17 Icons 02:00
  18. 18 Assignment - Set the Foundation 01:33
  19. 19 What We're Building In This Section 03:17
  20. 20 Badges - Avatars 08:11
  21. 21 Badges - Review Badges 11:01
  22. 22 Badges - Simple Location Badge 03:43
  23. 23 Buttons - Interactive Basic Buttons 15:49
  24. 24 Buttons - Interactive Icon Buttons 07:03
  25. 25 Buttons - Interactive Profile Menu 07:47
  26. 26 Buttons - Interactive Toggles 10:44
  27. 27 Buttons - Interactive Like Icon 09:46
  28. 28 Data Detail 01:38
  29. 29 Assignment - Create Your Basic Components 10:33
  30. 30 Navigation - Main Navigation Desktop 13:30
  31. 31 Navigation - Main Navigation Mobile 09:22
  32. 32 Navigation - Footer Desktop 11:43
  33. 33 Navigation - Footer Mobile 03:29
  34. 34 Navigation - Tabs 09:17
  35. 35 Cards - Image Cards 12:19
  36. 36 Cards - Image and Button Card 07:24
  37. 37 Cards - Stacked Search Results Card 14:04
  38. 38 Cards - Horizontal Search Results Card 08:36
  39. 39 Cards - Booking Card Desktop 08:49
  40. 40 Cards - Booking Card Mobile 07:24
  41. 41 Forms - Messages 04:54
  42. 42 Forms - Inputs 09:00
  43. 43 Forms - All Purpose Inputs 14:08
  44. 44 Forms - Checkboxes 09:38
  45. 45 Forms - Radio Buttons 08:54
  46. 46 Action Panels - General Action Panel 08:22
  47. 47 Action Panels - Callout Panel 04:51
  48. 48 Action Panels - Search Panel Desktop 07:28
  49. 49 Action Panels - Search Panel Mobile 09:48
  50. 50 Action Panels - Reserve Panel 09:07
  51. 51 Popovers - Desktop Filters 10:35
  52. 52 Popovers - Mobile Filters 04:59
  53. 53 Popovers - List Menu 07:39
  54. 54 Popovers - Guests Menu 08:16
  55. 55 Reviews - Rating Scale 09:16
  56. 56 Reviews - Collapsible Card 09:45
  57. 57 Assignment - Create Your Advanced Components 02:31
  58. 58 What We're Building In This Section 02:45
  59. 59 Homepage - Hero Section 11:16
  60. 60 Homepage - Locations Section 13:44
  61. 61 Homepage - Attractions and Rentals Section 09:57
  62. 62 Homepage - Action Panels and Footer Section 11:41
  63. 63 Search - Filters and Results 14:21
  64. 64 Search - Map and Alternate Views 10:36
  65. 65 Listing - Page Setup 09:20
  66. 66 Listing - Amenities and Reviews 12:41
  67. 67 Listing - Policies 09:32
  68. 68 Listing - Layout and Responsiveness 12:37
  69. 69 Booking - Booking Creation 19:31
  70. 70 Booking - Booking Creation Alternate Layout 05:31
  71. 71 Booking - Confirmation 08:16
  72. 72 Booking - Confirmation Alternate Layout 04:29
  73. 73 Assignment - Create High Fidelity Designs 02:10
  74. 74 Prototyping - Search Interaction 11:52
  75. 75 Prototyping - Search Results Sticky Header 07:05
  76. 76 Prototyping - Search Results Filtering 09:07
  77. 77 Prototyping - Listing Scroll Behaviour 06:09
  78. 78 Prototyping - Booking Flow 13:01
  79. 79 Assignment - Create High Fidelity Prototypes 02:29
  80. 80 The Handoff Doc 06:52
  81. 81 What We're Building In This Section 01:58
  82. 82 Component and Screen Documentation 08:51
  83. 83 Showcasing Designs 04:19
  84. 84 Showcasing Prototypes 07:25

Related courses

  • Figma design system - Figma UI kit and style variables thumbnail

    Figma design system - Figma UI kit and style variables

    By: Adham Dannaway
    Learn how to build clean and fast designs in Figma. Use ready components, smart layouts, and clear styles to help you shape sites and apps with ease.
  • Design System Course for Figma thumbnailNew

    Design System Course for Figma

    By: Headway
    Master the creation of design systems in Figma. A course for designers, developers, and managers seeking efficient work practices and up-to-date knowledge.
    12 hours 20 minutes 50 seconds
  • Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more thumbnail

    Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

    By: Udemy, Zero To Mastery
    Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently
    20 hours 31 minutes 41 seconds

Frequently asked questions

What is Design a Responsive Airbnb Website with Figma about?
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".
Who teaches Design a Responsive Airbnb Website with Figma?
Design a Responsive Airbnb Website with Figma is taught by Zero To Mastery. You can find more courses by this instructor on the corresponding source page.
How long is Design a Responsive Airbnb Website with Figma?
Design a Responsive Airbnb Website with Figma contains 84 lessons with a total runtime of 11 hours 17 minutes. All lessons are available to watch online at your own pace.
Is Design a Responsive Airbnb Website with Figma free to watch?
Design a Responsive Airbnb Website with Figma is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Design a Responsive Airbnb Website with Figma online?
Design a Responsive Airbnb Website with Figma is available to watch online on CourseFlix at https://courseflix.net/course/design-a-responsive-airbnb-website-with-figma. The page hosts every lesson with the integrated video player; no download is required.