Create a responsive seat selector UI in HTML, CSS, and JS
Ends soon! Keep adding new skills with 10,000+ programs for $239 (usually $399). Save now.
Create a responsive seat selector UI in HTML, CSS, and JS
7,565 already enrolled
Recommended experience
Recommended experience
Objectives
Prototype a responsive seat map visual layout maximizing cross-device usage
Connect the visual seat map to a grid of seats (columns and rows) to be used for booking
Change the controls dynamically, depending on screen size, to increase booking completions
Skills you'll demonstrate
Details to know
Add to your Coursera profile
Use a Coursera Lab, a pre-configured in-browser cloud workspace (only available on desktop)
See how employees at top companies are mastering in-demand skills
About this Project
In this project, you’ll support Sugarland Theaters’ effort to increase revenue by enabling guests to book their seats on the go using its web app.
You’re task is to build a responsive seat selector UI component, specifically a responsive web interface using HTML, CSS, and Javascript that lets guests manage their seat reservations with an interactive map and adapt the seat map to their device screen size. There isn’t just one right approach or solution in this scenario, which means you can create a truly unique project that helps you stand out to employers. ROLE: Software Developer SKILLS: HTML, CSS, Javascript PREREQUISITES: Media queries and layout modalities such as flexbox and grid with HTML5 and CSS Manage arrays, visual breakpoints and DOM interactions with Javascript
Project plan
This project requires you to independently complete the following steps:
- •
Create a responsive visual layout
- •
Create the seat/area map structure in Javascript
- •
Switch between the desktop seat map and the areas mobile layout
- •
Create the seat map detail of each seat area
- •
Select a seat and send the data back to the server
Demonstrate your skills with Projects
Projects give you real-world challenges to solve with industry tools, and produce work samples that you can add to your Coursera Skills Profile to help you stand out to employers.
Manage my profile
