从零学web前端

I remember when I first started learning front-end development. I encountered so many articles, and was so overwhelmed by how much material I would need to learn that I didn’t even know where to start.

我记得当我第一次开始学习前端开发时。 我遇到了很多文章，而我需要学习多少材料使我不知所措，以至于我什至都不知道从哪里开始。

This guide will help you navigate learning front-end development. It provides learning resources that I found effective in the past, along with supplementary explanations.

本指南将帮助您导航学习前端开发。 它提供了我过去发现有效的学习资源以及补充说明。

To keep this guide digestible, I broke it up into two parts. Part one goes over developing interfaces with HTML and CSS. Part two goes over Javascript, frameworks, and design patterns. If you’re familiar with HTML and CSS you can skip to part two which covers everything Javascript.

为了使该指南易于理解，我将其分为两部分。 第一部分介绍了使用HTML和CSS开发界面。 第二部分介绍Javascript，框架和设计模式。 如果您熟悉HTML和CSS，则可以跳到第二部分，其中涵盖了Javascript的所有内容。

From Zero to Front-end Hero (Part 2)A complete guide to learning front-end developmentmedium.com

从零到前端英雄(第2部分) 学习前端开发 media.com的完整指南

HTML和CSS基础 (HTML and CSS basics)

In front-end development, everything starts with HTML and CSS. HTML and CSS control what you see on a web page. HTML dictates content while CSS handles styling and layout.

在前端开发中，一切都始于HTML和CSS 。 HTML和CSS控制您在网页上看到的内容。 HTML规定内容，而CSS处理样式和布局。

To get started, read the HTML and CSS tutorials by Mozilla Developer Network(MDN). The MDN provides chapter-by-chapter explanations of important HTML and CSS concepts. In addition, each chapter is only a page long, with interactive demos linked out to CodePen and JSFiddle.

首先，请阅读Mozilla开发人员网络(MDN)的HTML和CSS教程。 MDN提供了有关重要HTML和CSS概念的逐章说明。 此外，每一章只有一页，其中的交互式演示链接到CodePen和JSFiddle。

After completing those tutorials, take a look at the Make a Website course by CodeAcademy. This tutorial only takes a few hours to complete, and is a good primer for building websites with HTML and CSS. If you want more, Building web forms is another tutorial by CodeAcademy that takes you through building and styling a web form.

完成这些教程之后，请看一下CodeAcademy的“ 制作网站”课程。 本教程仅需几个小时即可完成，并且是使用HTML和CSS构建网站的良好入门。 如果您还需要更多内容，则CodeAcademy还将提供“ 构建Web表单”教程，指导您构建和设计Web表单。

For practice with CSS, try out CSS Diner. It’s a fun CSS challenge game. Another important aspect of HTML and CSS are layouts. LearnLayout is an interactive tutorial that shows you how to create layouts with HTML and CSS.

有关CSS的实践，请尝试CSS Diner 。 这是一个有趣CSS挑战游戏。 HTML和CSS的另一个重要方面是布局。 LearnLayout是一个交互式教程，向您展示如何使用HTML和CSS创建布局。

Also, learn how to use Google Fonts with Basics of Google Font API by CSSTricks. Typography is a fundamental building block of interfaces. When you have time, I would highly recommend you read this free online book, Professional Web Typography by Donny Truong. It teaches you everything you need to know about typography as a front-end developer.

另外，了解如何通过CSSTricks将Google字体与Google字体API基础一起使用。 排版是界面的基本构建块。 有时间的时候，我强烈建议您阅读这本免费的在线书籍，《唐尼·特朗(Donny Truong)的专业网络排版》 。 它作为前端开发人员，教给您有关排版的所有知识。

Throughout these resources, don’t worry too much about memorizing things. Instead, focus on understanding how HTML and CSS work together.

在所有这些资源中，不要太担心记住事情。 相反，应着重了解HTML和CSS如何协同工作。

练习HTML和CSS基础 (Practicing HTML and CSS Basics)

Now that you have a basic grasp of HTML and CSS, let’s have some fun. In this section, there are two experiments designed to give you practice building websites and interfaces. I use the term “experiments” because in experiments, you learn as much from your failure as you do from your success.

现在，您已经基本了解了HTML和CSS，让我们玩得开心。 在本节中，有两个旨在让您练习构建网站和界面的实验。 我使用“实验”一词，是因为在实验中，您从失败中学到的东西与从成功中学到的东西一样多。

实验1 (Experiment 1)

In our first experiment, we are going to use CodePen. CodePen is a front-end playground where you can code HTML and CSS without having to store files locally. It also has live previews that update as soon as you save your code.

在我们的第一个实验中，我们将使用CodePen 。 CodePen是一个前端游乐场，您可以在其中编码HTML和CSS，而不必在本地存储文件。 它还具有实时预览，可在您保存代码后立即进行更新。

By using CodePen, you kill two birds with one stone. On one hand, you practice HTML and CSS. On the other hand, you create a basic progress portfolio. We are also going to use Dribbble, which is a site full of design inspiration.

通过使用CodePen，您可以用一块石头杀死两只鸟。 一方面，您练习HTML和CSS。 另一方面，您将创建一个基本进度组合。 我们还将使用Dribbble ，这是一个充满设计灵感的网站。

Go to Dribbble and find a design that is simple enough to code in a few hours. I selected a few designs to get you started: 1, 2, 3, 4, and 5. I chose mobile-first web designs because they are less complex than their desktop counterparts. However, feel free to choose desktop designs as well.

转至Dribbble，找到一种足以在几个小时内编写代码的设计。 我选择了一些设计，让你开始： 1 ， 2 ， 3 ， 4 ，和5 。 我之所以选择移动优先的Web设计，是因为它们不像桌面同类产品那样复杂。 但是，也可以随意选择桌面设计。

After you’ve decided on a design, go ahead and try coding it in CodePen. If you get stuck, remember that StackOverflow is your friend. Another useful practice is to go on websites like Medium, AirBnB, and Dropbox and using the inspector tool to see how they achieve different layouts and styles. Also, take a look at some of the pens on CodePen. I picked out a few good references:

在确定设计之后，继续尝试在CodePen中进行编码。 如果您遇到困难，请记住StackOverflow是您的朋友。 另一个有用的做法是在Medium ， AirBnB和Dropbox之类的网站上访问，并使用inspector工具查看它们如何实现不同的布局和样式。 另外，看看CodePen上的一些笔 。 我挑选了一些很好的参考资料：

• Menu App Interface

  菜单应用界面

• Twitter Widget

  Twitter小部件

• Article News Card

  文章新闻卡

• Simple Flat Menu

  简单平面菜单

If your copy looks different from the original, don’t be discouraged. Keep practicing with different designs and you’ll notice improvement each time.

如果您的副本看起来与原始副本不同，请不要气disc。 继续练习不同的设计，每次都会发现改进。

If you don’t have a design background, it’s likely your design eye is underdeveloped. A front-end developer with a good design eye will be able to identify good designs and replicate them perfectly. I wrote an article a few weeks ago on how to develop your design eye.

如果您没有设计背景，则可能是您的设计能力欠佳。 具有良好设计眼光的前端开发人员将能够识别出良好的设计并将其完美复制。 几周前，我写了一篇关于如何发展设计眼的文章 。

实验2 (Experiment 2)

Hopefully the first experiment gave you some confidence with writing HTML and CSS. For experiment 2, we’re going to take a look at some sites, then code a few of their components.

希望第一个实验给您一些编写HTML和CSS的信心。 对于实验2，我们将看一些站点，然后编写一些组件。

Some websites use CSS frameworks or obfuscate their CSS classnames, making it hard for you to read their source code. That is why I selected a few well-designed websites with easy to read source code.

一些网站使用CSS框架或混淆其CSS类名，这使您难以阅读其源代码。 这就是为什么我选择了一些设计良好，易于阅读的源代码的网站。

• Dropbox for Business: Try replicating their hero section

  Dropbox for Business ：尝试复制其英雄部分

