Site vitrine sur le thème Nintendo
Conception d’un site statique de quatre pages sur le thème imposé, Nintendo : maquettes, puis intégration en HTML et CSS, avec un quiz sous forme de formulaire.
Contexte
Atelier de développement web : utiliser les bases de la programmation web statique pour réaliser un site internet complet sur un thème imposé, Nintendo.
Ma mission
Concevoir les maquettes du site, puis l’intégrer en HTML et CSS avec une navigation commune à toutes les pages, des contenus organisés et un élément interactif.
Déroulé de l’atelier
- MaquettageRéalisation des maquettes des pages avant l’intégration, pour fixer la structure et la navigation.
- Page d’accueilPrésentation de l’histoire de Nintendo, de sa fondation à Kyoto en 1889 jusqu’à la Switch, avec des encarts vers les consoles et les licences emblématiques.
- Page ConsolesConsoles de salon et consoles portables classées de la plus récente à la plus ancienne. Chaque jeu cité renvoie directement à sa fiche dans la page Jeux.
- Page JeuxUne fiche par jeu, regroupée par console (NES, Game Boy, 3DS, Wii, Switch…), avec image, année de sortie et résumé.
- Page QuizUn formulaire de questions sur Nintendo utilisant boutons radio, liste déroulante et champ texte.
- Habillage et finitionsFeuille de style commune, menu de navigation, musique d’ambiance, bouton de retour en haut de page et page de licence et mentions légales.
Ce que contient le projet
| Page | Contenu | Éléments HTML mis en œuvre |
|---|---|---|
| Accueil | Histoire de Nintendo, encarts | header, nav, main, footer, audio |
| Consoles | Salon et portables, liens vers les jeux | liens internes avec ancres |
| Jeux | Fiches par console | images, titres, mise en forme du texte |
| Quiz | Questionnaire | form, input, select, label, button |
Bilan
Ce projet m’a permis de structurer un site de plusieurs pages, de séparer clairement le contenu (HTML) de la présentation (CSS) et de créer des liens internes entre les pages.
En bref
TypeSite statique de 4 pages
Période1re année, semestre 1
LangagesHTML, CSS
OutilVisual Studio Code
LivrablesMaquettes, code source et images