#100DaysOfCode期间用于学习前端开发的课程。

Posted 2023-05-08

tags:

中文标题：#100DaysOfCode期间用于学习前端开发的课程。 原文标题：Curriculum for learning front-end development during #100DaysOfCode. 项目评级：Star:2600 Fork:407 下载地址：https://github.com/nas5w/100-days-of-code-frontend 详情介绍

注意：此资源已过期！我将在2021年7月底前存档此存储库，因为我觉得这里的许多建议对于2021年的前端网络开发学习来说已经过时了。

请在页面顶部给它一颗星来支持这个回购，并关注我获取更多资源！

想了解更多关于前端开发的信息吗？考虑：

这是一个有点固执己见的课程，用于在#100DaysOfCode期间学习前端开发。由于它涵盖了广泛的前端开发主题，因此它更像是一门“调查”式的课程，而不是深入研究任何一个领域。理想情况下，你完成这门课程的收获是对每一个主题都有一定的熟悉，并能够在未来必要时轻松深入任何领域。

该课程受到Kamran Ahmed的现代前端开发路线图的重大影响。请检查一下——它太棒了。

注意：我知道前端开发对很多人来说意味着很多不同的事情！如果你是一名前端开发人员，并且你认为本指南可以改进，请按照贡献部分中的描述提出一个问题，让我知道。非常感谢。

翻译

感谢一些令人难以置信的贡献者，本课程已被翻译成以下语言！

课程

这个存储库的基本原理是时间装箱。如果你过去花了很多时间试图学习网络开发或类似的技能，那么你很可能在任何一个特定的主题上都经历过掉进兔子洞。此存储库旨在为每项技术分配一定的天数，并鼓励您在天数增加后转到下一项技术。

预计在开始这项挑战时，每个人都处于不同的熟练程度，这没关系。初级和专业的前端开发人员都可以从这些领域的限时实践中受益。

建议的日常活动如下：

详细信息

下面你可以找到关于课程中每个主题的一些信息，以及关于每个主题的想法/指导。有关与本课程一起进行的项目的灵感，请参阅项目理念部分。

作为时间拳击原则的一部分，如果你没有完成“学习领域和想法”部分中的所有项目，那也没关系。相反，你应该专注于尽可能多地利用分配给每个领域的天数，然后继续前进。

超文本标记语言（HTML）是用于创建网页和web应用程序的标准标记语言。通过级联样式表（CSS）和JavaScript，它形成了万维网的三大基石技术。网络浏览器从网络服务器或本地存储器接收HTML文档，并将这些文档呈现为多媒体网页。HTML从语义上描述了网页的结构，并最初包含了文档外观的提示。（来源：维基百科）

快速外卖

HTML实际上是web开发的基础。即使在基于javascript的框架中，最终也会以这样或那样的形式编写HTML。

学习领域和想法

级联样式表（CSS）是一种样式表语言，用于描述用HTML等标记语言编写的文档的表示。CSS是万维网的基石技术，与HTML和JavaScript并列。CSS旨在实现演示文稿和内容的分离，包括布局、颜色和字体。这种分离可以提高内容的可访问性，在指定表现特征方面提供更多的灵活性和控制，通过在单独的.CSS文件中指定相关的CSS，使多个网页能够共享格式，并减少结构内容的复杂性和重复性。（来源：维基百科）

快速外卖

CSS是web开发的另一个重要组成部分。虽然它主要用于样式和定位HTML元素，但它已经越来越能够执行以前由javascript处理的更动态的任务（例如动画）。

学习领域和想法

JavaScript，通常缩写为JS，是一种符合ECMAScript规范的高级解释编程语言。它也是一种动态的、弱类型的、基于原型的和多范式的语言。除了HTML和CSS，JavaScript是万维网的三大核心技术之一。JavaScript支持交互式网页，因此是web应用程序的重要组成部分。绝大多数网站都使用它，所有主要的网络浏览器都有一个专用的JavaScript引擎来执行它。（来源：维基百科）

快速外卖

JavaScript在前端世界变得越来越重要。虽然它曾经主要用于使页面动态，但现在它是许多前端框架的基础。这些框架处理了许多以前由后台处理的任务-

结束（例如，路由和显示不同的视图）。

学习领域和想法

jQuery是一个快速、小型且功能丰富的JavaScript库。它通过一个跨多个浏览器工作的易于使用的API，使HTML文档遍历和操作、事件处理、动画和Ajax等事情变得更加简单。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。（来源：jQuery.com）

快速外卖

在您花了一些时间使用纯javascript（也称为“vanilla”）之后，您可能会发现一些任务有点麻烦，尤其是那些与访问和操作HTML元素有关的任务。在相当长的一段时间里，jQuery是使这些类型的任务在不同的浏览器之间更容易和一致的首选库。如今，jQuery不一定是“强制性”学习，因为在普通javascript、CSS和更新的javascript框架方面取得了进步（我们稍后将讨论框架）。尽管如此，花一点时间学习一些jQuery并将其应用于一个小项目是有益的。

学习领域和想法

