优秀的Web前端开发工程师要在知识体系上既要有广度和深度！应该具备快速学习能力。

前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。

前端完整学习路线

第一阶段：

HTML+CSS：HTML进阶、CSS进阶、p+css布局、HTML+css整站开发。

JavaScript基础：Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础。

JQuery：基础使用悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

第二阶段：HTML5和移动Web开发

• HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas。

• CSS3：

CSS3新选择器、伪元素、脸色表示法、边框、阴影、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocity.js框架、元素进场、出场策略、炫酷CSS3网页制作。

• Bootstrap：

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

• 移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、Zepto.js、手机聚划算页面、手机滚屏。

第三阶段：HTTP服务和AJAX编程

WEB服务器基础：服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

PHP基础：PHP基础语法、使用PHP处理简单的GET或者POST请求。

AJAX上篇：Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用。

AJAX下篇：JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、图片预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

第四阶段：面向对象进阶

面向对象终极篇：从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、属性读写权限、设置器、访问器。

面向对象三大特征：继承性、多态性、封装性、接口。

设计模式：面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。

第五阶段：封装一个属于自己的框架

框架封装基础：事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

第六阶段：模块化组件开发

面向组件编程：面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

第七阶段：主流的流行框架

Web开发工作流：GIT/SVN、Yeoman脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

MVC/MVVM/MVW框架：Angular.js、Backbone.js、Knockout/Ember。

常用库：React.js、Vue.js、Zepto.js。

第八阶段：HTML5原生移动应用开发

Cordova：WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的关系、开发环境搭建、Cordova实战（创建项目，配置，编译，调试，部署发布）。

Ionic：Ionic简介和同类对比、模板项目解析、常见组件及使用、结合Angular构建APP、常见效果（下拉刷新，上拉加载，侧滑导航，选项卡）。

React Native：React Native简介、React Native环境配置、创建项目，配置，编译，调试，部署发布、原生模块和UI组件、原生常用API。

HTML5+：HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI框架、H5+开发和部署。

第九阶段： Node.js全栈开发：

快速入门：Node.js发展、生态圈、Io.js、Linux/Windows/OS X环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。

Web开发基础：HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Node.js开发Web应用程序、Web开发工作流、Node.js开发Blog案例。

快速开发框架：Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

Node.js开发电子商务实战：需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

UI到底是什么？

很多同学不知道ui是什么，以为画个ICON图标就是做ui了，导致很多人都忙着画各种各样的图标。这样很容易让那些新人们走错路，最后我想说的是icon不是全部，不要沉迷其中，要学的还有很多。

下边我们先说说ui到底是什么？

User Interface（用户界面)，简称ui，是指对软件的人机交互、操作逻辑、界面美观的整体设计。

UI设计分三个分支：

1、研究界面—-图形设计师Graphic UI designer，简称GUI,国内目前大部分UI工作者都是从事这个行业。包括（网页设计，软件界面，移动端界面设计），每天工作做着各种界面设计。

2、交互设计师，做整个项目的交互流程。

3、用户体验研究师，主要是通过各种方法去了解用户现在需要什么样的体验什么样的界面，从而对这个项目的总体性体验做决策的。

用户界面设计是屏幕产品的重要组成部分。界面设计是一个复杂的有不同学科参与的工程，认知心理学、设计学、语言学等在此都扮演着重要的角色。用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性；即要符合用户的心智模型。

所以一个优秀的ui设计师，从技能上讲，不仅能画图标，还能做好界面，会很多交互知识。

好的UI设计不仅是让软件变得有个性有品味，还要让软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。 图标，界面，交互知识都是需要长期的经验积累，所以ui这条路很长，要学的技能很多，大家加油吧！！

学UI入门阶段到底要掌握哪些知识（UI第一阶段课程）

先来说说UI设计入门阶段，用什么软件。工欲善其事，必先利其器

对于入门阶段的童鞋来说，不要纠结那么多，先把Photoshop玩熟练再说吧。因为在日常工作中，用的最多的就是PS了，可以这么说，做UI界面基本上用它就够用了。所以入门阶段的你，不要瞎操那么多心了，专心学习PS吧.

软件安装（建议购买正版软件，以下下载仅供学习使用）

1 Photoshop CS6下载

2 Illustrator CS6 下载

3 怎样安装Photoshop画笔，形状，动作，滤镜等插件

4 psd 缩略图查看插件

安装字体

5 ios-android-wp 3大系统字体下载（包含中英文）设计师必备

6 ios在线预览字体（ui设计师必备）

UI新人疑惑解答

新人不知道该如何学UI，也有很多疑问解不开。咱采用问答的形式来揭开谜团，让新人心里的石头落地。

1.我适合学UI吗？

答：首先你问问自己喜欢不喜欢UI设计，如果不喜欢就别学了。

你有耐心吗？因为做ui是个很细的活，一定要有耐心和勇气。一个图标画1天，你坐的住吗？

很多新人都是在临摹的阶段 就逃跑了，坚持不下来，觉得好麻烦，做的很烦躁。

我最后想说的是，做这个一定要持之以恒，熬过前期就好了。

如果你喜欢ui，还能坚持做练习，做作业，那么你一定行。

2.我是自学还是报班？