• AirBnB: Try replicating their footer

  AirBnB ：尝试复制其页脚

• PayPal: Try replicating their navigation bar

  贝宝 ：尝试复制其导航栏

• Invision: Try replicating their signup section at the bottom of the page

  Invision ：尝试在页面底部复制其注册部分

• Stripe: Try replicating their payments section

  条纹 ：尝试复制其付款部分

Once again, the focus of experiment 2 is not to recreate the entire page. Although that certainly wouldn’t hurt! Choose a couple of key components like a navigation bar or a hero section to code. I provided a suggestions next to the list of sites but feel free to choose other components.

同样，实验2的重点不是重新创建整个页面。 虽然那肯定不会伤害！ 选择几个关键组件，例如导航栏或英雄部分进行编码。 我在网站列表旁边提供了建议，但可以选择其他组件。

You can code this experiment in CodePen or store it locally. If you choose to store it locally, you can either download this example project as a boilerplate or create the files from scratch. I suggest using an editor like Atom or Sublime.

您可以在CodePen中对此实验进行编码或将其存储在本地。 如果选择将其存储在本地，则可以将本示例项目作为样板下载，也可以从头开始创建文件。 我建议使用Atom或Sublime之类的编辑器。

Also, keep in mind that for any website, you can always see its HTML and CSS. Just right click the page or a component on the page, click inspect, and a panel will pop up with the HTML on the left and the CSS on the right. Once you are done or get stuck, use the inspector to see how your HTML and CSS compare.

另外，请记住，对于任何网站，您始终可以看到其HTML和CSS。 只需右键单击页面或页面上的组件，然后单击inspect ，将弹出一个面板，左侧为HTML，右侧为CSS。 完成或陷入困境后，请使用检查器查看HTML和CSS的比较方式。

HTML和CSS最佳做法 (HTML and CSS Best Practices)

So far what you’ve been learning are the basics of HTML and CSS. The next step is to learn best practices. Best practices are a set of informal rules that improve the quality of your code.

到目前为止，您一直在学习HTML和CSS的基础知识。 下一步是学习最佳做法。 最佳实践是一组非正式规则，可以提高代码质量。

语义标记 (Semantic Markup)

One of the best practices for HTML and CSS is to write semantic markup. Good web semantics means using appropriate HTML tags and meaningful CSS class names to convey structural meaning.

HTML和CSS的最佳实践之一是编写语义标记。 良好的网络语义意味着使用适当HTML标记和有意义CSS类名称来传达结构性含义。

For example, the h1 tag tells us that the text it wraps is an important heading. Another example would be the footer tag, which tells us that the element belongs at the bottom of the page. For further reading, read A Look Into Proper HTML5 Semantics and What Makes For a Semantic Class Name by CSSTricks.

例如， h1标签告诉我们包装的文本是一个重要的标题。 另一个示例是footer标签，该标签告诉我们该元素属于页面底部。 要进一步阅读，请阅读CSSTricks的《 正确HTML5语义查找》和《语义类名称的成因》。

CSS命名约定 (CSS Naming Conventions)

The next important best practice for CSS is proper naming conventions. Good naming conventions, like semantic markup, convey meaning and help make our code predictable, readable, and maintainable. You can read about the different naming conventions in the article OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?

CSS的下一个重要的最佳实践是正确的命名约定。 良好的命名约定(如语义标记)传达了含义，并有助于使我们的代码可预测，可读和可维护。 您可以在文章OOCSS，ACSS，BEM，SMACSS中了解不同的命名约定：它们是什么？ 我应该使用什么？

In general, I suggest trying out simple naming conventions that make intuitive sense to you. Over time, you’ll discover ones that work best for you. To see how companies like Medium utilize naming conventions like BEM, read Medium’s CSS is actually pretty f***ing good. In that article, you’ll also learn that coming up with an effective set of CSS conventions is an iterative process.

