在过去，前端开发人员只要了解一些HTML、CSS或jQuery，就可以创建交互式网站。

而如今的开发，需要更广泛且不断变化的一系列技能，有各种工具、库和框架亟待掌握，同时要不断地投资个人教育。

最近几年，ReactJS、VueJS和Svelte等新型软件库和框架相继出现，它们利用JavaScript来推动主要的Web应用程序快速发展。

本文旨在为前端开发人员应该在2021年关注什么提供一些指导，从而提高水平，不管你是刚入门编程的新手还是有一定经验的人。

1. 代码编辑器/IDEs

与2019年一样，微软的VS Code将成为2021年大多数前端工程师的首选编辑器。

它几乎具备跟IDE一样的功能，例如代码补全和高亮，并且可通过扩展市场进行无限延伸。

尤其是它的市场让VS Code脱颖而出。下面是作为前端开发人员的一些重要扩展内容：

· JavaScript (ES6) code snippets

· npm

· Prettier

· CSS Peek

· Vetur

· ESLint

· Live Sass Compiler

· Debugger for Chrome

· Live Server

· Beautify

这些是很酷的例子。VS Code还有更多有待于挖掘，如果你尚未使用它，建议去尝试一下。

2.测试

未经过测试的代码不应产出。

尽管对个人项目不进行任何测试似乎更加方便，但在商业环境和企业环境下工作时必须进行测试。因此，对于任何开发人员而言，最好尽可能在开发工作中加入测试环节。

测试用例可以作如下区分：

单元测试

单独测试单个组件或函数。

集成测试

测试组件之间的交互。

端间测试

在浏览器中测试功能完善的用户流。

测试方法还有很多，例如手动测试和快照测试等。如果想升任到高级开发人员或者打算在具有一定开发标准的大型企业工作，就应该努力提高测试技能。

3.软技能

软技能的学习经常被忽视却对开发人员极为重要。

尽管它有助于理解技术层面的内容，但是知道如何进行团队沟通也同样重要。如果决心从事技术方面的职业或者打算升任，应该培养以下的软技能：

· 共情

· 沟通

· 团队合作

· 平易近人和乐于助人

· 耐心

· 开放的心态

· 解决问题的能力

· 责任感

· 创造力

· 时间管理

永远记住：高级开发人员最重要的成果是培养更多的高级开发人员。

4. JAMstack

术语JAMstack 代表着JavaScript（在客户端上运行—例如React、Vue或VanillaJS）、API（服务器端处理是抽象的，其通过JavaScript访问HTTPS）、markup（在部署时预构建的模块化标记）三者。

这是构建具有更好性能的网站和apps的一种方式—降低扩展成本、提高安全性和更好的开发体验。

尽管这些术语本身不是新鲜事物，但它们都有一个共同点—即不依赖网站服务器。因此，如果单片应用程序依赖于Ruby或Node.js后端，或者依赖由服务器端CMS（例如Drupal 或WordPress）构建的网站，那么它便不是使用JAMstack构建而成。

如果想使用JAMstack，以下有一些最佳实践：

整个项目由CDN提供服务

由于不需要任何服务器，整个项目可通过CDN获取服务，解锁无与伦比的速度和性能。

一切都存在于Git

每个人应该能够从Git repo上复制整个项目，而无需数据库或者复杂的设置。

自动构建

你可以完美地进行自动构建，因为所有的标记是预先构建的—例如，webhooks或云服务的使用。

原子化部署

为了避免在大型项目中重新部署成百上千的文件而造成的不一致状态，原子化部署等到所有文件上传后，才进行更改。

即时缓存失效

当网站运行时，必须确保CDN能够处理即时缓存清除，以使更改可见。

著名的Netlify、Zeit等主机都支持JAMstack应用，大公司使用它们为用户提供出色的体验。

作为一名前端开发人员，一定有在2021年想要弄清楚的事。如果想要进一步了解JAMstacks，下面是一些不错的资源：

· JAMstack

· JAMstack WTF

