Ciertamente no hemos “terminado” en Photoshop para siempre para este diseño, pero tenemos suficiente trabajo para comenzar a crear este diseño en el navegador. Después de todo, este es un sitio web que estamos construyendo, no una imagen de un sitio web (como dicen).
Creamos una carpeta que será el hogar de este proyecto y luego creamos manualmente todos los elementos básicos de un proyecto: un archivo index.html, carpetas de recursos y similares. Podríamos haber usado HTML5 Boilerplate, pero decidimos que sería mejor escribir desde cero y luego regresar y hacer referencia a eso para asegurarnos de que no nos perdamos nada en el futuro.
Configuramos CodeKit para ver nuestra carpeta de proyectos. De esa manera, podemos trabajar en los lenguajes de preprocesador que queramos, entre otras cosas interesantes que CodeKit hará por nosotros. CodeKit autoinyecta CSS recién compilado para nosotros directamente en el navegador, lo que es un gran ayudante de velocidad durante el desarrollo.
Introducimos los conceptos básicos de Sass, que usaremos a lo largo del proyecto.