Web 前端开发学习资料整理

痛定思痛。 2022-07-20 16:11 255阅读 0赞

**以前学习过一段时间的web前端开发，整理了一些我看过的/我认为比较好的学习资料（网站、书籍）。我只是闲来无事整理一下,如有不足，嘴下留情..毕竟分享不是一件坏事,共同学习...**

# 一、 语言基础（以书和网站为主） #

## 1.HTML&CSS： ##

#### （1）入门： ####

*  **Codeademy上的[html&css课程][html_css]——在线交互式编程平台，弄清楚基本概念和基本语法**
 *  **w3school上的HTML/CSS教程——技术手册式的教程，比较全面，照着实例敲一遍**

#### （2）进阶： ####

*  **[《精通CSS·高级Web标准解决方案》][CSS_Web]——对CSS有一个比较深入的学习，对核心技术了解** 
 *  **[《HTML5权威指南》][HTML5]——非常全面的书，内容也很新，包含了HTML5+CSS3+JS DOM**

#### （3）实战： ####

*  **bootstrap框架: [ bootstrap中文网][bootstrap]/《[bootstrap实战][bootstrap 1]》——流行的前端框架，注重实用即可** 
 *  **Codeademy上的Web Developer Skills+Projects——通过自己做小页面/小网站来运用所学**

#### （4）提高： ####

*  **[《CSS禅意花园》][CSS]——提高自己的艺术设计能力，通过实例来学习如何用CSS设计出漂亮的页面**

####     ####

## 2.Javascript： ##

#### （1）入门： ####

*  **Codeademy上的[javascript教程][javascript]——实例比较多，比较浅，算是基本了解JS** 
 *  **w3school上的JS教程——比较详细的了解下JS的特性** 
 *  **[《JavaScript DOM编程艺术》][JavaScript DOM]——讲js和DOM的基本知识和运用，了解JS和DOM可以做什么**

#### （2）进阶： ####

*  **[《JavaScript高级程序设计》][JavaScript]——JS圣经，比较全面，非常好的一本书，比犀牛书可阅读性强**
 *  **[《JavaScript权威指南》][JavaScript 1]——传说中的犀牛书，好厚好厚的一本书，不适合入门，适合当工具书看**
 *  **[《JavaScript语言精粹》][JavaScript 2]——很薄的一本书，但是可以帮助你快速了解JS的精华部分**

#### （3）实战： ####

*  **jQuery框架: w3school上的jQuery教程/Codeademy上的jQuery教程——了解Jquery** 
 *  **[《jQuery基础教程》][jQuery]——流行的前端框架，注重实用**

#### （4）提高： ####

*  **[《高性能JavaScript》][JavaScript 3]——讲如何提高js性能，以及构建和部署文件到生产环境的最佳实践**
 *  **[《Secrets of the JavaScript Ninja》][Secrets of the JavaScript Ninja]——jQuery作者写的书，如果你觉得精通JS了再看这本书**

# 附录：前端网站大汇总 #

## 1、前端知识体系： ##

