零基礎也能看懂

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

轉職成功不再是夢！

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

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

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

我知道你想要的是：

✅ 有效的學習方法

✅ 實戰專案經驗

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

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

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

<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>