# 網頁前端學習筆記

Inspired by Huli's[《紮實的網頁前端學習路線與資源推薦》](https://medium.com/@hulitw/front-end-learning-path-55201571ecfe).

## Command Line 的使用

### 學習理由

1. 從圖形使用者介面 (Graphic User Interface, GUI) 切換到命令列介面 (Command Line Interface, CLI)。
2. 程式開發裡很多工具都沒有提供圖形介面，你只能使用指令（Command line）去操作。

> 寫程式的本質跟使用 Command line 是一樣的：利用指令與電腦溝通。

### 其他資源
[[CS101] 初心者的計概與 coding 火球術](https://lidemy.com/courses/389485)
[Command Line 新新手入門 為什麼要學習 Command Line + Mac 版操作](https://youtu.be/VIeim7f8rUE)
[Command Line 常用指令介紹](https://youtu.be/I6wvQhuxjEY)
[Getting to Know the Command Line](https://www.davidbaumgold.com/tutorials/command-line/)

### 常用指令
| Command | Notes |
| -------------- | --------------------------------------- |
| ls | list the files in the current directory |
| cd | change to home directory |
| cd . . | change to parent directory |
| cd *Documents* | change to *Documents* sub-folder |
| pwd | print working directory |
| touch | create a new file |
| mkdir | make a new directory |
| rm | remove a file |
| cp | copy |
| mv | rename or move files |
| clear | clear the text shown on terminal |
| cat | concatenate, create single or multiple files, view contain of file, concatenate files and redirect output in terminal or files. |
| less | |
| grep | |
| echo | |
| \| | |
| > | |

## Git 的使用

### 學習目標
1. 學習 Git 基本概念：什麼是 repository、什麼是 commit、什麼是 staged…
2. 學會使用 add、commit、status、log 等基本指令
3. 搞清楚 Git 與 GitHub 的差別並學會 push、pull、clone、fetch
4. 學會使用 branch 與 checkout

如果要學 branch 的使用，誠心推薦 [Learn Git Branching](https://learngitbranching.js.org/index.html)。

### 資源
[為你自己學 Git](https://gitbook.tw/chapters/introduction/about-this-book.html)

### 常用指令

| Command | Notes |
| ------------- | ------------------------------ |
| git init | make folder a local repository |
| git status | to see the status of each file |
| git add -p | |
| git commit -m | |
| git push | |
| git log | |

未完成，先跳過。

## npm、Node.js 與 JavaScript 程式基礎
[The Modern JavaScript Tutorial](https://javascript.info/)

## Tips
CSS Reset
\<img> 3px bug solution: display:block