怎么让前端项目运行起来

We’ve all been there. You’ve been learning the basics of front end Web development, and you are keen to try out some new ideas.

我们都去过那里。 您已经在学习前端Web开发的基础知识，并且渴望尝试一些新的想法。

You take the time to code up the perfect HTML page, and add some styles and JavaScript for good measure.

您需要花费时间来编写完美HTML页面，并添加一些样式和JavaScript以达到良好的效果。

Then you pause. Time to take a moment to step back and see how your efforts look in the browser.

然后你停下来。 花点时间退后一步，看看您的努力在浏览器中的样子。

Pretty terrible, right?

太可怕了吧？

That was certainly my experience when I first learned a little front end development.

当我第一次学习前端开发时，肯定是我的经验。

I’d put a lot of thought into the functionality of the site. But when I put everything together, it looked awful.

我对该网站的功能投入了很多思考。 但是，当我将所有内容放在一起时，它看起来很糟糕。

I wanted to share my work with a few friends to get feedback. But in its present state, my site wasn’t ready.

我想与一些朋友分享我的作品，以获得反馈。 但是目前，我的网站尚未准备就绪。

You see, functionality is only half the story. We humans for whatever reason are biased towards the appearance or presentation of something.

您会看到，功能只是故事的一半。 我们人类无论出于何种原因都偏向某些事物的出现或呈现。

Perhaps we’re more likely to trust a site that appears professional and well-designed. Or maybe the aesthetic value of a well-designed site can help us overlook minor flaws in functionality.

也许我们更可能信任看起来专业且设计良好的网站。 或许，精心设计的网站的美学价值可以帮助我们忽略功能上的次要缺陷。

Whatever the reason, something of a “halo effect” does exist in Web development.

不管是什么原因，Web开发中确实存在某种“ 光环效应 ”。

In this article, you’ll learn a few easy tips to make your ugly af front end project look better in no time.

在本文中，您将学习一些简单的技巧，以使您的丑陋af前端项目立即变得更好。

起点 (The starting point)

Below is an example of a simple HTML page with no styling at all.

下面是一个没有样式的简单HTML页面的示例。

This will be the starting point for the rest of the article. Each tip will build on top of the earlier ones until you have a better looking page to work with.

这将是本文其余部分的起点。 每个技巧都将建立在较早的技巧之上，直到您拥有一个外观更好的页面为止。

We’ll go in order of impact. That is, we’ll start with the tip that gives you the quickest improvement and make smaller and smaller gains as we go.

我们将按影响顺序进行。 也就是说，我们将从给您最快的改进的技巧开始，并随着我们的发展取得越来越小的收益。

添加一些负数空间 (Add some negative space)

The first tip is easy to picture, but needs to be put into practice carefully.

第一个技巧很容易理解，但是需要认真实践。

‘Negative space' refers to the empty space between elements on the page.

“负空间”是指页面上元素之间的空白空间。

Getting the right amount of negative space goes a long way to making your page look better.

获得适当数量的负空间可以使页面看起来更好。

Specifically, it does two things:

具体来说，它有两件事：

• It makes the page less cluttered. It is easier to find the different elements, because the negative space helps them stand out from each other.它使页面更整洁。 找到不同的元素比较容易，因为负空间可以帮助它们彼此脱颖而出。
• It makes better use of the available screen space. Spacing the elements out carefully can help fill parts of the screen that are more central, and reduce content in parts on the edges.它可以更好地利用可用的屏幕空间。 小心地将元素隔开，可以帮助填充屏幕上更中心的部分，并减少边缘部分的内容。

Check the CSS in the example below. This adds some basic negative space to the simple example you saw earlier.

在下面的示例中检查CSS。 这为您前面看到的简单示例添加了一些基本的负数空间。

And here is the result:

结果如下：

Notice what has happened here:

注意这里发生了什么：

• Padding creates space within an element填充在元素内创建空间
• Margin creates space between the elements边距在元素之间创建空间
• Line-size makes text less cluttered行大小使文本更整洁

Too much empty space isn’t a good look. It can be tricky to get the balance right.

太多的空白不是很好的外观。 取得平衡可能很棘手。

配对字体 (Pair your fonts)

The next tip is another one with a quick impact.

下一个技巧是另一个具有快速影响的技巧。

The default system fonts are very safe and sensible. They are guaranteed to work.

默认的系统字体是非常安全和明智的。 他们保证工作。

But the choice of font makes a huge statement about the purpose and feel of your site.

但是字体的选择对您网站的目的和感觉做出了巨大的贡献。

