前几天有位朋友问袁程旭，零基础学习Web前端的话，可以给些什么建议？鉴于当时本人手头上的工作比较忙，何况关于“零基础学习Web前端”这一话题的回复可远远不止三言两语，所以那时只推荐了个网站给其学习Web前端的入门基础知识，今天袁程旭特写文章系统分析回答这个问题。

首先谈一下我对Web前端这一职业的个人看法吧。之前看过我文章或者了解过袁程旭本人的朋友可能清楚，我是从JAVA开发转行Web前端的，从那以后我便不敢再对外自称程序员了。Web前端开发是近些年新流行起来的一个行业，之前不管是做网站还是软件，写后台的工程师都会包揽前端页面开发设计的活儿。也可以这么说，Web前端是当下互联网行业细分出来的产物，貌似是个新概念。

其实做前端也是个写代码的干活，不同的是后台开发人员多是写一些主要功能模块的代码，前端开发人员一般写那些用户界面设计之类的代码。后台开发压力较大，每次发现一个Bug可能就会让你崩溃好久；而前端开发相对比压力较小，随便一改代码马上就能看到前台显示相应的效果，能给人较大的满足感和幸福感。当然，现在做前端的人员工资普遍比后台开发那些人要低，这也便是我转型做前端以后不敢再自称程序员的原因之一，因为我不知道写前端代码的人算不算一位程序员。

介绍这些是为了让入门Web前端开发的朋友更好地理解这样一个概念，然后我们再来谈一下零基础学习Web前端开发的话，袁程旭可以给你一些什么样的建议和指导意见。

先阐述两个基本概念：

（1）前端工程师，也叫Web前端开发工程师。这是随着web发展，细分出来的行业；

（2）Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript ；

Web前端开发工程师不仅要掌握基本的Web前端开发技术、网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。其实Web前端开发入门很容易，但想要深入却不容易。

对于零基础学习Web前端开发的小白来说，自信和努力是非常重要的。其实大家都是从一无所知的小白开始努力，慢慢成为后来人眼中的大神级人物，所以袁程旭给的第一条建议是：保持自信！

1、首先，你需要学习基本的HTML标签，但不建议一开始就学H5；

虽然现在HTML5很流行，但对于零基础学习Web前端开发的小白来说，袁程旭个人还是不建议一开始就以学习H5作为入门课程。因为你必须要知道早期的那些HTML标签的使用，才会知道H5诞生的意义和其作用。但如果你执意要以H5作为入门课程的话，倒也没有什么不好，纯属个人建议而已。

认识并学习基本的HTML标签，你就能写出简单粗糙的网页界面了。但这里必须注意，千万别再用那些古老的切片法做网页，不然你就没有学习下去的必要了。然后就是，使用Dreamweaver 等可以直接添加元素设计界面的软件时，千万别用那些功能，不然会削弱你写代码的能力。时刻记住，那些功能是为没有能力写源码的外行人开发的，我们代码敲出来的效果绝对比拖动元素设计出来的精湛！

2、学习 css 和 JS 的使用，能帮助你设计出精美的前端页面；

前些年写网页前端代码时，多用的是table布局，但因其美观程度实在不足，难以满足广大爱美人士的需求。现今比较流行div+css的前端编码结构，建议初学者少用table元素，多用div来布局。

在第一步学习完基本的HTML标签以后，你能写出简单粗糙的网页界面。这时再学习css和 JS 就显得非常必要了，因为css可以帮助你润色前端界面，用了css以后的效果直接相当于一个化妆后的姑娘。

那么JS呢？JS可以帮助你实现很多前端的动态效果，比如很多网站的首页上方需要有动态滚动的图片，代码君网站右下角的返回顶部模块也是JS实现的。虽然现在CSS3新加了很多酷炫的功能，但是千万不能忽视了JS的学习，其中有很多东西是用css无法替代的。

【PS】袁程旭在这里打个不是非常恰当的比喻吧，如果把用HTML基本标签写成的粗糙页面比作一个姑娘，css就相当于给这个姑娘化妆，让她看起来更漂亮；而JS就相当于给这个姑娘添加很多额外的东西，比如昂贵的包包、手表、珠宝首饰之类，让姑娘看起来更高贵大气。

3、遇到问题多google，培养自主学习、动手能力很重要；

我之前加过几十个关于Web前端开发的QQ群，但里面聊技术的人很少，多是扯一些美女、绯闻之类的人比较多。难得有人提问说点儿东西，要么就是被忽略，要么就是被那些乱七八糟的话题淹没。

