專注於前端課程的六角學院,近期開了一個切版直播班,手把手的透過直播帶領大家釐清觀念,同時練習各種各樣的版型,大家在日後切版的速度可以更加快且準確。
第一週課程重點
前置作業
加快寫 Code 速度
可以使用 keybr.com 來讓你的手指自然而然在打英文的時候,記住鍵盤的位置。
使用 Emmet 和 TabNine
Visual Studio 已經內建了 Emmet 功能,再加上 TabNine 可以讓你撰寫Code更加的快捷,不需要打過多的字母。
基礎知識
容器與共用的概念
將共用的 CSS、 HTML 架構給予抽出,可以降低你撰寫重複的程式碼。
區塊元素(block)與行內元素(inline)
前者會另起一行,可以設定寬高;後者的話不會滿版、並排且寬高無用(可以用 display: block )來處理。
box-sizing
要設置在 * 上,會包含 border
經驗談
配合人的手指大小,按鈕大小要在 44px
line-height
行高 ( h )相當於字母的上下間距,字體大小( s )會在這個間距中間。當要計算字母和下方的差距 ( mb ),其公式為:
( h – s ) / 2 + mb
img 下方會天生留白 2 ~ 3 px
可以用 display:block || vertical-align:middle