100 days of code frontend
1.0.0
注意：此资源是旧的！我将在2021年7月底之前归档该存储库，因为我认为这里的许多建议在2021年学习前端网络开发已经过时。
请通过在页面顶部给我一个星星来支持此存储库，然后关注我以获取更多资源！
想了解有关前端开发的更多信息吗？考虑：
这是在＃100DaysofCode期间学习前端开发的一种有意义的课程。当它涵盖了广泛的前端发展主题时，它可以被认为是“调查”风格课程，而不是深入研究任何一个领域。理想情况下，您完成本课程的收获将是对每个主题的熟悉程度，并且能够在必要时在将来在任何领域更深入研究。
该课程受Kamran Ahmed的现代前端开发人员路线图的影响很大。请检查一下 - 这很棒。
注意：我知道前端发展对很多人来说意味着很多不同的事情！如果您是前端开发人员，并且您认为可以改善本指南，请通过提出贡献部分中所述的问题，让我知道。谢谢你！
多亏了一些令人难以置信的贡献者，该课程已转化为以下语言！
该存储库的基本原理是定时装置。如果您过去花费了很多时间尝试学习网络开发或类似技能，那么您可能会在任何一个特定的主题上经历过一个兔子洞。该存储库旨在为每种技术分配一定数期的天数，并鼓励您一旦升起，就可以转到下一个。
可以预期，在开始这一挑战时，每个人都处于不同水平的水平，没关系。初学者和专业的前端开发人员都可以从这些领域的每个领域中的定时练习中受益。
建议的日常活动如下：
在下面，您可以在课程中找到有关每个主题的一些信息，以及有关每个主题的一些想法/指导。有关与本课程一起进行的项目的灵感，请参见项目创意部分。
作为定时装置原则的一部分，如果您没有浏览“学习领域和想法”部分中的所有项目，则可以。取而代之的是，您应该专注于获得最大的收益，可以从分配给每个区域的天数中，然后继续前进。
超文本标记语言（HTML）是用于创建网页和Web应用程序的标准标记语言。凭借级联样式的表（CSS）和JavaScript，它构成了全球网络的基石技术。 Web浏览器从Web服务器或本地存储接收HTML文档，并将文档渲染到多媒体网页中。 HTML在语义上和最初包括文档出现的线索中描述了网页的结构。 （来源：Wikipedia）
HTML确实是网络开发的基础。即使在基于JavaScript的框架中，您最终还是以一种或另一种形式编写HTML。
级联样式表（CSS）是一种样式的语言，用于描述以HTML等标记语言编写的文档的介绍。 CSS与HTML和JavaScript一起是万维网的基石技术。 CSS旨在使演示文稿和内容的分离，包括布局，颜色和字体。这种分离可以改善内容可访问性，在演示特征的规范中提供更大的灵活性和控制权，使多个网页能够通过在单独的.CSS文件中指定相关的CSS共享格式，并在结构内容中降低复杂性和重复。 （来源：Wikipedia）
CSS是Web开发的另一个重要组成部分。尽管它主要用于样式和位置HTML元素，但它已经变得越来越能够执行更具动态的任务（例如动画），这些任务曾经通过JavaScript处理。
<style>标签<link>的外部CSSJavaScript通常缩写为JS，是一种符合ECMAScript规范的高级解释的编程语言。这是一种语言，也被描述为动态，弱键入，基于原型和多范式的语言。与HTML和CSS一起，JavaScript是万维网的三个核心技术之一。 JavaScript启用交互式网页，因此是Web应用程序的重要组成部分。绝大多数网站都使用它，所有主要的Web浏览器都有专用的JavaScript引擎来执行它。 （来源：Wikipedia）
在前端世界中，JavaScript变得越来越重要。虽然它曾经主要用于使页面动态化，但现在是许多前端框架的基础。这些框架处理了许多以前由后端处理的任务（例如，路由和显示不同的视图）。
<script>标签和位置jQuery是一个快速，小且功能丰富的JavaScript库。它使HTML文档遍历和操纵，事件处理，动画和Ajax之类的东西具有易于使用的API，可以在许多浏览器中使用。通过多功能性和可扩展性的结合，JQuery改变了数百万人写JavaScript的方式。 （来源：jquery.com）
在使用Plain（也称为“ Vanilla”）JavaScript的时间之后，您可能会发现一些任务有些麻烦，尤其是与访问和操纵HTML元素有关的任务。一段时间以来，JQuery是使这些任务在不同浏览器中更轻松，一致的首选库。如今，由于Vanilla JavaScript，CSS和更新的JavaScript框架的进步，jQuery不一定是“强制性”学习（我们稍后会查看框架）。尽管如此，花一点时间学习一些jQuery并将其应用于一个小项目还是有益的。
响应式Web Design（RWD）是一种用于Web设计的方法，它使网页在各种设备，窗口或屏幕尺寸上都很好地呈现。最近的工作还将查看器接近作为查看上下文的一部分是RWD的扩展。内容，设计和性能都是所有设备中必要的，以确保可用性和满意度。使用RWD设计的网站通过使用流体，基于比例的网格，灵活的图像和CSS3媒体查询，将布局适应了观看环境，这是@Media规则的扩展。 （来源：Wikipedia）
响应式Web设计是关于使Web应用程序在所有类型的设备上都能正常工作。一个快速的示例是，网站在桌面网络浏览器和手机浏览器中都应正常外观和功能。对响应式设计的理解对于任何前端开发人员来说都是至关重要的！
网络可访问性是确保没有障碍可以阻止与残疾人在万维网上与网站互动或访问网站的包容性实践。当站点正确设计，开发和编辑时，通常所有用户都可以平等访问信息和功能。 （来源：Wikipedia）
可访问性（通常是A11Y）是前端网络开发中最重要的主题之一，但似乎常常会陷入困境。创建可访问的Web应用程序不仅在道德上是合理的，而且考虑到您的应用程序可访问时可以查看这些应用程序的其他受众，也具有很多业务意义。
GIT是一个免费的开源分布式版本控制系统，旨在以速度和效率处理从小到非常大的项目。 （来源：git-scm.com）
版本/代码控制是任何Web开发人员工具包的重要组成部分。有许多不同的版本控制系统，但是Git目前是最普遍的。您可以（并且应该）使用它来跟踪您的项目！
Node.js是一个开源的，跨平台JavaScript运行时环境，在浏览器外执行JavaScript代码。 JavaScript主要用于客户端脚本，其中用JavaScript编写的脚本嵌入了网页的HTML中，并由用户Web浏览器中的JavaScript引擎运行客户端。 Node.js允许开发人员使用JavaScript来编写命令行工具和服务器端脚本 - 运行脚本服务器端，以在将页面发送到用户的Web浏览器之前生成动态的网页内容。因此，node.js代表一个“无处不在的javaScript”范式，统一了围绕单个编程语言的Web应用程序开发，而不是服务器端和客户端端脚本的不同语言。 （来源：Wikipedia）
虽然Node.js通常被称为后端解决方案，但它经常用于支持前端开发。它以多种方式执行此操作，包括诸如运行构建工具，测试和覆盖（所有这些都将很快覆盖！）之类的事情。 Node软件包管理器（NPM）是节点的另一个重要功能，可用于管理项目的依赖项（即，您的项目可能会依靠的代码库 - jQuery就是一个示例！）。
SASS是CSS的扩展，可为基本语言增添力量和优雅。它允许您使用完全兼容CSS兼容语法的变量，嵌套规则，混音，内联导入等。 SASS有助于保持大型样式表格良好，并快速启动和快速运行小型样式表，尤其是在Compass Style库的帮助下。 （来源：sass-lang.com）
SASS允许您以更具程序化的方式编写CSS。如果您完成了一些CSS，则可能已经注意到您最终重复了很多信息 - 例如，指定相同的颜色代码。在SASS中，您可以使用变量，循环和嵌套之类的东西来减少冗余并提高可读性。用SASS编写代码后，您可以快速，轻松地将其编译为常规CSS。
*一些替代方案：基础，布尔玛，实现
Bootstrap是一个免费的开源前端框架，用于开发网站和Web应用程序。它包含基于HTML和CSS的设计模板，用于排版，表单，按钮，导航和其他接口组件以及可选的JavaScript扩展。 （来源：Wikipedia）
有许多可以阐述，样式和使您的Web应用程序动态的选项，但是您会发现，从框架开始，可以极大地帮助您获得局限性。 Bootstrap就是这样一个框架，但绝对远非唯一的选择！我建议您熟悉这样的框架，但是要掌握HTML，CSS和JavaScript基本面要比在任何一个框架中陷入困境要重要得多。
块，元素，修饰符方法（通常称为BEM）是HTML和CSS类的流行命名约定。由Yandex团队开发的目标是帮助开发人员更好地了解给定项目中HTML和CSS之间的关系。 （来源：css-tricks.com）
重要的是要知道像BEM这样的命名和组织系统以及为什么使用它们。在这里进行一些研究，但是在初学者级别，我不建议将太多时间花在主题上。
Gulp是在开发工作流程中自动化痛苦或耗时任务的工具包，因此您可以停止搞砸并建造一些东西。 （来源：gulpjs.com）
在现代前端开发中，您通常会发现自己需要自动化捆绑，移动文件和注入HTML文件等任务。 Gulp是一种可以帮助您完成这些事情的工具！
build子目录中WebPack的核心是现代JavaScript应用程序的静态模块捆绑包。当WebPack处理您的应用程序时，它会在内部构建一个依赖图图，该图映射您的项目所需的每个模块并生成一个或多个捆绑包。 （来源：webpack.js.org）
想象一下，您拥有一个大型的网络开发项目，其中许多不同的开发人员从事许多不同的任务。您可能希望尽可能地将它们模块化。 WebPack通过让您的团队模块化工作，然后到了构建应用程序的时候，WebPack将其全部粘在一起：HTML，CSS/SASS，Javasscript，Images等。WebPack并不是唯一的模块Bundler，但目前似乎是前进者。
Eslint是最初由Nicholas C. Zakas于2013年6月创建的开源JavaScript绒布实用程序。代码覆盖是一种静态分析的一种静态分析，通常用于查找不符合某些样式准则的有问题的模式或代码。大多数编程语言都有代码衬套，并且编译器有时将裁剪纳入编译过程中。 （来源：eslint.org）
绵羊是代码质量，可读性和一致性的绝佳工具。使用衬里将帮助您在生产之前捕获语法和格式化错误。您可以手动运行衬里或将其包含在构建/部署过程中。
*一些替代方案：Vue，Angular，Ember
React（也称为React.js或ReactJs）是用于构建用户界面的JavaScript库。它由Facebook和个人开发人员和公司的社区维护。 React可以用作单页或移动应用程序开发的基础。复杂的反应应用程序通常需要使用其他库进行状态管理，路由和与API的交互。 （来源：Wikipedia）
前端JavaScript框架处于现代前端开发的最前沿。这里的一个重要收获是，尽管令人难以置信的流行，但反应只是用于构建用户界面的库，而Vue和Angular等框架的目标则更加全面。例如，如果您与React中的应用程序构建需要路由到不同视图的应用程序，则需要引入react-router之类的内容。
create-react-app是脚手架新React项目的便捷工具。Redux是JavaScript应用程序的可预测状态容器。它可以帮助您编写始终如一的应用程序，在不同的环境（客户端，服务器和本机）中运行，并且易于测试。最重要的是，它提供了出色的开发人员体验，例如实时代码编辑以及时光旅行调试器。 （来源：redux.js.org）
当您构建越来越大的前端应用程序时，您会开始意识到很难维护应用程序状态：如果用户登录，用户是谁，以及应用程序中正在发生的事情。 Redux是一个很棒的库，可帮助您维护单个状态源，其应用程序可以在该状态下以其逻辑为基础。
Jest是一个令人愉悦的JavaScript测试框架，重点是简单。它可以与项目合作：Babel，Typescript，节点，React，Angular，Vue等！ （来源：jestjs.io）
为您的前端项目设置自动测试非常重要。设置自动化测试将使您能够自信地进行更改 - 如果您进行更改并且测试仍然通过，那么您将非常舒适，您不会破坏任何现有的功能。列出的测试框架太多了。开玩笑只是我最喜欢的人之一。
create-react-app ，则已经配置了Jest。*替代：流
Typescript是Microsoft开发和维护的一种开源编程语言。这是JavaScript的严格句法超集，并将可选的静态键入添加到该语言中。 TypeScript设计用于开发大型应用程序和向JavaScript的迁移。由于Typescript是JavaScript的超集，因此现有的JavaScript程序也是有效的打字稿程序。 Typescript可用于开发客户端和服务器端（Node.js）执行的JavaScript应用程序。 （来源：Wikipedia）
JavaScript是动态键入的。但是，人们普遍认为，静态键入（即提前指定变量类型，类，界面）更清晰，并且降低了缺陷/错误的可能性。无论您对主题的感觉如何，至少要感觉到静态类型的JavaScript类似于打字稿都是很重要的。请注意，Typescript将其编译到JavaScript，以便可以通过浏览器来解释（即浏览器，不是本地解释打字稿）。
Next.js是服务器渲染的React应用程序的简约框架。 （来源：next.js - 对服务器端渲染正确完成）
现在我们变得先进了！到现在为止，您已经构建了一个React（或Vue或Angular）应用程序，该应用程序在浏览器中进行了很多工作。由于各种原因（例如SEO，对客户端绩效的疑虑），您实际上可能希望在服务器上而不是客户端渲染前端应用程序。那就是Next.js之类的框架进来的地方。
该列表应该使您对前端生态系统的广泛接触，但是根本不可能在每个主题上碰到每个主题，更不用说每个区域内的众多工具了！如果您确实认为我错过了一些非常重要的东西，请参阅贡献部分，以了解如何帮助使本指南更好。
随着＃100DaysofCode的发展，您将需要一个或多个项目，您可以应用您的新知识。在本节中，我试图提供一些您可以使用的项目想法。另外，我们鼓励您提出自己的项目想法，因为这些想法可能会兴趣并激发您更多。
通常，我发现以下资源对于学习软件开发的宝贵资源是无价的：
如果您希望我对任何内容的意见，请随时在Twitter上与我建立联系，我会尽力提供一些帮助。如果您认为课程存在问题或有建议，请参见下面的贡献部分。
如果您欣赏这里所做的工作，则可以通过传播有关此存储库的单词来做出重大贡献，包括以下内容：
这是一项正在进行的工作，我非常感谢任何帮助维持这一知识库的帮助！
在为此存储库做出贡献时，请首先讨论您希望通过问题进行更改之前进行的更改。否则，将很难理解您的建议，并可能导致您为无法合并的更改进行大量工作。
请注意，参与该项目的每个人都在试图学习或尝试帮助 - 请好好！
