初学者学习前端开发的实用指南

我在不到5年前的2014年春季开始了编码之旅。从那时起，我已经获得了一些编程技能，但我仍然知道，还有很多事情需要学习。无论如何，我决定将这些技巧集中在一个地方，以帮助将来的开发人员前进。本文是我开始旅程时希望找到的指南。

在开始之前

如果您决定自己学习，那么互联网上就会有很多信息，您很难将所有事情都束之高阁。重要的是要有一个结构化的计划，避免浪费时间从一种资源转移到另一种资源。

请注意，这些只是进入前端世界的第一步。它可以帮助您入门，但它并不旨在成为完整指南。

• 课程。这可能是您的主要路径。它是您应该学习的东西的结构良好的概述，并提供了良好的学习曲线。
• 练习。它们很小，因此您可以每天进行几次操作并保持绿色热点，从而轻松地跟上步伐。
• 项目。完成每一章后，您将构建5个项目以获得认证。进行一些练习并巩固您的知识是理想的。
• 社区。它不仅仅是一个学习平台。有一个论坛，博客和YouTube频道，不同级别的开发人员可以在此共享知识，并在其中找到灵感。
• 免费。金钱对许多人而言至关重要，在任何情况下，您都不会花费任何时间。

响应式网页设计

第一部分涵盖了如何构建静态网站并为其应用样式的基本知识。

基础
基本的HTML和HTML5 和 基本的CSS部分是现代Internet的基础。应用视觉设计，应用可访问性和响应式Web设计原理 将教给您编写优质网站的基础。不要着急并小心翼翼，这是您所学的主要基础。

接下来，您将学习强大的布局技术，例如CSS Flexbox和CSS Grid 。在继续之前，请完成本简短指南，以概述在Flexbox-Grid时代之前人们使用的各种布局技术。您不太可能需要使用它们，但是了解并欣赏我们今天拥有的技术始终是一件好事。

CSS Flexbox
我因Flexbox的简单性和强大功能而爱上了它。起初，许多不同的属性可能会使您感到困惑，因此，我的建议是在计算机附近放置备忘单，以便您始终可以轻松查找它们。此外，将此交互式Flexbox 备忘单添加为书签。

CSS Grid
Grid更加先进和灵活，但是在大多数情况下，Flexbox足够了。无论如何，您将在武器库中拥有另一个强大的工具。尤其是当您在Grid Garden中种植作物时，这很容易理解。 ？

实践
在继续进行最终项目之前，我建议您执行以下操作：

• 在Codepen上创建一个帐户。在前端，这是一个很酷的游乐场，您可以在其中构建项目，测试代码片段并进行练习。
• 在您的计算机上安装 代码编辑器 ，并学习如何使用它。
• 了解命令行的基础知识。
• 了解如何使用Git 。
• 获得一些指导性练习。如果您已经使用过代码编辑器和版本控制，并将您的工作上传到Github上的特殊学习库中，那就太好了。
  

更多建议

如果您更喜欢视觉指南，可以使用Beau Carnes的JavaScript基础课程。
关于JavaScript的新标准，我最喜欢的是对每个人来说都很棒的ES6课程！
Scrimba上的正则表达式课程。
NetNin​​ja 的面向对象的JavaScript课程对我很有帮助。

算法
这是我最喜欢的认证部分。我记得当我刚开始解决它们时，它们是多么具有挑战性。我可以整日考虑可能的解决方案。这是学习JavaScript以及像程序员一样思考的一种好方法。

作为一点帮助，我建议您观看Traversy Media的JavaScript Cardio Sessions。

要进行更多练习，我强烈建议您注册CodeWars并为实现6kyu设定初始目标。这非常有用，因为当您完成任何挑战时，您可以浏览其他人的解决方案并发现新的把戏，方法和想法。

…现在您知道如何使用JavaScript！？

放在一起

现在是时候接受Wes Bos 的Javascript30挑战了。这是学习HTML，CSS和JavaScript如何协同工作，增强基础知识并了解DOM的最佳方法。建立这些小项目对我来说是一次很棒的经历，而且真的很有趣！

前端库

从这一点上来说，您正在成为真正的前端开发人员？
最受欢迎的CSS框架。在YouTube上建立几个网站以及指南。习惯于使用Bootstrap著名的列网格布局。

jQuery

尽管有人说jQuery已经死了，但是当纯JavaScript的解决方案很古怪并且使用JS框架过多时，它将总是有帮助的。这将是您的武器库中的另一个出色工具。用它来构建几个小应用程序进行练习。

Sass

在看到CSS框架的真正功能之前，我没有完全欣赏它们。我想学习高级CSS技术，并购买了Jonas Schmedtmann 出色的Advanced CSS and Sass 课程（收费）。如果您想提高CSS技能并了解工作流程，则强烈建议使用。我仍然很高兴自己找到了它。

React＆Redux

这是“前端库”部分的主要部分。作为您第一个学习的JavaScript库，React是一个不错的选择。

坦白说，很难理解如何以freeCodeCamp的格式使用它，因为您不能从头开始构建任何东西，有些事情可以在后台进行。因此，参加有关React和Redux的课程，并花一些时间来了解他们的想法和工具。

我个人的最爱：

• NetNin​​ja编写的完整React教程（带Redux）
• 对初学者的反应（由Wes Bos提供）
• React- Academind 的完整指南（付费）
• 我希望您很高兴在最终项目中使用新知识。

现在您可以构建任何想要的东西了吗？

进一步发展

您现在是真正的前端开发人员，并且具有足够的技能来构建出色的Web应用程序。也许您很好奇下一步该怎么做，答案很简单，如“构建，构建，构建！”。您当前的任务是为自己创建投资组合并获得更多练习。

希望本指南对您的学习有所帮助，并希望节省您的时间？

祝好运！