Projet formation — BTS SIO SLAM

Nolark — Fiche technique

Site vitrine de vente de casques moto réalisé en formation pour apprendre les fondamentaux du développement web front-end : HTML, CSS, mise en page, responsive design.

Voir le site

HTML5 CSS3 JavaScript Responsive Design

Captures d'écran

Page d'accueil

Catalogue casques route

Page de contact

Technologies et concepts abordés

Structure

HTML5

Balisage sémantique : <header>, <nav>, <main>, <footer>, <section>. Formulaire de contact avec validation native.

Mise en page

CSS3

Flexbox pour la navigation et les grilles de produits. Media queries pour le responsive. Variables CSS, pseudo-classes, transitions.

Interactivité

JavaScript

Interactions légères : menu mobile, simulateur de taille de casque, validation de formulaire côté client.

Design

Responsive Design

Adaptation du site à différentes tailles d'écran (mobile, tablette, desktop) via media queries CSS.

Compétences BTS SIO mobilisées

Compétence	Application dans le projet
Développer la présence en ligne	Création d'un site vitrine complet avec navigation multi-pages, images produits, formulaire de contact et responsive design.
Travailler en mode projet	Réalisation structurée dans le cadre du cours : respect des consignes, découpage en pages, livraison finale.
Organiser son développement professionnel	Apprentissage des bases du web : première expérience avec HTML/CSS, fondation pour les projets suivants.

FAQ — Questions probables du jury

Qu'est-ce que le HTML sémantique et pourquoi l'utiliser ?

Le HTML sémantique consiste à utiliser des balises dont le nom décrit le rôle du contenu, pas juste sa mise en forme :

<header> → en-tête de la page
<nav> → menu de navigation
<main> → contenu principal
<footer> → pied de page
<article>, <section> → blocs de contenu

Avantages : meilleure lisibilité du code, accessibilité (lecteurs d'écran), référencement SEO, et maintenance facilitée.

Qu'est-ce que le Flexbox et comment l'avez-vous utilisé ?

Flexbox est un modèle de mise en page CSS qui permet de distribuer l'espace entre les éléments d'un conteneur et de les aligner facilement.

Propriétés principales utilisées :

display: flex → active le mode flex sur le conteneur
justify-content → alignement horizontal (center, space-between…)
align-items → alignement vertical
flex-wrap → retour à la ligne automatique
gap → espace entre les éléments

Utilisé pour la barre de navigation, la grille de produits et le footer.

Qu'est-ce que le responsive design et comment l'avez-vous mis en place ?

Le responsive design permet à un site de s'adapter à toutes les tailles d'écran (mobile, tablette, desktop) sans créer une version séparée.

Technique utilisée : les media queries CSS
@media (max-width: 768px) { ... }

Quand la largeur de l'écran est inférieure à 768px, le CSS à l'intérieur s'applique : le menu devient un hamburger, les colonnes passent en une seule colonne, les tailles de police s'ajustent.

Quelle est la différence entre un site statique et un site dynamique ?

Site statique (comme Nolark) : les fichiers HTML/CSS/JS sont envoyés directement au navigateur tels quels. Le contenu ne change pas selon l'utilisateur. Pas de base de données, pas de langage serveur.

Site dynamique (comme GSB ou WAChangeLog) : le serveur génère le HTML à la volée selon les données en base. Le contenu varie selon l'utilisateur connecté, ses actions, les données stockées.

Nolark est un site statique — idéal pour apprendre les bases avant d'aborder le développement côté serveur.

Quelle est la progression entre Nolark et vos projets suivants ?

Nolark est le point de départ de mon apprentissage du développement web. La progression logique est :

Nolark → HTML/CSS/JS statique, mise en page, responsive
GSB → ajout d'un langage serveur (PHP), base de données (MySQL), sessions utilisateur
WAChangeLogUrgence → architecture professionnelle (API REST, Angular, JWT, ORM) en alternance

Chaque projet a ajouté une couche de complexité en s'appuyant sur les acquis précédents.