❶ 成为优秀的Web前端开发人员的学习指南
今天小编要跟大家分享的文章是关于成为优秀的web前端开发人员的学习指南。经过如此多的试验和测试，而不是说你从头开始创建了所有内容，接着，你在网页上创建了第一个登录表单时，你感觉如何?经过了多次更改后，将布局分配给第一个Web应用程序时感觉如何?当成功处理了数千个用户的操作时，你感觉如何?
大多数Web开发人员都经历了上述所有阶段，最初可能会对其中某些感到沮丧，但是当他们看到自己的网站正在运行并且人们在世界各地使用它时，总体感觉确实令人兴奋和惊奇。Web开发人员负责许多任务，从收集需求到设计网站，处理网站的后端部分，并使其成功地为用户服务。每年，行业中都会涌现出新技术和工具，以提高开发人员的工作效率，并为用户提供更好的网站。对于他们来说，保持在Web开发游戏之上的挑战变得越来越大。今天，我们将讨论要在2020年成为Web开发人员的完整地图。
1、首先确定你的目标或道路
我们将讨论很多技术，趋势和工具，但我们不希望您不知所措，因此你需要首先决定要成为一名Web开发人员要做什么，因为这将帮助你选择合适的工具。和学习技术。成为Web开发人员的原因有很多，下面列出了一些选择因素：
·你想作为一名Web开发人员在一家公司工作，这是最普遍的原因。
·你想以自由开发人员的身份来开始自己的业务或代理。
·你可以成为其他公司的顾问。
·你可以创建自己的应用来赚钱。
·编码是你的业余爱好。
从上述感兴趣或目标的领域，你可以选择适用于你的目标的正确工具和技术。如果你的目标是成为一名前端开发人员，则可以选择前端开发的工具和技术。后端和全栈开发也是如此。
2、Web开发的基本工具和软件
·
计算机和操作系统：如果没有计算机和操作系统，则无法编写代码。要学习Web开发，你不需要任何高端计算机(如果你拥有的话，那么更好)。你可以使用任何类型的中型笔记本电脑或台式机。对于操作系统，可以使用适合你的MacOS，Windows(最新版本)或Linux。
·文本编辑器/
IDE：毫无疑问，VSCode适用于大多数情况和大多数语言。它具有良好的性能，出色的扩展性，内置的终端功能以及大量功能。在2019年StackOverFlow调查中，VSCode也是开发人员的首选。你还可以选择其他一些不错的选择，例如Sublime
Text或Atom。如果我们谈论IDE，那么是Visual
Studio(#或C#)，Eclipse和Netbeans(Java)。是不错的选择。
·
Web浏览器：大多数开发人员的首选是Chrome或Firefox。Chrome速度很快，并且使用V8引擎(JavaScript引擎)。Firefox也取得了长足的进步，其中的一些好东西不在chrome浏览器中。两种浏览器都有出色的开发工具，可以对Web开发中的问题进行故障排除。
·终端：您将使用一些系统命令来使用CLI进行很多工作。您可以将默认或第三方终端用于您的Web开发项目。Bash，Zsh，Powershell，Git
Bash，iTerm，Hyper这些都是可以使用的选项。
·设计(可选)：并不是每个人都需要学习。在公司中，有专门的团队来制作图像，徽标或草图，但是如果您是自由职业者，则可能必须学习Adobe
XD，Photoshop，Sketch或Figma。
3、从HTML和CSS开始
HTML和CSS是Web开发的基本构建块。无论您的Web应用程序有多先进，或者使用什么框架和后端语言，都必须使用HTML和CSS构建前端应用程序。因此，这是在Web开发中要学习的第一件事。
·HTML5(语义元素，属性，文档类型等)
·CSS基础知识颜色，字体，位置，盒子模型等。
·CSSGrid和Flexbox对齐内容或创建列。
·CSS自定义属性
4、响应式布局
您的应用程序应该在所有类型的设备(例如智能手机，平板电脑，台式机，iPad或任何其他屏幕尺寸的设备)上都可以查看和使用。因此，了解创建响应式设计或布局非常重要。让我们来看一些重要的主题。
·了解如何设置视口
·媒体查询不同的屏幕尺寸。
·流体宽度
·雷姆单位
·移动优先
5、自定义可重用CSS组件
与其依赖大型的CSS框架(如Bootstrap)，不如创建自己的模块化，可重用的CSS组件以在项目中使用。如果您构建自己的定制设计，则无需导入完整的库。您创建只需要特定UI的组件。的新趋势最近还出现了有助于更有效地编写CSS代码的代码。如果你已经了解CSS，那么您无需在学习Saas上花费很多精力。Saas是CSS预处理程序，可为标准CSS添加更多功能并使其更加高效。你可以使用变量，嵌套，条件语句来减少CSS的重复并提高其效率。你还可以为每个可重用组件创建单独的Saas文件。Sass确实节省了很多时间，所以你绝对应该在2020年学习它。
6、CSS框架
学习CSS框架的普及程度不如去年，但对于不擅长设计的开发人员而言，仍然非常相关或有用。有许多流行的CSS框架可供使用，其中一些如下。
·Bootstrap是最流行的CSS框架。学习引导程序也有助于学习其他框架。
·Tailwind
CSS是其他正在流行的框架，与其他框架几乎没有什么不同。它是一组实用程序类，因此您可以创建自己的按钮和其他看起来与其他按钮确实不同的东西。它们也是高度可定制的。
·物化
·布尔玛
7、前端必须语言：JavaScript
学习HTML和CSS之后，接下来需要学习的是Vanilla
Javascript。对开发人员来说，掌握javascript基本知识非常重要。您将在服务器端语言(例如PHP，Python或#)中使用大量javascript，并且如果您想与React，Angular，NodeJS，Vue或任何其他javascript框架或库一起使用，则非常需要学习这种语言。以下是你应该在javascript中涵盖的一些重要主题
·JavaScript基础知识(变量，数据类型，函数，条件等)
·DOM(文档对象模型)
·JSON(JavaScript对象表示法)
·提取API(请求/响应/Ajax)
·如果您想转向React，Vue，Angular或其他框架，现代JS(ES6)概念对于学习非常重要。
8、一些重要工具
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对其进行捆绑。
9、基本部署
此时，一旦你知道应该为前端开发学习什么工具或技术，就需要知道如何在Internet上部署前端网站。如果你正在为小型企业构建一些小型应用程序，登录页面或个人站点，则无需学习AWS或DevOps，仅因为它们具有光泽和新潮。你将使事情变得更加复杂而不是简单。你需要在2020年学习一些部署工具和步骤。
·域注册(Namecheap，Google等)
·托管托管(InMotion，Hostgator，Bluehost等)
·静态主机(Netlify，Github页面)
·SSL证书。
·FTP，SFTP(文件传输协议)非常适合小型应用程序。
·SSH(安全外壳)，用于高级应用程序。
·CLI和Git。
到目前为止，我们讨论的任何工具，技术趋势或步骤都是前端开发的一部分。您尚不知道该框架，但可以为个人和小型企业构建网站，也可以构建适合移动设备的布局。您还可以使用到目前为止讨论的工具或技术来部署小型应用程序或项目。如果您想申请工作，那么学习一些前端框架(如React，Vue或Angular)将是很棒的。
10、前端框架和状态管理
框架使您可以进行更高级的前端开发。框架为您提供了许多优势，例如可重用的组件，更有条理的UI或页面交互。这对于协作更好，也有助于编写简洁的代码。另外，了解状态管理。每个框架都有不同的方法。以下是2020年的一些流行框架和状态管理器。
·React：React库是最流行的Web开发学习方法，与其他框架和库相比，它相当容易。React开发人员还有很多工作要做。您可以将Rex和
ContextAPI与Hooks一起使用以进行状态管理。
·Vue：
Vue也越来越受欢迎，开发人员也更喜欢学习Vue。与React和Angular相比，Vue最容易学习。VueX是为视图而构建的状态管理器。
·Angular：此框架通常在大型组织中使用。它具有相当陡峭的学习曲线。用Angular学习
TypeScript也很好。它允许您使用可选的静态类型并支持ES2015的功能。NGRX和Services是可以学习此框架的良好状态管理器。
可选学习：
·
如果您具有这三个框架之一的知识，那么您还可以使用Svelte，它是一个JavaScript编译器，可让您生成纯净的原始JS代码并帮助您轻松构建用户界面。
·
了解服务器端渲染。NextJS(React)和NuxtJS(Vue)是允许您在服务器上运行React和Vue的框架。两者都有很好的功能，例如更好的SEO，文件系统路由，自动代码拆分，静态导出，JS中的CSS和许多其他功能。
·静态网站生成器：Gatsby(反应式)和Gridsome(Vue)
我们已经讨论了所有大多数前端开发工具和技术。现在让我们讨论成为后端开发人员或全栈开发人员的语言和技术。
11、服务器端语言(选择一种)
您应该至少了解一种服务器端语言。要在2020年选择一种语言，下面提供了一些选项...
·NodeJS(不是语言，而是运行时环境)
·Python(非常适合初学者)
·Java(适合大型组织)
·Php(适合自由职业)
·Ruby(2020年少两极)
·C#
·Go
注意：无论你喜欢学习哪种服务器端语言，都要确保你了解使用该语言的数据结构和算法。数据结构和算法将帮助您为用户呈现数据，并将帮助您优化Web应用程序中的代码。我们特别建议您专注于使用数组和字符串(最重要)。你将同时使用这两种方法。
12、服务器端框架(选择一项)
一旦学习了自己选择的一种服务器端语言，就可以使用其中一种语言框架。您可以选择以下给出的选项之一...
·Node.js_Express，Koa，Adonis，Feather.js，Nest.js
·Python：Django，Flask，
·Java：SpringMVC，Grails
·PHP：Laravel，Symfony，Codeignitor，Slim
·Ruby：Sinatra上的RubyonRails
·C#：ASP.NETMVC
·Go：Revel
13、数据库(选择一项)
大多数Web应用程序都需要一个存储数据的地方。在某些情况下，某些技术或某些语言可以与某些数据库配合使用。例如：在Mern堆栈中，M代表MongoDB，而在LAMP堆栈中M代表MySQL，但完全取决于您要为应用程序选择哪个数据库。我们将讨论2020年一些流行的数据库。
·关系数据库：RDBMS仍然是最受欢迎的数据库。最喜欢使用PostgreSQL，MySQL，MSSQL。
·NoSQL：MongoDB，RethinkDB，CouchDB
·云数据库：Firebase，AzureCouldDB，AWS
·轻量级和缓存：Redis，SQLlite，NeDB
在学习数据库时，您还将学习RDBMS，ORM(对象关系映射器)或ODM(对象数据映射器)的SQL(结构化查询语言)。GraphQL
：(可选)您可以了解现在流行的GraphQL。这是API的查询语言。它具有类似于JSON的简单语法，并且相当容易实现。
14、CMS：内容管理
您绝对应该了解内容管理系统，尤其是如果您是自由职业者。CMS用于将内容添加到您的网站或应用程序。客户能够更新自己的内容非常好。
·
传统CMS：WordPress(PHP)，Drupal(PHP)，Keystone(Javascript)，Enro(Javascript)
·其他CMS：DEDECMS，帝国CMS，PHPcms，Prismic.io，Strati。
15、部署和DevOps
托管全栈应用程序或后端应用程序比仅前端应用程序要复杂一些，尤其是当您拥有数据库时。确保您知道如何使用CLI进行部署。了解有关用于部署应用程序的以下内容。
在大多数公司中，有不同的团队从事DevOps的工作。因此，拥有有关DevOps的知识完全是可选的。您可以了解到，如果您正在从事自己的项目。
·SSH(安全外壳)
·Web服务器环境：NGINX，Apache
·应用程序托管：Linode，Heroku，AWS，Azure，Now。
·虚拟化：Docker，Vagrant
·测试：单元，功能，集成等
·负载平衡，监视，安全性。
所有技术工具都足以使您成为前端，后端或全栈开发人员。根据最终目标选择正确的工具和技术。
以上就是小编今天为大家分享的关于成为优秀的web前端开发人员的学习指南的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助，想要了解更多web前端知识记得关注北大青鸟web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的web前端工程师。
英文|#/how-to-become-a-web-developer-in-2020-a-complete-guide/翻译|web前端开发(ID：web_qdkf)
❷ 如何系统地学习前端
目前入门前端的人群分类
1、计算机相关专业出身系统走过计算机的理论基础，比如计算机组成原理、操作系统原理、计算机网络、算法数据结构、设计模式，至少用过两门以上编程语言（强类型+弱类型）。
优点：理论、架构方面扎实，有整体计算机思维，内功不错，外功学起来比较快。
缺点：部分人，前端相关细节技术不扎实，不过花时间能很快搞定。
2、非计算机出身自学（也包括计算机专业没好好学的）理论基础薄弱，后来因个人兴趣或者职业需求，自学前端开发技能。
优点：自学能力比较强，能够根据自己的兴趣规划学习内容。
缺点：部分人对前端没有整体的学习框架 ，属于东一片，西一片，不成体系，部分人计算机没有整体思维，建议系统梳理下前端知识体系结构，该补的还是要补起来。
门前端时的一些困境
1、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。比如 原型链，如果清楚 数据结构中链表结构，那么这个东西不难理解，再比如 哈希值，懂得数据结构中哈希表，哈希值也就迎刃而解。
2、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。比如有同学从前端学习入手，后来学习node开发 ，在 I/O ,进程、线程、IPC 、线程锁方面有些概念就比较难于理解，而导致不能很好得使用node 的api 。
3、前端整体体系架构没有做过深入思考。
导致用会用，但不知道为什么用，用另外一个有什么区别。
4、学习环境中无高手。
没有高手能够指导自己进入下一个层次。
5、有意识但是没有行动我的网盘收集了一堆资料或者一堆视频，然后就没有然后了 。
如何系统学习前端
网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。如果你现在是零基础学员，大致可以按如下思路学习系统学习：
基础部分
1、HTML + CSS 这部分学习，可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Java 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，建议马上看《Java语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
进阶部分
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Java。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充：可以使用 Codecademy 学习 Java，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Java 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Java不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Java的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基网络，网络会是你的帮手，另外推荐《Object Oriented Java》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己网络一下。
c） Java 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Java语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Java》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，网络，维基网络上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于2014年10月28日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
升级部分
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
可测性。
高性能。必读《高性能Java》
低流量。移动端关注比较多。
额外补充部分
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
以上内容只是简单说了前端学习的顺序。对于前端开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
2、后端。
应该说前端工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。
3、Android和IOS开发。
时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是前端开发，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。
如何才能快速入门前端
1、学习东西，自学是一种途径，然而在自学的过程中，很多人处于不知道自己不知道的状态。
2、另一种是跟着高手，开阔视野，达到知道自己不知道的境界，从而有方向，在短时期内进入到一个新的境界，节约时间成本。
❸ 前端怎么学
与其他计算机主流技术所不同的是，Web前端所包含的知识模块很多，就目前而言，HTML、CSS、JS、DOM是目前前端技术最为基础也是最为主要的四大模块，但会随着实际需求而有所改变。
一名优秀的Web前端工程师，需要JavaScript语言基础扎实，具有良好的规范开发习惯；熟悉常用的设计模式，熟练使用Vue、Angular技术栈开发；能够熟练使用angular、vue、echarts、jquery、react等框架进行传统开发；要熟悉MVVM、MVC开发模式；熟悉前端工程化、自动化技术，可以根据需求配置Gulp文件及更改Webpack配置文件；熟练使用git版本管理工具。
此外，还要熟悉HTML5、CSS3的新特性，了解不同浏览器之间的差异，制作出的页面能够有很好的兼容性。
Web发展得很快，几乎每天都在变化！如果没有快速学习的能力，就跟不上 Web发展的步伐。作为前端工程师仅仅依靠今天的知识是无法适应未来的，必须不断提升自己，不断学习新技术、新模式。因此，不仅作为新人小白要努力学习，提高自己；就连已经入职三五的前端开发工程师，也需要不断学习，了解前端技术的变化，提高自己的技术技能。
❹ 前端开发怎么自学
前端开发是互联网IT行业中，技能要求来说较为简单的一个职业，是很多人转行IT的选择。只要了解学习的体系，掌握正确的学习方法，学习起来并不难。来讲一下前端开发都要学哪些课程！
前端开发的主要学习内容：
基础： HTML+CSS页面搭建，CS核心和PC端页面开发，HTML5移动端页面开发
核心： web前端核心技术JavaScript，ecmasript，dom，ajax，json，正则，作用域，运动框架，核心算法，高级函数，插件封装。
高级： html5+高级JavaScript开发，大数据可视化，webapp交互接口，lbs定位，微信sdk，es6标准，高级算法，数据结构，插件封装。
框架： bootstrap、vue、react、angular、sass企业开发应用。
给你一些自学的建议：
1、做好心理准备
虽说前端学习起来相对简单，但是还是要做好吃苦的准备，坚定自己的信心。
2、准备好学习计划
这个主要就是要规划好自己的自学路线，要先学什么，再学什么，学习的重点是啥等等，然后从基础的开始学起，一步一个脚印地向前走。
3、多注意实践
学会知识后得会用，才是真正的掌握，建议你在学习的过程中，可以多找一些项目进行练手，提升实战能力。
互联网行业目前还是最热门的行业，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有IT专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。
祝你学有所成，望采纳。