小白从0到1,如何学习web前端开发?

很多小白可能会说,我现在零基础学习,现在前端开发的内容那么多,我应该怎么学呀?


问到这里我想跟大家说一下:

其实前端技术更新是挺快的,但是技术不管怎么更新,怎么发展,都离不开基础的知识,把基础的语法学好,理解好编程思想、开发方式,能面向多终端开发,响应式开发掌握好,基础打牢了,再深入的内容都是可以迎刃而解的。


今天就跟大家讲一下新手小白,该如何入手前端以及如何顺利学好前端。


[if !supportLists]1、[endif]在学习之前搞清楚你要做什么工作岗位,这些在招聘网站上都有,岗位薪资、福利这些都可成为你学习的动力哦。


[if !supportLists]2、[endif]学习需要有规划,每天定任务,学习新的知识不能急于求成,每天可以掌握一两个知识点,然后多练习,基础知识需要学扎实!一定要扎实!!


[if !supportLists]3、[endif]最好有个学习路线,按照知识点难易程度来定学习时间和进度,这样不迷茫,还有重复一点:不求迅速,但求牢固。


4、自学的话最好有大神带着你,学习的路上肯定会遇到技术问题,能及时解惑的话学习事半功倍哦。


话不多少,直接上干货!


初级前端:

主要学习三个部分:HTML,CSS,JavaScript


html + css部分:

推荐视频:https://www.bilibili.com/video/BV1R4411J7tQ

推荐视频:https://www.bilibili.com/video/BV1p5411w71w

推荐视频:https://www.bilibili.com/video/BV1Vi4y1t7XV

这部分特别简单,到网上搜资料,书籍视频非常多。

css中盒子模型,流动,block,inline,层叠,样式优先级等这些自学起来也是非常容易。学完基础后,可以仿照电商网站(例如京东、小米)做首页的布局。


JavaScript部分:

推荐视频:https://www.bilibili.com/video/BV14y4y1q754

推荐视频:https://www.bilibili.com/video/BV1W54y1J7Ed?ssss


Javascript,简称JS,有很多比较抽象的概念,必须要深入理解,比如闭包、原型、面向对象、封装等,要理解透彻。

另外,js面向对象编程必须要学习,非常重要,JS语法,永远是面试中最重要的部分。


jQuery,这是一个非常优秀的Javascript库,大型开发必备。

它简化了Javascript的复杂操作,消除了Javascript跨平台兼容问题,提供了大量实用方法,有良好的文档和帮助手册,是一个非常成熟的Javascript库。

推荐视频:https://www.bilibili.com/video/BV1QA411W7s7


ES6语法。这部分属于JS新增的语法,面试必问,其中,关于promise、async等内容要尤其关注。


中高级前端:

一、工具学习习:

1、Canvas,面试时,有的公司不一定会问canvas,靠运气,如果时间不够,这部分的内容可以先不学,但如果你会,绝对属于加分项。


[if !supportLists]3、[endif]自动化工具:构建工具Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意,Sass 比 Less 用得多,gulp 比 grunt 用得多。

推荐视频:https://www.bilibili.com/video/BV1YU4y1g745


[if !supportLists]4、[endif]移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。

推荐视频:https://www.bilibili.com/video/BV1uQ4y1T7kW


[if !supportLists]5、[endif]前端框架:Vue.js和React。这两个框架至少要会一个。入门时,建议先学Vue.js,上手相对容易。但无论如何,同时掌握 Vue 和 React 才是合格的前端同学。

推荐视频:https://www.bilibili.com/video/BV1GL4y1v79M

推荐视频:https://www.bilibili.com/video/BV1Ya411F7fa


5、Node.js。属于加分项,如果时间不够,可以先不学,但至少要知道 node 环境的配置。

推荐视频:https://www.bilibili.com/video/BV1QT4y1A7NR


前端综合:HTTP协议、跨域通信、安全问题(CSRF、XSS)、浏览器渲染机制、异步和单线程、页面性能优化、防抖动(Debouncing)和节流阀(Throtting)、lazyload、前端错误监控、虚拟DOM等。

推荐视频:https://www.bilibili.com/video/av50567412


编辑器相关:Sublime Text是每个学前端的人都要用到的编辑器。另外,前端常见的IDE有两个:WebStorm 和 Visual Studio Code。WebStorm什么都好,可就是太卡顿;VS Code就相对轻量很多。个人总结一下:新手一般用 WebStorm,入门之后,用 VS Code 的人更多。


TypeScript(简称TS),ES是 JS 的标准,TS 是 JS 的超集。TS属于进阶内容,建议把上面的基础掌握之后,再学TS。


六、前端框架知识vue  react angular,三选一,必须要掌握熟,其余两个可以了解,但取决于你面试的公司。

react推荐视频:https://www.bilibili.com/video/BV1Ya411F7fa

Vue推荐视频:https://www.bilibili.com/video/BV1GL4y1v79M

Angular推荐视频:https://www.bilibili.com/video/BV12W41137CA


熟练掌握了以上这些知识点你还要时刻留意招聘网上的要求,只有要求达到了才有被邀面试的可能,举例如下:

[if !supportLists]1. [endif]精通html和css,能制作符合W3C标准的静态页面;2.精通JavaScript编程,对面向对象编程思想有深刻理解;3.精通主流Javascript库/框架jQuery;4.理解并掌握JavaScript语言核心技术DOM、BOM有Javascript性能优化经验;5.对浏览器兼容性有深入的研究,精通各种浏览器问题 ;6.了解Backbone.js、AngularJs等MVC框架并有实际项目开发经验;7.了解asp.net等服务器后台技术和拥有一定的C#编程能力者优先;8.对交互体验、可用性、用户体验有一定程度的理解;9.有良好的责任心和团队合作能力、能承受较大的压力;

推荐视频:

https://www.bilibili.com/video/av50571308

https://www.bilibili.com/video/av50573235

https://www.bilibili.com/video/av50575805

https://www.bilibili.com/video/av50567154


最后,祝各位不甘心平凡的小码农们学业有成,早日找到称心如意的工作!

你可能感兴趣的:(小白从0到1,如何学习web前端开发?)