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- ...
随机推荐
- Codeforces 798A - Mike and palindrome
A. Mike and palindrome time limit per test 2 seconds memory limit per test 256 megabytes input stand ...
- Codeforces 832D - Misha, Grisha and Underground
832D - Misha, Grisha and Underground 思路:lca,求两个最短路的公共长度.公共长度公式为(d(a,b)+d(b,c)-d(a,c))/2. 代码: #includ ...
- python - HTMLTestRunner 测试报告模板设置
python - HTMLTestRunner 测试报告模板设置 优化模板下载地址: http://download.csdn.net/download/chinayyj2010/10039097 ...
- ASCII 和 Unicode 编码的由来
大话数据结构上的说明: 网络博文的说明:
- 20170708xlVBA添加新产品修改公式
Sub ControlInsertProduct() Dim Wb As Workbook Dim OneSht As Worksheet Dim Arr As Variant Dim i As Lo ...
- Confluence 6 LDAP 连接池配置参数
初始连接池大小(Initial Pool Size) 当初始化 LDAP 连接池的时候初始化创建的 LDAP 连接数量. 1 期望的连接池大小(Preferred Pool Size) 优化连接池的大 ...
- Sasha and a Very Easy Test CodeForces - 1109E (数学,线段树)
大意: 给定n元素序列, q个操作: (1)区间乘 (2)单点除(保证整除) (3)区间求和对m取模 要求回答所有操作(3)的结果 主要是除法难办, 假设单点除$x$, $x$中与$m$互素的素因子可 ...
- Tips for Sync Vimtex and PDF
vimtex synctex: \lv. skim synctex: to display the TeX source line corresponding to a point in the PD ...
- Oracle解析复杂json的方法(转)
转:Oracle解析复杂json的方法 问题背景: 当前在Oracle数据库(11G之前的版本)解析json没有可以直接使用的系统方法,网上流传的PLSQL脚本大多也只可以解析结构较单一的json串, ...
- OAF多语言的实现
在之前的文章中转载了一篇关于多语言实现的文章. OAF中多语言的实现(转) 现在我来讲讲另外一种情况. 在建立工程项目没有特别选择语言,所以所有的PG或RN页面都是英文的,在页面原文件中可看到如下内容 ...