您的位置: 首页  >  文章  >  转行学习web前端开发，需要哪些工具和需要学习什么？

转行学习web前端开发，需要哪些工具和需要学习什么？

分类: 文章 • 2024-06-26 14:49:28

 

刚开始学习的话开发工具建议是下载VScode，当然主要的还是看自己比较喜欢和习惯用那个下面是一些常用的开发工具，在学习前端之前，先把工具准备好，没有金刚钻怎么揽瓷器活？所以准备了如下的一些开发工具，这里推荐使用VSCode。

1. WebStorm

2. Dreamweaver

3. HbuilderX

4. Sublime Text

5. Vim（高手使用较多）

6. VSCode

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

前端开发工具

二、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样式​www.bilibili.com

 

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

HTML+CSS

三、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 多列

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

HTML5+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前端开发，需要哪些工具和需要学习什么？

javascript

Web前端开发特辑

Web前端技术特辑：BFC讲解_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com转行学习web前端开发，需要哪些工具和需要学习什么？

阶段二

一、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插件编写

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

Jquery


五、ES6进阶

六、Bootstrap

七、其他

  1. animate.css学习（扩展）
  2. PS切图学习

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

JS 相关和其他扩展部分

阶段三

一、Vue

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

2. Vuex

  • State
  • Getter
  • Mutation
  • Action
  • Module

3. Vue-router

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

4. axios

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

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

VUE

二、React

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

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

React

三、Node

  1. 基础
  • console（控制台）
  • crypto（加密）
  • debugger（调试器）
  • fs（文件系统）
  • http（网络）
  • os（操作系统）
  • path（路径）

2. 高级

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

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

Node

四、webpack

  1. 概念

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

2. 入口

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

3. 输出

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

4. 模式

  • development
  • production

5. loader

  • 实例
  • 配置

6. 插件

  • 剖析
  • 用法
  • 配置

7. 配置

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

8. 模块

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

webpack

阶段四（扩展部分，了解即可）

一、Mysql

  1. 阶段一
  • 认识mysql
  • 安装mysql
  • 创建数据库、数据表
  • 学习常用的SQL命令，完成增删查改

2. 阶段二

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

3. 阶段三

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

二、Redis

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

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

数据库

阶段五

一、项目管理篇

  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）实现

思维导图

转行学习web前端开发，需要哪些工具和需要学习什么？

 

小编是个多年开发经验的程序员。如果你想要学好WEB前端，在学习过程中，身边没有一个能够指导你学习的人，可以到这个WEB前端裙，里面最新学习路线和教程，不管是计算机专业想要往WEB前端方向发展，还是零基础想转行，都可以跟着教程学，有什么不懂的可以在里面问，这就是WEB前端裙。前面三个输入112，中间三个输入666，后面三个输入212

相关推荐