你如果定性比较弱，需要人逼着才学的进去，又不差钱。那么就报班吧，这样入门比较快。选择学校的时候先去听听，在问问大家，不要被忽悠~！~

如果你自学能力还不错，又差钱。那么还是自学好了。

3.做UI要用到哪些软件？

答：PHOTOSHOP CS6以上版本，Adobe Illustrator CS6以上版本。建议安装最高版本，功能比较强大，有几个插件需要高版本的支持。有人习惯用PS，有人习惯用AI，这个看个人习惯。

4.做UI要装哪些插件？

7 UI设计师高效秘笈－工具预设（先来把你的PS给设置好了，新人必看）

8 怎样安装Photoshop画笔，形状，动作，滤镜等插件（这个不会安的话，怎么能行）

9 PS 玩转长投影（带PS动作）（现在流行的长投影傻瓜模式）

10 PS 改变圆角半径大小（ps cs6以下安装）（如果你用的是PS CC 那就不需要这个）

11 做ui必备–PS切图动作用法（做完设计稿，要切图给开发人员，没有这个怎么能行，必装）

5.PS功能那么多我先学哪些？

这个问题不太好好回答，做界面UI 常用到的功能其实很少，比如：图层样式，高斯模糊，添加杂色。

建议新手 还是用临摹开始学习，边做边学习，常用的技法在做练习的时候自然而然的都学会了。

12 ICON教程（所有文章）

13 PS教程（所有文章）

14 玩转PS形状图层UI设计师必看（这个要玩的很溜的才行）

6.UI设计师工作中都做些什么事？

在日常工作中，UI设计师一般要做的事情还挺多的（手机端UI和网页UI同一人）

界面设计并标注尺寸（手机端或是网页平台或软件）

图片导出给程序员（手机端）

启动图标设计

提交到各大平台的推广图（活很多，各种尺寸，横竖屏）

产品的网页设计

展会海报，易拉宝，等平面

UI设计师要学很多，才能独当一面。一般的公司都只会招一个又做网页又做手机端的UI设计师，未来也手机端和网页UI 合二为一，必然！！

其他问题总结：

1.我现在工作经验为一年，职位是产品设计师。然后我想转UI。我的简历是按真实情况写，还是修饰一下？

答：按真实写。你得写一些你对UI的挚爱，说明你有多么喜爱。

2.我该准备怎么样的作品，数量是越多越好，还是怎么分布，控制一下。

答：要看你要找什么样的工作了，如果手机APP的，那么就需要做一些界面和一些图标ICON设计，最好是整套的界面，可以到群共享相册里看看，有我发的几个。如果你是要找网页UI的职位，那么就要做一些网页的界面。作品的数量当然是数量和种类上越多越好了。能拿的出手的都用上。

3.面试的话，一般公司会特别想看到哪些东西。对没有太多的经验人来说。

答：公司考核你何不合适，对于新人主要是考核这个人 学习能力如何，勤奋不，好不好沟通，听不听话。首先你要表现出你对设计软件已经熟练了，不存在操作上的问题，。你得表现出你知道视觉UI流行的趋势，能说出一些为什么这样会流行起来，有什么优点。

4.关于UI理论这一块，有没有一些推荐的书看看？

《设计之下》这本APP设计书字里行间都透露出了真实，作者能将其工作流程和方法分享出来，实在值得尊敬。通过这本书全面了解了真实的设计工作是怎么做的，今后可以用到自己的工作中。赞！

《移动设计》作者们基于多年的实践经验，针对移动产品交互设计的具体问题，对以用户为中心的设计理念进行了很好地阐释和解读，可以帮助更多新人行的从业者们尽快掌握移动交互设计的门道。

《GUI设计大家谈》由Iconfans创始人Iconsbox联合Zhar、Omega、Caijiahong、VIC XU、J.max、Harwenzhang、GeorgeUI、Ashung、Kidaubis、Kingyo等多位优秀UI设计师历经三年时间，打造出此本成长利器。

《形式感》这本书大家在各大设计平台都看到过，是腾讯游戏美女设计师出品，讲述了在做专题页的时候一些巧妙地方法，此法学会了可以做各类活动专题页，广告图都能得心应手。特别适合做网页设计的童鞋。赞！

《写给大家看的色彩书1:设计配色基础 》图例和内容都很有时代感，对色彩的阐释简单易懂，对平面设计中的各种应用（书内页、封面、网页、标志、海报）都作了分析，很有借鉴意义，很容易就能上手操作~

《写给大家看的设计书(第3版)》这是一本很好很好的设计书，对初学者和资深者都有很大的帮助，初学者可以很快掌握设计的几条重要规则，资深者则可以对自己以前的无意识设计找到理论基础，进一步清晰设计理念。而且整体排版很舒服，不是长篇大论。非常值得一读，真希望能再翻译几本这样的好书。

学会HTML语言的好处是什么？1：很轻松的修改你的网站、博客的网页结构。2：对SEO网站优化很有用处。3：拿来主义，通过保存其他网站页面源代码，适当的修改，可以仿制出你想要的模板。4：当你有一张漂亮的PSD源文件图片时，你可以很轻易的把图片切割制作成网页。5：无论是PHP、ASP、.NET、JSP等网站编程语言，都要用到HTML。6：可以轻松检测出网站是否中了网页木马.和预防网页木马。7：可以向更高一层次进阶：p+CSS网页设计。8：看完这篇文章，接下来就可以修改本站提供的模板了。

