web前端从入门到精通的自学之路

2018-08-09 admin

对于这个话题,我不会给你讲一些不切实际的定义或者前端历史,或者一些你看不懂听不懂的玄学,我之前做讲师的第一准则是:好好说话,说学生能听懂能有点儿收获的话。下面我来说下怎么零基础学习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.纯ja操作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编程,比较难理解,毕竟是写服务器的东西,不过前面基础打牢固,让别人一点拨就能上手,技术不难,难在思路转换。 3.总结做项目 两个项目, 一个是侧重于css特效方面的,要求就是非常酷,帅到没朋友 第二个项目侧重逻辑处理,用来升华你的逻辑能力 这两个项目可以从网上搜几个网站来模仿,之前我的学生有做过:苹果官网,魅族官网,花瓣网,网易云音乐,在行等很多网站,做的也很不错。 4.面试技巧培养阶段 这个阶段要培养下公司项目的具体流程以及面试技巧的培养,面试回答思路,如果有同学想多了解这方面,我很乐意给大家讲解

整个思路就是这样,希望对大家有用,有问题可以随时私信我,我很愿意为大家辅导

原文链接:https://segmentfault.com/a/1190000015943853

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37629.html

文章标题:web前端从入门到精通的自学之路

相关文章
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
AJAX的浏览器支持
AJAX 的要点是 XMLHttpRequest 对象。 不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。 IE 浏览器使用 ActiveXObject,而其他的浏览器使用名为 XMLHttpRequest 的 Jav...
2015-11-12
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
Riot.js:不足1KB的MVP客户端框架
Riot.js是一款MVP(模型-视图-呈现)开源客户端框架,其最大的特点就是体积非常小,不足1KB,虽然体积小,但它可以帮助用户构建大规模的Web应用程序。 Riot.js是由Moot公司开发,目前最新版本为v0.9.2,遵循MIT开源许...
2016-03-11
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
回到顶部