63 個專案實戰，寫出作品集，讓面試官眼前一亮！
## 課程目標 認識 AJAX 錯誤處理 ## 課程內容 在前一課，我們說過以下的話 > 有些任務現在還不會立刻執行，但我先把要執行的任務交待清楚，時間點到的時候，就執行 > 以 UI 動作來說，時間點就是 `onclick` 之時、`onchange` 之時 >...
## 課程目標 認識基本的 AJAX 原理 ## 課程內容 這一課來認識大名鼎鼎的 AJAX 觀念 AJAX 全名 Asynchronous JavaScript and XML 簡單來說，就是「非同步從主機取得資料來更新網頁內容」的技術 舊式的網頁，都是瀏覽器向...
## 課程目標 認識變數作用域 認識函式的不同寫法與特性 ## 課程內容 來認識一些程式語言觀念與名詞 ``` <button onclick="action1()"> global scope </button> <button onclick="acti...
Hooks 是 React 最強大的功能之一。 它們使我們能夠輕鬆地在應用程式的元件中重用功能。掛鉤的最大優點在於它們的可重用性——您可以跨元件和專案重用掛鉤。 以下是我在每個 React 專案中重複使用的七個最重要的鉤子。今天就試一試，看看它們在建置您自己的 React 應用程式時是否...
框架背後有什麼必學觀念的？這篇文章簡單整理如下 原文出處：https://dev.to/lexlohr/concepts-behind-modern-frameworks-4m1g --- 很多初學者會問“我應該學哪個框架？”和“學一個框架之前需要學多少JS或TS？” - 無數自以...
## 課程目標 認識並且能使用 vanilla-lazyload 套件 ## 課程內容 這次的套件是 https://github.com/verlok/vanilla-lazyload 文件與 demo 在 https://www.andreaverlicchi.eu/va...
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成...
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好 很多網站因為沒有做好適當的 toa...
## 課程目標 學習基本的 for 迴圈用法 ## 課程內容 之前的課程中，我們學過陣列＆索引的基本用法 實務上，使用陣列時，通常會需要寫一些 for 迴圈搭配使用 for 的寫法有很多種，我們先學 for of 的寫法就好 ``` var fruits = [...
## 簡介 CSS 是任何網站設計的重要組成部分，但理解其中一些細微差別觀念可能不容易。其中最重要的觀念之一是 rem 和 em 之間的區別，以及為什麼/何時應該使用它們。 原文出處：https://dev.to/refine/rem-vs-em-everything-you-need-...
想要在 2023 年的 **Web 開發** 旅程中一帆風順嗎？參考看看這些免費工具吧！ 原文出處：https://dev.to/ruppysuppy/7-free-tools-for-the-modern-web-developers-of-2023-4lhh ## 1. [Omats...
# 第6課 課程目標 運用目前所學到的技巧，完成一個完整的 RWD 網頁。 # 第6課 課程內容 這門課到目前為止所教的技巧，只有運用 Bootstrap 快速、方便的做出網頁排版。 我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。 很棒的是，光是這些...
# 第4課 課程目標 能夠讓元素在不同裝置上面，以不同的順序顯示。 # 第4課 課程內容 請參考：https://getbootstrap.com/docs/5.3/layout/columns/#order-classes # 第4課 作業 承接前一課的作業。 ...
# 第3課 課程目標 能夠將元素只顯示在特定裝置上面。例如有些東西只在電腦顯示，有些東西只在手機顯示。 # 第3課 課程內容 請參考： https://getbootstrap.com/docs/5.3/utilities/display/ # 第3課 作業 承接...
# 第2課 課程目標 能夠使用 Bootstrap 網格系統來打造適應各種螢幕大小的排版。 # 第2課 課程內容 這一課要學習使用 Bootstrap 的網格系統。 請參考這幾份教學： - https://www.w3schools.com/css/css_rwd_in...
# 第1課 課程目標 認識 RWD (Responsive Web Design) 的意思。能利用瀏覽器觀察 RWD 網站的變化。 # 第1課 課程內容 RWD 全名 Responsive Web Design，是現在智慧型手機普及的年代，最廣泛被採用的設計方法之一。 乍聽之...
大家好，有沒有想學寫網站的朋友呢？ 隨著智慧型手機的普及，現在的網站畫面必須同時滿足電腦、手機螢幕，甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢？ 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非...
# 第7課 課程目標 學會使用 bootstrap 視窗元件。學會在毫無指引的情況下，自己想辦法解決問題。 # 第7課 課程內容 終於來到最後一課囉。相信你有發現，目前為止其實只用到了 bootstrap 全部功能的一小部份。 其實 bootstrap 還有很多元件與功能，這...
# 第6課 課程目標 學會如何套用 bootstrap 的表格、表單與與按鈕樣式。 # 第6課 課程內容 表格、表單與按鈕是網頁最基本的元素之一，就算不使用 bootstrap，html 原生就有這些元素的樣式。 不過，套用 bootstrap 樣式之後，會馬上讓這些元素好看...
# 第5課 課程目標 學會使用 Bootstrap 的訊息框框元件。 # 第5課 課程內容 訊息框框在所有網站都會有，在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候，都可以使用。 這一課要學習使用它。 請閱讀入門教學： https://www.w3schools...
精選技術文章、免費程式設計資源、以及業界重要新聞！
也歡迎訂閱 YouTube 頻道，觀看每週二晚間的《CodeLove Talk》直播節目，一起討論軟體開發相關的話題！
