强烈推荐33个 GitHub 前端学习资源

大家好,我是漫步,今天来分享一下GitHub上值得学习的开源前端资源!

1. Web Developer Road Map

developer-roadmap 是一个为开发人员准备的学习路线图,他提供了学习编程中每个阶段的详细信息,并且每年都会进行更新。除了有前端的路线图,还包含后端、Android、Java、Python、Go等不同方向的学习路线图。

47805e3b150e1e9ef193c79cb31125ca.png

✨Star: 182k

官网地址: https://roadmap.sh/

GitHub地址: https://github.com/kamranahmedse/developer-roadmap

2. Clean Code JavaScript

clean-code-javascrip 综合了作者在使用 JavaScript 过程中的编码经验。它可以帮助我们学习编写易于理解、易于重用、提高代码效率的JavaScript代码。

0b90255458bfccb74cc4264160bbd9cc.png

✨Star: 61.4k

GitHub地址: https://github.com/ryanmcdermott/clean-code-javascript

3. DevDocs

devdocs 是当今比较流行的编程语言的文档集合,包含JavaScript、HTML、CSS、React、Vue.js、TypeScript等。

22fcb453e214023be5b4825c85706c17.png

✨Star: 27.3k

官网地址: https://devdocs.io/

GitHub地址: https://github.com/freeCodeCamp/devdocs

4. 30 Seconds Of Code

30 Seconds Of Code是一个聚合代码片段的网站,可以帮助我们开发过程中遇到的常见问题。它支持JavaScript、React、Node.js、Git、CSS、Python 等语言。ae00073527166c4dbb53114976561ba4.png

✨Star:90.5k

官网地址:https://www.30secondsofcode.org/

GitHub地址:https://github.com/30-seconds/30-seconds-of-code

5. Airbnb JavaScript Style Guide

这是一个由 Airbnb 开源的 JavaScript 代码风格指南。主要是为编写 JavaScript 代码提供规范的风格,方便开发者理解、阅读代码。它是最流行的JavaScript代码风格指南之一。

fe5958a76e533ac91caf639e7f43c177.png

✨Star: 118k

GitHub地址: https://github.com/airbnb/javascript

6. Grab Front End Guide

front-end-guide 主要根据 Grab 团队的实际操作经验,帮助前端初学者了解基本概念以及 Web 项目中使用哪些工具和库。

a55f7f53739750c98c16c068ceffe7bb.png

✨Star: 14.1k

GitHub地址: https://github.com/grab/front-end-guide

7. Free Programming Books

这个网站上汇集着很多免费的课程和编程书籍。在这个网站上,包含了很多语言,如果英文不太好,可以选择查看中文的资料,除了文档之外,还有视频、程序等多种形式的资料。

873272ea4f1c324b8d06555b4e552c25.png

✨Star: 218k

官网地址: https://ebookfoundation.github.io/free-programming-books/

GitHub地址: https://github.com/EbookFoundation/free-programming-books

8. Front-end Developer Interview Questions

这个网站收集了一些常见的前端面试题,不过并没有给出答案,可以自己整理学习。

a08cd59004996d686c27907be8e9ef2c.png

✨Star: 51.7k

GItHub地址: https://github.com/h5bp/Front-end-Developer-Interview-Questions

官网地址: https://h5bp.org/Front-end-Developer-Interview-Questions/translations/chinese/

9. Every Programmer Should Know

every-programmer-should-know 是每个软件开发人员都应该知道的技术知识的集合。

d409b9e41ff9b3cfdeafbf9fcc7702a5.png

✨Star: 51.2k

GitHub地址: https://github.com/mtdvio/every-programmer-should-know

10. Tech Interview Handbook

这是一个关于技术面试的网站,它总结了开发人员的面试经验,例如如何写简历、自我介绍、面试中的常见问题以及编程中的算法和技术等。

569dd1d8711db1da2290c5c533c45d04.png

✨Star: 63k

官网地址: https://techinterviewhandbook.org/

GitHub地址: https://github.com/yangshun/tech-interview-handbook

11. Coding Interview University

该项目收录了作者为进入谷歌而准备的学习笔记列表,包括数据结构与算法、计算机基础、编程练习等多种学子资料。

ff3d699e0f029a27600a36b96dcb45b7.png

✨Star: 202k

GitHub地址: https://github.com/jwasham/coding-interview-university

12. Modern JavaScript Cheatsheet

这是一个 JavaScript 速查表,可帮助我们解决在开发过程中经常遇到的问题。

49487a16af311c757ea77ac5badbedb9.png

✨Star: 22.1k

官网地址: https://mbeaudru.github.io/modern-js-cheatsheet/

GitHub地址: https://github.com/mbeaudru/modern-js-cheatsheet

13. Front-End Checklist

这个一个前端开发者在开发前需要了解的知识清单。适合初学者来检测自己的学习情况。