通常，我建议尝试一些对您有意义的简单命名约定。 随着时间的流逝，您会发现最适合您的产品。 要了解诸如Medium之类的公司如何利用BEM之类的命名约定，请阅读MediumCSS实际上很不错 。 在该文章中，您还将学习到提出一套有效CSS约定是一个反复的过程。

CSS重置 (CSS Reset)

Browsers have small styling inconsistencies from margins to line-heights. For this reason, always reset your CSS. MeyerWeb is a popular reset. If you want to dig deeper, you can read Create Your Own Simple Reset.css File.

浏览器从边距到行高的样式不一致很小。 因此，请始终重置CSS。 MeyerWeb是流行的重置。 如果您想深入研究，可以阅读创建自己的简单Reset.css文件 。

跨浏览器支持 (Cross Browser Support)

Cross browser support means that your code supports most up-to-date browsers. Some CSS properties like transition need vendor prefixes to work properly in across different browsers. You can read more about vendor prefixes in this article, CSS Vendor Prefixes. The main take away is that you should test your website across multiple browsers including Chrome, Firefox, and Safari.

跨浏览器支持意味着您的代码支持最新的浏览器。 某些CSS属性(例如过渡)需要供应商前缀才能在不同的浏览器中正常工作。 您可以在本文CSS Vendor Prefixes中阅读有关供应商前缀的更多信息。 主要的好处是您应该跨多种浏览器(包括Chrome，Firefox和Safari)测试您的网站。

CSS预处理器和后处理器 (CSS Preprocessors and Postprocessors)

Since the introduction of CSS in 1990s, CSS has come a long way. Since UI systems have become increasingly complex, people came up with tools known as preprocessors and postprocessors to manage complexity.

自1990年代CSS引入以来，CSS已经走了很长一段路。 由于UI系统变得越来越复杂，人们想出了称为预处理器和后处理器的工具来管理复杂性。

CSS preprocessors are CSS language extensions that add bells and whistles like variables, mixins, and inheritance. The two main CSS preprocessors are Sass and Less. In 2016, Sass is generally more widely used. Bootstrap, the popular responsive CSS framework, is switching from Less to Sass as well. Also, when most people talk about Sass, they’re actually talking about SCSS.

CSS预处理器是CSS语言扩展，添加了诸如变量，mixin和继承之类的花哨功能。 CSS的两个主要预处理器是Sass和Less 。 在2016年，Sass通常被更广泛地使用。 流行的自适应CSS框架Bootstrap也正在从Less切换到Sass。 另外，当大多数人谈论Sass时，他们实际上是在谈论SCSS 。

CSS postprocessors apply changes to CSS after it has been either hand written or compiled by a preprocessor. For example, some postprocessors like PostCSS have plugins that add browser vendor prefixes automatically.

CSS预处理器对CSS进行手写或编译后，会将其应用于CSS。 例如，某些后处理程序(如PostCSS)具有可自动添加浏览器供应商前缀的插件。

When you first discover CSS preprocessors and postprocessors, it’s tempting to use them everywhere. However, start off simple and add extensions like variables and mixins only when necessary. The article I suggested earlier, Medium’s CSS is actually pretty f***ing good, also covers how much is too much when it comes to preprocessors.

当您首次发现CSS预处理器和后处理器时，很想在所有地方使用它们。 但是，从简单开始，仅在必要时添加扩展，例如变量和混合。 我之前建议的文章， MediumCSS实际上非常好 ，还介绍了预处理器的数量过多。

网格系统和响应能力 (Grid Systems and Responsiveness)

Grid systems are CSS structures that let you stack elements horizontally and vertically.

网格系统是CSS结构，可让您水平和垂直堆叠元素。

Grid frameworks like Bootstrap, Skeleton, and Foundation provide stylesheets that manage rows and columns in layouts. While grid frameworks are useful, it’s also important to understand how grids work. Understanding CSS Grid Systems and Don’t Overthink Grids are great overviews.

诸如Bootstrap ， Skeleton和Foundation之类的网格框架提供了样式表，用于管理布局中的行和列。 尽管网格框架很有用，但了解网格的工作方式也很重要。 了解CSS网格系统和不要过度思考网格是很棒的概述。

