進入到 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 中有很多函式、屬性,看起來根本目的重複了 為何會有這麼多種寫法?哪種是對的? 有人會說A才是正確做法;有人會說B才是正確做法 我個人建議是:通通都可以!隨便寫,你高興就好,能完成任務就好 各種做法的優劣之處,更有經驗之後,才能分得出差別 很多時候,根本就只是主觀偏好而已,沒有優劣之分 更多時候,都只是出於歷史因素: 「當年為了XXX的苦衷,設計成這樣。後來大環境改變,有了新的設計。但是要兼具新舊相容性,於是並存,導致各種用法看起來有點亂」 所以,你就隨便寫吧!能搞定、東西能跑,就對了! --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(二)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/vx8gqZ
大家好,JavaScript 是業界最常用的程式語言之一 但是對新手來說,常常覺得很難學,原因有兩個: 第一,這語言不斷在變化,很多新語法、新功能,不斷出現,導致學習的時候眼花撩亂 第二,傳統的程式設計教法,從變數、迴圈、邏輯,一個一個開始教。我發現對很多人來說,這種學習法有點無聊,也無法培養興趣&信心 所以我決定換個方法教教看,設計了一套課程,不斷實作一些「實務上常見的功能」。什麼都不教,直接要求大家開始寫「小專案」 也就是從第一課就開始做小專案、每一課都做小專案,然後在過程中,順便吸收會用到的、必備的、相關程式設計觀念 如果您是對程式設計零基礎、想找一份有趣的教材試試,歡迎閱讀這份教材! 在開始之前,您需要先具備基本的 HTML、CSS 知識。 還不會的朋友,請先完成: - [自學網頁の嬰兒教材:HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) 準備好的話,讓我們馬上開始吧!
大家好,有沒有想學寫網站的朋友呢? 隨著智慧型手機的普及,現在的網站畫面必須同時滿足電腦、手機螢幕,甚至是平板電腦的需求。 要如何做出能在各種寬度的螢幕都 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 新聞頁面並沒有這些東西。 完成這些,你就完成這次的課程目標了!
# 第4課 課程目標 學會使用 Bootstrap 的卡片元件。 # 第4課 課程內容 卡片式設計近幾年非常流行,在各大網站中都看得到它。 它的功能非常通用,可以在各種場景中使用,這一課要學習使用它。 請閱讀入門教學: https://www.w3schools.com/bootstrap5/bootstrap_cards.php 以及官方說明文件: https://getbootstrap.com/docs/5.3/components/card/ 內容不用全部讀完,也不用全部讀懂,能做出基本的卡片設計即可。 # 第4課 作業 這一課的作業要延續第3課的作業二。 在上一次的作業中,我們做出了整個 Yahoo 新聞首頁的排版,不過各區塊的內容都簡化了。 我們這一次要把內容補上,讓畫面變豐富。 請利用本課學到的卡片元件,在畫面中所有看起來像卡片的地方,全部套用卡片元件,讓卡片元件內有圖片、文字。 做完之後,整個畫面看起來會更接近真正的 Yahoo 新聞首頁。 注意:實際上 Yahoo 新聞首頁的卡片元件不多,幾乎都不是卡片元件(比如說根本沒有邊框)。 這一課作業是以練習為主,把看起來能套用卡片的地方套用就好,套不進去的地方維持原本的陽春即可。或是到處都套用卡片元件也沒關係,看起來類似原本的 Yahoo 新聞首頁即可。 完成這些,你就完成這次的課程目標了!
# 第3課 課程目標 能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課 課程內容 業界工程師會去使用 Bootstrap,除了美感之外,通常還有一大理由就是想用它的網格系統。 以網頁設計常見的多欄式設計來說,手寫 html 跟 css 實在有點麻煩: [CSS DIV 兩欄式網頁排版](http://www.wibibi.com/info.php?tid=406) [CSS DIV 三欄式網頁排版設計](http://www.wibibi.com/info.php?tid=407) 所以來學習簡單好用的網格系統吧! 請閱讀以下教學的內容: https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出基本的多欄式網頁佈局即可。 # 第3課 作業 繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列,這一課的作業有兩個。 ## 作業一 請繼續修改之前的作業,除了新聞內容與導覽列之外,請接著利用 Bootstrap 網格系統將整個頁面都做出來。 請至少將側邊推薦其他新聞的區塊做出來,其餘的可以省略。 ## 作業二 請再開一份 Glitch 專案,我們要做 Yahoo 新聞的首頁: https://tw.news.yahoo.com 我們要用 Yahoo 新聞首頁來練習多欄式排版。 請利用 Bootstrap 網格系統,將整個首頁的排版都切出來。 各個區塊的內容盡量省略、簡化,利用純文字或是 `<ul>、<li>` 清單元素,只放標題跟一些文字即可。 完成以上兩份作業,你就完成這次的課程目標了!
# 第2課 課程目標 學會使用 Bootstrap 的 Navbar 元件。 # 第2課 課程內容 本課內容非常非常簡單,只要能在網頁上做出導覽列就可以了。 請參考: https://www.w3schools.com/bootstrap5/bootstrap_navbar.php https://getbootstrap.com/docs/5.3/components/navbar/ 內容不用全部讀完,也不用全部讀懂,把其中的程式碼貼一貼,把玩一下,能做出一個最簡單的導覽列即可。 # 第2課 作業 上一課的作業,我們模仿 Yahoo 新聞的內容,做了一個簡單的新聞文章頁面。 請繼續修改這份作業,將 Yahoo 新聞上方的導覽列做出來。 你將會發現,使用 Bootstrap 能夠快速做出導覽列,比自己用手寫 html、css 方便且快速多了! 完成這些,你就完成這次的課程目標了!
# 第1課 課程目標 學會安裝 Bootstrap。 # 第1課 課程內容 第一課只要學會如何安裝 Bootstrap 就可以了。 Bootstrap 安裝好之後,瀏覽器預設的 h1, h2, h3, p 等等基本元素的樣式就會被覆蓋。 會變成 Bootstrap 的預設樣式,會更漂亮。 在網頁中引入 Bootstrap 的 css 與 js 檔的方式有很多,其中最簡單的是直接引入 BootstrapCDN 的線上檔案,連下載檔案都不用。 請閱讀一些 Bootstrap 基本觀念: https://www.w3schools.com/bootstrap5/bootstrap_get_started.php https://www.w3schools.com/bootstrap5/bootstrap_typography.php 然後參考官網的 BootstrapCDN 段落: https://getbootstrap.com/docs/5.3/getting-started/download/ --- 對於引入外部檔案的觀念不熟悉的話,請參考這份的「External Style Sheet」段落: https://www.w3schools.com/css/css_howto.asp 以及這份的「JavaScript in External File」段落: https://www.tutorialspoint.com/javascript/javascript_placement.htm # 第1課 作業 請打開:[Yahoo奇摩新聞](https://tw.news.yahoo.com) 找一篇你喜歡的新聞,把新聞內容打出來。 接著打開 [Glitch](https://glitch.com/),用 Glitch 來寫這次的作業。 只要打出文章標題與內容就好,上方的導覽列、旁邊的新聞頭條那些區塊都不用。 做完之後,你會發現,雖然只用了 h1、p、br 等等基本元素,但是套用 Bootstrap 之後,整個畫面自動變漂亮了! 完成這些,你就完成這次的課程目標了!
大家好,有沒有想學寫網站的朋友呢? 坊間大部份的網頁入門課程,在教完基本的 html 與 css 之後,接著就會教 [Bootstrap](http://getbootstrap.com) 這個工具包。 究竟 Bootstrap 是什麼呢? 其實它只是一個寫網頁的懶人工具包,幫助你美化頁面的設計感,並且提供你網頁設計常用的一些元件。 聽再多介紹,不如親自動手實作! 我整理了一份有趣的 Bootstrap 自學教材,每堂課附有一個小作業。 會帶領大家在作業中,以新聞媒體的網站為範例,一步一步利用 Bootstrap 把網頁打造出來。 剛開始入門網頁設計的朋友,很適合接著來學習 Bootstrap 喔! 您只要具備基本的HTML與CSS基本知識就可以了 (還不會的朋友,請先完成自學網頁の嬰兒教材:HTML與CSS) https://codelove.tw/@howtomakeaturn/course/Ja6JaO 歡迎您試試看這份教材!
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!