新手如何入门学习前端？

谁借莪１个温暖的怀抱￠ 2022-10-22 13:51 249阅读 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 条评论，249人围观）

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

相关阅读

相关 CSS的新手入门学习指南

目录 CSS简介发展历程特点 -------------------- CSS简介层叠样式表(英文全称：Cascading Style Sheets)是一

比眉伴天荒/ 2024年03月24日 11:20/ 0 赞/ 69 阅读

相关新手入门Linux怎么学才好,Linux新手入门怎么学?如何学习好Linux?

因为自身情况的问题，很多朋友可能对自己的工作不是很满意，因此都看中了Linux一片大好的趋势，想要转行学习Linux技术，但是却又对此不太了解，于是都非常好奇Linux如何学习

╰半橙微兮°/ 2023年01月21日 13:29/ 0 赞/ 38 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关前端学习入门书籍

![Center][] 目前已有的前端书籍，还在学习中。作为一个自学过来的人，谈一谈自己的自学经历。本文适合非计算机专业，无编程基础，只会普通电脑操作的人员

布满荆棘的人生/ 2022年07月20日 12:27/ 0 赞/ 225 阅读

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

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

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

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

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

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