用什么工具来学习HTML呢？还是推荐大学使用Dreamweaver软件来学习HTML，Dreamweaver所见即所得软件是最好的HTML编辑器，全可以一点不懂HTML的知识就可以做出网页。（做网站常用工具下载）

如何学习HTML语言呢？1：一定要多动手，多多修改别人的网页代码。（在效果页上单击右键选择“查看源文件”即可查看实现该效果的代码。）2：记住一些常用的HTML语法。当时卢松松学习HTML的时候只记了一些HTML网页设计时的常用语法，如：贴图：加入连接：写上你想写的字

推荐HTML详细教程学习地址：1：新手入门级HTML教程 http://enet/eschool/zhuanti/easyhtml/2：HTML视频教程http://v.youku/v_show/id_XMzM0MzM3ODQ=.html（当你点开优酷的时候，你能保证只看教程不看电影吗？）3：HTML详细语法结构http://w3school/html/index.asp

总结：Html至今仍是制作网页时必不可少的代码。如果能够熟悉掌握并应用这些代码，大到做网站，小到博客论坛等都会有莫大的好处。其实相信大多数人都对HTML已经非常熟悉了，学过HTML的再看一次也许能知道新的东西。没学过HTML的，看看这篇文章应该能快速掌握要领吧。

bootstrap是目前使用广泛使用人数多也是非常受欢迎的前端开发框架之一，bootstrap现在有两个版本分别是bootstrap3.4和bootstrap4.2.1，bootstrap是美国Twitter公司推出的开源免费的前端快速开发框架，你可以从GitHub上下载最新的源码。bootstrap可以是前端开发人员快速的制作出各种自适应界面的响应式网页，因为其易学易用而很受人们的欢迎，目前已有很多关于bootstrap的中文帮助文档和学习社区，bootstrap是移动优先的设计模式，可以轻松解决几乎所有浏览器（包括手机端）的兼容性问题。

不仅如此，bootstrap还能让你很容易的实现各种响应式设计，对于初学前端设计或需要快速搭建一个项目，那么bootstrap都是最佳的选择。bootstrap V3.x系列版本是最稳定的，V4.x系列版本虽然是更新快效率更高，但是不稳定，v4.1和v4.2两个版本我都用过，但差别还真的有很多，对于一些不太了解或想要入手bootstrap的伙伴可能会有很多的问题想问，所以我就都写出来呢。

问题一：为什么要选择bootstrap而不是别的前端框架？

第一是快速解实现目标，我们在前端网页设计的时候，几乎都会遇到各种浏览器兼容、响应式设计、css和JS各种繁琐的而且又不得不做的问题，使用bootstrap可以不用担心这些了，你只需要知道他兼容那些浏览器即可，而对于主流的浏览器如火狐。谷歌、Opera等都好绝对可以的，同时也包括手机端Android和iOS上的各种浏览器都OK。第二是学习，对于一个新手，只要你能看得懂什么是css、HTML基本元素，就可以使用bootstrap制作出漂亮且使用价值很高的网页，你还可以从他的各种代码写法中体会和学习到很多前端设计的知识，简直就是一个大型的活案例；对于有经验的大咖，bootstrap是一种设计的思路和规范的大纲，你可以从中窥探前端设计的前沿技术和改进你的写作规范及设计思想。

问题二：如何选择bootstrap的版本？

前面说了bootstrap有2个重要的版本，V3.x系列的版本最稳定，当前最新是bootstrapV3.4.0，我且称为稳定版吧，而V4.x系列版本则不稳定，每一个小版本变化都蛮大的，但是V4系列各方面的确都比V3系列要好，v3和v4最根本也还是大家最关心的问题应该是支持的IE版本问题：bootstrapV3系列依然支持老旧的IE8和IE9及早期的iOS系统等；bootstrapV4系列支持IE10-11/ Microsoft Edge，Chrome >= 45，Firefox >= 38，Edge >= 12，Explorer >= 10，iOS >= 9，Safari >= 9，Android >= 4.4，Opera >= 30。可以看出V4系列版本已经不支持很多低版本的浏览器了，V4所支持的这些浏览器在win10、iPhone 7以上的系统都没有问题，但是对于国内仍然有很多使用win7~8、iPhone5~6没升级ios系统 的用户，如果希望这些使用老旧浏览器的人也能正常使用您的网站，那么请选择V3.x的最新版本即可，反之则选择V4.x最新版本为佳。

Bootstrap v3 is now closed off to new features. It has gone into maintenance mode so that we can focus our efforts on Bootstrap v4, the future of the framework. Pull requests which add new features (rather than fix bugs) should target Bootstrap v4 (the v4-dev git branch) instead.

上面是bootstrap在GitHub上的原文，当前已停止V3系列版本的更新，但是会维护V3这一版本，在未来的几年内，win7~8系统也会很快退出我们的生活，就像Windows XP系统那样，即使当时的IE6称霸一时但也逃不过被淘汰的现实。

对于bootstrap版本的选择问题最核心的也可以理解为是兼容IE版本的问题，根据实际情况和需要，如果是软件后台、网站后台的前端这些不需要IE内核来渲染的界面，果断选择V4，如果是需要用户使用的前度界面，目前依然推荐使用V3，毕竟我们做出来的网站项目主要是给用户看的，她都看不了，那我们做这个项目又还有什么意义呢。

