零基础学习web前端的顺序

( 转载自:https://blog.csdn.net/weixin_41780944/article/details/83751632)

怎么开始学习
两条路:自学或者找培训班,找培训班的话,我推荐达内和传智播客,在国内讲师质量都比较高。这块我们一点就过,我主要讲下怎么去自学。

对于自学最直接的方式就是看视频学习,可以是在线视频,
视频找好了之后,如果你不想中途放弃,或者,浪费太多时间又没效果的话。就找找一个引路人,引路人当然是能力越强越好,找引路人的目的在于为你制定学习计划,把控学习质量,及时纠正错误的学习方向,教你正确的学习方式。给你做心理辅导。为你及时打气持续性补充你的信心

。在这里推荐一个web前端学习 QQ群606721798,欢迎大家加入,每天晚上都有一个技术学习课,会有老师分享干货,帮助大家分析解答问题

我之前接触和辅导过很多自学的学生,有成功的也有放弃的,放弃的那些同学基本都是输在错误的学习思路和心理迷茫期。听他们抱怨说:没有人去指导他们,每天学完就学完了,第二天接着学,但是东西太乱都串不起来,也都不知道是干嘛用的,尤其是js部分,这种问题完全可以把一个人摧毁!所以 我一直对我的学生强调:有问题一定要去问,去解决,千万不要不懂装懂,弄明白了再往下走,人的心理是很脆弱的,一旦倒了可能就再也站不起来了。敬告各位新入行的同学,除非你之前有过编程经验,不然就找个引路人指导你。

列一个学习大纲
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.学一套主流mvc框架
vue,react,angular2选一种,
我建议从vue开始,react的jsx语法不适合你入门去学习,angular2的typescript语法糖难度也比较高,vue学起来平滑些,结合vue,学一下vue-router,vuex,element ui,axios,webpack。做个项目玩一下这个全家桶

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

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

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

Web前端 web的学习之路的更多相关文章

  1. web前端全栈学习之路

    web前端全栈学习之路 --- 陆续更新中 一.HTML相关 1.HTML常用标签:http://www.cnblogs.com/wyb666/p/8733699.html 2.HTML5基础: 3. ...

  2. 新手学习WEB前端流程以及学习中常见的误区

    学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...

  3. web前端基础知识学习网站推介

    内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.co ...

  4. 我的web前端整理和学习

    知识点收藏:(边看.边记录.边写) 开直播学习:虎牙 待办事理>> 练习自我表达(把文章做成视频).技术学习总结(博客与公众号).跳出舒适圈. 前端知识体系:https://www.cnb ...

  5. web前端的超神之路

    前端超神之路 前端基础知识 HTML :用户实现页面的工具 CSS:用于美化界面的工具 javascript:用于操作html元素和css样式,让你的页面效果更美观 前端进阶知识 jQuery:用于简 ...

  6. 浅谈web前端就业的学习路线

    初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠 ...

  7. 初学者:浅谈web前端就业的学习路线

    初级前端 主要学习三个部分:HTML,CSS,JavaScript 一.html + css部分: 这部分特别简单,到网上搜资料,书籍视频非常多.css中盒子模型,流动,block,inline,层叠 ...

  8. Web前端新手经典学习路线

    做前端开发八九年的时间,到2015年的时候,Web前端因为HTML5技术的高速发展,成为IT行业中最受欢迎和未来需求人才发展最好的职业,各个行业都想转行做前端开发,包括一些在校的学生,土木工程,一些不 ...

  9. 小白到web前端工程师需要学习哪些知识?

    随着web3.0时代,那么web前端开发技术人才越来越吃香,而且web前端领域划分越来越细,对技术的需求越来越高,想学习web前端的人也是越来越多.那么,如何学习web前端知识?从哪开始?转型成为we ...

随机推荐

  1. 从壹开始前后端分离 41 || Nginx+Github+PM2 快速部署项目(一)

    前言 哈喽大家周一好!今天是农历腊月二十三,小年开始,恭祝大家新年快乐(哈哈你五福了么

  2. Java核心技术梳理-集合

    一.前言 在日常开发中,我们经常会碰到需要在运行时才知道对象个数的情况,这种情况不能使用数组,因为数组是固定数量的,这个时候我们就会使用集合,因为集合可以存储数量不确定的对象. 集合类是特别有用的工具 ...

  3. java游戏开发杂谈 - java编程怎么学

    java语言包含很多的知识点,我们并不需要把java语言的知识点都学全了,才开始编程.      你只需要了解: 1,java的数据类型和变量定义 2,类和对象的初步印象. 3,if-else, wh ...

  4. 约定Service构建方式

    对于DevOps中,将开发好的软件交付给运维人员去部署与维护,过程中参杂着诸多不可控制的变量,如环境问题.版本问题等等,而Docker容器极大程度上解决了这些问题,同时对于服务的持续交付,也变得方便和 ...

  5. 微信小程序之表单验证

    表单验证 何为表单验证呢? 百度百科给出的回答是这样的: 表单验证是javascript中的高级选项之一.JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证 [ ...

  6. 使用PixiJS做一个小游戏

    PixiJS PixiJS使用WebGL,是一个超快的HTML5 2D渲染引擎.作为一个Javascript的2D渲染器,Pixi.js的目标是提供一个快速的.轻量级而且是兼任所有设备的2D库. 官方 ...

  7. 粮草先行——Android折叠屏开发技术点(二)

    继该系列的第一篇和番外篇之后,今天我们来聊一聊多窗口开发的注意事项.实际上,与其说"多窗口开发",不如说让我们的APP适应多窗口模式. 可能有朋友会问,为什么要提到多窗口模式呢? ...

  8. MD5加密Util

    目录 (1)需要导入的包 (2)MD5Util类 (3)使用举例 (1)需要导入的包 <dependency> <groupId>org.apache.commons</ ...

  9. 在github上fork项目如何同步并解决冲突

    在github上fork项目如何同步并解决冲突 在github上有些项目我们可能会进行一些自己功能的添加但是提交PR后作者基于设计或者其他原因考虑没有通过,但是这个功能又是我们必须的.这时我们就想自己 ...

  10. 产品经理之PRD详解

    文章大纲 一.PRD基础二.PRD要素讲解三.相关模板下载四.参考文章   一.PRD基础 1. PRD简介    PRD中文意思为:产品需求文档.PRD的主要使用对象有:开发.测试.项目经理.交互设 ...