課程類別

所有

生活

設計

商業

語言

科技

課程類別

全部
生活
設計
商業
語言
科技

超易懂 RWD 網頁前端攻略

位學員

  • （0 則評價）

回頂端

超易懂 RWD 網頁前端攻略

線上課程

NT $3200

課程組合優惠
    <%for packageList%>
    • <%/for%>
<%:data.pce_name%>

[包含 <%:data.courses.length%> 堂課程]

<%for data.courses%>
<%/for%>
組合優惠 <%:~currency(data.bundle_price,'NT')%>

額外省下 <%:~currency(data.discount,'NT')%>

課程介紹

課程公告 

老師為提供給學員最好的課程品質，下一批課程預計於9/14(五)上架喲，請學員耐心等待，如在課程中有遇疑問或想與老師討論的問題，歡迎至『討論區』發問唷，老師將為您解惑。



購課達標100人｜加碼教學【pug樣板語言教學】 已達標!!!
pug 樣板語言以前叫做 jade，透過 tab 縮排寫法，有效解決標籤閉合不全問題並可加速 HTML 開發速度。

購課達標200人｜加碼教學【Sass教學】 即將達標!!!
Sass 簡單來說是威力加強版的 CSS，它將一般程式擁有的邏輯運算與變數等概念帶入 CSS 中，讓我們在開發網站時，可以更有效的解構 CSS，加速 CSS 開發並提高 CSS 維護性。



▷你想要成為超強前端工程師，但卻......？ 

❝ 對於網站架構霧煞煞，不知道如何入門 ❞

❝ 總覺得 HTML、CSS 不夠熟悉，寫 JS 時常常撞牆 ❞

❝ 覺得自己經驗值不足，想學 RWD 提升職場競爭力 ❞



響應式網頁設計（Responsive Web Design）簡稱 RWD，使用 RWD 設計網頁，在不同解析度下改變網頁頁面的佈局排版，讓使用者在不同的設備上都可以享受最佳的視覺體驗，瀏覽同一網站。根據國發會的研究，每 100 人使用手機就有 87 個人用來上網，且手機上網比例已經大幅超過電腦，如果網站還是只能用電腦看，那就大幅流失了大量的手機潛在顧客，所以現在網站可以跨平台已經是基本配置。如果你還在學怎麼做電腦版網站，那已經快變考古學了，趕快加入 RWD 跨平台的行列，學習目前最夯的 RWD 網頁吧！




正課搶先看▷CSS 重要概念「區塊排版 Box Model」




系統教學 ➜ 穩扎穩打，透過實作訓練加強記憶 

實務導入 ➜ 模擬作戰，讓你真的上場也不害怕 

特製教材 ➜ 精心製作，如獲武功秘笈功力大增 

經驗分享 ➜ 不怕難題，常見問題一次幫你解答 

作業檢測 ➜ 檢視學習，講師親自批改給予建議



草監網路｜部落格：https://nowills.blogspot.tw/

品禾全端網路工作室負責人、Nowill Design 團隊隊長－Nowill，曾出版過網頁設計書籍、擔任響應式設計（RWD）與網站前瞻性設計講師，也曾獲頒 Site Of The Day 與 Honorable Mention 網頁設計獎。



✔︎ 相關科系學生 

✔︎ 專案 / 產品經理

✔︎ 視覺 / 網頁設計師

✔︎ 前端 / 網頁工程師



◆ 學會 HTML 與 CSS 

◆ 可運用 jQuery 與相關常用套件 

◆ 完整建置出一個 RWD 網站 

◆ 瞭解網站前端開發 SOP 流程


常見問題

Q1. 上課前，需要準備什麼工具與先備知識嗎？

不會任何前端基礎與知識的同學也可以上課唷！

上課前只需準備一台電腦和一顆熱愛學習的心。

Q2. 這門課可以看多久？ 

購課後享不限次數、永久觀看，可以一直看一直學！

Q3. 可以問老師問題嗎？ 

