Web 前端开发学习资料整理

本文提供了一条清晰的前端学习路径,从HTML、CSS的基础知识到JavaScript的深入理解,再到实战项目和技能提升,覆盖了从入门到精通所需的所有资源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、 语言基础(以书和网站为主)
1.HTML&CSS:
(1)入门:

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

(2)进阶:

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

(3)实战:

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

(4)提高:

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

 

2.Javascript:
(1)入门:

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

(2)进阶:

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

(3)实战:

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

(4)提高:

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

附录:前端网站大汇总
1、前端知识体系:

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

2、技术资讯类

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

3、技术教程、文档类

    慕课网:http://www.imooc.com/course/program
    ——超级实用的视频教程类网站,各种小实例,非常适合照着“前端学习计划”计划学习
    codeademy : http://www.codeademy.com/——英文,简单有趣的互动编程学习网站,非常适合入门,中文版是http://www.fenby.com/
    W3schoo在线教程l: http://www.w3school.com.cn/——中文,适合入门,教程相当全,在线实例可以敲,可惜较浅,有些地方不太准确和深入
    火狐开发者网络MDN:https://developer.mozilla.org/zh-CN/——中文,不仅有技术文档,而且有相当多的参考资料和资源、工具,推荐!
    W3C标准:http://www.w3.org/standards/
    ——英文,不解释,官方文档,真前端和伪前端就在于此。可惜英文的,而且可读性差。极不适合入门,适合提高。
    Web平台文档: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初学必看,非常不错
    w3cplus:一个前端学习的网站,里面的文章质量都挺不错的
    node school:一个不错的node学习网站
    learn git branch:一个git学习网站,交互很棒
    前端乱炖:一个前端文章分享的社区,有很多优秀文章
    正则表达式:一个正则表达式入门教程,非常值得一看
    各路大牛的博客:这个太多了,就不贴了,知乎上有很全的
    各种规范的官方网站,不懂得时候读规范
 

附录:

1.W3Cschool教程学习:https://www.w3cschool.cn/
2.菜鸟教程学习:http://www.runoob.com/

3.Web 前端开发学习资料整理:https://blog.youkuaiyun.com/happyduoduo1/article/details/51865661

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值