03/09

Projet 03 · sur 09

CV en ligne

SAÉ 1.04 · BUT1 · Web · solo Terminé
HTML5CSS3FlexboxCSS GridNavigation par ancresscroll-behaviorMulti-pagesIdentité numérique
Le projet

L'objectif de cette SAÉ « Se présenter sur Internet » est d'apprendre à se présenter et à valoriser son parcours sur le web. Concrètement, il s'agit de construire un curriculum vitæ en ligne : une page principale qui résume le profil, accompagnée d'au moins deux autres pages détaillant la formation, les diplômes et les expériences. Toutes les pages partagent une seule et même feuille de style CSS.

Le site s'articule autour d'une page d'accueil (index.html) et de pages secondaires (Formation, Compétences, Divers). L'en-tête présente une photo de profil ronde, le nom, un court résumé du profil et une barre de navigation. Le corps de la page principale est organisé en sections : diplômes, formation, expériences professionnelles (un stage au service informatique de CMI France en 2023), compétences et informations diverses (langues, sport, centres d'intérêt). Un pied de page rassemble les coordonnées, avec un lien mailto pour l'adresse e-mail.

La mise en forme repose sur une unique feuille style.css : un thème sombre, un en-tête en Flexbox (photo + texte d'un côté, navigation de l'autre), une zone principale en deux colonnes (CSS Grid), des cartes de section à coins arrondis et des effets de survol animés. Le sujet introduit aussi la navigation interne par ancres et le défilement doux via la propriété scroll-behavior: smooth, ainsi que les liens d'une page vers l'ancre d'une autre.

Au-delà du code, cette SAÉ fait travailler la dimension « identité numérique professionnelle » : réfléchir à ce que l'on diffuse de soi sur Internet, à la frontière vie privée / vie publique, et soigner aussi bien le fond (choix des informations) que la forme (présentation lisible et professionnelle).

Objectif

Créer un CV en ligne pour se présenter sur Internet : une page principale accompagnée d'au moins deux pages de détail (formation, diplômes, expériences), l'ensemble mis en page par une unique feuille de style CSS.

Démarche
  • Analyse du sujet et de la structure imposée (page principale + au moins deux pages de détail).
  • Rédaction du contenu du CV : identité, résumé, formation (Bac général spé Maths/NSI, BUT R&T Colmar), diplômes, expérience (stage chez CMI France), compétences et informations diverses.
  • Construction du squelette HTML sémantique de chaque page (header, main, sections, footer), réparti sur plusieurs fichiers.
  • Mise en place de la navigation entre les pages et des liens utiles (mailto, adresse).
  • Écriture d'une seule feuille de style partagée : thème, en-tête Flexbox, zone principale en deux colonnes, cartes de section, transitions et effets de survol.
  • Découverte et application des ancres internes, du retour en haut de page et du défilement doux (scroll-behavior: smooth).
  • Test du rendu final dans le navigateur et organisation du projet (fichiers HTML, CSS commun, dossier d'images).
Difficultés surmontées & apprentissages
  • Respecter la contrainte d'une feuille de style CSS unique mutualisée par toutes les pages, tout en gardant une mise en page cohérente.
  • Gérer correctement les liens entre fichiers HTML locaux et les ancres (les liens pointent vers un autre fichier du projet, pas vers une URL en ligne).
  • Soigner la cohérence visuelle (thème, couleurs, espacements) pour un rendu lisible et professionnel.
  • Prendre en compte la dimension identité numérique : choisir quelles informations diffuser et comment les présenter.
Apprentissages critiques (référentiel)
  • AC13.01 — Utiliser un système informatique et ses outils.
  • AC13.04 — Connaître l'architecture et les technologies d'un site web.
Livrables
  • Site web CV multi-pages (HTML/CSS) : index + pages Formation, Compétences et Divers.
  • Une feuille de style unique partagée par toutes les pages.
  • Dossier d'images (photo de profil).
  • Archive du site (téléchargeable ci-dessous).