你没事吧？ 他跟我讲， 选工具如同选女朋友，不存在最好的，仅有最契合的，那段时期，他电脑的浏览器里头始终开着十几个教程页面。有时候早上起来电脑还开着那些页面他说是“怕梦里忘了代码怎么写”。我觉得挺搞笑，但他说这是认真的。

学网页的起因：怕被淘汰

就在去年这个时候， 我的朋友阿杰在广告公司做文案策划，每天都是那种短平快的项目，今天写微博文案，明天做朋友圈海报，日子久了他觉得自己的技能太单一，就想学点新东西。他说：“现在我妈都刷短视频了我再不学点技能，早晚被淘汰。”我当时还笑他，说“你妈刷短视频跟你学网页有啥关系？”他说“有关系啊，说明时代在变，我不变就得死。”后来想想，好像有点道理，我舒服了。。

一开始的误区：以为学软件就行

一开始， 阿杰觉得做网页就是学个软件，跟做PPT似的，打开软件点点就行。他上网搜“网页制作教程”， 出来一堆课程，从HTML到React啥都有，他挑了个看起来最简单的，买了本书，跟着学。后来啊翻开书，全是看不懂的代码，什么 他问我“这都是啥？是外语吗？”我说“这是HTML，超文本标记语言，就是做网页的基础。”他说“那不是更难了？我还以为点点软件就行。”后来他才明白，做网页不是学软件，是学代码，恕我直言...。

HTML怎么学？背就完了？

你需要记住html的基本元素标签,否则您将很难开展进一步的学习。通过html手册您就可以获取html文档的基本构成元素。阿杰那段时间天天抱着本html手册背， 什么div、p、span、a标签，他说跟背英语单词一样，今天记住了明天就忘。他跟我说“我感觉我脑子不好使，这些标签怎么记都记不住。”我让他别死记硬背，多写代码，他说“写代码更晕，写一个错三个，还不如背书呢。”后来他坚持写，慢慢就记住了大概可能也许是真的熟能生巧吧，好家伙...。

遇到的问题：标签背了又忘

第一个星期， 他每天下班学两小时后来啊被各种标签和属性搞晕了。他说“今天刚记住是图片标签，明天就忘了是输入框，感觉脑子像个漏勺。”有好几次他想放弃， 觉得“这玩意儿太难了我肯定学不会”，但想想自己花了几百块钱买书，又不甘心，就硬着头皮学。他跟我说“有时候写着写着，突然不知道自己在写啥，就停下来看看窗外然后再继续。”我觉得挺真实的，学东西都有这么个过程，调整一下。。

从HTML到React：一步登天？不可能！

学会了html之后 阿杰觉得自己能做网页了后来啊做了个简单的页面在电脑上看还行，到了手机上就全乱了。那个周末他熬到凌晨三点，就为了调一个按钮的位置，调来调去，按钮就是不听话。他说“我当时真想把电脑砸了后来发现是CSS没写响应式，白熬了。”后来他才明白， 光会html不够，还得学css，学了css还不够，还得学JavaScript，学了JavaScript还不够，还得学React，他说“这不是学网页，这是学无止境啊！”，准确地说...

React的路由：绕晕了

