028-86261949

当前位置:首页 > 技术交流 > 作为一名前端小白,学会H5,css3以及JavaScript的时间应该是多久比较合理?

作为一名前端小白,学会H5,css3以及JavaScript的时间应该是多久比较合理?

2020/05/25 14:30 分类: 技术交流 浏览:0

Hello,题主同学,一看到这个问题,我便不假思索地赶过来回答了!为什么?因为我们源码时代每天都在帮助成千上万的学员们学习前端知识,这其中当然包含H5、CSS3以及JavaScript咯。闲话少叙,我们直接切入正题!(PS:因为写这篇文章是面向前端小白的,所以我会尽可能把话说得“白”一些,不扯那些深谙难懂的技术术语)

 

一、要想搞清楚「多久学会」,我们先弄明白「要学什么」

先说H5是什么?简单地说,它是HTML语言的第5版标准(不过市场上很多外行人把H5泛泛地理解成能在手机上看的、带一堆狂拽酷炫吊炸天特效的、能放音乐放视频的网站。我甚至被亲戚都问过:“诶~你是学技术的,那你一定会搞H5吧?帮我弄个有特效的那种文章发微信里面呗?”我当时真想说:“是,我能搞H5..我全家都能搞H5!...”)。当然了,这是开个玩笑,不过对于咱们前端行内人来说,可别自行扩散,H5,它就是一个HTML的语言标准罢了。

但这里我猜测题主同学应该不是想简单问学会H5这一版标准要多久,题主的H5应该是包括了「HTML4 + H5新特性」的部分,HTML5在HTML4的基础上进行了大量的修改与补充,因此,后续部分的文章中出现的H5,就泛指H4 + H5新特性咯。

那我们现在便来看看H5包含哪些部分吧,因为题主问的是“学会”,而不是“精通”,那我这里以“学会”且能学好为目标,来列一下入门H5要掌握哪些重要知识点吧,先来瞅瞅HTML基础部分

这个阶段的重点是HTML标签的熟悉,通过学习它们,我们能够了解到一个网站的基础结构以及所包含的元素类型。

有了基础部分的铺垫,再来看看H5标准对HTML标签方面的补充与改良

这其中的重点,是H5各语义化标签的使用,并且要养成语义化编码的良好意识。

H5对HTML标签的补充只是整个标准的冰山一角,我们按照推荐学习的顺序,其他H5的新特性,在JavaScript之后放出。这样整个的学习脉络,读起来便是由浅入深、逐层递进的,也适合实际的学习顺序。

好,再来说「CSS3」。类似H5的“5”,CSS3的“3”也是指版本号,CSS3是对以往CSS1~2技术的一个升级版本。我们回答中所说的CSS3,同样也泛指CSS基础加CSS3补充了。我们先来看下CSS最基础知识:

学完这些呢,就对CSS有了一个大局上的了解了,然后就是CSS的重点系列知识了:

我在画以上思维导图的过程中把CSS3和CSS2的部分揉在一起了,因为我并不推荐把它们分开学,站在一个更系统地角度分模块地去学会让同学们对知识的理解更系统化,而不是随着语言发布版本去学。

完成以上2张CSS导图知识点的学习,绝对算得上是“学会CSS”了,此时已对CSS能实现什么有了清晰的了解。之后有兴趣的同学可以再补充学习些CSS3新特性,比如:圆角、阴影、颜色RGBA、自定义字体、CSS伪类选择器、变形与动画、媒体查询等等

终于到前端灵魂部分,JavaScript了。对于JS的学习内容,我也把他“由浅入稍深”地分成几部分。第一部分,学什么语言都一样,先是了解语言历史及基本语法

学习基础语法后,便可以继续学习真正属于JS“特色”的内容了,DOM+BOM,来看:

完成以上JS部分的学习,JS算是入门了。至此,运用所学的HTML+CSS+JS知识,已经可以尝试着手撸一个简单的带交互的网站了。

