学习WEB前端怎样入门

Posted 2023-05-16

前端工程师，也叫Web前端开发工程师。是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：html、CSS和javascript.
Web前端开发要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
随着近两三年来RIA（Rich Internet Applications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（php、http://ASP.NET，JSP、Python）等语言，前端开发工程师也需要掌握。
前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。

学习 HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。而学习 Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么。如果只想当一个普通的前端程序员，只需要记住大部分 Javascript 函数，做一些练习就可以了。如果想当深入了解Javascript，需要了解 Javascript 的原理，机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。还需要 深刻了解 浏览器宿主 下 的 Javascript 的行为、特性。

参考技术A 学电脑技术的话可以到专业的计算机培训学校山东新华了解一下，开设有电子竞技、网站开发、人工智能、电子商务、室内设计、5G新媒体直播等23大热门专业，都是零基础教学 参考技术B 第一：理清Web前端的知识结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。
第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。
第三：注重动手实践能力的培养。学习前端开发一定要注重动手实践能力的培养，因为前端开发的细节比较多，所以只有多操作才能逐渐熟悉。
前端开发目前被称为“大前端”，整个前端开发也被赋予了更多的含义，包括Web前端开发、移动端开发、大数据呈现端开发以及部分后端开发任务等等。所以，想要在前端行业中走更远，一定要注重知识结构的丰富性。 参考技术C 一名合格的前端开发工程师，不单单需要掌握前端必须的各种技术，同时还要掌握其它技术，需要掌握一点后台的知识，同时也要对网站构架有一定的了解，这样才可以称之为一个合格的Web前端开发工程师。至于Web前端的薪资情况，需要根据个人能力而定。下面分享一份Web前端的学习路线。
1、PC端页面制作与动画特效
学习HTML+CSS搭建网页、CSS动画特效、PhotoShop切图等基础知识，获得初级Web前端工程师技能，主要进行PC端网页制作与样式设计实现，能够配合UI设计师进行项目开发。
2、移动端页面制作与响应式实现
讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以适配各种手机尺寸，并能利用响应式进行移动端与PC端适配。
3、JavaScript与jQuery开发
同HTML5基础知识一样，JavaScript开发与jQuery开发是职业晋升必备的技能包，获得中级Web开发工程师技能，主要进行页面行为交互，实现网站常见特效，加轮播图，选项卡，拖拽效果等，并能配合UI和后端进行项目开发。
4、HTML5高级框架技术开发
常用的Vue框架开发，React框架开发，Angular框架开发，数据可视化技术。可获得中级Web前端工程师技能，主要适用框架开发企业项目，实现单页面应用开发。可以完成复杂的数据交互应用场景，具备独立开发项目能力。
5、全栈前后端技术开发
Node.JS技术，其他后端技术，如Java或PHP。可获得高级Web前端工程师技能，主要进行前后端全栈样式开发，能独立完成一个中小型项目的前后台，对于网站开发有着非常熟练的编程能力。
可以从零开始，一步步的掌握前端开发的各项相关技能，最终达到企业对初级前端开发工程师、中级前端开发工程师、高级开发工程师等职位的要求。
学web前端一般在2万左右，4-6个月左右的时间。应该根据自己的实际需求去实地看一下，先好好试听之后，再选择适合自己的。只要努力学到真东西，前途自然不会差。 参考技术D 需要掌握的知识：
掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。
因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
学好CSS学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
学好JavaScript学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
熟悉版本控制系统的用法熟悉使用一种优秀的版本控制系统，你在实际工作中就会发现精通一种版本控制系统是很幸福的事情。
学好Web框架当你掌握了HTML，服务器端脚本语言，CSS和JavaScript后，就应该找一个Web框架加快你的Web开发速度，使用框架可以节约你很多时间，如果你使用PHP，可选的框架有CakePHP，CodeIgniter，Zend等，Python程序员喜欢使用Django和 webpy，Ruby程序员喜欢使用RoR。
对于初学开发人员来说，以上知识是不是看起来很复杂，其实，当你一步步学习并为企业开发成功案例时，你会发现一切都是有意义的付出。

转 - Web新人（偏前端）应该怎样学习（个人观点，勿喷）

我自己是会计专业，转行自学web的，学习有一两年了，也还是新人一个，只不过不是那种超级“新”的，所以有什么话说得不对，请轻喷。欢迎大家来和我交流。

1、我能不能转行学web？

能不能学web这个不是别人告诉你的，是你自己告诉自己的。在我看来，会认字，会写几个字母就可以开始学web了。从最开始的html学起，从标签学起，标签总能看懂吧？不懂就去查！我自己体会最深的是，刚刚开始学习后台语言，花了很久时间去比较ASP,ASP.NET,PHP，在纠结自己应该学什么语言，可不可以学好，去贴吧找人问，去微博找人问，去技术交流群里面问，结果别人给你指点了还是别人的话，而是用几个星期去纠结应该学习什么，还不如花点时间开始学，找个教程学习入门知识就几天的时间，你学会了入门就知道你适不适合学习这门语言。

 2、我应该学习web哪些内容？

