【2024最新】免費前端學習資源(社群/趨勢/部落格/教學/週刊/面試題/靈感/工具)

Web
Web

我在整理瀏覽器書籤的時候發現很多以前收藏的網站、教程打不開了,有些甚至都還沒看過,非常可惜。所以想藉這次進行一個大整理,督促自己照著清單慢慢啃完,順便把自己收藏的一些不錯的內容分享出來。

由於我平時是寫 React 比較多,所以收藏的大部分都是 JS、TS 和 React 的資源,其他語言或框架的就比較少。若有推薦的學習資源也可以在評論區分享給我,一起交流。

本篇內容同步發布於 frontend-collection(Github 更新優先),所有排名不分先後順序。

Forum/Community

  • 台灣大部分都是 FB 社團,我只放了我有加入的。
  • 知乎也有滿多前端相關的文章,只是平台方向比較雜,文章質量參差不齊,所以就沒放了。
  • CSDN 因為廣告太多、內容質量參差不齊,所以也沒放進來。
名稱網址語言
iT邦幫忙https://ithelp.ithome.com.tw/繁體中文
Front-End Developers Taiwanhttps://www.facebook.com/groups/f2e.tw/繁體中文
Vue.js Taiwan 台灣https://www.facebook.com/groups/vuejs.tw/繁體中文
JavaScript.twhttps://www.facebook.com/groups/javascript.tw/繁體中文
ReactJS.twhttps://www.facebook.com/groups/reactjs.tw/繁體中文
React Native Taiwanhttps://www.facebook.com/groups/reactnativetw/繁體中文
Flutter Taiwanhttps://www.facebook.com/groups/flutter.tw/繁體中文
Segmentfaulthttps://segmentfault.com/簡體中文
稀土掘金https://juejin.cn/簡體中文
V2EXhttps://www.v2ex.com/簡體中文
OSCHINAhttps://www.oschina.net/簡體中文
博客園https://www.cnblogs.com/簡體中文
InfoQhttps://www.infoq.cn/topic/1208簡體中文
Mediumhttps://medium.com/英文
Hacker Newshttps://news.ycombinator.com/news英文
EchoJShttps://www.echojs.com/英文
Front-End fronthttps://frontendfront.com/英文
DEV Communityhttps://dev.to/英文
Hashnodehttps://hashnode.com/英文
Quorahttps://www.quora.com/英文
Stack Overflowhttps://stackoverflow.com/英文

Weekly/News

  • 斷更超過一年的不會放進來。
  • 有⭐標示的是我自己平時會看的。
名稱網址備註
⭐JS Weeklyhttps://javascriptweekly.com/英文
ECMAScript Newshttps://ecmascript.news/
Best of JShttps://bestofjs.org/
CSS Weeklyhttps://css-weekly.com/
⭐Web weeklyhttps://webweekly.email/
Web design weeklyhttps://web-design-weekly.com/#
⭐React Statushttps://react.statuscode.com/
⭐React Newsletterhttps://reactnewsletter.com/issues
⭐Hacker News Summaryhttps://hackernews.betacat.io/使用 ChatGPT 將 Hacker News 每條新聞用一兩句話總結出來。
Frontend Focushttps://frontendfoc.us/英文
Frontend Weeklyhttps://frontendweekly.co/
Weekly Vue & Nuxt Newshttps://weekly-vue.news/
Angular Weeklyhttps://angularweekly.substack.com/最後一次發布是2023年5月
NEXT.JS Weeklyhttps://nextjsweekly.com/
iThomehttps://www.ithome.com.tw/繁體中文 科技新聞
TechNewshttps://technews.tw/繁體中文 科技新聞
⭐前端食堂https://hungryturbo.zhubai.love/簡體中文
⭐阮一峰科技愛好者周刊https://www.ruanyifeng.com/blog/weekly/周刊內容滿廣泛的,不只包含前端
⭐MDH Weeklyhttps://mdhweekly.com/weekly阿里 & 蚂蚁 10 年 + 老前端整理的前端周刊
Frontend Weekly Tokyohttps://frontendweekly.tokyo/日文
⭐Github trendinghttps://github.com/trending關注Github每天最流行的庫
Friday Front-Endhttps://fridayfrontend.curated.co/

BLOG

