一、前言

早在幾年前，我一直有著經營自己 Blog 的小小願望，但是礙於不知道要寫些什麼主題，這個願望就一直被我藏在心中遲遲未去執行。而在無意間，我得知鐵人賽的比賽活動資訊，燃起了一股想要挑戰自我的慾望，於是懵懵懂懂的填寫線上報名表，就這樣開啟了我的鐵人賽之路．．．

版權宣告：

本系列文章採用的程式碼、圖片，僅供教學研究使用，若有侵權之情事，煩請告知。謝謝！

1.1 聲明

大部分的程式碼源自於 W3Schools 的 How To 系列， How To 有著大量的網頁組件可以觀摩，而且使用單純的 HTML、CSS、JavaScript 來編寫（雖然它有很多寫法上感覺有點舊，有可能是相容性考量）；本系列文章根據 W3Schools 程式碼經過修改後再分享，僅供教學使用。學習前端的朋友可以到他們的網站找到更多的使用技巧。而對於剛入門的新手來說，W3Schools 可說是相對友善的介面。如果想知道更細節的東西，也可以到 MDN 逛逛，除了網站之外，在手邊準備一本 JavaScript 工具書隨時查閱，會是一個不錯的選擇，由於我目前還沒有找到最佳 JavaScript 工具書，所以在這裡暫時先不推薦了（其實只看 W3Schools 和 MDN 文章也足夠了，比起書本，網站的更新速度會更快，也更能精準掌握資訊的變化）。

1.2 想寫什麼？為何想寫這主題？

在文章一開始，我說明了此次參賽的動機。再來是想分享，關於這次的鐵人賽主題要寫些什麼？期望為何？首先，我想表達的核心概念是：「利用最純粹的HTML、CSS、JavaScript來實作出各種組件」。凡舉像是 Button、Form、Navbar 這類組件（也可以說是元件、Componets）等等。

我希望寫那種看起來簡單，但卻是很實用的工具，舉個例子：不知道大家有沒有用過youtuberepeat【1】？它是一個能讓 youtube 影片重複播放的線上小工具，功能看似簡單，實際上但是卻很實用線上小工具，而我的目標就是想開發這種簡單且好用的東西。

二、選擇開發環境

在剛開入門程式的時候，一定會看到網路上有著一群熱心人士，他們會不停的這類問題，比如：剛入門前端，第一個語言該學什麼？要用麼樣的 IDE 開發？或是要先學哪種框架？其實對於一個工程師來說，先學什麼語言、框架或是用哪種 IDE 都不是最重要的（因為語言或框架學久都有機會碰到），重點是「該怎麼把東西做出來，以及快速的、高效的解決問題」。

學前端我推薦直接使用微軟的Visual Studio Code（以下簡寫為 VS Code）。如果你想要把心思放在開放上，而不想為了安裝其他的套件來煩惱的話，直接使用 VS Code 是相對簡單的選擇；在這裡推薦幾個我用過的好用的延伸模組（Extensions，以下統一使用套件來稱呼），請參考下面列表：

• Sublime Text Keymap and Settings Importer：這是在 VS Code 中使用 Sublime Text 快捷鍵的語法，好處是你只要學一套快捷鍵，就能同時在兩個編輯器中交互使用，它的缺點則是，「我完全沒有在記 VS Code 自家的快捷鍵」，這也使得這個套件變成我的必裝選項。
• Chinese Lorem：在 VS Code 中撰寫 HTML 檔案時，只要輸入lorem關鍵字，就可產生 255 個英文字母和符號所組成的假文，而 Chinese Lorem 則是能產生 128 個中文字和符號組成的假文。注意！只有在HTML檔案中才可以使用lorem。
• vscode-icons：這是一個在你的檔案中加入有識別性的 icon，與其說是為了美觀，更多的是能夠一眼就看出來這個檔案的類型，在分類檔案時會是一個很好用的套件。
• Prettier - Code formatter：一個超級方便的程式碼格式化工具，它會讓你的程式碼格式保持一致的風格（或是訂義自己或團隊的寫作風格）。但在這裡會有個小問題，VS Code 編輯頁面的文字預設換行為 80 字元，若超過這個值，Code formatter 的格式化後，會讓頁面變得不好閱讀，可以透過設定改變字元，設定步驟如下：
  • 開啟在VS Code的設定：左下方小齒輪開啟設定（Ctrl+,）
  • 輸入Editor:Word Wrap Column
  • 找到Editor:Word Wrap設定成wordWrapColumn（才可以修改Editor:Word Wrap Column）
  • 最後將Editor:Word Wrap Column 預設值更改為180（你想要的值）
