第6課 課程目標

運用目前所學到的技巧,完成一個完整的 RWD 網頁。

第6課 課程內容

這門課到目前為止所教的技巧,只有運用 Bootstrap 快速、方便的做出網頁排版。

我們並沒有深入去研究背後 css 原理以及太多進階 css 技巧。

很棒的是,光是這些基本 Bootstrap 應用以及 css,就足以應付實務上的許多需求了!

這次要試著用你在這門課學到的技巧,試著做出一個完整的 RWD 網頁。

第6課 作業

請打開美國時代雜誌的網站首頁:

http://time.com

在之前的作業,我們只做了藍色圈起來的部份。

這一課的作業,我們要把整個時代雜誌首頁做出來!

你的作業需要滿足下列三個要求:

  • 在電腦上能順利瀏覽
  • 在平板上能順利瀏覽
  • 在手機上能順利瀏覽

時代雜誌的首頁有幾個進階的元素,例如影片、投影片元素。這些進階的元素可以省略不做。

除此之外,單純文字與圖片的部份,請儘可能的重現出來。

完成這些,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


每週二 YT 直播問答,DC 可 Call-in,一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務:阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組(非官方)👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA

共有 2 則留言

免費

RWD 網頁設計入門:Bootstrap —— 做出手機、平板、電腦上都 OK 的網頁

現在的網站畫面必須同時滿足電腦、手機螢幕、平板電腦的需求,這門課教你如何做到!


每週二 YT 直播問答,DC 可 Call-in,一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務:阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

管理台灣 Shopify 開發者 LINE 群組(非官方)👇👇👇
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA