Front-end developers are currently highly in demand and that’s for good reason. But companies are also very demanding when it comes to picking their developers. They only want the best of the best having to work for them.

当前，前端开发人员的需求量很大，这是有充分理由的。 但是公司在选择开发人员方面也有很高的要求。 他们只想要最好的，最好的。

Nowadays front-end development differs a lot from what it looked like ten years ago. Just like anything in the world of software everything constantly evolves. Take the three most popular JavaScript frameworks for example. React, Vue, and Angular didn’t even exist a decade ago.

如今，前端开发与十年前相比已经有很大的不同。 就像软件世界中的任何事物一样，一切都在不断发展。 以三个最受欢迎JavaScript框架为例。 React，Vue和Angular甚至在十年前还不存在。

This means that the skills that are needed to be a great front-end developer also have changed. As a front-end developer, you’re considered to stay on top of your game. In order to stay on top of your game, these are the skills that you want to have under your belt as a front-end developer.

这意味着成为一名出色的前端开发人员所需的技能也已发生变化。 作为前端开发人员，您被认为处于游戏的领先地位。 为了保持游戏的领先地位，您必须具备以下这些技巧才能成为前端开发人员。

HTML，而不仅仅是基本HTML (HTML, but not just basic HTML)

We all know that having a great understanding of HTML and all of its possibilities are considered the basics of web development. Make sure you’re familiar with HTML5 and know how to write clean HTML.

我们都知道，对HTML及其所有可能性有深入的了解被视为Web开发的基础。 确保您熟悉HTML5，并且知道如何编写干净HTML。

For example, don’t create unnecessary wrapping elements and don’t put a div inside a span. Again, these are some of the basics but I’ve seen basic stuff like this gone wrong way too often.

例如，不要创建不必要的包装元素，也不要在span中放置div。 同样，这些是一些基础知识，但是我经常看到诸如此类的基础知识经常出错。

Another skill that’s HTML related and getting more and more in demand is accessibility.

与HTML相关且需求越来越高的另一个技能是可访问性。

But what is an accessible website?

但是什么是可访问的网站？

An accessible website is a website that people with disabilities can perfectly use. This can be people that are visually impaired, blind, or deaf, etc.

无障碍网站是残疾人可以完美使用的网站。 这可以是视力障碍，失明或聋哑等的人。

Accessibility is essential for businesses and organizations that want to create high-quality websites for everyone. It’s important for these businesses and organizations to not exclude anyone from using their products or services.

对于希望为每个人创建高质量网站的企业和组织而言，可访问性至关重要。 对于这些企业和组织，重要的是不要将任何人排除在使用其产品或服务之外。

The great thing about accessibility is that it not only improves the online experience of people with disabilities. Accessibility often improves the online experience for all users.

可访问性的伟大之处在于它不仅可以改善残疾人的在线体验。 可访问性通常可以改善所有用户的在线体验。

If you want to know more about accessibility you could take a look at the web content accessibility guidelines.

如果您想了解有关可访问性的更多信息，可以查看Web内容可访问性指南。

学习框架 (Learning a framework)

Learning one of the three popular frameworks might seem an obvious thing to do — and it is for good reason. Most front-end developer jobs will require you to have experience with at least one of the big JavaScript frameworks.

学习这三个流行的框架之一似乎是一件显而易见的事情-这是有充分理由的。 大多数前端开发人员工作将需要您至少具有一个大型JavaScript框架的经验。

Learning either React, Vue, or Angular is an excellent choice since these are highly demanded skills. However, I’d highly recommend you learn the basics of JavaScript first. Do some projects where you only use vanilla JavaScript. Once you understand how JavaScript works and you completely understand the basics you could shift your focus to learning one of the three popular JavaScript frameworks.

学习React，Vue或Angular是一个极好的选择，因为这些是非常需要的技能。 但是，我强烈建议您首先学习JavaScript的基础知识。 做一些只使用原始JavaScript的项目。 一旦了解了JavaScript的工作原理并完全了解了基础知识，就可以将重点转移到学习三种流行JavaScript框架之一。

This way you’ll understand what problems the framework you’re using solves and you’ll understand why the framework takes a certain approach. The only downside with this approach of learning JavaScript is that it’s going to take longer than when you just learn one of the three frameworks immediately. However, in the long run, this will pay off and you’ll be far ahead of those who took the “quick” approach.

