研究與學習

高效研究

作為一名 Web 開發者，你會花大量時間搜尋工作中遇到的問題解決方案——你不必記住所有東西！專業的 Web 開發者會經常使用 MDN Web Docs 等工具來查詢他們忘記的東西。你會發現，學習 Web 開發更多的是解決問題和學習模式，而不是學習大量語法。

為了促進這一點並變得更加自給自足，你應該學習有效的策略來尋找答案——如下文各節所述——以及何時使用哪種策略。例如，首先線上查詢資訊，只有當你真正陷入困境時，才向你的導師、同學或高階開發人員尋求幫助。

選擇高質量的資源

你應該確保你選擇的研究資源是高質量和信譽良好的。要找出哪些資源信譽良好，可以向你的老師或更有經驗的同事諮詢他們推薦的資源，並進行一些網路搜尋，瞭解其他人在網上推薦的資源。MDN 當然是推薦的；其他好的例子包括：

• Stack Overflow
• Scrimba ^{課程合作伙伴}
• YouTube
• freeCodeCamp
• Codecademy
• Dev.to

瞭解何時使用何種資源

文件有不同的型別，瞭解每種型別何時有用是很重要的。不同網站的術語會有所不同，並且通常存在一定程度的重疊，但通常常見的型別有：

• 參考資料：類似於人類語言有詞典列出每個單詞的含義，程式語言也有參考資料，試圖詳盡地涵蓋開發者將使用的每個可能特性的目的和語法，通常還附帶用法示例。參考資料側重於特性“做什麼”而不是“如何”使用它。
• 教程：允許開發者學習“如何”使用新技術。教程通常是分步的，面向初學者。
• 指南/操作方法：也與學習相關，但往往不太側重於初學者，通常旨在解決特定問題。
• 直譯器/概念：傾向於關注解釋特定技術背後的高階概念和用例，而不是深入到低階程式碼細節。
• 問答/論壇：人們提問，其他人提供答案的網站。

你應該查閱多個不同的網站，看看每個網站流行的文件風格，並思考在不同情況下哪些文件風格有用。例如：

• MDN 非常適合查詢有關不同 HTML、CSS 和 JavaScript 功能的參考文件，並且還包含有用的指南和教程，供你學習新技術。
• Stack Overflow 是一個問答式網站，人們在此互相幫助，尋找特定問題的解決方案。
• Scrimba 和 Codecademy 提供分步互動式教程。YouTube 也是一個尋找影片教程的好地方。

最重要的是，找出最適合你的學習方法。不同的人以不同的方式學習。實際上，你可能最終會使用多種資源進行研究和學習。

有效搜尋

如果你無法在你喜歡的網站上找到問題的解決方案，你需要將搜尋範圍擴大到網路的其他部分。我們在課程早期討論了有效網路搜尋的一般技巧（參見搜尋資訊）；本節提供了一些與查詢高質量資訊相關的具體提示和技巧。

• 當你在使用特定工具或產品時遇到問題，請首先查閱官方文件。令人驚訝的是，很多人沒有想到這樣做；官方文件通常是針對初學者的，所以有經驗的人可能不認為它們是合適的。如果你正在使用的產品是 Web 平臺，那麼 MDN 就是“非官方”的官方文件，所以你來對地方了！
• 檢查你找到的資源的日期。它們是最近維護的，還是長時間未更新，因此可能已過時？信譽良好的網站通常會包含釋出日期和“上次更新”日期，正是為了讓你輕鬆檢查這一點。理想情況下，一篇來自信譽良好網站的關於現代技術或技巧的文章不應長時間（比如 2-3 年）不維護。當然，涵蓋成熟技術（例如，基本的 HTML 或 CSS 功能）的舊文件仍然可能是準確的，但你應該牢記這一點。
• 接著上一點，即使是新發布的資源也可能包含過時的資訊。例如，一篇關於 CSS 頁面佈局的文章是討論 Grid 和 Flexbox 等現代方法，還是仍然呈現使用浮動建立多列布局等過時技術？
• 不要只依賴單一的資訊來源。交叉參考不同的來源，特別是如果你不確定某個來源是否值得信賴。
• 你還可以嘗試使用人工智慧工具來幫助解決編碼問題——例如ChatGPT 或GitHub Copilot。你應該謹慎使用人工智慧工具（尤其是作為初學者），並熟悉它們的優缺點。
  • 從積極方面看，它們可以極大地加快研究/搜尋速度，並有助於組織程式碼和文字。
  • 另一方面，人工智慧工具沒有推理能力，經常提供具有誤導性或完全錯誤的答案。你不應該想當然地認為人工智慧的答案是正確的——測試它們，並用其他來源驗證它們。