等等,好像还差点什么,这些学完后做出来的只能算是“静态网站”,什么是静态网站?静态不是指静止不动,而是指“数据是静态”,网站中呈现的那些数据都是静态写死的。真正要使用动态数据,那还得学会怎么「发请求」,也就是对于AJAX发送异步请求的学习了。

OK,最后再来补充一开始提到的H5新特性还有哪些:本地存储、文件操作、请求二进制数据、离线应用、Canvas、Video与Audio、地理位置信息等等......其中的本地存储十分重要,其余确实是细分别类的各种领域,所以不推荐小白们从头到尾都学一遍,完全可以根据自己的兴趣或者是企业的实际业务需求再做探索。

二、已经清楚了「要学什么」,我们再聊「学多久」

推荐前端新人分两个阶段学习这些知识,第一阶段,HTML+CSS的页面布局样式实现阶段

第一阶段所学的知识最基础,更多是需要记忆的内容。这一阶段要求学习的时候不要走马观花,一定要稳扎稳打,前期把底子打牢。

CSS的学习没必要所有属性走一遍(CSS的属性茫茫多),只是挑我上面列出的重点分类去学即可,过程中学会怎么查API文档,有了对CSS的全局观,后面遇到不清楚如何实现的样式效果,找对应文档就可以了。

另外最重要的是,请注意其中我添加了「项目实战」环节,这非常重要,前面记忆了这么多标签、CSS属性,不用一用怎么能体现自己的掌握程度?学了HTML、CSS以后已经可以写网页的布局和样式了,这时可以试着写一些热门类网站了,这里拿我们源码时代的一个项目实战课程举例:

初期不用给自己定的太难,实现上面这种简单布局的企业官网即可。第一阶段知识的学习比较简单,我给到的建议学习时间是2~3周以内(每天怎么着也得学够4h吧,同学们计划出整块的时间加油前进吧!)

第二阶段是JavaScript的入门与基础学习了。我推荐的学习顺序是:

这个阶段的学习稍有难度,但我相信即便是前端新人,只要跟着学习材料的章节示例,自己勤加练习,也是完全没问题的。

学了基础语法,算是入了JS的门,能够了解如何编码JS语句;学习DOM与BOM后可以自由地操作文档元素以及调用浏览器提供给我们的API,来实现大多数网页行为;掌握了H5的本地存储技术,我们终于初步有了数据的概念,原来数据不仅可以保存在内存中,也可以保存在浏览器本地;最后,学习异步的概念,并且掌握发送请求的流程与操作方式,终于能够和后台数据打交道了。

最终再把所学应用到实战项目上,相比第一阶段,我们能够实现的网站交互更加复杂多样,如果有服务端接口配合,甚至能够写出一个像模像样的动态网站!依然拿我们源码时代的实战项目举例,比如这种:

 

第二阶段我推荐的学习周期是4~6周,由此,整个HTML+CSS+JavaScript(其中还包括H5、CSS3重要的新特性)的整体入门学习时间我建议在6~9周。这还是按每天4小时左右学习时间来估算,如果你多付出、多思考、多总结,勤加学习,我相信有天赋的同学最快1个月就可以!当然,如果时间充沛,也不要一味追求速度,前期把知识学扎实,学细致,厚积薄发,就仔仔细细学他2个月甚至3个月,然后达到熟练掌握,同样也非常棒!

好了,我要分享给题主的内容也差不多了,最后「墙裂推荐下我们源码时代的前端课程」,在业内大牛导师的授课帮助下,再配合着教研团队不断优化、反复推敲磨合归纳出的课件,相信你对于以上前端入门阶段的学习就像是开!了!挂!对于入门之后的前端框架使用、跨平台开发等更上层的应用也有系列课程,确实可以为同学们在前端职场中打下良好的基础。

最后祝楼主和广大前端同学们工作顺利,升职加薪呦~!

 

#标签:自学前端,H5,css3,JavaScript