响应式网页设计（RWD）是一种网页设计方法，可以使网页在各种设备、窗口或屏幕大小上都能很好地渲染。最近的工作还将观看者的接近度作为观看上下文的一部分，作为RWD的扩展。所有设备的内容、设计和性能都是必要的，以确保可用性和满意度。使用RWD设计的网站通过使用流动的、基于比例的网格、灵活的图像和CSS3媒体查询（@media规则的扩展）来调整布局以适应观看环境。（来源：维基百科）

快速外卖

响应式web设计就是让web应用程序在所有类型的设备上都能正常运行。一个快速而肮脏的例子是，一个网站应该在桌面网络浏览器和手机浏览器中都能正常运行。对任何前端开发人员来说，理解响应式设计都是至关重要的！

学习领域和想法

网络无障碍是一种包容性的做法，旨在确保没有阻碍残疾人与万维网网站互动或访问万维网网站的障碍。当网站得到正确的设计、开发和编辑时，通常所有用户都可以平等地访问信息和功能。（来源：维基百科）

快速外卖

可访问性通常被写成a11y，是前端web开发中最重要的主题之一，但它似乎经常被忽视。创建可访问的web应用程序不仅在道德上是合理的，而且考虑到在应用程序可访问时能够查看应用程序的额外受众，这在商业上也很有意义。

学习领域和想法

Git是一个免费开源的分布式版本控制系统，旨在快速高效地处理从小型到大型项目的所有内容。（来源：git-scm.com）

快速外卖

版本/代码控制是任何web开发人员工具包的重要组成部分。有许多不同的版本控制系统，但Git是目前最流行的。你可以（也应该！）在学习的过程中使用它来跟踪你的项目！

学习领域和想法

Node.js是一个开源的跨平台JavaScript运行时环境，可以在浏览器之外执行JavaScript代码。JavaScript主要用于客户端脚本，其中用JavaScript编写的脚本嵌入网页的HTML中，并由用户的web浏览器中的JavaScript引擎在客户端运行。Node.js允许开发人员使用JavaScript编写命令行工具，并用于服务器端脚本编写，在页面发送到用户的web浏览器之前，在服务器端运行脚本以生成动态网页内容。因此，Node.js代表了一种“JavaScript无处不在”的范式，将web应用程序开发统一在一种编程语言上，而不是服务器端和客户端脚本的不同语言上。（来源：维基百科）

快速外卖

虽然Node.js通常被称为后端解决方案，但它经常被用来支持前端开发。它以多种方式实现这一点，包括运行构建工具、测试和linting（所有这些都将很快涵盖！）。Node Package Manager（npm）是Node的另一个伟大功能，可用于管理项目的依赖项（即，项目可能依赖的代码库——jQuery就是一个例子！）。

学习领域和想法

Sass是CSS的扩展，为基本语言增添了力量和优雅。它允许您使用变量、嵌套规则、混合、内联导入等，所有这些都具有完全兼容CSS的语法。Sass有助于保持大型样式表的良好组织，并使小型样式表快速启动和运行，特别是在Compass样式库的帮助下。（来源：sass-lang.com）

快速外卖

Sass允许您以更具编程性的方式编写CSS。我

如果你做了一些CSS，你可能会注意到你最终会重复很多信息——例如，指定相同的颜色代码。在Sass中，您可以使用诸如变量、循环和嵌套之类的东西来减少冗余并提高可读性。用Sass编写代码后，您可以快速轻松地将其编译为常规CSS。

学习领域和想法

*一些替代方案：Foundation、Bulma、Materialize

Bootstrap是一个免费的开源前端框架，用于开发网站和web应用程序。它包含基于HTML和CSS的设计模板，用于排版、表单、按钮、导航和其他界面组件，以及可选的JavaScript扩展。（来源：维基百科）

快速外卖

有很多选项可以用于布局、设计样式和使您的web应用程序动态化，但您会发现，从一个框架开始可以极大地帮助您取得领先。Bootstrap就是这样一个框架，但它绝对不是唯一的选择！我建议熟悉这样一个框架，但掌握HTML、CSS和JavaScript的基本知识比掌握任何一个框架都重要得多。

学习领域和想法

Block，Element，Modifier方法（通常称为BEM）是HTML和CSS中常用的类命名约定。由Yandex团队开发，其目标是帮助开发人员更好地理解给定项目中HTML和CSS之间的关系。（来源：css技巧网）

快速外卖

了解BEM等命名和组织系统的存在以及它们被使用的原因是很重要的。在这里做一些研究，但在初学者的水平上，我不建议在这个主题上花太多时间。

学习领域和想法

Gulp是一个工具包，用于在开发工作流程中自动化痛苦或耗时的任务，因此您可以停止闲逛并构建一些东西。（来源：gulljs.com）

快速外卖

在现代前端开发中，您经常会发现自己需要自动化捆绑、移动文件和将引用注入HTML文件等任务。Gulp是一个可以帮助你做这些事情的工具！

学习领域和想法

webpack的核心是用于现代JavaScript应用程序的静态模块打包器。当webpack处理你的应用程序时，它会在内部构建一个依赖关系图，映射你的项目需要的每个模块，并生成一个或多个捆绑包。（来源：webpack.js.org）

