两个月如何入门Web前端开发(个人经历)

Web前端开发一直被网上称为入门最简单,学习最容易的开发类型。但是由于Node.js的出现,前后端分离的流行,前端的工作越来越多,学习成本实际上也不低。

我之前上学的时候一直用C++和Python,对于前端没有任何了解,但是因为工作需要,开始做前端的工作,因此开始了0基础学习前端的日子。

下面把我从零开始学习前端的经历和分享给大家,包括书籍推荐,学习方法,学习网站等等。

 

1. HTML

HTML是网站的基础,也是前端必须首先学习的内容。学习难度较简单。国内目前比较喜欢在W3school网站学习。

W3school网站 https://www.w3school.com.cn

注意除了基本的HTML,也要学习HTML5。

 

 

2. CSS

CSS是层叠样式表,简单说来就是给HTML增加格式信息的。这个学起来也很简单,可以在W3school网站学习。

虽然学起来简单,但是后期组合使用并不简单,但是作为初学者我们暂时不需要考虑这个问题。

 

3. JavaScript

比起上面那些干巴巴的标签和样式,我更喜欢编程语言,因为更有逻辑性。Javascript就是前端的编程语言。

学习js,网络上最推荐的书籍是《Javascript高级程序设计》,又被称为红宝书。

两个月 如何从零入门Web前端开发(个人经历)_javascript

这本书非常厚,写的也很清晰比较适合入门,但是如果没有任何编程语言的基础,可能看着稍微有点吃力。

另外由于前端发展速度太快,这本书的很多内容都已经过时了,比如:

1. 不同浏览器对于标准的支持差异: 浏览器每一个版本都会对特性支持发生变化,当时不支持的很多特性现在都支持了,而书中列出的浏览器版本,到现在已经基本无人使用。书中用大量篇幅描述如何编程来消除浏览器差异,这些基本不用阅读。

2. 这本书发布时ES5刚发布不久,但现在ES6都已经发布很久了,书中的很多编程方式和技巧现在看来已经过时。

但是ES5的语法还是要认真学习的,这本书还是要认真阅读,如果遇到明显过时的地方可以跳过。

 

3.5 Javascript语法实践

学习一门新的语言,只看语法不实际编写程序是不行的。书上没有合适的作业题目,我当时也不知道如何找一些合适的项目来练习。正好我发现LeetCode上面的题目可以用JavaScript提交代码,因此就用力扣来上的题目来熟悉js语法了。题目建议从简单题开始做。毕竟我们是为了熟悉语法,不是为了学习算法。

LeetCode官网

https://leetcode-cn.com

我做过的题目:(超级简单的,只是为了熟悉语法)


4. ECMAScript 6

ES6是Javascript标准的新版本。ES6不仅代表2015年发布的ES2015本身,还代表每年更新一版的后续版本。

ES6的很多特性在目前的前端编程中很常见,因此必须要认真学习。

推荐书籍:

《ES6标准入门》

两个月 如何从零入门Web前端开发(个人经历)_node.js_02

这本书有免费开源版: https://es6.ruanyifeng.com/

《深入理解ES6》

两个月 如何从零入门Web前端开发(个人经历)_前端_03

注意这些书籍都是建立在已经学过ES5的基础上,因此上面的必须先学上面的红宝书。

也有些同学会推荐MDN网站,我觉得这个网站内容更像字典,对初学者不友好,仅仅适合作为查询使用。

MDN网站 https://developer.mozilla.org/zh-CN/

 

5. 前端框架

前端目前流行的三大框架 React,Angular,Vue。目前国内似乎Vue用的比较多,我也选择了Vue。

Vue框架看官方文档就好,有中文文档,写的也比较清晰。

Vue.js官网 https://cn.vuejs.org

两个月 如何从零入门Web前端开发(个人经历)_html5_04

 

6.前端组件库

有了组件库,我们可以直接使用设计好的组件,不需要自己再去额外设计。

前端组件我接触过的有:

Element ui

https://element.eleme.cn/#/zh-CN

Vant ui(移动端)

https://youzan.github.io/vant/mobile.html#/zh-CN

这个可以根据兴趣和实际的项目需要来学习。

 

然后就可以接触简单的项目,从项目中再补齐缺失的知识啦。

这里推荐一个可以拿来学习的项目:

手摸手,带你用vue撸后台 系列


https://github.com/PanJiaChen/vue-element-admin

 

其他知识:

下面的内容很重要,但是如果项目要求紧急,需要尽快承担开发工作,那么下面这些不如上面的知识更重要,可以等到有空闲时间再补齐。

1. 计算机网络基础

毕竟Web也是基于计算机网络协议的,了解计算机网络对于学习Web前端也有很大的帮助。由于我以前学过,因此对我来说不算重点。

推荐我看过的《计算机网络 自顶向下方法》,也比较适合初学者阅读。

两个月 如何从零入门Web前端开发(个人经历)_html5_05

Node.js Babel Webpack 等等

我们的Vue脚手架是基于Node.js的,脚手架也集成了像Babel Webpack等等工具。这些知识也非常重要,但是你即使暂时不懂,也可以进行开发。

当然,如果想作为一个合格的前端,是必须要补齐的,而且仅仅这些远远不够。

 

这些是我在学习前端两个月的一些经验,我的学习能力不算强,学习速度也不算快,说不上什么正面经验,但也希望会对同学们有帮助。

本文为完全原创。