a5b12b7ed9e76d440c7033f6abf7b04d.png

✨Star: 57.5k

官网地址: https://frontendchecklist.io/

GitHub地址: https://github.com/thedaviddias/Front-End-Checklist

14. Awesome

Awesome是一个书籍、工具、库等集合,适用于当今所有流行的编程语言。

aef7cfec1f88ffdaa620a8a62be2f0e2.png

✨Star: 183k

GitHub地址: https://github.com/sindresorhus/awesome

15. Design Resources For Developers

这是一个为开发人员提供的在网站开发过程中选择颜色、字体、模板、CSS 框架等设计工具的集合。

ef501ffe60938f0776f410e8d96e820d.png

✨Star: 34.6k

GitHub地址: https://github.com/bradtraversy/design-resources-for-developers

16. JavaScript Algorithms And Data Structures

这是一个使用JavaScript来介绍常见的算法和数据结构的教程,它有很多种语言可以选择,英文不好的小伙伴可以直接看中文版。

482684b1687d9ffb2f2d66e9616012c0.png

✨Star: 131k

GitHub地址: https://github.com/trekhleb/javascript-algorithms

17. CSS Protips

这是一个提供CSS技巧的项目,帮我们快速掌握CSS技巧。0784852fbddcef3f9b6c8f25704d3766.png

✨Star: 20.3k

GitHub地址: https://github.com/AllThingsSmitty/css-protips

18. Awesome Web Development Resources

这是一个面向前端开发人员的免费编程资源的集合,上面包含了学习平台、托管平台、图片、图标、字体、文档、视频教程等多个分类。

d65c0b411fb81c16acdccbb438a4376f.png

✨Star: 3k

官网地址: https://markodenic.com/free-web-development-resources/

GitHub地址:https://github.com/markodenic/web-development-resources

19. JavaScript Questions

这个网站收集了 JavaScript 从基础到高级的各种问题,并且每个问题都有答案和详细的说明。它被翻译成多种语言,可自行选择。

805bf10cd2b03ee414c71ef95c738c97.png

✨Star: 40k

GitHub地址: https://github.com/lydiahallie/javascript-questions

20. Vanilla Web Projects

这是一个通过 20 多个免费项目帮助我们练习 JavaScript 开发代码的项目。

5620c1e1314d91a26966b7584b9d901f.png

✨Star: 11.8k

GitHub地址: https://github.com/bradtraversy/vanillawebprojects

21. Spellbook of Modern Web Dev

这是一个针对Web 开发人员的学习资源(如文章、书籍等)的集合。

8fb9edd88d70bffab5d9982b2e59a3e5.png

✨Star: 13.8k

GitHub地址: https://github.com/dexteryy/spellbook-of-modern-webdev

22. 33 JavaScript Concepts

这个项目是帮助我们快速掌握33个常见的 JavaScript 概念的文章汇总。

4bdfe17a8cfe46d54389fe3f87d3f99d.png

✨Star: 45.7k

GitHub地址: https://github.com/nguyentranchung/33-js-concepts

23. Project Guidelines

这是一个前端项目开发的教程列表,主要介绍在项目开发时需要注意的点。该项目也提供了中文版供我们选择。

7c9e684a2d6989e5fbd1265165088242.png

✨Star: 26k

GitHub地址: https://github.com/elsewhencode/project-guidelines

24. Learn Git Branching

LearnGitBranching 是一个 git 存储库可视化工具、沙箱,以及一系列教程和挑战。它的主要目的是通过可视化的形式帮助开发人员理解 git。这是通过不同级别的游戏来熟悉不同的 git 命令来实现的。

f04b77bb9a0051ac2b568c90f881d22f.png

✨Star: 23.1k

GitHub地址: https://github.com/pcottle/learnGitBranching

25. You Don’t Know JS Yet

这是一个关于 JavaScript 核心概念的系列丛书。它涵盖了 JavaScript 中的大多数知识点,如作用域、闭包、this、对象原型、异步和性能等。

ba7a68fa8f74ebedc7e42c7472476b14.png

✨Star: 148k

GitHub地址: https://github.com/getify/You-Dont-Know-JS

26. Nodejs Best Practices

这个项目是 Nodejs 开发最佳实践的终极指南。这里面包含了代码风格、性能、安全性、项目结构等方面的重要提示。

c71540a98ac5b1ba7d1d07ec98633cde.png

✨Star: 73.3k

GitHub地址: https://github.com/goldbergyoni/nodebestpractices

27. FreeCodeCamp

FreeCodeCamp 是一个自由开源的学习编程的社区,致力于帮助人们利用零散时间学习编程。它的使命是 Learn to code and help nonprofits。FCC 涵盖 HTML5、CSS、React、JavaScript、Database 等课程,游戏化程度非常高,学员可以通过线上聊天室和线下社区活动相互帮助。

7cab9bb508d065227b733fbdd4de203e.png

