经过一个月的学习,我收获了许多,今天的测验是做一个企业中文网站,令我自己感到吃惊的是,我前前后后用了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的学习了,也是核心中的核心,我认为与上一阶段相同的是,要先梳理知识结构,然后再学习的过程中不断补足,这样做也能更好的体会各个知识之间的关联,同时对学过的东西及时总结汇总,以博客或者其他形式呈现,最重要的是多练习,计算机语言注重逻辑和概念,这些都是站在岸上学不会游泳的领域,多实践编写,尽早掌握编程思维。

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

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

    第十六章 1.    输入和元素 电子邮件框 <input type="email"> 搜索框 <input type="search"> ...

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

    第七章 1.  样式表:选择器和生命块 2.  !important: 某条声明的重要程度比其他高,在末尾添加 3.  属性值:inherit;  是强制继承 4.  1em=16px; 5.  可以 ...

  3. 《HTML5与CSS3基础教程》学习笔记 ——One Day

    第一章 1.    邮箱地址的URL地址包括:mailto:+邮箱地址 2.    ../表示向上走一级,开头直接使用/表示根目录 第三章 1.    <header>: role = “ ...

  4. 《HTML5与CSS3基础教程》学习笔记 ——Three Day

    第十一章 1.  box-sizing:border-box(让宽度和高度包含内边距和边框) 2.  clear让后面的元素显示在浮动元素的后面 3.  z-index只对只对绝对.固定.相对定位的元 ...

  5. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

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

    title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...

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

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  8. CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  9. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. React生命周期钩子

    最近的工作都很忙,所以很少完整的时间可以用来总结和回顾知识点,今天就趁着是周末,我准备在这里复习和回顾一下React的基础.工作中主要用的vue比较多,在工作中使用React也已经是一年前了,当时用的 ...

  2. vysor 破解 (插件 V1.7.8 客户端2.1.0)

    0.环境 mac os ===19年更新-客户端破解=== 换了个电脑,老的Chrome 插件各种问题,就换了客户端,然后就是一片模糊... 参考文档:https://www.sdbeta.com/w ...

  3. python模块——hashlib模块(简单文件摘要算法实现)

    #!/usr/bin/env python # -*- coding:utf-8 -*- __author__ = "loki" # Usage: hashlib模块 import ...

  4. RAC配置(启停库)

    关库顺序 :先关闭数据库 然后关闭节点资源 [root@rac1 ~]# srvctl stop   database  -d 数据库名[root@rac1 ~]# srvctl stop   ins ...

  5. 关于vue Unexpected identifier 问题

    vue对于es6虽然自带babel转换 但是在index.html文件中并不会发生转换 因此在index.html中使用新的语法会导致低版本浏览器不识别代码因此报出Unexpected identif ...

  6. M爷的线段树

    M爷的线段树 - BUCTOJ 3305 一个长度为n的数列A.修改m次,每次给区间[L,R]中的每一个数加X.查询k次,每次查询第i个元素的值并输出.1<=n<=1e5 ,1<=m ...

  7. 在Windows下配置svn服务端钩子程序(部分)

    需求一,svn提交时必须填写log日志的需求,如何进行配置呢?请看下面. 需要在版本库目录下找到hooks文件夹,我的版本库是dxoffice,所以是这个目录,你要找自己的目录 然后进入,创建一个pr ...

  8. 亿图图示与visio结合使用

    亿图图示与visio结合使用 Model 图例   思维导图 Camp Awards 思维导图 思维导图 Englilsh camp activity plan 项目管理 Auto WBS 商务 错误 ...

  9. Java——线程池

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  10. Swift网络封装库Moya中文手册之RxSwift

    RxSwift Maya提供了一个可选的MoyaProvider 子类 - RxMoyaProvider.在网络请求完成时,我们不再使用 request() 函数的回调闭包,而是使用 Observab ...