快速外卖

想象一下，您有一个大型的web开发项目，由许多不同的开发人员执行许多不同的任务。与其在同一个文件中工作，不如尽可能地对它们进行模块化。Webpack通过让您的团队模块化地工作来帮助实现这一点，然后，到了构建应用程序的时候，Webpack会将所有内容结合在一起：HTML、CSS/Sass、JavasScript、图像等。Webpack不是唯一的模块捆绑器，但它目前似乎是领先者。

学习领域和想法

ESLint是一个开源JavaScript linting实用程序，最初由Nicholas C.Zakas于2013年6月创建。代码linting是一种静态分析，经常用于发现有问题的模式或不符合某些样式准则的代码。大多数编程语言都有代码linter，编译器有时会将linting纳入编译过程。（来源：eslint.org）

快速外卖

Linting对于代码质量、可读性和一致性来说是一个极好的工具。使用linter可以帮助您在语法和格式错误进入生产之前发现它们。您可以手动运行linter，也可以将它们包含在构建/部署过程中。

学习领域和想法

*一些替代品：Vue、Angular、Ember

React（也称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区维护。React可以作为开发单页或移动应用程序的基础。复杂React应用程序通常需要使用额外的库来进行状态管理、路由以及与API的交互。（来源：维基百科）

快速外卖

前端JavaScript框架处于现代前端开发的前沿。这里的一个重要收获是，尽管React非常受欢迎，但它只是一个用于构建用户界面的库，而Vue和Angular等框架的目标是更全面。例如，如果您使用in React构建一个需要路由到不同视图的应用程序，则需要引入react-router之类的内容。

学习领域和想法

Redux是JavaScript应用程序的可预测状态容器。它可以帮助您编写行为一致、在不同环境（客户端、服务器和本机）中运行并且易于测试的应用程序。除此之外，它还提供了出色的开发人员体验，例如实时代码编辑与时间旅行调试器相结合。（所以

来源：redux.js.org）

快速外卖

当您构建越来越大的前端应用程序时，您开始意识到很难维护应用程序状态：比如用户是否登录、用户是谁，以及应用程序中通常发生了什么。Redux是一个很好的库，它可以帮助您维护一个单一的状态源，您的应用程序可以基于该状态源进行逻辑操作。

学习领域和想法

Jest是一个令人愉快的JavaScript测试框架，专注于简单性。它适用于使用以下功能的项目：Babel、TypeScript、Node、React、Angular、Vue等等！（来源：jestjs.io）

快速外卖

为前端项目设置自动化测试是非常重要的。设置自动化测试将使您能够满怀信心地做出未来的更改——如果您做出了更改，并且测试仍然通过，那么您将非常放心，因为您没有破坏任何现有功能。有太多的测试框架需要列出；Jest只是我的最爱之一。

学习领域和想法

*备选方案：流量

TypeScript是一种由微软开发和维护的开源编程语言。它是JavaScript的一个严格的语法超集，并为语言添加了可选的静态类型。TypeScript是为开发大型应用程序和JavaScript的可转换文件而设计的。由于TypeScript是JavaScript的超集，现有的JavaScript程序也是有效的TypeScript程序。TypeScript可用于开发用于客户端和服务器端（Node.js）执行的JavaScript应用程序。（来源：维基百科）

快速外卖

JavaScript是动态键入的。然而，人们普遍认为，静态类型（即提前指定变量类型、类、接口）既更清晰，又降低了出现缺陷/错误的可能性。不管你对这个话题有什么感觉，重要的是至少要对像TypeScript这样的静态类型的JavaScript版本有一个感觉。请注意，TypeScript可编译为JavaScript，因此浏览器可以对其进行解释（即，浏览器不以本机方式解释TypeScript）。

学习领域和想法

Next.js是一个用于服务器渲染的React应用程序的极简主义框架。（来源：Next.js — React服务器端渲染完成（右）

快速外卖

现在我们越来越先进了！到目前为止，您已经构建了一个React（或Vue或Angular）应用程序，它在浏览器中做了很多工作。由于各种原因（例如，SEO、对客户端性能的担忧），您实际上可能希望前端应用程序在服务器上而不是在客户端上呈现。这就是像next.js这样的框架的用武之地。

学习领域和想法

但是X呢？

这个列表本应让您广泛了解前端生态系统，但不可能触及每一个主题，更不用说每个领域中的无数工具了！如果您确实认为我遗漏了一些非常重要的内容，请参阅“贡献”部分，了解如何帮助改进本指南。

项目理念

当你完成#100DaysOfCode时，你会想要一个或多个项目来应用你的新知识。在本节中，我试图提供一些您可以使用的项目想法。或者，鼓励你提出自己的项目想法，因为这些想法可能会让你更感兴趣并激励你。

需要帮助吗？

一般来说，我发现以下资源对学习软件开发非常宝贵：

如果你想了解我的意见，请随时在推特上与我联系，我会尽我所能提供一些帮助。如果你认为课程有问题或有建议，请参阅下面的贡献部分。