`
mihuhu
  • 浏览: 1884 次
文章分类
社区版块
存档分类
最新评论

写给同事的前端学习路线(附web学习路线图)

阅读更多

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


在我详细说明前~先给大家上一个上一个丧心病狂的路线图:




 


1,HTML,CSS部分。
HTML/CSS初学,就照着http://edu.51cto.com/course/course_id-799.htmlhttp://edu.51cto.com/course/course_id-1407.html 这2个课程按照讲解把实验做了!把http://t.51cto.com/exam/list/id-103.html这套测验做完,达到80分就算入门了,

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

CSS还有一个精华部分就是命名规范,找几个著名网站(比如豆瓣、网易新闻)这类,研究它们的命名规范,我这里,有一个现成的命名规范可供学习(直接百度文库下载即可~):http://wenku.baidu.com/view/b3af252558fb770bf78a55e7.html?re=view


学习完成后就是一个较为熟练的HTML/CSS使用者了.这时候如果想继续深入学习相关类库和框架,推荐Sass和Compass,推荐两篇阮一峰的博客:http://www.ruanyifeng.com/blog/2012/06/sass.htmlhttp://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://edu.51cto.com/course/course_id-55.html


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


写到这里~再次感谢豆瓣白乌鸦的思路~

  • 大小: 158.2 KB
分享到:
评论

相关推荐

    web前端学习路线图

    web前端学习路线图

    前端学习路线图 前端学习路线图

    前端学习线路VISIO图,最全前端学习路线,可以下载完资源私聊我,讲解相关学习路线,适合新手小白,欢迎大家踊跃交流

    Web前端学习路线图.jpg

    针对web前端开发,整理的一份学习路线图,可以作为入门参考资料。 包含html、css、javascript基础路线,以及jQuery、MySQL; 进阶的包含Nodejs、vue、react、微信小程序等路线。

    Web前端的学习路线 20160909

    Web前端的学习路线思维导图 学习web前端开发该怎么学,按照什么顺序学习,这是很多新手朋友会遇到的问题。 想做好一件事,必须要花费一些功夫,然后是多学、多思、多练、多交流、多总结,发现自己的问题,然后一定要...

    入门前端?前端学习路线图汇总.md

    ### 入门前端:前端学习路线图汇总 #### 前言 对于许多希望进入前端领域的初学者来说,面对纷繁复杂的技术栈可能会感到迷茫。本文旨在为那些想要入门前端开发的朋友提供一份清晰的学习路线图,帮助大家系统地了解...

    图灵前端图书学习路线图1

    "图灵前端图书学习路线图1"为我们提供了一个系统性的学习计划,涵盖了从基础到高级的前端技术知识。以下是对这个路线图中涉及的知识点的详细说明: 1. **HTML5与CSS3基础**: - **HTML5**:HTML5是现代网页开发的...

    前端学习路线_web_

    "前端学习路线"是一个为初学者精心设计的学习路径,旨在帮助他们逐步掌握Web开发的基础知识。在这个过程中,了解并掌握相关技术至关重要,下面将详细阐述这个学习路线中可能涵盖的知识点。 1. HTML(超文本标记语言...

    前端学习路线.md

    前端学习路线.md

    前端学习路线图.png

    由于前端越来越火,想自学前端的人也很多。很多小伙伴学习的时候很迷茫,不知道如何规划,这是我自己整理的一份系统专业的学习指导。

    2020年小白学习Web前端的最新学习路线指南.docx

    2020年小白学习Web前端的最新学习路线指南 本资源提供了2020年小白学习Web前端的最新学习路线指南,旨在帮助零基础的小白快速掌握Web前端技术。该指南分为三个阶段,每个阶段都有明确的学习目标和内容。 阶段一:...

    Web前端视频学习资料50G

    Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习资料50G Web前端视频学习...

    前端学习路线-初级01

    ### 前端学习路线-初级01 在IT领域中,前端开发是构建网站、应用程序用户界面的重要组成部分。随着互联网技术的不断发展,前端技术也在不断迭代与进化,因此掌握一套系统的前端学习路线对于初学者来说至关重要。...

    前端学习路线贼详细版.md

    前端详细学习路线,根据鹅厂大佬老鱼皮总结的前端路线进行了修改整理。 在线查看请点我:https://blog.csdn.net/qq_45882139/article/details/119866469

    超详细的web前端基础学习笔记

    #### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**:HTML (HyperText Markup Language) 是一种标记语言,用于定义网页的结构与内容。它如同网页的骨架,为网页提供基本框架。 - **CSS**:CSS ...

    2024 年成为现代前端开发员的学习路线图

    ### 2024年成为现代前端开发员的学习路线图 在快速发展的IT行业中,成为一名优秀的前端开发者不仅意味着掌握最新的技术栈,还需要不断更新自己的知识体系。本文将根据提供的标题、描述以及部分内文,详细阐述如何...

    技术胖前端学习路线.html

    技术胖前端学习路线.html

    2018最新HTML5前端学习路线图

    2018最新HTML5前端开发学习路线图,适合自学,尚硅谷内部资料,可从尚硅谷官网下载免费视频教程自学。

    详细的前端开发学习路线,涵盖了前端开发的基础、中级和高级知识点

    前端学习路线:详细的前端开发学习路线,涵盖了前端开发的基础、中级和高级知识点;前端学习路线:详细的前端开发学习路线,涵盖了前端开发的基础、中级和高级知识点;前端学习路线:详细的前端开发学习路线,涵盖了...

    web前端开发学习路线.doc

    "Web 前端开发学习路线" Web 前端开发是一个非常重要的IT技术,掌握Web前端开发技术可以帮助开发者创建更加美观、交互性强的网站。下面是关于Web前端开发学习路线的知识点总结: 1. 学习Web前端开发之前,需要具备...

    全新前端学习路线图.txt

    根据提供的文件信息,这里将为大家详细解读一份名为“全新前端学习路线图”的文档,并从中提炼出重要的知识点。虽然链接及部分信息无法直接访问或解析,但我们可以基于标题、描述和标签来构建一个全面且深入的学习...

Global site tag (gtag.js) - Google Analytics