Nous n'avons certainement pas «fini» dans Photoshop pour toujours cette conception, mais nous avons suffisamment de travail pour commencer à créer cette conception dans le navigateur. Après tout, c'est un site Web que nous construisons pas une image d'un site Web (comme on dit).
Nous créons un dossier qui accueillera ce projet, puis créons manuellement tous les éléments de base d'un projet: un fichier index.html, des dossiers de ressources, etc. Nous aurions pu utiliser le Boilerplate HTML5, mais avons décidé qu'il serait préférable d'écrire à partir de zéro, puis de revenir en arrière et de le référencer pour nous assurer de ne rien manquer à l'avenir.
Nous avons configuré CodeKit pour surveiller notre dossier de projet. De cette façon, nous pouvons travailler dans tous les langages de préprocesseur que nous voulons, entre autres choses intéressantes que CodeKit fera pour nous. CodeKit injecte automatiquement le CSS nouvellement compilé pour nous directement dans le navigateur, ce qui est une aide à la vitesse énorme pendant le développement.
Nous présentons les concepts très basiques de Sass, que nous utiliserons tout au long du projet.