不用问自己应该学习哪些内容，去招聘网站上面看看别人的招聘要求，随便找个对技术要求比较齐全的招聘信息复制下来，一般招聘上面提到的技术都是由易到难的，然后按照里面提到的知识点一个一个的学习，等你学得入门了就知道自己应该学习什么了。

前端（html   Div+css   JS  jQuery  H5+css3  bootstrap  less  sass ==  ）

附一个web前端招聘要求：

HTML/CSS

1. 熟悉 HTML 语义化，了解基本的SEO
2. 精通常用CSS属性，熟悉 CSS3 动画
3. 熟悉跨桌面和手机屏幕的自适应页面开发
4. 熟悉 HTML5 手机页面构架和布局，了解手机页面的性能优化
5. 熟悉一种常用HTML/CSS 框架，（如 Bootstrap），或者开发过自己的框架
6. 熟悉 LESS 或者 SASS

JavaScript

1. 熟悉 jQuery, 并熟练开发相关组件
2. 熟悉 Canvas 动画，至少掌握一种常用的Canvas 框架，(如 easeljs, KineticJS)
3. 熟悉一种 JavaScript MVC 框架, （如 AngularJS, KnockoutJS)
4. 对原生 JavaScript 开发有一定了解

优先项

1. 开发过手机HTML5小游戏
2. 熟悉一种非前端语言，（如 PHP C# Java)
3. 有自己的github
4. 以上条件满足2条以上的优先

3、我应该怎样学web？

现在是网络时代，各种学习书籍，免费在线课堂，免费的学习视频资料等等，到处都有。前期先看看视频，买本感兴趣的书，学了一段时间就能知道自己是喜欢看书还是喜欢看视频，或者是喜欢上课和人交流。这每一种学习方式都可以使用，互补也可以。

1.我推荐几个学习网站，里面在线视频和可以下载视频都有（此处不是广告）

慕课网    极客学院   智能社团  布尔教育  传播智客

在这些网站上，能找到你想要学习的内容，都是很齐全的，而且很赞。

 2.再说说书。如果喜欢看书的话，可以去京东或者当当，豆瓣读书，搜索关键词，看看排名和评价，京东和豆瓣读书上面，有些评价还是很靠谱的。我目前买的几本书，   都是这种方式看到的。

4、新人应该使用什么编辑器？

各种编辑器五花八门，我是用Dw入门的，后来转editplus，后来转webstorm，现在在用phpstorm，当然流行编辑器远远不止这些。

我从来不提倡说使用Dw的都是渣渣，使用记事本的都是大神。学习web，更多的是学习代码能力，而不是学习使用软件的能力。

新人刚刚开始学习，可以选择一个和你的学习资料一样的编辑器，比如你看的视频里面使用sublime，你就是用sublime，你的学习资料里面使用editplus你就是用editplus。相比等你掌握了某一个软件，开始追求适合自己的IDE的时候，你也就知道各种IDE的优势劣势了。

 如果实在是没得选，我推荐webstorm，功能比较齐全，配置简单，基本上是安装好了就可以用。Sublime也很不错，但是新人使用需要安装各种插件，有点烦，网上也有集成了插件的免安装版。我从webstorm转到了phpstorm，就是因为后者对php提供了更好的支持。

5.学习中碰到了不会的怎么办？

有不会的先百度，web发展这么多年，很多问题在网上百度随随便便搜一下就是答案，不要有问题就去问人。别人不是你爹妈，你问了，回答你了是因为他心情好，懒得理你也是正常的。

经常看到有人在群里面问，插入图片加了a链接之后，鼠标移动上去有边框怎么办？或者问，怎样给Div加圆边框。

讲真，这些问题，百度上随便搜一下就是一大堆，你在群里面问了，别人给你随便说几句你不一定能够看懂，但是百度上很多都把问题的实例和源码贴出来了。问这种问题，既不利于提高你的独立解决问题的能力，也不浪费了别人的时间。我提倡交流学习中遇到的问题，但是不提倡问度娘讲过的问题。

就拿我自己来说，我刚刚入门的时候，对自己独立解决问题的能力不够自信，不管多简单的问题，都想着去问人，一个群一个群里面发信息，然并卵，对自己几乎没有任何帮助。后来随着学习的深入，慢慢习惯了自己独立的去查找问题解决方案，学习了用浏览器测试，学会了去查找问题的根源，学会了有问题先去网上查一下。学习到现在，我可以很有信心的说，我能够独立解决我学习过程中遇到的百分之九十的问题，碰到了一门新技术，我不会去思考能不能学会，只思考需要花多少时间学习。

Web技术变化太快，独立解决问题的能力，对一门新技术能够独立学会的信心，这两点非常重要。也就是，学习怎样去学习比学习知识重要。（个人感觉第5点是整个文章里面最重要的一部分）

 给新人一个建议，遇到一个问题，没有独立研究几天，就不要随随便便去问人。

注意事项

原文地址：http://www.w3cfuns.com/notes/17607/9d93eb27a5a9ced0480fa4a609197e2e.html