iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0

https://ithelp.ithome.com.tw/upload/images/20221007/20148082aaSg4YL57K.jpg
https://ithelp.ithome.com.tw/upload/images/20221007/20148082BUBEHSIwZ8.jpg
產品登入頁

fcc範例頁

今天一看居然任務頁面全部漢化了!太強啦!


一頁式網站 (Landing Page)

又來到了證書認證的任務,隨著學會的CSS樣式漸漸增加,試著模仿範例所給的網頁,寫出一篇一頁式網站,就是此次任務的目的。

任務要求包括:
html 部分

  • 上方要有header,並且有一個img圖案(就是logo)。
  • header中需要一個選單,用來跳轉到指定的位置。
  • 嵌入一個可以撥放的vedio
  • 一個可以填入emailform元素,並且表單內有一個submit的提交按鈕。

CSS 部分

  • 至少一個媒體查詢@media
  • 至少使用一次彈性盒子佈局

Visual Studio Code

在fcc打上這些程式碼的時候,總是手殘一直打錯,尤其任務為了練習,重複的元素或樣式會一再出現(這時候就會想複製貼上),如果這個時候有一個地方可以更直覺更輕鬆的輸入程式碼就好了......
對啦就是標題這個東東,是由微軟提供的編輯器,至於如何使用與下載呢?點選下面鐵人賽的大大有介紹(我超懶..XD)

介紹Visual Studio Code by chg200

利用編輯器事半功倍的完成產品登入頁吧。

下篇:遊樂園(上)


引用與資源:
freecodecamp
我的產品登入頁


上一篇
Day21 - 雜誌(下) (隱式格線屬性)
下一篇
Day23 - 遊樂園(上) (animations,@keyframes;關鍵影格)
系列文
30天讓你爺爺取得 FreeCodeCamp 響應式網頁設計證書30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言