想学前端却又无从下手，学好这一招，从入门到精通！

最新推荐文章于 2024-08-04 12:47:40 发布

网安攻城狮-小李

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量1k

点赞数 54

分类专栏：经验分享文章标签：编程语言前端开发

本文链接：https://blog.csdn.net/wuli1024/article/details/118360103

版权

经验分享专栏收录该内容

14 篇文章 4 订阅

订阅专栏

我之前有收到私信，有小伙伴问我该如何学习前端？说自己在自学前端的路上很迷茫，不知道该怎么开始？针对这问题我给出一些建议，希望对小伙伴有帮助。

前端开发现在也挺火，岗位机会也非常多，发展也非常快，薪资待遇也非常可以，那我们了解一下web前端开发能做什么：

学完web前端之后你可以开发网页，做h5动画，做手机端app，可以做自己的博客网站，可以做微信公众号开发，可以开发小程序，可以结合nw.js做电脑客户端软件：比如微信的pc版，钉钉的pc版都是web前端来做的。

在这里插入图片描述

一、梳理知识体系

梳理清楚知识体系框架学习前端，不管是入门还是进阶，一定都要有知识体系建设的想法。就算是刚开始学，也一定要有这样的意识。

前面说过，因为前端知识点多而分散，所以如果不能构建起自己对于前端的知识体系框架的认识，很容易就会不知所措，没了方向。现在网上关于前端知识体系的脑图很多，但是往往过于复杂，不适合初学者。

作为一个初学者，每个人都应该自己做一份自己的前端知识体系脑图，先有一个最基本的框架，然后在学习的过程中慢慢完善。这样通过和别人脑图的对比，你也很容易知道还有那方面的知识是需要补充完善的。

这里我给出一个简单的模版，其实作为一个刚入门的前端新人，有这样的大框架已经完全够用了，不用追求大而全，学习的畏惧心理也会小很多，随着你学习的深入，这个脑图也会慢慢丰满起来。
在这里插入图片描述

二、开始学习

HTML，CSS，Javascript这三样真的很重要，真的很重要，真的很重要，刚开始的时候你压根不用去管那些花里胡哨的框架，一定要把基础打好。框架再怎么更新迭代，最基础的东西还是这三样，只要你能掌握好基础，就等于拿到了打开前端世界的钥匙。

我们得学会利用网上是免费资源，网上有很多免费教程,主要推荐两个：

菜鸟教程： https://www.runoob.com/

在这里插入图片描述

W3school： https://www.w3school.com.cn/

在这里插入图片描述

你可以很快的在网站上学会HTML，CSS，Javascript的基础知识，还会有一些实例，可以练习实例进一步巩固基础知识

对于自学最直接的方式就是看视频学习，可以是在线视频，比如慕课网，麦子学院，极客学院，北风网，百度前端学院都有从入门到精通的前端课程，也可以从B站上找，选一个有整体规划的，相对来讲更系统完整的课程，所讲的内容涉及知识要是当前主流的。

视频找好了之后，如果你不想中途放弃，或者，浪费太多时间又没效果的话。就找一个引路人，引路人当然是能力越强越好，找引路人的目的在于为你制定学习计划，把控学习质量，及时纠正错误的学习方向，教你正确的学习方式。

等自己学会了一定的基础知识之后，可以是在模仿网站写静态网页，在这里推荐编辑器：VSCode 建议初学者可以关闭代码提示。
在这里插入图片描述

三、书籍推荐

无论是学什么都是看视频入门最快，深入的话要看书。我这边整理一些：

1、HTML&CSS

《Head First HTML与CSS》

史上最轻松入门书，全彩印刷，对于那些复杂的大部头技术书籍不同，head first的书对于初学者来说很友好，让你在探求知识的过程中学到东西。

在这里插入图片描述

《HTML5权威指南》

《HTML5 权威指南》是系统学习网页设计的权威参考图书。

本书分为五部分：第一部分介绍学习本书的预备知识和HTML、CSS 和JavaScript 的最新进展；第二部分讨论HTML 元素，并详细说明了HTML5中新增和修改的元素；第三部分阐述CSS，涵盖了所有控制内容样式的CSS 选择器和属性，并辅以大量代码示例和图示；第四部分介绍DOM，剖析如何用JavaScript 操纵HTML 内容；第五部分讲解Ajax、多媒体和canvas 元素等HTML5 高级特性。

本书面向初学者和中等水平Web开发人员，是牢固掌握HTML5、CSS3和JavaScript的必读之作。
在这里插入图片描述

《CSS权威指南》

