अब तक वास्तविक वेब साइट हमारे फ़ोटोशॉप डिज़ाइन की तरह बिल्कुल नहीं दिखती है। इस पेंचकस में हम अपने हेडर और लोगो क्षेत्र के साथ शीर्ष पर शुरू करते हुए, बस ऐसा करने के लिए खुदाई करते हैं। यह अच्छा लगता है कि साइट के निर्माण की शुरुआत में "वास्तविक" सा होना चाहिए।
हम फ्रैंक डीलूप को एक रंग बीनने वाले के रूप में उपयोग करते हैं, जो फ़ोटोशॉप के साथ अच्छी तरह से एकीकृत है (यह आपको फ़ोटोशॉप में सक्रिय रंग चुनने के साथ-साथ आपके क्लिपबोर्ड पर कॉपी किया गया रंग बनाता है)।
एक बिंदु पर हम CSS को संकलित करने के लिए Sass / Compass कॉन्फिग को बदलते हैं क्योंकि डिबगिंग कारणों के लिए वास्तविक CSS को उत्पन्न होने के :expanded बजाय :compressedदेखते हैं।
हमें अपने दिमाग का थोड़ा उपयोग करना होगा कि चीजों को कैसे रखा जाएगा और ब्राउज़र विंडो की तरल प्रकृति के बारे में क्या प्रतिक्रिया होगी। उदाहरण के लिए, लॉग को हमेशा ऊपरी बाएं कोने को छूना चाहिए।
हम चीजों को सही तरीके से प्राप्त करने के लिए मूल्यों के इर्द-गिर्द एक बहुत कुछ करने की कोशिश करते हैं, साथ ही साथ यहां बहुत कम विवरण जोड़ते हैं और चीजों को बेहतर बनाते हैं, जैसे कि पेपर स्टैक प्रभाव में थोड़ी छाया जोड़ना।