袁程旭的gravatar头像
袁程旭 2015-12-23 22:00:32
零基础学习Web前端,最全面的入门指导!

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

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

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

零基础学习Web前端,最全面的入门指导!

介绍这些是为了让入门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的引用先后顺序造成的。

零基础学习Web前端,最全面的入门指导!

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

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

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

还是那句老话,Web前端开发入门很容易,但想要深入却不容易。我们先来看一张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) |  欢迎分享本文,转载请注明出处!


打赏
最近浏览
子不语103  LV7 2018年9月12日
国学青年 2018年8月10日
暂无贡献等级
fengzf  LV16 2018年4月17日
程序猿全敏  LV29 2018年4月13日
这个少年不太冷丶  LV8 2017年12月4日
weienqing  LV17 2017年11月15日
kyoxue  LV10 2017年11月9日
nsq0006  LV6 2017年11月7日
Lorraine_Luo 2017年3月25日
暂无贡献等级
ytzzz_zuidaima  LV3 2017年3月21日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友