web前端开发兴趣爱好 成为Web前端开发工程师的学习指南

我爱编程网小编给大家带来了web前端开发兴趣爱好 成为Web前端开发工程师的学习指南相关文章，一起来看一下吧。

Web前端开发主要学哪些课程？

老实说，前端经过这几年的快速发展，网上的文章和教程还是蛮多的，有经验的人能够根据资料制定出属于自己的 学习方法 和路径，但对于小白来说，还是有些难度。知了姐来给大家分享前端学习路径。 针对0基础，非科班，没有编程经验，想学前端，但是不知道如何入门的人群。

基础部分：

1、HTML + CSS 这部分学习，可以模仿一些网站做些页面，在实践中积累经验。做到能与UI对接，能100%重构网站静态页面的开发，为后期编写页面逻辑、动态效果打基础。

2、Javascript 要学的内容实在很多，如果没有其他 编程语言 的基础的话，学起来可能要费些力，这个阶段需要掌握编程基础概念，培养 逻辑思维能力 。能够独立完成网站的页面开发（包括合理布局，JavaScript操作DOM）

进阶部分：

有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。

3、JavaScript高级与服务器基础，深入面向对象编程，具备移动端开发能力，处理浏览兼容问题，深入学习ES6/ES7语法规范，前后端分离开发思想。 我爱编程网

4、框架与服务器，数据库，前端安全的学习，深入了解Node，数据库操作，前后端分离技术，前后台协作开发。熟悉NPM（Yarn），Node模块fs，http，路由，处理请求，express4（koa）；掌握创建websocket服务，MongoDB/ MySQL数据库 CRUD（Mongoose）；掌握微信小程序开发，掌握Vue2.x基础，Vue-router，Vuex等等。

5、React与组件化开发，深入学习组件化开发思想，了解webpack使用，掌握React开发基础，Hook，create-react-app等等。

升级部分：

有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。

其他补充部分：

前端项目同样面临 软件生命周期 的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。

以上内容只是简单说了前端学习的顺序。对于 前端开发 ，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。

1、 交互设计 。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐 《简约至上》 。

2、后端。应该说 前端工程师 必须至少了解一门后端语言，不过如果爱好也可深入学习，如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。

最后，有经验的程序员都知道，学习编程最有效率的方式就是把你扔到一个项目组，连滚带爬的做一两个项目下来你马上会发现所有的知识点全都连到一起了，不再是分散的，而是形成一个整体了。那种感觉是仅仅深入钻研知识点而不写真实项目的人所不能体会的。 一个项目就是一根绳子可以把大片的知识串到一起。

如果想锻炼实际开发的能力而不仅仅是背诵或者了解一些知识点，如果想成为真正的好手，那么，还是做项目吧！

整体来看的话，Web前端开发需要学习的内容还是比较多的。前端是一门涵盖面很广的学科，而且技术更新较快，优秀的Web前端开发工程师应该具备快速 学习能力 。如果没有快速学习能力，就跟不上Web发展的步伐，所以需要不断提升自己，不断学习新技术、新模式。

成为Web前端开发工程师的学习指南

今天小编要跟大家分享的文章是关于成为web前端开发工程师的学习指南。想要学习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开发人员还有很多工作要做。您可以将Redux和
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)，Enduro(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)

前端工程师们，你们对前端的兴趣是什么？

Web 前端开发 是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web1.0时代产物,那时网站的主要内容是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。说得直白点就是美工photoshop, 交互设计 ,flash,js,html+css。就小规模公司而言,一个技术员都得会这几样技能,这样很锻炼人的,慢慢的你就会成为公司的主力。大规模的公司把这些分得很细,所以,你可以精通一门,熟悉其他的,进军大公司。

网页开发工具

学习web前端开发,网页开发工具有FrontPage,会用 Word 的人很容易学会FrontPage。还有一个常用的是Dreamweaver。这两种都是使用最多的HTML网页制作工具,我使用的是Dreamweaver cs6,因为这套软件提供了一套直观的可视界面,融合了html5一些新的内容。包括网格布局什么的。

基础知识:

html + css。这部分建议在 www.w3school.com.cn 上学习,边学边练,每章后还有小测试。之后可以模仿一些网站做些页面。本站提供的个人博客模板 www.yangqq.com/download/ 都是比较简单的单页,可以下载下来模仿自己做一个。理解css每个元素的属性,样式的实现不一定只有一种写法,多想一想还有没有什么需要改进的地方。

随着互联网的普及，越来越多的小孩很早便接触了互联网，玩游戏、做博客等等，想学点与互联网相关的内容，首选自然是前端，因为入门要求低，很多 Twitter 名人就是其中的典型，他们更懂得网民需要什么，写的程序操作简单。

学习内容

HTML、CSS和JavaScript。html是内容,css是表现,javascript是行为。前端开发的门槛其实非常低,与服务器端语言先慢后快的 学习曲线 相比,前端开发的学习曲线是先快后慢。所以,对于从事IT工作的人来说,前端开发是个不错的初入点。也正因为如此,前端开发的领域有很多自学成“才”的同行。html是最基础的,现在流行的是html5设计,先学会网页布局。css是用来美化html页面的为页面提供布局和格式。最后再学javascript。如果你把每天看电影、看电视剧的时间用来学习,我想一个星期入门是没有问题的。

通过以上分析可以发现，从事Web 前端行业的人形形色色，或者是迫于工作需要，或者是感兴趣，但对于我们即将从事这个行业来说，首先是对于这个行业的兴趣，只有有兴趣才能更深入的学习，克服在学习过程中的枯燥和困难；如果能有可以加分的优势更好，如目前所从事的行业与其相关，或大学学的专业相关，这些都没有也没有关系，只要有兴趣和不懈的激情，也可以通过后天的努力，走上前端开发的职业道路。即使目前我们所从事的与前端一点关系也没有，但随着工作的深入，自身能力的提高，兴趣点发生转移也不是不可能。

总体来说：是大环境把这个岗位推到了我们的眼前，比如我同学刚好是搞前端，然后顺便带了带我，然后自己学了学，感觉还不错就上路了。大环境下以小自我的选择，促就了当前的一种实现 自我价值 的方法。

以上就是我爱编程网小编给大家带来的web前端开发兴趣爱好 成为Web前端开发工程师的学习指南，希望能对大家有所帮助。