À propos de ce tutoriel
Bienvenue dans ce tutoriel dédié à l'intégration (création du code HTML/CSS) d'une maquette Photoshop.
Pour ce tutoriel nous allons utiliser une maquette proposée par Metro Themes : MINI OnePage Creative Template. Je tiens au passage à les remercier pour la qualité de leur travail et pour m'avoir autorisé à utiliser leur PSD ^^.
Objectif
L'objectif de ce tutoriel est de partager avec vous ma méthodologie lorsqu'il s'agit d'intégrer une maquette Photoshop. On parlera essentiellement de 2 méthodes d'organisations :
- La méthode SMACSS qui propose une manière générale pour organiser les règles en plusieurs grandes catégories
- Une guideline générale proposée par CSS wizardly qui propose une manière plus stricte de nommage des différentes règles CSS.
Sommaire de la vidéo
- 01:45 Les logiciels / Technologies à utiliser
- 05:30 Début de l'intégration
- 07:45 Comment bien organiser son CSS, la méthode SMACSS ?
- 12:30 Premières lignes CSS
- 19:10 Layout et Header
- 55:22 Les titres
- 01:05:00 Les diagonales
- 01:11:52 La section About
- 01:35:00 La section Citation
- 01:47:39 La section Blog
- 02:13:33 La section Contact