〖網頁挑戰〗 Ping coming soon page

開始接觸網頁開發後，發現自己缺乏實作經驗，
於是老師推了 Frontend Mentor challenge ，
免費的通常是獨立頁面，花錢則是可以挑戰多頁式網站，
初學還沒學到 javascript 或 API 也沒關係，
新手也有提供 HTML/CSS 的練習。
很適合用來增加自己寫網頁的經驗，甚至可以記錄自己學會了什麼。

這次我選擇 ping coming soon 的網頁，要完成下列挑戰：

• 根據裝置尺寸更改網頁佈局
• 設定游標懸停時的樣式
• 驗證 email 格式 並顯示錯誤訊息
• 輸入欄位為空時 顯示不同的錯誤訊息

先做切版，規劃好之後才開始寫程式碼，
接下來就會寫得很順，不必來回修改。

使用 line-height 垂直置中

社群媒體的圖示使用 Font Awesome ，
只是圖案使用外框線後，沒有垂直置中，
所以將 line-height 跟 height 設定相同數值，達到置中目的。

.social-media a {
    /* display */
    display: block;

    /* box model */
    width: 36px;
    height: 36px;
    margin-right: 15px;
    border: 1px solid hsl(223, 100%, 88%);
    border-radius: 50%;

    /* font & other */
    text-decoration: none;
    line-height: 36px;  /* 和高度一樣數值 垂直置中 */
    color: hsl(223, 87%, 63%);
}

使用 margin 讓元素在 flex 格線內靠右或靠左對齊

再來是使用 flex 後，同一行的元素會在格線內水平置中，
這裡使用 margin auto 的方式，讓元素對齊右邊或左邊。

.email-box {
    /* display */
    flex-basis: 70%;
    
    /* box model */
    max-width: 420px;
    margin: 0 0 0 auto;  /* 靠右對齊 讓 margin-left: auto; 將元素推到右邊 */
}

.notify-btn {
    /* display */
    flex-basis: 30%;

    /* box model */
    max-width: 180px;
    margin: 0 auto 0 0;  /* 靠左對齊 讓 margin-right: auto; 將元素推到左邊 */
}

使用 jQuery Validation 驗證 email

驗證 email 的部分，使用 jQuery Validation 插件，
就不用自己寫驗證方式，只要稍微修改預設的錯誤訊息即可。

jQuery.extend(jQuery.validator.messages, {
  required: "Whoops! It looks like you forgot to add your email",  // 輸入欄位為空時
  email: "Please provide a valid email address",  // email 格式不正確時
});

使用插件真的很適合懶惰的我，哈哈哈哈哈。

這次是倒數第二個新手挑戰_免費的，希望自己越做越好。（祈禱）

挑戰頁面 ▶ Ping coming soon