---
# System prepended metadata

title: 給新手的網頁入門

---

給新手的網頁入門
===

這邊有一個很有名的 roadmap 網站，可以參考看看 https://roadmap.sh/
網站內有 Frontend or Backend 就是在講前後端的學習路線，
也有初學者的路線 https://roadmap.sh/frontend?r=frontend-beginner

目前有一些比較知名的學院可以學習：
1. ALPHA Camp https://tw.alphacamp.co/
2. 六角學院 https://www.hexschool.com/


線上平台
1. freecodecamp https://www.youtube.com/@freecodecamp
2. Udemy https://www.udemy.com/
3. Udacity https://www.udacity.com/

| HTML | CSS | Javascript |
| -------- | -------- | -------- |
| HTML5   | CSS3/選一個框架 [tailwindcss](https://tailwindcss.com/)、Sass(BEM命名)     | React、Vue、Angular.js     |
| 語意化   | Layout：[flexbox](https://codepip.com/games/flexbox-froggy/)、[grid](https://flexboxfroggy.com/)、[grid產生器](https://cssgrid-generator.netlify.app/)   |  [DOM](https://domevents.dev/) 認識/操控  |
| | https://web.dev/one-line-layouts/   |    |
| | https://zh-tw.learnlayout.com/display.html   |    |
| | https://cssreference.io/   |    |






| DOCS |
| -------- | 
| [前端九部文件](https://www.yuque.com/fe9)     | 


| 線上練習/Demo用 |
| -------- | 
| [codepen](https://codepen.io/pen/)     | 


| 資源 | |
| --------|--------|
| 各種外掛特效V1 | [freefrontend](https://freefrontend.com/)|
| 各種外掛特效V2 | [saruwakakun](https://saruwakakun.com/)|
| Google免費提供的網站、APP相關服務 | [firebase](https://firebase.google.com/)|
| 各種設計資源| [李介介](https://docs.google.com/spreadsheets/u/1/d/1c83LfsUn6uylNwKHqHpD32xZ68ZDFaCG5alkXRmU94g/htmlview?pli=1&usp=gmail)|


| 我能使用這個新的語法嗎 |
| -------- | 
| [caniuse](https://caniuse.com/)     | 


| 網頁參考 |
| -------- | 
| http://www.zzrock.net/   | 
| http://bm.straightline.jp/   | 
| http://4db.cc/  | 
| https://1guu.jp/   | 
| https://webdesignclip.com/   | 
| https://muuuuu.org/   | 
| https://rdlp.jp/lp-archive/   | 