關於複製貼上程式碼的旁註

無論是否由人工智慧生成，複製、貼上和使用你沒有編寫且不理解的程式碼始終是需要謹慎的，無論你的技能水平如何。這會使錯誤更難修復，並且程式碼可能存在安全、效能或可訪問性問題，這通常是由於你使用它的上下文或方式造成的。

作為初學者，僅僅複製貼上解決方案意味著你錯過了親自動手學習的機會，這對於記憶技能或概念至關重要。如果程式碼受版權保護而你沒有使用許可權，你也可能會遇到許可問題。

這裡的建議是，如果你要使用別人的解決方案，至少在複製貼上之前先嚐試理解它是如何工作的。理想情況下，從解決方案中學習，然後編寫自己的版本。

建立聯絡網路

我們已經討論了足夠的網站，現在我們來談談人。以及網站。

建立一個合作網路是成為一名 Web 開發者必不可少的一部分。我們也會在協作與團隊合作中討論這一點；這裡我們將重點關注如何利用你的網路來協助研究。

一個有效的研究網路由幾組不同知識水平和與你親近程度的人組成：

• 同伴：與你的直接同伴（可能是你的同學或隊友）分享資訊並向他們提問是有益的，因為他們可能擁有有用的見解可以分享，或者願意共同解決問題。他們也可能以前處理過相同的問題，並能提供答案。

• 老師或資深同事：如果你的同伴無法提供幫助，下一步通常是向資深同事、經理或老師尋求幫助。他們會比你的同伴更有經驗，但請記住，他們的空閒時間會更少。如果你能證明你已經首先嚐試自己解決問題，並且尊重他們的時間，你將獲得更好的結果和更多的讚賞。為此：

  • 記錄你已經嘗試過的操作。哪些失敗了？
  • 如果研究主題是特定程式碼示例或你無法使其工作的技術，請使用 CodePen 或 Scrimba ^{課程合作伙伴} 等網站建立線上測試用例，以便向他們展示。
  • 仔細思考要問他們什麼問題——具體問題是什麼？如果你有多個問題要問，請按優先順序排序，以確保涵蓋最重要的專案。
  • 為本次會話設定一個目標，例如，“嘗試找到最高優先順序問題的解決方案”。另請注意，解決最大的問題也可能導致解決其他問題。
  • 詢問他們希望如何與你溝通問題，以使互動儘可能地讓他們感到舒適。
  • 如果安排會議，不要佔用他們超出你需要的時間。如果你不確定需要多長時間，將會議時間限制在例如 30 分鐘。你總是可以在將來向他們尋求更多幫助。

• 更廣闊的社群網路：這可能由專門的線上社群組成，例如論壇或聊天群組（例如MDN Web Docs Discord或freeCodeCamp 論壇），或者物理聚會，例如會議或技能分享活動。

• 全球網路：有時你可能會束手無策，在這種情況下，你可以嘗試在社交媒體網路等通用全球社群上提出你的問題。有時有用的答案可能來自意想不到的地方。

最重要的是，確保你始終對所有與你互動的人保持尊重和友善。你也應該學會回報和索取；相互幫助並提供幫助的 Web 開發者更有可能建立牢固的關係並持續獲得幫助。

制定學習計劃

制定一個計劃來幫助你學習想學的東西是個好主意。

從目標陳述開始

這聽起來可能很傻，但你應該從一個簡單的句子開始，說明你想要實現的目標。你應該有抱負，但也要現實。

以下目標範圍不同，但都是現實且可實現的：

• 我希望在兩年內成為一名專業的 Web 開發者。
• 我想學習足夠的知識，為我的當地業餘網球俱樂部建立一個網站。
• 我想學習 HTML 和 CSS，以便我能擴充套件我的工作職責，接手更新我們公司網站的內容。

