摘要：這個問題應該是百度或者知乎都能知道答案的，以上是自己親身學習的一些途徑方便少走一點彎路入門。

基礎的html，css，js，推薦慕課網免費課程:前端工程師路徑,極客學院免費課程:前端工程師路徑 大概刷過就可以了，不用死記硬背某個知識點，css跟js還需要加深學習的，在實戰過程中不懂就去查文檔
基礎的ps切圖能力  慕課網ps基礎課程

擁有自己的虛擬主機 傳送門

學習jq+bootstrapt布局開發基本的網頁功能將項目部署在虛擬主機 教學視頻傳送門 部署教程

犀牛書，javascript高級程序設計,個人比較喜歡紅寶書，通讀了解js各個方面的基礎知識點，例如原型鏈，閉包，this綁定等等...不過我目前也還沒讀完..
css方面：flex，gird等新的布局方式
框架方面:vue,react,ng都可以嘗試著了解一下，框架只是工具，基礎還是要學好js
webpack的基本配置了解一下，npm，yarn的使用
代碼管理：git ，學會使用github 推薦阮一峰老師的git入門

服務器部署linux基礎，搭建自己的ecs服務器，基本命令行掌握 傳送門

計算機網絡的知識，推薦 《http圖解》一書
設計模式方面的知識 《head first 設計模式》
后端的基礎知識node ,php ,mysql,mongodb  慕課網有免費的基礎課程 搭配基礎實戰項目傳送門react+vue+koa+mysql+mongodb

js的底層相關的V8知識
數據結構與算法的基礎知識，這個學校課程可以選修
強類型js typescript學習
等等。。。

這個問題應該是百度也能知道答案的：傳送門

小程序開發入門是非常簡單的，之前我也在部門里分享過付費的小程序開發教程視頻，基本上小程序就是仿造vue的，會用vue就會開發小程序
此外github社區也有很多優秀的框架用于開發小程序，如騰訊的wepy，美團的mpvue，京東的taro
這兩個是之前做的小程序項目demo
一個是搭配視頻教程的電影與閱讀 一個是原生基礎小項目智能快遞柜

這個是mpvue開發的小程序項目 Online畫室

前端需要的原型圖 不應該僅僅只是一些圖片，應該是做圖工具處理過之后，方便前端獲取到原型圖上任何一個位置的樣式的類html圖，并且附帶基本的交互效果，sketch軟件了解一下，pxcook軟件了解一下。

這個其實前后端最好能夠溝通好請求方式get，post，delete等等，個人比較傾向于restful架構api，而且不是說提供接口就是restful api，可能還不符合規范化，每個請求方式要語義化，命名要符合restful架構的要求，有些后端寫接口寫命名都是隨意來的，能用就行，其實這樣是對于前端使用會造成一定的理解問題的，建議前后端都了解下 傳送門

這個問題比較廣泛，是說前端開發的工具嗎？
編輯器可以考慮sublimetext3 ide可以考慮vscode，webstorm，atom
服務器ssh遠程登錄推薦 xshell5
后端mysql圖形化軟件使用Navicat for Mysql

mongodb圖形化使用Robo 3T
php使用wampserver集成
思維導圖神器 Xmind
Cmd Markdown 編輯器
PxCook 原型圖量取
Mockplus 產品經理神器
git 使用GitBash

首先對著官網文檔新手入門過一遍
其次基礎語法練習來過一遍 項目素材傳送門 對應教學視頻鏈接

其次根據視頻教程進行todoList demo編寫慢慢過渡，使用vue-cli腳手架進行工程化開發，發現vue-cli配置一臉懵逼
熟悉vue-cli腳手架的基本配置，做到自己能夠調配置搭配其他例如sass，flexiable方案使用，傳送門

基本過完就是vue語法，vue-cli基本配置熟悉了，那么接下來就要進入實戰學以致用，實戰付費視頻資源之前有分享在部門群里面，其他的基礎實戰項目在這里實戰項目傳送門react+vue+koa+mysql+mongodb，基本掌握后就可以進行使用vue獨立開發了

問題到這里結束了，希望閱讀的給為大佬對于有幫助的github項目能夠給小弟star一下，積累不易，謝謝支持~