One of the main purposes of grid systems is to add responsiveness to your website. Responsiveness means that your website resizes based on window width. A lot of times responsiveness is achieved by using CSS media queries, CSS rules that only only apply to certain screen widths.

网格系统的主要目的之一是为您的网站增加响应能力。 响应速度意味着您的网站会根据窗口宽度调整大小。 很多时候，通过使用CSS媒体查询 (仅适用于特定屏幕宽度CSS规则)可以实现响应。

You can read more about media queries in Intro to Media Queries. Also, because we have entered a mobile-first era, check out An Introduction to Mobile-First Media Queries.

您可以在“媒体查询简介”中了解有关媒体查询的更多信息。 另外，由于我们已经进入了“ 移动优先”时代，请查看“ 移动优先媒体查询简介” 。

练习HTML和CSS最佳做法 (Practicing HTML and CSS Best Practices)

Now that you are armed with best practices, let’s battle test them. The goal of these next two experiments is to practice writing clean code and observing the long term effect of best practices on readability and maintainability.

现在您已经掌握了最佳实践，现在就来进行测试吧。 接下来的两个实验的目的是练习编写干净的代码，并观察最佳实践对可读性和可维护性的长期影响。

实验3 (Experiment 3)

For experiment 3, pick one of your previous experiments and refactor your code using some of the best practices you’ve learned. Refactoring means editing your code so that it’s easier to read and less complex.

对于实验3，请选择您以前的实验之一，并使用已学到的一些最佳实践来重构代码。 重构意味着编辑您的代码，以使其更易于阅读且不那么复杂。

Being able to effectively refactor code is an important skill of a front-end developer. Creating quality code is an iterative process. CSS Architectures: Refactor Your CSS is a good starting point for refactoring your code.

能够有效地重构代码是前端开发人员的一项重要技能。 创建质量代码是一个反复的过程。 CSS体系结构：重构CSS是重构代码的良好起点。

Here are a few things to ask yourself when you are refactoring your code.

在重构代码时，有几件事要问自己。

• Are your class names ambiguous? 6 months from now, will you still understand what your class name means?您的班级名称不明确吗？ 从现在开始的6个月后，您还能理解您的班级名称是什么意思吗？
• Is your HTML and CSS semantic? When glancing at your code are you able to quickly discern structural and relational meaning?您HTML和CSS语义吗？ 浏览代码时，您是否能够快速辨别结构和关系的含义？

• Are you reusing the same hex color code over and over again in your code? Would it make more sense to refactor it into a Sass variable?

  您是否在代码中反复使用相同的十六进制颜色代码？ 将其重构为Sass变量是否更有意义？

• Does your code work just as well on Safari as it does on Chrome?您的代码在Safari上的工作效果与在Chrome上一样好吗？

• Could you replace some of your layout code with a grid system like Skeleton?

  您可以用Skeleton这样的网格系统替换一些布局代码吗？

• Are you using the !important flag often? How can you fix that?

  您是否经常使用！important标志？ 您该如何解决？

实验4 (Experiment 4)

The last experiment put what you’ve learned about best practices to use. However, the effects of best practices often don’t become apparent until you apply them to a bigger project.

上一个实验将您所学到的关于最佳实践的知识投入使用。 但是，在将最佳实践应用于更大的项目之前，最佳实践的效果通常并不明显。

For the last experiment, build yourself a portfolio website. As a front-end, your portfolio site is one of your most important digital assets. A portfolio is a site that showcases your work. More importantly, it’s an on-going record that helps you track your progress and development. So even if you only have 1 or 2 things to show, put it up.

对于最后一个实验，请构建自己的投资组合网站。 作为前端，投资组合网站是您最重要的数字资产之一。 作品集是一个展示您的作品的网站。 更重要的是，它是持续记录，可以帮助您跟踪进度和发展。 因此，即使您只显示1或2件东西，也要摆放它。

To get started, follow along with Adham Dannaway’s article, My (Simple) Workflow To Design And Develop A Portfolio Website

