你的網站會是什麼樣子？
首先：規劃
在做任何事情之前，你需要一些想法。你的網站實際上應該做什麼？網站基本上可以做任何事情，但是，對於你的第一次嘗試，你應該保持簡單。我們將從建立一個簡單的網頁開始，其中包含標題、影像和幾個段落。
首先，你需要回答以下問題
- 你的網站主題是什麼？你喜歡狗、紐約還是吃豆人？
- 你將在主題上呈現哪些資訊？寫一個標題和幾個段落，並想想你想在頁面上顯示的影像。
- 你的網站長什麼樣？（用簡單的、高級別的術語描述）。背景顏色是什麼？什麼型別的字型合適：正式的、卡通的、粗體和響亮的、微妙的？
注意：複雜的專案需要詳細的指南，這些指南會深入到顏色、字型、頁面上專案之間的間距、合適的寫作風格等所有細節。這有時被稱為設計指南、設計系統或品牌手冊，你可以在Firefox Photon 設計系統中看到一個示例。
勾勒你的設計
接下來，拿起筆和紙，粗略地勾勒出你希望你的網站的樣子。對於你的第一個簡單的網頁，沒有太多需要勾勒的東西，但是你現在應該養成這個習慣。它真的很有幫助——你不必成為梵高！
注意：即使在真實的、複雜的網站上，設計團隊通常也從紙上的粗略草圖開始，然後使用圖形編輯器或 Web 技術構建數字模型。
Web 團隊通常包括圖形設計師和使用者體驗（UX）設計師。圖形設計師負責網站的視覺效果。UX 設計師在解決使用者如何體驗和與網站互動方面扮演著更抽象的角色。
選擇你的素材
此時，最好開始整理最終將出現在你的網頁上的內容。
文字
你應該仍然保留你之前寫的段落和標題。將它們放在手邊。
主題顏色
要選擇顏色，請訪問顏色拾取器並找到你喜歡的顏色。當你點選一種顏色時，你會看到一個奇怪的六字元程式碼，例如#660066。這稱為十六進位制程式碼（十六進位制的簡稱），表示你的顏色。將程式碼複製到某個安全的地方以備後用。
影像
要選擇影像，請訪問Google 圖片並搜尋合適的影像。
- 找到你想要的影像後，點選該影像以獲得其放大的檢視。
- 右鍵點選影像（在 Mac 上按住 Ctrl + 點選），選擇另存為…，然後選擇一個安全的位置儲存你的影像。或者，從瀏覽器位址列複製影像的 Web 地址以備後用。
請注意，網路上的大多數影像，包括 Google 圖片中的影像，都受版權保護。為了降低你侵犯版權的可能性，你可以使用 Google 的許可證過濾器。點選工具按鈕，然後點選下面出現的使用權選項。你應該選擇知識共享許可證選項。
字型
與影像一樣，許多字型受許可證保護，這意味著你不能在你的網站上隨意使用它們。Google Fonts是 Google 擁有的一個 Web 服務，提供對許多字型的訪問。
找到字型後，主要有兩種使用方式
- 在你的程式碼中新增引用，以從 Google 的伺服器載入字型。
- 將字型檔案下載到你的系統，自行託管字型，並在網站程式碼中使用你託管的副本。
注意：使用 Google Fonts 託管的字型可能會與歐盟的資料隱私法規GDPR不相容，因為字型服務會公開使用者的 IP 地址。如果這對你是潛在問題，那麼可以選擇第二個選項，或者選擇符合 GDPR 的字型提供商，例如Bunny Fonts。
或者，你可以使用安全的 Web 字型，例如 Arial、Times New Roman 或 Courier New。