零基础如何学 Web 前端开发

小鱼儿 2022-08-29 05:57 231阅读 0赞

今天是2021年7月的最后一天，也是一个美好的周六啊，本来我是不打算发文的，毕竟难得有一个好的休息天，让自己忙碌的一周身心放松下来，打打游戏，看看小姐姐不香吗。但是呢，就是有一些可爱的小伙伴私聊问我，零基础如何学 Web 前端开发，有什么建议，指导一下。这可难为我了，说实话这种建议还真不敢说，因为建议好了就把人带到了正确道路了，建议差了就是误人子弟。但是呢，既然问了，那就把我这么多年的个人阅历经验说一下，个人建议，仅供参考！

回答这个问题我不会给你讲一些不切实际的定义或者前端历史，或者一些你看不懂听不懂的玄学，好好说话，说一些大家能听懂能有点儿收获的话。下面我来说下怎么零基础学习web前端开发。

1.学习完web前端开发之后能干什么呢？

学完web前端之后你可以开发网页，做h5动画，做手机端app，可以做自己的博客网站，可以做微信公众号开发，可以开发小程序，可以结合nwjs做电脑客户端软件：比如微信的pc版，钉钉的pc版都是web前端来做的。

2.怎么开始学习

两条路：自学或者找培训班，找培训班的话，这里我不做推荐，以免被误解在打广告。这块我们一点就过，我主要讲下怎么去自学。

对于自学最直接的方式就是看视频学习，可以是在线视频，比如慕课网，麦子学院，极客学院，北风网都有从入门到精通的前端课程，这些视频都差不多，随便选一套就行，入门课程都一样，不用纠结于选哪一个。

视频找好了之后，如果你不想中途放弃，或者，浪费太多时间又没效果的话。就找找一个引路人，引路人当然是能力越强越好，找引路人的目的在于为你制定学习计划，把控学习质量，及时纠正错误的学习方向，教你正确的学习方式。给你做心理辅导。为你及时打气持续性补充你的信心。我之前接触过很多自学的小伙伴，有成功的也有放弃的，放弃的那些基本都是输在错误的学习思路和心理迷茫期。听他们抱怨说：没有人去指导他们，每天学完就学完了，第二天接着学，但是东西太乱都串不起来，也都不知道是干嘛用的，尤其是js部分，这种问题完全可以把一个人摧毁！所以对于刚入行的新人特别强调：有问题一定要去问，去解决，千万不要不懂装懂，弄明白了再往下走，人的心理是很脆弱的，一旦倒了可能就再也站不起来了。敬告各位新入行的同学，除非你之前有过编程经验，不然就找个引路人指导你。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

3.列一个学习大纲

1.  环境搭建

前端环境很好搭建，一个开发工具即可，webstorm，hbuilder，vscode，sublime。初学者建议sublime也不要装插件，没有语法提示，可以打基础

1.  html基础

带你去认识html，让你学习去运行html，等浏览器上面打开你的页面的时候，你会有很强的成就感，然后开始学习html的基础标签

1.  css基础

html是勾勒，css是染色，基础的css学完你会有种想写页面的冲动，这时候你不用抑制住那种感觉，直接按照自己所想开写，这是你的第一个项目

1.  js基础

js是页面的逻辑，作为一个web前端工程师，js是很核心的部分，也是很难的部分。js的学习之后放长一些，尤其是前一周，要让自己去熟悉那种语法环境，培养自己的开发思路，而且有一点就是学完一个星期的知识之后，及时和你的指引人沟通，看卡自己的理解是否有误，还有就是学习思路是否有问题，他会给你指出那些东西需要多学习，哪些不常用，还有就是给你点一下你学的这些在项目中会是怎么去应用，理论联系实际是最好的学习方式。

1.  纯js操作dom和jquery

这阶段要知道怎么去用js来更改页面的元素，怎么去写dom事件，经过一番联系后，再引入jquery，不要本末倒置，有个同学学完jquery之后说发誓以后再不用原生js操作dom！然后被我狠狠骂了一顿

1.  开始你的ui框架之旅

这个阶段我推荐从bootstrap开始，这个框架很经典，响应式的珊格系统被后来框架一直沿用，在我线下教学的那几年，我都会带着学生一起看bootstrap的源码，让他们学会这种设计思想，因为之后对他们太有用了，当时他们很痛苦，现在他们说起来觉得很受益，如果可以，你也要去看看源码，先学会去定制bootstrap，公司注重二次开发，定制bootstrap正好可以练手。

1.  开始深入css3基础

学完css3要提上日程，这时你会看到不一样的世界

1.  深入js

这阶段你就要去解读原型链，原型替换，this指向，es6，es7的新语法，

1.  学一套主流mv\*框架

vue，react，angular2选一种，我建议从vue开始，react的jsx语法不适合你入门去学习，angular2的typescript语法糖难度也比较高，vue学起来平滑些，结合vue，学一下vue-router，vuex，element ui，axios，webpack。做个项目玩一下这个全家桶。

1.  升级后台语言nodejs

这个不作要求，你在学vue的时候其实已经在用nodejs了，你用的npm就是nodejs的一部分，这个阶段说的是nodejs编程，比较难理解，毕竟是写服务器的东西，不过前面基础打牢固，让别人一点拨就能上手，技术不难，难在思路转换。

1.  总结做项目

两个项目，一个是侧重于css特效方面的，要求就是非常酷，帅到没朋友第二个项目侧重逻辑处理，用来升华你的逻辑能力这两个项目可以从网上搜几个网站来模仿，之前我的学生有做过：苹果官网，魅族官网，花瓣网，网易云音乐，在行等很多网站，做的也很不错。

1.  面试技巧培养阶段

这个阶段要培养下公司项目的具体流程以及面试技巧的培养，面试回答思路等。

整个思路就是这样，希望对大家有用，有问题可以随时下方评论区回复我。

关于书籍：

HTML、CSS类别书籍，都是大同小异，在当当网、卓越网搜索一下很多推荐。如果感觉学的差不多了，可以关注一下《CSS禅意花园》，这个很有影响力。

Javascript的书籍推荐看老外写的，国内很多Javascript书籍的作者对Javascript语言了解的都不是很透彻。

这里推荐几本Javascript书籍：

初级读物：