前端基础
- 前言
- 简介
- 正文
- 阶段一
- 一、HTML+CSS
- HTML
- CSS
- 二、HTML5+CSS3
- HTML5
- CSS3
- 三、Javascript
- 阶段二
- 一、Jquery
- 二、其他
- 阶段三
- 一、VUE
- 二、React
- 三、Node
- 四、webpack
- 阶段四
- 一、Mysql
- 二、Redis
- 阶段五
- 一、项目管理篇
- 二、扩展部分
- 小程序
- apicloud(移动app开发)
- 三、常用框架使用篇
- 四、综合项目实战
前言
学习是一个循序渐进的过程,前端的学习也是如此。
不论前端开发还是后端开发的学习都要求我们多动手,既要反复的看书,也把学习到的知识点第一时间去实践。前端的学习入门快要三个月,慢的要 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
- 属性
- 事件
- 标签
- 字符集
HTML概述和基本标签视频
HTML教程 | w3cschool
HTML教程 | w3school
HTML教程 | 菜鸟教程
CSS
- CSS基础教程
- CSS样式
- CSS框模型
- CSS定位
- CSS选择器
- CSS高级
CSS 教程 | w3cschool
CSS 教程 | w3school
CSS 教程 | 菜鸟教程
以上内容的学习用时10 天左右,再花2 天的时间项目实践,这部分总花费时间在12 天左右。
二、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表单
HTML5 教程 | w3cschool
HTML5 教程 | w3school
HTML5 教程 | 菜鸟教程
CSS3
- CSS3边框
- CSS3背景
- CSS3文本效果
- CSS3字体
- CSS3 2D转换
- CSS3 3D 转换
- CSS3 过渡
- CSS3 动画
- CSS3 多列
CSS3 教程 | w3cschool
CSS3 教程 | w3school
CSS3 教程 | 菜鸟教程
以上内容用时8 天左右,这部分内容是在 HTML+CSS 做的升级改进,只需要了解他们的一些特性即可,再结合这些特性做一些小项目加深学习。
三、Javascript
JavaScript 是至关重要的部分,是 web 开发者必学的三种语言之一,这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言,不论是概念还是设计。
- 认识JavaScript
- 基本语法
- 变量
- 数据类型
- 函数
- 运算符
- 流程控制
- DOM对象
- BOM对象
JavaScript 教程 | w3cschool
JavaScript 教程 | w3school
JavaScript 教程 | 菜鸟教程
JavaScript 教程 | 廖雪峰
以上内容的学习用时一个月左右,这里推荐几本 Javascript 的书籍,如下:
- JavaScript 高级程序设计(第3版)》,俗称红宝书。前七章讲的是语言特性,是重点学习的部分,必须需要反复阅读,直至完全理解为止。DOM、事件流、表单、JSON、Ajax 与最后几章也需要重点学习,这是一些常用的 Web API。至于本书的其余部分大致读一下就可以,不做重点要
- 《JavaScript 语言精粹》,俗称蝴蝶书。很薄的一本书总页数就 147 页,花一天时间就能看完,快的话半天就能看完。这本书虽然很薄,但是承载的内容却非常的丰厚和深入。JavaScript是一门有很多坑的语言,所以这本书”取其精华,去其糟粕“就是精粹了。
- 《你不知道的 JS》非常精彩的一本书,将 JavaScript 的细节一网打尽。
阶段二
这部分内容是对 JavaScript 的补充学习
一、Jquery
- 基础语法
- 选择器
- DOM操作
- 事件
- 动画
- 常用工具
- Ajax
- Jquery插件编写
Jquery 教程 | w3cschool
Jquery 教程 | w3school
Jquery 教程 | 菜鸟教程
Jquery 教程 | 廖雪峰
Jquery 官网
二、其他
- JavaScript 进阶
- DOM+BOM综合演练
- 网页特效
- ES6 进阶
- bootstrap
- animate.css学习
Bootstrap 教程 | w3cschool
Bootstrap 官方文档
Bootstrap 教程 | 菜鸟教程
ES6 教程 | 网道
JavaScript 教程 | 网道
以上内容的学习用时9天左右
阶段三
这部分是框架和前后端交互技术的学习
一、VUE
- Vue基础
- Vuex
- Vue-router
- axios
VUE.js 官方文档
VUE.js 教程 | 菜鸟教程
二、React
- 认识React
- React元素渲染
- JSX
- 组件
- State
- Props
- 事件处理
- 条件渲染
- 列表
- 组件API
- 组件声明周期
React 教程 | w3cschool
React 教程 | 菜鸟教程
React 入门实例教程 | 阮一峰
React 官网教程
三、Node
- 基础console(控制台)
- crypto(加密)
- debugger(调试器)
- fs(文件系统)
- http(网络)
- os(操作系统)
- path(路径)
- 高级
- NPM介绍及使用
- MVC模式简介
- Express框架学习
- 链接Mysql
- 链接Redis
- 项目实战
Node.js 教程 | w3cschool
Node.js 教程 | 菜鸟教程
Node.js 教程| 廖雪峰
Node.js 官网教程
四、webpack
- 概念
- 入口
- 输出
- 模式
- loader
- 插件
- 配置
webpack 教程 | 菜鸟教程
webpack 教程 | 阮一峰
webpack 教程 | 姜瑞涛
webpac 官网教程
以上内容用时 两个月 左右
阶段四
一、Mysql
- 阶段一
- 认识mysql
- 安装mysql
- 创建数据库、数据表学习
- 常用的SQL命令,完成增删查改
- 阶段二
- 学习Mysql关联查询,子查询等
- 学习Mysql常用函数
- 学习Mysql分组、分页、排序等
- 阶段三
- 学习Mysql高级查询
- 了解存储过程,自定义函数等
- 了解Mysql配置文件
MySQL 下载地址
MySQL 教程 | 菜鸟教程
SQL 教程 | 廖雪峰
二、Redis
- 认识Redis
- 学习redis的数据类型
- redis常用操作
- redis事务
Redis 下载地址
Redis 教程 | w3cschool
Redis 教程 | 菜鸟教程
Redis 官网教程
以上内容用时7 天左右
阶段五
一、项目管理篇
- SVN使用
- GIT使用
SVN 教程 | 菜鸟教程
TortoiseSVN
GIT 教程 | w3cschool
GIT 教程 | 菜鸟教程
GIT 教程 | 廖雪峰
GIT 官网
二、扩展部分
小程序
- 了解小程序开发流程
- 视图容器
- 基础内容
- 表单组件
- 导航
- 媒体组件
- 地图(map)
- 画布(canvas)
- 开放能力
apicloud(移动app开发)
- 认识apicloud
- 开发工具讲解
- 端API
- 云API
- 小程序模块使用
三、常用框架使用篇
- iview (vue框架)
- element ui (vue框架)
- echarts (百度图标库)
- 阿里巴巴开源图标
- 使用Sass学习
- Swiper学习
- zoom.js 学习
四、综合项目实战
教务管理系统(node+express+mysql)实现
以上内容学习用时一个月左右
更多推荐
零基础学习前端需要掌握的技术和相关教程
发布评论