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

Pour la fête du travail, profitez de 120 $ de réduction sur Coursera Plus. Débloquez l'accès à plus de 10 000 programmes. Économisez dès aujourd'hui.

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

6 681 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 : Mobile Development
Catégorie : Interactive Design
Catégorie : Javascript
Catégorie : Cascading Style Sheets (CSS)
Catégorie : Responsive Web Design
Catégorie : Cross Platform Development
Catégorie : UI Components
Catégorie : User Interface (UI)
Catégorie : Web Design
Catégorie : HTML and CSS
Catégorie : Front-End Web Development

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)

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 Project Network

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.’

Jennifer J.

Étudiant(e) depuis 2020

’J'ai directement appliqué les concepts et les compétences que j'ai appris de mes cours à un nouveau projet passionnant au travail.’

Larry W.

Étudiant(e) depuis 2021

’Lorsque j'ai besoin de cours sur des sujets que mon université ne propose pas, Coursera est l'un des meilleurs endroits où se rendre.’

Chaitanya A.

’Apprendre, ce n'est pas seulement s'améliorer dans son travail : c'est bien plus que cela. Coursera me permet d'apprendre sans limites.’

Ouvrez de nouvelles portes avec Coursera Plus

Accès illimité à 10,000+ cours de niveau international, projets pratiques et programmes de certification prêts à l'emploi - tous inclus dans votre abonnement.