前端学习路线,如何学习前端
前端学习路线,如何学习前端(学习周期,测试题,源码,阶段项目)
1.首先零基础学习前端先要有一个计划,了解前端要学习哪些技术。
2.做好自己的时间规划,如何快速入门前端那肯定是需要不断的提高自己的学习效率,学习过程中尽量把手机调至静音给自己一个安静的学习环境和氛围。
3.快速入门顾名思义肯定是少走弯路,在学习过程中看下自己身边有没有前端这方面的大神尽量多问,多交流,如果是没有的话,可以多去找一些前端的交流群,学习肯定是不能闭门造车。
学习是一个循序渐进的过程,前端的学习也是如此。
不论前端开发还是后端开发的学习都要求我们多动手,既要反复的看书,也把学习到的知识点第一时间去实践。前端的学习入门快要三个月,慢的要 5-6 个月左右,看个人的理解速度来评估,只要入门了不论理解能力,还是学习的速度都会有明显的提升。
在学习前端的过程中,除了要把学到的知识点第一时间去实践,也要在学习的每个阶段自己创建课题,用所学到的知识去实现课题的内容。这样可以更好有助于理解和累计一定的项目经验。
前端的学习从来不是孤军奋战,需要一个前辈的领路,也需要一个平台不断交流和思维碰撞。这样可以快速入门和少走弯路,也能让自己发现问题的根本所在。
简介
前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程,通过 HTML,CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是 Web1.0 时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。
移动互联网带来了大量高性能的移动终端设备以及快速的无线网络、HTML5、node.js 的广泛应用,各类框架类库层出不穷。
正文
软件开发的学习,要求我们在学习的过程中抓紧时间实践,在阶段性的学习中也要求找一些项目来做,本质上就是要给自己找点事情做,绝对不能单看书。毕竟这门学问是我们用来生产的,用来养家糊口的技能,所以要多动手去实践。
根据我长期的总结并结合时下的技术栈,把前端的学习大致分为如下五个阶段。不仅适合想学前端或者转行学前端的,在校学生也非常实用。
阶段一
在学习前端之前呢,你需要一个编辑器,在网上你可以看到很多编辑器用来编写前端,甚至 Windows 系统默认的文本文档也可以作为前端代码的编辑器。俗话说,没有金刚钻怎么揽瓷器活,所以一个好的编辑器很重要,我在这里推荐给大家的编辑器是 VSCode。
思维导图
一、HTML+CSS
前端的入门门槛是极低的,主要体现在 HTML 和 CSS 部分,运行环境就是浏览器,不像如 Java 需要配置开发/运行环境。
HTML 和 CSS 不是编程语言,HTML 是结构标签,CSS 是结构标签的样式配置。
HTML
属性
事件
标签
字符集
CSS
CSS基础教程
CSS样式
CSS框模型
CSS定位
CSS选择器
CSS高级
思维导图
以上内容的学习用时 20天左右,再花 2 天的时间项目实践,这部分总花费时间在 22天左右。
二、HTML5+CSS3
HTML5 作为 HTML 的最新版本,引入了多项新技术,大大增强了对于应用的支持能力,使得Web技术不再局限于呈现网页内容。
HTML5 可以使开发者的工作大大简化,理论上单次开发就可以在不同平台借助浏览器运行,降低开发的成本,这也是产业界普遍认为 HTML5 技术的主要优点之一。
CSS3使用了层叠样式表技术,可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版,拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。
CSS3的改变有很多,增加了文字特效,丰富了下划线样式,加入了圈重点的功能。在边框方面,有了更多的灵活性,可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面,特意增加了投影。
CSS3在兼容上做了很大的功夫,并且网络浏览器也还将继续支持CSS2,因此原来的代码不需要做太多的改变,只会变得更加地轻松。
HTML5
HTML5视频
HTML5音频
HTML5拖放
HTML5画布
HTML5 SVG
HTML5地理定位
HTML5 Web存储
HTML5 应用缓存
HTML5表单
CSS3
CSS3边框
CSS3背景
CSS3文本效果
CSS3字体
CSS3 2D转换
CSS3 3D 转换
CSS3 过渡
CSS3 动画
CSS3 多列
思维导图
以上内容用时 10 天左右,这部分内容是在 HTML+CSS 做的升级改进,只需要了解他们的一些特性即可,再结合这些特性做一些小项目加深学习。
三、JavaScript
JavaScript 是 web 开发者必学的三种语言之一,这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言,不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示:
认识JavaScript
基本语法
变量
数据类型
字符串
数字
布尔
数组
对象
Null
Undefined
5. 函数
内置函数
自定义哈数
6. 运算符
** 7. 流程控制**
** 8. DOM对象**
String
Array
Date
Boolean
Math
Number
** 9. BOM对象**
WIndow
Navigator
Screen
History
Location
** 10. 综合实例**
思维导图
以上内容的学习用时 35天 左右,这里推荐几本 Javascript 的书籍,如下:
《JavaScript 高级程序设计(第3版)》,俗称红宝书。前七章讲的是语言特性,是重点学习的部分,必须需要反复阅读,直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习,这是一些常用的 Web API。至于本书的其余部分大致读一下就可以,不做重点要求。
《JavaScript 语言精粹》,俗称蝴蝶书。很薄的一本书总页数就 147 页,花一天时间就能看完,快的话半天就能看完。这本书虽然很薄,但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言,所以这本书”取其精华,去其糟粕“就是精粹了。
《你不知道的 JS》非常精彩的一本书,将 JavaScript 的细节一网打尽。
阶段二
这部分内容是对 JavaScript 的补充学习
四、 Jquery学习
基础语法
选择器
基本选择器
层次选择器
过滤选择器
表单选择器DOM操作
查找节点
创建节点
插入节点
删除节点
复制节点
替换节点
包裹节点
属性操作
样式操作事件
事件绑定
事件冒泡动画
show、hide
fadeIn、fadeOut
slideUp、slideDown
自定义动画animate
动画回调以及停止动画常用工具
浏览器及特性检测
数组和对象操作
Layer UI,主要学习栅格布局,图标,动画,按钮,表单,导航,选项卡,进度条,面板,表格,时间 线等Ajax
Jquery插件编写
思维导图
五、其他
JavaScript 进阶
DOM+BOM综合演练
网页特效
ES6 进阶
bootstrap
animate.css学习
以上内容的学习用时 10天左右
阶段三
这部分是框架和前后端交互技术的学习
一、Vue
1.Vue基础
模版语法
计算属性侦听器
Class与Style绑定
条件/列表渲染
事件处理
表单输入绑定
组件基础、注册
Prop
自定义事件
Vuex
State
Getter
Mutation
Action
ModuleVue-router
认识路由
动态路由
嵌套路由
编程式导航
路由组件传参axios
认识axios
全局配置
发送POST、GET请求等思维导图
二、React
认识React
React元素渲染
JSX
组件
State
Props
事件处理
条件渲染
列表
组件API
组件声明周期**思维导图**
三、Node
1.基础
console(控制台)
crypto(加密)
debugger(调试器)
fs(文件系统)
http(网络)
os(操作系统)
path(路径)
高级
NPM介绍及使用
MVC模式简介
Express框架学习
链接Mysql
链接Redis
项目实战思维导图
四、webpack
1.概念
主要讲什么是入口,出口,loader,插件等
入口
单个入口语法
对象语法
常见场景输出
用法
多个入口起点
高级进阶模式
development
productionloader
实例
配置插件
剖析
用法
配置配置
基本配置
多个Target
使用其他语言配置模块
思维导图
以上内容用时 两个月 左右
阶段四(扩展部分,了解即可)
一、Mysql
阶段一
认识mysql
安装mysql
创建数据库、数据表
学习常用的SQL命令,完成增删查改
阶段二
学习Mysql关联查询,子查询等
学习Mysql常用函数
学习Mysql分组、分页、排序等
阶段三
学习Mysql高级查询
了解存储过程,自定义函数等
了解Mysql配置文件
二、Redis
认识Redis
学习redis的数据类型
redis常用操作
redis事务
思维导图
以上内容用时 7 天左右
阶段五
一、项目管理篇
1.SVN使用
认识svn
安装
生命周期
启动模式
创建版本库
检出操作
解决冲突
提交操作
版本回退
查看历史
分支
标签
GIT使用
认识git
安装配置
工作流程
工作区、暂存区和版本库
创建仓库
基本操作
分支管理
查看历史等
标签
github
二、扩展部分
小程序
了解小程序开发流程
视图容器
view
scroll-view
movable-view
cover-view
cover-image基础内容
icon
text
rich-text
progress表单组件
button
checkbox
form
input
label
picker
picker-view
radio
slider
switch
textarea导航
navigator
function-page-navigator媒体组件
audio
image
video
camera
live-player
live-pusher地图(map)
画布(canvas)
开放能力
open-data
web-view
ad
official-account
apicloud(移动app开发)
1.认识apicloud
开发工具讲解
2.端API
3.API对象
设备访问
功能扩展
界面布局
导航菜单
小程序模块
云服务对接
云API
数据云API
统计云API
推送云API
云API SDK小程序模块使用
三、常用框架使用篇
iview (vue框架)
element ui (vue框架)
echarts (百度图标库)
阿里巴巴开源图标使用
Sass学习
Swiper学习
zoom.js 学习
四、综合项目实战
教务管理系统(node+express+mysql)实现
思维导图
前端学习路线,如何学习前端相关推荐
- python学习路线-2020年 Python学习路线及学习目标规划 拿走不谢!
找不到完整的学习路线?小编分享2020年Python学习路线及学习目标规划拿走不谢,Python作为今年来特别受欢迎的编程语言,是AI时代头牌语言AI领域的敲门砖,Python已经入驻小学生教材,将来 ...
- Java:计算机编程语言Java的简介、安装(编程环境/工具)、学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略
Java:计算机编程语言Java的简介.安装(编程环境/工具).学习路线(如何学习Java以及几十项代码编程案例分析)之详细攻略 目录 Java的简介 1.Java的工作原理--基于Eclipse等编 ...
- 2020年最新Python学习路线及学习目标规划 拿走不谢!
找不到完整的学习路线?本文分享2020年Python学习路线及学习目标规划拿走不谢,Python作为今年来特别受欢迎的编程语言,是AI时代头牌语言AI领域的敲门砖,Python已经入驻小学生教材,将来 ...
- Unity3D 之 学习路线与学习经验分享
转自:https://blog.csdn.net/qq_22521529/article/details/83108837 Unity3D学习路线与学习经验分享 该博文出自作者15游02 丁祺,是一篇 ...
- 根据SecWIki给出的Web安全工程师的学习路线的学习经历
一直对Web安全问题有很大的兴趣,之前一直不知道该从何学起,就学习了一些自认为基础的知识,比如HTML,JS和PHP,只是大概的看了一遍,并没有亲自动手操作多少,所以还处在萌新的水平. SecWiki ...
- 第1讲 Java学习路线怎么学习Java
第1讲 Java学习路线&怎么学习Java 1 概述 学过一段时间的同学一定会觉得Java学习最头疼的不是语法结构的繁杂,而是Java本身体系结构的庞大.以至于自己不知道接下去该 ...
- 零基础学习前端:学习路线、学习计划、实战项目和面试题简历分享。
前端简单概括就是所有你可见的效果呈现都可囊括到前端范畴,前端是一个没有任何竞争的方向,它的不可替代性是其他方向所没有的,比如后端,你可以用 Java.PHP.C#.Go.Ruby 等语言开发.前端相较 ...
- 个人前端学习路线之学习视频资源分享
个人前端学习路线之资源分享 本人2019年6月份毕业于安徽省合肥学院计算机科学与技术系网络工程专业,目前是一本院校.在学校的时候大一大二的时候基本都是玩游戏待在宿舍里,大学前两年是没学习到什么东西,到 ...
- Web前端自学之路学习路线,web前端开发网站
前端开发作为一个由网页制作演变成的新兴岗位,其实在国内外来说,受到重视的时间并不长,在前几年间技术快速的发展和其应用普及率的迅猛增长,使得前端人才市场一片盛况空前的景象,由于其的易入门性和不错的发展前 ...
- 前端入门 前端自学路线 web开发前端如何学习
本文介绍前端入门之路,以及之后对前端应该怎么学,大概学哪些东西.作者在前端.后端入门的时候,花了大量时间到CSDN.知乎.百度上去找资料,但是有的说的不是太复杂, 就是一句话带过,那个时候很苦恼.现在 ...
最新文章
- 366万常用的中 txt 网盘_推荐三款我常用于备份文件的网盘,堪称精品中的精品,建议收藏!...
- 【codeforces 678E】Another Sith Tournament
- 完美解决ie8以下不兼容h5的方法
- redis学习(三) 使用redis构建文章投票,发布后端
- 中国最好的电子商务平台,75商务网成功上线
- html 输入框防止自动记忆,网页输入框input填写内容自动记忆功能怎么去除
- 【深度学习】TensorFlow之卷积神经网络
- 58同城峰会落幕 智能化和下沉市场能否让58一直神奇?
- CAD 卸载工具,完美彻底卸载清除干净cad各种残留注册表和文件
- 惠威D1080带来精致听音感受
- js 随机生成时间段
- 用Python做证券指数的三种策略分析
- win10系统 Windows 资源保护找到了损坏文件 无法修复的有效解决方法
- OpenGL+VS2015相关类库配置
- 园林景观cad_5+ 园林景观设计PSD树木建筑人物鸟瞰图效果图ps后期分层素材库配景A...
- Material Design 之Style(三)
- 工信部通报今年首批问题App 当当、1药网私自收集个人信息 被通报的16款App名单
- 网络计算机win7为啥连不上,浅析win7旗舰版64位系统网络连接不上的解决方法
- Web 2.0时代RSS的.Net实现
- 利用LM358制作相移电路并通过STC单片机检测相位差
热门文章
- pytorch 模型与tf模型转换
- 叉乘点乘混合运算公式_14 导数的运算(四则运算法则、反函数求导、复合函数求导)...
- 阿里巴巴29个屌炸天的开源项目
- 如何判断患者服用的温度敏感性药品依旧安全有效?
- com.Android.pngn.tlq,Android学习笔记(八)——四种基本布局
- sf授权php,授权系统全解源码(支持分子系统)【原完整版】
- 2014年南京航空航天大学计算机学院推荐研究生公示,南京航空航天大学2013-2014学年研究生评优评奖公示...
- 视频教程-HTML+CSS+JavaScript基础-HTML5/CSS
- R语言-两总体均值对比
- 空手套白狼之——兼职中介