Day11 HTML 切版介绍(下)

以下将介绍几个实用的切版学习资源与工具

e Odin Project(完整规划和复合式学习)

这是一个开源的线上课程，让所有人都能免费取得教育资源，并帮助学生找到适合的软件开发工作。当中的学习资源和专案是由社群和志工们一起打造，是一个很适合新手的学习网站。如果只想针对特定技术点和工具做学习，也能在首页找到不同类型的课程。例如：想加强切版，就能直接点HTML+CSS的课程模组中。章节中大多包含明确的学习目标和清单、站内和站外的基本学习资源、进阶的补充学习资源等。提供了复合式的学习资源：有文章类型、有影片类型、有文字和图片的说明等。

YouTube 教学影片(影音和实作式学习)

如果影音式的学习内容能提升你学习的效果，YouTube 绝对是你的好夥伴——平台上有非常多创作者录制技术相关的介绍和实作的影片。

1. 各项技术的教学
2. 手把手实作功能和作品(以下提供几个频道)

CSS-Tricks
Kevin Powell
DesignCourse
The Net Ninja

影像和实作式学习：各种能透过操作看到成果的网站

学习CSS除了阅读型教材和影片型教材，也能透过动手操作来学习和练习，都有助於增强学习效果。以下举几个能透过游戏来学习的网站：

Flexbox Froggy
Grid Garden
CSS Diner
:nth Tester
Flexbox Playground
CSS Grid Cheat Sheet

Codepen(实作练武的地方)

Codepe在写入程序码後，就能立即呈现结果，可以很即时的知道程序码是否正确。一切都在线上操作、执行和储存，完全不需要经过档案储存在本机上，也不需要懂如何部署等。很适合新手练习。除了能练习外，也能展示他人的作品集，如果不知道要以什麽作品来练习，可浏览当前热门的作品，挑几个你常见网站的版型和工具来切版看看。如果有明确想练习的点，例如CSS Flexbox和Grid，或各种工具，也能直接透过搜寻，找到其他人的相关作品

DevTools(debug 工具)

切版过程中，如果写完了程序码，但成果与预期的不同，可能是元素排列的方式、元素的间距不如预期。又或是如预期的呈现了，但不满意成果，在修改程序码与网页预览间非常麻烦，想直接在浏览器中修改。那这时，Debug 的工具就派上用场了！以下就马上来介绍几个实用的工具：

• 浏览器 DevTools
  几乎所有浏览器都有「DevTools 开发者工具」，可以查看当前页面的HTML和CSS结构和设定，也能即时做调整和观看修改後的结果。在这个控制台中，也能透过JavaScript与网页互动、查看网路请求等。
  主流的浏览器，如 Chrome、Firefox、Edge 中，Windows 或 Linux 系统下按 F12 / Mac 系统下按 Command+Option+I 就能开启DevTools。在

• Grid Layout
  CSS网格系统是热门的排版方式，也是许多人会接触的一个技术点。网格布局在使用上，经常是在网页上先画好一个二维的网格，并设定好网格的大小、间距等，确认网页大方向的布局是怎麽排版的，接着才会把元素一个个放进指定位置的格子中。透过CSS程序码在画网格时，很难想像实际的样貌；甚至把元素放进网格时，容易放错位置，这时就需要一个工具能将设定视觉化。因网格系统是比较新的排版方式和功能，鲜少有浏览器的 DevTools 能支援这个功能，使Debug起来比较困难。而当前网格系统做得比较完善，发展比较久的是Firefox浏览器，建议大家在练习CSS Grid时使用Firefox，再借助其DevTools，在开发上和Debug有很大的帮助。