# 利用Boostrap在Github Pages快速建立個人履歷網站 (3)實作前端
從本篇開始，將透過實際操作同時講解應有的技術知識。

## 1. 建立程式碼編輯環境，下載VS code
寫網頁，無疑要有個寫的地方，就像是你要寫筆記，也一定要有個筆記本，而撰寫程式的地方就叫做code editor(程式碼編輯器)，因應不同需求、不同程式碼等等，有各式各樣的editor。
> 可以想像成，筆記本有很多類型，有橫條的，讓你能夠輕鬆一行一行的寫字，用途或許是日記等等；抑有全部空白的筆記本，適合做一些圖等等的筆記，雖然沒有一行一行容易寫字的格式，卻讓人有更多空間可以自由發揮，editor也一樣。
>

這邊要介紹的是 **Visual Studio Code**（簡稱VS Code）是一個由微軟開發，同時支援Windows 、 Linux和macOS等操作系統且開放原始碼的程式碼編輯器。


由於本文的閱讀者應該是無基礎的學習者，沒有用過其他編輯器，所以沒什麼好比較，但是在vs code流行以前，我自己使用其他的編輯器，外觀、操作實在是太不"現代"(自己很講究環境的體驗及觀感)，第一次用了vs code後就完全愛上。

總之，VS Code是一個新世代的程式碼編輯器，功能相當強大，外觀漂亮、操作直覺，在擴充插件上更是非常方便，是非常適合拿來寫網頁的編輯器。

知道了大致上VS code是什麼、用來做什麼後，就可以開始下載了。
安裝過程沒什麼，一路點選下一步即可。
https://code.visualstudio.com/Download

安裝好之後直接打開vs code

這邊呢，細節不講，vs code中有我們幾個必須認識的區塊。

下圖的編輯區(Editor)，就是我們之後編輯程式碼的地方，以及側邊欄(Side Bar)，我們只會使用到左上角第一個兩個文件Logo的部分，也就是檔案總管(Explore)，顧名思義，就想是我們點開電腦中的檔案總管一樣，能看到這個專案裡面的組成。

> *圖片來自於: http://blog.tonycube.com/2018/11/visual-studio-code.html*
> 更多vs code功能講解也請自行前往了解
>

## 2. 下載Bootstrap模板，載入vs code中
本文最初介紹中有提到，我們將以修改現有的免費模板作為範例，網路上現在有許多資源都有免費的模板提供下載。這邊拿 https://startbootstrap.com/themes/ 中提供的免費模板為範例。

以 [Start Bootstrap - Freelancer](https://startbootstrap.com/themes/freelancer/) 為例，先下載這個模板。
下載回來是一個zip壓縮檔，解壓縮後進到資料夾內可以發現裡面的架構。

這時回到vs code，點擊左上角 File > Open Folder > 選取剛剛下載回來的模板資料夾，就會看到EXPLOER中出現了模板資料夾裡的所有檔案

> 所有關於Bootstrap操作、控制、排版、切版的方法、步驟、說明，官方文檔裡面都講得非常清楚，熟讀官方文檔就能好好熟悉Bootstrap的所有功能。
> [Bootstrap 英文官方文檔](https://getbootstrap.com/docs/4.1/getting-started/introduction/)
> [Bootstrap 中文官方文檔](https://v4.bootcss.com/docs/getting-started/introduction/)
>

*未完待續*

### 系列文連結
[利用Boostrap在Github Pages快速建立個人履歷網站 (1)HTML、CSS、Javascript簡介](/@qTxKwC5AQiqDJnAMV1oc2w/S1minPtX8)
[利用Bootsrap在Github Pages快速建立個人履歷網站 (2)Bootstrap及其相關概念簡介](/hPdsmw48Q0SPODtNI28_vg)
[利用Boostrap在Github Pages快速建立個人履歷網站 (3)實作前端](/NN1vUAovQN2YQmHaXdy9TA)
[利用Boostrap在Github Pages快速建立個人履歷網站 (4)Github Pages](/SOYZM3qDR1W-ufjei193oA)