Capacité à chercher, sélectionner et assimiler de nouvelles connaissances
Liberté d'expression dans le respect des contraintes techniques
HTML5, CSS3, Git/GitHub, responsive design, mobile first
100% du code produit doit être compris, surtout si généré par IA
Utilisation d'IDE (WebStorm, VS Code), versioning (Git, GitHub), publication (GitHub Pages), DevOps (GitHub Actions)
projet-personnel/
├── css/
├── fonts/
├── img/
├── index.html (page d'accueil)
└── README.md (mini portfolio)Votre site doit utiliser les balises HTML5 sémantiques pour une structure claire :
Votre CSS doit démontrer la maîtrise des concepts fondamentaux :
Votre site doit fonctionner parfaitement sur tous les appareils :
Se familiariser avec les outils et poser les bases du projet.
Développement actif avec revue de l'enseignant toutes les deux semaines.
Finalisation et optimisations avant livraison.
Découvrez les meilleures plateformes et ressources pour apprendre le développement web :
Configurez votre environnement de développement avec ces outils essentiels :
Vérifiez la qualité de votre site web avec ces outils de validation et de test :
Créez une identité visuelle cohérente avec ces outils de design :
Assurez-vous de la qualité et des performances de votre site :
Le projet est noté sur 20 points. Chaque axe évalue des compétences spécifiques en design web et développement front-end. Utilise cette grille pour valider ton livrable avant la remise.
| Critère | Focus | Points | Attendus |
|---|---|---|---|
| Structure HTML / CSS | Validité, propreté du code, sémantique | 4 | HTML valide, CSS organisé, balises sémantiques cohérentes et styles réutilisables. |
| Responsive design | Approche mobile-first, breakpoints, navigation | 4 | Layout fluide <768px et desktop, navigation accessible, tests sur plusieurs largeurs. |
| Design & accessibilité | Cohérence visuelle, contrastes, UX | 4 | Palette harmonieuse, hiérarchie claire, contrastes conformes, parcours utilisateur fluide. |
| Qualité du code | Organisation, variables, commentaires utiles | 3 | Gestion des variables CSS/JS, fichiers structurés, commentaires pertinents pour expliquer les choix. |
| Performance | Optimisations, audits, assets | 3 | Images optimisées, chargement rapide, audit Lighthouse avec recommandations adressées. |
| Bonus | Créativité et fonctionnalités avancées | +2 | Valorisation du projet par des interactions soignées, intégrations techniques pertinentes ou doc de suivi. |
Focus : Validité, propreté du code, sémantique
Attendus : HTML valide, CSS organisé, balises sémantiques cohérentes et styles réutilisables.
Focus : Approche mobile-first, breakpoints, navigation
Attendus : Layout fluide <768px et desktop, navigation accessible, tests sur plusieurs largeurs.
Focus : Cohérence visuelle, contrastes, UX
Attendus : Palette harmonieuse, hiérarchie claire, contrastes conformes, parcours utilisateur fluide.
Focus : Organisation, variables, commentaires utiles
Attendus : Gestion des variables CSS/JS, fichiers structurés, commentaires pertinents pour expliquer les choix.
Focus : Optimisations, audits, assets
Attendus : Images optimisées, chargement rapide, audit Lighthouse avec recommandations adressées.
Focus : Créativité et fonctionnalités avancées
Attendus : Valorisation du projet par des interactions soignées, intégrations techniques pertinentes ou doc de suivi.
L'utilisation d'outils d'IA (ChatGPT, GitHub Copilot, etc.) est autorisée sous certaines conditions :
0% complété