bootstrap是流行的前端库建，用于快速创建响应式页面，她是移动优先的前端框架。建议新手可以从V3版本学习练手，学会V3对于V4那就易如反掌了，后面我将继续发布bootstrap更多的教程，有疑问请留言~

参加工作后才发现，掌握PS技术可以给自己带来多大的方便。可惜上班族时间有限，想要集中报班学习并不是那么容易，但如果懂得利用网络资源，想利用业余时间学习一门实用的技能，就没有那么难实现了。今天小编来给大家分享几个非常好的免费PS学习网站，希望对大家的学习有所帮助。

1.优设网

http://uisdc/

优设网为设计师提供ps教程、UI设计、素材下载、高清图库、配色方案、用户体验、网页设计等全方位设计师网站导航指引。每周更新及时，是优秀网页设计联盟。这个网站有些设计作品很有创意，教程内容丰富，还有一些设计师分享一些经验。

2.PS爱好者

http://psahz/

PS爱好者网提供Ps教程，PhotoShop教程，ps实例教程，PS抠图教程,ps，调色教程，Ps基础入门教程，文字特效，Ps视频教程，让您轻松快乐的学会Adobe公司的Ps照片处理软件。适合初学者，也适合有一定PS基础的人学习。

3. PS学习网

http://ps-xxw/shilijiaocheng/

PS学习网是为网友提供PS教程，图片处理PS教程，文字效果PS教程，非主流制作等Photoshop教程和Photoshop视频教程的专业网站，实例丰富，讲解详细，很适合设计爱好者收藏，并抽出时间深入钻研。

4. 中国PhotoShop资源网

http://86ps/

PS新人学习PhotoShop教程的好地方，有摄影PS教程和PhotoShop软件，并提供免费照片处理 PSD模板 PS素材等，内容非常丰富！

5. ps教程自学网

http://16xx8/

适合新手学习的ps教程，包括新手教程、技巧教程、工具教程、通道教程、理论教程、滤镜使用等等。内容多而广，教程资源源源不断！

6. 思缘设计

http://missyuan/school/photoshop/

这个网站的教程，相对而言比较专业，调出的效果也不错，有些海报的设计还挺养眼的。做图的时候可以进来看一看，欣赏一下优秀的设计作品，从中学习人家的修图技法，助自己进步更快。

7.PS家园网

http://psjia/

PS家园网集PS教程、PS笔刷、滤镜下载、PS素材下载、PS交流于一体，提供一站式的ps学习体验。

8.设计前沿网

http://wzsky/

设计前沿网是中国优秀设计师联盟网站，提供平面、广告、海报、插画、标志、logo图片、室内装修等设计作品欣赏，以及ps教程、网页设计教程、css教程等技术文章和免费网页设计教程，网站精美简洁，素材丰富，是个非常不错的学习网站。

以上学习网站，你觉得有用就收藏起来，有空的时候好好学习。教程里的方法是灵活的，只要找到共同点，就能触类旁通，举一反三！祝大家学有所成！

如今跨屏响应Web设计无疑是非常流行的，主要得益于移动互联网时代的来临，以及多屏幕的智能机终端的猛速增长，如果你对跨屏网页设计还不熟悉，可以看看我之前发表过的关于这方面的responsive sites。对于新人，responsive design可能听起来有点复杂，但实际上，它比你想的要简单得多。为了帮助你快速入门跨屏网页设计改造，我写了一篇快速入门教程。我保证你通过三步就可以学会跨屏式设计的基本逻辑和媒体查询(media query)(假设你有基本的CSS知识)。

第一步：Meta标签（看demo）

大部分移动浏览器会把HTML页面缩放成较宽的viewport的宽度，这样内容就可以屏幕上正确的展示了。你可以使用viewport这个meta标签 来重置这个行为。下面的viewport标签告诉浏览器使用设备宽度(device-width)做为viewport的宽度，并且禁用初始的缩放比例。 在中加入这个meta标签。

meta name=”viewport”content=”width=device-width, initial-scale=1.0″>

IE 8以及更早版本不支持媒体查询，你可以使用media-queries.js或者respond.js来增加IE对媒体查询的支持。

第二步：HTML结构

在这个例子中，我拥有一个由头部，内容容器，侧边栏，以及一个底部构成的基本的页面布局。头部拥有一个固定的180px高度，内容容器600px宽，然后侧边栏是300px宽。

第三步：媒体查询

CSS3 media query是进行跨屏网页设计的戏法，它跟写if条件一样，来告诉浏览器对于特定的viewport宽度如何渲染页面。

下面的规则是针对视口宽度小于等于980px设计的。基本上，我把所有容器的宽度从像素值改成了百分比值，这样容器就会变得具有流动性(fluid)。

然后对于宽度小于或等于700px的viewport，指定#content和#sidebar为自动宽度，并且移除浮动，所以他们可以以全宽度进行展示。

在 IT 工程师和培训机构多如牛毛的时代，拜师学艺并不难。但自学编程对于毫无基础的同学来说却可能是个问题，相信有过类似经历的朋友都有一把辛酸泪和一肚不吐不快的体会。让我们从一个故事说起…