· “New to JAMstack? Everything You Need to Know to Get Started”

5.静态站点生成器

静态站点生成器结合了服务器端的渲染功能（对SEO和初始加载时间都非常重要）和单页应用程序。

如今，许多项目即使不需要服务器端渲染，也会选择SSG，因为Next 或 Nuxt这类解决方案具有便捷的功能，例如Markdown编辑器支持、模块捆绑和集成测试运行器等。

如果你是认真对待前端开发，应该仔细研究以下项目，并尝试从中获得一些实践经验：

· Next (基于React)

· Nuxt (基于Vue)

· Gatsby (基于React)

· Gridsome (基于Vue)

尽管还有很多，但这些可能会是2021年最受欢迎的。如果想要了解更多，可以查阅这些资源：

· Next.js

· Nuxt.js

· Gatsby

· Gridsome

6. 渐进式网络应用（PWA）

渐进式网络应用(PWA)会成为2021年的热点。越来越多的公司选择PWAs取代本机应用程序，为用户提供丰富的移动体验。

PWAs具有可靠（即时下载，无需网络连接）、快速（流畅的动画，对用户交互的快速响应）和高度参与感（本机应用程序感受，出色的用户体验）的特点。

它们利用服务人员提供离线功能，以及利用web-app清单文件提供全屏体验。

构建渐进式网络应用的理由如下：

· 可以从浏览器添加到用户的主屏幕

· 即使没有网络连接也能正常工作

· 支持网络推送通知，从而提高用户参与度

· 使用谷歌的Lighthouse功能

如果想了解关于PWAs的更多信息，可以随时查阅这些附加资源：

· Progressive Web Apps

· “Your First Progressive Web App”

7.框架

2021年，我们可能会看到Facebook的ReactJS和社区驱动的VueJS之间的对决。目前，React在GitHub上拥有140,000星（用户评价），而Vue拥有更多，达到了153,000星，而Angular只有53,000星。

2019年React（蓝线）、Vue（红线）、Angular(黄线)和Svelte（绿线）的搜索量支持这一假设——Vue的搜索量稍微高于React。相比之下，Angular的搜索量无法赶超，而Svelte在这一比较中完全不占一席之地。

因此在2021年，使用JavaScript框架或想要使用它的前端开发人员应该将React 和 Vue作为首选。如果正在进行大型的企业项目，Angular是一个有效选择。

如果想要进一步了解这些框架，以下的资源非常好：

· React

· Vue.js

8. GraphQL

GraphQL是当前最热门的话题之一，也绝对是在2021年需要学习或提高的技能。

尽管REST通过提供无状态服务器之类的不错概念，一直被理所当然地认为是设计web APIs的标准。但谈及跟上不断变化的客户访问时，RESTfulAPIs逐渐被认为不是那么灵活。

GraphQL由Facebook开发，旨在解决开发人员使用Restful APIs时面临的问题。

开发人员通过从REST APIsREST APIs中提取基于特定目的创建的多个端点—例如/users/<id>端点或者/tours/<id>/location端点，来收集数据。

GraphQL的使用将以不同的方式展开。开发人员会根据他们的数据请求向GraphQL服务器发送查询。然后服务器将返回带有全部相应数据的JSON对象。

使用GraphQL的另一优势是它使用强类型系统。GraphQL上所有内容都是通过GraphQL模式定义语言（SDL）来进行模式定义的。模式一旦创建，前端和后端开发人员就可以彼此独立工作，因为他们都知道定义的数据结构。

9. 整洁代码

能够编写整洁代码是一项重要的技能而且许多企业对它的需求很高。如果想从开发员的位置升到高级开发员，应该认真学习整洁代码的概念。

整洁代码应该是优雅且易于阅读的。应该注意的是它应重点突出。所有的测试均以整洁代码运行。它们不包含重复项，也应该尽量减少诸如类、方法和函数等实体的使用。

整洁代码开发人员应该进行如下操作：

· 为变量、类、方法和函数创建有意义的名称