名稱網址備註
阮一峰的网络日志https://www.ruanyifeng.com/blog/
2alityhttps://2ality.com/Axel Rauschmaye的個人BLOG #JS #TS
Josh W Comeauhttps://www.joshwcomeau.com/#JS #CSS #React
Human Who Codeshttps://humanwhocodes.com/blog/
Infrequently Notedhttps://infrequently.org/Alex Russell 個人 BLOG
meyerwebhttps://meyerweb.com/#CSS
湯姆大叔的博客https://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html#JS
張鑫旭https://www.zhangxinxu.com/wordpress/#JS #CSS #HTML
Alistaparthttps://alistapart.com/articles/#JS #CSS #HTML
David Walshhttps://davidwalsh.name/#JS #React
Antfuhttps://antfu.me/postsVue & Vite 的核心成員
Wenzihttps://www.xiabingbao.com/#JS #React
Huli’s bloghttps://blog.huli.tw/#JS #React
Matteo Mazzarolohttps://mmazzarolo.com/blog/
Chak Shun Yuhttps://www.chakshunyu.com/blog/#React #JS
emma gotohttps://www.emgoto.com/blog/#React
RWieruchhttps://www.robinwieruch.de/blog/#React
Max Rozenhttps://maxrozen.com/#React
BezKoderhttps://www.bezkoder.com/#React #Vue #Angular
DAISHI KATO’S BLOGhttps://blog.axlight.com/#React
卡斯伯’s Bloghttps://www.casper.tw/#CSS #JS
PJCHENder那些沒告訴你的小細節https://pjchender.blogspot.com/#HTML #JS #CSS #Vue
TkDodo’s bloghttps://tkdodo.eu/blog/#React #TS
Alex Kondovhttps://alexkondov.com/
ErrorBaker技術共筆部落格https://blog.errorbaker.tw/
竹白記事本https://chupai.github.io/#JS #Vue
emnudgehttps://emnudge.dev/#React
Shubo的程式開發筆記https://www.shubo.io/
Plasmic Bloghttps://www.plasmic.app/blog#React
Ahmad Shadeedhttps://ishadeed.com/#CSS
Addy Osmanihttps://addyosmani.com/blog/Chrome工程師
Bobi.inkhttps://bobi.ink/
Thomas Parkhttps://thomaspark.co/#CSS
Stefan Judis Web Developmenthttps://www.stefanjudis.com/blog/#HTML #JS #CSS #Web #Accessibility #Performance
JSer.devhttps://jser.dev/#React #CSS
TypeOfNaNhttps://typeofnan.dev/#JS #React
Noob’s Spacehttps://noob.tw/#JS
James K Nelsonhttps://jamesknelson.com/archive/#JS
Pony Foohttps://ponyfoo.com/
Krasimirhttps://krasimirtsonev.com/blog/#JS
SmashingMagazinehttps://www.smashingmagazine.com/#CSS #JS #Performance #Accessibility
Dave Ceddiahttps://daveceddia.com/archives/
Kalan’s Bloghttps://blog.kalan.dev/
ChokCocohttps://www.cnblogs.com/coco1s#CSS #JS
CSS-TRICKShttps://css-tricks.com/#CSS
莫力全 Kyle Mohttps://oldmo860617.medium.com/
Anisur Rahmanhttps://medium.com/@anisurrahmanbup#ReactNative #JS
Mike Huanghttps://mike-huang-mikank.medium.com/
H.Chinghttps://hching-lin.medium.com/#UI/UX
The Will Will Webhttps://blog.miniasp.com/#UI/UX
Edurekahttps://www.edureka.co/blog/category/front-end-web-development/
Here.There.https://godbasin.github.io/
Ashlee M Boyerhttps://ashleemboyer.com/#Accessbility #CSS
Daniel Berryhillhttps://medium.com/@dberryhill#Accessibility #UI/UX
UX Movementhttps://uxmovement.medium.com/#UI/UX
Bas Wallethttps://medium.com/@baswallet#UI/UX
Coding Beautyhttps://codingbeauty.medium.com#JS
LEA VEROUhttps://lea.verou.me/#Web
Web development bloghttps://www.matuzo.at/blog#HTML #JS #CSS #web accessibility
Jim Nielssen’s bloghttps://blog.jim-nielsen.com/archive/
Read the Tea Leaveshttps://nolanlawson.com/#web
Nic chanhttps://www.nicchan.me/blog/#CSS
Alan Norbauerhttps://alan.norbauer.com/#JS
Space Ninjahttps://spaceninja.com/#CSS #JS
utilitybendhttps://utilitybend.com/blog#CSS #JS #Accessibility #UX

Tutorial

  • 這部分的基本上都是我看過或者看完的,所以都很推薦,用❗表示基礎必讀。