故事

某君在一个普通大学读着自己不喜欢的专业，以打游戏、刷段子和睡觉度日，突然有一天想学点什么。学编程好像挺酷，而且听说IT行业充满了机会，没准一不小心就和大佬一起“改变世界”了。

那么第一个问题来了，他该选择什么语言？

是世界上最好的语言 PHP？还是语言之母的 C？幸好还知道个编程语言排行榜，找到一看、几十种不带重样，这要逼死天秤座的小朋友。选 PHP 吧？上非诚勿扰都要被灭灯，而且就只能做个网页。万般纠结之后我们选 C 吧，听起来既高级又底层，说不准还能考个计算机二级。

接下来得干正事儿了。在这个便捷的网络时代，自学可选择的方式非常丰富。除了在网络上收集资料、阅读干货外，某君还向一些前辈咨询了自学的方法。

网络上流传的编程学习方式有：

看书（这是最容易想到的方法）

观看视频教程

阅读官网文档

读源码

到大学蹭课或者报名培训（不知道还算不算自学，没交学费都算吧？）

某君又得纠结一番了，大学蹭课和培训并不一定有合适条件，且不符合自学的气质；观看视频教程，前辈们觉得比较low；阅读官网文档和源码，这不适合初学者。总得来说看书算是比较中肯的方法，至于看什么书呢，前辈推荐了《C Primer Plus》，据说是学习C语言的经典之作。

好吧，不再纠结，直接啃这本大部头，虽然有人说看原版好一些，但是实在能力有限、还是看中文版吧。一口气花了一周时间读完这本书，果然是经典，变量、语句、条件判断甚至指针都知道怎么回事了。

某君决定按照书中的说法实践一下了，于是打开了记事本，折腾很久装了GCC，把书上的第一个例子抄了下来，在控制台的小黑窗输出了“Hello World”，成就感满满。决定上手写点高级的的东西一试身手，合上书。咦，为什么会报错？哦，原来少个分号。不禁陷入思考：为什么学了两个月还是只能在这个黑窗口算算秋水仙数？网友还说要看官网文档、要读源码、要看英文原版，我一样都不能做到，我一定是能力不够，编程果然是天才做的事情……

正经话

上面的故事是我编的，但其中的纠结却是自学者或多或少都经历过的。实际上，IT从业者并不像传说中那样需要天才般的智商，要点在于能否找到合适的入门途径，再加上一点点坚持和思考。比较可惜的情况是一些人没能找到适合自己的学习方法，并在纠结和碰壁后失去信心，然后沮丧的认定自己并不适合干这行。学编程很多时候就是一个趟坑的过程，但不是每一个坑都有必要趟，写这篇文章的目的是希望能够帮助初学者尽量少趟一些坑。

IT世界的地图

初学者遇到的一个典型问题是对IT世界没有一个大的图景。比如大多数的Java书籍，教完你基础语法知识和秋水仙数的求法后就结束了，并没告诉你接下来能干什么。我曾经为此感到非常困惑，学完Java SE后做了一个非常简陋的GUI demo，就失去了后续的Java学习方向，带着对Java的偏见，这成为了我一段令人沮丧的学习经历。关于这个话题一本书可能都不够，简单来说，我尝试从计算机科学知识和技术实践两方面来聊聊成为一名IT工程师需要具备哪些东西。

计算机科学基础

首先初学者要具备一些非常基础的知识，这些知识在你踏上工作岗位后能被实际的用到，比如计算机运行原理、网络的传输、常用数据结构和算法等。这部分属于计算机科学，也是应该被计算机专业本科课程涵盖的，不要伤心错过了大学本科的相关课程，我会分享一些有用的资源。

这里我罗列了一些计算机专业的学生一般需要学习的课程，当然每个学校专业设计都不一样，甚至采用的教材名字也不一样，仅供参考。大学计算机科学课程往往包括：《高等数学》、《离线数学》、《电子电路》、《数据结构》、《程序设计》、《计算机组成原理》、《编译原理》、《计算机网络》、《软件工程》、《数据库原理》等。有些学校会有一些额外的课程，例如《通信原理》、《汇编语言》、《线性代数》、《C语言》、《Java 语言》等。

图片来源于网易计算机专业的课程体系

尽管IT行业知识更迭非常快，但是基础知识并不容易过时，因此有大量的资料可以选择。可以选择从计算机经典丛书系列开始，比如佛罗赞和莫沙拉夫的《计算机科学导论》，甚至可以阅读一些计算机科普类读物例如《穿越计算机的迷雾》。另一种直观的方式是观看大学精品课和去跟慕课课程，比较推荐的有几个：

中国大学精品开放课程，高等教育出版社的精品课程项目，有全国大量的名校授课视频和课件

中国大学MOOC ，这个是中国大学MOOC和网易合作的，提供了上文附图中计算机课程体系中所有课程

果壳网的MOOC学院，主打翻译全球名校的优秀课程，比如斯坦福的《编译原理》和MIT的《Python》

从知识到实践

