Chúng tôi chắc chắn không thể "hoàn thành" trong Photoshop mãi mãi cho thiết kế này, nhưng chúng tôi có đủ để bắt đầu tạo thiết kế này trong trình duyệt. Rốt cuộc, đây là một trang web mà chúng tôi đang xây dựng không phải là một bức tranh của một trang web (như họ nói).
Chúng tôi tạo một thư mục sẽ là nơi lưu trữ cho dự án này và sau đó tạo thủ công tất cả các phần tử cơ bản của một dự án: tệp index.html, các thư mục tài nguyên và những thứ tương tự. Chúng tôi có thể đã sử dụng HTML5 Boilerplate, nhưng quyết định rằng tốt nhất là viết từ đầu sau đó quay lại và tham khảo để đảm bảo rằng chúng tôi không bỏ lỡ bất kỳ điều gì trong tương lai.
Chúng tôi thiết lập CodeKit để xem thư mục dự án của chúng tôi. Bằng cách đó, chúng tôi có thể làm việc bằng bất kỳ ngôn ngữ tiền xử lý nào mà chúng tôi muốn, trong số những điều thú vị khác mà CodeKit sẽ làm cho chúng tôi. CodeKit tự động đưa CSS mới được biên dịch cho chúng tôi trực tiếp vào trình duyệt, đây là một công cụ hỗ trợ tốc độ rất lớn trong quá trình phát triển.
Chúng tôi giới thiệu các khái niệm rất cơ bản về Sass, chúng tôi sẽ sử dụng trong suốt dự án.