响应式网页设计

笔记本和手机图标

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

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

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

注意:某些浏览器扩展,例如广告拦截器和深色模式扩展可能干扰测试。如果你遇到问题,我们建议你在参加学习时禁用修改页面内容或布局的扩展。

课程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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