除此之外，还需要了解实际应用于设计软件或者开发网站中的实践类知识，包括某个特定语言以及周边的库、框架和工具等。 我们可以把特定需求中用到的语言、库和框架以及其他的工具称为技术栈，在技术选型上通常也是被这样考虑的，HR常常会根据技术栈来寻找需要的工程师。比如需要学习SSH 三大框架和Java的Java技术栈；为服务器web开发而生的PHP技术栈；在移动开发领域流行的IOS、安卓技术栈等。当然这里面有一些重合和共用的技术也需要学习，比如版本管理器Git、SVN就是每个合格的工程师需要去学习的。

换句话说，大学课程主要定位在上面说到的计算机科学基础知识，而市面上的培训机构主要是告诉你在怎么在实际工作中运用，所以大学和培训机构都有他们的价值。

想要更加详细的了解这部分内容，这里有一些开源的技能图谱可以参考:

图片来自： http://skill-map.stuq.org/

如何挑选你的兵器？

在介绍完计算机领域的大致图景后，就需要选择一门合适的编程语言，一个较为形象的例子是把编程语言比喻成兵器，因为我们深知编程语言对于工程师而言是实实在在的工具，我们不是为了学它而学，学编程不仅仅是学语言特性，一般来说我们也不用知道赋值语句像“茴香豆蔻”的“茴”字有四种写法。

当然语言之争从来没有停止过，如果把编程语言比喻江湖武器的话十分有趣。

C语言是M1式加兰德步枪，很老但可靠。

C++是双截棍，挥舞起来很强悍，很吸引人，但需要多年的磨练来掌握，很多人希望改用别的武器。

Perl语言是燃烧弹，曾经在战场上很有用，但现在很少人使用它。

Java是M240通用弹夹式自动机枪，有时它的弹夹是圆的，但有时候不是，如果不是，当你开火时，会遇到NullPointerException问题，枪会爆炸，你就会被炸死。

JavaScript是一把宝剑，但没有剑柄。

— 来自网络

老实来讲IT行业的最终目的是交付可用的软件，编程语言也是适应市场的。这对于初学者或许有些残酷，在工作中我们发现最好的语言是用来处理工作任务或者构建合适的应用，并不是出于爱好或者某种Geek精神。

对于初学者而言，在选择合适的入门语言时至少需要考虑两点：

是否能适用于构建你想要的应用。如果你的目标是创建一个运行在IPhone上的APP，那么最好选择 Object C 或者 Swift，学习web开发可以选择PHP 或者JAVA。实际上我们仍然可以用汇编做出网页，但是这样做成本高昂。

是否容易学习，在满足第一点的条件下请尽量选择容易学习的语言。容易不仅仅指语法简单，包括环境搭建、部署等都需要考虑在内，以及能不能容易找到好的学习资料，因此尽可能的选择主流语言。

别忘了非常重要的一点，学习编程语言还包括平台提供的API，比如Win 32 之于C++/C#/VB，以及周边的库和框架（这些库、框架和工具能在上面说的技术图谱中找到）。IT历史上甚至出现框架和库引领编程语言走向的情况：JQuery 和Angular 改变了前端开发的思想; Rails 抢走了Ruby的名气；而SSH三大框架一度代表了Java世界。

最后我为初学者整理了一个流行编程语言和用途的表：

另外还需要注意的是开发工具，可以选用IDE和有代码提示的编辑器，但尽量不要在这上喋喋不休，这就像用来盛放你锋利兵器的架子，用着顺手就行，也不推荐使用纯文本编辑器，这看起来像赤手空拳。 推荐一些编辑器和IDE

挑选合适的资料和有效的阅读

对初学者而言，我仍然推荐好的视频教程，虽然我已经听到不下5个人声称是靠阅读官方文档或者看源码学会编程的，而且认为观看视频教程见效太慢。但这个思想对初学者很危险，不得不承认阅读文档和源码能更准确找到自己想要的信息，这对深入技术原理非常有用，但视频能比文字传达出更丰富的内容，有更直观的演示和细致的讲解，我想没有比这个更适合初学者了。

除了上面提到的精品课程和慕课教程，国内有像网易云课堂，国外有lynda这种在线学习视频网站，甚至在优酷和土豆都能找到足够的教程资源。

如果选择了阅读技术类书籍，我们来聊聊怎么有效的阅读一本技术书籍。

读IT类书籍和读考试类书籍的方式不同，初学者需要选择更接地气、并且能告诉你最终能做出什么案例的书籍。你不需要通读整本书，而是需要搭建好和书中版本一致的环境，然后把书中的每行代码敲入电脑，观察这些代码怎样被运行，在遇到问题时去请教朋友或者到搜索引擎中寻找解决办法，直到示例程序能被正确运行。

可能一个月才能读完一本书，但慢点并没什么坏处，敲过一遍的代码才能算是你的，否则永远存在于纸上的代码清单中。对于关键的概念和知识点，可以在阅读的同时做一些笔记，去尝试使用思维导图来做你的笔记吧，这让你的笔记跟上你的思考，并形成一个知识网络。

自我激励

自学无疑是寂寞的。编程学习耗时较长，如何保证在这个阶段能坚持下去？

我们知道很多人都能对游戏产生强烈的兴趣、愿意为之投入时间，这其中的秘密就是游戏的奖励规则。杀死一个怪物就能得到一些金币，通过完成任务获得满足感，通过关卡的设计产生持续吸引力，进而形成正向的反馈。