*  **前端知识体系及修炼攻略：[http://blog.csdn.net/borishuai/article/details/8676573][http_blog.csdn.net_borishuai_article_details_8676573]——对前端知识体系剖析的非常好，尤其是最后对前端的阶段性划分，对前端学习很有指导意义，推荐！**
 *  **前端开发知识结构：[https://github.com/JacksonTian/fks][https_github.com_JacksonTian_fks]——有个前端知识框架的思维导图，给了很多链接和好书，推荐！**

## 2、技术资讯类 ##

*  **W3Cfuns : [ http://www.w3cfuns.com/][http_www.w3cfuns.com]——国内最大的前端站，比较全**
 *  **大前端：[http://www.daqianduan.com/][http_www.daqianduan.com]——没有W3Cfuns那么杂，有些wodpress的主题，“前端导航”也比较好用**
 *  **W3Cplus:[http://www.w3cplus.com/][http_www.w3cplus.com]——也是比较全，有个“国外优秀译文”，非常喜欢**
 *  **前端观察 ：[http://www.qianduan.net/][http_www.qianduan.net]——专注于前端设计与开发的博客，比较有深度，排版干净，推荐！\*\***
 *  **前端乱炖 ：[http://www.html-js.com/][http_www.html-js.com]——有点像前端的知乎，有问答平台和专栏啥的**

## 3、技术教程、文档类 ##

*  **慕课网：[http://www.imooc.com/course/program][http_www.imooc.com_course_program]  
    ——超级实用的视频教程类网站，各种小实例，非常适合照着“前端学习计划”计划学习**
 *  **codeademy :[ http://www.codeademy.com/][http_www.codeademy.com]——英文，简单有趣的互动编程学习网站，非常适合入门，中文版是http://www.fenby.com/**
 *  **W3schoo在线教程l: [ http://www.w3school.com.cn/][http_www.w3school.com.cn]——中文，适合入门，教程相当全，在线实例可以敲，可惜较浅，有些地方不太准确和深入**
 *  **火狐开发者网络MDN：[https://developer.mozilla.org/zh-CN/][https_developer.mozilla.org_zh-CN]——中文，不仅有技术文档，而且有相当多的参考资料和资源、工具，推荐！**
 *  **W3C标准：[http://www.w3.org/standards/][http_www.w3.org_standards]  
    ——英文，不解释，官方文档，真前端和伪前端就在于此。可惜英文的，而且可读性差。极不适合入门，适合提高。**
 *  **Web平台文档：[http://www.webplatform.org/][http_www.webplatform.org]——英文，权威性仅次于W3C标准，可读性高于W3C标准，W3C官方认可，高质量。**

#### 一些不错的网站 ####

*  **[github][]：没啥好说的，多阅读别人的源码，多上传自己的源码，向世界各地的大牛学习**
 *  **[codepen][]：感受前端之美的必选之地，里面有很多酷炫的效果和优秀的插件**
 *  **[echojs][]：快速了解js新资讯的网站**
 *  **[stackoverflow][]和[segmentfault][]：基本上各种问题都能在上面获得解答**
 *  **[google web fundamentals][]：每篇文章都适合仔细阅读**
 *  **[static files][]：开放的CDN，很好用**
 *  **[iconfont][]：阿里的矢量图标库，非常不错，支持CDN而且支持项目**
 *  **[html5 rocks][]: 一个不错的网站，很多浏览器的新特性以及前沿的技术，都能在这上面找到文章**
 *  **[css tricks][]：如何活用CSS，以及了解CSS新特性，这里可以满足你**
 *  **[JavaScript 秘密花园][JavaScript 4] JavaScript初学必看，非常不错**
 *  **[w3cplus][http_www.w3cplus.com]：一个前端学习的网站，里面的文章质量都挺不错的**
 *  **[node school][]：一个不错的node学习网站**
 *  **[learn git branch][]：一个git学习网站，交互很棒**
 *  **[前端乱炖][http_www.html-js.com]：一个前端文章分享的社区，有很多优秀文章**
 *  **[正则表达式][Link 1]：一个正则表达式入门教程，非常值得一看**
 *  **各路大牛的博客：这个太多了，就不贴了，知乎上有很全的**
 *  **各种规范的官方网站，不懂得时候读规范**

[html_css]: http://www.codecademy.com/en/tracks/web
[CSS_Web]: http://book.douban.com/subject/4736167/
[HTML5]: http://book.douban.com/subject/25786074/
[bootstrap]: http://www.bootcss.com/
[bootstrap 1]: http://book.douban.com/subject/25769817/
[CSS]: http://book.douban.com/subject/2052176/
[javascript]: http://www.codecademy.com/en/tracks/javascript
[JavaScript DOM]: http://book.douban.com/subject/6038371/
[JavaScript]: http://book.douban.com/subject/10546125/
[JavaScript 1]: http://book.douban.com/subject/2228378/
[JavaScript 2]: http://book.douban.com/subject/11874748/
[jQuery]: http://book.douban.com/subject/25733582/
[JavaScript 3]: http://book.douban.com/subject/5362856/
[Secrets of the JavaScript Ninja]: http://book.douban.com/subject/3176860/
[http_blog.csdn.net_borishuai_article_details_8676573]: http://blog.csdn.net/borishuai/article/details/8676573
[https_github.com_JacksonTian_fks]: https://github.com/JacksonTian/fks
[http_www.w3cfuns.com]: http://www.w3cfuns.com/
[http_www.daqianduan.com]: http://www.daqianduan.com/
[http_www.w3cplus.com]: http://www.w3cplus.com/
[http_www.qianduan.net]: http://www.qianduan.net/
[http_www.html-js.com]: http://www.html-js.com/
[http_www.imooc.com_course_program]: http://www.imooc.com/course/program
[http_www.codeademy.com]: http://www.codecademy.com/
[http_www.w3school.com.cn]: http://www.w3school.com.cn/
[https_developer.mozilla.org_zh-CN]: https://developer.mozilla.org/zh-CN/
[http_www.w3.org_standards]: http://www.w3.org/standards/
[http_www.webplatform.org]: http://www.webplatform.org/
[github]: https://github.com/
[codepen]: http://codepen.io/
[echojs]: http://www.echojs.com/
[stackoverflow]: http://stackoverflow.com/
[segmentfault]: https://github.com/qiu-deqing/FE-learning/blob/master/segmentfault.com
[google web fundamentals]: https://developers.google.com/web/fundamentals/
[static files]: http://www.staticfile.org/
[iconfont]: http://www.iconfont.cn/
[html5 rocks]: http://www.html5rocks.com/
[css tricks]: http://css-tricks.com/
[JavaScript 4]: http://bonsaiden.github.io/JavaScript-Garden/zh/#object.general
[node school]: http://nodeschool.io/
[learn git branch]: http://pcottle.github.io/learnGitBranching/?demo
[Link 1]: http://deerchao.net/tutorials/regex/regex.htm