前端开发人员的实践项目

与其他任何技能一样，前端开发需要大量的工作。 您可以通过多种方式来完成这项艰巨的任务， 其中一些是：

1. 在代理机构中担任前端开发人员。
2. 在家里学习，并在侧面构建项目。
3. 作为客户的自由职业者。

每个人都有自己的积极和消极， 但一件事仍然是不变的-您获得的任务越多样化， 您进步得越快。

在本文中， 我们将研究一些潜在的项目，您可以单独进行这些工作， 在这里您可以学习新技术， 方法， 可能还有一些“啊哈！”在您的前端职业生涯中的时刻。

以下所有任务都是您的GitHub个人资料上非常好的存储库， 特别是当您决定申请前端职位时。

一张纸条！ 下面的所有示例都是由设计师针对真实产品制作的。 我们不建议您抓住它们， 编码它们，然后做您想做的任何事情。 所有这些都是UI元素的示例，您可以在不分发它们或以后再出售的情况下对其进行处理。

难度：中等难度。

不过，不要被“简单”所误导， 因为和这里的任何项目一样， 初级开发人员和高级开发人员都可以根据他们解决的问题而苦苦挣扎。 我们将其简单地进行了规模化，因为它不会包含任何复杂的UI元素，并且所有内容都可以封装。

您可以选择这样的现有设计， 着重于下拉菜单/按钮：

来源

或者，您可以选择一种更通用的工具，例如Bootstrap和Foundation。 注意事项：

• 定义明确的命名约定。
• 组件介绍。
• 修饰语–大多数人喜欢更改次要元素， 因此，请考虑如何应用。 范例–您想要主要的 次要颜色； 成功， 错误状态等
• 使其保持“即插即用”状态。 您的目标是允许其他开发人员使用您的代码而无需编写任何CSS。 您也可以将其与基本的网格系统结合使用。

这样一个库的良好架构并不是一件容易的事。 您可以在职业生涯的开始以及几年后尝试相同的任务，然后比较您所学到的知识。

难度：硬

该任务全部与流畅的动画和性能有关。 但除此之外， 您还必须写下一些不太一般的视觉效果。 请参见下面的示例：

您可以在此处查看完整的动画。 停用用户界面后， 然后是时候添加互动了。 并非所有动画都看起来像设计，因为它不是在浏览器上而是在其他工具中制作的， 但这并不意味着您无法真正接近原版。 当然， 我们将跳过任何运动模糊效果和奇怪的形状变形， 但是其余的大部分都是您可以做的。 还有JS库可以帮助您对整个过程进行关键帧设计。

此任务仅需进行两次屏幕交换即可将其保留得更短。 除非您有精力，否则无需在此处处理移动视图。

难度：硬

另一个棘手的任务！ 大多数游戏具有非常独特的艺术风格，无法轻松在网络上进行翻译。 为了让事情变得更艰难 这里有另一条规则–不要使用任何图像/ svg在UI上实现形状。

资料来源：《星际争霸2》

为此，我们选择了《星际争霸2》。 如你看到的， 在实现过程中到处都有很多小细节。 的确， 在这里，“没有资产”的规则使这一点变得困难。 您将不得不使用形状， 剪裁， 影子魔术师， 渐变 边界等等。 当然， 需要右侧肖像和海军陆战队员的图像。

为了使事情更现实， 右上方的肖像边框可以与下一张图片的第一行交换：

资料来源：《星际争霸2》

如果您设法使它在较小的屏幕和移动设备上看起来也不错， 那么您将获得加分！ 这将是一个非常“哇！”在您的简历上影响项目。

难度：中等

与上述某些设计相比，测验游戏的构建并不难， 但他们需要编写一些JS才能使其正常工作。 是的， 到目前为止，我们只有基于CSS的项目， 为此，您还必须使其具有交互性， 让人们可以点击， 查看正确/错误的答案等等。

如果您在Dribbble中搜索“测验”， 您可以找到大量的例子， 但是，如果您发现很难挑选一个，则可以采取以下措施：

来源

如你看到的， 只有两个屏幕， 这意味着您将不得不根据上面的设计提出其余的建议。

测验功能：

• 计算正确答案
• N个选项的答案
• 单击后显示正确/错误答案
• 报告问题弹出窗口
• 回到所有测验， 参加测验
• 测验结束后显示最终分数

如果您愿意，您可以做的事情比上面提到的要多。 这通常是“一个下午”类型的项目。

难度：容易

打印优化有其怪癖。 尤其是当您隐藏网站上的任何现有元素时， 清理背景， 改善版式， 使用分页符并格式化页面。

对于此任务， 您可以在网上选择一个网站， 选择文章页面并开始处理打印样式。 关于该主题有很多篇文章， 所以有很多可以帮助您的。

您可以使用的示例网站：

• 亚马逊销售页面–仅关注重要信息。
• 课程销售页面–来自SitePoint。
• 另一个课程页面

随意选择您想要的任何其他网站， 您可以自己轻松或轻松地做到这一点。 如果您想查看一个良好的打印样式的示例， 看看https：// www。砸杂志。com /， 他们真的钉了它。

难度：疯狂

这个， 除了努力， 也很复杂。 与上述任何其他任务相比，它花费的时间更多， 因此您可能需要腾出20到30个小时以上的时间。

来源

上面的设计是Slava Kornilov对《纽约时报》的重新设计。 在链接中，您将看到他所做的所有设计，包括显示整个首页的大屏幕。

在这个项目中 您将需要从组件方面进行思考， 设置一些复杂的UI元素的样式，例如视频移出视口（必须继续响应）， 字体设置， 重叠元素等等。

即使只是看一下顶部大标题后面的背景，也隐藏了其实现过程中的一些棘手部分。

他设计了很多元素， 因此，如果您愿意的话，可以在这里花费一两个月以上的时间，而且还有很多东西要学习。 也许您甚至可以在后台制作视频，如下所示：

来源

为此， 也可以为不同的新闻报道制作动画。 您还应该在这里考虑移动视图。

难度：中等难度

仪表板无处不在。 当设计师不知道晚上该做什么时， 有时他们只是设计另一个。 只是因为。
多亏了这一点， 有很多选择。 在某个时候，您可能必须为实际产品构建一个真实的产品。 您可能很不幸，无法获得这些“超酷外观”界面之一，并加载了上百万个动画，这些动画根本没有任何意义。

为这一天做准备， 这对您来说是一个挑战：

实施以下设计：

来源

您需要在此处考虑的内容–图表必须是真实的。 他们必须使用 真实数据， 并且您应该尝试使它们看起来像您在顶部看到的那样。 您可以使用许多库， 并且很可能您将不得不进行很多扩展/修改。

如果您决定在其中加入一些动画，那就更好了。 在简历上看起来很棒 正确的？

学习和成为更好的开发人员的最好方法之一就是简单地开始编写代码并构建站点。 每天做一次 只需编码一吨！ 这对您的职业生涯的前3-4年尤其有用。

有了这种经验， 您可以轻松地担当更高级的角色。 在这里，您可以利用从所有这些项目中获得的经验以及您一路上发现和克服的问题，来制定决策并有效地领导自己的团队。记住， 始终尝试找到一些难以解决的问题！

DevriX的创意主管和前端开发人员
亚历克斯（Alex）的热情在于学习新的网络技术， 探索创新的方法来优化网站性能并改善用户体验。 亚历克斯（Alex）喜欢骑自行车和数字艺术，最近开始在ELSYS技术学校教授设计。