我是如何建立網站的
我在學習代碼上遇到過的最大問題之一就是把我的知識翻譯成物理上的東西。這么多年，我看到很多開發者問“我已經學會了 HTML/CSS，接下來呢？”。答案往往是：
“做些東西”
我是做了一些東西。這是個人網站/作品集，我想帶你看看我是如何完成的。盡管我的目標是向其他人演示他們怎樣才能建立網站，這也是記錄我的過程和進步的絕佳方式。
找個想法
你的網站不需要有什么特別，它也不需要是你的最愛、發 tweet、頂拳（fist bump）或每天 1000 個訪問。它只需要成為你愿意享受其中的東西。
我確信沒人坐下來就能馬上魔法般地產生令人驚奇的想法。我的大部分想法出現時，我通常在睡覺或洗澡。我可以用一天時間來考慮讓人激動的東西，只是一兩周內不會有另一個想法。
不要試著強迫自己得到想法，這行不通，還會導致大量的沮喪情緒。從簡單開始，為自己而做。我經常看到世界上的某些東東，對我自己說“嗯，我想， 我能夠建立屬于我自己的、更加適合我的版本”，或“我需要一個工具來完成這項單調的任務，因此我盡量自己開發它”。沒錯，這就是起步的偉大地方。
我有一份長長的想法列表，它們都不是有獎勵的、但都讓我感興趣。如果你有了想法，記下來，當你有時間去開發的時候，你就能看到你自己產生的所有好玩的想法了。
規劃想法
你只需一支筆和一張紙。在開始我的作品集之前，我草擬出基本要點，并就我樂于使用的顏色和字體做了注解。
最終完成的作品與我的草圖看起來非常不同，不過這是一個偉大的起點。我也規劃了網站的很多版本，因此不要擔心最終產品與你開始畫的草圖有什么不同。
PhotoShop 做原型
畫好想法的草圖后，我打開 PhotoShop 布局網站。有的人在寫代碼之前用 PhotoShop 進行設計，有的人喜歡直接寫代碼然后在瀏覽器里設計。選擇你喜歡的方式。
配置項目
我喜歡把所有想法放在桌面的同一個文件夾里。我在項目文件夾里新建一個文件夾，在里面做如下配置：
index.html 位于目錄頂層（根目錄）。其它重要的文件放在“assets”文件夾。為了保持直觀的結構，CSS、JavaScript 和圖片單獨放在的另外文件夾。
設計 HTML
沒有 HMTL 就沒有網站。它包含了出現在網站上的所有信息，而 CSS 只是讓它們看著舒服些。
我開始設計網站每一部分的容器：header，主內容和 about 頁。在定下來之前，我不是十分精確地知道將呈現什么內容，因此做了一些修改。沒事，確保添加一些模擬內容，當應用 CSS 時，你就能看到它的樣子了。
選擇字體和顏色
我在草案里寫有我想在項目中使用的顏色。大部分來自于我的 推ter 主頁，然后是要匹配 avatar（網站 header 里的主要圖片）的顏色。
有一些優秀的工具，用來找到和創建顏色，比如 Colour 和 Coolors。我打算站點簡潔、干凈，只用一兩種強調色。
我還從 Google Fonts 找了兩種字體。它們可以免費使用，且易于包含在項目里。我想給 body 里的文本和副標題應用清晰的 sans-serif 字體 Open Sans，像大塊引用和“About”頭部等較大文本，我用 Roboto Slab 字體。
我喜歡纖細的字體，但是 font-weight（鮮明度）太低的字體將不利于文本閱讀，這是非常重要的。也不要使用太多字體，這會讓人抓狂，也會增加網站載入的時間。你想讓讀者 吸收的是你要表達的東西，而不是在單獨一個段落里使用的 15 種字體，如果他們不想粗暴地關掉網頁，就要決定是否等待這些字體載入。
用 CSS 做樣式
我首先把 normalize.css 添加到 CSS 文件夾，在 HTML 里做了鏈接。
在一種瀏覽器（比如 Chrome）里開發網站絕不意味著在另一種瀏覽器（比如 IE）里有著同樣的表現。normalize.css 就是為了盡可能多地通過提供一種“reset”來修復這種差異。它讓網站在各種瀏覽器里良好地呈現，我相信，開發一個跨瀏覽器兼容的網站是至關重要的。
我首先從最重要的樣式開始，像 body 和 header 的字體和字體大小。然后深入頁面，不用在頁面之間來回多次就能夠定義好每個元素的樣式。
可訪問性
在你開發東西的時候，你應該時常為你的用戶考慮。世界上的任何 app、產品、印刷品、信件、海報、網站、工作臺、商店以及其它東西，都被盡可能多的人使用。想理解網站為什么需要可訪問性，請訪問 Laura Kalbag 的“Why Bother with Accessibility?”。
讓我的網站具有可訪問性是相當簡單的。我在必要的地方添加了 ARIA landmark role【注1】，給屏幕閱讀器（通常殘障人士使用）指示內容類型。我確保所有的鏈接都可以用鍵盤訪問，并用 CSS 作了突出。
接下來是網頁底部的社會化圖標了，我在文本里指示了每種圖標鏈接到了什么網站。我在瀏覽器里作了隱藏，但是確保可以屏幕閱讀器用戶是可見的。
一些人夸獎我在做網站的時候考慮了可訪問性。雖然這讓我感到自豪，但是，如果我因為給了它本應該得到的關注而被夸獎的話，只能說明可訪問性還沒有得到足夠考慮。如果你需要制作可訪問性網站的一些優秀資源，請訪問 A11Y Project。
測試
正如剛才提到的，一個網站在每個瀏覽器和設備上表現一樣是非常少見的。測試是比較耗時的，甚至取決于你手頭的資源，但是它相當重要。當網站準備讓全世界看到時，馬上測試，確保你找不到網站故障。
跨設備和瀏覽器測試為什么是重要的，如果你想了解，下面列出了過去 24 小時訪問我網站的用戶的數據。來自于 Safari（26%）、Android（3%）、IE（2%）、Chrome（39%）、Opera（2%）。讓不同的用戶在你的網站有一個好的體驗， 是比較重要的，因此在條件允許時，要在盡可能多的不同環境下測試。
我使用下面瀏覽器的最新版本測試網站：Chrome、Firefox、Opera、Safari 和 IE。前四個瀏覽器很容易就能下載到。如果你不在 Windows 上，用 IE 測試就有點兒難了。借助 Virtual Box 在 Mac 上安裝一個 Windows 版本，就能用 IE 測試了。微軟自己做了一個網站，向你展示了如何零成本地測試：Modern IE。
有一些工具，能夠對你的網站在各種瀏覽器和設備上的展示進行截屏并發送給你。我問一些朋友，他們用什么工具測試，你可以在這里找到答案。Modern IE 也能在使用廣泛的瀏覽器/設備上截屏，免費的。
如果你對那些可以訪問網絡的一堆設備沒有限制，這是聰明的，但是很可能你不是這樣的。我有 iPad、Samsung Galaxy S3 和老款的 iPod Touch，難以覆蓋所有種類的設備。
如果你是 Mac，就能用 Xcode 下載 iOS 模擬器，基于一些 iPhone 和 iPad 版本進行測試。有個初級方法，調整瀏覽器大小到移動設備寬度，但是，這不是真正靠譜的可選方法。
我還測試了網站在可閱讀性、良好地對比【注2】、校驗和可訪問性。
關于測試的最后一點是：你應該隨著開發進度去測試網站。這樣做的話，在項目結束、或讓人沮喪、或潛在地讓你變得更糟之前，你就能修復好 bug。我有過一次經歷，開發人員在項目結束之前不想測試他們的產品。對我而言，那時候長達數小時的痛苦的重復測試，而他們在盡量修復我報告給他們的一堆 堆 bug。簡直一團糟，如果他們自始至終都測試網站的話，將平靜很多。
分享，讓朋友看看
我已經建立了一個網站，從中學到了很多東西。盡管如此，我知道還有一些我能夠做得更好的地方。我給你分享我的代碼，不只是希望你能從中學習，而且還能指出我的錯誤！
你可以在這里找到我個人網站的代碼，在這里查看最終的網站。如果你找到了一些有問題或值得提高的地方，請告訴我。
- 注1：網頁親和力（又稱網絡無障礙、網絡可達性或網絡可用性）旨于確保任何人都有辦法獲取放在網頁上的媒體內容——無論人們是否遭遇了身體、心理或技術上的障礙，都不會妨礙人們接收作者所發布的信息。也就是讓網上的內容“易于親近”，易于獲取、利用。請參考 http://en.wikipedia.org/wiki/WAI-ARIA 和 http://zh.wikipedia.org/wiki/%E7%B6%B2%E9%A0%81%E8%A6%AA%E5%92%8C%E5%8A%9B
- 注2：Spur 是一個由設計咨詢公司 ZURB??推出的簡單有趣的網頁設計 web 小應用。通過快速截取網頁內容，從而幫助企業設計出更好的網站以及網絡相關服務和產品。http://www.techweb.com.cn/newsite/2011-09-19/1095284.shtml
— END —