如果你真的下定决心要学习Web前端开发，可以尝试多加群提问，但别寄予太多希望。袁程旭个人建议，遇到问题多google来得比较实际，实在不清楚的再找个愿意为你答疑解惑的人教你理解。

其次，培养自主学习、动手的能力很重要，那些整天在群里一聊一整天的人，能学到多少Web前端开发知识？纯粹浪费时间而已。在学习基本的HMTL标签和css、JS时，需多写代码实践才能帮助你更好地理解那些代码的作用和意义。一味地看书学习，是学不会太多东西的。

举个例子吧，这是一段关于袁程旭本人的亲身经历。有一次我调试一个前端界面时，不管怎么整都会出错，足足浪费了我好几个小时的时间。那个页面的代码被我排查了几十遍，各种google也没找到相应的解决方案，最后很无语地发现问题所在：竟然是JS的引用先后顺序造成的。

现在我每次引用css和JS文件时，都会写注释声明先后顺序的重要性。这些问题只有你多写代码多实践才能发现，每解决一个问题就能进一步提升你的个人能力。之前很多人问过我对于零基础学习前端开发的意见和建议，我每次都这样告诉他们：当你自主写完十万行代码，就知道这些东西了。

【PS】这里推荐一个学习前端开发基础知识的网站 > http://www.w3school.com.cn/ ；

另外，再推荐一本关于 css 学习赏析的书籍 > 《CSS禅意花园》；

还是那句老话，Web前端开发入门很容易，但想要深入却不容易。我们先来看一张Web前端开发技能知识结构图，然后再来跟大家简单聊聊，零基础入门Web前端开发以后，怎样慢慢提升自己。

写前端代码并没有看上去那么简单，只是这个新兴的行业还不被太多人理解而已。你以为会写那些简单的HTML代码就能胜任前端开发的任务了么？袁程旭可以很负责任地告诉你：远远不是这样的。

1、先学基础知识，再学怎样写利于SEO的规范代码，这是一个前端开发人员的必备技能；

简单点儿举例说明：H1~H5的规范使用、a标签是否添加title或nofollow属性、img的alt属性有没有及时添加等等，这些基本的东西都要融入你日常的编码思维里，帮助你养成良好的编码习惯。

虽然现在网站源码对SEO的影响越来越小了，但养成良好的编码习惯依旧非常重要。首先，搜索引擎蜘蛛毕竟是机器，良好的编码习惯写出来的网页有着较为清晰的架构，可以更好地方便搜索引擎蜘蛛爬行；其次，良好的编码习惯写出来的页面有利于网站的后期维护和二次开发。

不懂SEO基本知识的Web前端开发人员，是写不出来合格的前端界面源码的。当然，除了编码习惯以外，诸如统计数据、Google Map等基本网站功能的引用，也是前端开发人员需要学会的技能。

2、要学会站在用户的角度上思考问题，努力做好前端界面的用户体验；

前端界面的交互设计也是非常重要的，这也是近几年Web前端开发这一行业逐渐被大家重视的原因之一。现在不管是做SEO还是做软件，都在强调一个用户体验，如果前端开发人员不知道怎样的编码设计有利于提升用户体验的话，你就很难体现出你作为一名前端开发人员的价值了。

大到网站整体界面结构的布局，小到一个常规按钮的设计，其实都是非常有讲究的。没有做过前端开发工作的人可能会对这些东西不以为然，其实每一款好的产品都是设计人员呕心沥血的结晶。

学会站在用户的角度上思考问题，努力做好前端界面的用户体验，这是对一个Web前端开发人员的基本要求。既然决定了加入前端开发这一行业，就不要忽视用户体验的重要性，一定要记住这点。

3、前端开发涉及的知识点较为广泛，不断学习、坚持努力，方能更好地提升自己；

除了要会写代码以外，基本的PS技术、界面配色等技能也是必备的。写代码的时候还要会写浏览器兼容性测试代码，特别是现在还有用自适应布局写前端界面的，这些代码都要费很大心思琢磨的。

多欣赏优秀的网站界面设计，多动手实践编码，多思考怎样写出更好更规范的代码，必要的时候还要多学一些JS框架的使用，可以帮助你更方便地进行前端开发工作。

不断学习，坚持努力，方能更好地提升自己个人能力。前端开发是一条漫长的道路，但未来这一职业势必会被越来越多的公司重视，既然决定了进入前端开发这一行，就请坚持下去吧。

来源：代码君（daimajun.com） |  欢迎分享本文，转载请注明出处！