Certamente não estamos “prontos” no Photoshop para sempre para este design, mas temos o suficiente para trabalhar para começar a criar este design no navegador. Afinal, este é um site que estamos construindo, não uma imagem de um site (como dizem).
Criamos uma pasta que abrigará este projeto e, em seguida, criamos manualmente todos os elementos básicos de um projeto: um arquivo index.html, pastas de recursos e semelhantes. Poderíamos ter usado o Boilerplate HTML5, mas decidimos que seria melhor escrever do zero e depois voltar e fazer referência a isso para ter certeza de que não perderíamos nada no futuro.
Configuramos o CodeKit para monitorar nossa pasta de projetos. Dessa forma, podemos trabalhar em qualquer linguagem de pré-processador que quisermos, entre outras coisas legais que o CodeKit fará por nós. O CodeKit injeta automaticamente CSS recém-compilado para nós diretamente no navegador, o que é um grande auxiliar de velocidade durante o desenvolvimento.
Apresentamos os conceitos básicos do Sass, que usaremos ao longo do projeto.