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 :

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