前端学习路线图:
Internet： HTTP DNS HTML Basic Semantic HTML Forms and Validations Accessibility SEO CSS Basic Layout Responsive Design JavaScript Baisc DOM Fetch API / Ajax Package Manager npm pnpm yarn Framework Angular Vue.js React Svelte Solid JS Qwik Writing CSS Tailwind Radix UI Shadcn UI CSS Architecture BEM CSS Preprocessors SASS PostCSS Build Module Bundlers parcel Rollup Webpack esbuild Vite Task Runners npm scripts Linters and Formatters Prettier ESLint Test Vitest Jest Playwirte Cypress Authentication Strategies JWT OAuth SSO Basic Auth Session Auth Web Security Basics CORS HTTPS CSP OWASP Security Risks Web Components HTML Templates Custom Elements Shadow DOM Type Checkers TypeScript Server Side Rendering(SSR) Svelte Svelte Kit Vue....
在 React 中，您可以使用多种方法来初始化一个应用程序。以下是几种常见的方法：
使用 Create React App（CRA）。Create React App 是一个官方提供的脚手架工具，用于快速创建 React 应用程序的基本结构和配置。 使用 Vite。Vite 是一个快速、简单且现代化的前端构建工具。 create-react-app create-react-app 是一个用于快速创建 React 应用程序的命令行工具。它提供了一个简单的方式来设置和配置一个全新的 React 项目，包括构建、开发服务器和其他常见的配置。
要使用 create-react-app 创建一个新的 React 项目，您可以按照以下步骤进行操作：
安装 Node.js
创建 React 应用：一旦你安装了 Node.js，你可以使用 create-react-app 工具快速创建一个新的 React 应用。
在命令行中运行以下命令来全局安装 create-react-app：
npm install -g create-react-app 创建新的 React 应用：使用以下命令创建一个新的 React 应用： create-react-app my-app 提示：
npx 是在运行命令时临时安装和执行包的工具。这意味着您无需全局安装 create-react-app，而是在运行 npx create-react-app 命令时自动下载和使用最新版本的 create-react-app。
npx create-react-app my-app 这将在当前目录下创建一个名为 "my-app" 的新文件夹，并在此文件夹里做了如下工作：
为你的应用程序安装了一些 npm 包； 写入 react 应用启动所需要的脚本文件； 创建一系列结构化的子文件夹和文件； 如果你的电脑上安装了 git 的话，顺便帮你把 git 仓库也建好。 如果你的电脑上安装了 yarn 的话，create-react-app 会默认使用 yarn 而非 npm。如果你同时安装了 yarn 和 npm，但你希望使用 npm 的话，在 create-react-app 的时候需要输入 --use-npm ：
create-react-app my-app --use-npm 进入应用目录：进入新创建的应用程序目录。在命令行中运行以下命令： cd my-app 启动开发服务器：运行以下命令来启动 React 开发服务器： npm start 先前由 create-react-app 创建的脚本会启动一个地服务 localhost:3000，并打开你的默认浏览器来访问这个服务。成功启动浏览器的话，你的浏览器上会显示如下画面：...
奇怪的是，CSS 被认为是作为 Web 开发人员最容易学习和最难学习的语言之一。开始使用它当然很容易 - 您可以定义样式属性和值以应用于特定元素，然后……这几乎就是您开始所需的一切！但是，对于大型项目，以有意义的方式组织 CSS 会变得纠结和复杂。更改任何一行 CSS 以设置一个页面上元素的样式通常会导致其他页面上的元素发生意外更改。
为了处理 CSS 固有的复杂性，已经建立了各种不同的最佳实践。问题在于，对于哪些最佳实践实际上是最好的，没有任何强烈的共识，其中许多似乎完全相互矛盾。如果你是第一次尝试学习 CSS，至少可以说这可能会让人迷失方向。
本文的目的是提供一个历史背景，说明 CSS 方法和工具如何在 2018 年发展到今天的样子。通过了解这段历史，将更容易理解每种方法以及如何使用它们来为您带来好处。让我们开始吧！
更新：我制作了本文的新视频课程版本，该版本更深入地介绍了材料，请在此处查看： https://firstclass.actualize.co/p/modern-css-explained-for-dinosaurs
使用 CSS 进行基本样式设置 让我们从一个基本网站开始，仅使用一个简单的 index.html 文件链接到一个单独的 index.css 文件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Modern CSS</title> <link rel="stylesheet" href="index.css" /> </head> <body> <header>This is the header.</header> <main> <h1>This is the main content.</h1> <p>...</p> </main> <nav> <h4>This is the navigation section.</h4> <p>...</p> </nav> <aside> <h4>This is an aside section.</h4> <p>...</p> </aside> <footer>This is the footer.</footer> </body> </html> 现在我们在 HTML 中没有使用任何类或 ID，只是 语义标签。没有任何 CSS，网站看起来像这样（使用占位符文本）：
功能齐全，但不是很漂亮。我们可以添加 CSS 来改进 index.css 中的基本排版：
/* BASIC TYPOGRAPHY */ /* from https://github.com/oxalorg/sakura */ html { font-size: 62....
在三种主要的前端技术（ HTML，CSS 和 JavaScript ）中，HTML 仍然是最一致的。如果您唯一关心的是创建内容，那么 1990 年代的 HTML 文档看起来与 2018 年创建的文档非常相似：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My test page</title> </head> <body> <h1>Hello there!</h1> </body> </html> 你有带有标签和内容的元素，带有属性的标签——除了第一行的简化文档类型外，没有太大变化！然而，多年来，Web 开发已经发生了巨大的转变，从创建静态网站（专注于内容）到创建动态 Web 应用程序（专注于交互）——这是 Web 最初设计的目的。创建仍然语义和可访问的自定义用户界面，使用属性和工具提高性能，组织代码以进行重用和可维护性 - 现在有一组全新的问题在起作用。
本文的目的是提供一个历史背景，说明 HTML 如何在 2018 年演变成今天的语言。我们将从结构良好且易于访问的 HTML 的基础知识开始，就像古代的恐龙一样。然后，我们将介绍不同的技术来提高性能、响应能力和可维护性。CSS 和 JavaScript 将不可避免地进入这个对话；出于本文的目的，将从它们如何影响 HTML 本身编写的角度来介绍它们。通过了解这段历史，您将能够充分利用该语言经常被忽视的新旧功能。让我们开始吧！
使用语义元素编写内容 让我们向前面的 HTML 示例添加更多内容。现在，我们将创建一个基本网站，其中包含一个带有链接和搜索输入的导航部分，一个用于显示一般网站信息的大型展示部分（通常称为英雄部分或 巨型屏幕 ），文章的三列部分和一个版权信息的页脚部分。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My test page</title> </head> <body> <div class="navbar"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">Info</a> </li> <li> <a href="#">About</a> </li> </ul> <form> <input type="text" placeholder="Search" /> <button type="submit">Search</button> </form> </div> <div class="main"> <div class="hero"> <h1>Hello there!</h1> <p>General info about the page goes here</p> <p><a href="#">Learn more</a></p> </div> <div class="grid"> <div class="column"> <h2>First Heading</h2> <p>Article content goes here</p> <p><a href="#">View details</a></p> </div> <div class="column"> <h2>Second Heading</h2> <p>Article content goes here</p> <p><a href="#">View details</a></p> </div> <div class="column"> <h2>Third Heading</h2> <p>Article content goes here</p> <p><a href="#">View details</a></p> </div> </div> </div> <div class="footer"> <p>Copyright info goes here</p> </div> </body> </html> 在这里，我们使用带有 <div> 、 <h1> 、 <h2> 、 <p> 等标签的基本元素来标记内容。这里的 HTML 是有效的，但它不是完全语义的——也就是说，标签不能尽可能地传达内容的含义。...
图片来自Ryan North的Dinosaur Comics。 如果你从一开始就没有去过那里，那么学习现代 JavaScript 是很困难的。生态系统的发展和变化如此之快，以至于很难理解不同工具试图解决的问题。我从 1998 年开始编程，但直到 2014 年才开始认真学习 JavaScript。当时我记得遇到 Browserify 并盯着它的标语：
Browserify 通过捆绑所有依赖项，让你在浏览器中导入（‘模块’）。
我几乎听不懂这句话中的任何单词，并且努力理解这对我作为开发人员有什么帮助。
本文的目的是提供一个历史背景，说明 JavaScript 工具如何在 2017 年发展到今天的样子。我们将从头开始，像恐龙一样构建一个示例网站 - 没有工具，只有普通的 HTML 和 JavaScript。然后，我们将逐步介绍不同的工具，以查看它们一次解决一个问题。有了这个历史背景，你将能够更好地学习和适应未来不断变化的 JavaScript 环境。让我们开始吧！
更新：我制作了本文的视频课程版本，为了更清晰，我逐步浏览了每个部分，请在此处查看： https://firstclass.actualize.co/p/modern-javascript-explained-for-dinosaurs
以"老派"的方式使用 JavaScript <!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>JavaScript Example</title> ** <script src="index.js"></script> ** </head> <body> <h1>Hello from HTML!</h1> </body> </html> 第 <script src="index.js"></script> 行引用同一目录中名为 index.js 的单独 JavaScript 文件：
// index.js console.log("Hello from JavaScript!"); 这就是制作网站所需的全部内容！现在，假设您想添加一个其他人编写的库，例如 moment.js（一个可以帮助以人类可读的方式格式化日期的库）。例如，您可以在 JavaScript 中使用 moment 函数，如下所示：
moment().startOf("day").fromNow(); // 20 hours ago 但这只是假设您在网站上包含 moment.js！在 moment.js 主页 上您会看到以下说明：
嗯，右侧的"安装"部分有很多内容。但是现在让我们忽略它 - 我们可以通过在同一目录中下载 moment.min.js 文件并将其包含在我们的 index.html 文件中来为我们的网站添加 moment.js。
<!-- index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Example</title> <link rel="stylesheet" href="index....