想自学前端，该怎么开始学，从哪学起呢？

从HTML和CSS开始

HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。

HTML5（语义元素，属性，文档类型等）

CSS基础知识颜色，字体，位置，盒子模型等。

CSS Grid和Flexbox对齐内容或创建列。

CSS自定义属性

响应式布局

您的应用程序应该在所有类型的设备（例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备）上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。

了解如何设置视口

媒体查询不同的屏幕尺寸。

流体宽度

雷姆单位

移动优先

前端必须语言：JavaScript

学习HTML和CSS之后，接下来需要学习的是Vanilla Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言（例如PHP，Python或http://ASP.net）中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题…

JavaScript基础知识（变量，数据类型，函数，条件等）

DOM（文档对象模型）

JSON（JavaScript对象表示法）

提取API（请求/响应/ Ajax）

如果您想转向React，Vue，Angular或其他框架，现代JS（ES6）概念对于学习非常重要。

一些重要工具

Web开发中将使用一些工具。这些工具将帮助你进行调试，提高生产率，管理代码，与其他开发人员合作以及类似的东西。让我们讨论其中一些工具。

Git（版本控制）和Github是您肯定会在2020年学习的最受欢迎的工具。Git在与其他开发人员协作和管理代码方面有很多帮助。您还可以选择其他一些选项，例如GitLab，Bitbucket和其他一些选项。

了解如何使用浏览器开发工具。无论是chrome还是firefox，您都应该知道如何使用不同的选项卡，例如元素选项卡，javascript控制台，用于请求和响应的网络选项卡，应用程序选项卡以及其他用于不同目的的选项卡。

大多数IDE或文本编辑器都具有添加扩展名或插件的功能，这对提高生产力和构建Web应用程序非常有帮助。例如，Visual Studio代码中的VSCode扩展可帮助下载扩展，例如实时服务器或实时saas编译器以与React一起使用。

Emmet是另一个很棒的工具，它允许您编写非常快速的HTML和CSS，这有助于提高开发人员的生产力。

学习使用javascript软件包管理器，例如NPM和Yarn。如果您正在使用Javascript框架或库（例如React），那么这些软件包管理器将使用很多，但是对于其他语言（例如Python或Php），您将使用不同的软件包管理器。

如果要在前端安装NPM软件包，则必须使用Webpack或Parcel。如果要创建自己的模块，或者要将一个javascript文件带到另一个javascript文件，则默认情况下不能仅使用浏览器来执行此操作，因此需要Webpack或Parcel对其进行捆绑。

基本部署

此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。

域注册（Namecheap，Google等）

托管托管（InMotion，Hostgator，Bluehost等）

静态主机（Netlify，Github页面）

SSL证书。

FTP，SFTP（文件传输协议）非常适合小型应用程序。

SSH（安全外壳），用于高级应用程序。

CLI和Git。

到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架（如React，Vue或Angular）将是很棒的。

前端框架

框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。

React： React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将 Redux和 Context API与Hooks一起使用以进行状态管理。

Vue： Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。

Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习 TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和 Services是可以学习此框架的良好状态管理器。

小编也在前端混了有几年，整理了一些学习资料，对web开发技术感兴趣的同学
欢迎加入新建的Q群：603985993，不管你是小白还是大牛我都欢迎，希望大家诚心交流！
还有大牛整理的一套高效率学习路线和教程与您免费分享，与企业需求同步。
好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

以上就是我的分享，希望对你有所帮助，另外我自己也从事前端开发多年，自己对于前端也做了一些学习的总结，也录制了基础的精讲视频和学习方法，