为期四周的前端新人培训计划（一）

时间：2023-04-18 14:18:02 | 来源：网站运营

时间：2023-04-18 14:18:02 来源：网站运营

为期四周的前端新人培训计划（一）：

概述

旧项目结束，又快要过年了，中间有几个月的空闲时间，被leader安排对前端新人的培训教育工作，自己也刚毕业不久担此任务也有些压力，准备了一个月左右的课程，先将计划分享给大家，涉及的知识点比较杂乱，如碰见类似的情况可根据公司内的具体安排改变侧重点开展培训工作，之后的效果等等未来也会新开文章进行说明。

本次培训为期四周，旨在提高短期javaweb经验的开发者的前端方面能力知识，对目前主流前端工具有一定了解并可在之后胜任基础画面的开发工作，培训大致分为三个部分，前端基础复习、基础画面实战、前端新技术上手、其中基础画面项目为tablet的静态画面搭建，在之后复用时可根据具体近期的项目需求进行相关的调整。

目标

• 巩固前端基础，熟悉es6语法、h5相关特性
• 较熟练使用jquery，能对dom进行常用操作
• 了解常用前端开发资料网站，在处理问题时能快速定位并找到解决方法（w3c mdn Stack Overflow）
• 对目前流行框架，npm包管理工具有一定印象并可按照资料搭建前端框架的开发环境
• 可独立分析项目目录结构，分析其使用技术并使用相关工具完成单个画面的开发工作。

培训计划

第一周 js html css jquery

Day1 Day2 Day3 html语法复习&js语言学习

• 讲解开发常用前端常用网站&使用方法
• w3c(html学习) [http://www.w3school.com.cn/]
• 廖雪峰（javascript学习） [https://www.liaoxuefeng.com/]
• mdn（文档查阅）[https://developer.mozilla.org/zh-CN/]
• github（源码分享）[https://github.com/]
• codepen（式样查找）[https://codepen.io/]
• Stack Overflow（开发问答） [https://stackoverflow.com/]
• segmentfault（开发问答）[https://segmentfault.com/]

• 复习语法
• w3school html基础教程
• w3school html5基础教程
• w3school css基础教程
• w3school css3基础教程
• w3school TCP/IP基础教程
• 廖雪峰 JavaScript教程

Day4 Day5

• 介绍 vscode
• chrome调试工具介绍
• web server for chrome使用
• 使用Jquery实现如下网页（实现小型demo）：
• 生成n*n个格子 每个格子里面显示一个数字，从1到n2为止
• 当点击每个格子的时候，都用console.log打印出当前格子的数字。
• 更多要求
• css使用flexbox
• js使用event delegation
• 实现2048小游戏

第二周 tablet静态画面新规

Day1

• tablet本地静态开发环境配置

Day2

• 学习阅读日文设计书
• 熟悉相关文档

Day3 Day4 Day5

• 编写tablet静态画面(实际开发简单画面)
• 实现基本布局
• 自行寻找素材
• 实现画面的打开与关闭
• 完成文字展开合起操作
• 参照既存写法整理代码和注释

• 更多要求
• 使用swiper.js完成画面滑动功能

第三周 完成画面 前端新技术上手

Day1 Day2 Day3

• 继续完成静态页面开发

Day4 Day5

• 阅读编码规范 [https://github.com/ecomfe/spec]
• 项目代码整理重构
• 胡乱的代码缩进
• 毫无章法的属性顺序
• 满页的div
• 不停地写id和class

第四周 新技术介绍 vue angular 常用框架入门

Day1 Day2

• node.js bootstramp 响应式布局介绍
• 廖雪峰 [https://www.liaoxuefeng.com]
• 安装 Node.js和npm
• 第一个node程序
• 搭建Node开发环境

Day3 Day4

• angular [https://angular.cn/tutorial] 完成英雄编辑器
• vue 完成环境配置

Day5

• 前端新框架技术介绍
• pwa
• webpack
• angular
• vue
• react
• react native
• vue weex

培训要点

• 说明每个技术干什么用 写起来是什么样
• 演示如何查资料 读文档 介绍常用网站
• es6新语法特性说明 全程使用es6进行示例代码的编写
• npm webpack是什么 为什么现在前端都在用这个
• 每周安排固定的编码任务

结语

你需要非常了解JavaScript这门语言
你需要非常了解前端常用的网络及后端知识
你需要学习使用进阶的css
你需要非常了解前端的模块化规范
你需要熟悉Git与Shell的使用
你需要熟悉并且习惯使用Node
你需要了解HTML5的新API
。。。。。。。。。。。。。。
你需要具备很强的自学能力、对技术有热情并且不断跟进
计算机从业者可谓是最自由的行业
从事这个行业不应抱着混口饭吃的心态，否则会很快被淘汰
我是为了我的自由和骄傲而从事这个行业
参考：
设计师如何学习前端？ – 黄玄的回答 – 本站
https://www.zhihu.com/question/21921588/answer/69680480