· 函数应该短小，其参数也尽可能地少。

· 完全不需要注释—代码应该说明一切

10. Git

毫无疑问，Git是如今网站开发中版本控制的标准。对于每位前端开发人员而言，了解Git的基本概念和工作流程是非常重要的，这有助于保证他们在各种规模团队中的工作效率。

下面是应该了解的一些流行Git命令：

· git config

· git init

· git clone

· git status

· git add

· git commit

· git push

· git pull

· git branch

了解这些命令可以提高效率，这总是不错的。但前端工程师还应该学习Git背后的基本概念。

随着互联网行业的快速发展，也让前端开发变得火热，web前端得到了越来越多的企业青睐和需求，而且由于IT行业相对于其它行业的高待遇，让越来越多的人想要进入到前端，那么web前端怎么样入门呢?

想要进入前端行业，首先要了解的是web前端工程师都需要会什么呢？那么这些知识点就是我们在学习过程中需要进行学习的，web前端所需要的知识点主要是要精通HTML、CSS、JavaScript，而且是都要精通不只是掌握就行，必须要将他们三个都非常理解。这样你才能去完成自己的工作。其它例如后端的一些程序，界面设计等等也是需要在工作中掌握的。

接下来就和大家简单分享一下web前端需要学习的内容：

HTML：HTML成为超文本标记语言，是一种标记语言，可以说不算是一种程序语言，仅仅是标记语言。主要是通过一系列的标签，将网络上的文档格式进行统一。

CSS(Cascading Style Sheets):是一种用来表现HTML的计算机语言，不仅可以修饰网页，还可以配合各种脚本语言对网站元素进行格式化。

JavaScript：简称JS，是一种具有函数优先级的编程语言，主要是作为开发web页面的脚本语言，也是学习web前端相对较难的一部分。

以上就是进入web前端行业所学的内容，首先要开始学习的内容就是html和css，一定要将学习和练习同时进行，不要觉得简单就不去练习，只有通过自己亲手的操作，才可以让自己理解吸收掉所学习的知识，在学习JS的时候，首先要了解这个语言是做什么的，可以做什么。而且你要做的不简单是将函数记住，而是需要了解JS的原理和机制，只有这样才能在这条路上走得更远。

2020前端学习路线：

准备要入门前端的爱好者，首先要知道什么前端是做些什么的，用什么软件语言开发编写的，所以我们先来简单了解一下前端。

1、前端是什么？

就是人们看到的显示屏上的界面。

包括网页、窗体、手机、微信等，只要说是用户能看见的东西，大概都是前端吧。

2、软件开发

作为一个的优秀的前端制作人员，必须对Dreamweaver、notepad++这2款最基础的要能轻松驾驭。

3、编码了解

页面基本结构、文档声明、编码声明、css语法、style属性、link和style标签、id属性、基本样式、Border 、Background、 Font、盒模型、文本设置…常用标签集合header、article、aside、section、footer、nav、h1-h6、p、ul、ol、li、img、dl、dt、dd…绝对路径、相对路径、标签语义化、标签嵌套规范、SEO…等等，

4、进阶编码

了解了初步的编码，但作为一个工程师还是不够的，还需要更深层了解。

兼容性问题处理、整站进阶、css3入门、移动端布局、Bootstrap前端开发框架

5、项目实战

以上问题都大概知道了，那么恭喜你，你已经入门前端了

建议你跟着黑马程序员web前端中级程序员学习路线图来学习，含配套视频，前端工具，源码等。

黑马程序员学习路线图及能掌握的能力（总，以下会分阶段，加上配套学习视频，小伙伴可继续往下看！）

第一阶段：HTML5+css

第二阶段：移动web网页开发

第三阶段：JavaScript网页编程

第四阶段：Node.js与Ajax

第五阶段：vue.js项目实战

第六阶段：微信小程序

第七阶段：React.js项目实战

第八阶段：框架阶段与原理

第九阶段：移动APP开发

第十阶段：node.js进阶

第十一阶段：可视化游戏

