小白自学前端，轻松月入过万哦！

本是古典何须时尚 2023-01-24 02:29 101阅读 0赞

第一、 前端的入门操作

首先是要熟悉前端的基础操作。

前端的基础：JavaScript，HTML，CSS，然后可以深入学习jQuery。

如果你是想

1.专攻网页，那你就学习HTML。

2.专攻层叠样式表，就学习CSS，它可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

然后JS，也就是Javescript的语法、时间、对象、Dom等基础知识也最好掌握一下。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
第二、做项目

我一开始报了一个java的培训班，在毕业前的实习，以及正式工作时也都是从事java开发的工作。大概一年左右，我开始对前端感兴趣，于是我自学了前端的基础知识，并开始找前端这方面的工作，一年的时间薪资已经达到了15k。

所以，新手小白看过来！从0到1，前端开发项目就是这么简单。

说得有些笼统了，怕小白看不懂，简单说一下。

通过Video.js就可以实现比较方便的视频直播功能，之后利用Serverless平台腾讯Cloudbase来储存数据。

由于Cloudbase提供了云函数、云储存和云数据库等，我们只需要自己进行前端的功能实现，后端可以直接交给Cloudbase。

所以能免除很大一部分学习的时间，学习效率非常高。

我当时上的网课给了一个很详尽的资料包，基本上跟着看完学完也就懂差不多了。

新手小白看过来！从0到1，开发项目就是这么简单。

一边学一边做项目赚钱，能拿到10k以上的报酬，

到这个程度，赚钱就不是问题了。

如果你想加工资，那继续往下看。

近几年前端发展迅速，ES6的普及速度更是惊人，所以一定要学习ES6/7（ECMAScript 6入门）。

其次是Node.js，Node.js是服务器端的一个平台，其给前端开发提供了很多实用的工具，是如今前端开发的重要组成部分。

工具推荐：Babel，Webpack，Postcss。

框架推荐：React，Vue.js。

最后，具体说一下前端要学什么吧。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

1.HTML + CSS

前端的入门门槛极低，体现在 HTML 和 CSS 上。运行环境就是浏览器，推荐 Chrome。你需要的只是一个编辑器，直接用 VSCode 吧。

HTML 和 CSS 不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，可以参考 MDN。

我当时是看了一本书 Head First HTML and CSS，比较无脑，虽然浅显易懂但价格比较感人，粗略翻一遍就可以了，不用买。

迅速刷一遍 MDN 上介绍 HTML 和 CSS 的部分，对两者有个大致印象就好，不用死记硬背，短时间记不住的。刷慕课网勉强还行，但以后查资料还是要看 MDN 的，建议一步到位，最好看英文原版的。

接下来就是学习 CSS 了，CSS 要学深入非常难，入门的话会切图就行了。推荐：

《CSS 权威指南（第四版）》。第四版包含了 CSS3 的内容，不需要再看别的了。这书非常枯燥，花几天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，抓住重点快速过一遍，比如盒模型、定位、弹性盒布局等。

以上内容用时 5 天左右，主要是啃《CSS 权威指南（第四版）》。

下面是实践。

学了几天 HTML 和 CSS 了，应该也有点成果了。打开 IFE2015 task1，写个静态页面吧。

写不出来是正常的。可以去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者查 MDN，多尝试，不断踩坑才有进步。

2.JavaScript：

JS我选择跟网课去学习，会更详尽、更容易上手。

如果纯自学，建议阅读“javascript高级程序设计”第三版电子版。

敲出来的代码，思路不清晰时，可以在firebug,chrome里边打个断点跟一下，理理思路，理解代码的逻辑，这样影响才会深刻。

初学者没办法都是这样，也只能这样。但是初期可能稍为慢一点，但一直不会这么慢，也不会想象的那么长，因为随着基本概念的掌握，编码技巧的熟悉，开发工具的熟练，消化视频的速度会越来越快。

由于我当时处于裸辞+脱产状态，所以想直接就业，没时间看这么的多书，所以非常果断，选了一边做项目一边赚钱一边学习的模式！

HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。

HTML重点掌握语义化。区分块级和内联标签。其他查文档就好了。还有就是定义 head 里面一些meta 了解下。

CSS。重点看盒子模型，定位，层级，过渡，动画和 transform。知道原理和规则。大部分工作都是照着设计稿化。掌握上面几个99%还原也不难。接下来重点学习几种常见的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。

JavaScript。重点来了，红宝书看一遍掌握基础。进阶去看《你不知道的 JavaScript》。就这两套足够了，别搞那么多。每个知识点搞懂。ES6基本没啥问题。下面几个问题优搞懂，优先级如下：

this 用法，相关原理

原型/原型链

闭包

面向对象相关

同步异步/回调/promise/async、await

模块化 CommonJS, AMD

二、框架方面

前期要会用，后期要懂原理。

新人先搞 Vue。Vue 算是比较简单的框架了，上手容易。照着官方文档来问题不大。原理方面要提高自己认识。学习怎么看源码。github常去逛逛。

学习框架之前，我其实特别建议，新人先去了解 Babel 和 webpack 不仅仅是使用。一些原理方面的东西工作中也会用到。babel 里面会有教你如何编译代码。webpack教你如和打包文件。自己手写编译器和打包工具也不是特别难。反正对之后看vue、react源码帮助挺大。

搞完 Vue 全家桶，去了解下 React，React hooks 学习下新的理念。再回过头来看Vue。你会发现他们是如此的相似去又不同。

多去实践总结，对整体框架理解会越来越深刻。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221004/d5c1571967a84f9088b91326da11a1e7.png