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
Added to CourseFlix
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
- Language
- English
- Added to CourseFlix
- May 2024
- Instructor
- Zero To Mastery
- Price
- Premium
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
Who teaches Design a Responsive Airbnb Website with Figma? Zero To Mastery
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?
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 |
Watch the other 83 lessons
One payment unlocks this course and every other premium course. No auto-renew.
See plansWhat courses are similar to Design a Responsive Airbnb Website with Figma?
NewNext-Level Web Design
By: Benten WoodringThe advanced web design course will help you master modern tools, create professional layouts, and build a portfolio for confident growth.9h 35m
Updated 3y agoKickstart your UI/UX Design Career / DesignCourse UI/UX
By: Gary SimonJoin the most interactive course for learning UI/UX Design with Gary Simon. The DesignCourse UI/UX Curriculum is taught entirely with Figma. You will go from ab16h 33m
Updated 1y agoFigma Academy 2.0
By: Michael RidderingLearn Figma through clear steps and real examples. This course helps you build strong habits and apply design skills with confidence.11h 19m
Updated 2y agoPixel Perfect Figma to Tailwind
By: Pro Tailwind (Simon Vrachliotis), Simon VrachliotisThis workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development.2h 40m
Updated 1mo agoMotion Design with Figma: Animations, Motion Graphics, UX/UI
By: Zero To MasteryLearn motion design in Figma across 161 lessons: Smart Animate, micro-interactions, transitions, and portfolio-ready animation projects.10h 11m
Updated 2y agoLearn Figma - UI/UX Design Essential Training
By: UdemyFigma is a very powerful application that runs online. There are virtually no platform boundaries when it comes to using figma because you can design within a w3h 55m5/5
More courses by Zero To Mastery
ClassicComplete Web Developer in 2025: Zero to Mastery
Learn to code. Get hired. This is one of the most popular, highly rated coding bootcamps online. It's also the most moderen and up-to-date. Guaranteed. You'll g37h 3m5/5
ClassicComplete Next.js Developer in 2023: Zero to Mastery
Learn Next JS from industry experts using modern best practices. The only Next JS tutorial + projects course you need to learn Next JS, build enterprise-level R27h 12m5/5
ClassicComplete SQL + Databases Bootcamp: Zero to Mastery
With so many online resources available, it can be paralyzing not only figuring out where to start but more importantly which courses will actually teach you th24h 6m5/5
Updated 3y agoPower BI Bootcamp: Zero to Mastery
This Power BI Bootcamp will take you from absolute beginner in Power BI to being able to get hired as a confident and effective Business Intelligence Analyst. Y16h 55m
Updated 3y agoBash Scripting: Learn Shell Scripting
Learn Bash Scripting from scratch, from an industry expert. You'll learn Shell Scripting fundamentals, master the command line, and get the practice.9h 38m
FreeUpdated 3y agoChatGPT & Large Language Models (LLMs): A Practical Guide
Learn how ChatGPT actually works under the hood! This byte-sized course will get you up to speed on Large Language Models (LLMs) including topics like Prompt De58m5/5
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.