C'est l'été ! 
Site Web Stade de foot de Brest
Sommaire
Auteur
Yann présente : Le site web de stade de foot de Brest
Projet
Courte description de votre Projet initial
Objectifs
Objectifs du Projet
Le projet de site web sur le Stade Brestois vise à :
Présenter l'histoire et l'actualité du Stade Brestois de manière interactive et visuellement attrayante.
Concevoir une interface ergonomique permettant une navigation fluide et intuitive.
Offrir aux visiteurs des informations actualisées sur les matchs, les résultats, les joueurs et les événements liés au club.
Mettre en place une galerie multimédia avec photos et vidéos pour enrichir l'expérience utilisateur.
Utiliser HTML, CSS structurer et styliser les contenus du site.
Objectifs Pédagogiques
À l’issue de ce projet, les participant·e·s seront capables de :
Structurer un site web en utilisant HTML5 de manière sémantique.
Styliser et personnaliser un site avec CSS3 en respectant les bonnes pratiques du design web.
Gérer des menus déroulants et des sliders d’images afin de dynamiser l’affichage des contenus.
Travailler en autonomie sur un projet de site web et respecter une arborescence organisée des fichiers et ressources.
Technologies Utilisées
HTML5 : Structure de base du site.
CSS3 : Mise en page et stylisation.
Font Library : Intégration de polices spécifiques pour l’identité visuelle.
Fonctionnalités Principales du Site
Page d'accueil : Présentation du Stade Brestois avec un slider mettant en avant les actualités principales.
Menu de navigation : Accès rapide aux différentes sections (historique, matchs, joueurs, événements, galerie).
Historique du club : Informations sur la création et l'évolution du Stade Brestois.
Matchs et résultats : Mise à jour des matchs à venir et des résultats récents.
Effectif et joueurs : Présentation des joueurs actuels, historiques et de l’équipe féminine.
Événements : Agenda des événements futurs et archives des événements passés.
Galerie multimédia : Photos, vidéos et liens vers les réseaux sociaux du club.
Étapes de votre projet
1ère Etapes:
Nous allons tout d'abord créer notre dossier html, pour cela nous allons ouvrir Visual Studio Code et taper nos premières lignes de code:
1 <!DOCTYPE html>
2 <html lang="fr">
La première ligne signifie que le langage de la page sera en HTML
La deuxième est pour la langue, on signifie bien FR pour français pour qu'il prenne en compte les accents
Vous pouvez enregistrer le ficher avec un Ctrl+S une première fois et le renommer "index"
Nous allons ensuite s'occuper de la balise <head>
L'élément <head> contient les métadonnées (informations générales) du document, comme le titre, les liens et les scripts.
La première ligne importante est celle-ci:
1 <meta charset="UTF-8">
La Meta Charset est un attribut qui détermine la façon dont le texte est transmis et stocké.
Elle définit l'encodage des caractères du document en UTF-8, qui est lui un standard qui prend en charge la plupart des caractères utilisés dans le monde.
La ligne:
1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Permet elle d'adapter l'affichage du site aux écrans des appareils mobiles.
On utilise ensuite la balise <title> pour donner un titre a sont site
1 <title>StadeBrestois</title>
1 <meta name="viewport" content="width=device-width, initial-scale=1.0">
Cette ligne permet d'adapter l'affichage du site aux écrans des appareils mobiles.
width=device-width : Ajuste la largeur du site à celle de l'écran de l'appareil.
initial-scale=1.0 : Définit le niveau de zoom initial à 100 %
Compétences
Noter ici les compétences dont vous avez eu besoin
date
Préciser la date de votre projet
Ressources
- Liens vers des ressources en lien avec votre projet
- Votre présentation finale (celle que vous allez présenter au jury)
Aide technique
matériel et outils pédagogique Logiciels : VSCode, Inkscape Ressource internet: GITHUB
matériel et outils utilisés
PC
Photos
Différentes photos de votre projet
