W3Cschool前端开发入门学习路线2022

本文是想入门前端的初学者或前端开发者逐步成为现代前端开发者的学习指南，该 WEB 前端开发学习路径是由 W3Cschool 编程狮整理的从 0 开始入门前端自学资源，内容包含互联网基础知识、HTML、CSS、Git、JavaScript 等前端开发必备知识。

前端学习路径.png

前端开发是创建 Web 页面或 app 等前端界面呈现给用户的过程，通过 HTML，CSS 及 JavaScript 以及衍生出来的各种技术、框架、解决方案，来实现互联网产品的用户界面交互。它从网页制作演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是 Web1.0 时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和 HTML5、CSS3 的应用，现代网页更加美观，交互效果显著，功能更加强大。

对于前端开发，您需要开始的全部工作是学习一些基本的 HTML，CSS 和 JavaScript 并开始从事项目。您将在此过程中学到的其他所有知识

注意：虽然编程狮为你整理了详细的学习资源及对应链接，但并不要求大家把所有的资源都看完，如果您觉得自己已经理解了这些概念并且只是在重复学习的内容，则可以跳过资源并转到自己需要的部分继续学习。

0、了解互联网及其运作方式

对互联网，浏览器，网络和其他相关知识有基本的了解。

阅读 W3Cschool 的《互联网协议入门》
了解浏览器信息
阅读 W3Cschool 的《HTTP 教程》
阅读 W3Cschool 的《计算机基础知识》
完成计算机硬件基础知识检测
完成计算机网络基础知识检测
学习 WEB前端入门微课

1、学习 HTML

HTML 提供了网页的框架。学习 HTML 的基础知识；学习基本标签，学习如何编写语义 HTML，了解基本 SEO，学习如何将页面分成可帮助您设置样式的部分。

阅读 W3Cschool 的《HTML 教程》
学习 HTML 入门微课
观看 HTML 视频课程
完成 HTML 测验
阅读 W3Cschool 的《HTML5 教程》
观看 HTML5 基础入门视频
通过实战了解 HTML5 新特性
完成 HTML5 测验
阅读《SEO 教程》
查阅 W3Cschool 的《HTML 参考手册》

2、使用 CSS 设置页面样式

HTML 可以为网页创建结构，CSS 可以设置页面样式并使其看起来更漂亮。如果以人体作为类比，HTML 是骨架，CSS 是皮肤，而 JavaScript 则是帮助我们行动的肌肉，我们将在接下来的部分中详细了解 JavaScript。

阅读 W3Cschool 的《CSS 教程》
了解什么是 CSS 选择器？
观看 CSS 入门视频课程
学习 CSS 入门微课
阅读 W3Cschool 的《CSS3 教程》
通过 HTML+CSS 基础实战练习
通过 HTML+CSS 进阶实战练习
观看 CSS3 入门与实战视频课程
学习 flexBox布局基础入门
通过实战练习 CSS3 flex 布局
通过实战学习 CSS3 Grid 网格布局
查阅 W3Cschool 的《CSS 参考手册》
完成 CSS 测验

3、学习 JavaScript 基础

JavaScript 允许您向页面添加交互性。您可能在网站上看到的常见示例是滑块，单击交互，弹出窗口等。在本部分中，您将学习 JavaScript 的基础知识。

4、版本控制系统和Git

版本控制系统使您可以跟踪一段时间内对代码库/文件的更改。它们使您可以返回到代码库的某些早期版本，而不会出现任何问题。此外，它们还有助于与使用相同代码的人员进行协作–如果您曾经与某个项目的其他人员进行过协作，您可能已经知道将更改从其他人复制并合并到您的代码库中而感到沮丧；版本控制系统使您摆脱了这个问题。

在本节中，您将学习什么是版本控制系统，并了解如何使用 Git（实际上是 VCS）。