五年前端开发经验,三个月的整理。前端入门到就业学习路线及资源,详细到每一个知识点。所有课程技术即满足企业当下用人标准,同时也满足个人以后技术提升。先上一张学习路线图,后面慢慢分解:
为什么学前端:
现在是一个信息科技时代,前端就是离我们最近的it技术。我们每天逛的网站、使用的app,那漂亮的界面、炫酷的交互都是前端完成的。
前端社区正在逐渐壮大,与此同时,前端工程师的岗位需求量也日渐增多,薪资一路攀升。前端容易入门,容易上手,容易看到实际效果,容易保持学习热情,容易短时间内就业。不管你是迷茫的在校毕业生,还是想换工作的社会青年,前端是你最好的选择。
学完前端入门到就业的所有课程,你可以获得的:
前言:
学习之前,我们需要把工具都装好。前端虽然不像后端那样需要配置各种环境,安装各种开发工具,但最基本的浏览器和代码编辑器还是需要的。
浏览器:推荐谷歌
代码编辑器:推荐vscode
软件包课程资源里面都有,markdown、git 、webStorm等需要的其它软件课程资源中也都有
一、HTML、CSS、JavaScript基础
网页最主要由3部分组成:结构、表现和行为。网页现在新的标准是W3C,目前模式是HTML、CSS和JavaScript,它们也是前端开发最核心的技术。
先上一张总的学习路线图,再列出所有详细的知识点。
1、HTML
HTML,全称“Hyper Text Markup Language(超文本标记语言)”,简单来说,网页就是用HTML语言制作的。HTML是一门描述性语言,是一门非常容易入门的语言。
课程章节大榄:
第一章:html语法、基本结构
html基本语法、结构介绍
第二章:htm常用标签
br、 p、 div 、span 等标签介绍,块元素和行内元素
第三章:图片(img)、超链接(a)
相对路径和绝对路径、图片格式、内部链接、锚点链接
第四章:表格(table)、表单(from)
表格基本结构、合并行rowspan 、合并列 colspan
from 、 input 、文本框text 、密码框password 、单选按钮 radio 、复选框 checkbox 、按钮button、 图片域image 、文本域 textarea file
第七章:网页布局实战
2、CSS
CSS,全称“(层叠样式表)”。以后我们在别的地方看到“层叠样式表”、“CSS样式”,指的就是CSS。
课程章节大榄:
第一章:css简介
css基本语法简介
第二章:css选择器
元素的id和class
第三章:css属性
- 字体相关:字体类型font-family 、字体大小 font-size、字体颜色color、字体粗细font-weight
- 背景相关:background-image、background-repeat、backgroung-position
- 文本相关:段落样式、font-variant属性、首行缩进text-indent、文本水平对齐text-align、行高erline-height、字间距letter-spacing 、词间距word-spacing
- 边框相关:border
- 列表相关:列表项符号list-style-type、自定义列表项符号list-style-image
第四章:div+css
盒模型、页面布局、定位postion 、浮动float
第五章:项目实战
静态页面项目实战,如何用前端技术实现设计稿
3、JavaScript基础
JavaScript是一门脚本语言。如果把网页比做一个人,那么HTML就是人的身体、css就是人用来装饰自己的衣服、js就是人的动作与行为了
课程章节大榄:
第一章:js基础教程
语法、注释、变量、数据类型
第二章:js语法详解
运算符、条件语句if--else、switch 循环语句for 、 while 跳转语句
第三章:js函数
函数定义、函数调用、带参函数、带返回值的函数、局部变量和全局变量
第四章:js异常处理
异常捕获
第四章:jsDOM对象
第五章:js事件详解
事件流、事件处理、事件对象
第六章:js内置对象
String字符串 、 Date日期对象 、Array 数组对象、Math对象
第七章:js浏览器对象
window、history、location 、screen、定时器setInterval()、setTimeout()
第八章:js面向对象
第九章:js正则表达式
二、CSS3、HTML5、html5+css3实战
这一趴内容是上一趴内容的升级,涉及到的知识点会更多。但大家不必过于纠结,了解即可。这么多的功能我自己都不能全部记住,只要大概有个印象,用到的时候百度一下就可以了
1、CSS3
第一章:css3选择器
属性选择器、结构伪类选择器、ui元素状态伪类选择器
第二章:css3文字与字体相关样式
文字阴影text-shadow、文字描边text-stroke、文本溢出text-overflow、嵌入字体@font-face
第三章:css3盒模型
第四章:css3背景与边框
线性渐变、边框圆角border-radius、图片边框border-image、边框阴影box-shadow
第五章:css3动画
transitions、animations
第六章:css3所有的布局属性
弹性盒模型介绍flex、多列属性详解、媒体查询、响应式布局实战
2、html5
第一章:语义化标签、属性
article、section、nav、aside、pubdate、header、footer、hgroup、address等
第二章:新增表单属性
form、formaction、 formmethod、 formenctype、 formtarget、 autofocus 、required、 labels、control、 placeholder等
第三章:音频、视频
音频视频播放、音频视频解码
第四章:html5拖放
拖放本地资源
第五章:canvas
第六章:file api
第七章:H5存储
localStroage 、sessionStoage
第八章:应用缓存与web workers
第九章:响应式布局
3、html5+css3实战
经典项目实战,让你巩固学过的所有知识点。
项目一:列表及切换
项目二:Tab标签及切换
项目三:交互动画
项目四:侧边栏固定
项目五:回到顶部
项目六:javascript瀑布流
三、高级javascript、es6、less
总的学习路线图内容太多,细小的知识点就不再列出。高级js是面试的重点,大家一定要着重学习。
四、Vue2.5入门到实战、Vue 进阶精讲
从vue基础知识讲起,再利用一个项目实战学习到的所有基础知识,再详细讲解Vue常用到的api。再学习vue-router、vuex高级知识,再讲解高级组件开发。循序渐进的让你从入门到精通。
new Vue实例上的属性
app.$mount('#root') 、app.$data、app.$props、app.$el、app.$options、app.$root===app、app.$children、app.$slots、app.$scopedSlots、app.$refsapp.$isServer
Vue常用的api
$set、$nextTick、$refs、$forceUpdate()
生命周期
beforeCreated()、created()、beforeMount()、mounted()、beforeUpadate()、beforeDestory() 和 destoryed()updated()
指令
v-html 、v-text 、v-bind:data 、:data、v-on:click 、 @click、v-for
、v-model
组件
全局组件定义、局部组件定义
常用功能
插槽slot、extends继承、renderFunction、keep-alive、mixins、directives、过滤器filters、vue动画transtion、watch和computed
vue-router
路由配置和路由钩子详讲、vue项目实现按需加载的
VueX
注册一个store、getters、mutations、actions、VueX Api、Vuex与localStorage、vuex-router-sync
五、react
react管理系统开发,从一个项目开始讲解react。
react基础知识讲解
生命周期、事件机制等
React Router 4
包含式路由与exact、独立路由:Switch、router传参等
Redux
Action的认识、Reducer的认识、Store的认识、Action创建函数、redux-thunk中间件的认识等
六、面试
面试是三分运气七分准备,除了技术栈的准备还有面试技巧的准备。前端基础面试技巧和前端高级面试技巧,助你进大厂
七、技术栈扩展
学完上面所有的内容进大厂是没有问题了,但为了考虑大家的技术栈成长,前端入门到就业学习路线还包括以下扩展的课程。
- webpack
- 小程序
- 微信公众号
- node.js
- 算法
- 设计模式
- 前端性能优化
本套学习路线及资源的亮点是:
- 有更好的“学习路径”-项目驱动教学,由浅入深串联所有知识点
- 前端知识多而杂,去繁取精,以正确的路径学习,让你快速提升
- 有更大型的企业实战项目-直接带你玩企业级开发,学习过程即是工作过程
- 作者大大保驾护航,不懂的地方随时解惑
前端入门到就业学习路线资源获取,点击下面的链接,或者添加我的私人微信:yun1015911204 (请备注:前端码头)
前端入门到就业学习路线market.m.taobao.com❤️关注+点赞+收藏+评论+转发❤️,原创不易,鼓励笔者创作更好的文章
随时随地为你解疑答惑:
满满的好评: