web前端工程师学习路线指南

沿着一条乡间小路,走着走着,分叉越来越多,选择也越来越多,迷路成为了必然。

对于编程初学者来说,甚至“这条路”在哪都找不到。

今天,W3Cschool新手村村长将扮演指路人的角色,讲解如何零基础入门前端,学习前端,不再迷茫。

1

入门

有人说:只要有恒心,铁杵磨成针。这不对,学习重在兴趣,而不在恒心。当你通宵达旦的玩游戏,捧着自己喜爱的名著谈天说地时,不是因为有恒心,而是因为兴趣。只有不感兴趣的东西,才需要恒心的妥协。

所以请抛弃恒心,拥抱兴趣。

一个好的启蒙老师,不需要教会你任何本领,却能培养你对一件事的兴趣和良好的学习习惯。

对于广大的前端学员来说,了解这个领域和培养学习兴趣尤为重要,这意味着你能在前端这条路走多远。

怎么培养兴趣?

成就感;

即学即用;

那么,《Head First HTML与CSS》就成了最适合零基础的前端学习书籍。

从书的封面就可以看出,这是一本“重视大脑的学习指南”,看完本书,你对什么是HTML、CSS就有了大概的一个了解,并且可以编写一些简单的页面了。

这本书有如下的几个特点:

任务型教学,先发布一个任务,再教你如何完成它;

插画多,图文结合,虽然有700多的页数,但一小时翻50页完全不是问题,你可以像看小说一样,看它。

没有难懂的专业名词,一旦出现,就会花一整页,甚至多页来解释它;

它能传递给你学习的方法,避免以后走弯路;

这本书是入门的绝佳读物,但不是必须,你也可以跳过它,但村长认为还是读读它。

2

HTML&CSS

如果你看完了《Head First HTML与CSS》,其实你已经学会了这两个前端的基础知识。你只需要丰富一下“词汇量”,让自己能做出任何的网页就可以了。

什么是HTML和CSS?

一个画家要画一只乌龟,得先画出轮廓,再完善细节,最后涂上颜色,HTML和CSS干的也是这么一件事。

因为HTML和CSS非常简单,村长并不是很建议初学者看视频,如果你觉得学习有困难,可直接看《Head Frist HTML与CSS》即可。简单的事,不要花太长的时间。

丰富自己的词汇量,最简单快捷的方式,是直接阅读W3Cschool的html和css文档。

html地址:

https://www.w3cschool.cn/html/

css地址:

https://www.w3cschool.cn/css/

当然,你还需要了解一下他们的最新版本,html5和css3.

html地址:

https://www.w3cschool.cn/html5/

css地址:

https://www.w3cschool.cn/css3/

学完html和css,你就可以独立制作任何的网页了,没错!在本地写个淘宝出来,完全不是问题。

如果你想巩固下学习成果,可以拿个实战项目,练习一下:

https://www.w3cschool.cn/codecamp/list?pename=html5_and_css_camp

3

JavaScript

与html和css不同,JavaScript是门真正的编程语言,所以学起来难度就大。

什么是JavaScript?

还是刚才画家画乌龟的那个例子,这个画家人们都叫他“神笔马良”,他画了只乌龟,并且给它涂上了颜色。

这时候,马良将这只乌龟“拉”了出来,成为了一只真正的乌龟,它能走路,也能吃东西。

再举个简单的例子,有时候登录网站时,它会提示:

这个就是使用JavaScript写的,html和css是不能动的,只有JavaScript可以。

JavaScript作为一门编程语言,非常强大,它有很多事可以做,除了运用到前端领域,它还可以做游戏、应用等等,用途很广泛。

由于JavaScript有些难度,如果你习惯了学习html和css的方式,可以直接阅读文档:

https://www.w3cschool.cn/javascript/

或者结合W3Cschool微课学习:

https://www.w3cschool.cn/minicourse/play/jscourse

(使用文档和微课的学习方式,最大的好处就是入门“快”)

如果你喜欢看书,那么推荐看《JavaScript高级程序设计》,这是一本对初学者很友好的书。

有些程序员会推荐《JavaScript权威指南》,俗称犀牛书,村长并不推荐。因为它属于中级读物,对初学者不友好,但作为经典的JavaScript书籍,还是值得考虑的。

如果以上学习方式,你都不喜欢,或者太难理解JavaScript了,也可以观看视频学习:

https://www.w3cschool.cn/javascript_txy/

当你将HTML、CSS、JavaScript(前端三驾马车)学完后,那么恭喜你,你已经完成了前端学习的课程。

理论上,你已经能胜任前端的工作了!

4

前端框架

实际上,如果你只掌握了三驾马车,那么没有公司会愿意要你,因为实际上你的工作效率会极低。当然,仅仅是效率上的问题,而不是做不出来。

接下来,学习前端框架迫在眉睫。

什么是前端框架?

如果只会html、css和javascript,写一个网站时,你需要一行代码,一行代码的写,假如写几个简单的页面,自然不在话下。

可是如果让你写个像淘宝的网站呢?也许这个量是几十万行以上的代码。

这时为了提高效率,你将别人已经写好的淘宝,拿了过来,放在了自己的网站上,然后稍微修改下代码,让它看起来和老板的预期一样。

于是另外一个淘宝诞生了,你只花了一点点时间就完成了它。

框架,大概就是这么个意思。

框架可以说是一种工具,学起来很简单,就像学习word、excel一样简单,框架是必学项。

框架有很多,我们推荐你学习Bootstrap。

这个框架好用,重要的是简单,适合刚学完基础课程的你。

推荐课程:

https://www.w3cschool.cn/minicourse/play/bootstrap_txy

当学习完Bootstrap后,恭喜你,你可以高效的完成工作,更加符合企业的用人需求了。

前端是一个随时间变化很大的职业,新框架的运用,也成了很多企业用人的硬性要求。

最具代表性的就是三剑客:React.js、Vue.js和Angular。

你不必完全掌握这三个,你可以先学会其中一个,后续根据工作需要,再掌握其余两个,甚至是不学习它们。

https://www.w3cschool.cn/minicourse/play/varthree

5

Git-管理工具

Git对前端写程序没有多大影响,但它同样十分重要。

什么是Git?

这个一个版本控制工具,可以很好的管理代码,并且共享给其他同事。

Git更像是技术界的excel、word,它只是一个工具,方便管理你的代码。一些稍成型的公司,都可能会使用它作为管理工具,

因此,你最好学会它。

推荐课程:

https://www.w3cschool.cn/git/

https://www.w3cschool.cn/minicourse/play/git_mblx

5

后记

自此,你已经具备了一个前端工程师的基本素质。前端的学习过程,是一个由“难”逐渐“简单”,再由“简单”变“难”的过程。

前半段是入门的过程

后半段是成为大牛的过程

总之学前端只有八个字:明确方向,兴趣主导!

仅此而已。

备注:

回复“html”,公众号就会回复html相关的教程。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181114B1J3SW00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券