###### tags: `tutorial`
# 前端基礎教學
## 一、事前電腦環境準備
請幫我安裝以及註冊以下軟體（有空順便查一下他們是幹嘛的）
1. [Node.js](https://nodejs.org/en/)
2. [VS code](https://code.visualstudio.com/download)<--IDE
3. [Snipaste](https://zh.snipaste.com/download.html)
4. [Codepen](https://codepen.io/trending)<--Online IDE
5. [Git bash](https://gitforwindows.org/) <-- Version Control
6. 終端機（Terminal）<--每台電腦都一定會有的東西
7. Google Developer Tools <--非常重要的工具
## 二、前端（Fontend）以及後端（Backend）介紹
架構上的定議：
## 三、前端介紹 HTML/CSS/JavaScript
* [HTML](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/HTML_basics)
* [CSS](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/CSS_basics)
* [JavaScript](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
## 四、試試看
兩種方式
1. 文件內使用
2. 連結文件使用
https://codepen.io/chenxuanzzy/pen/XWKxMgW

## 五、你的好工具
1. [ws3schools](https://www.w3schools.com/)
2. [MDN](https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web)