零基础如何学 Web 前端开发

零基础如何学 Web 前端开发

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

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

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

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

2.怎么开始学习

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

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

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

3.列一个学习大纲

01. 环境搭建

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

02. html基础

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

03. css基础

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

04. js基础

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

05. 纯js操作dom和jquery

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

06. 开始你的ui框架之旅

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

07. 开始深入css3基础

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

08. 深入js

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

09. 学一套主流mv*框架

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

10. 升级后台语言nodejs

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

4. 总结做项目

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

5. 面试技巧培养阶段

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

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

关于书籍:

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

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

这里推荐几本Javascript书籍:

初级读物:

《JavaScript高级程序设计》:一本非常完整的经典入门书籍,被誉为JavaScript圣经之一,详解的非常详细,最新版第三版已经发布了,建议购买。

《JavaScript王者归来》百度的一个Web开发项目经理写的,作为初学者准备的入门级教程也不错。

中级读物:

《JavaScript权威指南》:另外一本JavaScript圣经,讲解的也非常详细,属于中级读物,建议购买。

《JavaScript.The.Good.Parts》:Yahoo大牛,JavaScript精神领袖Douglas Crockford的大作,虽然才100多页,但是字字珠玑啊!强烈建议阅读。

《高性能JavaScript》:《JavaScript高级程序设计》作者Nicholas C.Zakas的又一大作。

《Eloquent JavaScript》:这本书才200多页,非常短小,通过几个非常经典的例子(艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等)来介绍JavaScript方方面面的知识和应用方法。

高级读物:

《JavaScript Patterns》:书中介绍到了各种经典的模式,如构造函数、单例、工厂等等,值得学习。

《Pro.JavaScript.Design.Patterns》:Apress出版社讲解JavaScript设计模式的书,非常不错。

《Developing JavaScript Web Applications》:构建富应用的好书,针对MVC模式有较为深入的讲解,同时也对一些流程的库进行了讲解。

《Developing Large Web Applications》:不仅有JavaScript方面的介绍,还有CSS、HTML方面的介绍,但是介绍的内容却都非常不错,真正考虑到了一个大型的Web程序下,如何进行JavaScript架构设计,值得一读。

要做优秀的前端工程师,还需要继续努力:《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“jQuery库”、“前端框架”、“HTML5”、“CSS3”。。。这些都要深入研究!

万事开头难!如果你能到这个境界,剩下的路自己就可以走下去了。

人们常说:不想当裁缝的司机,不是个好厨师。

如果单纯只是学习前端编程语言、而不懂后端编程语言(PHP、ASP.NET,JSP、Python),也不能算作是优秀的前端工程师。

在成为一个优秀的前端工程师的道路上,充满了汗水和辛劳。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 零基础如何学 Web 前端开发

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们