这样，您将了解所使用的框架解决了哪些问题，并了解了为何采用某种方法。 这种学习JavaScript的方法的唯一缺点是，与立即学习这三个框架之一相比，它将花费更长的时间。 但是，从长远来看，这将获得回报，并且您将远远领先于那些采用“快速”方法的人。

For those of you who don’t want to learn React, Vue, or Angular that’s totally fine since there are plenty of other frameworks you could learn. Just keep in mind that the demand for these frameworks is much lower.

对于那些不想学习React，Vue或Angular的人来说，这很好，因为您可以学习很多其他框架。 请记住，对这些框架的需求要低得多。

造型 (Styling)

The way we style our websites has changed dramatically compared to a decade ago. Back then we would use a table to create a website. Luckily, this has improved and nowadays we use more advanced techniques like flexboxes and grids.

与十年前相比，我们设计网站的方式发生了巨大变化。 那时，我们将使用表格来创建网站。 幸运的是，这种情况已有所改善，如今，我们使用了更高级的技术，例如flexboxes和grids。

Knowing your way around in CSS is an essential skill for any front-end developer. You want your stylesheets to perform the same in every browser — which can be a pain in the bum.

对于任何前端开发人员而言，了解CSS的方式都是一项必不可少的技能。 您希望样式表在每个浏览器中都执行相同的工作-这可能会让人很痛苦。

CSS is not the only thing you need to know when it comes to styling. What get’s used a lot nowadays is Sass. Sass is a CSS pre-processor that lets you use variables, mathematical operations, mixins, loops, functions, imports, and much more — which makes writing CSS a breeze and is way more powerful. Sass has a simpler and more elegant syntax than CSS — which is quite flat.

在样式方面，CSS并不是您唯一需要知道的。 如今，经常使用的是Sass。 Sass是CSS预处理器，可让您使用变量，数学运算，mixin，循环，函数，导入以及更多内容-这使编写CSS变得轻而易举，并且功能更强大。 Sass具有比CSS更简单，更优雅的语法-相当平坦。

Sometimes a framework gets used that does all the heavy lifting for you. This means that you don’t have to write all CSS from scratch. Out of the box, you can create entire perfectly styled websites with these frameworks. If you’ve got any experience with a framework like Bootstrap or Tailwind that is going to put you ahead over other front-end developers.

有时会使用一个为您完成所有繁重工作的框架。 这意味着您不必从头开始编写所有CSS。 开箱即用，您可以使用这些框架创建整个样式完美的网站。 如果您对Bootstrap或Tailwind之类的框架有任何经验，它将使您领先于其他前端开发人员。

React性 (Responsiveness)

The days that people just browse the internet on their desktop are long gone. Most people browse the web on their mobile phones nowadays. Making sure an application supports all screen sizes requires skills.

人们只是在桌面上浏览互联网的日子已经一去不复返了。 如今，大多数人都在手机上浏览网络。 确保应用程序支持所有屏幕尺寸都需要技能。

You don’t want key features falling off the screen when you’re browsing a website on your mobile phone. And you also want to prevent horizontal scrollbars appearing on your website at all costs.

当您在手机上浏览网站时，您不希望主要功能出现在屏幕上。 而且您还希望不惜一切代价阻止水平滚动条出现在您的网站上。

A website that’s responsive offers the best possible experience regardless of the user's device. On top of that, a responsive website will look more consistent.

无论用户使用什么设备，响应式网站都可以提供最佳体验。 最重要的是，响应式网站将看起来更加一致。

The way to make your website responsive is by using media queries. Although media queries are not that hard to learn it should be something you’re comfortable with.

使您的网站具有响应能力的方法是使用媒体查询。 尽管媒体查询并不难学习，但您应该对此感到满意。

创造力 (Creativity)

Working on the front-end requires a lot of insight into how things should work. There will be times where you’ll find yourself working on a feature where a design is missing or you don’t know what it should look like on a small screen. This is where your creativity comes into play.

在前端工作需要对事物应该如何工作有很多了解。 有时候，您会发现自己正在使用某个功能，而该功能缺少设计，或者您不知道小屏幕上的外观。 这就是您发挥创造力的地方。

But even when you’ve got the design laying in front of you, you still need to have the creativity to implement graphic design into working and functional website pages.

但是，即使摆在您面前的是设计，您仍然需要具有创造力，以将图形设计实施到工作和功能正常的网站页面中。

But that’s not the only reason why you’ll need creativity. As with all software, bugs will sneak into the codebase. Fixing these bugs is part of the job and requires creativity.

但这不是您需要创造力的唯一原因。 与所有软件一样，错误将潜入代码库。 修复这些错误是工作的一部分，需要创造力。

