Example Projects
Create a responsive seat selector UI in HTML, CSS, and JS
Project Scenario
The team at Sugarland Theaters is trying to increase their revenue from the cinemas and theaters they manage. To do this, the company wants to enable users to book their seats on-the-go more easily, guaranteeing a smooth experience. Do users only reserve their seats from their desktop? Many users book their seats on-the-go when they're out with friends, deciding for a last minute movie night. How to enable users to understand the seat map easily on a small screen? How to enable a good experience on a tablet? For example, a significant portion of users may reserve their seats at home from their couch, planning a family evening out.
Sugarland Theaters wants you to provide an initial prototype, imagining how a responsive seat booking web interface may look like: mapping the seats, showing what seats are available and occupied, and adapting the map to the screen size. The company also wants you to come up with different controls that can change depending on the screen size. For example, buttons and seats should be bigger on a mobile screen, or the interface may change entirely on certain devices. You may replace the seat map with a sector area map, which can be zoomed by tapping on each area, to show only a portion of the seats on the smallest screens. The team will use your prototype to test the user interface, and connect it to the rest of their app and database. It is sufficient to display the selected seats on screen: the team will work later on integrating it with the rest of their seat management app. This feature will help increasing bookings by optimizing the experience for many devices and situations, ultimately making it easier, more rapid and more pleasant, for users to book their shows.
Project 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
Your Challenge
Your task will be to create a responsive movie and theaters seat booking user interface. To do this, you will create a responsive visual layout, map the seats to a grid that can be later connected to the rest of the parent app, and change UI controls, depending on screen size, in order to provide a better experience and maximize seat bookings.
In this project we won't use any specific data or direction: you will apply your own ideas to design the UI the way you think it can be most valid.
After you develop your prototype, you will share your findings
Personal Portfolio Website
- Step 1: Project Requirements
Purpose: The website will showcase the user’s skills, projects, and contact information to potential employers or clients.
Target Audience(s): Employers, recruiters, or potential clients.
+ Features:
● A homepage with a brief introduction.
● A portfolio page that showcases completed projects.
● A contact form to allow visitors to send messages.
- Step 2: Objectives
The website will:
● Display a portfolio of at least five projects.
● Be mobile-friendly and accessible.
● Include a fully functional contact form that sends messages to the user’s email.
Objective Rationale: These goals ensure the website functions as a professional portfolio to attract potential employers or clients.
- Step 3: Timelines
● Week 1: Design wireframes and gather all content (e.g., images, project details).
● Week 2: Develop the homepage and the navigation structure.
● Week 3: Create the project gallery and implement responsive design for mobile devices.
● Week 4: Add and test the contact form; ensure all links and features work.
● Week 5: Perform final testing and deploy the website online.
- Step 4: Identify Resources
● Technologies: HTML, CSS, JavaScript, Bootstrap for responsive design.
● Tools: GitHub for version control and Netlify for deployment.
● Additional Resources: Stock images for the background and mockups of projects.