其实学习编程也一样，实现一小段程序并运行，足以让人感到成就感和满足，借鉴这个简单的心理学技巧，定期给自己设定一些有实际意义但是不太难的目标和任务。太难会让人失去耐心，太简单又很无聊，最好设定一个跳起来刚好摸得着的任务。每完成一个目标就给予自己奖励，可以是完成任务的成就感，也可以是其他的物质奖励。

这个时候一个代办记事的清单就可以帮上忙了，可以是一个to do list的软件，或者自己手写一张卡片贴到墙上，关键在于不要忘了在任务达成后给予自己适当的奖励。

图片来源：https://appadvice

那如果真的遇到一些麻烦的任务呢，如何顺利解决而不至于丧失信心？笛卡尔在《方法论》一书中告诉了我们研究复杂问题的方法和步骤:

尽量将其分解为多个比较简单的小问题，一个一个地分开解决

将小问题从简单到复杂排列，先从容易解决的问题着手

子问题被解决后，进行联调测试，看是否能协同运行

在敏捷开发这种工程思想中我们正是这样做的，我们需要把业务需求进行拆分然后评估工作量，不仅可以直观的看到任务进展，手上的工作也不会看起来庞大得难以完成。

最后多说几句

非科班出身的工程师入门是有一定痛苦的，不像武侠世界里面的名门正派弟子，也没有机缘遇到骨骼精奇的世外高人，如何选择合适自己的学习方式并自我管理是很重要的一方面。没有任何Low的学习方式，只要直接而又高效，而且要能达到我们的目的就好。以我为例，从大专学校毕业并没有机会参加本科课程，曾经也在网上攫取各种视频教程，去别的学校蹭课，甚至带上礼物去一个老师那里登门拜访补课。

另一方面是如何上桌，吃上编程这碗饭。学习的成果如果无处施展便成为屠龙之技，参加一些开源项目和一些公益活动，谁不喜欢一个热心的人呢。也可以尝试去实现自己的一些idea，当做一个小项目来开发，有了一些项目实践后去找一个公司实习会容易的多。

我不知道算是有幸还是不幸经历了这一个过程，矫情一点来说是有一些曲折，但是我知道“聪明”从来不是这个行业的门槛。引用流行于知乎的一句老话“以大多人的努力程度，还轮不到拼天赋的程度”，在Thoughtworks有大量优秀的工程师，从他们身上我能看到聪明不是学习编程成功的关键，坚持和勤于思考才是。

如何自学UI设计?关于这个问题，我去咨询了一些在做UI设计的朋友们，整合之后写下如下4点。

——

一、零基础的UI设计师是如何入门的？

UI设计是开发流程的一个重要的环节，需要学习的不单是美学，要兼备程序编码、心理学分析、市场调查、美术设计等多方面的综合能力，需要准确的考虑商业价值的最大化。

对app界面、画ICON、WEB、 BANNER和专题活动的设计能力。

2.清楚了解Ios和安卓系统、Web的尺寸规范，产品品牌的设计规范，其中包含文字大小，颜色的规范、切图规范（软件推荐：PxCook）。

3.用户体验的能力，让用户使用的时候，能用、好用、爱用。明确产品所处的情境，针对的目标市场进行设计。如（分析keep这个软件，用户群体是运动爱好者们，软件的 ui 配色以黑白灰为主，淡雅的黑白有着时尚品味感，其中部分图标采用了鲜艳绿色体现运动健康环保的理念。）

4.基础对美的感知，版式设计，元素布局和配色的把控能力。这些有先天的，也有后期加强个人收集和观察细微事物进行提炼总结来慢慢积累提升的，养成一个建立素材库分类和思维导图的习惯，可以很好的帮助审美的提升。

5.新手设计师只需要识别品牌基因进行设计，后期的资深设计师具有创造一个新的品牌的能力。

新手建议从PS学起，因为UI设计重要熟悉和必须精通的就是PS、AI和AE、C4D、Quartz composer、Sketch等，既平面设计和动效设计的基础，所以入门的首先是软件的学习和提升，初学者可以先用ps软件进行扁平化和半写实的icon临摹和APP界面的临摹，临摹到一定程度再进行重新设计。

PS的学习其实只要百度谷歌一下，就能找到很多优质课程，如《良知塾李涛：Photoshop小技巧》《PS教程--Photoshop零基础到精通之路》等，认真的态度去学习，知识才会积累，很多人学习一个软件单单只看不去实际操作是发挥不出作用的，要相信量变产生质变，都是需要一个过程的。

二、专业网站推荐

1. 国内：站酷、花瓣网、UI中国、盒子UI、优设网

2. 国外：Designerlist、Dribbble、pinterest、Behance、PSDbox。

三、公众号推荐

