零基础设计师该如何学习前端？.docxVIP

在这个时代学习新东西，一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富，自学能力也尤为重要，尤其是对于学习技术！ 入门篇（HTML/CSS） 说起设计师希望学前端的初衷，大概还是因为各种华丽的网页特效/交互太过吸引人，这种感觉大概就是：“Hey，我的设计可以做成网页访问了呢！” 好在，“展示”对于前端技术来说反而是最简单的部分。所以，放下你对“编程”两个字的恐惧，从“称不上是编程语言”的 HTML/CSS 开始，先做点有成就感的东西出来吧！ 对于设计师来说，最有成就感的一定是“可以看到的东西”，而 HTML/CSS 正是用来干这个的，HTML 就是一堆非常简单的标签，而 CSS 无非就是把你画画的流程用英语按一定的格式写出来而已： p p is paragraph! /p style p { color: red;} /style 是不是非常容易，就跟读英语一样！ 接下来，你就需要开始自学啦，比如常用 HTML 标签的意思，各种 CSS 的属性，还有 CSS 的盒模型、优先级、选择器……放心，它们都很容易；能玩得转 PS/AI/Flash/Axure/AE/Sketch 的设计师们，学这个洒洒水啦 推荐几个资源： w3school 在线教程?(中文，一个很 Low 但是又很好的入门学习网站） Learn to code?(Codecademy，如果你英文 OK，强烈建议你使用它进行交互式的学习！里面从 HTML/CSS 到搭建网站的课程都有，免费，生动直观） 这个阶段的练习主要是“临摹”：用代码画出你想画的网站，越多越好。 对于书，我非常不推荐上来就去看各种厚厚的入门/指南书，没必要！这一个阶段应该快速上手，培养兴趣，培养成就感。先做出可以看的东西再说，掌握常用的 HTML/CSS 就够用了 如果完成的好，这个阶段过后你大概就可以写出一些简单又好看的“静态网页”了，比如这个作品集/简历： Portfolio – 黄玄的博客?（好久没更新了…丢人现眼） 入门篇（JavaScript/jQuery） 想要在网页上实现一些交互效果，比如轮播图、点击按钮后播放动画？那你就必须要开始学习 JavaScript 了！JavaScript 是一门完整、强大并且非常热门的编程语言，你在浏览器里看到的所有交互或者高级功能都是由它在背后支撑的！ 举个小栗子： alert(Hello World!) 就这一行，就可以在浏览器里弹出 Hello World 啦！ 在了解一些基础的 JavaScript 概念（变量、函数、基本类型）后，我们可以直接去学习 jQuery，你不用知道它具体是什么（它是一个 JavaScript 代码库），你只要知道它可以显著地降低你编写交互的难度就好了： $(.className).click(function(){ alert(Hello jQuery) }) 通过 jQuery，我们可以继续使用在 CSS 中学到的“选择器” 对于没有编程基础的人来说，想要完全掌握它们两并不容易。作为设计师，很多时候我们可以先不必深究它们的原理，而是尝试直接应用它！这样成就感会来得很快，并且你可以通过实际应用更加理解 JavaScript 是用来做什么的。 我仍然推荐你使用? w3school 在线教程?与? /?进行学习。另外，你可以看一看诸如《 锋利的jQuery (豆瓣)》 这一类非常实用的书籍，可以让你很快上手做出一些简单的效果来！ 如果学习得顺利，你还可以尝试使用各种丰富的 jQuery 插件，你会发现写出支持用户交互的网站也没有那么困难～很多看上去很复杂的功能（比如轮播图、灯箱、下拉菜单），搜一搜然后看看文档（教程）、改改示例代码就好了。 比如说，配合? Huxpro/jquery.HSlider · GitHub?这样的轮播图插件，你可以很轻松的写出? Hux-Slider | Demo?这样的网页相册～ 最后，我想推荐下? Bootstrap · The world’s most popular mobile-first and respons?，这是世界上最知名的前端 UI 框架之一，提供了大量 CSS 样式与 jQuery 插件。它非常容易学习并且文英文教程都非常得健全，你并不需要理解它背后的工作原理就能很好的使用它，让你快速达到“可以建站的水平”。另外，你不但可以学习如何使用它，还可以学习它背后的思想。 转职方向一：前端重构 业内通常把专精 HTML/CSS 的前端从业人员成为重构，而对于注重视觉效果的设计师来说，在掌握基本的 HTML/CSS 后，就可以朝着这个方向发展了。 到了这个阶段，你不但要知道怎么写页面，还要知道它们都是为什么，并且知