Exercice 1
Découverte & première mise en page
Exercice 1 : Premier galop d'essai
Premier travail pratique de l'année. Structuration en HTML, découverte de la sémantique et initiation aux premières règles CSS.
- HTML5
- CSS3
- Responsive
Bienvenue sur mon portfolio académique ! Vous trouverez ici le récapitulatif de mes réalisations, expérimentations et projets développés tout au long de l'année. Chaque exercice reflète ma progression en intégration web, ergonomie et programmation.
$ whoami
Marco Yeranosyan (mye) — Développeur Web
$ cat skills.json
{
"focus": "Front-End & UI/UX",
"stack": ["HTML5", "CSS3", "JavaScript"],
"mindset": "Code propre, accessible & créatif",
"status": "Ready to build!"
}
$ ls -la ./projets
✓ ex1/ (Premier exercice en ligne)
✓ ex2/ (Cyber Runner: Neon Protocol)
✓ Hôtel/ (L'Écrin & Spa ★★★★★)
$ _
Chaque dossier représente une étape franchie. Cliquez sur un projet pour découvrir le rendu complet.
Découverte & première mise en page
Premier travail pratique de l'année. Structuration en HTML, découverte de la sémantique et initiation aux premières règles CSS.
Neon Protocol • Arcade 2D
Jeu d’arcade cyberpunk développé en JavaScript Vanilla et HTML5 Canvas. Survivez, esquivez les systèmes de défense et battez votre meilleur score.
Hôtel & Sérénité ★★★★★
Site web hôtelier d'exception avec navigation unifiée, réservation rapide, visite interactive 360° avec points d'intérêt, livre d'or dynamique et animations GSAP.
Nouvelle étape du quadrimestre : API REST, architecture modulaire et intégrations avancées.
Les technologies et standards appliqués dans ce portfolio.
Structure rigoureuse, balisage accessible (WAI-ARIA), balises SEO et respect des standards du W3C.
Flexbox, CSS Grid, variables personnalisées, transitions fluides et intégration 100% responsive (mobile-first).
Manipulation du DOM, écouteurs d'événements, interactions dynamiques et animations asynchrones propres.
Hébergement sur serveur Apache/Linux via Filemin, organisation claire des dossiers et routage relatif.
Ce portfolio évolue continuellement à mesure que nous avançons dans le programme. N'hésitez pas à suivre son développement !