Ми, звичайно, не „готові” у Photoshop назавжди для цього дизайну, але нам достатньо попрацювати, щоб розпочати створення цього дизайну в браузері. Зрештою, це веб-сайт, який ми створюємо, а не зображення веб-сайту (як то кажуть).
Ми створюємо папку, яка буде домашньою для цього проекту, а потім вручну створюємо всі основні елементи проекту: файл index.html, папки ресурсів тощо. Ми могли використати HTML5 Boilerplate, але вирішили, що найкраще писати з нуля, а потім повернутися назад і посилатися на це, щоб переконатися, що ми нічого не пропустимо в майбутньому.
Ми встановили CodeKit для перегляду нашої папки проекту. Таким чином, ми можемо працювати на будь-яких мовах препроцесора, серед яких ми хочемо, серед інших цікавих речей, які CodeKit зробить для нас. CodeKit автоматично вводить нещодавно скомпільований CSS для нас безпосередньо у браузер, що є надзвичайно швидким помічником під час розробки.
Ми представляємо найосновніші концепції Sass, які ми використовуватимемо протягом усього проекту.