開始接觸網頁開發後，發現自己缺乏實作經驗，
於是老師推了 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