• cdnjs：在匯入 CDN 時，可以直接在 VS Code 直接查詢，不用特別跑去官網複製 CDN 的程式碼，它可以選擇各種版本安裝，而我通常拿它裝 jQuery 的 CDN
• Auto Rename Tag：這是一個幫助你在修改某個元素的開始標籤時，自動幫你補上元素的結束標籤，非常實用的小功能。
• GitHub Theme：這是我愛用的網站配色，套用後有一種 GitHub 的風格，主要是它的文字配色不會太過花俏，黑色的背景頁不會有彩度太高，降低眼睛的疲勞度。
• Live Server：必裝的套件，想要在瀏覽器上快速看到自己寫的 HTML 和 CSS，用 Live Server 就對了，可搭配 VS Code 的 Auto Save 使用，或是儲存檔案後，網頁都會自動刷新，非常方便。
• vscode-input-sequence：這個是我心中排名前幾名的好用套件之一，它可以快速的產出有順序的流水編號，用法也很單純，只要選取一整欄你要編輯的文字，使用快捷鍵Ctrl + Alt + 0後（0 為數字），會跳出輸入框，輸入的內容代表從第幾號開始編號，我推薦必裝。
• Chinese (Traditional) Language：操作介面翻譯中文，也支援其他語系的下載。
• indent-rainbow：這套件會在程式碼前面的縮排加入顏色，相同層級會使用相同顏色相連，然而它不是一個單純美化介面的套件，它最大的功用在於，當你想要移動一段 Code 的時後，這個套件能幫助你不會複製到其它的 Code，要注意的一點是，若是出現看起來很礙眼的深紅色在你的縮排前面，代表你的縮排不正確，需要修正否則會介面會很醜（有強迫症會受不了）。

額外設定：

• Auto Save：VS Code 內建的一個功能，它能夠幫你自動的儲存 Code ，降低程式碼寫到一半沒存檔的窘境，建議一定要打開。在 VS Code 工具列上勾選：檔案（F） → 自動儲存【2】。
• Sync：VS Code 內建功能，如果有 GitHub 帳號，使用 Sync 可以在不同裝置上，同步你的 VS Code 設定和延伸模組，這功能解決重新安裝 VS Code 時的麻煩，如果你有跨裝置開發的需求，非常推薦開啟的這個功能【3】。

三、VS Code 快捷鍵

這個項目我原本沒打算要寫的，但是為了自己日後查詢文章時，可以快速的查詢快捷鍵用法，還是決定把它放上來了，這些都是我覺得好用的快捷鍵，記得要安裝Sublime Text Keymap and Settings Importer這個套件，避免出錯，快捷鍵如下：

• 開啟資料夾：Alt + Shift + R。點選檔案在使用快捷鍵，能快速開啟檔案所在資料夾路徑。
• 剪下選取行的文字：Ctrl + X
• 移動選取行的文字：Alt + ↑ or Alt + ↓
• 切換選取文字的大小寫：
  • 切成大寫：Ctrl + K , Ctrl + U
  • 切成小寫：Ctrl + K , Ctrl + L
• 選取相同文字（分批）：Ctrl + D
• 選取相同文字（全部）：Alt + F3
• 複製選取的文字：Ctrl + Shift + D

四、推薦資源

雖然我力求文章要寫的簡單，希望能讓入門前端的朋友能看得懂，但是對於完全沒有碰過程式的人來說，可能在一些術語或是語法使用上感到陌生，然後卡在一些奇怪的地方浪費時間，對此，建議可以參考以下教學資源，藉此補上一些基礎概念。

4.1 免費資源：