优秀网页设计、Ui中国、Ui设计、Appsolution 、UIcircle(ui圈）、UI设计达人。

四、书籍推荐

下面使一些比较合适的书，主要是理念的可以看看： 《美国视觉设计学院用书》 《在你身边，为你设计：腾讯的用户体验设计之道》 《设计中的设计》 《解密平面设计的终极法则：版式设计原理+配色设计原理》 《Don’t Make Me Think》 《术与道 移动应用UI设计必修课》 《动静之美 Sketch移动UI与交互动态设计详解》

多看多实践，相信门早已经被你跨过啦！

个人公众号「汤帅」（ID：txmppt），获取更多设计干货、职场效率技巧。

我们从网络上常见到的企业网站是用什么软件制作？

网页制作从图片处理，Flash，数据库等完成，我们来看看网络上常用的软件有那些：

一、网页制作软件：

1、Microsoft FrontPage 如果你曾对Word很熟悉，那么相信你用 FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。

FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage会为你跟踪文件并拷贝那些新版本文件。FrontPage是现有网页制作软件中惟一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。

2、Netscape编辑器Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。如果你喜欢用Netscape浏览器上网，使用Netscape编辑器真是简单方便!当你用Netscape浏览器显示网页时， 单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑了。你也可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与FrontPage 2000还有些像?但是，Netscape编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。

Netscape编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。如果你对HTML语言有所了解的话，能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句，也可以弥补Netscape编辑器的一些不足。

3、Claris Home Page

如果使用ClarisHomePage软件，你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑Frame(框架)的工具，你不必花费太多的力气就可以增加新的Frame(框架)。而且ClarisHomePage3.0集成了FileMaker数据库，增强的站点管理特性还允许你检测页面的合法连接。不过界面设计过于粗糙，对ImageMap图像的处理也不完全。

4、Adobe Dreamweaver

，简称“DW”，中文名称"梦想编织者"，最初为美国MACROMEDIA公司开发[1]，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

二、图像处理软件：

1、Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。做Flash动画的人被称之为闪客。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

2、Adobe Photoshop，简称“PS”，Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

三、数据库：

1、MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。

2、MS ACCESS以它自己的格式将数据存储在基于Access Jet的数据库引擎里。它还可以直接导入或者链接数据(这些数据存储在其他应用程序和数据库)。

四、环境搭建工具：

1、php程序员工具箱：中国最大的php学习行业网站php中文网开发的 "php程序员工具箱"，php程序员工具箱是迄今为止全网唯一款php程序员的专属工具箱，集合了php环境搭建、在线小工具、原生手册、文字与视频教程、问答社区等，非常适合初学者。

2、phpstudy：该程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+Zend Optimizer+Zend Loader，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序绿色小巧简易迷你仅有32M，有专门的控制面板。总之学习PHP只需一个包。

HTML简介

什么是 HTML？

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言(markup language)

标记语言是一套标记标签(markup tag)

HTML 使用标记标签来描述网页

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 文档描述网页

HTML 文档包含 HTML 标签和纯文本

HTML 文档也被称为网页

HTML 标签是由尖括号包围的关键词，比如

HTML 标签通常是成对出现的，比如 和

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

HTML 文档 = 网页

HTML编辑器

我们可以使用专业的 HTML 编辑器来编辑 HTML：

Adobe DreamweaverMicrosoft Expression WebCoffeeCup HTML Editor

下面我们用记事本来制作一个简单的网页:

第一步，打开记事本

如何启动记事本：

开始

所有程序

附件

记事本

第二步，在记事本中编辑HTML语言，如图:

第三步，保存 HTML

在记事本的文件菜单选择“另存为”。

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。

第四步，在浏览器中运行这个 HTML 文件

启动您的浏览器，然后选择“文件”菜单的“打开文件”命令，或者直接在文件夹中双击您的 HTML 文件。

结果应该类似这样：

这样，一个简单的网页就成了。

HTML代码-标题

网页制作时用什么来表示标题呢？下面我们来看看:

HTML 标题

标题（Heading）是通过

-

等标签进行定义的。

定义最大的标题。

定义最小的标题。

注释：浏览器会自动地在标题的前后添加空行。

注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。

HTML代码—水平线

HTML 水平线

---

标签在 HTML 页面中创建水平线。

hr 元素可用于分隔内容。

提示：使用水平线 (

---

标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

HTML代码—注释

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

提示：合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML代码—段落

HTML 段落

段落是通过

标签定义的。

注释：浏览器会自动地在段落的前后添加空行。（

是块级元素）

提示：使用空的段落标记

去插入一个空行是个坏习惯。用
标签代替它！（但是不要用
标签去创建列表。不要着急，您将在稍后的篇幅学习到 HTML 列表。）

HTML代码-折行

折行有什么用呢？

当然折行的主要目的是调整网页布局，让它看起来更美观大方。

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用
标签：

元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

HTML样式-背景颜色

background-color 属性为元素定义了背景颜色：

This is a heading

This is a paragraph.

HTML样式-字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

A heading

A paragraph.

HTML样式-文本对齐

text-align 属性规定了元素中文本的水平对齐方式。

下面我们看看中，右，左的三种对齐方式演示:

HTML引用

1.HTML元素定义短的引用。

浏览器通常会为元素包围引号。

2.用于长引用的 HTML

HTML

元素定义被引用的节。

浏览器通常会对

元素进行缩进处理。

HTML超链接

什么是超链接？超链接就是从一个页面到另一个页面之间跳转的方式。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 标签在 HTML 中创建链接。

有两种使用标签的方式:

通过使用 href 属性 - 创建指向另一个文档的链接通过使用 name 属性 - 创建文档内的书签Visit Baidu

上面这行代码显示为：Visit Baidu

点击这个超链接会把用户带到 Baidu 的首页。

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

链接属性

使用 Target 属性，你可以定义被链接的文档在何处显示。