Create a responsive seat selector UI in HTML, CSS, and JS

Access provided by PSGR Krishnammal College for Women

7,019 already enrolled

Project

Demonstrate your skills to employers, and leverage industry tools to solve real-world challenges

Intermediate level

Recommended experience

5 hours

Complete at your own pace

Project

Demonstrate your skills to employers, and leverage industry tools to solve real-world challenges

Intermediate level

Recommended experience

5 hours

Complete at your own pace

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

Shareable work sample

Add to your Coursera profile

Taught in English

No downloads or installation required

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

Learn more about Coursera for Business

logos of Petrobras, TATA, Danone, Capgemini, P&G and L'Oreal

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

Offered by

Coursera

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