新手如何入门学习前端？

谁借莪１个温暖的怀抱￠ 2022-10-22 13:51 167阅读 0赞

Web前端入门的自学路线

新手入门前端，需要学习的基础内容有很多，如下。

一、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就相对轻量很多。个人总结一下：用VS Code 的人越来越多，用 WebStorm 的人越来越少。具体可以看：《第一次使用VS Code时你应该知道的一切配置》

十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。

推荐的技术博客

阮一峰

张鑫旭

推荐的书籍

《你不知道的JavaScript》

上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。

《网络是怎样连接的》

程序员面试的时候，经常会被问的一个问题是：“在浏览器的地址栏输入url，按下回车后，发生了什么？”

为了清楚这个问题，看上面这本书，足够了。如果你想入门计算机网络，这本书也是必读的。评价非常高。

关于这个问题，也可以看下面这篇文章：浏览器输入 URL 后发生了什么？

《CSS世界》

关于 CSS 的书籍，首先推荐这本书，我身边的大佬们都说这本书好。虽然我不是大牛，但我也觉得这本书很好。

如果 js 熟练，说明你是有技术深度的前端；如果 css 熟练，说明你是有经验的前端。如果大家对于学习前端有任何问题，学习方法，学习路线，如何学习有效率的问题，可以随时来咨询我，或者缺少系统学习资料的，我做这行年头比较久，自认为还是比较有经验的，可以帮助大家提出建设性建议，603985993这是我的web前端交流3000人裙，有任何问题可以随时来咨询我。

推荐的链接

前端导航：https://www.cnblogs.com/qianguyihao/p/10701923.html

这个导航里列出了很多常见网站、博客、工具等，整体来看比较权威。

学是一方面，也是最主要的方面；但还有一个作用，比如，“这个前端框架你都不知道啊”、“这个前端大牛你都没听说过啊” 。此时，这份清单就能起到作用了。如果能把清单里列出的内容都了解下，逼格也会高很多。

MDN 官方文档：https://developer.mozilla.org/zh-CN/docs/Web

如果你想查看前端的 api 文档，请首先去 MDN上看。很官方，很正规。

不要去什么 w3school 上看，可能有很多错误。

前端资讯订阅源

国内的很多技术博客，都是比较粗浅的二手知识，真正的大佬，看不上这些东西。

要了解最新的的前端技术趋势、前端资讯，还得看国外的网站。下面这两个前端资讯的网站，极力推荐。它们都可以通过邮件的形式订阅，我认为是前端开发者必须要订阅的：

Daily JS：https://medium.com/dailyjs - medium 上的博客。

JavaScript Weekly：https://javascriptweekly.com/ - 聚合类的技术周刊。

我还给大家整理了很多前端方面的干货资料，有需要的小伙伴，前面有获取方式，领取资料！

发表评论取消回复

表情：

评论列表（有 0 条评论，167人围观）

还没有评论，来说两句吧...

相关阅读

相关大数据学习规划（新手入门）

前言：一、背景介绍二、大数据介绍正文：一、大数据相关的工作介绍二、大数据工程师的技能要求三、大数据学习规划四、持续学习资源推...

川长思鸟来/ 2024年04月17日 06:04/ 0 赞/ 15 阅读

相关前端新手教程！如何快速入门web前端

最近收到一些的私信问我，自己想要学习前端，该如何学习？学习到什么程度才可以工作？我进入这个行业已经十一年了，面试过不少人，在企业里也带过不少新人和应届生。所以这篇文章我想分享一

一时失言乱红尘/ 2023年01月12日 10:17/ 0 赞/ 96 阅读

相关前端新手入门必读！前端开发线路图分享

很多人都想学编程。但是苦于没有具体的步骤和指导。比如想找份前端开发的工作，却不知道应该先学习什么再学习什么，也不知道该选择什么样的工具。因为经常被人问到类似的问题，全栈开发者K

蔚落/ 2022年12月23日 14:29/ 0 赞/ 143 阅读

相关新手入门web前端, 我该去哪里找学习资料啊?

大家好，我是为前端娱乐圈操碎了心的小迷妹，正宗前端开发一枚，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的

客官°小女子只卖身不卖艺/ 2022年11月29日 11:46/ 0 赞/ 123 阅读

相关新手如何入门学习前端？

Web前端入门的自学路线新手入门前端，需要学习的基础内容有很多，如下。一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站（例如京东、小

谁借莪１个温暖的怀抱￠/ 2022年10月22日 13:51/ 0 赞/ 168 阅读

相关 C++新手入门学习教程

C++学习教程一，学习前的准备工作安装Visual Studio开发环境创建一个C++项目创建一个C++文件

柔情只为你懂/ 2022年10月16日 13:22/ 0 赞/ 199 阅读

相关 Hadoop快速入门：新手学习必备文档

[![Center][]][Center 1] [Hadoop快速入门：新手学习必备文档][Center 1] Hadoop是一个由Apache基金会所开发的

我会带着你远行/ 2022年08月07日 04:51/ 0 赞/ 136 阅读

相关新手如何学习Java——Java学习路线图

怎么学习Java，这是很多新手经常会问我的问题，现在我简单描述下一个Java初学者到就业要学到的一些东西：首先要明白Java体系设计到得三个方面：J2SE,J2EE,J2M

缺乏、安全感/ 2022年05月26日 09:09/ 0 赞/ 156 阅读

相关新手学习Web前端开发大纲

Web前端几年是越来越火热了，让更多的人看到了Web前端的高薪资，更看到了Web前端行业的发展前景，所以纷纷投入到学习Web前端技术学习中来，那么有没有一份适合新手小白学习的W

╰+攻爆jí腚メ/ 2022年01月05日 04:51/ 0 赞/ 256 阅读

相关 Web前端新手经典学习路线

Web的中文就是网络的意思，网站。而网站分为前端和后端，通俗上说前端就是做网页，界面，特效，交互。打开一个网页，我们眼睛可以看到的东西都可以说是前端，这个就是前端需要做的。

Dear 丶/ 2021年12月03日 10:43/ 0 赞/ 373 阅读