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的学习了,也是核心中的核心,我认为与上一阶段相同的是,要先梳理知识结构,然后再学习的过程中不断补足,这样做也能更好的体会各个知识之间的关联,同时对学过的东西及时总结汇总,以博客或者其他形式呈现,最重要的是多练习,计算机语言注重逻辑和概念,这些都是站在岸上学不会游泳的领域,多实践编写,尽早掌握编程思维。
HTML5和CSS3阶段,我是如何学习的?的更多相关文章
- 《HTML5与CSS3基础教程》学习笔记 ——Four Day
第十六章 1. 输入和元素 电子邮件框 <input type="email"> 搜索框 <input type="search"> ...
- 《HTML5与CSS3基础教程》学习笔记 ——Two Day
第七章 1. 样式表:选择器和生命块 2. !important: 某条声明的重要程度比其他高,在末尾添加 3. 属性值:inherit; 是强制继承 4. 1em=16px; 5. 可以 ...
- 《HTML5与CSS3基础教程》学习笔记 ——One Day
第一章 1. 邮箱地址的URL地址包括:mailto:+邮箱地址 2. ../表示向上走一级,开头直接使用/表示根目录 第三章 1. <header>: role = “ ...
- 《HTML5与CSS3基础教程》学习笔记 ——Three Day
第十一章 1. box-sizing:border-box(让宽度和高度包含内边距和边框) 2. clear让后面的元素显示在浮动元素的后面 3. z-index只对只对绝对.固定.相对定位的元 ...
- HTML5与CSS3基础教程第八版学习笔记11~15章
第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...
- HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- 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- ...
随机推荐
- 013 - 关于GC root: Native Stack | MAT分析
Question: I have some third library code that I run and after some time I run into OutOfMemoryEr ...
- 安装 tensorflow 时遇到 OSError: [Errno 1] Operation not permitted 的解决办法
Installing collected packages: numpy, scipy, six, pyyaml, Keras, opencv-python, h5py, html5lib, blea ...
- Docker 构建 redis 集群
安装docker 1.yum install docker 方法一: 1. docker pull redis 2.docker run -d --name redis-1 -p 7001:6379 ...
- bzoj4589: Hard Nim fwt
题意:求n个m以内的素数亦或起来为0的方案数 题解:fwt板子题,先预处理素数,把m以内素数加一遍(下标),然后fwt之后快速幂即可,在ifwt之后a[0]就是答案了 /*************** ...
- python-day30--粘包
一. 什么是粘包 1.须知:只有TCP有粘包现象,UDP永远不会粘包 2.所谓粘包问题主要还是因为接收方不知道消息之间的界限,不知道一次性提取多少字节的数据所造成的. 二.两种情况下会发生粘包. 1. ...
- hdu2059 dpdpdp玄学5555~~
龟兔赛跑 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- OAF系统更新默认LOGO图标和主页环境描述
更新EBS OAF系统中默认的LOGO图标和主页的环境描述 左上角的ORACLE图片位置在 登录界面左上角oracle LOGO图片为GIF格式,大小155*20 背景透明.文件名为:FNDSSC ...
- 修改MAC地址的方法(未测试)
用ioctl控制,通过SIOCGIFHWADDR获取MAC地址,SIOCSIFHWADDR设置MAC地址,不过在设 置MAC地址之前,要先把网卡down掉,设置好了以后,再UP起来. #include ...
- Centos中彻底删除Mysql(rpm、yum安装的情况)
[root@data lib]# rpm -qa¦grep mysqlmysql-5.5.25-1.el6.remi.i686mysql-libs-5.5.25-1.el6.remi.i686comp ...
- list<map>排序
@Test public void test_when_test1() throws Exception { String[] strs = {"e", "ee" ...