---
# System prepended metadata

title: 網頁前端學習筆記

---

# 網頁前端學習筆記

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