• Light, playful fonts tell the viewer this page is fun and accessible轻巧，有趣的字体告诉查看者此页面很有趣并且可以访问
• Sensible, simple fonts give a more business-like appearance明智，简单的字体使外观更像商务
• Traditional or display fonts give more of a timeless, classic look.传统字体或显示字体给人以永恒，经典的外观。

You get the idea.

你明白了。

But how to put it into practice?

但是如何将其付诸实践呢？

The key is to use font pairs.

关键是使用字体对。

The idea is that using two fonts for different elements on the page provides a helpful contrast. Again, this helps make elements stand out and makes your page easier to view.

想法是对页面上的不同元素使用两种字体可以提供有益的对比。 同样，这有助于使元素脱颖而出，并使页面更易于查看。

But you shouldn’t pair up any old fonts.

但是，您不应该配对任何旧字体。

For a bunch of aesthetic reasons, some font pairings look much better than others.

出于多种美学原因 ，某些字体配对看起来要比其他字体配对好得多。

Don’t worry about figuring this out yourself, though. As usual, there are resources on the Internet to help you.

不过，不要担心自己弄清楚这一点。 像往常一样，Internet上有资源可以为您提供帮助。

Check out fontpair.co. It lets you browse different font pairings and see how they look together.

查看fontpair.co 。 它使您可以浏览不同的字体配对，并查看它们的外观。

Once you find a pairing you like, the quickest way to use them in your project is to head over to Google Fonts.

找到想要的配对后，在项目中使用它们的最快方法就是前往Google字体 。

• Search for the fonts you want搜索所需的字体
• Add them to your project将它们添加到您的项目中

• Include the link in your HTML <head> element

  在HTML <head>元素中包含链接

• Reference the fonts in the stylesheet引用样式表中的字体

See below for an example built on top of the basic page you saw earlier.

请参阅下面的示例，该示例建立在您先前看到的基本页面之上。

You can also improve the appearance by controlling the font size and text alignment.

您还可以通过控制字体大小和文本对齐来改善外观。

Doesn’t that look considerably better? And after only two easy steps.

这样看起来好多了吗？ 并且仅需两个简单步骤。

获取配色方案 (Get a colour scheme)

I’m no designer, but I appreciate the value of learning the basics of colour theory.

我不是设计师，但是我欣赏学习色彩理论基础的价值。

In short, the colours you use on your page go a long way to creating an impression.

简而言之，您在页面上使用的颜色对于创造印象有很大帮助。

For example:

例如：

• Bright, exuberant colours create an energetic feel明亮鲜艳的色彩营造出活力十足的感觉
• Light, toned down shades create a more corporate impression浅色调的阴影营造出更企业的印象
• Dark, contrasting colours create a more dramatic impression深色，对比鲜明的色彩营造出更具戏剧性的印象
• Brand colours create a consistent identity品牌色彩创造一致的身份

Again, it pays to choose your colours carefully.

同样，仔细选择颜色是值得的。

The theory goes that the relationship between the colours you use also impacts the appearance of your site.

理论上，您使用的颜色之间的关系也会影响网站的外观。

• Analogous colours can create a consistent, harmonious appearance类似的颜色可以创建一致，和谐的外观
• Complementary colours create a pleasing contrast互补色营造出令人愉悦的对比
• Triadic colours provide both contrast and balance三重色同时提供对比和平衡

It pays to pick a colour scheme carefully.

仔细选择配色方案是值得的。

Luckily, there are many ways to do this. Just Google "colour scheme generator" and you will be spoiled for choice.

幸运的是，有很多方法可以做到这一点。 只是Google的“配色方案生成器”，您就会无比选择。

One of my favourite tools is colormind.io. It generates a colour scheme and lets you preview it on a template.

我最喜欢的工具之一是colormind.io 。 它生成一个配色方案，并允许您在模板上预览它。

Of course, rules can be broken. Using a more discordant colour scheme can be jarring, but used carefully can give a page an edgier, more stand-out appearance.

当然，规则可以被打破。 使用更不协调的配色方案可能会令人讨厌，但是如果谨慎使用，则可以使页面具有更锐利，更突出的外观。

See the code below has been updated to use a simple colour scheme.

请参阅下面的代码已更新为使用简单的配色方案。

添加一些结构 (Add some structure)

No matter how well-presented your page is right now, it can be improved by shaking things up a bit.

无论您的页面当前呈现的多么好，都可以通过稍微调整一下来改进它。

Adding in sections and structure can break up the monotony of a longer page.

添加节和结构可以打破较长页面的单调性。

By creating clear bounds between elements, you can create a logical structure and/or hierarchy. This will make it easier for the viewer to understand your page layout.

通过在元素之间创建明确的界限，可以创建逻辑结构和/或层次结构。 这将使查看者更容易理解您的页面布局。

Keep to the same colour scheme, but vary things up a little.

