HTML5和CSS3阶段,我是如何学习的?

  经过一个月的学习,我收获了许多,今天的测验是做一个企业中文网站,令我自己感到吃惊的是,我前前后后用了4个小时就完成了,这在一个月前根本不可能,因为对布局属性的理解还不够深刻,常常会在调试中浪费大量时间,对PS切图的操作也熟练了许多,已经在自己的脑海中构架了相对完善的知识体系,不足的是至今还没掌握spite,对伪类after  before  checked的理解还很不到位,对媒体查询、盒布局没有完全掌握。

  来谈谈这一个月的学习吧,可以说获益良多。一开始对小黄的上课进度其实是有点不满的,毕竟太慢了,在我看来HTML、CSS完全是不需要花费那么多时间的,前后大概用了有20天的时间,我在5天内就把80%的知识点都梳理了一遍,可是经过项目的洗涤,跟同学们的交流,我才发现自己对它们的理解只停留在表层,还有“巨大的提升空间”<( ̄︶ ̄)>。虽然这只是标记语言,只要运用恰当,可以用“组合拳”做出非常炫酷且功能强大的效果,各种动画、3D就不在话下了,还有之前想都没想过的图片轮播、显示弹窗等等,就不一一枚举了。在我第一天来到这里学习的时候,我就对自己说,我要学的不仅仅是一门计算机语言,更重要的是学会如何学习一门计算机语言的方法!!好在小黄也是对后者及其重视的老师,在他的启发下,我慢慢摸索出对自己而言行之有效的方法:

  1.反复总结:

    小黄极度重视自我总结,甚至到了偏执的程度!受他的影响,我也慢慢懂得该如何去总结,其中非常好的一个方法就是写博客,博客其实不在意给多少人看,最重要的是写的过程中得到自我成长,把学到的东西归纳起来,加深记忆,而写的过程中有不清晰的点,就是尚未掌握牢固的地方,此时就应该刻意对其进行联系,及时处理。这个过程可以看成巩固提升、查漏补缺。

  2.梳理知识结构:

    同样是小黄介绍的一款软件——processon,当我第一次看到它的时候,我明白了  情不知所起,一往而深的  到底是一种什么样的情感b( ̄▽ ̄)d!!!这是一款制作思维导图的在线编辑工具。CSS的文档手册我已经看了不知道多少遍了,然而背书式的学习往往是低效的;直到我开始使用它,情况改变了!!学习CSS的时候,我把所有的知识点通过编写思维导图的方式总结起来,我从未感受到它们是如此的形象清晰;它们的类别、有哪些属性、它们的作用以及属性值我都了然于胸,这种方法让我从大体到细致的观察,似乎一切水到渠成,脉络变得清晰,即使忘记了,查看自己的笔记也比查手册来得快许多。

  3.练习实践

    有了基础知识的储备,就应该反复地运用它们,才能更牢固地掌握。这一环节最重要的就是踏实,每一个标签,属性,属性值,它们所产生的效果,互相之间的影响都应该细致地去体会,踏踏实实地去编写,发现不理解的地方及时处理,做到学一个懂一个。然后再总结到博客上。

  4.切忌过度汲取

    我们应该在已掌握的基础上尽可能的去拓展更多的知识,这是毫无疑问的;但是,切忌在“尚未掌握已有的知识”时,过多地学习新东西,因为前端的知识范围涉猎太广,储量大,我们应该踏踏实实地学,一步一个脚印,而不是大量地去了解有什么新的东西要学习,反而在选择中荒废了学习。

  5.刻意练习薄弱环节

    对个人而言,知识有3中状态:已知的已知、已知的未知、未知的未知。我觉得合理的时间分配应该是10%、80%、10%,也就是巩固复习占10%,学习掌握现阶段的知识80%、去了解不懂的,甚至几乎没听说过的占10%,这样做也符合二八定律。

  下阶段就是Javascript的学习了,也是核心中的核心,我认为与上一阶段相同的是,要先梳理知识结构,然后再学习的过程中不断补足,这样做也能更好的体会各个知识之间的关联,同时对学过的东西及时总结汇总,以博客或者其他形式呈现,最重要的是多练习,计算机语言注重逻辑和概念,这些都是站在岸上学不会游泳的领域,多实践编写,尽早掌握编程思维。

