63 個專案實戰，寫出作品集，讓面試官眼前一亮！
## 課程目標 認識並且能使用 vanilla-lazyload 套件 ## 課程內容 這次的套件是 https://github.com/verlok/vanilla-lazyload 文件與 demo 在 https://www.andreaverlicchi.eu/va...
## 課程目標 認識並且能使用 autosize 套件 ## 課程內容 這次的套件是 https://github.com/jackmoore/autosize 文件與 demo 在 https://www.jacklmoore.com/autosize/ 這是一個讓 ...
建議您將自己完成的網站分享給您的朋友，讓大家看看您最新學會的技能！ 完成這些，你就完成這次的課程目標了！ 想成為網頁設計師的朋友，之後可以開始找更多資源學習CSS的進階技術。 想成為前端工程師的朋友，之後可以開始找 JavaScript 的資源學習。 想成為後端工程師的朋友，...
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成...
## 課程目標 認識並且能實做 carousel 元件 ## 課程內容 carousel 中文叫「輪播」元件，也有人叫 slideshow 幻燈片 常用在購物網站，用在多張商品圖片要展示時 請上網搜尋 `slideshow js` `carousel javascrip...
## 課程目標 認識並且能實做 dropdown 元件 ## 課程內容 dropdown 中文叫「下拉式選單」元件 通常用在網站上方的「導覽列」，當導覽列有太多連結的時候，就可以分組、放進下拉式選單 有人會做成點擊後展開選單，有人會做成滑鼠移上去就展開選單。兩種作法都很...
## 課程目標 認識並且能實做 modal 元件 ## 課程內容 modal 中文叫「互動視窗」元件，也有人叫「燈箱」或者「視窗」 這是幾乎所有網站都會用到的元件 台灣各大媒體網站常見的「蓋板廣告」，就算是一種「視窗」 各大社群網站，逛一逛就跳出「視窗」強迫你登入...
## 課程目標 認識並且能實做 toast 元件 ## 課程內容 toast 中文叫「吐司」元件，就跟烤土司機，烤好吐司會跳出來一樣 用這元件來讓一些操作回饋訊息跳出，可以讓使用者體驗（User Experience，簡稱 UX）更好 很多網站因為沒有做好適當的 toa...
## 課程目標 認識並且能實做 alert 元件 ## 課程內容 alert 中文叫「示警」元件，當有訊息要公告在網站上，就可使用 或者當用戶執行了某些動作，在頁面上要提示、回饋訊息的時候，也可使用 通常要將 alert 做成幾種不同樣式，根據不同使用情境來使用 ...
## 課程目標 認識 DOM 樹基本觀念 能夠在 DOM 樹進行「新增」 學會基本的除錯技巧 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 JavaScript 的時候，你會聽到很多人在講「DOM...
## 課程目標 學會基本的變數賦值 學會基本的字串連接 能從 html 元素中，得到用戶輸入的內容 ## 課程內容 在上一課的內容中，我們這樣來顯示訊息視窗 ``` alert('你點擊了按鈕！'); ``` 像這樣單引號包起來的內容 `'你點擊了按鈕！...
## 課程目標 學會定義函數的基本方法 學會呼叫函數的基本方法 學會 onclick 事件的用法 ## 課程內容 請打開這個網站，用這個網站來練習＆寫作業： https://jsfiddle.net 在學 html/css 時，我們會給元素一些屬性，例如 i...
使用這些 github repo 成為更好的前端開發人員。 原文出處：https://dev.to/hy_piyush/7-github-repositories-that-every-front-end-developer-must-know-300l ## Clean Code Ja...
## 簡介 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 技巧。 很棒的是，光是這些...
# 第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」的畫面設計方法。 實作起來非...
# 第5課 課程目標 學會使用 Bootstrap 的訊息框框元件。 # 第5課 課程內容 訊息框框在所有網站都會有，在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候，都可以使用。 這一課要學習使用它。 請閱讀入門教學： https://www.w3schools...
精選技術文章、免費程式設計資源、以及業界重要新聞！
也歡迎訂閱 YouTube 頻道，觀看每週二晚間的《CodeLove Talk》直播節目，一起討論軟體開發相關的話題！
