[Day 10] 练练CSS，加强实作练习

前言

昨天分享了从Amos老师的YouTube影片练习，虽然练习完之後CSS的观念、切版技巧提升不少，但依然还是会好奇，如果是整页式的网页，我应该如何切版呢？

在馒头计画的参与中，我最喜欢的是Luka会提供不少自己找资源学习的技巧、也会设定每个单元要完成的任务。在CSS单元内，要求我们到Udemy 或 YouTube 寻找能制作出专案的课程。
在这个阶段的任务，挑选Udemy : Build Responsive Real World Websites with HTML5 and CSS3

课程重点

制作的网站为健康餐点网站，将网站分为表头、特色区块、食物照片区、订餐方法介绍…等，切分不同区块，去调整字型、文字排版、图片处理。

成品

每个区块绘制简单的容器配置图

课程中老师会先说明区块内容器的放置，我也可以很快地抓出要制作的方向，帮助我未来在看到网页时，会先拆分大区域，再从每个区域来划分容器的配置。
课程范例：

1. Header区
   
2. 特色区块
   

class 命名清楚

区分好几个section，并将每个section清楚命名，容易辨认。透过此课程，让我知道好的class命名，可以帮助你快速知道这区块要做什麽，再过段时间回来查找也相对容易。
如：
section-features ： 放置餐点的特色介绍。
section-maels ： 呈现餐点的图片
section-cities ： 放置有合作的城市、参与人数等资讯

版面色调挑选

网页中，很快的吸引人目光除了整体的版面配置外，另一个就是颜色的配置，可以透过色调网站去挑选合适的色彩。
课程中，老师会到Tint and Shade Generator 挑选於找寻合适的颜色。

此课程比较完整细节的部分可以到我的 部落格 看看～

小结

这两天关於 CSS 的练习，大月就花了我一个多月吧～ 过程中，会觉的会不会花太多时间在这里啦，後面还有好多新东西等着，但是总想着要将基础打好，不要心急，才不会东缺一块，西缺一块的。而且回过头来看，也确实成长不少！