✨Star: 338k

Github地址: https://github.com/freeCodeCamp/freeCodeCamp

28. Awesome Repos

该项目收录了很多很实用的资源库,包含了前端、后端、网络、人工智能等很多方向的资源。

8d258c02f413dd37c73658a85ed214d0.png

✨Star: 1.3k

GitHub地址: https://github.com/pawelborkar/awesome-repos

29. Frontend Development Bookmarks

该项目包含为前端开发人员精心挑选的资源集合。从架构到 UI 组件,都在这个项目中。它涵盖了广泛的前端技术。

519b5d72c38a51672dc75a0d7f33412a.png

✨Star: 33k

GitHub地址: https://github.com/dypsilon/frontend-dev-bookmarks

30. Awesome Interview Questions

该项目包含几乎每种编程语言和框架的大量面试问题。

c9b5de4709d7aaf1be2c767faf578fa5.png

✨Star: 44.5k

GitHub地址: https://github.com/DopplerHQ/awesome-interview-questions

31. TypeScript Tutorial

typescript-tutorial 是一个TypeScript入门教程,从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。

e7d82fa863753c319efff3fa28c59453.png

✨Star: 8.4k

GItHub地址: https://github.com/xcatliu/typescript-tutorial

32. TypeScript Book Chinese

typescript-book-chinese 是 《TypeScript Deep Dive》 的中文翻译版,即《深入理解 TypeScript》。

8a6102f2d48b1d72e001a7e07129423c.png

✨Star: 5.1k

GitHub地址 :https://github.com/jkchao/typescript-book-chinese

33. Clean Code TypeScript

clean-code-typescript 是一个类似于clean-code-JavaScript的库,教给我们如何更好的编写TypeScript代码。

65e97a8639439ca762a7a05c9af83eee.png

✨Star: 5.1k

GitHub地址 :https://github.com/labs42io/clean-code-typescript

 
 
- 完 -
推荐阅读

25 个前端相关的学习网站和一些靠谱的小工具

推荐28个网站,让你边玩边学

23个可以免费学习编程的网站

d1055844148d193a6b6fa015571c6d2c.png

每日分享前端干货,欢迎关注!

  1. 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF

  2. 回复「Vue脑图」获取 Vue 相关脑图

  3. 回复「思维图」获取 JavaScript 相关思维图

  4. 回复「简历」获取简历制作建议

  5. 回复「简历模板」获取精选的简历模板

  6. 回复「加群」进入500人前端精英群

  7. 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。

  8. 回复「知识点」下载高清JavaScript知识点图谱

85db8edbf2c4942f7cb8ab56de3cbfc6.png

 👍🏻 点赞 + 在看 分享给你的朋友

### 回答1: 我的学习前端路线计划如下:1. 学习 HTML 和 CSS:学习 HTML 和 CSS 的基本知识,以及相关的技术,例如 Flexbox 和 Bootstrap。2. 学习 JavaScript:学习 JavaScript 核心语法,如变量、数组、函数、等等,以及 JavaScript 框架,如 React 或 Vue。3. 学习后端:学习后端编程语言,如 PythonJava、PHP 等,以及相关的技术,如 Node.js、MySQL 等。4. 用前端和后端技术结合:用学到的技术来构建一些简单的应用程序,例如网页、博客、社交网络等。5. 学习新的技术:不断学习新的技术,以保持对前端开发的技术领先。 ### 回答2: 学习前端的路线计划可以分为以下几个阶段: 阶段一:初级前端基础知识 1. 学习HTML和CSS的基础知识,掌握标签的使用和样式的设置。 2. 学习JavaScript的基本语法,了解变量、条件语句、循环等基本概念。 3. 学习DOM操作,掌握JavaScript中对网页元素的增删改查操作。 阶段二:进阶前端技术 1. 学习jQuery库的使用,了解其选择器、动画效果等特性。 2. 学习响应式设计,了解移动设备适配和响应式布局的原理与实践。 3. 学习CSS预处理器(如Sass或Less)的使用,提高CSS的开发效率。 阶段三:构建前端单页应用 1. 学习前端框架,如React、Angular或Vue.js,理解组件化开发的概念。 2. 学习使用Webpack等构建工具,进行代码模块化、打包和优化。 3. 学习前端路由管理,实现前端路由的跳转和页面切换。 阶段四:前端工程化和性能优化 1. 学习代码版本控制工具,如Git,掌握分支管理和团队协作。 2. 学习前端自动化工具,如Grunt、Gulp或Webpack,提升开发效率。 3. 学习性能优化的相关技术,如懒加载、CDN加速等,提高网站的加载速度。 阶段五:持续学习与实践 1. 关注前端技术的最新动态,参与各类技术社区和论坛的交流与分享。 2. 阅读优秀的前端开发博客和书籍,提升自己的技术能力。 3. 不断通过实践项目来巩固与提升技术水平。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值