零基础前端学习路线

零基础前端学习路线

入门基础

开发工具

结论:VSCode

Hbuilder,轻量级,界面淡黄色和绿色结合比较护眼,但是插件较少,格式化代码以及快捷键用着不是特别顺手。VSCode 的生态非常好,基于 Web 技术构建的编辑器同样可以使用 Web 技术开发插件,而 Web 开发人员的数量非常庞大。且由于其轻量跨平台的特性,受到很多开发者的喜爱。

个人想法,其实真没必要对于编辑器过于纠结,毕竟只是一个工具。

HTML

学习资料:绿叶学习网 HTML入门教程 以及 《零基础入门学习Web开发》(HTML5&CSS3)(小甲鱼)

HTML的入门知识可以在 绿叶学习网 HTML入门教程 上通读一遍,保证对于html元素标签有一个大概的认识。
不用太刻意去记,这些元素都会在今后的实践中不断加深印象,刻意去背消耗过多的时间并且挫伤积极性,但是阅读的同时自己跟着教程在编辑器里敲一下代码,既能加深记忆,又可以从中获得成就感。

HTML5先学习一下语义化标签,然后了解存储方式的区别,canvas和音视频可以留到之后有需要再深入学习。

CSS

学习资料:绿叶学习网 CSS入门教程 以及 绿叶学习网 CSS3入门教程

CSS的入门知识也可以在 绿叶学习网 CSS入门教程 以及 绿叶学习网 CSS3入门教程 上通读一遍,保证对于CSS样式有一个大概的认识,也是不用刻意去记,道理同上。

静态页面

学习步骤:freeCodeCamp => pink老师的品优购电商项目

freeCodeCamp 可以加深HTML和CSS的记忆,相当于对于之前的学习的一个阶段性复习,个人的学习建议是学习响应式WEB设计(除响应式 Web 设计原则)的内容。

个人尝试去做的静态页面还有pink老师的品优购电商项目,基本完成这个页面就可以进行JavaScript的学习

JavaScript

学习步骤:绿叶学习网 JavaScript入门教程 => ECMAScript 6 入门教程 —- 阮一峰 =>《JavaScript高级程序设计》第四版

结论放在最前,先学习绿叶学习网的JavaScript入门教程,再学习ES6几个常用的新特性,就可以继续之后框架板块的学习。

对于ES6没有详细阅读的部分以及JavaScript红宝书,可以在之后有一定了解再深入学习。

JavaScript绝对是前端的灵魂所在,是前端工程师的基础所在,值得在职业生涯中一直保持深入学习。

假如你有其他编程语言的基础,那么绿叶学习网只是作为你对于JavaScript这门语言的引路人,简单过一遍就能对于这个相对直观的编程语言有一个基本了解。

假如你之前没有其他编程语言基础,那么请伴随着百度搜索仔细阅读咀嚼自己不能理解的部分,打好JavaScript的基础对于今后的学习有着很大的帮助。

ES6是一个很庞大的板块,可以不用全篇精读,主要了解一下,变量的解构赋值,变量声明,箭头函数

《JavaScript高级程序设计》第四版,这是最新最权威的学习书籍,但是由于其厚重性,并不建议一上手就阅读它,很容易被劝退。但是不可否认,它作为最全面最官方的解读,能让你对于JavaScript这门语言获得最精准的理解。这里建议是作为字典类辅助书籍,有空的时候可以翻翻深入巩固自己的JavaScript基础,没空的时候先不做强制阅读。在今后的学习中,如果遇到在网上无法求解的疑惑的时候可以尝试在其中寻找答案。

三大主流框架

以下是三大主流框架,个人推荐的选择是VUE,所以对于VUE的学习路径会相对详细些,关于每个框架的优缺点网上测评的有很多,感兴趣的朋友可以去搜搜看。

一些拙见:

  • Angular个人是不建议初学者上手学习,使用的人数基数小,不容易找到实习;
  • REACT适合JavaScript基础比较扎实的人,由于生态很好,构建项目技术选型更像一个开放题,遇到问题也有很多的解决方案,很多大厂都在使用。
  • VUE在中国受众更广,门槛低,由于开发者尤雨溪是中国人,因此中文版文档阅读起来更为轻松,也有大厂在使用,比如美团和阿里。

总而言之,VUE更容易,REACT相对自由度更高,效果更好。

VUE

学习资料:4个小时带你快速入门vue => 2019年最全最新Vue、Vue.js教程,从入门到精通 => VUE源码阅读

这里搬运一下尤大大的 官方文档 和 Github仓库 ,阅读文档的必要性还是很大的,至少我博客中vue-router很大程度都是阅读官方文档总结出来的。

第一个视频能够带你入门VUE,几个小demo自己动手试试能进一步加深印象。
第二个视频则是我认为最佳的VUE教程,由浅入深的讲解VUE,至于视频后期的项目,可以辩证选择,不过此时一定要做项目实践巩固一下这段时间VUE框架的学习。

REACT

学习资料:React学习路线—-技术胖

这个初学者快速上手,大家有兴趣也可以批判借鉴。最全的react视频【黑马程序员】

不过,技术胖的实战项目更多立足于UI本身,而不是立足于处理数据交互,因此推荐神三元的掘金小册。
React Hooks 与 Immutable 数据流实战

Angular

没找到,嘿嘿嘿~
假如有朋友有很好的学习资源欢迎分享!

精耕深研

学习了以上内容,就可以开始主动刷一下笔试题、面试题,去尝试投递实习。

小程序

学习资料:微信开放文档

假如有VUE的基础,学习小程序还是很容易上手的,这里推荐是直接阅读微信官方文档API就可以实现构建一个小程序。
不过还是搬运了VUE教程导师的小程序教程。
2019年7月最新小程序开发教程

Node

JavaScript的后端编程,中文版官方文档写得不太容易阅读,效果一般,并且自身没有实践,掌握十分不牢固。
基础系列:轻松学node.js系列(实战系列前篇,全18讲)
偏实战系列:Node.JS-黑马程序员

jQuery

学习步骤:绿叶学习网 JavaScript入门教程 =>jQuery实现2048

jQuery感觉现在用的相对较少,主要原因在于原生JS能够渐渐取代jQuery的不可替代性,其次直接DOM代码复用性不强,难以维护。可以选择不学,也可以选择了解一下。

不过多掌握一门技术并不是一件吃亏的事,能够让自己更深入了解DOM以及不同技术之间的优缺点,更何况据说百度的老项目还是jQuery写的,没有重写嘛。

TypeScript

这里分享技术胖的视频。
TypeScript从入门到精通视频教程-2020年新版

还有一个零基础的TypeScript教程。
黑马程序员最新TypeScript入门视频

Electron

Electron 是一个使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架。

前端工程化

Git

webpack

© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论