# 任務十、觀看簡易切版實戰影片，學習如何建立 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

依序輸入下列指令

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


## 版面分析

可以透過肉眼判斷



也可以透過開發者工具來評估(Ctrl+Shift+I)

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

### 小訣竅: 兩個可以安裝的套件
在撰寫vs code的時候蠻好用的

### 網頁成品

[網頁上半部](http://127.0.0.1:5500/tribute.html)