Tesla-app

Travail réalisé par Wassim MESFIOUI.

Page web: https://tesla-app88.netlify.app/

À savoir: quatre pages sont disponibles, l'accueil, la page de l'application initiale (Simone) et deux sous pages (Contrôles et Stats recharge)

Projet Tesla

Le but de ce projet est de réaliser une version responsive de l'application mobile Tesla.

• Attention à ne pas utiliser de balise "div", "span"
• Varier l'utilisation des balises
• Respecter les normes W3C
• Organiser son code (header, section, nav, menu...)
• Réaliser au moins deux pages issu de l'application Tesla

Synthèse

Prémices

Avant de commencer ce projet Tesla, j'étais encore un débutant en HTML et CSS.

Je me suis fixé pour but dans de ce projet d'utiliser aucune balise « div » et/ou « span » pour me permettre d'évoluer et surtout me permettre d'apprendre à coder avec les bonnes méthodes tout en respectant la norme W3C (World Wide Web).

De plus j'ai cherché à varier les balises grâce à différentes recherches sur MDN m'ayant permis de découvrir de nouvelles balises.

Les débuts

Lors des premières semaines j'ai d'abord posé l'idée de base pour mon application via des croquis sur feuille, puis via l'utilisation de logiciel comme balsamique studio pour en arriver à la réalisation de maquettes sur Figma me donnant une idée du résultat final.

• Figma: Maquette Figma + croquis : https://bit.ly/3Uf0lyU

L'application à d'abord été réalisée au format mobile puis tablette pour enfin finir sur une version ordinateur (travail avec les méthodes du mobile first).

J'ai eu de nombreuse fois l'occasion d'utiliser la documentation MDN trés utile de par ces exemples et ces explications.

Pour la réalisation de cette application j'ai également utilisé de nombreux logiciels de montage pour pouvoir découper les différentes images issu de l'application mobile tesla.

• supprimer les fonds: https://www.remove.bg/fr
• compresser les images: https://www.iloveimg.com/fr/compresser-image
• redimensionner les images: https://www.iloveimg.com/resize-image

Problème rencontré

• Sur la page principale de l'application tesla j'ai voulu faire apparaitre un composant qui lors d'un clique sur le bouton de charge, apparait. Pour cela j'ai d'abord procédé avec l'utilisation des balises « details » et « summary », or via cette méthode j'ai rencontré des problèmes d'affichage (décalage, problèmes responsif).

• Difficulté avec l'utilisation des grids, nombreux probléme de placement et d'éspacage au départ, désormais résolu (pour mon index j'ai essayé d'utiliser majoritairement des grids).

• Difficulté à certains moment avec la superposition d'images

Bilan

J'ai appris lors de ce projet à utiliser Figma, utiliser les commandes git, envoyer du code sur gitlab et créer un README.

Par curiosité, j'ai également travaillé avec java script et j'ai touché à du tailwind css (utilisation des classes pour pouvoir apporter du style), bien que les nombreux avantages apporté par Tailwind, je me suis tenu à faire une application 100% CSS.

De plus, en CSS j'ai appris à utiliser les flex-box avec flexboxdefense.com et flexboxfroggy.com et j'ai pu pratiquer tout cela au travers de cette application. J'ai également appris à utiliser les grids pour adapter mon application mobile au format pc par exemple, en plus de la découverte d'unité nouvelle comme "em", "rem", "vw", "vh".

Enfin, j'ai beaucoup progressé grâce à ce projet comme par exemple avec la structuration de mon code en HTML, avec un respect des normes W3C. Les avantages remarqués, un code plus lisible, une fluidité dans le travail et un plus grand recule sur mon code. J'ai pu découvrir de nouvelle balise autre que le "div" que l'on peut retrouver au travers de mon projet

J’ai cherché au travers de mon travail de réaliser une application au norme, responsive, que je pourrai mettre en avant dans mon portfolio.

piste d’ouverture: utiliser une librairie de graphique pour rendre mon graphique interactif à l’avenir.