以下目標不那麼現實：

• 我想在三個月內從一個完全的初學者成為一名高階 Web 開發者。
• 我想在兩年內創辦自己的公司，並建立一個超越 Facebook 的社交網路。

定義你需要什麼才能實現目標

一旦你確定了目標，研究實現目標所需的條件是個好主意。

例如

• 我需要的材料
  • 一臺電腦
  • 網際網路接入
  • 筆和紙
• 我需要的知識
  • 如何使用 HTML、CSS、JavaScript 以及相關工具和最佳實踐來構建網站和 Web 應用程式（我們絕對能在這方面幫助你！）。
  • 如何獲取域名、主機，並用它們將網站或應用程式上線。
  • 如何經營一家小企業。
  • 如何宣傳我的業務並吸引客戶。

估算你需要多少時間

接下來，你應該開始制定一個時間計劃來實現你的目標。它可以很簡單，比如：

“我大概需要 500 小時來學習我需要了解的知識，我有一年的時間來完成。如果我假設有 2 周的假期，我每週需要花 10 小時在這上面。我晚上和週末有空，所以我將圍繞這些時間安排我的學習。”

不要為計劃的準確性而糾結。一個粗略的估計就足夠了——更重要的是把一些東西寫下來作為努力的目標。

你能花多少時間當然取決於你的具體情況。如果你還在上學，那麼你比有工作和孩子要養的人有更多的空閒時間。實現你的目標仍然是可能的，但你必須對你能多快做到這一點保持現實。

如果你正在大學或學院學習 Web 開發課程，那麼大部分規劃都已為你完成——你真幸運！

在你的主要目標下寫下一些子目標是個好主意，這樣可以讓你更容易地跟蹤進度。例如：

• 在夏季前學習 HTML 和 CSS 基礎知識
• 在 12 月前學習 JavaScript 基礎知識
• 在明年 4 月前完成示例網站專案
• etc.

如果你不確定目標清單上該列出哪些專案，我們的課程大綱可以提供幫助。

當你制定好每週計劃後，你應該在一個簡單的電子表格甚至筆記本上記錄你每週完成的工作！持續思考你取得了多少進展，並根據需要調整你的計劃。

如何保持學習動力

保持學習動力很困難，尤其是當你試圖學習像程式設計或 Web 開發這樣複雜的技能時。以下是一些保持動力和持續學習的技巧：

• 儘量讓你的工作環境儘可能高效。準備一個舒適的桌椅，確保有足夠的光線看清你在做什麼，並儘量加入有助於你集中注意力的東西（例如，輕柔的音樂、香氛，或其他你需要的東西）。不要試圖在一個有干擾的房間裡工作——例如電視開著，你的朋友在看足球！此外，把你的手機放在房間外面——大多數人都會被手機分散注意力，所以你應該把它放在其他地方。
• 飲食、鍛鍊和睡眠。健康飲食，定期鍛鍊，並確保充足睡眠。這聽起來很明顯，但當你真正投入編碼時，很容易忘記。將這些基本要素納入你的日程，並確保你沒有將學習時間安排在這些事情上。
• 獎勵自己。為每次學習會話結束後安排有趣的事情，只有在學習結束並完成時才能進行。例如，如果你真的很喜歡玩遊戲，那麼“今晚除非我完成 3 小時的學習，否則不玩遊戲”這句話會非常有動力。現在你需要的只是意志力。祝你好運！
• 共同學習和演示。這並非對每個人都適用，但如果可能的話，嘗試與他人一起學習。同樣，如果你正在學習 Web 開發的大學課程，這會更容易，但也許你可以說服一個朋友和你一起學習，或者在你當地的聚會中找到一個人？有人可以討論想法和尋求幫助是非常有用和鼓舞人心的，你也應該花時間演示你的作品。那些讚賞的呼聲會激勵你前進。

休息，以及橡皮鴨除錯

如果你在尋找問題答案或集中精力學習時遇到困難，休息一下會很有用。出去散步 15 分鐘，給自己泡杯茶，或者聽聽音樂。或者將這三者結合起來！

