• 零基础怎么学习前端


    前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程,通过 HTML,CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案,来实现互联网产品的用户界面交互。它从网页制作演变而来,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是 Web1.0 时代的产物,早期网站主要内容都是静态,以图片和文字为主,用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、CSS3的应用,现代网页更加美观,交互效果显著,功能更加强大。

    移动互联网带来了大量高性能的移动终端设备以及快速的无线网络、HTML5、node.js 的广泛应用,各类框架类库层出不穷。

    随着时代的发展,前端开发也越来越受到大家的欢迎,其中不乏转行来做前端开发的,通过与这些人的接触发现,很多人在入行前或多或少的存在顾虑。那么转行来做前端到底可以走多远,转行来做前端会不会为时已晚?我们可以看看这个视频:Web前端技术精讲:转行做编程必看视频

    在开始我们的教程之前,先让我们来了解一下 Web 前端技术,看一个视频让我们快速的了解web 开发:Web前端技术精讲:零基础学习web前端必看

    根据我长期的总结并结合时下的技术栈,我把前端的学习大致分为如下五个阶段,以及罗列了各个阶段需要掌握的知识点。

    阶段一

    一、常用开发工具介绍

    在学习前端之前,我们先把工具准备好,没有金刚钻怎么揽瓷器活?所以准备了如下的一些开发工具,这里推荐使用 VSCode。
    1. WebStorm
    2. Dreamweaver
    3. HbuilderX
    4. Sublime Text
    5. Vim(高手使用较多)
    6. VSCode

    思维导图

    二、HTML+CSS 部分

    HTML

    掌握 HTML 是网页的核心,是一种制作万维网页面的标准语言,是万维网浏览器使用的一种语言,它消除了不同计算机之间信息交流的障碍。因此,它是网络上应用最为广泛的语言,也是构成网页文档的主要语言,学好 HTML 是成为 Web 开发人员的基本条件。

    HTML 是一种标记语言,能够实现 Web 页面并在浏览器中显示。

    HTML 需要掌握的知识点如下所示:

    1. 属性
    2. 事件
    3. 标签
    4. 字符集

    CSS

    学好 CSS 是网页外观的重要一点,CSS 可以帮助把网页外观做得更加美观。CSS 需要我们学习如下部分:

    1. CSS基础教程

    2. CSS样式

    • 背景
    • 文本
    • 字体
    • 链接
    • 列表
    • 表格
    • 轮廓

    3. CSS框模型

    • 内边距
    • 边框
    • 外边距

    4. CSS定位

    • 相对定位
    • 绝对定位
    • 浮动

    5. CSS选择器

    • 元素选择器
    • 选择器分组
    • 类选择器
    • ID选择器
    • 属性选择器
    • 后代选择器
    • 子元素选择器
    • 相邻兄弟选择器
    • 伪类
    • 伪元素

    6. CSS高级

    • 对齐
    • 尺寸
    • 分类
    • 导航栏
    • 图片库
    • 图片透明
    • 盒子模型
    • 媒体布局

     web 前端开发特辑

    Web前端技术特辑:HTML样式

    思维导图

    三、HTML5+CSS3

    HTML5

    HTML5 作为 HTML 的最新版本,引入了多项新技术,大大增强了对于应用的支持能力,使得Web技术不再局限于呈现网页内容。

    1. HTML5视频
    2. HTML5音频
    3. HTML5拖放
    4. HTML5画布
    5. HTML5 SVG
    6. HTML5地理定位
    7. HTML5 Web存储
    8. HTML5 应用缓存
    9. HTML5表单

    HTML5 可以使开发者的工作大大简化,理论上单次开发就可以在不同平台借助浏览器运行,降低开发的成本,这也是产业界普遍认为 HTML5 技术的主要优点之一。

    CSS3

    CSS3使用了层叠样式表技术,可以对网页布局、字体、颜色、背景灯效果做出控制。css3作为css的进阶版,拆分和增加了盒子模型、列表模块、语言模块 、背景边框 、文字特效 、多栏布局等等。

    CSS3的改变有很多,增加了文字特效,丰富了下划线样式,加入了圈重点的功能。在边框方面,有了更多的灵活性,可以更加轻松地操控渐变效果和动态效果等等。在文字效果方面,特意增加了投影。

    CSS3在兼容上做了很大的功夫,并且网络浏览器也还将继续支持CSS2,因此原来的代码不需要做太多的改变,只会变得更加地轻松。

    1. CSS3边框
    2. CSS3背景
    3. CSS3文本效果
    4. CSS3字体
    5. CSS3 2D转换
    6. CSS3 3D 转换
    7. CSS3 过渡
    8. CSS3 动画
    9. CSS3 多列

    思维导图

    四、JavaScript

    JavaScript 是 web 开发者必学的三种语言之一,这里我们需要区别 JavaScript 和 Java 他们是完全不同的语言,不论是概念还是设计。javascript 部分需要我们学习的知识点如下所示:

    1. 认识JavaScript
    2. 基本语法
    3. 变量
    4. 数据类型
    • 字符串
    • 数字
    • 布尔
    • 数组
    • 对象
    • Null
    • Undefined

    5. 函数

    • 内置函数
    • 自定义哈数

    6. 运算符

    7. 流程控制

    8. DOM对象

    • String
    • Array
    • Date
    • Boolean
    • Math
    • Number

    9. BOM对象

    • WIndow
    • Navigator
    • Screen
    • History
    • Location

    10. 综合实例

    思维导图

     

    Web前端技术特辑:BFC讲解

    阶段二

    一、JavaScript进阶

    JS 进阶主要学习构造函数,原型对象,继承的多种实现方式,原型链,函数的本质,闭包,沙箱等。

    二、DOM+BOM综合演练

    三、网页特效

    四、 Jquery学习

    1. 基础语法
    2. 选择器

    • 基本选择器
    • 层次选择器
    • 过滤选择器
    • 表单选择器

    3. DOM操作

    • 查找节点
    • 创建节点
    • 插入节点
    • 删除节点
    • 复制节点
    • 替换节点
    • 包裹节点
    • 属性操作
    • 样式操作

    4. 事件

    • 事件绑定
    • 事件冒泡

    5. 动画

    • show、hide
    • fadeIn、fadeOut
    • slideUp、slideDown
    • 自定义动画animate
    • 动画回调以及停止动画

    6. 常用工具

    • 浏览器及特性检测
    • 数组和对象操作
    • Layer UI,主要学习栅格布局,图标,动画,按钮,表单,导航,选项卡,进度条,面板,表格,时间线等

    7. Ajax

    8. Jquery插件编写

    思维导图

    五、ES6进阶

    六、Bootstrap

    七、其他

    1. animate.css学习(扩展)
    2. PS切图学习

    思维导图

    阶段三

    一、Vue

    1. Vue基础
    • 模版语法
    • 计算属性侦听器
    • Class与Style绑定
    • 条件/列表渲染
    • 事件处理
    • 表单输入绑定
    • 组件基础、注册
    • Prop
    • 自定义事件

    2. Vuex

    • State
    • Getter
    • Mutation
    • Action
    • Module

    3. Vue-router

    • 认识路由
    • 动态路由
    • 嵌套路由
    • 编程式导航
    • 路由组件传参

    4. axios

    • 认识axios
    • 全局配置
    • 发送POST、GET请求等

    思维导图

    二、React

    1. 认识React
    2. React元素渲染
    3. JSX
    4. 组件
    5. State
    6. Props
    7. 事件处理
    8. 条件渲染
    9. 列表
    10. 组件API
    11. 组件声明周期

    思维导图

    三、Node

    1. 基础

    • console(控制台)
    • crypto(加密)
    • debugger(调试器)
    • fs(文件系统)
    • http(网络)
    • os(操作系统)
    • path(路径)

    2. 高级

    • NPM介绍及使用
    • MVC模式简介
    • Express框架学习
    • 链接Mysql
    • 链接Redis
    • 项目实战

    思维导图

    四、webpack

    1. 概念

    主要讲什么是入口,出口,loader,插件等

    2. 入口

    • 单个入口语法
    • 对象语法
    • 常见场景

    3. 输出

    • 用法
    • 多个入口起点
    • 高级进阶

    4. 模式

    • development
    • production

    5. loader

    • 实例
    • 配置

    6. 插件

    • 剖析
    • 用法
    • 配置

    7. 配置

    • 基本配置
    • 多个Target
    • 使用其他语言配置

    8. 模块

    思维导图

    阶段四(扩展部分,了解即可)

    一、Mysql

    1. 阶段一

    • 认识mysql
    • 安装mysql
    • 创建数据库、数据表
    • 学习常用的SQL命令,完成增删查改

    2. 阶段二

    • 学习Mysql关联查询,子查询等
    • 学习Mysql常用函数
    • 学习Mysql分组、分页、排序等

    3. 阶段三

    • 学习Mysql高级查询
    • 了解存储过程,自定义函数等
    • 了解Mysql配置文件

    二、Redis

    1. 认识Redis
    2. 学习redis的数据类型
    3. redis常用操作
    4. redis事务

    思维导图

    阶段五

    一、项目管理篇

    1. SVN使用

    • 认识svn
    • 安装
    • 生命周期
    • 启动模式
    • 创建版本库
    • 检出操作
    • 解决冲突
    • 提交操作
    • 版本回退
    • 查看历史
    • 分支
    • 标签


    2. GIT使用

    • 认识git
    • 安装配置
    • 工作流程
    • 工作区、暂存区和版本库
    • 创建仓库
    • 基本操作
    • 分支管理
    • 查看历史等
    • 标签
    • github

    二、扩展部分

    小程序

    1. 了解小程序开发流程

    2. 视图容器

    • view
    • scroll-view
    • movable-view
    • cover-view
    • cover-image

    3. 基础内容

    • icon
    • text
    • rich-text
    • progress

    4. 表单组件

    • button
    • checkbox
    • form
    • input
    • label
    • picker
    • picker-view
    • radio
    • slider
    • switch
    • textarea

    5. 导航

    • navigator
    • function-page-navigator

    6. 媒体组件

    • audio
    • image
    • video
    • camera
    • live-player
    • live-pusher

    7. 地图(map)

    8. 画布(canvas)

    9. 开放能力

    • open-data
    • web-view
    • ad
    • official-account

    apicloud(移动app开发)

    1. 认识apicloud

    2. 开发工具讲解

    3. 端API

    • API对象
    • 设备访问
    • 功能扩展
    • 界面布局
    • 导航菜单
    • 小程序模块
    • 云服务对接

    4. 云API

    • 数据云API
    • 统计云API
    • 推送云API
    • 云API SDK

    5. 小程序模块使用

    三、常用框架使用篇

    1. iview (vue框架)
    2. element ui (vue框架)
    3. echarts (百度图标库)
    4. 阿里巴巴开源图标使用
    5. Sass学习
    6. Swiper学习
    7. zoom.js 学习

    四、综合项目实战

    教务管理系统(node+express+mysql)实现

    思维导图

  • 相关阅读:
    Linux下视频采集及其显示
    编译webcam_server
    mjpgstreamer
    linux下ffmpeg的安装
    armlinuxgcc的命令参数介绍
    ADS1.2如何生成BIN文件
    OpenJTAG下载bootloader 备忘
    Android 3.0 以下 使用Fragment 实例
    Dialog 学习备忘
    CentOS安装wsgi
  • 原文地址:https://www.cnblogs.com/xzsj/p/xzsj-web-front.html
Copyright © 2020-2023  润新知