第1課 ── autosize 套件 https://jsfiddle.net/birdie2019/j69s8vdc/38/ 第2課 ── vanilla-lazyload 套件 https://jsfiddle.net/birdie2019/401xa29h/104/ 第3課 ── Chart.js 套件 https://jsfiddle.net/birdie2019/upLn7j1b/6/ 第4課 ── jQuery 套件 原生JS: https://jsfiddle.net/birdie2019/ebax340f/2/ jQuery: https://jsfiddle.net/birdie2019/eabr2jh3/7/ 第5課 ── xdan/datetimepicker 套件 https://jsfiddle.net/birdie2019/y7mzws6r/18/ 第6課 ── kenwheeler/slick 套件 https://jsfiddle.net/birdie2019/k6vgcod0/52/ 第7課 ── TinyMCE 套件 https://jsfiddle.net/birdie2019/m8dforLn/23/ --- 心得分享： 以上套件都蠻有趣的，尤其是Chart.js，在學習過程中一直讚嘆這套件好厲害！ jQuery我覺得不錯，程式碼可以少打很多，但還是覺得學好JS很重要。 另外讀第三方套件文件內容都是英文，一開始讀有點措手不及，有些東西看不懂和不了解其意思，但動手試試看觀察變化，試個幾次就明白了，請勇於嘗試會發現很好玩。
練習1 ── alert 示警元件 https://jsfiddle.net/birdie2019/4ur1c7xf/34/ 練習2 ── toast 吐司元件 https://jsfiddle.net/birdie2019/fmc6b8ht/49/ 研究了一下setTimeout()用法，經過自己的消化吸收寫成筆記記錄下來 分享筆記：https://hackmd.io/@birdie/SJisAlTcs 另外發現display無法做transition的效果，改用opacity 練習3 ── modal 互動視窗元件 https://jsfiddle.net/birdie2019/9p3zsthL/17/ 練習4 ── 表單驗證 https://jsfiddle.net/birdie2019/bdavsur4/91/ 練習5 ── collapse 折疊效果 https://jsfiddle.net/birdie2019/dkncrv03/43/ 認識了scrollHeight屬性，建議可以用圖去搜尋會比較好理解這個屬性 也順便學了clientHeight和offsetHeight 練習6 ── dropdown 下拉式選單 https://jsfiddle.net/birdie2019/xb0ka495/44/ 研究window.onclick怎麼使用並認識了matches() 練習7 ── carousel 輪播元件 https://jsfiddle.net/birdie2019/t6uxb9df/30/ --- 此次教材心得分享： 一開始在腦袋裡會想很複雜，憑空亂想亂打code發現不是再刪掉再亂打，但其實不可能一下就到位，後來拿筆和紙先把需要的功能和自己的邏輯想法簡單的寫和畫下來，釐清自己現在需要怎麼做，方法有幾種，若這個方法不行，還可以用什麼方法可以做，這個方法看似很沒有效率，但真的對我幫助很大且完成此次所有作業。
在這份教材中，實際使用了多個第三方套件，來達成功能 不斷上網找適合套件、翻文件、找範例程式碼、確認堪用，是軟體工程師的日常 到處用現成套件，其實滿好玩的，可以做到很多強大的效果，也在這個過程中，了解實務上要如何跟第三方套件互動 --- 如果你是網頁設計師，目前為止的能力，已經足以應付你工作上絕大多數的需求 如果你是前端工程師，面對這些套件，首先學會「如何使用」即可 工作一陣子後，要學會「如何調整、客製化」以及「背後原理」 多年之後，你要學會「如何自己寫一套同樣強大的套件」，至少要知道大方向 否則你就永遠只是套件的「使用者」而已，無法成為資深工程師 不過，可以先把這些視為中長期目標就好，剛開始工作，就先以完成任務為主吧 業餘空閒時間，再找時間把有興趣的套件，深入研究一番即可！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（五）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/Zq4v3w
進入到 JavaScript 基礎課程的第四部份 你已經算是有了初步的前端開發與設計能力了 實務上，我們在專案中大部份的功能、元件，都會去找找看「現成的」、「開源專案」來使用 也就是如果已經有人做過了、有人分享過了，如果堪用，基本上就不會自己重做一個 因為成本差太多，什麼都自己做實在太花時間、花金錢 這一課我們稍微認識一下開源生態系，用用看這些現成套件 這些東西，我們叫：「第三方套件」，或者插件、外掛，都可以 我會分享幾個我自己在滿多專案都會用的套件，順便在這過程學習一些知識 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先前往自學課程頁面，完成「自學網頁の嬰兒教材：HTML與CSS」與 JavaScript 相關系列課程 準備好的話，讓我們馬上開始吧！
最後，謝謝你耐心的完成這整套課程！ 進階的 RWD 技巧，以及 RWD 背後深入的 css 原理，會在別門課程提到。 但是目前所學的基本技巧，應該已經很足夠使用！
最後，謝謝你耐心的完成這整套課程！
建議您將自己完成的網站分享給您的朋友，讓大家看看您最新學會的技能！ 完成這些，你就完成這次的課程目標了！ 想成為網頁設計師的朋友，之後可以開始找更多資源學習CSS的進階技術。 想成為前端工程師的朋友，之後可以開始找 JavaScript 的資源學習。 想成為後端工程師的朋友，之後可以開始找喜歡的後端程式語言學習（例：PHP）。 最後，謝謝你耐心的完成這整套課程！
### 第1課 ── 基本的函數操作、onclick 事件 https://jsfiddle.net/j80d9gao/17/ --- ### 第2課 ── 基本的變數操作、從 html 取得內容 https://jsfiddle.net/09v5oadu/23/ --- ### 第3課 ── 修改 html 的內容 https://jsfiddle.net/2gnuj6wf/47/ --- ### 第4課 ── 基本的陣列操作 https://jsfiddle.net/49qzdj2c/140/ --- ### 第5課 ── 基本的 if/else 條件流程控制 https://jsfiddle.net/8gn7co2v/2/ --- ### 第6課 ── 認識資料型態與轉換 https://jsfiddle.net/Lqjstd6a/ --- ### 第7課 ── 認識巢狀結構 https://jsfiddle.net/cz07a8nu/13/ ---
在這份教材中，實際練習了實務上常見的 UI 元件 雖然只有少少幾個元件，但已能滿足許多網站設計需求 實務上，不會經常需要手做這些元件 通常會拿現成的 UI 套件包當作基礎，接著客製化與修改，例如最知名的 Bootstrap 套件 但是，不論是網頁設計師、前端工程師，在使用現成套件之餘，稍微知道背後的原理，比較好 這樣才能更好地掌握工具，以及在必要的時候能夠親自開發與修改 而到目前為止，我認為，你已經能夠親手製作出設計師要求的大部份靜態＆動態設計了！ --- 真正在工作的時候，也會很像本次課程這樣，幾乎完全沒人幫你 但或許會有人告訴你關鍵字，或是你覺得好像在哪邊看過某種功能、效果 所以雖然你還不會做、沒有做過，但你有信心，可以找到相關資源、可以做得出來 身為軟體工程師，需要有這種「大致知道自己潛力在哪」的能力與信心，才能不斷樂於接受超出能力的挑戰 要習慣這種感覺。就像在這次的七個 UI 元件練習中，在我完全沒有教學的情況下，你就成功做到了 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（四）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/837eq0
本課程為 JavaScript 基礎課程的第三部份 在前兩部份的課程中，已經學會程式設計的基本觀念，以及 DOM 操作的基本方法 在這次的課程，我們將練習製作實務上常用的 UI 元件 藉由這次練習，強化在前兩部份課程學到的知識 --- 身為工程師，常常要做一些沒做過的功能 這時，就需要足夠的自學、研究能力，以及敢於面對未知的信心 也就是雖然功能看起來沒做過，但你有把握稍微研究之後，就能做得出來 所以這次的課程，我只會提供簡單介紹＆關鍵字 接著就直接提出作業規格，你需要自行研究如何完成作業 --- 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：JavaScript（一）—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) - [自學網頁の嬰兒教材：JavaScript（二）—— 親手做個待辦事項小工具](https://codelove.tw/@howtomakeaturn/course/vx8gqZ) 準備好的話，讓我們馬上開始吧！
簡單複習一下，在這份教材中，我們學會了 - DOM 樹基本觀念 - DOM 樹新增、刪除 - DOM 樹找到元素的方法 - 基本的除錯技巧 - 動態加上 onclick 事件 - 操作 onchange 事件 - 基本的 for 迴圈用法 - 在 DOM 樹存取、修改元素的 class - 在 DOM 樹存取、修改元素的 style - 學會 `.querySelector()` `.querySelectorAll()` 的用法（Selector API） - 學會 `.closest()` 的用法 - 初步認識「重構」的觀念 利用本課程學到的技巧，你已能夠對 DOM 樹進行很多操作，也能夠處理工作上很多功能需求！ DOM 的操作函式有非常多，本課只教了最基本的幾個，實務上你會看到超多尋找 DOM 元素的函式 你就隨便找、隨便用，都可以，能順利找到、處理元素就好！ --- 觀察本課內容，你會發現完全沒有用到第三方套件，通通是寫原生 JavaScript 本課所學內容，其實就是所有前端框架的基礎。不管你用了任何複雜的工具或框架，它們的背後，其實就只是這樣操作 DOM 而已，並沒有很難 本課內容所教的開發方法，大概是西元 2000 - 2010 年代的開發方式，很傳統，現在比較少這樣寫 實務上，現代前端工程師，工作時主要在使用「框架」來開發，例如 Vue 或者 React 因此，坊間補習班，大多是直接從「現代前端框架」開始教 然而，我觀察到，大多數畢業學生，因此對於 DOM 基本觀念一知半解、覺得框架很黑箱，並且基本功非常不好 所以我課程設計先從老方法開始教，讓大家基本功比較好，接著再學工具與框架，會更有踏實的感覺 --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（三）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/gqveaW
本課程為 JavaScript 基礎課程的第二部份 第一部份的專案練習，已經學習到程式設計的基本觀念 第二部份，將藉由另一個專案，接著學習更多程式設計觀念 在開始之前，您需要先具備基本的 HTML、CSS、JavaScript 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：JavaScript（一）—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) 準備好的話，讓我們馬上開始吧！
簡單複習一下，在這份教材中，我們學會了 - 宣告變數 - 宣告函式 - 操作 onclick 事件 - 字串操作、數字操作 - 能從網頁元素取得資料 - 能更新網頁元素的內容 - if/else 條件流程控制 - 認識資料型態的差異與轉換 在任何學校、補習班，學習程式設計，不論程式語言，不論領域，有很多通用的基本觀念要學 本課程的內容，已讓你學會了其中的一大部份 我鼓勵你針對其中有興趣的部份，搜尋關鍵字，自行研究一下，有更多好用、有趣的東西可以學 --- 在程式設計中，一樣的任務，有多種寫法可以完成 在網頁開發中，更是如此。上網研究時，你會發現，在 JavaScript 中有很多函式、屬性，看起來根本目的重複了 為何會有這麼多種寫法？哪種是對的？ 有人會說Ａ才是正確做法；有人會說Ｂ才是正確做法 我個人建議是：通通都可以！隨便寫，你高興就好，能完成任務就好 各種做法的優劣之處，更有經驗之後，才能分得出差別 很多時候，根本就只是主觀偏好而已，沒有優劣之分 更多時候，都只是出於歷史因素： 「當年為了ＸＸＸ的苦衷，設計成這樣。後來大環境改變，有了新的設計。但是要兼具新舊相容性，於是並存，導致各種用法看起來有點亂」 所以，你就隨便寫吧！能搞定、東西能跑，就對了！ --- 消化、研究完本課程之後，關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材：JavaScript（二）」開始學習吧！ https://codelove.tw/@howtomakeaturn/course/vx8gqZ
大家好，JavaScript 是業界最常用的程式語言之一 但是對新手來說，常常覺得很難學，原因有兩個： 第一，這語言不斷在變化，很多新語法、新功能，不斷出現，導致學習的時候眼花撩亂 第二，傳統的程式設計教法，從變數、迴圈、邏輯，一個一個開始教。我發現對很多人來說，這種學習法有點無聊，也無法培養興趣＆信心 所以我決定換個方法教教看，設計了一套課程，不斷實作一些「實務上常見的功能」。什麼都不教，直接要求大家開始寫「小專案」 也就是從第一課就開始做小專案、每一課都做小專案，然後在過程中，順便吸收會用到的、必備的、相關程式設計觀念 如果您是對程式設計零基礎、想找一份有趣的教材試試，歡迎閱讀這份教材！ 在開始之前，您需要先具備基本的 HTML、CSS 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) 準備好的話，讓我們馬上開始吧！
使用這些 github repo 成為更好的前端開發人員。 原文出處：https://dev.to/hy_piyush/7-github-repositories-that-every-front-end-developer-must-know-300l ## Clean Code JavaScript 一些能幫助您程式碼更簡潔的開發觀念。 GitHub 連結：https://github.com/ryanmcdermott/clean-code-javascript ## JavaScript Algorithms and Data Structure 用 JavaScript 實作的演算法和資料結構，有解釋和進一步閱讀的連結 包含許多流行演算法和資料結構的 JavaScript 範例。 每個演算法和資料結構都有自己單獨的 README，帶有相關的解釋和進一步閱讀的連結。 GitHub 連結：https://github.com/trekhleb/javascript-algorithms ## You Don’t Know JavaScript 這是一個關於 JavaScript 的系列叢書。這是一系列深入探討 JavaScript 語言核心機制的書籍。 GitHub 連結：https://github.com/getify/You-Dont-Know-JS ## NodeJS Best Practice 這個存儲庫是對 Node.js 最佳實踐的總結和管理。這將幫助許多開發人員獲得有關 NodeJS 後端開發的進階知識。 GitHub 連結：https://github.com/goldbergyoni/nodebestpractices ## Frontend Checklist 適用於現代網站和專業開發人員的完美前端清單。它基於前端開發人員多年的經驗，並加入了一些其他開源清單。 GitHub 連結：https://github.com/thedaviddias/Front-End-Checklist ## Free For Dev 對 DevOps 和基礎設施開發，具有免費方案的 SaaS、PaaS 和 IaaS 產品列表。 不過，此列表的內容只對基礎架構開發人員（系統管理員、DevOps 從業者等）有用。 GitHub 連結：https://github.com/jixserver/free-for-dev ## DSA in JavaScript 解釋和實作的資料結構和演算法。 GitHub 連結：https://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript
身邊很多朋友工作幾年之後，從非本科轉職寫程式 主要方法大概三種：報名實體課程、報名線上課程、買線上課程自學 ## 報名實體課程 資策會、程式補習班，都屬於此類 需要本人實際到教室，由老師上課 這種課程通常需要耗時數個月，費用會在新台幣十萬上下 好處是有同學一起、有同儕壓力、有問題可以當面問老師、厲害的老師可以現場掌握全班學習狀況 壞處是每個人學習速度不同，有人跟不上、有人覺得教太慢 這種學習法，需要碰運氣，如果遇到優秀的老師，學習氛圍、效果，都會非常好 但是，就我觀察課表，以「全端工程」為主打的課程，進度通常非常倉促，能真正消化的學生非常少數 多數人只是糊裡糊塗把功課、專案做完，畢業後其實還是很沒信心、一頭霧水 （只專注在特定領域開發的課程，狀況比較好一點） 主因是基礎知識還不夠熟，就開始大量學習工具用法 我建議這種狀況，不要對自己起太多懷疑，保持耐心，養成做紀錄的習慣 覺得一知半解的地方就把問題記錄一下，每天都整理出一些問題 整理出一張問題清單，找時間請教別人、或是上網慢慢研究 多數回答，聽完之後應該還是聽不懂，沒關係，先放著 有搞懂的問題就劃掉，一段時間之後，會更清楚程式設計整體觀念，也會更有信心 重點是要知道自己具體是哪些細節不了解、一知半解，才有補充＆複習＆研究的方向 ## 報名線上課程 坊間許多業者提供這類服務，會有大量教學影片，個人自己找時間看完即可 並且會幫大家分組、需要一起做專案、會有助教指導 好處是每個人可以自行抓節奏，並且費用便宜許多，通常不到實體課程四分之一 如果是組合式的課程商品，就更好了，可以先購買一些基礎課程，滿意才買更多 壞處是需要紀律，督促自己去學習，需要積極、主動一點 通常我是推薦朋友，去買這種課程，因為財務、時間風險，比實體課程小很多 真的找不到相關業者提供課程、有找到政府補助、有找到特別優秀的實體課程名師，才去找實體課程 ## 買線上課程自學 不分學期、沒有分組專案、沒有助教 基本上就是找一些影片自己來看 這種課程國外比較多，需要英文能力好 好處是費用非常便宜，通常幾百元～幾千元就有很不錯的內容 甚至有 freeCodeCamp 這種完全免費的課程 壞處是需要英文能力，並且很多只是小課程，不是完整的一套多課程規劃，會不確定自己的進度到哪了 如果有親戚朋友是業界軟體工程師，比較好，因為可以跟他請教、確認自身進度、以及確認自己求職條件如何 ## 結論 半路出家不容易，我鼓勵大家把學習想成是一個「逐漸清晰」的過程 看過電腦讀取大張高清圖片的樣子嗎？先是模模糊糊的馬賽克，接著一塊一塊慢慢變清晰，最後才是變成完整的美麗圖片 學習會有點類似這樣，一開始到處模模糊糊的沒關係，保持耐心，逐步提高各處的解析度即可 只要先有一整張模糊的圖片即可。不需要執著在圖片一個角落，覺得這塊不清楚，就不能往下走 更千萬不要因為圖片模糊，就覺得「我果然不適合寫程式，放棄好了」，這絕對是搞錯重點 以上，簡單建議分享，希望對你有幫助！ --- 您在坊間補習班的學習經驗如何呢？歡迎在留言處跟大家分享您的個人學習經驗！
大家好，有沒有想學寫網站的朋友呢？ 隨著智慧型手機的普及，現在的網站畫面必須同時滿足電腦、手機螢幕，甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 OK 的網頁呢？ 聰明的設計師們發明了一種稱為「Responsive Web Design」的畫面設計方法。 實作起來非常簡單，利用一些簡單的畫面分割原理，就能滿足各螢幕的需求。 我整理了一份有趣的 RWD 自學教材，每堂課附有一個小作業。 會帶領大家在作業中，以美國時代雜誌的網站為範例，一步一步利用 Bootstrap 做出一個 RWD 網頁。 剛入門網頁設計的朋友，非常適合接著把 RWD 原理學起來！ 開始之前，您需要先具備基本的 HTML、CSS、Bootstrap 知識。 還不會的朋友，請先完成： - [自學網頁の嬰兒教材：HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材：Bootstrap](https://codelove.tw/@howtomakeaturn/course/YqZQav) 準備好的話，讓我們馬上開始吧！
# 第7課 課程目標 學會使用 bootstrap 視窗元件。學會在毫無指引的情況下，自己想辦法解決問題。 # 第7課 課程內容 終於來到最後一課囉。相信你有發現，目前為止其實只用到了 bootstrap 全部功能的一小部份。 其實 bootstrap 還有很多元件與功能，這一課要請大家試著自己去探索、自行學習。 請大家試著使用視窗元件。 比較特別的是，這一課沒有任何指引，請試著使用 google 自己找資源學習。 關鍵字：bootstrap modal # 第7課 作業 請打開你的 facebook，在你要撰寫貼文的時候，你會看到一個視窗跳出來。 這一課作業要實作這個視窗。 請實作一個「撰寫貼文」按鈕，點擊之後顯示這個撰寫貼文視窗。 注意：Facebook 這個撰寫貼文視窗的內容有很多功能，請至少實作出： - 能夠打字的區塊 - 選擇誰可以看到這則貼文的選單 - 發佈按鈕 完成之後，您已經能夠獨自使用 bootstrap 做出有基本質感的網頁設計。
# 第6課 課程目標 學會如何套用 bootstrap 的表格、表單與與按鈕樣式。 # 第6課 課程內容 表格、表單與按鈕是網頁最基本的元素之一，就算不使用 bootstrap，html 原生就有這些元素的樣式。 不過，套用 bootstrap 樣式之後，會馬上讓這些元素好看起來，這一課要學習如何套用它們。 請閱讀入門教學： https://www.w3schools.com/bootstrap5/bootstrap_tables.php https://www.w3schools.com/bootstrap5/bootstrap_forms.php https://www.w3schools.com/bootstrap5/bootstrap_buttons.php 並參考官方說明文件： https://getbootstrap.com/docs/5.3/content/tables/ https://getbootstrap.com/docs/5.3/forms/overview/ https://getbootstrap.com/docs/5.3/components/buttons/ # 第6課 作業 這一課的作業有兩個，我們先不使用 bootstrap，把畫面做出來，接著再套用 bootstrap，讓畫面變漂亮。 作業一：請將「自學網頁の嬰兒教材：HTML與CSS」的第四課作業完成，並接著將 bootstrap table 套用進去 https://codelove.tw/@howtomakeaturn/post/l3j253 作業二：請將「自學網頁の嬰兒教材：HTML與CSS」的第五課作業完成，並接著將 bootstrap form、input 與 button 套用進去 https://codelove.tw/@howtomakeaturn/post/vx8Lgx 完成這些，你就完成這次的課程目標了！
# 第5課 課程目標 學會使用 Bootstrap 的訊息框框元件。 # 第5課 課程內容 訊息框框在所有網站都會有，在需要顯示歡迎訊息、提醒訊息、公告事項等等的時候，都可以使用。 這一課要學習使用它。 請閱讀入門教學： https://www.w3schools.com/bootstrap5/bootstrap_alerts.php 以及官方說明文件： https://getbootstrap.com/docs/5.3/components/alerts/ # 第5課 作業 這一課的作業要延續第3課的作業一。 在第3課的作業一中，我們做出了 Yahoo 新聞頁的排版。 假設你是發佈新聞的平台，你希望顯示訊息歡迎使用者，並且顯示訊息提醒讀者內容是由合作的媒體發佈，新聞平台不對內容負責任。 請在這個新聞頁面加上兩個 alert 元件。 第一個 alert 元件使用 alert-info 樣式，內含歡迎訊息，並且這個 alert 要可以點擊 × 關閉。 第二個 alert 元件使用 alert-warning 樣式，內含免除責任聲明，這個 alert 無法點擊 × 關閉，會一直顯示在那裡。 注意：這一課作業是以練習為主，實際上 Yahoo 新聞頁面並沒有這些東西。 完成這些，你就完成這次的課程目標了！
你的轉職路上，還缺少一份自學作業包！寫完這幾包，直接拿作品去面試上班！
本論壇另有附設一個 LINE 新手發問＆交流群組！歡迎加入討論！
