前端基础知识

标记有 :thumbsup: 的均为推荐项

Javascript

学习Javascript时, 建议直接在浏览器中练习, 可参考本文档来操作

必看

• JavaScript 标准参考教程, 请使用这作为学习Javascript的第一步, 里面包含了JS语言基础、浏览器API、DOM API的详细介绍
• JS交互课程 :thumbsup:, 英文, 如果你的英文不错, 推荐在这个网站再次学习, 强化对JS语言对使用. 该网站提供交互式课程, 一步一步引导你深入学习, 非常适合初学者

进阶提升

• Javascript 秘密花园 :thumbsup: 介绍 javascript 常见问题
• 整洁的Javascript代码, 教你如何写出高质量的JS代码. (原始文档地址 clean code javascript, 英文)
• 如何使用原生 JS 实现 jQuery 的功能 jQuery是一个简洁高效的JS工具库, 但是随着技术发展, 浏览器的更新换代, jQuery很多功能都可以使用原生JS轻松实现, 你不需要引入一个上百Kb的库来实现一个简单功能.
• 王得发的JS, 记录JS的诡异行为, 了解这些能避免JS的一些莫名奇妙的bug

参考手册

Javascript 参考手册 来自w3c成员火狐编写的手册, 内容详尽且完善, 在使用JS语言及浏览器API时, 可在此网站查找详细的API或语言文档说明

• Awesome Javascript
• 深入Javascript(英文)

HTML

• Html 学习
• Html 参考手册
• Marksheet :thumbsup: html & css 学习教程，in English
• Html reference :thumbsup: html 手册，可以根据标签类型快速筛选，in English

CSS

• CSS 学习
• 谷歌推出的CSS学习指南 点击网页右下角可切换为中文 (网站已被屏蔽, 你需要一点手段才能正常访问)
• CSS 参考手册 :thumbsup: 可下载 chm 离线版
• A to Z css
• CSS Reference 可视化的 CSS 使用指南
• CSS Pro Tips
• Flexbox defense 使用游戏方式学习 CSS 的 Flex 布局
• Defensive css 编写更健壮、适配性更好的 CSS 的技巧

相关

• css选择器练习
• loading 动画生成

前端开发规范

前端开发规范 :thumbsup:

预处理语言(用其他语言来生成 js, css)

• Less :thumbsup: css 预处理器, 为 css 带来了变量, 函数等编程特性 简洁易用, 适用于轻型项目
• Sass 另一个 css 预处理器, 功能强大, 书写起来比 less 略复杂， 适用于大型项目
• Coffeescript javascript 预处理器, 语法简洁, 可读性高, 提供了一系列语法糖

Markdown

• Markdown 语法
• Github Flavoured Markdown 语法 :thumbsup: Github 扩展的 markdown，支持语法高亮
• Haroopress :thumbsup:(Markdown 编辑器)

其他

• devhints (英文) 开发文档快捷查看表, 包含各种开发库(React, jQuery 等)及 各种工具(vim, bash, vscode 等) 的说明文档, 比原始文档更容易阅读使用.
• tldr 命令行帮助文档工具, 可用于替代 man, 使用 npm install -g tldr 即可安装, 帮助文档内容比 man 可读性更高, 也更简洁.

相关阅读

• Frontend Handbook
• 谷歌推出的web.dev 点击网页右下角可将语言切换为中文, 内容讲解的非常详细(不知为何会被屏蔽, 你需要一点手段才能正常访问)
• Web Design Stack
• Web Design Repo
• 免费编程书籍
• 免费软件开发教程合集(英文, 视频托管在 YouTube)