---
# System prepended metadata

title: 前端入門(完全小白)

---

**[HACKMD](https://markdown.tw/)**

---

你需要的工具
---
*    文本編輯器
[vscode](https://www.bing.com/search?q=vscode&cvid=29f56d2cf7d74f7c90aa1fb808d77e24&aqs=edge..69i57j0l8.2840j0j1&pglt=43&FORM=ANNTA1&PC=ASTS)
[sublime text](https://www.bing.com/search?q=sublime+text&cvid=9370ff06db264a3893d7c4347fb12bff&aqs=edge.0.0l9.1252j0j4&FORM=ANAB01&PC=ASTS)
*    線上編輯器
[codepen](https://codepen.io/pen/)
[codesandbox](https://codesandbox.io/)



前端入門(完全小白)
===
目錄(content)
[TOC]

友善連結：
---
1. [W3school](https://www.w3schools.com/)
2. [MDN](https://developer.mozilla.org/zh-CN/)
*<font face="新細明體">附註：以上兩個為熱門自學資源</font>*

Html 入門
---
1. [連結](https://hackmd.io/hhFHBR6_QGC9vZ3DAfPZeg)

Css 入門
---
1. [連結](https://hackmd.io/w824JOP8T26FcwgpB_g6yQ)

Javascript 入門
---
1. [連結](https://hackmd.io/V4NJ5v9aSU-5NpxKb9G4-w)

*歡迎貼上其他資源*


攀上顛峰(進階)
===

前端javascript框架
---

1. [React](https://www.youtube.com/watch?v=Uz_EhDwUnRg&list=PLmOn9nNkQxJFJXLvkNsGsoCUxJLqyLGxu)
2. [Angular](https://www.youtube.com/watch?v=EiDewOIGLfc&list=PLwDQt7s1o9J4b2zjOo3flmVFOqEV0H1Pz&ab_channel=%E5%8D%83%E9%94%8B%E6%95%99%E8%82%B2)
3. [Vue](https://www.youtube.com/watch?v=MwuOyaOd_ZQ&list=PLwDQt7s1o9J57JQNXG7UooKI3Kpzw9fkj&ab_channel=%E5%8D%83%E9%94%8B%E6%95%99%E8%82%B2)
*<font face="新細明體">附註：以上皆為youtube關鍵字熱門影片</font>*
4. [Svelte](https://www.youtube.com/watch?v=wxzv-srfqaE&list=PLC9kTpqIk-ELVLkli3knLTmaAWLwcaInG&ab_channel=%E6%84%B7%E9%96%8B%E5%AF%AB%E7%A8%8B%E5%BC%8F%2FKalanCoding)
5. [Jquery](https://hackmd.io/w824JOP8T26FcwgpB_g6yQ)

Css 框架(framework)
---

1. [bootstrap](https://www.youtube.com/watch?v=YX6KZIcUeY8&list=PLqivELodHt3jq3oWBZfdhMu0GE7774HBW&ab_channel=CSScoke)
2. [tailwind](https://tailwindcss.com/)
3. [bulma](https://bulma.io/)
4. 待增加

### 後端的世界
php
asp.net
nodejs
spring
django flask

未來展望
===
1. [實體聚會]()
有人有興趣留言一下
    `