/dashboard-HTML-CSS

HTML-CSS dashboard no responsive-design project for adep roubaix python formation

Primary LanguageCSSMIT LicenseMIT

Dashboard pour la gestion de données

Le wireframe et la maquette sont dans le dossier img

Il s'agit d'un projet produit dans le cadre de mon poste en tant que formateur en développement web. Ce projet a pour but de permettre aux étudiants de mettre en oeuvre les concepts en HTML et CSS qu'ils viennent de découvrir et ainsi d'apprendre à produire des interfaces graphiques pour le web. A ce stade de la formation les interfaces ne sont pas encore responsives.

Au travers de cet exercice, ils apprennent à :

  • Utiliser une base boilerplate
  • Positionner des éléments grâce à flexbox
  • Réaliser des formulaires HTML
  • Réaliser des tableaux HTML
  • Réaliser des mises en forme complexes
  • Gérer les couleurs
  • Intégrer des librairies à leurs projets
  • Optimiser le CSS avec DRY
  • Mettre en place des classes utilitaires

Consignes

Intégrateur dans une société d'analyse de données, l'équipe a pensé à une nouvelle manière de présenter les données. Après concertation une nouvelle version du tableau de bord pour la gestion des données a été conçue. Le graphiste de l'entreprise a produit une maquette que voici : rendu dashboard

Votre rôle est d'utiliser vos compétences en HTML et CSS pour reproduire le plus fidèlement possible la maquette qui vous a été donnée.

Spécifications techniques :

  • HTML5
  • CSS3
  • Positionnement avec flexbox
  • Mise en place du principe DRY
  • Google fonts pour les polices
  • Font awesome pour les icônes