零基礎也能看懂

不說廢話、只講重點,專注最有效的學習方法

轉職成功不再是夢!

你是否曾經迷茫於學習前端的路上,不知道從哪裡開始?

你是否曾經浪費大量時間學習,卻始終無法突破?

這本書將帶領你走過我教學員的成功實戰經驗和實務方式,幫助你從零基礎開始,一步一步成為前端工程師,成功進入職場。

我知道你想要的是:

有效的學習方法

實戰專案經驗

設計出自己的作品集與面試技巧

精簡高效的學習內容,快速達成目標

這本書沒有廢話,只針對重點來延伸知識,讓你掌握最快、最直接的前端轉職路徑。

<aside> <img src="/icons/list_blue.svg" alt="/icons/list_blue.svg" width="40px" />

前言


<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第零章|成為前端工程師前的準備


0基礎也能懂的前端學習地圖

安裝必備工具

調適工具介紹: Chrome DevTools

(試看)常用終端機指令

</aside>

<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第一章|建立前端的基礎技能: 切版能力


HTML、CSS 基本介紹

HTML前端知識點

CSS基礎知識點

目標: 完成簡易商品卡

CSS 進階知識點

目標: 完成進階商品卡

切版訓練實作知識點

階段目標: 專案作品一頁式網頁首頁

</aside>

<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第二章|從靜態到互動:JavaScript 打造互動網頁的第一步


(試看)JS文件的引入及學習方式

(試看)JS基礎觀念及語法

目標:JS基礎觀念練習

(試看)你必須要知道的ES6關鍵語法

(試看)JS數據類型函式庫整理及解析

目標:JS函式庫操作練習

(試看)就這差一步,我們就可以操作網頁: DOM

目標:To-do List

(試看)破解非同步語法

(試看)API串接

階段目標:To-do List(串接API)

</aside>

<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第三章|解鎖前端框架:Vue / React 快速入門


框架對照表(Vue / React)

React快速入門

目標:To-do List(React)

Vue快速入門

目標:To-do List(Vue)

</aside>

<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第四章|打造你的第一個前端專案


專案設計

專案建置(React)

專案建置(Vue3)

專案常用實作

</aside>

<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第五章|撰寫技術履歷


技術履歷的架構

撰寫求職信

投遞履歷的心態

可直接修改的履歷 Notion 模板

</aside>

<aside> <img src="/icons/flag-pennant_blue.svg" alt="/icons/flag-pennant_blue.svg" width="40px" />

第六章|面試實戰攻略(自我介紹、專案說明、面試考古題)


面試自我介紹模板

專案介紹說明模板

HTML、CSS常見面試題

JS常見面試題

React常見面試題

Vue常見面試題

</aside>

<aside> <img src="/icons/suit-heart_blue.svg" alt="/icons/suit-heart_blue.svg" width="40px" />

如果你還需要更多的幫助…


如何進一步與我學習呢?

</aside>