React路由基本用法1.React Router4.0基本概述:React Router4.0遵循React的设计理念,即万物皆组件。所以 RR4 只是一堆 提供了导航功能的组件,还有若干对象和方法,具有声明式(声明式编程简单来讲就是你需要关心做什么,而无需关心如何去做,可组合性的特点。RR4 采用单... 比如:用户要看首页,我们就让用户点击一个指向首页的a标签,点击之后,浏览器地址栏的路径会发生变化，换句话说...。

我们就可以通过最新的路径,去判断用户要看哪个页面视图。/home 表示用户要查看首页。当路径是/detail的时候,表示用户要看详情页。阿杰看这段教程的时候，跟我说“这说的啥啊？声明式？可组合？我连React都没搞明白，路由更晕了。”他后来干脆跳过了路由，先做简单的页面说“先会走路再学跑步，急啥，PPT你。。

做网页的坑：手机上乱套

结果你猜怎么着？ 他做出来的网页于电脑上瞧着尚可,只是到了手机上便全然紊乱了,那个周末他一直熬至凌晨三点,只为了去调整一个按钮的位置。他跟我说“手机屏幕小，按钮位置偏一点，用户体验就差很多，用户一看就不专业。”后来他学会了响应式设计， 用flex布局，说“flex布局真神奇，能自适应不同屏幕，就是有点绕，得记好多属性。”他还买了本CSS书， 天天看，说“css比html还难，颜色、字体、布局，每一项都要调，调起来头都大了。”

优化：给网站“减肥”

八月的时候， 网站基本做好了但是加载速度特别慢，打开要5秒。阿杰说“用户等不了5秒，早就关网页了。”他开始研究优化：压缩图片，合并CSS文件，用CDN。他说“这跟减肥差不多，把多余的脂肪减掉，网站就轻了。”他试了好多方法，再说说加载时间降到2秒，虽然还不够快，但他挺满意的，说“总算不用等半天了。”他还学会了用开发者工具看性能，说“以前看不懂，现在能看明白哪里慢了挺有成就感的。”，躺平...

学完之后：能赚钱了！

他算了一笔账，这半年花了一千多买书和课程，后来啊第一个外包项目就赚回来了。他说“没想到做网页还能赚钱，以前写文案一个月就几千块，现在做网页能赚更多。”他把做好的网站发给客户，客户说“比那些大公司做的还好”，他特别开心。他说“最大的收获不是学会做网页，是证明了自己三十岁还能学新东西，这比赚钱重要。”

最大的收获：信心比技能重要

他跟我说 最大的收获并非是学会去做网页这件事，而是论证了三十岁的时候照样能够学习新的事物。这样的一种信心，相较于任何技能而言都更为珍贵。他说“以前觉得自己老了学不动了现在发现只要肯学，啥都能学会。”他还鼓励我说“你也想学啥就赶紧学，别怕难，我都能学会，你肯定也行。”我觉得他说得对，信心这东西，真的很重要，到位。。

他养成了个新的习惯， 每当完成一项小功能，便会寻找不同的设备去进行测试，家中的iPad，爸妈所使用的安卓手机，都成为了他用作测试之举的工具，某次为了达成一个动画效果，他前前后后修改了二十多回。 我晕... 他说“动画效果看着简单，做起来可难了改了二十多次才满意。”他还学会了用GitHub， 把自己的代码传上去，说“这样不会丢，还能展示给别人看，找工作的时候有东西可拿。”

网页制作常见问题有哪些

网页制作常见问题有哪些？阿跟我说过好几个：一是手机上显示乱，二是加载速度慢，三是表单提交失败。他说“手机乱是主要原因是没做响应式，慢是主要原因是图片没压缩，表单失败是主要原因是代码写错了。”他还遇到过浏览器兼容问题，说“有的浏览器显示正常，有的就错乱，得一个个调，烦死了。”

如何选择网页制作工具

选工具跟选女朋友一样， 没有最好的，只有最合适的。阿杰试过Wix， 觉得太简单，没灵活性；试过Dreamweaver，觉得太复杂；再说说选了React，说“React虽然难，但是做出来的网页效果好，还能适配手机。”他说“工具别随便换，选一个就坚持下去，换来换去啥都学不会。”

试问，这篇文章于你是否存有启发之感呢？烦请点赞，以此支持阿杰的一番学习历程呀！无比欢迎于评论区域分享你自身的学习之事例， 而且亦能够收纳此篇文章，当你萌生出想要放弃之念时便将其取出予以翻阅。 你没事吧？ 请关注于我，后续将会呈献更多平凡之人的成长过往。要是觉着颇具效用，同样欢迎转予正在研习新技能的诸位友人哟！

快速入门HTML

快速入门HTML学会网页制作超文本标志语言,简称HTML,标准通用标志语言下的一个应用。HTML不是一种编程语言,而是一种标志语言。阿杰一开始以为HTML是编程语言，跟JavaScript似的，后来才知道不是就是用来写网页结构的。他说“HTML就是房子的框架，CSS是装修，JavaScript是家电，缺一不可。”他学了HTML之后 自己做了个简单的页面虽然丑，但是能打开，他说“这就是我的第一个作品，贼有成就感。”

HTML的基本结构

我懂了。 html的基本结构就是 里面放各种标签。阿杰说“head里放标题啊，关键词啊，body里放内容啊，图片啊，链接啊。”他一开始把 和 写反了 后来啊页面显示不出来急得他直挠头，后来查了手册才改过来。他说“做网页真是细心活，一个符号错了就啥都没有了。”

太水了。 他跟我说 做网页就跟盖房子一样，HTML是地基，CSS是装修，React是智能家电。他说“地基不稳，房子就塌，HTML学不好，后面啥都学不会。”他现在学React， 说“React就是把这些东西拆开，然后拼起来组件化，听着高大上，其实就是把大代码分成小代码，好管理。”

网页制作完成后要做什么

网页制作完了不是结束，是开始。阿杰说“做完之后要测试，看浏览器兼容不兼容，手机上显示怎么样，加载速度快不快。”他测试的时候， 用家里的iPad，爸妈的安卓手机，还有自己的电脑， 来一波... 说“不同设备都得试，不然用户用了不好，影响体验。”他还学会了用Chrome开发者工具， 说“这个工具可好用了能看代码，能调样式，还能看性能，啥问题都能解决。”

网页设计的基本步骤

阿杰说 做网页的步骤是：先想好要做什么然后画个草图，再用HTML写结构，再用CSS写样式，再用JavaScript加交互，再说说测试优化。他说“别想着一步到位，慢慢来一步一步来不然会晕。”他一开始想做个特别复杂的网站， 后来啊做了半个月，啥也没做出来后来改做个简单的，一周就做完了说“简单点好，容易完成，有成就感。”

他跟我说最大的收获不是学会做网页，是学会了学习。他说“以前遇到问题就放弃，现在遇到问题就查资料，问人，慢慢就能解决。”他现在遇到问题， 原来如此。 先自己查，查不到就问程序员朋友，说“别怕丢人，谁都是从不会到会的。”他还加入了几个程序员群，说“群里人多，问题多，能学到不少东西。”