• 2019年IT鐵人賽-冠軍影片：金魚系列對於剛入門的人來說，是一個不錯的選擇。連我這種學了 一段時間的人，補上可能遺漏的基礎觀念。內容從一開始入門的 HTML 到 CSS 最後講解一部分 jQuery 方法介紹。對於想要用原生程式碼來打鐵人賽的我很有幫助，在此推薦！
• 金魚都能懂的網頁切版教學：同樣是適合入門新手的系列，主要是針對切版畫面的美觀做介紹，讓我知道原來那些常見版型，原來是這樣被製作出來的，Amos 大提供的一些技巧對於我在挑選元件時有所啟發，適合放在筆記中收藏！
• 金魚都能懂的Bootstrap5網頁框架開發：為了鐵人賽能夠快速架出網頁，我先學了 Bootstrap，希望用它快速的來完成 RWD 的架構，順帶一提，網站 Navbar 就是採用 Bootstrap 5 來開發的。
• Dave Gray：如果想聽國外的教學，可以聽聽看 Dave Gray 的教學，對於課程的內容要有一點點背景知識，聽起來才不會感到太吃力，框架部分我也還在慢慢學習中。
• W3Schools：語法的查詢可以在 W3Schools，更進階一點則可以參考 MDN。W3Schools 不只有前端相關的語法，也包含後端語法、資料庫等等知識。是一個工程師必定會接觸到的網站。
• MDN：它是一個能把語法寫的很詳細的網站，但是在閱讀方面，W3Schools 配色較為好閱讀，MDN 則是內容為取向，就當成前端的字典來查詢吧。
• Coding Interview University：值得重複查閱的一套軟體工程師養成路徑，相關知識點我也還在學習，或許哪天看完了這些東西，也寫下了文章，這才是我真正學會的時候吧。

4.2 其他資源、線上工具

• Fooish 程式技術：有時候會參考 HTML 的一些語法用法，在我不想看 W3Schools 時會去逛逛。
• Medium 文章列表：文筆很厲害的 Huli 大，帶有哲學的角度融合工程師的思維，推薦給各位。
• 在地上滾的工程師 Nic：Nic 的經驗分享，我覺得比較偏向軟實力的觀念建立，推薦！
• Notion：若要寫文章，我非常推薦用 Notion，它可以有效的收納筆記，付費版可使用版本控制功能，能救回不小心刪除的文件（之所以知道有這個功能，因為我之前不小心誤刪檔案，拼命想把它救回來，版控可以處理這個問題，但要付費）。順帶一提，我的鐵人賽文章都是用 Notion 來撰寫的，因為它支援 Markdown 的關係，只要像 Word 那樣編輯，寫完後再直接把文章複製、貼上在鐵人賽的編輯器上就好，只管寫文章不用去管 Markdown 語法。
• GitMind：如果說 Notion 是用來寫文章，那麼 GitMind 就是建立價值觀的工具。至於如何將文章和心智圖發揮實際效益，本系列先暫時不討論。
• GitHub：程式碼或是任何你想用版本控制的任何檔案，都可以上傳到 GitHub，以前都不知道VS Code 搭配 GitHub 根本無敵好用，我在 Push 和 Pull 專案都很方便，善用 GitHub 存放你的程式碼，不會讓它們隨便亂放在你的電腦裡，也能避免遺失的風險。
• Stack Overflow：幾乎 99.9% 的疑難雜症，都可以靠 Stack Overflow 來解決，如果找不倒解決辦法，那就直接在上面發問吧 ，它是工程師們的 Google 搜尋神器。
• snippet generator：讓你的 snippet 排版更一致的工具，它可以幫你在每行程式碼的開頭和結尾，個別加上雙引號，節省自己大字的時間，美中不足就是它的 Tab 好像是 2 字元，所以貼上 snippet 後，還要再重新做排版，儘管有個小缺陷，但還是我最愛用的線上工具之一。

五、結論

這系列文章，主要是想寫給剛入門前端的朋友們（包括我）。內容是我特別精挑細選過的，希望對自學前端的新手們能夠有所幫助，可能對於大部分的前端強者們來說，能幫助的內容有限。因為我是第一次寫這種類型的教學文，可能某些地方會有所疏漏，若有哪些地方說得不清楚或是寫錯字，煩請指正，謝謝！

六、參考資料

1. youtuberepeat
2. How to toggle Auto Save in VS Code
3. How to Sync Your VS Code Settings and Extensions Across Multiple Devices