當然！歡迎到「購課問答」詢問 ; 當學習遇到問題時，也歡迎到「課程討論區」與老師同學一同互動。

Q4. 我要如何購買課程呢？ 

非常的簡單！在你的右手邊有「立即購買」的字樣，點進去就對啦！

Q5. 目前有哪些付款方式呢？ 

目前 YOTTA 提供三種付款方式： 

a/ 信用卡付款 ( (可使用 Visa / Master / JCB) 

b/ 超商代碼付款 (7-11、全家、萊爾富、OK 即可繳費)，繳費步驟說明：http://bit.ly/2urNAqL

c/ ATM 轉帳

Q6. 為什麼我已經付款了，訂單狀態仍顯示未付款？ 

a/ 選擇「超商」方式付款，金流處理時間需 5~15 分鐘。 

b/ 選擇「ATM」方式付款，銀行金流處理時間需要 1 個工作天，等金流完成入帳後，「訂單狀態」將會轉為顯示「已付款」，再麻煩稍待幾天。

Q7. 請問什麼時候會收到發票？ 

購買課程完成繳費後，電子發票會在收到銀行端入帳通知後三天內開立，並透過您註冊的 E-mail 寄送給您。

Q8. 我還有其他問題！ 

請直接參考 YOTTA 平台操作說明：http://bit.ly/2nB1bs6

Q9. 看不到募資影片嗎？




  • 0
    學員     0 人
  • 永久 觀看
  • 6 章節
     43 單元
  • 12 小時
    16 分鐘     736 分鐘
  • 11 份
    教材     11 教材
  • 8 份
    作業     8 作業
已上架 43 單元
  • 一、課前須知
    4 單元・0 小時 17 分鐘
  • 1 1-1 什麼是網頁前端 02:57
  • 2 1-2 為什麼要學HTML、CSS、javascript（jQuery） 試看 05:03
  • 3 1-3 本課程會教你的範疇與成果 02:02
  • 4 1-4 使用工具說明（sublime、vs code、prepros） 07:27
  • 二、開始學習網頁前端
    17 單元・3 小時 37 分鐘
  • 5 2-1 Hollow World 這樣寫 06:24
  • 6 2-2 HTML5 常用教學－結構 07:31
  • 7 2-3 HTML5 常用教學－元素 10:19
  • 8 2-4 HTML5 常用教學－表單 11:54
  • 9 2-5 CSS 常用教學－id 與 class 08:53
  • 10 2-6 CSS 常用教學－box model 試看 09:50
  • 11 2-7 CSS 常用教學－排版 15:28
  • 12 2-8 CSS 常用教學－元素與選擇器 22:27
  • 13 2-9 emmet 工具使用 05:18
  • 14 2-10 javascript 介紹 12:16
  • 15 2-11 javascript 邏輯運算教學－if else 與 switch 12:43
  • 16 2-12 javascript 邏輯運算教學－for 與 while 09:22
  • 17 2-13 jQuery 常用語法教學1 試看 11:44
  • 18 2-14 jQuery 常用語法教學2 20:27
  • 19 2-15 jQuery 常用語法教學3 28:26
  • 20 2-16 jQuery 常用套件1 13:05
  • 21 2-17 jQuery 常用套件2 11:38
  • 三、RWD 實作
    13 單元・5 小時 30 分鐘
  • 22 3-1 開工前的準備－談檔案結構 11:36
  • 23 3-2 為什麼要學RWD？ 試看 11:30
  • 24 3-3 常見網站專案流程 06:39
  • 25 3-4 前端與設計共同都需要的認知 07:38
  • 26 3-5 常見三種版型實作－單頁排版1 試看 35:58
  • 27 3-6 常見三種版型實作－單頁排版2 29:47
  • 28 3-7 常見三種版型實作－側欄排版1 42:16
  • 29 3-8 常見三種版型實作－側欄排版2 35:34
  • 30 3-9 常見三種版型實作－漢堡選單1 36:56
  • 31 3-10 常見三種版型實作－漢堡選單2 25:55
  • 32 3-11 購物網站實作-最新消息與產品列表 25:13
  • 33 3-12 購物網站實作-產品頁與購物車 26:32
  • 34 3-13 購物網站實作-結帳頁 34:48
  • 四、RWD實作
    6 單元・2 小時 5 分鐘
  • 35 4-1 Bootstrap 4 介紹 17:08
  • 36 4-2 Bootstrap 4 運用實例 - 單頁排版 39:43
  • 37 4-3 Bootstrap 4 運用實例 - 管理後台排版1 28:24
  • 38 4-4 Bootstrap 4 運用實例 - 管理後台排版2 18:34
  • 39 4-5 RWD常見問題 11:56
  • 40 4-6 網站上線前的檢查 09:44
  • 五、前端職業生涯規劃
    2 單元・0 小時 20 分鐘
  • 41 5-1 前端職業發展規劃 11:11
  • 42 5-2 前端面試常見問題 09:47
  • 六、解鎖課程（僅限購課者觀看）
    1 單元・0 小時 23 分鐘
  • 43 pug 樣板語言教學〔100人解鎖〕 23:56

作業觀摩

<%if data.rows.length > 0 %>
<%props data.rows%>

作業 <%>~toInt(key) + 1%> <%:prop.title%>

<%if prop.rows.length > 0 %>
<%:~loadTmpl('homework-card2', prop.rows)%>
<%/if%>
<%if prop.rows.length > 0 && prop.total_page > 1%>

正在載入更多...

<%/if%>
<%/props%>
<%if data.total_page > 1%>

正在載入更多...

<%/if%> <%else%>

目前沒有出作業唷！

<%/if%>
<%if data.rows.length > 0 %> <%props data.rows%>

作業 <%>~toInt(key) + 1 + ~toInt(prop.pageNow)%> <%:prop.title%>

<%if prop.rows.length > 0 %>
<%:~loadTmpl('homework-card2', prop.rows)%>
<%/if%>
<%if prop.rows.length > 0 && prop.total_page > 1%>

正在載入更多...

<%/if%>
<%/props%> <%/if%>
<%props data%>
<%if prop.type == 'image'%><%if prop.cover %>
<%:~isGif(prop.cover)%>
<%else%>
<%/if%><%else prop.type == 'pdf' %>
<%else prop.type == 'youtube' %>
<%else prop.type == 'ppt' %>
<%else prop.type == 'sound' %>
<%/if%>
<%if prop.visible == 1 %><%/if %>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%:prop.user%>

<%if prop.isAuthor == true %>刪除編輯<%/if %>

<%:prop.comment_count%> 則討論

<%/props%>
<%props data%>

<%:prop.user%>

<%if prop.visible == 1 %><%/if %>
<%if prop.type == 'image'%><%if prop.cover %>
<%:~isGif(prop.cover)%>
<%else%>
<%/if%><%else prop.type == 'pdf' %>
<%else prop.type == 'youtube' %>
<%else prop.type == 'ppt' %>
<%else prop.type == 'sound' %>
<%/if%>

<%:~formatDate(prop.create, 'YYYY-MM-DD')%>

<%:prop.title%>

<%if prop.isAuthor == true %>刪除編輯<%/if %>

<%:prop.comment_count%> 則討論

<%/props%>

正在載入更多...

錄音 <%:~numToZH(sort + 1)%>

錄音 <%:~numToZH(sort + 1)%>

來關注最新的課程資訊吧！

這裡是專屬課程的公告區，老師將在此發佈與課程相關的重要資訊，你可以查看所有與課程有關的最新公告。

目前沒有任何公告唷

<%props data%>

<%:~formatDate(prop.publishDate, 'YYYY/MM/DD')%>

<%:prop.title%>

<%if ~root.isStudent === false && ~root.isTeacher === false && prop.permission === 'private' %>

本篇公告內容僅限定購課學員閱讀唷！

<%else%> <%:prop.content%> <%/if%>
<%/props%> <%if total_page > page + 1%>

正在載入更多...

<%/if%>