自學網頁の嬰兒教材:第2課 ── CSS 輕入門: https://jsfiddle.net/applelily/4kuo01L6/ --- 自學網頁の嬰兒教材:第3課 ── 網頁排版: https://jsfiddle.net/applelily/xcr3jzfe/3/ --- 自學網頁の嬰兒教材:第4課 ── 好用的表格: https://jsfiddle.net/applelily/m10zqh76/8/ --- 自學網頁の嬰兒教材:第5課 ── 用力送出表單: https://jsfiddle.net/applelily/v3ju1Lbr/73/ --- 自學網頁の嬰兒教材:第6課 ── 在自己電腦上寫網頁: https://jsfiddle.net/applelily/23gu1qzb/2/ --- 自學網頁の嬰兒教材:第7課 ── 大感動!我也有個人網頁了!: https://jsfiddle.net/applelily/7r4s0gLo/1/ ---
身為前端新手學習者,雖然你已經知道怎麼寫 UI 小元件、怎麼寫簡單小工具 但是看著自己每天在用的那些網站、大型科技公司開發的 web application(網路應用程式) 你一定常常心想:這也太華麗了,畫面上 DOM 的變化很複雜、很頻繁,我好像寫不出來呀? 別擔心,這是因為你目前為止的技能與開發方法,大概只接近 2010 年以前的業界工程師 你目前為止的能力還是比較接近「能把東西設計出來、做出來」而已,還不能夠「帶著工程思維去建造應用程式」 --- 這一門課程,會教你現代前端工程師,開發應用程式的方法與技巧 雖說是現代技巧,但完全不會用到 React 或者 Vue 這種框架 但在學完之後,你將可以比別人更懂,各種框架背後的基礎原理 這些內容非常有趣,將會大幅提升你的「工程素養」,讓你具備遠超過一般新手的基本功! 在開始之前,您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友,請先前往自學課程頁面,完成「自學網頁の嬰兒教材:HTML與CSS」與 JavaScript 相關系列課程 準備好的話,讓我們馬上開始吧!
如果你是網頁設計師,或者開發的網站以公司介紹、形象網站為主 那麼目前為止的課程,已讓你具備相當的動態網頁開發能力 各種特效與視覺效果,你都做得出來 甚至更複雜的動態效果,直接上網找現成的套件,也都不是問題,你都能夠自行研究&導入了 不過,如果需要開發與伺服器互動的應用程式,例如電子商務網站 或者是更多功能的工具類型網站,例如各種生產力工具 那麼就需要學習本課程的內容,包含 Cookie、Local Storage、與 Ajax 的說明 這些內容非常有趣,能讓你開發出各種多功能的前端應用程式,讓工程師的創造力有更多發揮空間 在開始之前,您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友,請先前往自學課程頁面,完成「自學網頁の嬰兒教材:HTML與CSS」與 JavaScript 相關系列課程 準備好的話,讓我們馬上開始吧!
進入到 JavaScript 基礎課程的第四部份 你已經算是有了初步的前端開發與設計能力了 實務上,我們在專案中大部份的功能、元件,都會去找找看「現成的」、「開源專案」來使用 也就是如果已經有人做過了、有人分享過了,如果堪用,基本上就不會自己重做一個 因為成本差太多,什麼都自己做實在太花時間、花金錢 這一課我們稍微認識一下開源生態系,用用看這些現成套件 這些東西,我們叫:「第三方套件」,或者插件、外掛,都可以 我會分享幾個我自己在滿多專案都會用的套件,順便在這過程學習一些知識 在開始之前,您需要先具備基本的 HTML、CSS、JavaScript 知識 還不會的朋友,請先前往自學課程頁面,完成「自學網頁の嬰兒教材:HTML與CSS」與 JavaScript 相關系列課程 準備好的話,讓我們馬上開始吧!
本課程為 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) 準備好的話,讓我們馬上開始吧!
本課程為 JavaScript 基礎課程的第二部份 第一部份的專案練習,已經學習到程式設計的基本觀念 第二部份,將藉由另一個專案,接著學習更多程式設計觀念 在開始之前,您需要先具備基本的 HTML、CSS、JavaScript 知識。 還不會的朋友,請先完成: - [自學網頁の嬰兒教材:HTML與CSS](https://codelove.tw/@howtomakeaturn/course/Ja6JaO) - [自學網頁の嬰兒教材:JavaScript(一)—— 幫衣服工廠做個好用表單](https://codelove.tw/@howtomakeaturn/course/l3j5xk) 準備好的話,讓我們馬上開始吧!
大家好,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) 準備好的話,讓我們馬上開始吧!
# 第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 完成這些,你就完成這次的課程目標了!
大家好,有沒有想學寫網站的朋友呢? 坊間大部份的網頁入門課程,在教完基本的 html 與 css 之後,接著就會教 [Bootstrap](http://getbootstrap.com) 這個工具包。 究竟 Bootstrap 是什麼呢? 其實它只是一個寫網頁的懶人工具包,幫助你美化頁面的設計感,並且提供你網頁設計常用的一些元件。 聽再多介紹,不如親自動手實作! 我整理了一份有趣的 Bootstrap 自學教材,每堂課附有一個小作業。 會帶領大家在作業中,以新聞媒體的網站為範例,一步一步利用 Bootstrap 把網頁打造出來。 剛開始入門網頁設計的朋友,很適合接著來學習 Bootstrap 喔! 您只要具備基本的HTML與CSS基本知識就可以了 (還不會的朋友,請先完成自學網頁の嬰兒教材:HTML與CSS) https://codelove.tw/@howtomakeaturn/course/Ja6JaO 歡迎您試試看這份教材!
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!