Liens
Objectifs
L’objectif de ma page était d’expliquer de manière simple les différentes étapes d’une skincare routine. Je voulais que l’utilisateur comprenne rapidement pourquoi chaque étape est importante et ce que chaque produit peut apporter à la peau, en une phrase claire et directe.
En parallèle, l’objectif du cours était d’apprendre les bases de JavaScript et de comprendre comment créer des interactions sur une page web. Cet exercice m’a permis de tester cette logique, d’apprendre à manipuler le DOM et de mettre en pratique les ressources proposées dans le cadre du cours.
Design
Pour le design, j’ai voulu rester cohérente avec les autres pages de mon projet : quelque chose de simple, neutre et assez épuré. J’aime les interfaces légères, donc j’ai choisi une mise en page douce avec des couleurs claires et des formes arrondies. Les effets d’ombre au survol ou au clic me plaisent beaucoup, c’est pourquoi j’ai essayé de les intégrer.
Je ne maîtrise pas encore totalement ces aspects visuels, donc j’ai utilisé ChatGPT pour comprendre comment coder certains effets et mieux organiser mes éléments. Je sais que j’aimerais améliorer mes pages plus tard, mais pour une première version, l’essentiel était d’obtenir quelque chose d’harmonieux et cohérent.
Production
Pour la production, j’ai d’abord dû apprendre. JavaScript me paraissait compliqué, donc je me suis inscrite sur OpenClassrooms : j’ai suivi un cours en entier et commencé un deuxième. Les liens sont dans la partie ressources. Cette étape m’a vraiment aidée à comprendre la logique du langage, même si j’ai encore des progrès à faire.
En parallèle, j’ai utilisé EduTechWiki et les tutoriels vidéo fournis dans le cadre du cours. Une fois que j’ai eu une base plus solide, je me suis lancée dans la construction de la page. J’ai commencé seule, puis j’ai demandé un peu d’aide à une intelligence artificielle et à un ami pour les parties où je bloquais vraiment, surtout le design (car ce que je recherchais est peut-être encore hors de mes compétences).
J’ai fait plusieurs essais, changé de visuel, modifié mes idées et recommencé certaines sections. Petit à petit, la page a fini par ressembler à ce que je voulais.
J’ai également utilisé Photoshop (version gratuite) pour la première fois, afin de colorer ou ajuster certaines images. Au début, le logiciel me semblait très complexe, mais après quelques tests, j’ai réussi à créer ce dont j’avais besoin.
Auto-évaluation
Quand je compare ce travail aux deux premiers exercices, je vois vraiment une évolution. Avant, tout me semblait difficile. Maintenant, je comprends plus vite, je fais mieux les liens, et certaines choses me viennent un peu plus instinctivement. J’ai vraiment l’impression de commencer à prendre la main et je panique moins devant des lignes de code.
J’ai finalement choisi d’intégrer mon JavaScript directement dans mon fichier HTML, car j’ai rencontré de nombreux problèmes de chemin que je n’arrivais pas à résoudre seule. Avec l’aide de l’IA, au vu de mes nombreux "beug", cette solution m’a permis d’éviter les erreurs et d’assurer le bon fonctionnement de ma page. J’aimerais continuer à apprendre avant de me lancer dans un projet, et essayer de moins dépendre d’une IA pour les ajustements visuels. Mais globalement, je suis satisfaite. Je comprends enfin des choses qui me paraissaient impossibles au début.
Bibliographie
- EduTechWiki – Interactivité avec JavaScript
- EduTechWiki – Computation avec JavaScript
- OpenClassrooms – Apprenez à programmer avec JavaScript
- OpenAI – ChatGPT (compréhension du code et support design)
- Adobe – Photoshop (version gratuite)
Ressources
Utilisation de ChatGPT pour comprendre certaines lignes de code, améliorer le design et reformuler certains passages. Consultation d’EduTechWiki, de cours OpenClassrooms et des tutoriels vidéo intégrés à l’exercice pour renforcer ma compréhension de JavaScript, HTML et CSS. Utilisation de Photoshop (version gratuite) pour colorer et ajuster les images liées à la skincare.