# CSS 課程前導

### 適合對象

對網頁切版有興趣的任何人皆可參與。

### 準備工具

* 準備一台電腦，不論是什麼系統。
* 這台電腦必須連上對外網路。
* 確定電腦內有最新的瀏覽器應用程式。

{% hint style="info" %}
以上我想您已經有了，不然您應該無法看到這個畫面：）。
{% endhint %}

* 申請 [Codepen](https://codepen.io/accounts/signup/user/free) 帳號，以便隨時隨地線上練習，並即時觀看成果。
* 申請 [imgur](https://imgur.com/) 帳號，以便上傳圖片供練習使用。

{% hint style="info" %}
如果您不想使用線上工具，想要更貼近在本地端開發的感覺，\
可以下載 [Visual Studio Code](https://code.visualstudio.com/) （簡稱 VSCode），目前業界的前端大部分都是使用它。\
此外，他也有提供[線上版](https://vscode.dev/)可以是個人情況使用。
{% endhint %}

### 完成課程的收穫

根據您所完成的章節，收穫會有所不同：

* 完成章節一至章節二：您會製作一個簡單網頁，並學會調整簡單的色彩。\
  例如：單一顯示網頁。\
  程度：入門。
* 繼續完成至章節三：您會創造一個適合大部分裝置使用的網頁。\
  例如：一頁式網頁。\
  程度：Junior。
* 繼續完成至章節五：您會有系統的建立一個易管理、更穩定、內容更豐富的網站。\
  例如：CSS 命名管理、元件管理...等。\
  程度：Senior。
* 繼續完成至章節六：您會學習如何將網頁處理的更精緻，技能獲得昇華，任何有關切版的事幾乎已經難不倒您了，唯一會阻礙您的，只剩下是否有維持持續學習的心態。\
  例如：暸解如何做好電子報 RWD，並可重用此切版。\
  程度：Master。

### 小結

教學所有課程並不會花您太多時間，會花您最多時間的是大量的實戰，例如看到喜歡的網頁就會開始自動在腦中構想如果讓您來切版，您會如何安排，並且實做看看，從中發現細節與沒想到的地方，才會一直進步下去。

本課程大部分僅止於提升 CSS 個人能力，並未講述如何與各單位、各職務間的合作過程與工作流程，有關於這一部分，請您跟相關職務的同事聊聊天或與該相關職務的管理者請教。

{% hint style="info" %}
前端的世界與日俱進，如果有新的技術或產品出現，請抱持著強烈的學習心態，並於實驗階段就先去嘗試琢磨此新技術要解決的問題，並於使用後盡量客觀的分析優缺利弊，並設想什麼環境下適合什麼樣的技術配置，如此在未來碰到任何狀況，您就會有更多的解決方法。
{% endhint %}

### 參考來源

* [不小心就學會！用 UI 設計方法製作網站](https://hahow.in/courses/5e8ed2a0939c7870e53f2cad/main)
