零基础学习WEB前端的思路

我打算教某人学习web前端了(某人零基础),确切的说是学习前端中的HTML+CSS部分。

目前还没有时间去做成PPT课件,只是有大概的思路。
讲的时候对着电脑一边操作一边讲解。

其实,主要的思路也很简单,就是认识到网页是什么,然后如何以HTML+CSS去实现。

首先,网页从大的范围讲,就是把文字和图片通过浏览器呈现出来,直白点,网页就是文字和图片,这点注意到了,就明白为什么写网页了,就是要对文字和图片的排版。
由简入繁。

然后,我简单讲了一下HTML的基本结构,和基本的标签。
之后,我就不深入了,开始教思路。
就是解构网页。

因为做网页正常的流程是先出效果图,然后写代码,我就教如何去解构效果图。
解构又分两个步骤,第一步,为HTML服务的解构;第二步,为CSS服务的解构。

第一步,就是培养写HTML结构的思维。
看到效果图,脑子里第一时间要有代码结构,因为初学,标签都不知道,我教的是分解,网页分上中下,左中右,要学会判断,效果图上的内容,可以分成什么结构,一般是上中下,然后上面又分左右,还可以再细分。
这个解构的过程,可以在纸上画出来,如果了解了DIV和CSS,在纸上,按效果的结构,画个框,旁边中文标注,比如是导航,然后写上,div class=”nav”。
这就是为HTML服务的解构效果图,直白说,就是划分区块。

第二步是为CSS服务的解构,CSS就是样式,是美化,当你把HTML的结构弄清楚了,就要把结构内的文字和图片,按效果图的样式,用CSS实现。
这个解构的思路,就是,要对文字颜色、大小、行高等,图片的内外边距等,有大致的认识。
看了效果图,脑子里要明白,CSS如何去实现。

接下来,我的思路是,找个实际的项目,让某人自己动手做,比如,给自己做个博客。
效果图不做,只做HTML+CSS部分,网上找个简单的页面,照抄结构,用自己的思路去写结构和样式。
实在有困难的话,由某人自己动手,我口述,自己操作,加深印象,尽管很多标签都不知道,但是,写多了,肯定会熟悉。