未央超多干货！低基础如何学习前端

编者按：非计算机科班设计师如何学习前端？让用亲身经历告诉你！作为一个专业的未央网站建设公司，都是实打实的宝贵经验，全文不仅教你怎么学，还为将来的职业选择附上了细致的建议，满满的都是干货，来收！

很多专业的网站设计师都是走过了不少野路子，不过还好有大宛网络（较专业的未央网站建设公司）大神在前面做典范，也证明这条路是玩的通的 ：）接下来就说说自己的学习建议吧，一个小教程，也是自己走过的流程，仅供参考哈！——————————————————————————— 华丽的分割—————————————————————————

在这个时代学习新东西，一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富，自学能力也尤为重要，尤其是对于学习技术！

说起网站设计师希望学前端的初衷，大概还是因为各种华丽的网页有效/交互太过吸引人，这种感觉大概就是：“Hey，我的设计可以做成网页访问了呢！”好在，“展示”对于前端技术来说反而是较简单的部分。所以，放下你对“编程”两个字的恐惧，从“称不上是编程语言”的 HTML/CSS 开始，先做点有成就感的东西出来吧！

对于设计师来说，较有成就感的一定是“可以看到的东西”，而 HTML/CSS 正是用来干这个的，HTML 就是一堆非常简单的标签，而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已。

是不是非常容易，就跟读英语一样！

接下来，你就需要开始自学啦，比如常用 HTML 标签的意思，各种 CSS 的属性，还有 CSS 的盒模型、优先级、选择器……放心，它们都很容易；能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们，学这个洒洒水啦

推荐几个资源：

• w3school 在线教程(中文，一个很 Low 但是又很好的入门学习网站）
• xazcit(如果你想变得专业，强烈建议你来学习！这里有很多网站设计教程，免费，生动直观）

这个阶段的练习主要是“临摹”：用代码画出你想画的网站，越多越好。

对于书，大宛网络非常不推荐上来就去看各种厚厚的入门/指南书，没必要！这一个阶段应该快速上手，培养兴趣，培养成就感。先做出可以看的东西再说，掌握常用的 HTML/CSS 就够用了如果完成的好，这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了。

想要在网页上实现一些交互效果，比如轮播图、点击按钮后播放动画？那你就必须要开始学习 JavaScript 了！JavaScript 是一门完整、强大并且非常热门的编程语言，你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的！

在了解一些基础的 JavaScript 概念（变量、函数、基本类型）后，我们可以直接去学习 jQuery，你不用知道它具体是什么（它是一个 JavaScript 代码库），你只要知道它可以显著地降0你编写交互的难度就好了。

通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器”

对于没有编程基础的人来说，想要有效掌握它们两并不容易。作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。

大宛网络仍然推荐你使用w3school 在线教程与http://www.codecademy.com/进行学习，可以让你很快上手做出一些简单的效果来！

如果学习得顺利，你还可以尝试使用各种丰富的 jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难～很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。

较后，我想推荐下Bootstrap · The world’s most popular mobile-first and respons，这是世界上较知名的前端 UI 框架之一，提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且文英文教程都非常得健全，你并不需要理解它背后的工作原理就能很好的使用它，让你快速达到“可以建站的水平”。另外，你不但可以学习如何使用它，还可以学习它背后的思想。

业内通常把专精 HTML/CSS 的前端从业人员成为重构，而对于注重视觉效果的设计师来说，在掌握基本的 HTML/CSS 后，就可以朝着这个方向发展了。

到了这个阶段，你不但要知道怎么写页面，还要知道它们都是为什么，并且知道怎么做更好。这对你理解 Web 世界非常有帮助，并且能帮助你做出更“系统化”的设计。

CSS 的学问很多，你需要开始理解文档流、浮动流等各种定位的方式与原理，理解 CSS 的继承复用思想、理解浏览器的差异、兼容、优雅降级……HTML 方面，要开始注重语义化、可访问性与结构的合理，你要开始学习“结构与样式的分离”。另外，各种炫酷屌的 CSS 3 属性你一定会喜欢：你可以用媒体查询做响应式网页设计，你可以用 transiton 和 animation 做补间动画与关键帧动画，用 transform 做缩放、旋转、3D变换，还有圆角、渐变、阴影、弹性盒！样样都是设计师的神器！

如果你还掌握了 入门篇（JavaScript/jQuery）的知识，那么恭喜你！你已经可以做出很多有趣的网页了！很多 minisite 或者微信上的“H5” 小广告，这个程度的你已经可以轻松完成了！

如果你觉得上述的这些都还满足不了你，你渴望做出更多了不起的交互，甚至你已经喜欢上了编程，想要转行做工程师，或者成为一名全栈设计师，那么你可以朝着这个方向继续发展！

这个阶段的较大难度，是你必须学会像一名软件工程师一样思考。你需要踏踏实实学习编程语言，深入理解作用域、对象、类、封装、继承、面向对象编程、事件侦听、事件冒泡等一大堆编程概念，你还需要了解浏览器，学习 DOM、BOM、CSSOM 的 API，你甚至还需要学习一些网络原理，包括域名、URL、DNS、HTTP 请求都是什么…

你可能会被这一大堆名词吓到。确实，想要搞定他们并不容易。但是，你要相信只要你肯花功夫它们也没有那么难，而更重要的是，如果你能拿下他们，你所收获的并不只是这些而已，而是真正跨过了一道坎 —— 你的世界将因此打开， 你看待世界的方式将因此改变。

如果你能顺利得渡过了这个阶段，大宛网络（未央网站建设）想你已经能做出很多令你自豪的网站了！试着向身边的工程师朋友询问如何购买域名、配置简单的静态服务器，或者搜搜“大宛网络（专业的IDC服务提供商）”，然后把你的作品在互联网上让大家欣赏吧！