前端要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:
HTML是内容层,它的目的是表示一个HTML标签在页面里是个什么角色。
CSS是样式层,它的目的是表示一块内容以什么样的样式(字体、大小、颜色、宽高等)显示。
JS是行为层,它要做的是当用户触发某些行为时,会给内容和样式带来什么样的改变。

1,HTML,CSS部分。
HTML/CSS初学,就照着http://www.w3cschool.cn/的实验做,把http://www.w3cschool.cn/index-6.html 和 http://www.w3cschool.cn/index-7.html 两套做完了就入门了,

入门之后,学习CSS的精华,即布局,推荐李炎恢的教学视频,布局这一章:http://edu.51cto.com/lesson/id-14895.html 第27章,如果觉得不够,需要实战,则再学习接下来的28,29章。注意,这时候一定要老师讲一块代码,自己就要照着实现一次,切勿只看不做。

CSS还有一个精华部分就是命名规范,找几个著名网站(比如豆瓣、网易新闻)这类,研究它们的命名规范,我这里,有一个现成的命名规范可供学习(需要登录evernote查看):https://www.evernote.com/shard/s168/sh/7f89cc57-cab2-4712-b61b-9fde25e3ef51/d01c8e34ef05373ec06c3b2f7cfaba82/res/e0b9963b-ba7a-441a-8462-8f87c48e4cda.jpg?resizeSmall&width=832

学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候如果想继续深入学习相关类库和框架,推荐Sass和Compass,推荐两篇阮一峰的博客:http://www.ruanyifeng.com/blog/2012/06/sass.html http://www.ruanyifeng.com/blog/2012/11/compass.html
和这本书:《Sass and Compass in Action》http://book.douban.com/subject/6732187/

2,JavaScript部分。

初学者推荐看视频:http://edu.51cto.com/course/course_id-166-page-1.html ,特别注意JavaScript的OOP写法(重点,可多看几遍),以及闭包、原型链,异步编程部分(次重点),前者写项目都在用,后者涉及JS这个语言本质特点。

然后需要学习JS和HTML/CSS在浏览器下的调试方法,推荐用Google Chrome下的chrome developer tools调试,可以看这个视频学习: http://happycasts.net/episodes/40

看完视频并经过实践后,可以看《Javascript good parts》(http://book.douban.com/subject/2994925/)这本书,不必细看,看它的思想即可。用于巩固,提升JS方面的编程思想。

web前端学习路线推荐(讲的很细致)的更多相关文章

  1. (纯干货)最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

  2. web前端学习路线与书籍推荐

    什么是web前端? 在以前,通俗的讲是网页制作,在现在,哼哼,可以参考这篇文章 http://tieba.baidu.com/p/4817153404 那么如果高效优雅的学习web呢? 注:以下纯属个 ...

  3. web前端学习路线(含20个真实web开发项目集合)

    目前web前端工程师日均岗位缺口已经超过50000,随着互联网+的深入发展,html5作为前端展示技术,市场人才需求量将呈直线上涨. Web前端工程师的岗位职责是利用HTML.CSS.Java.DOM ...

  4. 这绝对是有史以来最详细的web前端学习路线

    定要善用开发者工具.firefox的firebug和Chrome的F12都是很好的选择,用好了这个必会发现他带给你的帮助比看一本书更多.你把firebug摸透了你还担心对DOM理解不够?考虑到未来,h ...

  5. web前端学习路径推荐

    如果你是从其他行业转行到web前端开发领域,如果你没有计算机方面基础,建议大家先从最基础的网页制作开始学习,web前端的范围非常广泛,现在已经达到了大前端的要求,不过薪资待遇也是越来越好,可以说前端开 ...

  6. web前端学习路线和步骤

    H5+全栈工程师  (学习下列技术可以加QQ: 1416 7596 61)第一阶段:初级入门阶段基本功 1.HTML入门 Windows概述.浏览器概述.HTML简介.HTML标签详解.前端开发工具概 ...

  7. web前端学习路线:HTML5教程之前端模块化开发

    1. 命名冲突 首先从一个简单的习惯开始. 由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复 ...

  8. Web前端学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. 漫谈WEB前端学习路线

随机推荐

  1. .Net普通三层 到 工厂模式->线程内唯一+单元工作模式->WebService分布式三层

    在软件世界分层的思想无处不在 主要是为了提高软件系统的维护性,扩展性,复用性和解耦等 软件的三层构架是一种最基本的分层思想的体现 结构图大体如下: 如此一来,开发人员可以只关注其中一层,而无需关心下一 ...

  2. 【Xilinx-Petalinux学习】-06-OpenCV通过USB摄像头采集图像。

    占位, 实现USB摄像头的图像采集与保存

  3. YII 1.0 验证码

    public function actions(){ return array ( ‘captcha’=> array( ‘class’=> ‘CCatpchaAction’, ‘heig ...

  4. 【转】 如何提高自己的acm个人能力

    2011-05-17 21:26 1429人阅读 评论(0) 收藏 举报 算法网络blog八卦游戏读书 转载自 简单de数字 最终编辑 fading_code by   zfy0701 本来以为HNU ...

  5. HTML5 简介、浏览器支持、新元素

    什么是 HTML5? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提供 ...

  6. C++中的输入参考

    1.输入输出 1)operator>> 参考:cplusplus.com Extracts characters from is and stores them in s as a c-s ...

  7. 用《VisualStudio命令提示》生成WSDL客户端文件

    1.找到vs命令提示符并且以管理员方式打开. 2.输入:wsdl + wsdl文件路径(可以为url).如:“wsdl http://localhost:30373/PDAWebService/SH3 ...

  8. HTTPS=HTTP + SSL / TLS

    以下的两个链接作为本次编辑的参考 https://www.bennythink.com/school-1.htmlhttps://www.bennythink.com/school-2.html 应一 ...

  9. 玩转微信小程序

    原文链接 2007 年 1 月 9 号,苹果一代在功能机盛行的年代中出世. 2017 年 1 月 9 号,微信小程序在重型app风靡的压力下上线. 苹果的出世掀起了互联网一波又一波的浪潮,而微信小程序 ...

  10. 如何:使用 Visual Basic 编写基于 Unity3D 的计算器

    随着 .NET 全平台战略的推进,微软正在让以 C# 为先锋的 .NET 拥有跨平台特性.这个过程中一直有人想知道其它 .NET 语言对跨平台的支持有什么改进,熟悉 C# 但是喜欢用 VB 的我也不例 ...