从小白到大神的前端学习路线

大家经常跟我要一些 web前端的学习路线和一些vue、angular、react教程,我自己很懒,自己没整理过系统的教程,因为网上也多的是,有时间我会普及一些入门和提升建议,思想提升了,路线明确了自然就好了,于是就整理了下这篇学习路线文章,干货福利内容 在文末↓
对于很多人来说,问题的关键在于没有找到正确的发展方向,他不知道自己该学什么?前端更是体系庞杂,很难从一而终,于是特意抽出一部分时间来总结一下路线,帮助大家。


一、HTML、CSS基础、JavaScript语法基础。学完基础后,可以仿照电商网站(例如京东、小米)做首页的布局。
二、JavaScript语法进阶。包括:作用域和闭包、this和对象原型等。相信我,JS语法,永远是面试中最重要的部分。
三、jQuery、Ajax等。jQuery没有过时,它仍然是前端基础的一部分。
四、ES6语法。这部分属于JS新增的语法,面试必问。其中,关于promise、async等内容要尤其关注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面试时,有的公司不一定会问canvas,靠运气。如果时间不够,这部分的内容可以先不学。但如果你会,绝对属于加分项。
七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
八、前端框架:Vue.js和React。这两个框架至少要会一个。入门时,建议先学Vue.js,上手相对容易。但无论如何,同时掌握 Vue 和 React 才是合格的前端同学。
九、Node.js。属于加分项,如果时间不够,可以先不学,但至少要知道 node 环境的配置。
十、自动化工具:构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意,Sass 比 Less 用得多,gulp 比 grunt 用得多。
十一、前端综合:HTTP协议、跨域通信、安全问题(CSRF、XSS)、浏览器渲染机制、异步和单线程、页面性能优化、防抖动(Debouncing)和节流阀(Throtting)、lazyload、前端错误监控、虚拟DOM等。
十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外,前端常见的IDE有两个:WebStorm 和 Visual Studio Code。WebStorm什么都好,可就是太卡顿;VS Code就相对轻量很多。个人总结一下:新手一般用 WebStorm,入门之后,用 VS Code 的人更多。
十三、TypeScript(简称TS)。ES 是 JS 的标准,TS 是 JS 的超集。TS属于进阶内容,建议把上面的基础掌握之后,再学TS。
十四, 前端框架知识 vue react angular,三选一,必须要掌握熟,其余两个可以了解,但取决于你面试的公司

需要前端资料的可以加前端学习资料群:937268047,免费分享领取

原文地址:https://blog.51cto.com/12864747/2419478

时间: 2024-10-09 18:20:23

从小白到大神的前端学习路线的相关文章

【同行说技术】Android程序员从小白到大神必读资料汇总(四)

在文章<Android程序员从小白到大神必读资料汇总(一)和(三)>里面介绍了基础学习资料和一点点的进阶资料,今天小编收集了5篇带有实例干货的资料,赶紧来看看吧!另外,喜欢写博客的博主可以申请加工程师博主交流群:391519124,分享你的博文,和大牛们一起交流技术 ~ 一.Android 内存泄漏总结 内存管理的目的就是让我们在开发中怎么有效的避免我们的应用出现内存泄漏的问题,本篇详细总结了如何防止内存泄露,满满的干货 二.理解Android安全机制 从Android系统架构着手,分析And

【同行说技术】iOS程序员从小白到大神必读资料汇总

在文章<iOS程序员从小白到大神必读资料汇总(一)>里面介绍了很多iOS入门学习的资料,今天小编就发几篇技术进阶的文章,快来看看吧! 一.iOS后台模式开发指南 这个教程会教你在什么时候怎么去用最常用的一些后台操作 二.iOS核心高级动画技巧 这是一篇在github上很受欢迎的对iOS开发高级动画技巧的翻译文,非常值得学习 三.iOS开发总结之代码规范 这篇文章整理了比较好的代码规范,对程序员的代码风格的塑造很有帮助! 四.Top 100 的 iOS app 都用到了哪些库 文章作者分析了美国

大神的算法学习之路

http://zh.lucida.me/ 大神的算法学习之路,布布扣,bubuko.com

【同行说技术】Android从小白到大神必读资料汇总(二)

在文章<Android程序员从小白到大神必读资料汇总(一)>里面介绍了几篇Android入门和提升效率的技术资料,今天小编收集了5篇进阶的资料,赶紧来看看吧!另外,欢迎大家加入工程师博主交流群:391519124,交流博客经验和技术 一.Android开发相见恨晚的方法和接口 Android开发中,有哪些让你觉得相见恨晚的方法.类或接口? 二.Android 多渠道打包原理和使用 学会安卓 APP 多渠道打包的技巧,让你的APP开发更高效 三.Google Java Style:Google的

好程序员web前端学习路线分享纯css绘制各种图形

好程序员web前端学习路线分享纯css绘制各种图形,很多时候,UI设计师为了页面的好看,都会采用很多图形去做装饰,比如三角形.矩形.圆形.椭圆形.对话泡泡等,让整个页面看起来不会太单调.作为前端开发更多的时候,会采用比较快捷的实现方式就是用图片或者背景图来实现页面效果,但是有一个很大的问题就是图片可能会失真,有些情况也会发现用图片或者背景图去实现效果灵活度也不够.那么如果不用图片,用纯CSS也是可以绘制各种图形的,很多人都以为css只能写一些简单的图形,比如长方形.正方形.圆形.椭圆,其实不然,

好程序员web前端学习路线分享函数基础

好程序员web前端学习路线分享函数基础,在这之前先来讲一下函数是什么? 函数就一个代码块,可以是一个完全独立与其它内容没有关系的代码块,也可以是一个与外界环境紧密相关的代码块.函数是一个拥有输入和输出的独立代码块.函数是程序中最重要的组成部分. 函数,是一种封装(将一些语句,封装到函数里面).通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行. 在javascript里,函数即对象,程序可以随意操控它们.函数可以嵌套在其他函数中定义,这样它们就可以访问它们被定义时所处的作用域中的

好程序员web前端学习路线之在JavaScript中使用getters和setter

好程序员web前端学习路线之在JavaScript中使用getters和setter,大多数面向对象的编程语言都存在getter和setter,包括JavaScript.它们是代码构造,可帮助开发人员以安全的方式访问对象的属性.使用getter,您可以从外部代码访问("获取")属性的值,而setter允许您更改("设置")它们的值.我们将向您展示如何在JavaScript中创建getter和setter. JavaScript对象可以具有多个属性和存储的静态数据和动

好程序员web前端学习路线分享jQuery学习技巧

好程序员web前端学习路线分享jQuery学习技巧,jQuery在web前端学习中是一个必不可少的内容,很多小伙伴都在学习这阶段的时候遇到问题,今天我们就来聊一下jQuery,让我们一起来看一看吧! 1.关于页面元素的引用 通过jquery的$引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法. 2.jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方

好程序员web前端学习路线分享web测试之Js中的函数

好程序员web前端学习路线分享web测试之Js中的函数,在JS中,一般使用函数其实就是为了封装某些操作,或者把编写的程序进行模块化的操作. 一.函数的声明方式 1.普通的函数声明 function box(num1, num2) { return num1+ num2; } 2.使用变量初始化函数 var box= function(num1, num2) { return num1 + num2; }; 3.使用Function构造函数 var box= new Function('num1'