前端开发人员的实践项目

已发表: 2020-12-17

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

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

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

在本文中，我们将研究一些可以单独进行的潜在项目，在这些项目中您可以学习新技术，新方法以及可能的“ Aha！”。前端职业中的时刻。

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

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

1 –组件UI库

难度：中等难度。

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

您可以选择一个这样的现有设计，该设计集中在下拉菜单/按钮上：

资源

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

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

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

2 –实施复杂动画UI

难度：硬

该任务全部关于时尚的动画和性能。但除此之外，您还必须写下一些不太一般的视觉效果。请参阅以下示例：

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

此任务仅需进行两次屏幕交换即可使其保持较短的时间。除非您有精力，否则无需在此处处理移动视图。

3 –游戏界面

难度：硬

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

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

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

为了使事情更真实，可以将右上角的肖像边框与下一张图像中的第一行交换：

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

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

4 –测验游戏

难度：中等

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

如果您在Dribbble中搜索“测验”，则可以找到大量示例，但是如果很难选择一个示例，则可以采用以下示例：

资源

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

测验功能：

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

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

5 –选择一个随机站点并使它易于打印

难度：容易

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

对于此任务，您可以选择网络上的站点，选择文章页面，然后开始使用打印样式。关于该主题的文章很多，因此有很多可以帮助您的。

您可以使用的示例网站：

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

随意选择您想要的任何其他网站，您可以自己轻松或轻松进行。如果您想查看一个良好的打印样式的示例，请访问https://www.smashingmagazine.com/，他们确实对此很满意。

6 –复杂的杂志样式布局

难度：疯狂

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

资源

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

在这个项目中，您将需要考虑组件，设置一些复杂的UI元素的样式，例如视频超出视口（必须继续响应），版式设置，重叠的元素等等。

即使仅查看顶部大标题后面的背景，也隐藏了其实现的一些棘手部分。

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

资源

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

7 –仪表板及其图表

难度：中等难度

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

要准备这样的一天，这对您来说是一个挑战：

实施以下设计：

资源

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

如果您决定在其中加入一些动画，那就更好了。在简历上看起来不错，对吗？

到底：

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

有了这些经验，您就可以轻松地担任更高的职位。在那里，您可以利用从所有这些项目中获得的经验以及在过程中发现和克服的问题，来制定决策并有效地领导自己的团队。记住，请始终尝试寻找一些难以解决的问题！