时间: 2024-10-26 06:46:15

HTML5和CSS3阶段,我是如何学习的?的相关文章

《HTML5与CSS3基础教程》学习笔记 ——Four Day

第十六章 1.    输入和元素 电子邮件框 <input type="email"> 搜索框 <input type="search"> 电话框 <input type="tel"> URL 框 <input type="url"> 以下元素得到了部分浏览器的支持 日期 <input type="date"> 数字 <input type=

《HTML5与CSS3基础教程》学习笔记 ——Two Day

第七章 1.  样式表:选择器和生命块 2.  !important: 某条声明的重要程度比其他高,在末尾添加 3.  属性值:inherit;  是强制继承 4.  1em=16px; 5.  可以接受不带单位的属性:line-height.z-index.opacity 6.  background-color/color/border/box-shadow/text-shadow: rgba(89,0,127,.2);最后一个是透明度 7.  属性:hsl(95,10%,28%) 色相.饱

《HTML5与CSS3基础教程》学习笔记 ——补充

在HTML5中,空元素结尾处的空格和斜杠是可选的,但是在XHTML中,必须有斜杠,所以最好每次都把斜杠写上去. disabled和required可以要属性值,也可以不要属性值 1)        有属性值:disabled=” disabled”  required=” required” 2)        无属性值:disabled.required,但是审查元素时是:disabled=””  required=”” 文件命名: 1)        文件名全部使用小写,这样方便访问者访问

htML+CSS3-》第3阶段:HTML5之CSS3基础与加强 中

HTML+CSS3->第3阶段:HTML5之CSS3基础与加强中 60前端开发基础视频-复合选择器之子元素选择器 子元素选择器,是让css选择器智能选择子辈的元素. 例如:h1>strong{color:red;} 解读为:选择器h1>strong可以解释为"选择作为h1元素子元素的所有strong元素". 61前端开发基础视频-属性选择器 属性选择器 <!DOCTYPE html> <html lang="zh"> <

HTML5与CSS3权威指南之CSS3学习记录

title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) 官方网站: 华章图书 书中所有代码下载链接: 链接:http://pan.baidu.com/s/1c0oGMn2 密码:f7zt 选择器 属性选择器 [att=val]选择器--选择属性att值为val的元素 [att*=val]选择器--选择属性att值包含val的元素 [att^=val]选择器--选

CSS3与页面布局学习笔记(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结(四)——页面布局大全

一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能如下: 1.1.1.向上移动 当多个元素同时从标准流中脱离开来时,如果前一个元素的宽度为100%宽度,后面的元素通过负边距可以实现上移.当负的边距超过自身的宽度将上移,只要没有超过自身宽度就不会上移,示例如下: <!DOCTYPE html> <html> <head> &

CSS3与页面布局学习总结(一)——概要、选择器、特殊性与刻度单位

CSS3与页面布局学习总结(一)--概要.选择器.特殊性与刻度单位 目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先级) 3.2.计算特殊性值 四.刻度 4.1.绝对长度单位 4.2.文本相对长度单位 4.3.Web App与Rem 五.示例与帮助下载 web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面

《HTML5和CSS3基础教程》-笔记1

笔记(第一.二章整合) 1,HTML思想: 编写HTML是为网页内容打上能够描述它们的标签.并且,HTML元素描述的是:内容是什么,而非看起来是什么样. 即: a,HTML:用标签去说明网页内容的含义. b,语义化HTML:用最恰当的HTML元素去说明网页内容的含义. c,结构和表现完全分离.网页内容是什么,由HTML说明.网页内容什么样,由CSS说明. 另:为什么语义化很重要? 无障碍访问:搜索引擎优化(网页在搜索引擎的排名会靠前):更容易维护代码和添加样式. 2,网页构造块: 网页可保存为纯