本书全面阐述了 CSS 的实现方式，深入分析了最新的 CSS 规范；资深CSS专家Eric A.Meyer。利用他独有的睿智和丰富的经验对属性、标记、标记属性和实现做了深入的研究，另外在浏览器支持和设计原则等实际问题上也有独到的见解。你所需要的就是HTML 4.0的知识即可以为网站布局和分页创建简明而且易于维护的脚本，同时兼具桌面系统的美观性和可控性。

可以把它当做字典类书籍，有什么不懂的知识点可以翻一翻。

在这里插入图片描述

–
《CSS揭秘》

作者为我们揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。

《CSS揭秘》是前端工程师、网页开发人员的进阶必备书籍。

在这里插入图片描述

2、JavaScript

《JavaScript高级程序设计》最新版是第四版，本书是前端人员入门必备红宝书，作为JavaScript技术经典名著，《JavaScript高级程序设计》可以说是JavaScript最权威的入门书籍了。

全书从 JavaScript 语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起，深入浅出地探讨了面向对象编程、Ajax 与 Comet 服务器端通信，HTML5 表单、媒体、Canvas（包括WebGL）及 Web Workers、地理定位、跨文档传递消息、客户端存储（包括IndexedDB）等新 API，还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。

这本书涵盖了大部分的基础知识，内容循序渐进，基础而且全面，一定要反复阅读。

在这里插入图片描述

《DOM编程艺术》

本书将这些概念贯穿在书中的所有代码示例中，以便呈现用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本，最后结合所讲述的内容创建了一个实际的网站。

这本书以一个网页作为案例，可以根据书里的代码敲一遍，会有很大收获。

在这里插入图片描述

《你不知道的JavaScript》

很多人对 JavaScript 这门语言的印象都是简单易学，很容易上手。

“你不知道的JavaScript”系列就是要让不求甚解的JavaScript开发者迎难而上，深入语言内部，弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题：“作用域和闭包”以及“this和对象原型”。掌握了这些知识之后，无论什么技术、框架和流行词语，你都能轻松理解。一共分为上中下三卷。
在这里插入图片描述

3、其他

《图解HTTP》

读者可通过本书快速了解并掌握HTTP协议的基础，前端工程师分析抓包数据，后端工程师实现REST API、实现自己的HTTP服务器等过程中所需的HTTP相关知识点本书均有介绍。

本书适合Web开发工程师，以及对HTTP协议感兴趣的各层次读者。

在这里插入图片描述

《深入浅出Node.js》

从不同的视角介绍了 Node 内在的特点和结构。由首章Node介绍为索引，涉及Node的各个方面。本书适合想深入了解 Node的人员阅读，是进阶必备书籍。

在这里插入图片描述

《深入浅出Vue.js》

本书从源码层面分析了Vue.js。首先，简要介绍了Vue.js；然后详细讲解了其内部核心技术“变化侦测”，这里带领大家从0到1实现一个简单的“变化侦测”系统；接着详细介绍了虚拟DOM技术，其中包括虚拟DOM的原理及其patching算法；紧接着详细讨论了模板编译技术，其中包括模板解析器的实现原理、优化器的原理以及代码生成器的原理；最后详细介绍了其整体架构以及提供给我们使用的各种API的内部原理，同时还介绍了生命周期、错误处理、指令系统与模板过滤器等功能的原理。

本书适合前端开发人员阅读。

在这里插入图片描述

四、总结

作为前端开发，要学的技术栈真的很多，除了最基础的 HTML/CSS/JavaScript，还包括 HTML5、CSS3、ES6，还要学习目前流行的 JavaScript 框架，我的建议是从 Vue 开始，容易入门，要掌握的技术栈包括 vue + vue-router + vuex + vue-cli + axios + sass + webpack，另外，node.js 也要了解。

最后，关于前端的学习，前端学习多且杂，且技术迭代过快，很难能找到对应的好资源来学习。会英文的同学一定多科学上网，而且作为程序员想追新技术只能通过英文。

互联网技术发展速度日新月异，不断学习新技术，否则就被淘汰。这就意味着每名学习者需要更加努力，优胜劣汰的情况将会持续和加剧。此外，我建议在知识的广度、深度方面最好能挑选一个自己最擅长和最感兴趣的一两个领域深入钻研，不要挑太多，多而不精。

学习前端很容易感到迷茫和无力。比如，读了半天资料发现过时了，有些新的文章套用老文章导致还是老技术，找不到合适的学习资源，学html的时候会感觉很简单，越到后来发现就是一个无底洞。坚持下来，学好基础然后加以实践，多看多练，多做项目，会有收获的。

再啰嗦说一句：优秀的程序员=兴趣+正确的方法+勤奋。

在这里插入图片描述