博客分类：
一直以来专注于后端系统设计，开发；从未专注过前端；虽偶尔也做做，但效率实在太低，质量也不怎么样。突然有一天，发现自己必须从前端到后端都要做时，压力巨大！
PS到html页面，javascript(包括jquery), css, 每样都懂；这样的人才有多难找，去年这个时候，我还有对前端轻视的想法，今天我发现没有前端，我再好的设计，后端运行的再好，全部都是浮云！没有面子别人怎么用啊？！
迫切希望找到做前端的牛人一起交流，合作。相互学习，共同进步。
closer13 写道我一直都是数据库到程序到前台包括js css html 一条龙自己来的，主要领导太抠了也不招人，不过自己来的好处就是想用啥用啥兄弟，一般都做啥项目，前端搞了多长时间了？ 指条明路啊四五年了吧，都不是特复杂的项目
我一直都是数据库到程序到前台包括js css html 一条龙自己来的，主要领导太抠了也不招人，不过自己来的好处就是想用啥用啥兄弟，一般都做啥项目，前端搞了多长时间了？ 指条明路啊
Mybeautiful
浏览: 229237 次
来自: 武汉
袁光平 写道您好我设置了html格式，但是邮件中的超链接还是不 ...
您好我设置了html格式，但是邮件中的超链接还是不能正常显示为 ...
java程序语言学习教程 地址http://www.zuida ...
我还是建议博主，要把知识面放宽一些， 各种语音 和框架都了解一 ...其他回答(9)
TXT+VIM+EMMET(VIM插件)+chrome浏览器
好处就是新建一个DEMO很快速的：
（1）新建txt文本，后缀名改为html
（2）vim打开，输入html:5。然后利用EMMET插件就可以生成html5固定模版了
（3）开始编写DEMO，EMMET插件还有很多其他快捷键
（4）chrome进行调试，F12很给力
至于DreamWeaver和VS都没用过，就不发表意见了
园豆：1470
谷歌浏览器,是最重要的
园豆：23449
sublime&text3(还可以配合其他插件)&+emme，浏览器的话，ie8以后的版本都行，chrome、firefox都可以,调试都差不多的
园豆：4828
楼上几位说的都不错，我也随便聊聊：
1、编码工具：
记事本之类的编辑器都可以胜任，但我们还是从开发效率和编码体验上面谈谈。
Visual Stuio&
如果你用windows，重量级的Visual Stuio 2013虽然很庞大，对硬件要求比较高，但是用起来绝对方便，比如智能提示、代码格式化，尤其是配合一些拓展插件。界面清爽，项目管理方便，入手简单。
轻量级的话，Sublime绝对是首选，小巧但功能强大，支持主流语言而且跨平台，插件也很多，前端开发很多都用它。
其实你说反了，越是功能简单的编辑器，越考验你的前端编码能力~
2、调试工具
主要是主流浏览器，Chrome、Firefox、IE11、Safari，这些浏览器基本都具备了开发者模式，学会使用后基本轻松应付各种前端调试问题。
园豆：1433
主流的浏览器的都要有，主要是他们使用的是不同的内核。如：
编辑器刚开始最好用EditPlus，是一个最基础的手打代码工具，很好用。等用熟练以后再换sublime或者dreamweaver看自己的使用习惯，个人推荐sublime。浏览器现在貌似除了ie，其它的样式兼容性差距不是特别大，装几个常用的浏览器，像firefox、chrome、 opera等等，一般的样式用chrome的自带调试工具就非常好用，推荐一下，加油哦。
一直用sublime text做开发，google浏览器和火狐做调试用
所以开发自然推荐sublime text 或者notepad++&
sublime text 开发的插件按需选择，一般都不需要安装的，可以参考这篇文章吧~&//7-useful-sublimetext-plugins-for-web-development/
首先，我个人认为编译器分为两种，一种是带有可视化编程的，也就是说你可以实时看到你的代码是什么效果，像是Dreamweaver和VS等一些比较大型的都会带有这种效果，但是好不好用就看你自己的习惯了。另一中说白了就是个文本编辑器除了缩进、语法高亮之类的基本不带其他功能，使用这种的好处是：1、轻量，比VS之类的巨大软件好多了；2、可以更多的从代码的角度了解你写的东西而不是简单的拖拖界面。一般比较牛的前段都会选择这个。
另外，由于现在的前段开发跨平台是一个很重要的课题，所以如果你不是去选择一些测试网站进行测试的话，我觉得像IE（若干版本）、chrome、Firefox、opera等主流的浏览器都是需要的，当然这些里面我觉得chrome的审查元素和Firefox的firebug（需要自己安装）是最好用的了，可以说是前段必备。
java基础学习交流群刚学习的同学一起学习共同进步吧
&&&您需要以后才能回答，未注册用户请先。AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和
一样，的确他们效果是类似的。但是AOS是
动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候
常靖09月11日 17:29&阅读（41）&评论（）&收藏（0）
写在前面离
2 0 发布快有两周了，最近两天终于有空做了服务端渲染和同构的一些尝试，并实现了一个对
Server Renderer 的封装，可以用更精简的代码来实现在目前的 Node js 应用中引入
常靖09月11日 17:29&阅读（22）&评论（）&收藏（0）
每种语言都有它特别的地方，对于
JavaScript
来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了
JavaScript
初学者应该注意的七个
常靖09月11日 17:29&阅读（22）&评论（）&收藏（0）
Seen js 渲染3D场景为
画布。Seen js 包含对于
元素的图形功能的最简单的抽象。所有这个库的其它组件都是不用关心将要渲染的上下文的类型。
常靖09月11日 17:29&阅读（11）&评论（）&收藏（0）
这个页面无疑是最难编写的，但我们认为它也是非常重要的。或许你曾遇到了一些问题并且已经用其他的框架解决了。你来这里的目的是看看 Vue 是否有更好的解决方案。这也是我们在此想要回答的。客观来说，作为核心
常靖09月11日 17:29&阅读（7）&评论（）&收藏（0）
这篇文章收集了一组前端开发相关文摘，分享提升网站用户体验的优秀
插件，展示前沿的
技术应用，共享精美的设计素材和优秀的
开发工具，希望这些精心整理的前端技术文
常靖09月11日 17:29&阅读（12）&评论（）&收藏（0）
html中两个p标签之间如何做到不换行？
假如我现在连续写两个p标签aaa
bbb,那么输出结果就会是aaabbb而我要的结果是aaabbb，要怎么样做啊各位大虾们。用其他两个标签也可以，只要能做到这样
王凯文09月09日 14:02&阅读（15）&评论（）&收藏（0）
严格来说p标签和label标签可以并列吗？遵循块元素与块元素并列，内嵌元素与内嵌元素并列的原则的话，表明不能并列对吧？p标签可以嵌套的子元素是不是只有内嵌元素？span标签内部能再嵌套span标签吗？请大神指出我
王凯文09月09日 14:02&阅读（23）&评论（）&收藏（0）
今天一个同事咨询我关于jQuery的filter进行过滤的问题 他查看了jQuery1 7 made by UNREGISERED version of Easy CHM的文档资料 发现里面过于filter的说明无法正常运行成功 后来发现次文档的一些内容有一些
王凯文09月09日 14:02&阅读（25）&评论（）&收藏（1）
p、td 、p 等容器内强制换行和不换行，在某些情况下还是比较实用的，下面本文整理了一些相关方面的知识，并有具体的实现方法，需要的朋友可以参考下1、强制不换行，同时以省略号结尾。
王凯文09月09日 14:02&阅读（12）&评论（）&收藏（0）
&阅读（1300）张吉爽
&阅读（41）常靖 09月11日 17:29
&阅读（1470）张吉爽
&阅读（1440）张吉爽
&阅读（64）张吉爽 08月16日 16:41
09月24日 14:40
09月24日 14:40
09月24日 14:40
09月24日 14:40
09月24日 14:40
微信扫一扫
400-650-7353天猫高手来教你！零基础如何系统地学习前端开发？
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
天猫高手来教你！零基础如何系统地学习前端开发？
：网站开发开发大致分为前端和后端，前端主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习：
基础知识：
1、HTML + CSS 这部分建议在
上学习，边学边练，每章后还有小测试。 之后可以模仿一些网站做些页面。在实践中积累了一些经验后，可以系统的读一两本书，推荐《Head First HTML 与 CSS 中文版》，这本书讲的太细了，我没能拿出耐心细读。你可以根据情况斟酌。
2、Javascript 要学的内容实在很多，如果没有其他编程语言的基础的话，学起来可能要费些力，还是建议先在 W3school上学习。之后建议马上看《Javascript语言精粹》，JS是一门很混乱的语言，这本书能够帮助你区分哪些是语言的精华，哪些是糟粕，对于语言精华，应该深入学习。糟粕部分能看懂别人写的代码就行，自己就不用尝试了。
有了以上基础，就可以进行一般的静态网页设计，不过对于复杂的页面还需要进一步学习。
1、CSS。必看《精通CSS》，看完这本书你应该对：盒子模型，流动，Block，inline，层叠，样式优先级，等概念非常了解了。作为练习可以看下《CSS艺门之匠》这本书，它对标题，背景，圆角，导航条，table，表单等主题都有详细的介绍。
2、Javascript。上面提到内容还不足以让你胜任JS编程。在有了基础之后，进一步学习内容包括：
a） 框架。
推荐jQuery，简单易用，在W3school简单学习js后，直接上手jQuery即可完成一些简单的项目。学习方法也很简单，照着产品文档做几个页面就行了，不用面面俱到，以后遇到问题查文档就行了。框架可以帮你屏蔽浏览器的差异性，让你能更专注与Web开发学习的精髓部分。补充： 可以使用
学习 Javascript，jQuery，用户体验真的很好（感谢 TonyOuyang ）。
b） Javascript 语言范式 。这个名字可能并不恰当，只是我找不到可以描述“面向对象”，“函数式”这个两个概念的概念。Javascript不完全是一个面向对象的语言，它的很多设计理念都有函数编程语言的影子，甚至说如果你不用面向对象，完全可以把它理解成一门函数式编程语言。
Javascript的很多语言特性，都是因为他具有函数式语言的特点才存在的。这部分推荐先学习面向对象的基本理论，对封装，继承，多态等概念要理解，维基百科，百度百科会是你的帮手，另外推荐《Object Oriented Javascript》，应该有中文版。对与函数式编程我了解的也不系统，不好多说，可以自己百度一下。
c） Javascript 语言内部机制。必须弄清如下概念：JS 中变量的作用域，变量传递方式，函数的定义环境与执行环境，闭包，函数的四种调用方式（一般函数，对象的方法，apply，call），以及四种调用方式下，‘this’指向的是谁。这部分内容你会在《Javascript语言精粹》中详细了解。另外，你必须理解 json。
d） dom编程，这个Web前端工程师的核心技能之一。必读《Dom编程艺术》，另外《高性能 Javascript》这本书中关于dom编程的部分讲的也很好。
e） Ajax编程，这是另一核心技术。Ajax建议在网上查些资料，了解这个概念的来龙去脉，百度百科，维基百科上的内容就足够了。真正编程是很容易的，如今几乎所有框架都对Ajax有良好的封装，编程并不复杂。
f） 了解浏览器差异性。这部分包括CSS和js两部分，浏览器差异内容很多，建议在实践中多多积累。另外对于浏览器的渲染模式，DOCTYPE等内容应该系统学习。
3、HTML5和CSS3 。HTML5规范已经于日发布了，移动端HTML5和CSS3已经得到了非常广泛的使用，必知必会呀。
再进一阶 · 代码层面：
有了以上知识，对于大多数小型网站，你应该已经可以写出能够工作的代码了。但要想成为更专业的前端，你还需继续努力。更高的要求大概还有四方面：1）易维护，2）可测试，3）高性能，4）低流量（移动端）。
1）易维护。对于页面你该理解‘样式’，‘数据’，‘行为’三者分离，对应的当然就是CSS,HTML,js。对于js代码，你最好了解设计模式，重构，MVC等内容。
2）可测性。
3）高性能。必读《高性能Javascript》
4）低流量。移动端关注比较多。
再进一阶 · 工程层面：
前端项目同样面临软件生命周期的各个环节，首先是代码管理，你必须学会使用Svn和Git。其次是代码的构建，如今前端代码构建已经不是简单的压缩一下了，需要进行依赖管理、模块合并、各种编译，比需要学会使用Grunt、Gulp等前端构建工具。
以上内容只是简单说了前端学习的顺序。前端工程师应该有的知识结构请参考这里：
对于前段开发，基本内容就这些了，可以根据自己的兴趣爱好选择性学习以下内容。
1、交互设计。大公司依然有专业人士搞这些，不过不懂交互的前端一定不是好前端。推荐《简约至上》。
附上超多的交互自学资料：
应该说前段工程师必须至少了解一门后端语言，不过如果爱好也可深入学习，入手难度比较低的应该是PHP了。这部分由可分为基于页面，基于框架两种。大型项目都是基于框架开发的，建议至少了解一个MVC框架，比如PHP的Ci、Yii、Yaf 等，好还框架的设计思想都大同小异。如今NodeJs在大公司已经得到普遍的使用，推荐大家使用在Node上使用Express框架做一些后端服务的开发。
3、Android和IOS开发。
时至今日，前端的工作领域已经非常广泛，native的界面开发本质上也是，个大公司都面临着Native环境和web环境页面同时维护的问题，如果能够在技术上得到统一，将会有巨大的价值。对于学有余力的同学，应该了解Native开发的基本流程，至少了解到界面构建的技术。
【优设指南类文章合集】
平面设计：
交互设计：
抠图技巧：
配色方案：
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量104万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
我们的团队
大家在关注查看: 4860|回复: 15
自学web前端JavaScript，如何做项目
精华主题学分
新农上路-加分请看每个版右边栏, 积分 96, 距离下一级还需 4 积分
在线时间 小时
注册一亩三分地论坛，查看更多干货！
才可以下载或查看，没有帐号？
网上大部分教程都很基础的语法，适合从零开始的学生，想找些以具体例子为材料的教程，有啥推荐吗？还有微博Twitter上有啥大牛可以关注啊？
精华主题学分
在线时间 小时
没人给予解答吗。。。
精华主题学分
在线时间 小时
大把js项目，还有钱赚
精华主题学分
在线时间 小时
project based的话我推荐像treehouse， code school这类的网站，会有人带你做project，不想付费的话，应该coursera, udacity上面也会有类似的公开课，不过网上资源其实很多，不上课自己琢磨一个project也不是什么难事
精华主题学分
在线时间 小时
快加我啊 楼主～
精华主题学分
在线时间 小时
project based的话我推荐像treehouse， code school这类的网站，会有人带你做project，不想付费的话，应该c ...
treehouse 的project适合放到简历里面吗
精华主题学分
在线时间 小时
treehouse 的project适合放到简历里面吗
没问题啊，这没什么不妥吧
精华主题学分
在线时间 小时
这种问题应该去v2ex 问会更好一些吧。.
项目是“造”不出来的，毕竟代码只是项目中很小的一个部分，与客户的沟通，需求的整理，技术的选择，架构的设计，corner case 的处理，部署，升级等等，组成一个所谓的“项目”
精华主题学分
在线时间 小时
个人感觉还是跟项目最快。当初实习的时候也是写portal要用js，但是当时完全不会。结果硬是逼着自己两周内从小白到能写点东西而且跟项目的话，也有助于你理解前端和后台之间是怎么联系和合作的。
精华主题学分
在线时间 小时
LZ我们可以一起学啊
CodeSchool上面的东西很实用的 学完就可以上手做project了. more info
. 涓浜-涓夊垎-鍦帮紝鐙鍙戝竷
/bbs/thread--1.html
精华主题学分
在线时间 小时
. Waral 鍗氬鏈夋洿澶氭枃绔,
treehouse 的project适合放到简历里面吗
你感觉treehouse的项目好么。。
精华主题学分
在线时间 小时
受教了，学习了很多知识。
精华主题学分
在线时间 小时
同问啊。。。哪里可以找到project做呢？
精华主题学分
在线时间 小时
同问，也是学了不少东西，但是不用就是不会啊！
精华主题学分
在线时间 小时
http://web.stanford.edu/class/cs142/cgi-bin/index.php. 1point 3acres 璁哄潧
HTML+CSS+Angular+Node Express+MongoDB，从Project5开始。
精华主题学分
在线时间 小时
try the udacity projects
自己做就可以，不需要花钱
<form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=41&tid=155932&extra=&replysubmit=yes&infloat=yes&handlekey=fastpost"
onSubmit="
// TODO Howard 11/3/2015
var sbtn = $('fastpostsubmit');
sbtn.disabled =
sbtn.innerHTML = ' 回复发表中... ';
sbtn.setAttribute('background', sbtn.style.background);
sbtn.setAttribute('bordercolor', sbtn.style.borderColor);
sbtn.style.background = '#C7C7C7';
sbtn.style.borderColor = '#8B8B8B';
var form =
// --product--
var isValid = fastpostvalidate(form, null, 0);
if(!isValid) reoverBtn();
return isV
// --product--
// --testing--
//setTimeout(function() {
// var isValid = fastpostvalidate(form, null, 0);
// if(!isValid) reoverBtn();
//}, 2000);
// --testing--
您需要登录后才可以回帖
回帖并转播
回帖后跳转到最后一页
一亩三分地推荐 /5
地主Warald亲手做你的申请，针对你的背景和目标，考虑申请、学习、就业、移民等系列问题，制定申请策略。
“offer”指全额奖学金，免学费全免+每月工资，Berkeley, CMU, JHU, UIUC, Gatech, UMich, UCLA, Columbia，欢迎观赏。
电子工程、计算机、统计、金数金工、化工等, Stanford, Berkeley, CMU, Cornell, Yale, Columbia, Chicago, Duke, UPenn, UIUC, Brown, UMich, JHU等
有留学、申请、找工、职业规划上的难题？先上论坛提问！
论坛考古也帮不上忙，发帖得到的回答仍然不够？电话找Warald来解答！
WARALD新书上市啦：《你不知道的美国留学》清华大学出版社，各大电商发售
Powered by