---
tags: Learn
---

# 新手學習指南

## 起手式

先準備一台電腦 安裝編輯器(寫程式用的東西) 編輯器目前有很多種 但推薦使用 VS Code
官網連結： https://code.visualstudio.com/
點進去 安裝完成後打開 左方列表有一個四個小格子那個 icon 按鈕點下去 那邊是安裝套件的
進去後直接在搜索框輸入 `Chinese (Traditional) Language Pack for Visual Studio Code`
他圖案是一個地球 直接點擊 install 安裝
安裝完右下角會跳一個小對話窗 叫你重新開啟編輯器
重開後就會是中文介面了

## 學習進度安排

每個禮拜至少學習五天 每天一到兩小時
初學先看一些免費資源
推薦你看菜鳥教程網站 http://www.runoob.com/html/html-tutorial.html
這個連結點進去是教你 HTML 頁面最上面還有其他的語言像 CSS JAVASCRIPT 等
學習順序的話基本上是 HTML > CSS > JAVASCRIPT
HTML 是網頁的框架結構，CSS 是網頁的樣式，JAVASCRIPT 是網頁上的一些互動行為
建議你看的時候跟著至少寫一次程式碼 然後也可以邊看邊做筆記
筆記的話 手寫或用電腦紀錄都可 電腦紀錄推薦你用現在這個頁面的網站 叫 HackMD 登入註冊就可以建立筆記了～

## HTML

短期目標
先可以從零開始寫出一個 HTML
裡面分別用到以下幾個東西：
1. 三種標題標籤 h1 h2 h3
2. 文字段落 p
3. 列表 ul+li or ol+li
4. 表格 table
5. 表單 form

假設不知道假資料放啥 建議可以直接到一個新聞頁面裡去抓內容

## CSS

結束 HTML 教程後就開始看 CSS 的部分
我建議你先把上個 HTML 的短期目標做好後保存起來
然後直接把 CSS 套用在你寫好的東西身上做練習

如果不想看菜鳥教程的文字教學 推薦你看看金魚也能懂系列 https://www.youtube.com/watch?v=ZavL9y4Adrk

短期目標
再寫一次 HTML + CSS 的網頁
裡面分別用到以下幾個東西：
1. HTML 結構部分自行規劃 但一個網頁基本要有的東西都要有
2. 引入 CSS Reset
3. 嘗試去修改文字字型、粗細、顏色、大小
4. 建立一個寬高各 200px 的 div 用 background-image 放入背景圖片
5. 將 200x200 的 div 背景圖片設置成 cover 自動滿版
6. 做一個 go top 的按鈕 把他用絕對定位的方式放置在網頁右下角 滾動頁面時也都保持在固定的位置
7. 嘗試理解與實作看看 margin 與 padding 應該分別用在何種情況上