還不會目前業界最為流行的響應式網頁設計嗎？六角學院線上手把手教會你！
歡迎來到第三步學習途徑！
現在的你已經學會了網頁的基本架構了，可是你是否曾經納悶過，如果網頁設計在不同裝置上，版面也能夠一樣完美呈現嗎？ 這時候就是讓我們再學習更進階的網頁技巧的時候了。
透過這門課程，將帶著你學會兼容各種螢幕解析度的網頁設計！
不知道你有沒有過以下經驗——
想要透過手機直接瀏覽一個網頁介面，不過當網頁內容直接縮小至一個手機螢幕的大小時，卻發現同一個頁面在手機裝置中變成了一個非常不好的瀏覽體驗。這樣的狀況在早期更是常見，使用者在瀏覽手機螢幕時因螢幕解析度的不同，不得已得透過手動的方式放大局部網頁內容觀看，因操作困難導致而留下了不好的使用者體驗。
如何解決這樣的問題呢？
如果希望能夠根據螢幕解析度變換網頁的呈現方式，這時候我們就可以使用「響應式網頁設計」的技術。
兼容各種螢幕解析度的網頁設計！
RWD（Responsive Web Design） 即為中文的響應式網頁設計，目前是使用最新的 HTML 5 和 CSS 3 框架，主要皆是使用 CSS 3 Media Queries 語法來使用響應式設計。因此，在上述情境中，透過 RWD 的技術，當桌面版的瀏覽版面轉移至手機頁面時，即使為同一個網頁介面，在手機螢幕上的呈現方式會自動轉換為單欄式的介面，方便使用者閱讀。 這樣的技術能夠讓程式碼自動判斷螢幕解析度，讓使用者透過不同的裝置中依舊能夠得到合適的瀏覽介面，擁有一致的視覺品質效果。
1. 突破程式碼的語法限制：透過動畫讓你理解原理
對於教學只有程式碼是不足夠的，在重要的觀念傳達部分，六角講師製作大量的說明動畫來介紹，讓同學們能夠在了解原理後再細看與釐清的程式碼架構。
2. 視覺體驗更上一層樓：專屬行動裝置的超實用技巧
行動版網站只有版面切換是不足夠的，課程中還會補充許多行動版網站動態效果，優化網站中的使用者體驗。
不過也提醒各位同學，因課程已錄製完成，課程中的口述以及畫面內容、提供的統計數據、常用範例等，都是以 iPhone 6、iPhone SE 的手機為當時常用機型的情況講解。如果同學因機型以及螢幕大小的不同而有疑問的話，建議可以主動詢問六角專業的助教們喔！
3. 除了傳授技術也帶給你跟客戶溝通的專案心法，讓開發過程更順利！
行動版網站已勢不可當，在人手一支手機的情況下，各家廠商都想要加入行動版的網站。除了知識技能，也會提到相關 UI 設計的觀念以及不同部門合作、用戶溝通心法，幫助作為初學者的你在前端開發的旅程中能夠更順利，是一堂兼具豐富性和實用性的一門課程喔！
誰適合這門課程？
- 已經會 HTML、CSS 的網頁初學者
- 想要了解更多網頁排版細節的潛在網頁工程師、網頁師
我將從這堂課程學到什麼？
- 掌握響應式網頁設計細節
- 了解如何跨部門協作響應式網頁設計
- 懂得如何以 UI / UX 角度設計好的響應式網頁設計
上課前的注意事項
因這是學習途徑的第三步，如果你還沒有上過以 HTML、CSS 語言為主的第一堂課程，和透過 jQuery 做出網頁動態的第二堂課，建議先確保自己是否已具備以下條件來評估這堂課程適不適合你喔！
- 有 HTML、CSS 的基本概念
- 需要安裝 Chrome 網頁瀏覽器
- 需要安裝 Sublime Text 3網頁編輯器
擔心自己不具備以上條件嗎？看看六角系列課程中更基礎的課程：
第一堂課程 | 使用 HTML、CSS 開發一個網站
第二堂課程 | 使用 jQuery 打造互動性網頁動畫效果
從講解基本觀念開始，帶你輕鬆入門
從基礎知識開始，例如程式碼的環境架構、語言介紹等，讓作為新手的你能夠更好理解何謂響應式網頁設計。在前面的章節單元中，老師會先從說明 CSS 3 的 Media Queries 的觀念、語法教學、框架設定開始，讓已經學過 HTML、CSS 的你能夠跳脫基礎框架、掌握更進階的技能，輕鬆駕馭不同裝置的瀏覽介面。
章節 1 | 課前說明章節 2 | 基本環境介紹章節 3 | 常見版型佈局設定結合技術與設計心法，幫助你打造更好的視覺體驗
在正式帶領你進入響應式技巧前，為了帶給使用者更好的視覺體驗，老師將先從 UI 設計的角度的基礎觀念解說開發者應該注意的細節，例如常見動向設計、端點時機與規劃、響應式的表格、表單、圖像設計等，幫助你更好的整合網頁應該有的元素與模組，掌握網頁設計細節。課程除了交給你必備的知識技能外，老師也會將長期在業界中的開發經驗淬煉為實作心法帶給你，讓你更好的判斷不同視覺元素能夠更好運用的時機。
章節 4 | 以 UI 設計角度切入響應式設計該注意的細節章節 5 | 斷點規劃章節 6 | 響應式表格與表單設計章節 7 | 響應式圖形設計章節 8 | 常見響應式設計選單一步一腳印的實作，讓你的響應式網頁設計更專業
看過許多老師的講解後，相信你已等不及自己試試看了，不過，在讓你開始做作業實作前，老師還是會細心帶領你一步步走過在開始實作前需要注意的幾點事項，包括如何確定 media 設定、撰寫的規範，以及課程作業的詳細說明等，讓你在後續的實作上可以更順利。
章節 9 | 開始實作前的注意事項章節 10 | 最後，讓你的響應式網頁設計更專業學習永遠不嫌多，專案協作技巧和彩蛋課程都給你！
當你以為課程已進入到尾聲時，六角學院又為你帶來了更多技術與知識內容！在最後的章節中，老師將無私的與你分享與客戶的協作心法，從如何說服使用響應式網頁設計開始，到必備的業務與企劃能力，讓你在職場中不只能夠成為最具技術的前端開發者，同時也是最能夠得到大家青睞的合作好夥伴。課程的最後，更是新增了彩蛋課程給大家，讓你能夠更精進自己的技術！
章節 11 | PM、Sales、Art、F2E、Backend 之間如何真心合作章節 12 | 彩蛋課程：Sass、RWD 無痛整合，提升網頁開發效率章節 13 | 彩蛋課程：視差滾動網頁設計章節 14 | 響應式工具與服務介紹
在這門課程中，六角團隊設計了兩種作業給你練習！
單元作業
這堂課程將會有兩項單元作業，能夠讓你實際應用與驗證該單元所學是否正確。在課程單元列表中會有詳細關於該單元建議完成的作業項目和指引！
【最終試煉】一變應萬變的響應式網頁設計
在這堂課程中，除了學會行動版網頁設計外，課程中還包含大量的實戰技巧及業界絕妙手法，讓你學完課程馬上進入實戰也不慌忙！當你完成所有課程內容後，六角團隊將賦予你一個更大規模的實作任務，完成「最終作業」意味著你已成功達成課程目標囉！
🚩 點我看最終作業設計稿，一起看著設計稿融合最新學習的技術實作看看把！
透過六角助教的批改與回饋，達成以下兩個條件才算是完成任務喔！
條件 1 | 成績評等有達 A 的成績條件 2 | 做完任務資訊裡提供的設計稿中，三至四個頁面 RWD 切版在完成這堂課程的最終試煉任務後，你將獲得以下兩個重要技能！
- 響應式的斷點設計
- 響應式切版技巧與排版觀念
要如何承接任務，並讓六角助教團隊批改我的作業呢？
步驟 1 | 註冊「程式勇者村」帳號
「程式勇者村平台」為六角專為學員設計的學習輔助平台，如果還沒有註冊過該平台帳號，在繳交作業之前記得先註冊專屬自己的「程式勇者村」帳號喔！
步驟 2 | 到「程式勇者村」承接專為課程設計的【最終試煉】任務
登入程式勇者村 後，可以回到 Hahow 課程中「最後，讓你的響應式網頁頁面更專業」的第十章節，在此章節中會有「【最終試煉】一變應萬變的響應式網頁設計」詳細執行，和專屬作業的設計稿和圖片檔喔，讓你知道應該如何操作喔！
步驟 3 | 回報任務
完成作業後，可以在課程任務連結中的「回報任務」的留言系統，提交希望給助教檢視的任務內容，六角助教在完成批改後，將提供專屬回饋，確保你理解課程內容。 你還可以在同一頁面中的「任務對話欄」和助教討論繳交的內容喔！⚠️ 繳交作業的注意事項
提交作業檔時，請使用 Google Drive、Dropbox、GitHub Repo 任一來提供網頁壓縮檔，還請記得開啟公開權限，六角助教才能進行下載流程。傳送作業前，可先開 Chrome 無痕視窗，觀察是否能提供下載，確保六角助教能夠進行下載作業批改，才能夠提供給你回饋喔！ 作業批改與問題回覆
除了課程的【最終試煉任務】外，在課程中還會有單元作業提供給你更多練習的機會。
建議同學一定要完成單元作業，唯有透過實作的當下，才真正明白自己是否完整領會、吸收。如果作業太難也歡迎將遇到的困難與問題紀錄下來，向六角助教們發問、求救喔！
回覆問題：六角助教會以每週二次的頻率上來回覆大家的問題喔！同學們如果有疑問歡迎留言發問，等待助教的解答喔！批改作業：六角助教會以每週一次的頻率上來批改大家的作業，建議一定要繳交作業才可以得到助教的回饋，幫助你進步喔！❗️ 如時間有更動請參照 Hahow 公告為主喔！
六角學院的校長：廖洧杰
- 高雄前端社群發起人
- 中華電信前端講師
- 高雄大學前端講師
- 十年實務經驗，授課時數超過一千小時
熱愛分享與交流的前端工程師，目前專注於兼容桌面/移動網頁前端開發，期間已協助數百位平面設計師，網頁設計師導入標準網頁設計。
關於六角學院
六角學院是一所線上程式開發學習單位，目前已累積超過 20,000 名學員，讓更多人藉由線上學習在職涯規劃上有更多的選擇是我們的使命是，如果您贊同我們的理念，歡迎加入六角。
什麼是「合作優選」的課程？
「合作優選課程」為 Hahow 向外探尋、精心挑選進來的優質課程 ，讓渴望深度學習的你，在 Hahow 擁有更多選擇！
價格保證
「合作優選課程」讓你放心！只要你可以在其他網站以更低的價格購買到相同課程，我們將協助全額退費，詳細說明請參考相關政策。
