望DA佬们给小白点建议

Question

目前自学了python的flask、django后端框架，想拓展下技术栈，尝试搭建网页。
所以想学习前端的知识，但没有系统的学习计划和学习路线，也不清楚该学什么

目前只接触了jquery、html的皮毛，会写一些简单的控件，使用ajax发送get、post请求，选择器，添加元素

希望DA佬们给点建议，指点下小D，感谢！

Answer 1

HTML
HTML 代表超文本标记语言。 它用于前端，为网页提供结构，您可以使用 CSS 设置样式并使用 JavaScript 进行交互。

HTML 的学习大致需要 6 个阶段：

学习基础知识：https://www.w3schools.com/html/html_intro.asp
编写语义化的 HTML：https://www.w3schools.com/html/html5_semantic_elements.asp
了解表单与校验：https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
遵守一些约定与最佳实践：https://github.com/hail2u/html-best-practices
了解可访问性：https://www.w3schools.com/accessibility/index.php
了解 SEO 基础：https://developers.google.com/search/docs
CSS
CSS 或级联样式表是用于设置任何网站前端样式的语言。 CSS 是万维网的基础技术，与 HTML 和 JavaScript 并列。

学习基础的 CSS 大致需要 3 个阶段：

学习基础知识：https://www.w3schools.com/css/
学会如何布局，其中布局又包括以下知识：

Floats 浮动：https://css-tricks.com/all-about-floats/
Positioning 定位：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
Display 展示：https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/
盒子模型：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
CSS 网格：https://cssgridgarden.com/
Flex 弹性盒布局：https://flexboxfroggy.com/
学习媒体查询知识与 Web 响应式设计：https://www.freecodecamp.org/learn/responsive-web-design/
JavaScript
JavaScript 允许您向页面添加交互性。 您可能在网站上看到的常见示例是滑块、点击交互、弹出窗口等。

学习基础的 JavaScript 大致需要 5 个阶段：

基础的语法：https://javascript.info/
学习 DOM 操作：https://www.freecodecamp.org/news/what-is-the-dom-document-object-model-meaning-in-javascript/
学习 Fecth API 与 Ajax（XHR）：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
学习 ES6 与模块化 JavaScript：https://www.javascripttutorial.net/es6/
理解进阶知识

Hositing：https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

事件模型：https://javascript.info/bubbling-and-capturing

作用域：

https://developer.mozilla.org/en-US/docs/Glossary/Scope
https://www.freecodecamp.org/news/var-let-and-const-whats-the-difference/
原型：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

Shadow DOM：https://www.youtube.com/watch?v=7Tok22qxPzQ

严格模式等：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode