# 前端學習roadmap

> 同步整理使用的資源，到時候回頭看可能能實現自我滿足（自嗨？。
> (O) 進行中；(X) 尚未使用；~~(@) 已完成~~；西元年表示完成時間

## HTML & CSS
* ~~(@) 【緯育-實體課程】洪興政/丸子老師_2023~~
* ~~(@) 《零基礎也能看得懂的HTML&CSS網頁設計》Mana_2023~~
* (O) 《超直覺HTML＆CSS網頁設計》小林Masayuki_2023
* (O) 《CSS設計風格指南》高津戶壯_2023

## Javascript
* ~~(@) 【緯育-實體課程】李偉銘、張互賓老師_2023~~
* (O) 《JavaScript 第一次學就上手》陳惠貞_2023
* (O) 《0陷阱！0誤解！8天重新認識 JavaScript！》許國政/Kuro_2023

## RWD & Bootstrap

## Vue
* (X) 《重新認識Vue.js：008天絕對看不完的Vue.js 3指南》許國政/Kuro_2023

## Git
* ~~(@)【緯育-實體課程】黃瀚霆老師~~

## 培養前端腦
* (X)

# Backlog - Books
* (X) 《JavaScript技術手冊》林信良
* (X) 《矽谷思維：矽谷頂尖工程師實戰經驗總結》Han
* (X) 《前端工程化:體系設計與實踐》周俊鵬
* (X) 《前端技術架構與工程》周俊鵬
* (X) 《Clean Code in JavaScript》James Padolsey
* (X) 《Google 的軟體工程之道》Titus Winters, Tom Manshreck, Hyrum Wright
* 查書關鍵字：重構、設計模式(design pattern)、Clean code

# Backlog - Priority 1
* (X) [緯育js教材](https://docs.webmix.cc/javascript-web/10.-can-kao-zi-liao)
* (X) [grid-template 屬性](https://ithelp.ithome.com.tw/articles/10248418)
* (X) [使用grid-area等Grid布局属性轻松实现元素层叠效果](https://www.zhangxinxu.com/wordpress/2021/02/grid-area-absolute-cover/)
* (X) [金魚都能懂的這個網頁畫面怎麼切](https://ithelp.ithome.com.tw/users/20112550/ironman/2623?page=1) - 待消化、整併至筆記
* (X) [金魚都能懂的 CSS 選取器](https://ithelp.ithome.com.tw/users/20112550/ironman/2799) - 待消化、整併至筆記
* (X) [houdunren](https://www.houdunren.com/front/system)
* (X) [CodeLove愛寫扣論壇-專為超新手精心設計的自學課程](https://codelove.tw/courses/contents) - HTML, CSS, RWD, Bootstrap, JavaScript
* (X) [廖雪峰的官方网站](https://www.liaoxuefeng.com/wiki/1022910821149312#0) - JavaScript, Git
* (X) [三体教程](http://www.santii.com/) - 內容全面
* (X) [五個月成為 JavaScript 工程師的完整攻略](https://buzzorange.com/techorange/2018/01/04/learn-coding-in-5-months/) - 待消化、整併至筆記
* (X) [給開發者的 15 份好用 Cheatsheets](https://codelove.tw/@tony/post/n3Vkwa)
* (X) [Vue3使用Compostion API基础知识](https://www.bilibili.com/video/BV1H34y1e7kW/?buvid=caaeb3a514e5e9155d6fd4575ad8bb9c&is_story_h5=false&mid=n%2FVzQfNPt7p7BBjC1vg7Rg%3D%3D&p=1&plat_id=114&share_from=ugc&share_medium=iphone&share_plat=ios&share_session_id=A19CA97B-AF94-4597-9D4E-EFF2099B88E6&share_source=COPY&share_tag=s_i&timestamp=1683622252&unique_k=31A4rpq&up_id=23652375)
* (X) [泰山職訓前端班課程講義](https://rogeraabbccdd.github.io/F2E-book/views/?page=1)

# Backlog - Priority 2
* (X) [2023 推薦練習的專案開發](https://codelove.tw/@tony/post/YqZg7x) - sideproject優先參考
* (X) [Component Party](https://component-party.dev/?fbclid=IwAR1WFcA2_q-8sUhGfeg6aZEjntQMlw4vzZPxdKg8WoH4SEJte802uXVmtoM)
* (X) [元件庫](https://vocus.cc/article/630dc568fd8978000158653f)
* (X) [HTTP狀態碼](https://blog.miniasp.com/post/2009/01/16/Web-developer-should-know-about-HTTP-Status-Code)

###### tags: `frontend` `changecareer` [:arrow_right: Back to Front End Homepage :arrow_left:](/S-c0eqQmS16D8tcTx4ae1g)