AppWorks School Batch #16 Front-End Class 學習筆記&心得（Week 1）
（本文所有內容禁止媒體引用）
AppWorks School 的遠距教學終於開始了，過往學了快兩個月的 HTML 與 CSS+RWD、Git & GitHub，這次一週內就要搞定，看來未來的進度壓力會比過去自學過程大上非常多，必須打起精神、面對挑戰！
進度安排
第一週的課程圍繞在 HTML 與 CSS，兩者分別是標記語言與樣式表，還沒進入到真正的程式語言，此時的重點是「響應式網頁設計（Responsive Web Design, RWD）」，確保網頁畫面在不同的裝置上都能夠瀏覽、不會嚴重變形。
另一大重點是版本控制工具「Git」與平臺「GitHub」的認識與操作，未來 School 的作業、累積個人的作品集，甚至是工作時與其他人協作，也都將有大量應用。
HTML 與 CSS 單元都是使用 Treehouse 的線上課程，內容與字幕皆為全英文，七天免費試用期滿了之後，School 會代墊第一個月 25 美元的訂閱費；版本控制則是使用 Udacity 的免費線上課程，當中的影片發音為英文，但字幕與其他文字說明可以選擇簡體中文版本。
HTML 重點
- 網頁架構包含 <head>、<body> 兩大部分。
- 「區塊級（block）」與「行內（inline）」元素。
標籤
- 基本：區域標題
<h1>~<h6>、段落<p>。 - 列表：
<ul>、<ol>、<dl>。 - 超連結：
<a>、電郵<a href="mailto:XXX@gmail.com">、絕對 & 相對 URL。 - 語意：
<header>、<footer>、<section>。 - 內容分區：
<div>(block-level)、<span>(inline)、<article>、<nav>、<aside>、<main>。 - 內文修飾：
<strong>、<em>、<small>。 - 引用：
<blockquote>、<cite>。 - 放入圖片：
<img>、<figure>&<figcaption>，檔案路經包含相對&絕對。 - 切塊：
<hr>、<br>、<address>。 - 標記：
<id>。 - 使「保留字（reserved words）」失效：
<pre>。
CSS 重點
- 放置位置：inline、internal、external（最好維護，最佳）。
- 選擇器：universal (*)、ID (#)、class (.)、descendant、pseudo-classes。
- 單位：絕對（px）、相對（%、em & rem）。
- 顏色編碼：HEX、RGB。
- 層疊（cascade）觀念：origin & importance (author>user>user agent)、specificity（權重高者優先）、source order（較晚出現的優先）。
- 繼承（inheritance）。
- 響應式網頁設計（RWD）：flexbox、media query。
Git & GitHub 重點
基本概念：工作目錄（work directory） → 暫存區（staging area） → 個人倉庫（local repository） → 雲端倉庫（cloud repository）。
創建 Git 個人倉庫
git init：創建新的空倉庫。git clone：建立當前倉庫檔案的副本。git status：顯示倉庫當前狀態。
查看個人倉庫歷史紀錄
git log、git log --decorate：顯示倉庫中所有 commit 資訊，欲退出顯示按q。git log --all：顯示倉庫中所有分支。git log --oneline：只顯示每次 commit 的 SHA 的前 7 個字符與 commit 時提交的說明第一行。git log --stat：顯示每次 commit 時修改與刪除的更動行數。git log --p、git log --patch：顯示每次 commit 時修改與刪除的實際更動內容。git show <SHA of commit>：僅顯示該 SHA 中的 commit 資訊，默認顯示內容同git log --p與git log --patch，但也可搭配--stat，變成只顯示更動行數。
向個人倉庫中添加 commit
git add <file1> <file2> … <fileN>：將文件從工作目錄移到暫存區。git commit：將暫存區的文件移到個人倉庫；提交時會輸入「提交說明」，第一行即git log --oneline顯示的資訊。若提交說明資訊很短，可直接在git commit -m "message"的"message"處輸入。git diff：顯示已經執行但尚未 commit 的更改，顯示內容同git log --p、git log --patch。.gitignore：該文件中的檔案不會被其他操作影響，可搭配空白行表示為空格、#將行標記為註釋、*表示與 0 個或多個字符匹配、?表示與 1 個字符匹配、[abc]表示與 a、b 或 c 匹配、**表示與嵌套目錄匹配。
標籤、分支和合併
git tag -a：給予一標籤，標籤上帶有註釋。git tag -d：刪除標籤。git branch sidebar：建立一個名為 sidebar 的分支。git checkout sidebar：切換到名為 sidebar 的分支。git branch -d sidebar：刪除名為 sidebar 的分支。git merge <name>：將<name>分支合併到當前分支，並提交一個 commit 記錄合併操作。- 合併衝突：要合併的不同分支上，在相同位置做出更動時出現，可以依照指示選擇 accept current change、accept incoming change 或 accept both changes，選完方案後要再進行一次 commit 。
撤銷更改
git commit --amend：更改最近的 commit。git revert <SHA of commit>：還原 SHA 的 commit ，即撤銷舊有 commit 並提交新 commit。git reset --hard <reference to commit>：完全清除 commit。git reset --soft <reference to commit>：將 commit 移到暫存區。git reset --mixed <reference to commit>：取消暫存已經被 commit 的更改。
心得
AppWorks School 從申請到正式上課的時間真的很漫長，記得面試是在 2021 年底進行的，當時場地還是在市府轉運站附近，面試完等了超過一個月才放榜，再等將近兩個月才開始遠距教學，相信這段時間不太可能有人什麼也不做就等開學，而且面試前多半應都已經有自學經驗，開學後的進度相當緊湊。
第一週的重點是標記語言、樣式表跟版本控制，前者的 HTML+CSS 因為之前曾經跟著 Udemy 的線上課程做過一些小專案，除了某些部分記憶模糊、要花些時間複習外，都還能夠超前進度；後者的 Git+GitHub 則是一直處於似懂非懂的狀態，但相信只要提高操作頻率，一定可以很快熟悉。
昨天還到小巨蛋參加了「2022 Yourator 數位職涯博覽會 ⎮ 踏入未來職涯元宇宙」，這是我第一次以「目標為軟體工程師工作」參觀就博，明顯感受出可以聊的攤位比過往高出許多。透過與不同公司的對話過程，對未來的努力方向更有概念，例如要把基礎觀念弄熟、寧願專精一項工具也不要樣樣通樣樣鬆，更重要的是要把個人專案做好。去了趟就博無疑更增強了決心，很快就要進入 JavaScript 環節，一定要把握每個當下、好好努力。
