Get best of the week

如果我今天教Frontend。初学者提示

我的Web开发道路始于5年前。在这段时间里，我设法尝试了许多技术，并且在过去三年中，我一直在朝着前端的方向发展。

在本文中，我想清楚地说明初学者需要学习哪些技术，并分享其开发方法。该指南针对正在Web开发中迈出第一步的人们，在其中，我将尝试详细解释每种技术的本质。最后，我还会告诉您下一步要去哪里。

因此，您想成为前端开发人员。为此需要什么？

学习HTML，CSS，Javascript

HTML和CSS


这两种技术对于站点布局都是必需的。布局是页面上文本，图像，按钮和其他界面元素的排列。

使用HTML，我们可以添加和描述这些元素。最初，它们将是原始的，具有标准外观。要更改样式，使用CSS。它允许您为元素的外观指定颜色，大小，位置和许多其他参数。

没有CSS的网站

如何掌握


首先，您应该阅读有关这些技术的评论文章或视频。所以你了解他们的本质。

这样，布局就可以最方便地学习和改进。尝试页面或单个元素的布局布局。您还可以尝试查看Youtube上的页面布局过程，并在作者之后重复。

首先，这将很困难，而且您通常必须去Google解决另一个问题。但是随着时间的流逝，您将学会在脑海中快速找到正确的HTML结构以及元素布局所需的CSS属性。

在哪里获取布局的想法和布局？


我使用了Dribbble和CollectUI，但也可以在Behance和One Page Love上进行搜索。

您还可以从UI Store Design获取真实的布局。我建议从Figma进行布局，因为 许多设计人员都在使用它，将来您很可能会使用它。它也是免费的，并且可以在浏览器中使用。

图片

Java脚本


该语言开始在Web上编程。它使您可以管理页面上的元素，描述和控制与界面的交互。

如果我们使用HTML和CSS创建页面，则JavaScript负责页面的动态部分：动画，数据显示，动作处理等等。

我为什么需要它？


一个简单的例子。假设有一个页面，单击该按钮需要显示一个模式窗口。 HTML和CSS将使我们能够制作页面本身和模式窗口的布局。但是，这些技术无法捕获和处理按钮的单击。
这是我们需要JavaScript的地方。使用它，我们在页面上描述了行为。在代码中，我们的意思是：如果用户单击按钮，则需要显示模式窗口。

这是使用jQuery实现的示例：



使用JavaScript，您几乎可以在页面上执行任何操作。但是，其功能不限于浏览器窗口。通过使用Node.js平台，该语言可用于服务器开发，构建项目等等。将来，您将需要使用它来处理从Webpack构建的大型项目。但是，我建议您首先学习如何在浏览器中使用该语言。

如何掌握


最好的选择是开始在learning.javascript.ru上学习。这是一个很好的资源，对于初学者和高级开发者都是知识库。

在这里，重要的是要了解JavaScript本身的基本知识，以及其在浏览器中的操作功能。如果某些主题对您来说似乎太复杂了（例如，prototypes），那么您可以跳过它们，稍后再回来。

不要仅仅对JavaScript理论感到迷恋。我建议您在学习和编写简单脚本的同时尝试一下。您也可以尝试在Codepen上解析代码的其他部分。

图片

逐步学习新的插件和库。jQuery是最受欢迎和最容易理解的一种。。使用它与页面内容进行交互要容易得多，并且可以在基本级别上快速掌握它。

总的来说，您通常会在项目中使用第三方库。为了更好地了解此操作，我建议尝试使用Luxon格式化日期或通过Owl Carousel制作轮播。

下一步是什么？


凭借HTML，CSS和JavaScript的基本技能，您可以制作漂亮的登录页面，布置在线商店或博客的页面。我建议您这样做，以巩固您在Web开发中的知识。

基本上，几乎所有接口都可以使用这些技术编写。唯一的问题是您正在开发的应用程序将具有哪些细节。它越大，越复杂，您将需要处理的库，插件和技术就越不同。

图片

我建议您熟悉“ 前端路线图”。这是将来您将需要的接口开发技术。

将来，您可能会对React或Vue等反应性框架感兴趣。。要在其上构建应用程序，您将学习Webpack，并且将加快布局过程，您将学习预处理器PUG和SASS。或者，也许您想更深入地研究图形并学习如何使用D3或WebGL。

正如您已经了解的那样，Web开发的前端功能非常丰富，并且包含用于完成完全不同任务的各种技术。学习，尝试，试验，并享受为任何目的创建美观而便捷的界面。为此，我们喜欢前端。


PS I在本文中为每种技术提供了文档或使用示例的链接。您可以使他们熟悉它们，以更广泛地了解Web开发。

More articles:


All Articles