名稱網址備註
web.devhttps://web.dev/Chrome團隊寫的Web指南
❗现代 JavaScript 教程https://zh.javascript.info/推薦,免費 JavaScript 教學電子書,講解的很詳細、淺顯易懂。
JavaScript Promise迷你书http://liubin.org/promises-book/#introduction
❗ECMAScript6 入門https://es6.ruanyifeng.com/阮老師寫的 ES6 教程。
JavaScript教程https://wangdoc.com/javascript/推薦,阮老師寫的 JS 教程。
❗JavaScript 演算法與資料結構https://github.com/trekhleb/javascript-algorithms/blob/master/README.zh-TW.md
JavaScript: Understanding the Weird Partshttps://www.udemy.com/course/understand-javascript/付費影片課程
❗What the heck is the event loop anyway?https://www.youtube.com/watch?v=8aGhZQkoFbQ
Eloquent JavaScripthttps://eloquentjavascript.net/
JavaScript for impatient programmershttps://exploringjs.com/impatient-js/toc.html
Every Crazy Thing JavaScript Doeshttps://www.codingbeautydev.com/crazy-js-book
❗TypeScript 教程https://wangdoc.com/typescript/推薦,阮老師 2023 剛寫完的 TS 教程。
❗TypeScript 入門教程https://ts.xcatliu.com/講得稍微比較淺的 TS 教程
深入理解TypeScripthttps://jkchao.github.io/typescript-book-chinese/#why是TypeScript Deep Dive的中譯版,內容涉及比較多原理的部分
The Concise TypeScript Bookhttps://github.com/gibbok/typescript-book比較全面的TS教程,有中文版
Type-challengeshttps://github.com/type-challenges/type-challenges/blob/main/README.zh-CN.mdTS的型別題目挑戰
Total TypeScripthttps://www.totaltypescript.com/articles
深入現代前端開發https://f2e.kalan.dev/
小林codinghttps://xiaolincoding.com/圖解計算機網絡、作業系統、資料庫、Redis
❗尚硅谷React教程(2022加更,B站超火react教程https://www.bilibili.com/video/BV1wy4y1D7JT我的 React 學習啟蒙
❗從 Hooks 開始,讓你的網頁 React 起來https://ithelp.ithome.com.tw/users/20103315/ironman/2668我的 React 啟蒙之一
Build your own Reacthttps://pomb.us/build-your-own-react/基於 React 16.8
30 天擁有一套自己手刻的 React UI 元件庫https://ithelp.ithome.com.tw/users/20111490/ironman/3999
React with TypeScripthttps://www.totaltypescript.com/tutorials/react-with-typescriptReact+TS免費課程
❗What happens when…https://github.com/alex/what-happens-when#what-happens-when試圖回答 當你在瀏覽器中輸入 google.com 並按回車鍵時會發生什麼?
❗自适应网页设计(Responsive Web Design)https://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
演算法教學https://web.ntnu.edu.tw/~algo/台灣師範大學的演算法教學
❗Hello算法https://www.hello-algo.com/圖解演算法
❗MDNhttps://developer.mozilla.org/zh-CN/
Inside look at modern web browser (part 1)https://developer.chrome.com/blog/inside-browser-part1/
How browsers workhttps://web.dev/articles/howbrowserswork
Vue 系列教學影片https://www.youtube.com/@AlexOtakuWhat/playlists
重新認識 Vue.jshttps://book.vue.tw/
❗金魚都能懂的網頁設計入門https://www.youtube.com/playlist?list=PLqivELodHt3iL9PgGHg0_EF86FwdiqCre
❗金魚都能懂的網頁切版教學https://www.youtube.com/playlist?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo
❗金魚都能懂的 CSS 選取器 – 金魚都能懂了你還怕學不會嗎https://ithelp.ithome.com.tw/users/20112550/ironman/2799
❗Learn to Code HTML & CSShttps://learn.shayhowe.com/html-css/
❗Learn CSShttps://web.dev/learn/cssChrome 團隊所寫的 CSS 課程
❗Learn Responsive Designhttps://web.dev/learn/designChrome 團隊所寫的 Responsive 課程
❗30天精通Git版本控管https://ithelp.ithome.com.tw/users/20004901/ironman/525
Beyond XSS:探索網頁前端資安宇宙https://ithelp.ithome.com.tw/users/20091346/ironman/6155
Docker — 从入门到实践https://vuepress.mirror.docker-practice.com/
大厂机密!30 个提升团队研发效能的锦囊https://reurl.cc/kaW8qn
慕課課程https://www.imooc.com/wiki/
带你入门前端工程https://woai3c.gitee.io/introduction-to-front-end-engineering/
What is the DOM? A Behind-the-Scenes Guidehttps://www.freecodecamp.org/news/what-is-dom-in-javascript/
❗CS自学指南https://csdiy.wiki/
❗Brad Woods’ Digital Gardenhttps://garden.bradwoods.io/有點像是前端開發的維基百科,不過規模沒有那麼大。文章內容都很淺顯易懂,還有動畫、插圖幫助理解。
Egghead.iohttps://egghead.io/q?access_state=free很多免費前端框架影片教學
Learn JavaScripthttps://learnjavascript.online/從頭開始學習現代 JavaScript (ES2015+) 。直接在瀏覽器中閱讀簡短課程、做筆記並完成挑戰。
HTML Doghttps://htmldog.com/guides/有九個教程涵蓋 HTML、CSS 和 JavaScript,每種語言各三個。初學者教程是逐步指南,而中級和高級教程包含獨立的提示、技巧和最佳實踐技術。
Responsive Resourceshttps://bradfrost.github.io/this-is-responsive/resources.html有關響應式網頁設計各個方面的資源集合。
❗dofactoryhttps://www.dofactory.com/tutorials網站內有 HTML, CSS, JS 教學,內容很精簡。

Patterns & Cheat sheet

名稱網址備註
JavaScript Patternshttps://javascriptpatterns.vercel.app/patterns
JavaScript patterns 中譯本https://github.com/jayli/javascript-patterns
JavaScript语言精粹https://reurl.cc/kaWyOG
clean-code-javascripthttps://github.com/ryanmcdermott/clean-code-javascript#clean-code-javascript
clean-code-typescripthttps://github.com/labs42io/clean-code-typescript
TypeScript Style Guidehttps://mkosir.github.io/typescript-style-guide/
TS-PATTERNhttps://github.com/gvergnaud/ts-pattern
patternshttps://www.patterns.dev/JS, React, Vuejs patterns
Flexbox Patternshttps://github.com/cjcenizal/flexbox-patterns#flexbox-patterns教你如何使用 CSS flexbox 建立出色的 UI。包括範例和原始程式碼。
Refactoring.Guruhttps://refactoring.guru/有關重構、設計模式、SOLID原則…等內容
UI Patterns & Inspirationhttps://www.uxlibrary.org/explore/ui-design/ui-patterns-and-inspiration
UI Patternhttps://ui-patterns.com/
Checklist Designhttps://www.checklist.design/
HTML CheatSheethttps://htmlcheatsheet.com/
React TypeScript CheatSheethttps://react-typescript-cheatsheet.netlify.app/docs/basic/setup
Google JSON Style Guidehttps://google.github.io/styleguide/jsoncstyleguide.xml
W3C中英對照表https://w3c-html-ig-zh.github.io/w3c-glossary/
HTML Standardhttps://whatwg-cn.github.io/html/是簡體中文版本,僅供參考
前端工程化搭建指南https://lousanpang.github.io/fe-workflow/docs/standard-directory
Airbnb JS 程式碼規範https://github.com/BingKui/javascript-zh

Interview

  • 這部分的內容比較需要關注”時效性“,所以太多年沒更新的我就不會放在這。
  • 用⭐標示的表示很推薦。
名稱網址備註
⭐JavaScript Interview Questions & Answershttps://github.com/sudheerj/javascript-interview-questions很全面的 JS 面試題
⭐reactjs-interview-questionshttps://github.com/sudheerj/reactjs-interview-questions#react-interview-questions–answers很全面的 React 面試題
⭐front-end-interview-handbookhttps://github.com/yangshun/front-end-interview-handbook#front-end-interview-handbook
⭐GreatFrontEndhttps://www.greatfrontend.com/前端的 leetcode
⭐Front-end-Developer-Interview-Questionshttps://github.com/h5bp/Front-end-Developer-Interview-Questions許多人推薦的前端面試題庫,58.1k stars
⭐2023 年最新最全的 React 面试题https://www.xiabingbao.com/post/react/react-interview-rqoyyx.html
⭐如何準備前端面試?超完整經驗分享https://www.explainthis.io/zh-hant/career/experience-how-to-prepare-frontend-interview
一文带你梳理React面试题(2023年版本)https://juejin.cn/post/7182382408807743548滿新的,有包含 React18 的內容
做了一份前端面试复习计划,保熟~https://juejin.cn/post/7061588533214969892
2021年前端面试必读文章https://juejin.cn/post/6844904116339261447
前端知識每日3+1http://www.h-camel.com/index.html每天都會有一題前端面試題,可以在評論區發布自己的答案,可以查看之前的面試題(5000多題)。不過網站沒有SSL 而且加載的有點慢
面試前端工程師被問到的問題 (React 前端工程師)https://www.youtube.com/watch?v=IIhVKpp37c0
web前端面试 – 面试官系列https://vue3js.cn/interview/
前端面試題寶典https://fe.ecool.fun/topic-list題目滿多的,有實戰題也有理論題
BigFrontend.devhttps://bigfrontend.dev/題目不算多,框架的題目有點偏基礎
前端面試問題https://hackmd.io/@mingjunlu/front-end-interview-questions沒有答案
JavaScript、ES6 高频重点面试题https://www.arryblog.com/interview/js/2023最新,網站中還有其他面試題
五年前端三年面试https://fe.azhubaby.com/2021年的內容,可以參考一下
Explain this 前端面試詳解https://www.explainthis.io/zh-hant/swe/interview內容比較少,不過是繁體中文的

Inspiration

名稱網址備註
Web/App/Email/Others 介面靈感https://uxchi.notion.site/881b4c0179a74935a3f607ad3521cdb5
CSS Inspiration — CSS 靈感https://csscoco.com/inspiration/#/
Dribbblehttps://dribbble.com/全世界設計師各式各樣的設計
Mobbinhttps://mobbin.com/browse/ios/apps找尋 UI 設計靈感
Darkhttps://www.dark.design/暗色主題設計靈感參考
Site inspirehttps://www.siteinspire.com/網站UI設計靈感
App Fuelhttps://www.theappfuel.com/APP UI/UX 靈感
What Was IThttps://wwit.design/韓國版Mobbin,分享韓國移動端UI設計靈感,所有應用程式均基於iPhone XS螢幕尺寸(375×812)
UXArchivehttps://uxarchive.com/世界流行的 APP UX 趨勢

Tools

名稱網址備註
Tiny helpershttps://tiny-helpers.dev/為網頁開發人員提供的免費單一用途線上工具的集合
TableConverthttps://tableconvert.com/將表格以各種格式互相轉換,網站中還有很多其他轉換工具。
OKLCH Color Picker & Converterhttps://oklch.com/oklch 小工具
Is it down?https://downforeveryoneorjustme.com/用於檢查網站是對所有人關閉還是是你自己的問題。
WeOCRhttps://ocr.plantree.me/ocr線上的 OCR 工具,支持 jpg, png, bmp, tiff, webp, etc
examorhttps://github.com/codeacme17/examorAI 根據你的筆記為你出題,可用於複習。
OpenResumehttps://github.com/xitanggg/open-resume免費快速生成個人履歷。
memoshttps://github.com/usememos/memos私人的輕量級筆記工具,使用 Docker 部署。
mess-readerhttps://github.com/ppz-pro/mess-reader在線 epub 閱讀器。
Runnohttps://runno.dev/可在網頁中嵌入可運行的程式碼片段,只需要編寫 HTML。
DamnGood.Toolshttps://damngood.tools/tools/chat-pdfAI 可根據你上傳的 PDF 回答你的問題
TinyPNGhttps://tinypng.com/WebP, PNG, JPEG 圖片壓縮工具(一次最多20張,每張最大5MB)。
picdiethttps://www.picdiet.com/zh-tw圖片壓縮工具。用 JS 演算法極速壓縮 80% 的圖片大小,而不損害其品質。
blushhttps://blush.design/zh-CN定製插圖工具,下載成 PNG, SVG,與 Figma, Sketch 集成。
Gradientyhttps://gradienty.codes/Tailwind 漸層產生器
APIVaulthttps://apivault.dev/公開 API 合集
TDX運輸資料流通服務https://tdx.transportdata.tw/台灣交通公開 API
I Don’t Care About Commit Messagehttps://github.com/mefengl/vscode-i-dont-care-about-commit-messageAI 生成 commit message 的 VSCode plugn
Algorithm Visualizerhttps://algorithm-visualizer.org/演算法視覺化工具
CANINCLUDEhttps://github.com/CyberLight/caninclude-v2HTML 標籤工具,檢查 A 標籤能不能放在 B 標籤之中,以及介紹標籤的用處、兼容性。
Tailwind helperhttps://www.tailwindhelper.com/?ref=producthunt透過 GUI 快速生成 Tailwind class。
Developer Roadmapshttps://roadmap.sh/開發者學習路線圖
guest

1 評論
最舊
最新 最多投票
內聯回饋
查看全部評論
IT Flashcards

你能把 https://www.itflashcards.com/zh/ 加到列表中吗?