知道如何测试你的工作 (Knowing how to test your work)

If you’d ask a group of developers what they hate the most about their job the far majority is probably going to answer testing. Despite the fact that testing isn’t the most favorite part of the job every developer understands why it should be done.

如果您要问一群开发人员最讨厌他们的工作，那么绝大多数人可能会回答测试。 尽管测试并不是工作中最喜欢的部分，但每个开发人员都理解为什么应该进行测试。

This is where you could stand out from the herd.

在这里，您可以脱颖而出。

Knowing how to write automated tests is more than a nice to have. Every development team is looking to automate as much as possible. With automated tests you have the possibility to get quick feedback about changes you made in your code. Besides the fact that manual testing takes a lot of time, it’s also repetitive if you don’t have any automated tests.

知道如何编写自动化测试实在不胜枚举。 每个开发团队都希望尽可能地实现自动化。 通过自动测试，您可以快速获得有关您对代码所做的更改的反馈。 除了手动测试需要花费大量时间这一事实之外，如果您没有任何自动化测试，那么这也是重复的。

One of the tools that get’s used a lot is Cypress. Cypress is an end to end testing framework that has some great features. One of these features is time traveling. Time traveling allows you to see exactly what happened at each step during a test. This makes debugging much more easy and insightful.

赛普拉斯经常使用的工具之一。 赛普拉斯是一个端到端测试框架，具有一些出色的功能。 这些功能之一就是时间旅行。 时间旅行使您可以准确查看测试过程中每个步骤发生的情况。 这使调试变得更加容易和深入。

Where Cypress allows you to test the flow of an application you might want to add more tests to your arsenal. Another popular tool for testing is Jest. Jest allows you to write unit and snapshot tests for components that you’ve created. This allows you to test more isolated parts of your application instead of testing how different parts of the application work together.

在赛普拉斯允许您测试应用程序流程的地方，您可能需要向军械库添加更多测试。 另一个流行的测试工具是Jest。 通过Jest，您可以为已创建的组件编写单元测试和快照测试。 这使您可以测试应用程序中更孤立的部分，而不必测试应用程序中不同部分如何协同工作。

版本控制 (Version control)

Version control is a must-have for any project. Version control allows you to manage, track, and control changes to files over time. It’s an essential tool to ensure the quality and integrity of a codebase.

版本控制对于任何项目都是必不可少的。 版本控制使您可以管理，跟踪和控制随时间变化的文件更改。 这是确保代码库的质量和完整性的重要工具。

Knowing how you can push the new feature you just finished to another branch is what you’re expected to know. Basic version control principles like push, pull, and commit shouldn’t be anything new to you.

期望知道如何将刚刚完成的新功能推到另一个分支。 基本的版本控制原理(例如推，拉和提交)对您来说并不是什么新鲜事物。

Fixing merge conflicts and cherry-picking are things you should be comfortable with as well. These are considered basic skills for any developer. The most used version control system is Git, but there are some alternatives like Mercurial and SVN.

解决合并冲突和挑选问题也是您应该满意的。 这些是所有开发人员的基本技能。 最常用的版本控制系统是Git，但也有一些替代版本，例如Mercurial和SVN。

终奌站 (Terminal)

Knowing your way around the terminal and being comfortable with typing commands is a truly underrated skill. Every developer tries to constantly improve and be more productive. Knowing your way around the terminal is one way to get things done faster. Instead of using your mouse to click around in a GUI, you could just get the exact same job done in the terminal — but way faster.

知道自己在终端周围的方式并习惯于键入命令是一项真正被低估的技能。 每个开发人员都试图不断改进并提高生产力。 了解终端周围的方式是使事情更快完成的一种方法。 无需使用鼠标在GUI中四处点击，您只需在终端中完成完全相同的工作即可，但是速度更快。

Knowing basic commands like mkdir, chmod, and chown will make your life as a front-end developer much easier. If you’re working in a DevOps team you’re expected to do some of the ops work as well. This requires renewing SSL certificates or installing security patches. All these things are done inside your terminal. If you want to learn more about the basic commands that you should be able to use take a look at this article.

了解诸如mkdir ， chmod和chown之类的基本命令将使您作为前端开发人员的生活更加轻松。 如果您在DevOps团队中工作，则还应该执行一些操作。 这需要更新SSL证书或安装安全补丁。 所有这些事情都在您的终端中完成。 如果您想了解有关应该使用的基本命令的更多信息，请阅读本文。

演示地址