免費前端學習路線

免費前端學習路線 === > 來源為**Zero To Master Andrei - Learn to code (for free) in 2021**，此篇為原文的連結資源整理，方便想學習web developer的人知道有哪些免費資源可利用，將文章中提及的連結資源做個列表整理，讓我不用每次都回頭從茫茫英文海中撈，歡迎不排斥英文資源的人啃食，原文內容更為詳實，也歡迎前往閱讀。 > source：[Learn to code (for free) in 2021, get hired, and have fun along the way](https://zerotomastery.io/blog/learn-to-code-in-2021-get-hired-and-have-fun-along-the-way/) :::warning 📝 文章 🎞️ 影片，來源多為youtube的播放清單 📌 工具資源 ::: ## `1st Month` 學習方法/HTML/CSS > 不用一定要背起全部的HTML CSS標籤屬性，時間到了就往JavaScript前進，之後JS中也會有很多機會接觸到 > No matter how “unready” you feel or incomplete your knowledge of CSS is, just move on to the next part as you will be using HTML and CSS throughout the rest of the months. - [ ] [📝 學習費曼技巧](https://medium.com/taking-note/learning-from-the-feynman-technique-5373014ad230) - [ ] [📝 (中文) 用行動去學習的方法：費曼技巧](https://medium.com/y-pointer/%E7%9F%A5%E8%AD%98-967cca95a939) - [ ] [📝 準備好在未來失去工作......如果你現在不學習這一項技能](https://medium.com/accelerated-intelligence/be-prepared-to-lose-your-job-in-the-future-if-you-dont-learn-this-one-skill-now-8a87ade2a268) - [ ] [🎞️ How the Internet Works for Developers](https://www.youtube.com/watch?v=e4S8zfLdLgQ&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc&ab_channel=LearnCode.academy) - [ ] [🎞️ Computer Networking Playlist](https://www.youtube.com/playlist?list=PL6gx4Cwl9DGBpuvPW0aHa7mKdn_k9SPKO) - [ ] [🎞️ Crash Course Computer Science 演算法](https://www.youtube.com/playlist?list=PLME-KWdxI8dcaHSzzRsNuOLXtM2Ep_C7a) - [ ] [🎞️ 計算機科學領域地圖](https://www.youtube.com/watch?v=SzJ46YA_RaA&ab_channel=DoS-DomainofScience) - [ ] [🎞️ The Real Web Developer Roadmap](https://www.youtube.com/watch?v=57GuRoJ5Bfw&t=1s&ab_channel=ZeroToMastery-By%3AAndreiNeagoie) 瞭解完整的工程師運作模式，如何整合所有學到的技能，或許一開始看會很焦慮看不懂，但可以在學完完整前端技能後再回頭看，就會make sence了 - [ ] [🎞️ Harvard CS50課程 (bilibili字幕組版本2018)](https://www.bilibili.com/video/av45936507/) 哈佛CS50每年都會將新課程放上官網，連結放上有字幕組翻譯的2018版本，方便自己看 - [ ] [📝 the command Line](https://learnpythonthehardway.org/book/appendixa.html) - [ ] [🎞️ 建立網站、申請domain](https://www.youtube.com/watch?v=tq7dqdHCc7U&feature=youtu.be&list=PLoYCgNOIyGAB_8_iq1cL8MVeun7cB6eNc) - [ ] HTML、CSS - [ ] [🎞️ 比較短的 Web Development Tutorial For Beginners ](https://www.youtube.com/watch?v=gQojMIhELvM&list=PLoYCgNOIyGABDU532eesybur5HPBVfC1G&ab_channel=LearnCode.academy) - [ ] [🎞️ 比較長的 HTML and CSS Tutorials](https://www.youtube.com/playlist?list=PL0eyrZgxdwhwNC5ppZo_dYGVjerQY3xYU) - [ ] Bootstrap - 原文推薦Bootstrap3的YT清單搭配5的官方文件 - [ ] [🎞️ 六角學院 Bootstrap 5 新手教學實戰營](https://www.youtube.com/watch?v=B9EGGQr-r80&list=PLYrA-SsMvTPOX9oF6ld9RGwWlo7PceI_P&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2) - [ ] [🎞️ AMOS 金魚都能懂的Bootstrap5網頁框架開發](https://www.youtube.com/watch?v=YX6KZIcUeY8&list=PLqivELodHt3jq3oWBZfdhMu0GE7774HBW&ab_channel=CSScoke) - [ ] Flexbox - [ ] [📝 Flexbox介紹 by css tricks](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [ ] [🎞️ FlexBox by Wes Bos](https://www.youtube.com/watch?v=Vj7NZ6FiQvo&list=PLu8EoSxDXHP7xj_y6NIAhy0wuCd4uVdid&ab_channel=WesBos) - [ ] [📌 五分鐘挑戰練習](https://cvan.io/flexboxin5) - [ ] [📌 Flex練習：Froggy](https://flexboxfroggy.com/) - [ ] Grid - [ ] [📝 Learn css grid](https://learncssgrid.com/) - [ ] [📌 Grid練習：Grid Garden](http://cssgridgarden.com/) - [ ] 瞭解如何使用template、free theme製作自己的網站 - [ ] [🎞️ FreeCodeCamp HTML/CSS (300hr 如果還有時間)](https://www.freecodecamp.org/learn/) ## `2nd month` JavaScript > 瞭解JS如何讓電腦執行你想做的事 - [ ] [📝 The Modern JavaScript Tutorial 查詢用](https://javascript.info/) - [ ] [📝 DOM tree](https://bitsofco.de/what-exactly-is-the-dom/) - [ ] [🎞️ ZTM DOM](https://academy.zerotomastery.io/courses/697434/lectures/12621105) - [ ] [📝 A Gentler Introduction to Programming](https://www.freecodecamp.org/news/a-gentler-introduction-to-programming-1f57383a1b2c/) - [ ] [📝 You Don't Know JS 查詢用](https://github.com/getify/You-Dont-Know-JS) - [ ] [📝 ES6, ES7, ES8, ES9 and ES10 features](https://github.com/daumann/ECMAScript-new-features-list) - [ ] [📝 JS和ECMA的不同](https://2ality.com/2015/11/tc39-process.html) - [ ] [🎞️ Git Github 教學(40min)](https://www.youtube.com/watch?v=JN63v_czZqI&ab_channel=ZeroToMastery-By%3AAndreiNeagoie) - [ ] [📌 Git指令查詢](https://gitexplorer.com/) - [ ] [📌 Git指令模擬練習](https://learngitbranching.js.org/?locale=zh_TW) - [ ] [📌 JS術語/專業名詞查詢 Terminology/Jargon](http://jargon.js.org/) ## `3rd month` Javascript + NPM 建立自己的網站 > 建立專業角度網站，認識完整流程 - [ ] [📝 Google Developer Tools](https://developer.chrome.com/docs/devtools/) - [ ] [🎞️ 更深入運用](https://www.pluralsight.com/courses/tactics-tools-troubleshooting-front-end-web-development) - [ ] [📝 同步和非同步的差異](https://blog.risingstack.com/asynchronous-javascript/) - [ ] [🎞️ Event loop是什麼鬼東西 (必看)](https://www.youtube.com/watch?v=8aGhZQkoFbQ&ab_channel=JSConf) - [ ] [🎞️ How Does JavaScript Work?](https://www.youtube.com/watch?v=FOZUnFxDDK0&ab_channel=ZeroToMastery-By%3AAndreiNeagoie) - [ ] [📝 Promises, Async Await, ES7](https://www.youtube.com/watch?v=568g8hxJJp4) - [ ] [📝 moudles歷史](https://www.youtube.com/watch?v=568g8hxJJp4) - [ ] [📝 node.js快速入門](https://www.sitepoint.com/npm-guide/) - [ ] [📝 npm lodash](https://www.npmjs.com/package/lodash) - [ ] 用[📝 browserify](http://browserify.org/)來做 CommonJS imports - [ ] [📝 教學](https://scotch.io/tutorials/getting-started-with-browserify) - [ ] [📝 imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) [📝 exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) - [ ] [📝 學著看官方文檔：Parcel 瞭解他如何封裝](https://parceljs.org/getting_started.html) ## `4th month` React JS > React解決什麼痛點？ [React為何優於其他框架](https://zerotomastery.io/blog/tech-trends-showdown-react-vs-angular-vs-vue/) - [ ] 教學：照順序看 - [ ] [🎞️ 1. REACT JS TUTORIAL](https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyGABj2GQSlDRjgvXtqfDxKm5b&ab_channel=LearnCode.academy) - [ ] [🎞️ 2. The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react) - [ ] [🎞️ 3. Learn React JS - Full Course for Beginners - Tutorial 2019](https://www.youtube.com/watch?v=DLX62G4lc44&ab_channel=freeCodeCamp.org) - [ ] [📝 React官方文檔全部看過](https://reactjs.org/tutorial/tutorial.html) - [ ] [🎞️ 深入瞭解Hooks](https://www.youtube.com/watch?v=f687hBjwFcM) - [ ] [📝 如果有時間想更深入React](https://btholt.github.io/complete-intro-to-react-v5/) - [ ] [📝 Optional：學習Redux](https://egghead.io/courses/fundamentals-of-redux-course-from-dan-abramov-bd5cc867) - [ ] [📝 Redux官方文檔：學state管理](https://redux.js.org/introduction/getting-started) - [ ] [📝 Create react app](https://create-react-app.dev/) - [ ] [📝 react部屬到github pages](https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f) - [ ] [📝 或是Heroku](https://blog.heroku.com/deploying-react-with-zero-configuration) - [ ] [📝 或是Netlify](https://www.netlify.com/blog/2016/07/22/deploy-react-apps-in-less-than-30-seconds/) - [ ] 訂閱最新資訊 - [ ] [📌 javascript weekly](http://javascriptweekly.com/) - [ ] [📌 react status](https://react.statuscode.com/) - [ ] [📌 web developer monthly](https://zerotomastery.io/blog/?tag=WDM#monthly) - [ ] 準備寫履歷 - [ ] [📝 如何寫出developer履歷](https://stackoverflow.blog/2020/11/25/how-to-write-an-effective-developer-resume-advice-from-a-hiring-manager/) - [ ] [📝 An opinionated guide to writing developer resumes in 2017](https://www.freecodecamp.org/news/how-to-write-a-good-resume-in-2017-b8ea9dfdd3b9/) - [ ] [📝 I spent 3 months applying to jobs after a coding bootcamp. Here’s what I learned.](https://www.freecodecamp.org/news/5-key-learnings-from-the-post-bootcamp-job-search-9a07468d2331/) ## `5th month` Servers, Databases and Connecting the Dots - [ ] 如何和server溝通 - [ ] [📝 HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) - [ ] [📝 AJAX](https://www.w3schools.com/xml/ajax_intro.asp) - [ ] [📝 JSON](https://www.w3schools.com/js/js_json_intro.asp) - [ ] [🎞️ master Node.js and Express.js](https://www.youtube.com/watch?v=RLtyhwFtXQA&ab_channel=freeCodeCamp.org) - [ ] [🎞️ 怎麼做一個 Restful API](https://www.youtube.com/watch?v=vjf774RKrLc&ab_channel=DevEd) - [ ] [📝 各種API，利用他來做個簡單的app](https://public-apis.xyz/) - [ ] [🎞️ Computerphile Youtube](https://www.youtube.com/channel/UC9-y-6csu5WGm29I7JiwpnA) 影片難度較高，但內容很扎實豐富 - [ ] Optional：computer/server/OS 買一個樹梅派raspberryPi - [ ] [🎞️ 教學](https://www.youtube.com/watch?v=Jj4pjfU_-jo&list=PLsa31gkyINsly6N_usaeHrtDPYnwxO-1Y) - [ ] 做一個有簡單Database的專案用[📌 EazyDB](https://easydb.io/) - [ ] [📝 更進階，用firebase做個包含登入登出的app](https://firebase.google.com/docs/web/setup) - [ ] [📝 基本網路架構概念 Web Architecture 101](https://medium.com/storyblocks-engineering/web-architecture-101-a3224e126947) - [ ] 花一天時間：使用hooks和sockets 建立聊天室app 加進作品集[教學css tricks](https://css-tricks.com/build-a-chat-app-using-react-hooks-in-100-lines-of-code/) - [ ] 深入理解差異：[📝 server-side rendering, client-side rendering, pre-rendering](https://www.toptal.com/front-end/client-side-vs-server-side-pre-rendering) - [ ] [📝 練習面試問題，試著回答這些問題，錯的要要弄懂 30secondsofinterviews](https://30secondsofinterviews.org/) - [ ] 每個題目都花上一天認識瞭解，只要掌握住：這些技術在解決什麼問題 - [ ] Testing (TDD) 測試驅動開發 - [ ] Machine Learning Basics 基礎機器學習 - [ ] Time Complexity (Big O) 時間複雜度 - [ ] [📝 SQL](https://sqlbolt.com/) 資料庫管理 - [ ] [📝 TypeScript](https://www.typescriptlang.org/) 型別問題 - [ ] UX/UI - [ ] Continuous Delivery CICD 持續部屬 - [ ] Basic Data Structures 需要可以說明資料結構，陣列物件是兩個JS中最受歡迎的資料結構 > 這些概念目的是做為一個developer的扎實基礎知識，我們可以容易理解熟悉一個工具、語言、或框架，但沒有這些基礎概念會不知道那有多重要，和網路之間的相關性。 > 但目的是：找工作，可以先有一天的認識，到職場後再持續學習 ## 小結 - 學HTML/CSS - 買網域建立一個自己的網站，用免費的github pages也行，但在hosting平台買網域可以學到他們如何運作執行。可以隨著學到新技術讓個人網站變得更好，不要花太多時間，足夠放上作品在網路上看起來也不賴就OK。 - 專注於1~2個大作品，而不是30幾個一堆人一天之內可以做完的小作品 - 學JS，做個動態網站 - 更新project到GitHub，讓人知道你很勤於使用 - 試著在私人專案上一個禮拜做5個commit - 參與開源專案 - [📝 FreeCodeCamp](https://github.com/freeCodeCamp/how-to-contribute-to-open-source) - [📝 任何level都可以參與的ZTM開源專案](https://github.com/zero-to-mastery) - [📝 參與ZTM開源小指南](https://github.com/zero-to-mastery/start-here-guidelines) - 參與社群、遇到問題卡關 - 99%的問題都可以找到 [📌 StackOverflow](https://stackoverflow.com/) - [📝 ZTM Discord&Slack](https://zerotomastery.io/community/developer-community-discord/) - [📝 46 Slack groups for developers](https://techbeacon.com/app-dev-testing/46-slack-groups-developers) - 目的：思考如何解決遇到的問題，而不是一昧照教學走，看看別人如何解決自己的問題 - CMD常駐桌面，練習用command line做事，而不是老用做好的使用者介面GUI (graphical user interface) - 學習最新語言功能、JS趨勢，利用他們解決問題 - Promises, ES6, ES7, ES8, ES9, ES10, ES2020 - [📝 functional programming techniques](https://github.com/hemanth/functional-programming-jargon) - 持續每年更新的關注 [📝 JavaScript現況調查](https://2020.stateofjs.com/zh-Hant/) - 參與線下社群，與人交流對話 - 會感到自己很渺小，什麼都不懂很正常，持續參與社群讓自己處在programing lingo & jargon(行話術語) 的環境中 - Podcast - 目的：讓耳朵處在programing的環境中，慢慢習慣就會make sense someday - [JavaScript Jabber (AJ ONeal, Aimee Knight, Charles Max Wood, Dan Shappir, Steve Edwards)](https://devchat.tv/show/javascript-jabber) - [SyntaxFM (Wes Bos & Scott Tolinski)](https://syntax.fm/) - 進階：[Software Engineering Daily](https://softwareengineeringdaily.com/) - Youtube 如果有特定主題 - 求職機構平台的模擬面試：做為和專業工程師對話的開始，練習技術測驗，也可以問他們關於專業領域上的問題，for FREE! - 投履歷：找能力資格有符合超過一半的工作，也可能沒有完全吻合也OK - 履歷 - 整理更新Linkedin - 履歷一頁、簡潔，寫上你過去幾個月用到的技術 [📌 履歷template](https://www.resumemaker.online/) - 不要花上太多時間，目的只在於拿到面試 > What makes you different than other developers is the fact that you come from a different field and background - 面試，展現自己的即戰力，不是很多開發者都可以在幾個月內學會所有事，自學會證明自己的野心和明確目的性 - ONLY Linkedin - email - 內推referrals - 不要浪費時間在客製各種求職網站的個人資料 - 科技業面試的建議：[📝 Tech Interview Handbook](https://techinterviewhandbook.org/introduction) - 學完技術後，再看一次web developer的roadmap，可以更瞭解這些技術做了什麼？如何整合在一起？知道如何帶著你前進走更遠 - [🎞️ The Real Web Developer Roadmap: Part 1 💻🚀 | How to become a Web Developer](https://www.youtube.com/watch?v=57GuRoJ5Bfw&ab_channel=ZeroToMastery-By%3AAndreiNeagoie) ### 20/80 理論 5個月中專注於掌握80%的知識，就可以完成大部分的專案，剩下20%則是在團隊合作中會學到，在真實世界的專案中才會遇到 ### Technology is always changing - 不可能瞭解每一個library、framework、syntax - 知道東西如何整合在一起 - 解決了什麼問題 - 知道如何用在工作上 ### 總結 - 專注在提升效率，因為放棄的大多原因是因為看不到結果。專注於真正覺得重要的事情上，學習會更有趣。 - 學習不會有結束的一天，所以目標取得工作，邊學邊拿錢 - 真正的成長在於真實專案和團隊協做中，盡可能**縮減學習時間**，盡快投入職場工作中 - 處在周圍都是比自己聰明的人的環境中工作 ## 📌資源/網站模板 - [ZTM Free Developer Resources](https://zerotomastery.io/resources/) logo製作、圖片、顏色挑選、免費版型、推薦課程文章 - [Bootstrap Templates & Themes](https://startbootstrap.com/themes) Bootstrap為架構的免費模板網站 - [Mashup Template](http://www.mashup-template.com/) 提供5種免費模板，每個質量都很高 - [Frontend Mentor](https://www.frontendmentor.io/challenges) 提供可以做為作品的project，有idea、設計稿、也有其他人的solution可以參考 - **電子報** - [📌 javascript weekly](http://javascriptweekly.com/) - [📌 react status](https://react.statuscode.com/) - [📌 web developer monthly](https://zerotomastery.io/blog/?tag=WDM#monthly) - [Public Apis - 可共用API整理](https://public-apis.xyz/) - [Resume Maker - 履歷template](https://www.resumemaker.online/) 有付費和免費模板可以使用，填法和問券很像，完成後也可以再進行微調。如果不喜歡網站的某些限制，因為版型簡單，也可以參考設計用word簡單做一份 - **Podcast** - [JavaScript Jabber (AJ ONeal, Aimee Knight, Charles Max Wood, Dan Shappir, Steve Edwards)](https://devchat.tv/show/javascript-jabber) - [SyntaxFM (Wes Bos & Scott Tolinski)](https://syntax.fm/) - 進階：[Software Engineering Daily](https://softwareengineeringdaily.com/) * [EazyDB - 簡易資料庫](https://easydb.io/)