响应式网页设计

笔记本和手机图标

在响应式网页设计认证中,你将学习开发者用来编写网页的语言:HTML(超文本标记语言)用于创建内容,CSS(级联样式表)用于样式设计。

首先,你将通过编写一个展示猫咪图片的应用,学习 HTML 和 CSS 的基本知识。 然后,通过画企鹅来学习像 CSS 变量这样的现代技术,以及通过构建网页表单来学习无障碍的最佳实践。

最后,你将学习使用 flexbox(弹性盒子)构建一个 Twitter 卡片,以及使用 CSS 网格构建复杂的博客布局,以此学习制作适应不同屏幕大小的网页。

Note: Some browser extensions, such as ad-blockers and dark mode extensions can interfere with the tests. If you face issues, we recommend disabling extensions that modify the content or layout of pages, while taking the course.

课程

HTML 是一种标记语言,使用特殊的语法或标记来向浏览器描述网页的结构。HTML 元素由开始和结束标签构成,标签之间是文本内容。 不同的标签可以让文本内容以标题、段落、列表等形式展现。

在这个课程中,你将通过编写一个展示猫咪图片的应用,学习最常见的 HTML 元素——它们可以用来构成任何网页。

CSS(级联样式表)告诉浏览器如何显示你在 HTML 中写入的文本和其他内容。你可以使用 CSS 控制 HTML 元素的颜色、字体、大小、间距等许多属性。

现在你已经写好了猫图应用的基本结构,接下来我们用 CSS 给它加一些样式。

视觉设计结合了排版、色彩理论、图形、动画、页面布局等,以表达独特的信息。

在这个课程中,你将学习如何将这些不同的视觉设计元素应用到网页上。

在网页开发中,可访问性是指网页内容和用户界面可以被用户理解、浏览并与之交互。这里的用户包括有视觉障碍、听觉障碍或认知障碍的用户。

在这个课程中,你将学习提升网站可访问性的最佳实践。

人们可能通过形状和大小不同的设备来访问网页。通过响应式网页设计,你可以设计出能灵活适应不同屏幕大小、方向和分辨率的网页。

在这个课程中,你将学习如何使用 CSS 让你的网页在不同设备上看起来都不错。

Flexbox(弹性盒子)是最新版本的 CSS(即 CSS3)中引入的一种强大且兼容性好的布局方法。使用 flexbox,我们可以很容易地处理好页面上的元素布局,并创建可以自动缩小和放大的动态用户界面。

在这个课程中,你将通过构建一个 Twitter 卡片来学习 flexbox 和动态布局的基础知识。

CSS 网格是一个较新的标准,用于构建复杂的响应布局。它通过把 HTML 元素转换为具有行和列的网格容器,以便将子元素放置在所需要的位置。

在这个课程中,你将通过构建不同的复杂布局(包括博客)来学习 CSS 网格的基础知识。

是时候使用你新学到的技能了。通过构建这些项目,你将有机会应用之前学到的所有技巧、原则和概念:HTML、CSS、视觉设计、无障碍等等。

完成下面的五个网页编程项目,获得响应式网页设计认证。

浏览我们的其他免费认证 (我们建议你按顺序学习)