为初学者寻找 HTML 和 CSS 项目的 9 个最佳网站

如果您知道自己在寻找什么,那么搜索 Web 开发项目就很容易。 但通常这些项目还包括您可能不想要的 Javascript。 也许,你是一个初学者,只想专注于网页设计而不是开发? 以下是一些用于查找 HTML 和 CSS 项目的资源。

查找 HTML 和 CSS 项目的最佳网站

让我们从最适合初学者的网站开始。

1.前端导师

该网站提供了一系列挑战,以帮助开发不同的设计风格。 虽然有些挑战需要 Javascript,但您可以轻松发现它们,因为它在项目名称下方立即提及。 您可以过滤结果以仅显示 HTML 和 CSS 项目(如果这是您所追求的)。 项目分为新手、初级和中级部分,便于根据您的经验选择项目。

打开项目后,您可以下载图像和其他设计细节的启动文件。 您可以完成项目并将其提交到网站以访问其他人的项目文件。 分析他们的工作将向您展示完成和完成它的其他方式。 本网站中的 HTML 和 CSS 项目不要求您使用特定的方式,因此您可以随意使用网格、flex-box 甚至任何 CSS 框架,如果您愿意的话。

打开 前端导师

2.前端实践

虽然 Frontend Mentor 提供了中级项目,但它确实提供了更高级的项目。 该服务基本上会显示来自真实站点的演示网页,并希望您重新创建它。 为了 example、Ableton的about页面、Starbucks的打赏页面、Monstercat专辑发行页面等。

除了有关调色板的详细信息,您一开始没有任何起始文件。 您被要求在网上找到类似的照片或直接从演示页面下载。 该服务不提供任何解决方案代码,但您可以打开网页并使用浏览器的开发工具找到它。 流行的 HTML 和 CSS 项目站点只有 10 个独特的项目。

打开 前端实践

3. 日常界面

每日 UI 带有一个完全不同的概念。 打开网站并注册时事通讯。 您每天都会收到一份时事通讯,其中包含您需要在同一天完成的项目的详细信息。 您将收到多达 100 个项目,但仅限于工作日。 完成并提交所有 100 个项目后,即可完成每日 UI 挑战。

每日 UI 电子邮件通讯

这些不是大型项目。 大多数要求您在网页上创建一个部分,例如创建价格表、结帐页面、食谱卡、机票等。

打开 每日用户界面

4. 代码威尔

你会在这里找到大约 25 个 CSS 和 HTML 项目,但与列表中的其他项目相比,它们有点不同。 为了 example、为评测部分、注册页面、仪表板、社交媒体提要等创建布局是 Codewell 列出的一些项目。 这些项目通常需要 Javascript,但 Codewell 只会挑战您创建布局。 这意味着您创建的登录页面和仪表板不必工作。

Codewell 挑战

该应用程序还具有每月 8 美元的高级订阅。 高级订阅将解锁挑战并展示 Figma 设计文件。

打开 代码威尔

5. 运球

Dribble 是一个可以作为自由设计师工作的市场。 这是您可以开始考虑向前迈出一步并赚钱的地方。 Dribble 也不仅仅适用于网页设计师。 您可以找到所有类型的设计师,例如平面设计师、视频编辑、时装设计师、摄影师、插图等等。 但是网页设计是平台的主要部分,您可以在其中找到许多工作。 虽然一些高级设计需要 Javascript,但您可以使用只需要 HTML 和 CSS 来创建的小型演出。

运球网页设计

它也是一种面向 Web 开发人员的社交媒体平台。 许多人只是将他们的设计上传到他们的个人资料中。 您可以创建自己的设计并上传它,或者只是重新创建已经发布的设计以供练习。

打开 运球

6.行为

对于各种设计师来说,Behance 就像 Dribble。 就像 Dribble 一样,您也可以在工作部分找到工作,也可以在发现部分找到项目。 Behance 的独特之处在于它的过滤选项。 您可以缩小搜索范围以仅显示网页设计、仅包含 HTML 和 CSS 的项目、选择颜色以获取以特定颜色设计的项目、获取从特定位置提交的项目的位置等。

行为网页设计

一些项目还附带源文件,以便您可以查看该项目的代码进行分析。

打开 行为

7. CSS 战斗

如果您想成为 CSS 设计的专业人士,CSS Battle 是一个完美的网站。 该服务提供了一个目标,您需要使用您的 HTML 和 CSS 技能来提供与源完全相同的输出。 与其他 HTML 和 CSS 网站不同,您不是在这里设计表格或布局,而是将图标样式或抽象艺术类设计作为目标。 规则很简单,你不应该使用javascript,显示不包含任何图像,并且应该用尽可能少的代码来实现目标设计。

CSS 战斗

以最少代码实现目标的人将在排行榜上更高。 您不必使用任何代码编辑器,该应用程序提供了一个在线编辑器,可以实时向您显示输出。 一旦您认为您的输出看起来与目标完全一样,请点击提交按钮以检查分数。

打开 CSS 战斗

8. Pinterest

Pinterest 是查找和收集网页设计图像的好方法。 在这里,您可能无法获得源代码或任何可下载的文件,但您确实有大量的设计可供选择。 只需搜索网页设计,您应该会找到很多可以转化为项目的结果。 Pinterest未来的推荐引擎会为您量身定制搜索结果,以更好地满足您的兴趣。

网页设计 Pinterest

除了设计之外,它还是一个很好的平台,可以找到有关 Web 开发、信息图表、建议等的技巧。

打开 网页设计 Pinterest

9. YouTube

虽然大多数服务只是简单地将项目列为对源代码的挑战, YouTube另一方面,有很多使用 HTML 和 CSS 的教程。 只需搜索 HTML 和 CSS 项目 YouTube 搜索开始。

HTML 和 CSS 教程 YouTube

大多数项目还提供到源代码的链接,并为您提供图像的起始文件。 由于这些是教程,因此对于想要边学习边编写代码的初学者来说,它们是一个很好的选择。 此外,从长远来看,中间提供的技巧和策略将很有用。

打开 HTML 和 CSS 项目 YouTube

HTML 和 CSS 游乐场

作为一个初出茅庐的程序员,您应该将 Google 视为您最好的朋友。 因此,在 Google 上快速搜索 HTML 和 CSS 项目将为您带来来自不同网站的大量项目。 不用说,您还可以重新创建流行的网站,例如 YouTube,苹果,特斯拉,亚马逊, Netflix,星巴克等或任何您认为设计出色的网站。 无论怎样,这些天您可以选择不使用任何代码来创建网站。