首先，请跟随Adham Dannaway的文章“ 我(简单)工作流程来设计和开发投资组合网站”

If your first portfolio iteration isn’t perfect, that’s okay. Portfolios go through many iterations. And, what’s important that you built it with your own skills.

如果您的第一个投资组合迭代不完美， 那就可以了 。 投资组合经历了多次迭代。 而且，重要的是要用自己的技能来构建它。

保持最新 (Stay current)

While HTML and CSS won’t go out of vogue anytime soon, it’s important to stay up to date with the front-end landscape.

尽管HTML和CSS不会很快流行，但保持最新的前端环境非常重要。

Below is a list of websites, blogs, and forums that are both enjoyable to read and informative.

以下是既易于阅读又内容丰富的网站，博客和论坛的列表。

• CSSTricks

  CSS技巧

• Smashing Magazine

  粉碎杂志

• Designer News

  设计师新闻

• Nettuts+

  网络学生+

• CSS Wizard

  CSS向导

通过例子学习 (Learn by example)

Finally, the best way to learn is by example. Here are a set of styleguides and code conventions that will teach you how to be a more effective front-end.

最后，最好的学习方法是以身作则。 这是一组样式指南和代码约定，它们将教您如何成为更有效的前端。

风格指南 (Styleguides)

Web styleguides are collections of CSS components and patterns that can be reused across a website. The key thing to note from these styleguides is how component based HTML and CSS approaches allow you to reuse code to keep your code DRY.

Web样式指南是CSS组件和模式的集合，可以在网站上重复使用。 这些样式指南中要注意的关键是基于组件HTML和CSS方法如何允许您重用代码以保持代码干燥 。

• Mapbox

  地图框

• LonelyPlanet

  孤独星球

• SalesForce

  销售队伍

• MailChimp

  MailChimp

编码约定 (Code Conventions)

Code conventions designed to make your code readable and maintainable. Some of these links like CSS Guidelines are guidelines for writing better HTML and CSS while other links like Github internal CSS toolkit and guidelines are examples of quality code.

旨在使您的代码具有可读性和可维护性的代码约定。 其中一些链接(例如CSS准则)是编写更好HTML和CSS的准则，而其他链接(例如Github内部CSS工具包和准则)是质量代码的示例。

• CSS Guidelines

  CSS准则

• Github internal CSS toolkit and guidelines

  Github内部CSS工具箱和指南

• AirBnB’s CSS Styleguide

  AirBnBCSS样式指南

结语 (Wrap up)

Hopefully by the end of this article, you are familiar with HTML and CSS and have a few projects under your belt. The best way to learn front-end is by building projects and experimentation. Remember, every front-end developer has to start somewhere. And it’s better to start today than tomorrow.

希望到本文结尾时，您已熟悉HTML和CSS，并掌握了一些项目。 学习前端的最佳方法是构建项目和进行实验。 请记住，每个前端开发人员都必须从某个地方开始。 从今天开始，比从明天开始更好。

This article is the first of a two part series. The second article covers adding interactivity with Javascript and Javascript libraries/frameworks. Also, if you want me to elaborate on anything or have any questions, feel free to leave a note or Tweet out to me.

本文是两部分系列的第一部分。 第二篇文章介绍如何添加与Javascript和Javascript库/框架的交互性。 另外，如果您想让我详细说明任何问题或任何问题，请随时给我留言或发推文 。

From Zero to Front-end Hero (Part 2)A complete guide to learning front-end developmentmedium.com

从零到前端英雄(第2部分) 学习前端开发的完整指南 medium.com

P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.

附言：如果您喜欢这篇文章，那么如果您按“推荐”按钮或与朋友分享，那将有很多意义。

If you want more, you can follow me on Twitter where I post non-sensical ramblings about design, front-end development, bots, and machine learning.

如果您想要更多，可以在Twitter上关注我，我在这里发布有关设计，前端开发，机器人和机器学习的无意义的杂谈。

翻译自: https://www.freecodecamp.org/news/from-zero-to-front-end-hero-part-1-7d4f7f0bff02/

从零学web前端