Une page web pour le journal.
Concevoir, coder et publier la page web du journal du lycée : une « une », des articles, des rubriques. Lisible sur téléphone, accessible à tous.
Ce qu'on attend de toi.
Le journal du lycée a des articles, des photos, des dessins… mais pas encore de vitrine en ligne. Le club fabrique cette vitrine, en équipe avec la rédaction : ce sont eux les « clients ».
Tu vas passer par toutes les étapes d'un vrai projet web : recueil des besoins, maquette, code HTML/CSS, tests sur téléphone, mise en ligne.
Droit à l'image : on ne publie pas la photo ou le nom complet d'un élève sans autorisation (des parents pour un mineur). Vérifie avec le prof référent du journal avant toute mise en ligne.
- Une maquette validée par l'équipe du journal (papier ou Figma)
- Une page d'accueil (« la une ») + un modèle de page article réutilisable
- Une page qui s'adapte au téléphone (responsive)
- Un petit mode d'emploi pour que la rédaction ajoute un article sans vous
- Score accessibilité ≥ 90 dans Lighthouse
- Lisible sur un téléphone sans zoomer
- Chaque image a un texte alternatif
- Autorisations obtenues pour les photos d'élèves et les textes publiés
Par où
commencer.
Rencontrer la rédaction : rubriques, fréquence de parution, qui publie
Dessiner la maquette et la faire valider
Coder la page article d'abord (la plus simple), puis la une
Ta boîte à outils.
- Apprendre le développement web ↗
developer.mozilla.org · La référence MDN, en français : HTML, CSS, bonnes pratiques.
- Flexbox Froggy ↗
flexboxfroggy.com · Jeu pour maîtriser la mise en page Flexbox.
- Grid Garden ↗
cssgridgarden.com · Jeu pour apprendre CSS Grid (parfait pour une « une » de journal).
- Learn CSS ↗
web.dev · Cours CSS moderne de Google, chapitre par chapitre.
- CLEMI — médias scolaires ↗
clemi.fr · Ressources officielles pour les journaux d'élèves : droits, déontologie, publication.
- WAVE ↗
wave.webaim.org · Teste l'accessibilité d'une page en un clic.
- VS Code / VSCodiumÉditeur de code
- DevTools du navigateurInspecter, tester le mode téléphone (F12)
- Figma / papierMaquette avant de coder
- Git + GitHubVersionner et travailler à plusieurs
- LighthouseAudit perf & accessibilité (dans Chrome)
- SquooshAlléger les images avant publication