為期四周的前端新人培訓計劃（一）

時間：2023-04-18 14:18:02 | 來源：網(wǎng)站運營

時間：2023-04-18 14:18:02 來源：網(wǎng)站運營

為期四周的前端新人培訓計劃（一）：

概述

舊項目結束，又快要過年了，中間有幾個月的空閑時間，被leader安排對前端新人的培訓教育工作，自己也剛畢業(yè)不久擔此任務也有些壓力，準備了一個月左右的課程，先將計劃分享給大家，涉及的知識點比較雜亂，如碰見類似的情況可根據(jù)公司內的具體安排改變側重點開展培訓工作，之后的效果等等未來也會新開文章進行說明。

本次培訓為期四周，旨在提高短期javaweb經(jīng)驗的開發(fā)者的前端方面能力知識，對目前主流前端工具有一定了解并可在之后勝任基礎畫面的開發(fā)工作，培訓大致分為三個部分，前端基礎復習、基礎畫面實戰(zhàn)、前端新技術上手、其中基礎畫面項目為tablet的靜態(tài)畫面搭建，在之后復用時可根據(jù)具體近期的項目需求進行相關的調整。

目標

• 鞏固前端基礎，熟悉es6語法、h5相關特性
• 較熟練使用jquery，能對dom進行常用操作
• 了解常用前端開發(fā)資料網(wǎng)站，在處理問題時能快速定位并找到解決方法（w3c mdn Stack Overflow）
• 對目前流行框架，npm包管理工具有一定印象并可按照資料搭建前端框架的開發(fā)環(huán)境
• 可獨立分析項目目錄結構，分析其使用技術并使用相關工具完成單個畫面的開發(fā)工作。

培訓計劃

第一周 js html css jquery

Day1 Day2 Day3 html語法復習&js語言學習

• 講解開發(fā)常用前端常用網(wǎng)站&使用方法
• 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（開發(fā)問答） [https://stackoverflow.com/]
• segmentfault（開發(fā)問答）[https://segmentfault.com/]

• 復習語法
• w3school html基礎教程
• w3school html5基礎教程
• w3school css基礎教程
• w3school css3基礎教程
• w3school TCP/IP基礎教程
• 廖雪峰 JavaScript教程

Day4 Day5

• 介紹 vscode
• chrome調試工具介紹
• web server for chrome使用
• 使用Jquery實現(xiàn)如下網(wǎng)頁（實現(xiàn)小型demo）：
• 生成n*n個格子 每個格子里面顯示一個數(shù)字，從1到n2為止
• 當點擊每個格子的時候，都用console.log打印出當前格子的數(shù)字。
• 更多要求
• css使用flexbox
• js使用event delegation
• 實現(xiàn)2048小游戲

第二周 tablet靜態(tài)畫面新規(guī)

Day1

• tablet本地靜態(tài)開發(fā)環(huán)境配置

Day2

• 學習閱讀日文設計書
• 熟悉相關文檔

Day3 Day4 Day5

• 編寫tablet靜態(tài)畫面(實際開發(fā)簡單畫面)
• 實現(xiàn)基本布局
• 自行尋找素材
• 實現(xiàn)畫面的打開與關閉
• 完成文字展開合起操作
• 參照既存寫法整理代碼和注釋

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

第三周 完成畫面 前端新技術上手

Day1 Day2 Day3

• 繼續(xù)完成靜態(tài)頁面開發(fā)

Day4 Day5

• 閱讀編碼規(guī)范 [https://github.com/ecomfe/spec]
• 項目代碼整理重構
• 胡亂的代碼縮進
• 毫無章法的屬性順序
• 滿頁的div
• 不停地寫id和class

第四周 新技術介紹 vue angular 常用框架入門

Day1 Day2

• node.js bootstramp 響應式布局介紹
• 廖雪峰 [https://www.liaoxuefeng.com]
• 安裝 Node.js和npm
• 第一個node程序
• 搭建Node開發(fā)環(huán)境

Day3 Day4

• angular [https://angular.cn/tutorial] 完成英雄編輯器
• vue 完成環(huán)境配置

Day5

• 前端新框架技術介紹
• pwa
• webpack
• angular
• vue
• react
• react native
• vue weex

培訓要點

• 說明每個技術干什么用 寫起來是什么樣
• 演示如何查資料 讀文檔 介紹常用網(wǎng)站
• es6新語法特性說明 全程使用es6進行示例代碼的編寫
• npm webpack是什么 為什么現(xiàn)在前端都在用這個
• 每周安排固定的編碼任務

結語

你需要非常了解JavaScript這門語言
你需要非常了解前端常用的網(wǎng)絡及后端知識
你需要學習使用進階的css
你需要非常了解前端的模塊化規(guī)范
你需要熟悉Git與Shell的使用
你需要熟悉并且習慣使用Node
你需要了解HTML5的新API
。。。。。。。。。。。。。。
你需要具備很強的自學能力、對技術有熱情并且不斷跟進
計算機從業(yè)者可謂是最自由的行業(yè)
從事這個行業(yè)不應抱著混口飯吃的心態(tài)，否則會很快被淘汰
我是為了我的自由和驕傲而從事這個行業(yè)
參考：
設計師如何學習前端？ – 黃玄的回答 – 本站
https://www.zhihu.com/question/21921588/answer/69680480