CF

Design a Responsive Airbnb Website with Figma

11h 17m 58s
English
Paid

Design a Responsive Airbnb Website with Figma is a 84-lesson 11 hours 17 minutes self-paced course by Zero To Mastery. 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".

Course facts

Lessons
84
Duration
11 hours 17 minutes
Level
All levels
Language
English
Updated
Instructor
Zero To Mastery
Price
Premium

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

Who teaches Design a Responsive Airbnb Website with Figma? 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.

What lessons are included in Design a Responsive Airbnb Website with Figma?

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

What courses are similar to Design a Responsive Airbnb Website with Figma?

More courses by Zero To Mastery

Frequently asked questions

What are the prerequisites for taking this course?
Before enrolling in this course, it is recommended that students have a basic understanding of Figma and web design principles. Familiarity with basic design concepts such as typography, color schemes, and UI components would be beneficial. Prior experience with creating wireframes and user flows can also help in understanding the course material more effectively.
What will I build during the course?
Throughout the course, you will build a responsive website for a fictional rental service company called 'Flexrent'. The project includes designing various elements such as wireframes, typography, color schemes, buttons, navigation components, and advanced components like action panels and popovers. The course culminates in creating a functional homepage with sections like the Hero and Locations.
Who is the target audience for this course?
This course is ideal for aspiring UI/UX designers who want to enhance their skills in using Figma for web design projects. It is also suitable for individuals who are interested in creating responsive website designs and wish to learn advanced features of Figma through a practical, project-based approach.
How does this course compare to other Figma courses in terms of depth and scope?
This course offers a project-based approach focusing on advanced Figma features to build a comprehensive responsive website. Unlike introductory courses that may only cover basic tools and techniques, this course delves into detailed aspects such as competitor UI/UX audits, user flows, sitemaps, and advanced components like badges, buttons, and action panels.
What specific tools or platforms will I learn to use?
The course focuses on using Figma as the primary tool for designing a responsive website. Students will explore advanced Figma features including creating wireframes, setting typography, selecting color schemes, and designing interactive components like buttons and popovers. The course also covers navigation design for both desktop and mobile interfaces.
What topics are not covered in this course?
This course does not cover coding or back-end development for websites. It focuses solely on the design aspect using Figma, including wireframes, UI components, and responsive layouts. Students interested in learning coding or integrating design into functional websites might need additional courses.
How much time should I expect to commit to this course?
The course consists of 84 lessons, and while the total runtime is not specified, students should be prepared to invest a significant amount of time. This includes not only watching lessons but also completing hands-on assignments such as creating user flows, sitemaps, wireframes, and various UI components in Figma.