保持相同的配色方案，但略有不同。

See the example below has been extended to include more of a structure. The content is divided into <header>, <footer> and <div class="content"> elements.

参见下面的示例已扩展为包含更多结构。 内容分为<header> ， <footer>和<div class="content">元素。

The example also uses a media query to make the page present better on smaller devices.

该示例还使用媒体查询来使页面在较小的设备上显示更好。

If you want to learn more, try looking into:

如果您想了解更多信息，请尝试研究：

• CSS Grid for creating a layout

  用于创建布局的CSS网格

• Flexbox for creating layouts

  Flexbox用于创建布局

• Bootstrap for creating responsive designs

  用于创建响应式设计的Bootstrap

• Responsive design with media queries

  媒体查询的响应式设计

It didn’t take much rewriting, but the effect is very noticeable.

不需要太多重写，但是效果非常明显。

添加一些图像和图标 (Add some images and icons)

Humans are typically visual creatures. A well placed image or icon can go a long way to making a page easier to view and understand.

人类通常是视觉生物。 放置良好的图像或图标可以使页面更易于查看和理解。

The code below adds a simple image to the main content. See how it is included in the <div class="content"> element and the width is set to 100%? This keeps the structure of the page consistent.

下面的代码将一个简单的图像添加到主要内容。 看看它如何包含在<div class="content">元素中，并且宽度设置为100％？ 这样可以使页面的结构保持一致。

Remember, images should be considered in the context of the overall colour scheme.

请记住，应该在整体配色方案中考虑图像。

You don’t need to be a budding CSS artist or Photoshop wizard to do this. If you need access to high quality photos quickly, your can search Unsplash for free-to-use images.

您无需成为萌芽CSS美术师或Photoshop向导即可。 如果您需要快速访问高质量的照片，则可以搜索Unsplash以获取免费使用的图像。

Even a few free icons can make a difference.

甚至只有几个免费图标也会有所作为。

The example below adds a simple menu icon to the top right corner. You could also add icons to your Github profile, or other online profiles.

下面的示例在右上角添加了一个简单的菜单图标。 您也可以将图标添加到您的Github个人资料或其他在线个人资料。

You can quickly add free icons from these resources:

您可以从以下资源中快速添加免费图标：

• Fontawesome

  丰美的

• Bootstrap

  引导程序

• Google

  谷歌

• Plenty of others

  很多人

添加一些动画 (Add some animations)

This final tip is a nice-to-have for sure.

这最后一个技巧肯定是一个不错的选择。

As anyone who used PowerPoint during the 2000s will know, animations need to be used carefully.

就像在2000年代使用PowerPoint的任何人都知道的那样，动画需要谨慎使用。

Too many animations can be confusing and irritating for users.

太多的动画会使用户感到困惑和烦恼。

But used properly, they can make a page much more interactive and visually appealing.

但是使用得当，它们可以使页面更具交互性和视觉吸引力。

There are lots of ways to add animations to your site. You can use CSS selectors to change style in response to certain events, such as when the user hovers on that element.

有很多方法可以将动画添加到您的网站。 您可以使用CSS选择器来更改样式以响应某些事件，例如当用户将鼠标悬停在该元素上时。

The example below changes the image opacity to 50% when the user hovers over it.

当用户将鼠标悬停在下面的示例上时，它将图像不透明度更改为50％。

Another option is to use is Animate.css. This provides a number of pre-built animations that you can use straight out-of-the-box.

另一个选择是使用Animate.css 。 这提供了许多预构建的动画，您可以直接使用它们。

The code below adds a subtle animation to the buttons when it is clicked.

单击下面的代码可在按钮上添加精美的动画。

Remember — with animation, less is usually more!

记住-动画，少即是多！

最终结果 (The final result)

See this Github repo for overall evolution of the page.

有关页面的整体演变，请参见此Github存储库 。

The design still has a long way to go. But just by following some simple guidelines, it looks much better than it did at the start.

该设计还有很长的路要走。 但是仅遵循一些简单的指导，它看起来就比开始时要好得多。

Here’s a quick review of each of the tips:

以下是每个提示的快速回顾：

1. Add some negative space添加一些负数空间
2. Choose a pair of fonts选择一对字体
3. Pick a coherent colour scheme选择一致的配色方案
4. Add some structure添加一些结构
5. Add a few icons or images添加一些图标或图像
6. (Optionally) add some animation(可选)添加一些动画

Leave a response below if you found this quick guide helpful. Do you have any tips or tricks you want to share?

如果您发现此快速指南对您有帮助，请在下面留下回复。 您有什么要分享的提示或技巧吗？

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/how-to-make-your-front-end-projects/

怎么让前端项目运行起来