100 days of code frontend
1.0.0
注意：此資源是舊的！我將在2021年7月底之前歸檔該存儲庫，因為我認為這裡的許多建議在2021年學習前端網絡開發已經過時。
請通過在頁面頂部給我一個星星來支持此存儲庫，然後關注我以獲取更多資源！
想了解有關前端開發的更多信息嗎？考慮：
這是在＃100DaysofCode期間學習前端開發的一種有意義的課程。當它涵蓋了廣泛的前端發展主題時，它可以被認為是“調查”風格課程，而不是深入研究任何一個領域。理想情況下，您完成本課程的收穫將是對每個主題的熟悉程度，並且能夠在必要時在將來在任何領域更深入研究。
該課程受Kamran Ahmed的現代前端開發人員路線圖的影響很大。請檢查一下 - 這很棒。
注意：我知道前端發展對很多人來說意味著很多不同的事情！如果您是前端開發人員，並且您認為可以改善本指南，請通過提出貢獻部分中所述的問題，讓我知道。謝謝你！
多虧了一些令人難以置信的貢獻者，該課程已轉化為以下語言！
該存儲庫的基本原理是定時裝置。如果您過去花費了很多時間嘗試學習網絡開發或類似技能，那麼您可能會在任何一個特定的主題上經歷過一個兔子洞。該存儲庫旨在為每種技術分配一定數期的天數，並鼓勵您一旦升起，就可以轉到下一個。
可以預期，在開始這一挑戰時，每個人都處於不同水平的水平，沒關係。初學者和專業的前端開發人員都可以從這些領域的每個領域中的定時練習中受益。
建議的日常活動如下：
在下面，您可以在課程中找到有關每個主題的一些信息，以及有關每個主題的一些想法/指導。有關與本課程一起進行的項目的靈感，請參見項目創意部分。
作為定時裝置原則的一部分，如果您沒有瀏覽“學習領域和想法”部分中的所有項目，則可以。取而代之的是，您應該專注於獲得最大的收益，可以從分配給每個區域的天數中，然後繼續前進。
超文本標記語言（HTML）是用於創建網頁和Web應用程序的標準標記語言。憑藉級聯樣式的表（CSS）和JavaScript，它構成了全球網絡的基石技術。 Web瀏覽器從Web服務器或本地存儲接收HTML文檔，並將文檔渲染到多媒體網頁中。 HTML在語義上和最初包括文檔出現的線索中描述了網頁的結構。 （來源：Wikipedia）
HTML確實是網絡開發的基礎。即使在基於JavaScript的框架中，您最終還是以一種或另一種形式編寫HTML。
級聯樣式表（CSS）是一種樣式的語言，用於描述以HTML等標記語言編寫的文檔的介紹。 CSS與HTML和JavaScript一起是萬維網的基石技術。 CSS旨在使演示文稿和內容的分離，包括佈局，顏色和字體。這種分離可以改善內容可訪問性，在演示特徵的規範中提供更大的靈活性和控制權，使多個網頁能夠通過在單獨的.CSS文件中指定相關的CSS共享格式，並在結構內容中降低複雜性和重複。 （來源：Wikipedia）
CSS是Web開發的另一個重要組成部分。儘管它主要用於樣式和位置HTML元素，但它已經變得越來越能夠執行更具動態的任務（例如動畫），這些任務曾經通過JavaScript處理。
<style>標籤<link>的外部CSSJavaScript通常縮寫為JS，是一種符合ECMAScript規範的高級解釋的編程語言。這是一種語言，也被描述為動態，弱鍵入，基於原型和多範式的語言。與HTML和CSS一起，JavaScript是萬維網的三個核心技術之一。 JavaScript啟用交互式網頁，因此是Web應用程序的重要組成部分。絕大多數網站都使用它，所有主要的Web瀏覽器都有專用的JavaScript引擎來執行它。 （來源：Wikipedia）
在前端世界中，JavaScript變得越來越重要。雖然它曾經主要用於使頁面動態化，但現在是許多前端框架的基礎。這些框架處理了許多以前由後端處理的任務（例如，路由和顯示不同的視圖）。
<script>標籤和位置jQuery是一個快速，小且功能豐富的JavaScript庫。它使HTML文檔遍歷和操縱，事件處理，動畫和Ajax之類的東西具有易於使用的API，可以在許多瀏覽器中使用。通過多功能性和可擴展性的結合，JQuery改變了數百萬人寫JavaScript的方式。 （來源：jquery.com）
在使用Plain（也稱為“ Vanilla”）JavaScript的時間之後，您可能會發現一些任務有些麻煩，尤其是與訪問和操縱HTML元素有關的任務。一段時間以來，JQuery是使這些任務在不同瀏覽器中更輕鬆，一致的首選庫。如今，由於Vanilla JavaScript，CSS和更新的JavaScript框架的進步，jQuery不一定是“強制性”學習（我們稍後會查看框架）。儘管如此，花一點時間學習一些jQuery並將其應用於一個小項目還是有益的。
響應式Web Design（RWD）是一種用於Web設計的方法，它使網頁在各種設備，窗口或屏幕尺寸上都很好地呈現。最近的工作還將查看器接近作為查看上下文的一部分是RWD的擴展。內容，設計和性能都是所有設備中必要的，以確保可用性和滿意度。使用RWD設計的網站通過使用流體，基於比例的網格，靈活的圖像和CSS3媒體查詢，將佈局適應了觀看環境，這是@Media規則的擴展。 （來源：Wikipedia）
響應式Web設計是關於使Web應用程序在所有類型的設備上都能正常工作。一個快速的示例是，網站在桌面網絡瀏覽器和手機瀏覽器中都應正常外觀和功能。對響應式設計的理解對於任何前端開發人員來說都是至關重要的！
網絡可訪問性是確保沒有障礙可以阻止與殘疾人在萬維網上與網站互動或訪問網站的包容性實踐。當站點正確設計，開發和編輯時，通常所有用戶都可以平等訪問信息和功能。 （來源：Wikipedia）
可訪問性（通常是A11Y）是前端網絡開發中最重要的主題之一，但似乎常常會陷入困境。創建可訪問的Web應用程序不僅在道德上是合理的，而且考慮到您的應用程序可訪問時可以查看這些應用程序的其他受眾，也具有很多業務意義。
GIT是一個免費的開源分佈式版本控制系統，旨在以速度和效率處理從小到非常大的項目。 （來源：git-scm.com）
版本/代碼控制是任何Web開發人員工具包的重要組成部分。有許多不同的版本控制系統，但是Git目前是最普遍的。您可以（並且應該）使用它來跟踪您的項目！
Node.js是一個開源的，跨平台JavaScript運行時環境，在瀏覽器外執行JavaScript代碼。 JavaScript主要用於客戶端腳本，其中用JavaScript編寫的腳本嵌入了網頁的HTML中，並由用戶Web瀏覽器中的JavaScript引擎運行客戶端。 Node.js允許開發人員使用JavaScript來編寫命令行工具和服務器端腳本 - 運行腳本服務器端，以在將頁面發送到用戶的Web瀏覽器之前生成動態的網頁內容。因此，node.js代表一個“無處不在的javaScript”範式，統一了圍繞單個編程語言的Web應用程序開發，而不是服務器端和客戶端端腳本的不同語言。 （來源：Wikipedia）
雖然Node.js通常被稱為後端解決方案，但它經常用於支持前端開發。它以多種方式執行此操作，包括諸如運行構建工具，測試和覆蓋（所有這些都將很快覆蓋！）之類的事情。 Node軟件包管理器（NPM）是節點的另一個重要功能，可用於管理項目的依賴項（即，您的項目可能會依靠的代碼庫 - jQuery就是一個示例！）。
SASS是CSS的擴展，可為基本語言增添力量和優雅。它允許您使用完全兼容CSS兼容語法的變量，嵌套規則，混音，內聯導入等。 SASS有助於保持大型樣式表格良好，并快速啟動和快速運行小型樣式表，尤其是在Compass Style庫的幫助下。 （來源：sass-lang.com）
SASS允許您以更具程序化的方式編寫CSS。如果您完成了一些CSS，則可能已經註意到您最終重複了很多信息 - 例如，指定相同的顏色代碼。在SASS中，您可以使用變量，循環和嵌套之類的東西來減少冗餘並提高可讀性。用SASS編寫代碼後，您可以快速，輕鬆地將其編譯為常規CSS。
*一些替代方案：基礎，布爾瑪，實現
Bootstrap是一個免費的開源前端框架，用於開發網站和Web應用程序。它包含基於HTML和CSS的設計模板，用於排版，表單，按鈕，導航和其他接口組件以及可選的JavaScript擴展。 （來源：Wikipedia）
有許多可以闡述，樣式和使您的Web應用程序動態的選項，但是您會發現，從框架開始，可以極大地幫助您獲得局限性。 Bootstrap就是這樣一個框架，但絕對遠非唯一的選擇！我建議您熟悉這樣的框架，但是要掌握HTML，CSS和JavaScript基本面要比在任何一個框架中陷入困境要重要得多。
塊，元素，修飾符方法（通常稱為BEM）是HTML和CSS類的流行命名約定。由Yandex團隊開發的目標是幫助開發人員更好地了解給定項目中HTML和CSS之間的關係。 （來源：css-tricks.com）
重要的是要知道像BEM這樣的命名和組織系統以及為什麼使用它們。在這裡進行一些研究，但是在初學者級別，我不建議將太多時間花在主題上。
Gulp是在開發工作流程中自動化痛苦或耗時任務的工具包，因此您可以停止搞砸並建造一些東西。 （來源：gulpjs.com）
在現代前端開發中，您通常會發現自己需要自動化捆綁，移動文件和注入HTML文件等任務。 Gulp是一種可以幫助您完成這些事情的工具！
build子目錄中WebPack的核心是現代JavaScript應用程序的靜態模塊捆綁包。當WebPack處理您的應用程序時，它會在內部構建一個依賴圖圖，該圖映射您的項目所需的每個模塊並生成一個或多個捆綁包。 （來源：webpack.js.org）
想像一下，您擁有一個大型的網絡開發項目，其中許多不同的開發人員從事許多不同的任務。您可能希望盡可能地將它們模塊化。 WebPack通過讓您的團隊模塊化工作，然後到了構建應用程序的時候，WebPack將其全部粘在一起：HTML，CSS/SASS，Javasscript，Images等。 WebPack並不是唯一的模塊Bundler，但目前似乎是前進者。
Eslint是最初由Nicholas C. Zakas於2013年6月創建的開源JavaScript絨布實用程序。代碼覆蓋是一種靜態分析的一種靜態分析，通常用於查找不符合某些樣式準則的有問題的模式或代碼。大多數編程語言都有代碼襯套，並且編譯器有時將裁剪納入編譯過程中。 （來源：eslint.org）
綿羊是代碼質量，可讀性和一致性的絕佳工具。使用襯裡將幫助您在生產之前捕獲語法和格式化錯誤。您可以手動運行襯里或將其包含在構建/部署過程中。
*一些替代方案：Vue，Angular，Ember
React（也稱為React.js或ReactJs）是用於構建用戶界面的JavaScript庫。它由Facebook和個人開發人員和公司的社區維護。 React可以用作單頁或移動應用程序開發的基礎。複雜的反應應用程序通常需要使用其他庫進行狀態管理，路由和與API的交互。 （來源：Wikipedia）
前端JavaScript框架處於現代前端開發的最前沿。這裡的一個重要收穫是，儘管令人難以置信的流行，但反應只是用於構建用戶界面的庫，而Vue和Angular等框架的目標則更加全面。例如，如果您與React中的應用程序構建需要路由到不同視圖的應用程序，則需要引入react-router之類的內容。
create-react-app是腳手架新React項目的便捷工具。Redux是JavaScript應用程序的可預測狀態容器。它可以幫助您編寫始終如一的應用程序，在不同的環境（客戶端，服務器和本機）中運行，並且易於測試。最重要的是，它提供了出色的開發人員體驗，例如實時代碼編輯以及時光旅行調試器。 （來源：redux.js.org）
當您構建越來越大的前端應用程序時，您會開始意識到很難維護應用程序狀態：如果用戶登錄，用戶是誰，以及應用程序中正在發生的事情。 Redux是一個很棒的庫，可幫助您維護單個狀態源，其應用程序可以在該狀態下以其邏輯為基礎。
Jest是一個令人愉悅的JavaScript測試框架，重點是簡單。它可以與項目合作：Babel，Typescript，節點，React，Angular，Vue等！ （來源：jestjs.io）
為您的前端項目設置自動測試非常重要。設置自動化測試將使您能夠自信地進行更改 - 如果您進行更改並且測試仍然通過，那麼您將非常舒適，您不會破壞任何現有的功能。列出的測試框架太多了。開玩笑只是我最喜歡的人之一。
create-react-app ，則已經配置了Jest。*替代：流
Typescript是Microsoft開發和維護的一種開源編程語言。這是JavaScript的嚴格句法超集，並將可選的靜態鍵入添加到該語言中。 TypeScript設計用於開發大型應用程序和向JavaScript的遷移。由於Typescript是JavaScript的超集，因此現有的JavaScript程序也是有效的打字稿程序。 Typescript可用於開發客戶端和服務器端（Node.js）執行的JavaScript應用程序。 （來源：Wikipedia）
JavaScript是動態鍵入的。但是，人們普遍認為，靜態鍵入（即提前指定變量類型，類，界面）更清晰，並且降低了缺陷/錯誤的可能性。無論您對主題的感覺如何，至少要感覺到靜態類型的JavaScript類似於打字稿都是很重要的。請注意，Typescript將其編譯到JavaScript，以便可以通過瀏覽器來解釋（即瀏覽器，不是本地解釋打字稿）。
Next.js是服務器渲染的React應用程序的簡約框架。 （來源：next.js - 對服務器端渲染正確完成）
現在我們變得先進了！到現在為止，您已經構建了一個React（或Vue或Angular）應用程序，該應用程序在瀏覽器中進行了很多工作。由於各種原因（例如SEO，對客戶端績效的疑慮），您實際上可能希望在服務器上而不是客戶端渲染前端應用程序。那就是Next.js之類的框架進來的地方。
該列表應該使您對前端生態系統的廣泛接觸，但是根本不可能在每個主題上碰到每個主題，更不用說每個區域內的眾多工具了！如果您確實認為我錯過了一些非常重要的東西，請參閱貢獻部分，以了解如何幫助使本指南更好。
隨著＃100DaysofCode的發展，您將需要一個或多個項目，您可以應用您的新知識。在本節中，我試圖提供一些您可以使用的項目想法。另外，我們鼓勵您提出自己的項目想法，因為這些想法可能會興趣並激發您更多。
通常，我發現以下資源對於學習軟件開發的寶貴資源是無價的：
如果您希望我對任何內容的意見，請隨時在Twitter上與我建立聯繫，我會盡力提供一些幫助。如果您認為課程存在問題或有建議，請參見下面的貢獻部分。
如果您欣賞這裡所做的工作，則可以通過傳播有關此存儲庫的單詞來做出重大貢獻，包括以下內容：
這是一項正在進行的工作，我非常感謝任何幫助維持這一知識庫的幫助！
在為此存儲庫做出貢獻時，請首先討論您希望通過問題進行更改之前進行的更改。否則，將很難理解您的建議，並可能導致您為無法合併的更改進行大量工作。
請注意，參與該項目的每個人都在試圖學習或嘗試幫助 - 請好好！
