Version
- 1.0 (01/2023)
Statut
Contexte du projet
Après avoir terminé le premier module orienté front-end de ma formation Développeur web et web mobile, j’ai réalisé cette landing page pour mettre en pratique les notions de HTML, CSS et JavaScript apprises. J’ai choisi de créer un site pour une association fictive de passionnés d’ornithologie, car j’aime beaucoup les oiseaux et je trouvais le sujet intéressant.
Gallerie
Stack Technique
Ce projet, simple par nature et en lien avec les acquis du premier module de ma formation, repose sur des technologies de base enseignées en cours. J’ai utilisé HTML pour structurer le contenu, CSS pour la mise en forme visuelle, et JavaScript pour ajouter de l’interactivité.
Pour faciliter la création d’une mise en page responsive et accélérer le développement, j’ai intégré Bootstrap, le framework CSS que nous utilisions pendant la formation. Bien que je préfère aujourd’hui des alternatives comme Tailwind CSS, Bootstrap s’est révélé particulièrement utile dans ce contexte grâce à sa simplicité d’intégration et à ses composants préconstruits (comme les cartes et les carousels notamment).
Développement
La page se divise en quatres parties :
- Une introduction sur l’ornithologie et une présentation de l’association.
- La présentation des six grands sites d’observation d’oiseaux en France.
- Une section dédiée à l’apprentissage de la reconnaissance des oiseaux.
- Un formulaire de contact pour s’inscrire à un parcours.
Le site est responsive et s’adapte à toutes les tailles d’écran grâce à l’utilisation du système de grille de Bootstrap. Pour le design, j’ai choisi un style vintage rappelant les anciens guides d’ornithologie.
J’ai également utilisé JavaScript pour la vérification des champs du formulaire de contact et pour ajouter des animations à la page. Bien qu’il n’y ait pas de back-end, le formulaire permet déjà une validation côté client.