如果您知道自己在寻找什么,那么搜索 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 挑战。

这些不是大型项目。 大多数要求您在网页上创建一个部分,例如创建价格表、结帐页面、食谱卡、机票等。
打开 每日用户界面
4. 代码威尔
你会在这里找到大约 25 个 CSS 和 HTML 项目,但与列表中的其他项目相比,它们有点不同。 为了 example、为评测部分、注册页面、仪表板、社交媒体提要等创建布局是 Codewell 列出的一些项目。 这些项目通常需要 Javascript,但 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 战斗
8. Pinterest
Pinterest 是查找和收集网页设计图像的好方法。 在这里,您可能无法获得源代码或任何可下载的文件,但您确实有大量的设计可供选择。 只需搜索网页设计,您应该会找到很多可以转化为项目的结果。 Pinterest未来的推荐引擎会为您量身定制搜索结果,以更好地满足您的兴趣。

除了设计之外,它还是一个很好的平台,可以找到有关 Web 开发、信息图表、建议等的技巧。
9. YouTube
虽然大多数服务只是简单地将项目列为对源代码的挑战, YouTube另一方面,有很多使用 HTML 和 CSS 的教程。 只需搜索 HTML 和 CSS 项目 YouTube 搜索开始。

大多数项目还提供到源代码的链接,并为您提供图像的起始文件。 由于这些是教程,因此对于想要边学习边编写代码的初学者来说,它们是一个很好的选择。 此外,从长远来看,中间提供的技巧和策略将很有用。
HTML 和 CSS 游乐场
作为一个初出茅庐的程序员,您应该将 Google 视为您最好的朋友。 因此,在 Google 上快速搜索 HTML 和 CSS 项目将为您带来来自不同网站的大量项目。 不用说,您还可以重新创建流行的网站,例如 YouTube,苹果,特斯拉,亚马逊, Netflix,星巴克等或任何您认为设计出色的网站。 无论怎样,这些天您可以选择不使用任何代码来创建网站。