> For the complete documentation index, see [llms.txt](https://xinhe.gitbook.io/nutc-lab-frontend-tutorial/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xinhe.gitbook.io/nutc-lab-frontend-tutorial/master.md).

# Introduction

以往研究室的教學文件較零散也不易留傳給學弟妹，希望之後的教學資源皆能夠保存在網路上，

讓我們的Know-how一屆傳承一屆，也分享給更多人一同學習！

## 課程大綱

請參考左側選單。

## 適合對象

1. 學過Dreamweaver，想更進一步入門前台開發者。
2. 曾自己寫過靜態網頁，但對於語言知識 ( e.g. HTML/CSS ) 尚不熟悉、或想學習動態網頁甚至於使用框架開發網頁者。

## 本課程的軟硬體需求

* ~~Windows / Mac 電腦 (廢話)~~
* 程式碼編輯器 ([Sublime Text](https://www.sublimetext.com/3), [VSCode](https://code.visualstudio.com/), [Atom](https://atom.io/)擇一使用)  

*p.s. 目前研究室大家都以VSCode為主，但仍可視個人偏好選擇一項開發工具。*

* Windows 電腦可安裝 [cmder](http://cmder.net/)(具有 Linux 溫度的 Windows 命令提示字元工具)
* [Git](https://git-scm.com/)版本控制工具(之後會請大家交作業都使用Git，養成多人協作使用版控的好習慣哦！)

## 一些hen棒的教學網站＆文件

* [W3Scools](https://www.w3schools.com/)
* [六角學院Bootstrap4繁體手冊](http://bootstrap.hexschool.com/)
* [Code School](https://www.codeschool.com/)
* 各式開發語言的API文件 [DevDocs](https://devdocs.io/)
* [連猴子都能懂得Git入門指南](https://backlog.com/git-tutorial/tw/)
* [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)

## 一些好用的工具

* [Codepen](https://codepen.io/)
* [Octotree - Code tree for GitHub](https://chrome.google.com/webstore/detail/octotree/bkhaagjahfmjljalopjnoealnfndnagc?utm_source=chrome-app-launcher-info-dialog)