---
# System prepended metadata

title: 任務十、觀看簡易切版實戰影片，學習如何建立 proejcts 專案
tags: [Codeshiba]

---

# 任務十、觀看簡易切版實戰影片，學習如何建立 proejcts 專案
###### tags: `Codeshiba`
Project來源: [FreeCodeCamp](https://www.freecodecamp.org/learn/)

Project網站範本: [FreeCodeCamp](https://codepen.io/freeCodeCamp/full/zNqgVx)

先創一個資料夾my_projects，並且進入該資料夾
```
mkdir my_projects
cd my_projects
```

在Github上面再創一個新的Repository
![](https://i.imgur.com/KUNL5Yi.png)


依序輸入下列指令
![](https://i.imgur.com/CL7JZAR.png)

```
echo "# my-projects" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/LeonSiKA/my-projects.git
git push -u origin main
                
```

可以透過`git branch`來觀看現有狀態
並且切換到`gh-pages`這個新的branch

```
git branch
git checkout -b gh-pages
```

用`code .`叫出VS Code，然後用 `Ctrl+Shift+~` 叫出terminal
然後把用git add把檔案加入暫存區
用git status觀看狀態

```
git add index.html
git status
```

暫存後上傳github的檔案
```
git commit -m "add index.html"
git push --set-upstream origin gh-pages
```

然後就可以去Github的branch看我們的網頁
就可以出來了

我的網址:
[我的網址1](https://leonsika.github.io/my-projects/index.html)
[我的網址2](https://leonsika.github.io/my-projects/tribute.html)
```
https://leonsika.github.io/my-projects/index.html
```
![](https://i.imgur.com/FmyWu0b.png)


## 版面分析

可以透過肉眼判斷
![](https://i.imgur.com/N0v4Eix.png)

![](https://i.imgur.com/8Ev0HIj.png)

![](https://i.imgur.com/VmmVyzR.png)

也可以透過開發者工具來評估(Ctrl+Shift+I)
![](https://i.imgur.com/wYSMXUc.png)

## 版面實作
切版順序->先判斷Html有甚麼東西，再用CSS去做美化

### 小訣竅: 兩個可以安裝的套件
在撰寫vs code的時候蠻好用的
![](https://i.imgur.com/99FjnrO.png)

### 網頁成品

[網頁上半部](http://127.0.0.1:5500/tribute.html)
![](https://i.imgur.com/3keo5zg.jpg)
