21天的设计作品集课程

以21天的投资组合挑战开始新的一年

初学者——高级

在21天内建立和视觉设计一个完整的作品集网站。本课程涵盖了从网格和flexbox的基础知识到高级交互和可访问性工作的一切,带我们通过在Webflow中构建和启动网站的每一个步骤。

在21天内建立和视觉设计一个完整的作品集网站。

暂停背景视频
Webflow对学生和教育工作者是免费的
了解更多&应用

总结

课程进度

干得好,我们做了一次穿越到未来的旅行,看起来很棒!

0

完成

0
21

课程完成

在21天内建立和视觉设计一个完整的作品集网站。本课程涵盖了从网格和flexbox的基础知识到高级交互和可访问性工作的一切,带我们通过在Webflow中构建和启动网站的每一个步骤。

所面临的挑战

挑战
一天
做一个网站英雄
01
最终的导航条
02
神奇的CMS布局
03
制定领导和科学
04
为你的网站提供虚拟鞋
05
你好,这是响应性
06
展示您的项目页面
07
项目页面在任何地方都可以工作
08
最佳联系页面
09
向我们展示您的联系页面
10
测试打开图表设置
11
一束光照耀
12
让你的作品集活起来
13
失去了,却不曾忘记
14
有密码保护
15
实践的可访问性
16
分享你正在进行的设计
17
准备,设置、发布!
18
投资组合验证
19
更新你的网站管理系统
20.
展示你的投资组合
21

准备好获得认证了吗?

一旦你完成了Webflow专家认证课程,你就可以开始下一步成为Webflow专家了。请注意:通过专家考试并不保证进入Webflow专家程序。

去Webflow专家考试吧

课程大纲

开始
主页
项目页面
联系页面
网站的改进
发布和管理

21天的设计作品集课程

21
教训
开始
开始
主页
主页
项目页面
项目页面
联系页面
联系页面
网站的改进
网站的改进
发布和管理
发布和管理

简介

通过21天的课程开始2021年的学习,完成一个设计作品集网站的完整构建。从一张空白的画布开始,到一个完全响应的、cms驱动的作品集,这将产生线索——并有可能在空间和时间的结构上撕开一个洞。

成绩单
阅读全文
阅读全文

主页:英雄节

创建一个吸引眼球的英雄部分,以吸引网站访问者的注意。

成绩单
阅读全文
阅读全文

主页:导航

配置和样式导航栏。将其转换为Symbol以重用它,并在整个项目中保持一致。

成绩单
阅读全文
阅读全文

主页:客户端项目

使用魔法(这也是我们从未来带回来的)在你的主页上以美丽和一致的布局显示你的CMS项目。

成绩单
阅读全文
阅读全文

主页:触点形式

创建一个吸引人的行动号召,并在你的作品集首页的正中间建立一个联系表单。

成绩单
阅读全文
阅读全文

主页:页脚

设计一个页脚来包装你的主页的内容,作为第二个导航-这个页脚将用于你作品集的每个页面,以保持一致性。

成绩单
阅读全文
阅读全文

主页:响应性

完成作品集主页后,是时候让它有响应性了。学习如何使您的主页在平板电脑、移动设备甚至更大的显示器上响应,比如Regal Cinema的屏幕。

成绩单
阅读全文
阅读全文

项目页面:主页

现在是时候了——是时候对作品集中的项目进行更详细的研究了。我们将使用CMS Collections通过构建一个页面来生成所有页面。与魔力。

成绩单
阅读全文
阅读全文

项目页面:响应性

另一个页面,另一个需要响应的东西。作品集的项目页面完成后,是时候让它响应了。学习如何使你的主页在平板电脑,移动设备甚至更大的显示器上响应。神奇的是,改变一页会影响所有的页,所以你只需要做一次工作。

成绩单
阅读全文
阅读全文

联系人页面:主页面

作品集的最后一个主页将是联系人页面,这是一个带有粘性页脚的静态页面。我们要确保页脚在页面底部。

成绩单
阅读全文
阅读全文

联系页面:responsiveness & reCAPTCHA

在这节课中,我们将添加谷歌的reCAPTCHA验证,以减少从Megan的联系人表单中收到的垃圾邮件数量。此外,我们将检查桌面、平板电脑、移动横屏、移动竖屏和更大的1920px断点上的响应性和流动性。

成绩单
阅读全文
阅读全文

SEO &打开图形设置

这节课涵盖了设置静态和动态SEO标题和元描述,以及配置Open Graph设置,它将显示在嵌入的链接中,如Twitter。

成绩单
阅读全文
阅读全文

从暗到亮的重新设计

在这一课中,我们将从视觉上编辑我们的CSS来重新设计作品集,使其从暗到亮。当我们这样做时,我们将探索与我们的主页、项目页面和联系页面相关的级联和继承。记得从课程页面下载最新的项目资产!

自定义2D和3D交互

在这一课中,我们将视觉动画我们的元素直接在我们的页面上,并创建头脑融化的2D和3D交互,由鼠标悬停,页面滚动位置和页面加载触发。

成绩单
阅读全文
阅读全文

自定义404页

在这节课中,我们将创建一个自定义的404页面,当您的访问者在您的作品集上遇到一个不可用的页面时。保持你的访问者参与与鼠标跟随交互,以保持他们在你的作品集。

磨砂玻璃效果定制代码:https://frosted-glass-code.webflow.io/

成绩单
阅读全文
阅读全文

3D视差密码页

用一个既安全又吸引人的密码页面来保护你的页面。

成绩单
阅读全文
阅读全文

可访问性审计

在这一课中,我们将通过可访问性审计会议来探索如何改进我们的设计,为人类和搜索引擎创造更好的体验。

成绩单
阅读全文
阅读全文

设计评审

萨拉·伦德伯格在Webflow大学负责设计工作,今天,她将在梅根的作品集网站上浏览几十个设计笔记——从间距到交互(以及两者之间的一切)。

成绩单
阅读全文
阅读全文

发布和发射

我们将发布我们的作品集到Webflow登台域,然后我们将使用谷歌域连接一个自定义域,以获得更专业和个性化的外观。

成绩单
阅读全文
阅读全文

验证你的网站并跟踪分析

现在您已经建立了完整的作品集,是时候通过验证您的站点来拥有它了。获得站点的所有权,了解访问者如何与您的组合站点交互,以优化性能和搜索引擎设置。

成绩单
阅读全文
阅读全文

先进的CMS过滤

在这一课中,我们将通过添加一个新的客户端项目来更新我们的项目CMS集合,我们将过滤我们的CMS布局为一个更先进和策划的展示。

最后的想法和作品集展示

在这一课中,我们将概述我们的进展,并涵盖关注我们想要在我们的投资组合中突出的工作类型。我们还将展示如何将您自己的作品集添加到Webflow Showcase中,以提高整个社区的可见性。

成绩单
阅读全文
阅读全文

需求

我们的目标很简单:我们想让来自各个领域(用户体验、品牌、产品、平面、时尚、工业和短道速滑)的设计师和代理机构在21天内建立一个由信息服务驱动的组合,从而产生线索——并有可能在空间和时间的结构欧宝体育在线首页上撕开一个洞。

我们将所学到的内容策略、信息体系结构和量子力学的知识都融入其中,创建了一门不同于过去、现在或未来任何其他课程的课程。


克隆这个项目
使用此版本克隆已完成的项目
克隆这个项目
没有达到页面限制的空白页面

相关的课程

有更多的未来

我们很快就会推出更多的课程。注册以获得更多Webflow课程和课程的早期访问。

糟了,有东西没起作用。过会儿再打,兄弟。
Baidu
map