長時間不休息地工作對身體也有害；長時間盯著顯示器會損害你的眼睛，長時間靜坐對你的背部或腿部可能有害。你可以透過“20-20-20”規則降低眼睛疲勞的風險；每隔 20 分鐘，看向 20 米外的東西 20 秒。我們還建議每 1 到 1.5 小時進行一次適當的 15 分鐘休息。

在休息期間，嘗試與同事、朋友或家人討論你的問題。即使他們無法為你提供答案，你也很可能會透過自己在腦海中推理論證問題而找到解決方案。當你大聲向自己或一個無生命的物體解釋問題時，它也同樣有效。

這種技術被稱為橡皮鴨除錯（或橡皮鴨法），得名於傳統上你向一隻橡皮鴨解釋你的程式設計問題。

高效問題解決

沒有一種有效的方法可以解決所有與 Web 開發相關的問題（和學習所有知識），但有一些通用建議在大多數情況下都能很好地幫助你。

將問題分解成小塊

當你試圖實現某個特定功能但覺得難以理解時，你應該嘗試將其分解為多個較小的問題或塊。

例如，如果你面臨一個“構建一個簡單的兩列網站”的任務，你可以將其分解如下：

• 建立 HTML 結構。
• 確定基本的網站排版。
• 確定基本配色方案。
• 實現高層佈局——頁首、水平導航選單、帶有主列和側邊欄的主內容區域以及頁尾。
• 實現水平導航選單。
• etc.

然後你可以進一步分解。例如，“實現水平導航選單”可以寫成：

• 標記選單項列表。
• 將選單項水平排列成一行。
• 移除不必要的預設樣式，如列表間距和專案符號。
• 適當設定選單項的懸停/焦點/活動狀態樣式。
• 均勻分佈選單項間距。
• 給選單項足夠的垂直間距。
• 確保文字在每個選單項中居中。
• etc.

這些問題中的每一個似乎都沒有你最初遇到的那個大問題那麼難以解決。

學會識別模式

Web 開發主要關乎問題解決和模式。

一旦你寫下解決特定問題需要做的事情，你就可以開始找出要使用哪些技術功能來解決它。例如，專業的 Web 開發者已經建立了許多水平導航選單，所以他們會立即開始思考這樣的解決方案：

1. 導航選單通常由連結列表建立，例如：

   html

   <ul>
     <li><a href="">First menu item</a></li>
     <li><a href="">Second menu item</a></li>
     <li><a href="">Third menu item</a></li>
     <li><a href="">etc.</a></li>
   </ul>
   

2. 要使所有專案水平排列成一行，最簡單的現代方法是使用 flexbox：

   css

   ul {
     display: flex;
   }
   

3. 要移除不必要的間距和專案符號，我們可以這樣做：

   css

   ul {
     list-style-type: none;
     padding: 0;
   }
   

4. （其他步驟後續。）

你需要進行多少研究才能找到解決方案，將取決於你的經驗程度以及你之前是否實現過類似的東西。你可能會從之前的專案中識別出這種模式，並且只需要查詢你從那時起忘記的少量語法。

當你找到此類問題的解決方案時，值得記錄下你所做的事情，並在某個目錄中保留一些最少的程式碼示例，以便你可以回顧以前的工作。

檢視別人的程式碼

網路上有開發者工具，可以讓你檢視用於構建任何網站的程式碼。如果你沒有可用的解決方案，一個好的研究方法是找到具有類似功能的網站，並檢視它們是如何實現的。

持續學習心態

你應該養成持續學習的心態。網路不斷發展，技術和趨勢總是在變化，你需要不斷更新知識才能跟上。你永遠不可能學會所有東西！

為了讓自己更容易些：

• 保持好奇心。如果你看到一個很酷、有趣或你不理解的網站功能，做一些研究，找出它是如何實現的。它可能會成為你下一個研究專案或學習任務的基礎。
• 你應該定期參與閱讀任務或小型研究專案。留出特定的學習時間來獲取新技能。
• 養成定期閱讀技術新聞、部落格和瀏覽器釋出說明的習慣，看看有什麼新事物值得你去學習。
• 持續練習。你解決問題練習得越多，你大腦中該區域的神經通路就越強，回憶該特定問題的細節和邏輯就越容易，未來學習類似解決方案時你也會感到越舒適。

• 概述：軟技能
• 下一頁