63 個專案實戰,寫出作品集,讓面試官眼前一亮!
#學習混亂期 在廣大的網路中,要有超級多資源可以學習,過往的經驗,因為資訊太多根本不知道該選什麼影片或網站來當作學習的範本,聽到別人說python適合入手,就上網找尋,常常卡住後就會放棄。總是找不清楚什麼是前端、後端、github怎麼使用,環境應該如何構架等。 #尋找對資源 這次在FB彈出,A...
## 課程目標 認識並且能使用 TinyMCE 套件 ## 課程內容 WYSIWYG(所見即所得)編輯器,是業界最常被使用、但也最難開發的功能之一 開發部落格功能時,需要有寫文章&格式的編輯面板,這是非常多網站的需求 業界實作同樣有非常多套,今天介紹我覺得滿漂亮、好用的...
## 課程目標 認識並且能使用 xdan/datetimepicker 套件 ## 課程內容 我在上一課說過,jQuery 生態系很多成熟套件,不用可惜 這就是其中一個! datetimepicker 就是時間日期選擇器,超多網站需要用到 業界實作有非常多套,這套...
## 課程目標 認識並且能使用 jQuery 套件 ## 課程內容 這一課要教的東西比較有爭議 jQuery 是 2006 - 2015 年代,前端網頁開發的王者 當時的瀏覽器廠商眾多,網頁規格 API 支援方式不同、不完整(尤其是 IE 一堆奇怪的 API) 當...
## 課程目標 認識並且能使用 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 技巧。 很棒的是,光是這些...
精選技術文章、免費程式設計資源、以及業界重要新聞!
也歡迎訂閱 YouTube 頻道,觀看每週二晚間的《CodeLove Talk》直播節目,一起討論軟體開發相關的話題!