这是本人学习web前端技术以来总结的经验之谈，如果你直接学前端框架，当我没说。本人没怎么学过前端框架，初次学bootstrap的时候，觉得虽然好用，但是要记得东西太多，每次编写页面样式还要看文档，看视频的时候还不好理解它的内部组成。改自己想的样式，感觉还挺难，就放弃了。所以本人设计网页的方式采用的还是古板的HTML+CSS+JS这种。
一、关于HTML的学习
学习这部分的，其实就是学习排版布局网页，并且在里面放上要展示的内容。
1.对于初学者学习html一定会踩雷的部分，你在你的电脑上设计好了网页项目，排版样式啊都很符合自己的要求，但是到了别人的电脑上，整个就拉垮了。主要是你的网页元素的宽度属性单位是px(像素)，大部分视频、书籍和文档等等资源的入门讲解，元素宽度属性单位都是px，这相对于你的电脑屏幕而言直接是固定的，到了别人的电脑上，由于他的电脑和你的电脑屏幕宽度不一样导致的。这样的结果就是你只能在自己的电脑上让别人看自己的网页。所以，我建议一开始学习设计网页的时候，每个元素的宽度属性都用百分号（例如，width: 50%），这个单位是相对当前屏幕宽度大小的百分之多少表示，每个人的电脑屏幕宽度虽然不一样，但总宽度都是百分之百，然后我们相对这个百分之百设置相对宽度，这样下来，不管我们的网页在哪种PC机上，排版布局都是一样的。注意的一点，宽度属性不光只有width，只要是横向的宽度，我们都要设置为百分号形式，比如常用的这些属性margin-left,margin-right,left,right,padding-left,padding-right。这个单位多用几次就能理解。对于纵向的高度就用px，大家的电脑屏幕宽度都是从最上面开始，虽然长度也不一样，但是网页超过自己屏幕宽度的部分自动出现滚动条，页面内容就还是正常显示。
2.开始设计网页之前先使用通用选择器将页面自带的margin和padding属性置零。这样我们在设计的时候，就是从一张白纸开始。更容易理解自己的设计，不用经常F12审查页面元素的内外边距。
3.多用div元素对自己的页面进行排版布局，只要写了div元素就在css那里都给它加上border属性，给个一两像素，好观察它的页面布局，就像画漫画一开始都要设计好漫画的格子，好给里面画内容一样，设计网页也是，一开始先用div设计好总体布局，之后在里面再根据要求，用div布置位置，然后在对应的内层div里面填内容，最后删除css里不需要的div的border属性。这样设计就很容易上手，设计网页的速度也很快。同时，在设计相应的JS效果时，更好选择点击某一div元素，触发另一div（这里面放着相应的内容）事件。注意，div里嵌套的div百分号单位的宽度是相对于外层div的宽度而言。不理解的话就自己动手看结果。
4.建议非必要少用元素的padding属性，这里不太容易理解，很容易脱离对元素宽度的设置掌握。一般都用margin属性，相对各个元素的外边距直接计算，相对更好理解。
二、关于CSS的学习
学习这部分，其实是学习对上面排版布局好的页面进行美化，上色。这部分不难学习，记住各元素常用的属性就好，记不住看文档。
个人建议装饰网页颜色的时候用RGBA颜色值，A是alpha透明度，在原来RGB颜色的基础上多出来的，可以控制当前颜色的透明度，以调出自己要求的颜色，很方便。如果想设计出有立体感的网页就多用元素的border和box-shadow属性，结合起来以呈现立体感。注意，这里主要学习各种选择器的使用，各选择器之间的区别要清楚。元素的float属性需要深入理解，这个很常用很方便。和float相关的position属性的每种值的效果也要透彻。
三、关于JS的学习
学习JS这部分，其实是学习给网页添加动态效果，让网页更生动。
1.对于学习网页的js这部分，你要先了解网页的DOM结构，知道布局页面上每个元素它们之间的关系。了解了它你就很容易上手了，特别是想要让元素的子元素做某种效果，需要怎么得到这个元素。
2.初学者每写好一个js，在理解之后，把它封装成每个元素都可通用的函数，保存好，在后面再次需要使用的时候直接让元素调用，方便使用，当深入理解之后，继续优化完善这些函数。
3.如果想要用JS设计网页小游戏啊，一些动态
效果啊，这需要深入学习JS。
4.多按F12进入页面控制台那里，测试自己写的函数，写函数之前也可直接先在这里编写，随写随看，写好后复制粘贴到自己项目里面。