第十二段阶段：架构与运维

关注私信获取视频哦！

问题阐述：

其实建议题主下次问问题可以更加详细的描述一下、比如学习前端的目的、自己目前的基础等。

问题分析：

• 历史：

很多年前叫做美工、专注于页面搭建、美化，这类职务通常要担任团队中的ps、flash、广告、UI等一系列工作。

• 进程：

后来随着时间的推移、一系列新的概念、技术、框架的诞生，美工在团队中的实用性降低，为了适应市场需求、在企业和员工自发性的试探下、前端应用而生、包括框架、优化、美化等都属于前端、也就是说、这个时候的美工已经从页面搭建晋升到网站制作，相应的技术能力也需要进一步加深，并且、前端还在进步、后来大家又提出了全杖、即前后端通吃，当然、这类偏全能型的人才一般是后期逐渐向前端转化、他们在团队中可谓是中坚力量。

问题结果：

• 情况一

如果题主是纯小白入门、那么把多年前在知乎的一个回答的截图奉上、其中个别出入忽略不计。

• 情况二

如果有基础、那么就一句话、多练多练多练、不是照着学习视频做，而是自己参照已上线网站界面实现功能、然后查看源码对比自己的代码做比较、不断改进，一定要自己上手做！

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现。入门的话还是比较简单的。现在网上的学习视频也特别多，可以选择适合的，有质量的入门视频学习。前端相对其他编程语言来说也是比较简单的，而且入门的像h5，css3，js也是很简单的。这三个是前端开发中最基本也是最必须的三个技能。

零基础的话，推荐你可以去看看北京尚学堂的前端基础入门课程。特别适合小白，而且是结合项目学习的。我有很多朋友都在学，他们也看的这套教程，比较推荐。而且是免费的干货满满，你可以去看一下。

现在网上关于前端的学习资料、视频很多，但是往往知识点比较零散不成系统，不适合初学者。对于一个刚开始学习前端的人，要学哪些内容？应该怎么学习呢？

首先要学习前端页面重构。包括PC端网站布局、HTML5+CSS3基础、WebApp页面布局等等，打好前端开发的基础。

然后要学JavaScript高级程序设计、PC端全栈开发的知识。包括原生JavaScript交互功能开发、面向对象进阶与ES5/ES6/ES7应用、JavaScript工具库自主研发、jQuery经典交互特效开发、PHP+MySQL后端基础、前端工程化与模块化应用等。

前面的知识都掌握了，就可以学框架、混合开发了。包括Node.js后端开发、Vue.js前端框架、React前端框架、混合开发(Hybrid,RN)、Angular前端框架等等。

对于零基础的小白，想自学成为前端的还可以看看下列书籍：

《图解HTTP》：一本HTTP的神书，图文并茂，生动形象，非常适合小白学习。

《HeadFirstHTML与CSS(第2版)》：入门真的是经典书籍，手把手教学，丰富的案例让你从0开始学前端。

《锋利的jQuery》：作为第一本原因是jQuery入门快，你不会因为js的晦涩难懂而止步不前，因为学习jQuery后你可以自己写一些可以即使看到效果的小项目从而提升兴趣。

《Javascript高级程序设计》：书中涉及的概念基本涵盖了js的大部分内容，包括作用域链、js数据类型、OOP对象在js中的实现、闭包、BOM和DOM模型、对变态IE的系列兼容的解决方案、事件流、还有xml、jason、E4X这些数据格式与js的交互操作简介、高级技巧的介绍(比如惰性载入)等等。

《高性能JavaScript》：揭示了技术和策略能帮助你在开发过程中消除性能瓶颈。你将会了解如何提升各方面的性能，包括代码的加载、运行、DOM交互、页面生存周期等。

《JavaScript设计模式与开发实践》：腾讯前端AlloyTeam团队出品，综合讲述前端的设计模式，设计原则，编程技巧，代码重构等等。

