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

Économisez sur les compétences qui vous font briller avec 40 % de réduction sur 3 mois de Coursera Plus. Économisez maintenant

Ce projet n'est pas disponible en Français (France)

Nous sommes actuellement en train de le traduire dans plus de langues.

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

7 532 déjà inscrits

Projet

Montrez vos compétences aux employeurs et utilisez les outils du secteur pour résoudre des problèmes concrets

niveau Intermédiaire

Expérience recommandée

5 hours

Avancez à votre propre rythme pour terminer

Projet

Montrez vos compétences aux employeurs et utilisez les outils du secteur pour résoudre des problèmes concrets

niveau Intermédiaire

Expérience recommandée

5 hours

Avancez à votre propre rythme pour terminer

Objectifs

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

Compétences que vous pourrez montrer

Catégorie : Front-End Web Development
Catégorie : Cross Platform Development
Catégorie : Web Design and Development
Catégorie : Responsive Web Design
Catégorie : Javascript
Catégorie : HTML and CSS
Catégorie : User Interface (UI) Design
Catégorie : User Interface (UI)
Catégorie : Browser Compatibility
Catégorie : Interactive Design
Catégorie : Web Design

Outils que vous utiliserez

Catégorie : UI Components
Catégorie : Cascading Style Sheets (CSS)
Catégorie : Frontend Integration
Catégorie : Hypertext Markup Language (HTML)

Détails à connaître

Exemple de travail à partager

Ajouter à votre profil Coursera

Enseigné en Anglais

Aucun téléchargement ou installation requis(e)

Utiliser un labo Coursera, un espace de travail cloud préconfiguré dans le navigateur (disponible uniquement sur ordinateur de bureau)

91%

of learners achieved a positive career outcome

Découvrez comment les employés des entreprises prestigieuses maîtrisent des compétences recherchées

En savoir plus sur Coursera pour les affaires

logos de Petrobras, TATA, Danone, Capgemini, P&G et L'Oreal

À propos de ce projet

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

Plan de projet

Dans le cadre de ce projet, vous devez terminer les étapes suivantes de manière indépendante :

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

Offert par

Coursera

Montrez vos compétences grâce aux projets

Les projets vous permettent de résoudre des problèmes concrets à l’aide d’outils adaptés et de produire des exemples de travaux que vous pouvez ajouter à votre profil de compétences Coursera afin de vous démarquer auprès des employeurs.

Gérer mon profil

Pour quelles raisons les étudiants sur Coursera nous choisissent-ils pour leur carrière ?

Felipe M.

Étudiant(e) depuis 2018

’Pouvoir suivre des cours à mon rythme à été une expérience extraordinaire. Je peux apprendre chaque fois que mon emploi du temps me le permet et en fonction de mon humeur.’