整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
eb前端开发技术人才越来越吃香，而且web前端领域划分越来越细，对技术的需求越来越高，想学习web前端的人也是越来越多。那么，如何学习web前端知识？从哪开始？转型成为web前端工程师需要学些什么？小白到高手需要多久？
1.转型web前端需要学什么
第一阶段：你要从最基础的HTML/CSS开始，简单地说，HTML就是一堆非常简单的标签，而CSS则是把你画画的流程用英语按一定的格式写出来。然后你需要理解常用HTML标签的意思，学会各种CSS的属性，还有CSS的盒模型、优先级、选择器……
第二阶段：Java学习，你要是想在网页上实现交互效果，比如轮播图、点击按钮后播放动画等等，那么就必须学会Java。Java是一门完整、强大、热门的编程语言，浏览器的各种交互效果都由它来做到的。你先要了解一些基础的Java概念（变量、函数、基本类型）后，然后学习jQuery（Java代码库的一种），并且通过jQuery继续使用CSS的选择器。
2.转职成为web前端
专精HTML/CSS的前端从业人员也就是前端重构。这里要提一下，有一个职业对于这块很有优势，那就是设计师。不管是UI设计师，还是平面设计师，在页面上如何写页面，也知道怎么做的更好，并且更加理解Web世界，做出更“系统化”的设计。关于CSS的知识，你需要理解文档流、浮动流等各种定位的方式与原理，理解CSS 的继承复用思想、理解浏览器的差异、兼容等。关于HTML的知识，你需要学习语义化、可访问性与结构的合理，以及“结构与样式的分离”等。
你会爱上CSS 3的酷炫属性，可以做出响应式网页设计，用transiton和animation做补间动画与关键帧动画，用transform做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒……掌握了以上的这些，你完全可以利用你的设计功底和web前端知识，做出微信的H5页面、一些有趣的网页，或者个人的网站。
3.如何提升前端技能
如果你还想做出更厉害的交互效果，越来越喜欢编程，建议你成为一个前端工程师/全栈式UI设计师。这时，你必须学会以软件工程师的角度思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，需要了解浏览器，学习DOM、BOM、CSSOM的API，甚至还有学习一些网络原理，包括域名、URL、DNS、HTTP请求……
小编是一个有着5年工作经验的架构师，关于web前端，自己有做材料的整合，一个完整学习web前端的路线，学习材料和工具。需要的伙伴可以私信我，发送“前端”等3秒后就可以获取领取地址，免费送给大家。对于学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个优秀的程序员！
如果你还处于迷茫阶段或者是一个小白，那你不要着急着手开始学习，因为没有目的和方法的学习，只会走弯路。这时候，建议你先深入了解有关前端方面的所有资讯，包括前景、就业、行业发展、技术囊括、职业等等，这样才能有目的和方向的学习。
新民 编译自 Hackernoon
量子位 出品 | 公众号 QbitAI
在当前社会，技术日新月异，一个全栈工程师不及时学习新知识，掌握AI技能，再过两年就算不上“全栈”了。
产品发烧友、前端小哥Shival Gupta在意识到这一点后，通过两个多月的探索，掌握了基本的AI技能，并在Hackernoon上发文分享了自己的学习历程。
量子位搬运过来，各位可以参考他的学习思路。
大家给初学者的建议，通常是通过吴恩达的Coursera课程来入门。
这样开始很好，但是我在听课时很难保持专注。不是说这个课程不好或存在其他问题，而是我真的非常讨厌专心听课。我习惯于通过实践来学习，所以为什么不这么做呢？
让我们开始动手实现神经网络吧。
我没有直接跳到神经网络，因为还需要熟悉一些基础内容。我先尝试熟悉这个领域的所有专有名词，为下一步的语言学习作铺垫。
也就是说，第一项任务不是学习，而是熟悉这个领域。
我是个用JavaScript和Nodejs做开发的前端工程师，暂时也不想转后端，于是就找到了一个叫做nn的简单神经网络模块，并用它来实现一个带有虚拟输入的“与”门。
我选择了这样一个问题：对于任意三个输入X、Y和Z，输出为X和Y的“与”运算结果。
以下是实现代码：
var nn=require('nn')
var opts={
layers: [ 4 ],
iterations: 300000,
errorThresh: 0.0000005,
activation: 'logistic',
learningRate: 0.4,
momentum: 0.5,
log: 100
}
var net=nn(opts)
net.train([
{ input: [ 0,0,1 ], output: [ 0 ] },
{ input: [ 0,1,1 ], output: [ 0 ] },
{ input: [ 1,0,1 ], output: [ 0 ] },
{ input: [ 0,1,0 ], output: [ 0 ] },
{ input: [ 1,0,0 ], output: [ 0 ] },
{ input: [ 1,1,1 ], output: [ 1 ] },
{ input: [ 0,0,0 ], output: [ 0 ] }
])
// send it a new input to see its trained output
var output=net.send([ 1,1,0])
console.log(output); //0.9971279763719718选择这个问题，是受一份9行代码构建神经网络教程的启发。地址：https://medium.com/technology-invention-and-more/how-to-build-a-simple-neural-network-in-9-lines-of-python-code-cc8f23647ca1
在我看来，上面的构建过程让我对接下来的学习充满了信心。当输出值为0.9971时，我意识到这个网络学会了如何实现一个“与”运算，并忽略无关的额外输入。
这正是机器学习的主旨。通过向计算机程序输入一组数据，并调整程序的内部参数，使它能够以从训练集观察到的误差减小方式，来得到对新问题的答案。
后来我才知道，这种方法也被称为梯度下降（gradient descent）。
△ 梯度下降示意图
在我实现了我的第一个AI程序后，我充满信心，想知道作为一个开发人员，还可以用机器学习来做什么。
1. 我解决了若干个关于监督学习的问题，如回归和分类。
2. 基于非常有限的数据集，我尝试使用多变量线性回归来预测哪个团队将赢得某场给定的IPL电子竞技比赛，实际的预测效果很差，但是我觉得很酷。
3. 我试用了Google机器学习云的一些demo，了解当前AI可以做什么。
地址：https://cloud.google.com/products/machine-learning/
4. 我偶然发现了AI Playbook（文末链接5），这是一个由安德森-霍洛维茨风险基金整理的干货网站，确实是针对开发人员和创业者的最方便资源之一。
△ AI Playbook。地址：http://aiplaybook.a16z.com/
5. 我开始在Youtube上观看Siraj Rawal的精彩视频，这是一个以深度学习和机器学习为核心的专栏。
视频地址：
https://www.youtube.com/channel/UCWN3xxRkmTPmbKwht9FuE5A
6. 我读了HackerNoon上一篇讲《硅谷》剧组怎样用Tensorflow做剧中那个Not Hotdog应用的。这是深度学习中我们最容易上手的一个例子。
HBO真的做了这个App（限美国、加拿大）：
https://www.seefoodtechnologies.com/nothotdog/
文章地址：
https://medium.com/@timanglade/how-hbos-silicon-valley-built-not-hotdog-with-mobile-tensorflow-keras-react-native-ef03260747f3
7. 我读了Andrej Karpathy的博客（https://karpathy.github.io/），他是特斯拉的AI主管。虽然我无法理解里面的一些内容，这让我很头疼，但是我发现，在多花一些时间以后，我对这些概念有了一定理解。
8. 带着信心，我开始通过复制和粘贴来逐行实现一些深度学习教程中的代码，并在我自己的电脑上运行代码，尝试训练相关模型。很卡……因为大多数模型需要很长的训练时间，我也没有GPU。
渐渐地，我将编程语言从Javascript转换到了Python，并在Windows机器上安装了Tensorflow。
这整个过程集中在被动地接受知识和建立知识库上，因此当我遇到一个实际的用户问题时，可以利用已有知识来解决。
正如乔布斯说过，你只能通过回溯过去理解其中的关联。
作为电影“Her”的狂热粉丝，我想构建一个聊天机器人。我设法在两个小时内学会了Tensorflow的使用，并将这个经历和我对用户需求的理解整理成了一篇文章。
在做这个聊天机器人之前，我对NLP的了解仅仅限于概念层面。
尝试了市面上众多聊天机器人之后，我发现，它们在本质上只是图形用户界面的替代品。如果在图形用户界面上操作超过两步点击，用聊天机器人的用户体验会比较好，反之，用聊天的形式就显得多余了。
开始构建聊天机器人的时候，我先给自己确定了两条原则：
1. 聊天机器人应该说人话，也就是说它得理解自然语言；
2. 要用聊天机器人解决图形UI中需要两步以上操作的问题。
经过分析，我选择构建一个通过自然语言命令找到正确日期的聊天机器人。比如说你可以问它“6天以后是几号？”、“下个9月过完之后再过5周”之类的。
架构是这样的：
然后，我跟着网上的一份教程，（地址：https://chatbotsmagazine.com/contextual-chat-bots-with-tensorflow-4391749d0077），用基础的NLP技能和基于softmax的神经网络，不到两小时就构建了一个查询意图分类器。
在确定了用户的意图之后，系统会对字符串进行语法分析并输入，然后返回我想要查询的日期。
说真的，并不难。如果你用Facebook Messenger Platform、Telegram的Bot Platform，或者api.ai、wit.ai、recast.ai等等工具，可能比我还快。
更多关于构建聊天机器人的心得，见这个链接：：
https://hackernoon.com/i-built-a-chatbot-in-2-hours-and-this-is-what-i-learned-f5dbb4ba5fcc
在我的AI学习之旅中，这篇文章具有里程碑式的意义。
它让我在Twitter和LinkedIn上交到了很多朋友，他们长期深入地和我讨论AI技术的发展，甚至可以在我遇到困难时帮我一把。我收到了一些关于咨询项目的Offer，更让我开心是，开始有一些年轻的开发人员和AI初学者来问我是如何入门AI的。
这也促使了我写下这篇文章，希望能帮助更多的人从我的经历中得到线索，并开始他们的学习之路。
万事开头难。
这绝不是一件简单的事。
我最开始时用的是Javascript，后来突然换成Python，并学会如何用Python编程。
当我的模型在i7电脑无法训练，或是经过数小时训练，只返回一个无用结果时，我会感到烦躁。
学习AI的过程与学习一个Web框架不同。
这项技能要求你明白在微观层面计算是如何进行的，并确定最为影响输出结果的内容是代码还是数据。
AI也不只是一个学科。这是一个总括性术语，其适用范围可从简单的回归问题到未来的杀手机器人。与其他学科一样，你可能要选择AI中比较热门的领域，如计算机视觉、自然语言处理，或者其他具有潜在发展空间的方向。
在和AI金融公司Atlantis Capital的Gaurav Sharma的交流中，他对我说：
在人工智能时代，“聪明”意味着某些完全不同的东西。我们要求人们去完成非常关键、具备创造性和有个人见解的任务，和那些需要高情感投入的工作。
对于计算机是如何突然学会自主决策的，你要为之着迷。你应该坚持的两个关键原则是耐心和求知欲。
这是一个非常漫长的旅程，很累也很刺激。
但最重要的是，所有旅程都是相同的，千里之行始于足下，想上手AI就开始动手吧。
原文地址：https://hackernoon.com/how-i-started-with-learning-ai-in-the-last-2-months-251d19b23597
— 完 —
诚挚招聘
量子位正在招募编辑/记者，工作地点在北京中关村。期待有才气、有热情的同学加入我们！相关细节，请在量子位公众号(QbitAI)对话界面，回复“招聘”两个字。
量子位 QbitAI
?'?' ? 追踪AI技术和产品新动态
几年Web前端框架层出不穷，比如 React, Vue, AngulaJS等吸引了大量的注意力，前端技术发展势头迅猛，各大互联网公司也越来越重视前端开发，前端开发再也不是过去那种按照设计图做静态网页，再随便写点jQuery的职位了。现在，市场上对于前端开发的需求越来越大，我们经常听说前端开发入门难度低，但学习前端开发究竟需要多长时间呢？学多长时间就能找到工作赚到钱？结合了周边同事和自身的经验来谈谈学习网页开发到底需要花多长时间。
Note：一定要下定决心，并且要坚持。
1. 网页设计的基本概念和理论知识（10天）
在学习制作网页之前，必须掌握网页设计的基本概念和理论知识。什么是静态网页？什么是动态网页？网页的整体布局是什么？网页设计的原则是什么？网页基本构成要素是哪些？基础的网页设计概念都不了解，那么对于之后要制作网页更是难上加难。我认为利用10天时间了解网页设计的基本概念和理论是必不可少的，时代在不断变化，网页设计也会更新换代。所以了解基础知识是为了之后设计制作打好基础。当然，还需要了解基础的SEO知识。网上的视频教程个人建议还是少看，一本好的书绝对让你受益匪浅。推荐几本好书供大家学习：
制作网页设计
1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT
如何让网页设计更加功能化
2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT
前端开发
3. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS
可用性：
4.DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG
2. CSS+HTML+JavaScript（1个月）
相对来说， HTML是最简单的，只是标签语言， 格式规范; CSS相对来说复杂一些, 有浏览器的兼容问题等。但二者组合就能实现很多页面效果, 里面涉及的变化太多了。如果你只会基础语法, 而没有实际去写过, 那样是很难真正掌握的。我在这里说说我的经验吧，我一开始学习的Bootstrap，简单点说，就是给现有电商项目套上Bootstrap做的响应式皮肤。Bootstrap确实挺好上手，靠着官网的手册，基本上遇到的问题都能自己解决。
JavaScript 也没有那么难，你要知道Brendan Eich创建JavaScript语言一共就用了10天时间，所以它的语法并不复杂，相信你很快就能掌握基本语法。你可能还需要学习一些常见的库的API，这个可以根据你的需求来安排，你要用到什么库，就学习它的文档。
我觉得最好的网页开发学习资料就是 Mozilla Developer Network(https://developer.mozilla.org)的文档了，涵盖了HTML, CSS, JavaScript的方方面面，不论是初学还是老手查阅都是非常有用的，推荐给大家。
3. 开始制作网站（1个月）
了解了基本的知识，做了一些小练习之后，我认为最重要的是尽早参与实际项目，这样才能得到真正的锻炼。使用 Jekyll + GitHub Pages 为自己搭建一个静态博客是一个很好的开始，只需要简单的配置，不需要任何后台开发，几乎完全是前端开发。
建站的时间取决你自己对网站完成的满意度，如果参考模板， 那么几个小时内就可以搞定了；如果是要独立开发一个新的网站又要内容全面好看，1个月是跑不掉的，甚至需要更长时间。
4. 工具软件学习（半个月）
工具的掌握程度完全靠个人的领悟能力和学习，网上有很多关于以下这些工具的教学视频，跟着学会事半功倍的。需要学习的基本软件：
编辑器：Sublime Text
初学者我不建议立即使用强大的 IDE，先使用编辑器有利于学习。Sublime Text 是一款我个人非常喜欢的编辑器，界面优雅，操作流畅，自动支持语法高亮，还有丰富的插件，你也可以试试。
设计出图、切片：Photoshop
Adobe Photoshop，简称“PS”，是由Adobe开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像，使用其众多的编修与绘图工具，可以有效地进行图片编辑工作，PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。Photoshop非常专业，也稍显复杂，是专业的平面图片设计人员必须掌握的一款工具。作为前端开发，你需要跟设计师紧密配合，学习一些 PS 知识会对你之后的开发更有帮助。
原型设计：Mockplus（时间成本最低）
是一款上手非常简单的网页原型设计工具，通过拖拽就你完成一个简单的交互，项目类型诸多，有自由项目，网页项目，自定义项目，当然还有APP项目。网页项目最大的尺寸为3000*6000，你可以任意设计都没问题。200个封装组件和3000个图标可供使用，最近新出的格子功能更是方便使用，减少了很多重复设计的时间。
掌握一些原型设计知识绝对非常有必要，这是我投入最少却收益最多的事情之一，我强烈建议你尝试一下Mockplus，对之后在团队工作的沟通会非常有帮助。
5. 学习设计知识（持续）
前端开发是一个直接面向用户的职位，跟后端开发不一样，你的成果是用户直接可以看到的，我认为提高自己的审美，多掌握一些设计方面的知识，把握当下流行趋势和动向也是很有必要的。而这一过程是不能用具体时间来衡量的，需要不断持续吸收新的东西才能设计出理想的网站。这里有15个最好的网页设计博客资源可供大家每日阅读，我个人还是最喜欢medium。UI设计资源网站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。
总结：
软件开发是一个需要持续学习的过程，尽管前端开发入门难度低，但是近几年来前端开发的复杂度越来越高，对个人素质的要求也越来越高。本文只是针对想要入门前端开发而找不到方向的人，经过这个过程后，你可以找到一个初级的开发职位了。不论做什么事情，学习是根本，希望这篇文章能帮助到新手。
*请认真填写需求信息，我们会在24小时内与您取得联系。