《CSS世界》：CSS和javascript一样，都是很容易上手，却很难精通的。这本是前端知名博主张鑫旭的书籍，好评很多，讲的很细致。

《CSS揭秘》：CSS进阶必备书籍，47个css技巧让你在面对各种css问题的时候游刃有余。

《深入浅出Node.js》：针对Node的基本原理做了深入，能让你了解底层的Node实现。

首先前端开发的基本语法是由HTML、css、js组成。前端语言可以实现视觉效果。所以对刚入门者是很友好的，会增加你的成就感。

HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

1. · HTML,CSS核心基础· CSS过渡
2. · HTML5语义化标签· 线性渐变，径向渐变
3. · HTML新增标签属性· CSS动画Animation
4. · 表单项新增属性· 弹性盒模型
5. · CSS选择器· 经典布局练习(双飞翼，
6. · CSS3伪类 品字布局) + 案例
7. · CSS伪元素· 响应式布局
8. · JavaScript基础
9. · JavaScript操作DOM
10. · JavaScript面向对象(js高级)

然后你再学习pc端，jquery，bootstrap，less，ES6/7/8，promise， npm常用命令，git基础（常用操作），git高级· Node.js基础，git基础（常用操作），http协议 & cookie & session，MongoDB· Express框架，ajax(原生，jQuery,axios,fetch)，ajax库基本封装使用 promise封装，模块化，构建工具gulp，webpack4.0基础

最后学学框架和小程序。

楼主问这个问题呢，首先要明白前端是什么，前端能做什么。前端即网站展示的部分，可以运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网的发展，前端技术主要为html、css、js，新出的html5 和 css3规范，以及前端框架的应用；跨平台响应式网页设计能够适应各种屏幕分辨率，通常以iphone6尺寸设计，实现完美的动效设计，给用户带来极高的用户体验。说白了现在在网上看到的内容都可以算为前端范围。

前端主要处理和用户交互的部分，后台主要操作数据，熟悉的增删改查。后台看着比较枯燥，在linux服务器操作纯命令行。前端呢可以在浏览器调试，自己实现效果。前端相对来说入门比较容易，后端技术相对复杂，但是后端的发展比较广，数据库的设计，项目的架构等等，很多技术总监都是后端出身。但是前端也有很多机会，尤其现在提倡的大前端，pc + 移动端 + 混合开发 + nodejs 等，其实编程思想是相同的，会了 js ，基础打牢固了，学习其他编程语言也可以很快上手。

如果想学习前端的话，不知道楼主是上学还是已经工作了。上学的话可以选择计算机专业，但是大学不讲前端，主要是c语言，java等，网页设计是选修，但是可以凭借自己的兴趣成长，而且现在网上有很多教学视频，慕课网，b站等，都可以学习。重要的是坚持，因为自己学还是比较难的，重要的真喜欢。

如果没有编程基础，可以选择去培训机构。早些年的培训机构还可以，教学质量挺高的，现在很多都讲的一般，六个月一期课，都是抱着赶紧教完，开下一期（像达内，北大青鸟等都一般说实话）。选择个好机构很重要，虽然不可能讲太多东西，你的理解程度也有限制，但是他可以直接的带你入门，学会怎么开发，怎么调试。包装下简历找份工作也是可以的，你的成长主要在开发中成长自己，多学，多问，多思考。你的理解力会慢慢成长。

推荐大家如果有能力能去大厂一定要去大厂，能遇到很多优秀的人，见识理解会有很大成长。即使再笨，跟优秀的人在一起耳濡目染也能有成长，工作流程，工作的分发，工作的汇报等等，都是在小公司学不到的。其实公司大都以业务为主，经验大都是工作一点点总结的，也就是爬坑，学习还是要靠自己，每天抽出点时间给自己，一定会有进步的。

以上就是我的理解，如果有问题可以留言，小编都会回复的，期望对你有帮助，谢谢阅读！

入门前端前，先学习css3样式表 随后学习js前端控制，jq系列的 还有现在流行的ui框架比如bootstrap angular vue等学习 学习前端设计模式等