網頁前端是什麼？
一個網頁，可以分成前端及後端，這兩個東西差在哪裡功能是什麼？可以把網頁想成是一間餐廳，前端就是你能看到的裝潢、樑柱、菜單等等的東西。而後端就像是廚房，把你點的菜煮好之後上菜到你看得到的地方。而網頁前端中的程式又可以分成HTML、CSS、JavaScript。HTML是餐廳中的骨架、樑柱、地基，也就是整間房子最基本的條件。CSS是店內的裝潢，把原本的鋼管倒入水泥，再把工業風的房子加入裝潢，變成北歐、美國、日式等等的風格。JavaScript就是餐廳裡面的服務鈴、點餐機等等有功能的東西都是歸它管。
安裝程式編輯器
現在已經了解網頁前端是什麼了，那就開始實作吧！不過，要先下載一個可以讀懂、執行我們寫出來的網頁的編輯器，雖然Windows裡內建的記事本也可以當作一個編輯器，但是它太難用了，比起給寫程式的編輯器少了非常多方便的功能。我們要拿來做網頁的編輯器是Visual Studio Code（簡稱VS Code），它是目前軟體工程師中最多人用的程式編輯器。那我們要怎麼下載它呢？（我用MacOS示範，Windows下載教學、Linux下載教學）
- 到這裡可以看到下圖的樣子
- 看你的電腦系統下載對應的版本（上面有寫最低版本需求）
下載完之後，應該會長底下這樣
- 打開檔案，點擊打開（下圖）
- 然後就沒有然後了（如果在Safari以外的瀏覽器下載可能會詢問是否開啟）
如果是要長時間打程式，真的不要用淺色模式，眼睛會瞎...
或是也可以到延伸工具安裝自己喜歡的主題
為什麽要寫這一個教學？
現在網路上的教學那麼多，為什麼我還要再寫這個教學？
我的網頁前端也是靠著自學學會的，踩了不少坑，所以我知道哪些地方是初學者會遇到的問題，我也不會一次把很多東西塞進你的腦裡，因為沒有任何用處，過沒多久就會忘掉了，所以這個教學會用一些小型專案，讓你完全了解並可以應用在不同的場景。
現在問AI就能做出網頁了寫這個教學能做什麼？
現在的AI確實能讓製作網頁省不少時間，所以我也會在教學中寫到「如何正確使用AI幫助你製作網頁」，但讓AI自己寫網頁，如果是非常小的專案，否則只要網頁的程式碼一多，絕對會有Bug（臭蟲，程式碼之中的漏洞），而如果讓AI Debug（除蟲，意思是把Bug解決掉）你會發現不只沒解決掉，還會多更多的Bug，所以有基礎可以讓自己看懂程式並找出漏洞是非常重要的。
這個教學會分成基礎、進階，輪流發佈，但我目前還不知道進階應該從哪裡開始教所以我建立了一個表單，想要調查大家希望在進階教學中學到什麼！
