小白学习-前端开发入门到精通

迁移自：小白学习-前端开发入门到精通发布日期：2024-9-12 最后编辑：2024-12-21 原栏目：⌨ 开发教程

💡

无论是敲代码、写博客，还是录制视频，这些创作类的技能，如果你能将其中任意一种培养成长期的终身爱好，它都能成为你持续受益的源泉。

前言

有不少朋友希望学习前端开发知识，能够自己开发页面，因此我在这里整理一下从入门到精通需要的所有知识。

💡

注意，我的前端水平一般，只能算勉强够用，我只是一个要用什么才学什么的体验派，并非专注技术研究的学者，这里提供的建议仅供参考。

前端发展已经很多年，现在的自动化、高性能的组件层出不穷。

我们拿建筑行业举例，早期的建筑师只需要掌握简单的工具、图纸和材料就能建造房屋，但随着技术的进步，现在的建筑师不仅需要精通传统的建筑知识，还要掌握现代化的建筑技术，比如智能家居、环保材料等。

然而，建筑技术的底层逻辑都是相同的——它们的核心还是为了创建坚固、美观且实用的建筑、以满足不同的使用场景需求。新技术框架只是对这些核心原则做了自动化的封装，站前前人的肩膀上提升了效率、简化了操作而已。

因此，学习一项新技能，通常可以分为至少两个方面：

首先要掌握其中的“道”——理解技术背后的基本原则，其次通过不断的实践与总结来学习和掌握新的“术”——现代化的工具和方法。

我将知识体系分为道和术。道是基本原理和规律，术是前人经验的总结、以及他们沉淀下来的工具包。

以下是展开说明要学习的知识点：

一个网页的运行由以下三个组件构成：

除以上知识外，网站的运行还离不开服务器部署等知识，服务器就像当于业委会、物业等组织，他们协助社区、建筑群安全、高效地运行。扩展开来，还需要学习一些网络协议相关的知识，它们相当于道路网规划的知识，以便高效安全地提高入户访客的体验。

开发核心工具：VScode等开发软件
适配不同平台: 移动端\PC端适配\响应式
提高开发效率: Vue、React等
提升开发规模：工程化管理Webpack、Typescript、代码管理Git等
提升运行效率：了解和适应浏览器的渲染原理
提升页面美观：学习一些成熟的设计风格产品，例如 Bootstrap，Material，TailwindCSS，AntDesign，Animate动效，Echarts图表等
结合业务功能：需要开发后端服务器，用于接收用户的数据、提交的表单，并进行存储，例如NodeJS服务端以及MYSQL数据库。

前端开发的内容基本上就是这些，从头写一个教程挺麻烦，我这里推荐一个千古前端图文教程（免费的图文教程），用来作为入门很不错，主要是结构很清晰：

前端入门到进阶

另外，具体每个技术点如果深挖都有大量需要学习的细节，同时每个技术点都会有各类的扩展技术解决方案；

在学习过程中如果遇到希望深入了解的知识，你可以在这些综合教程中进行关键词查找，并逐一深入学习：

菜鸟教程(www.runoob.com)提供了编程的基础技术教程, 介绍了HTML、CSS、Javascript、Python，Java，Ruby，C，PHP , MySQL等各种编程语言的基础知识。同时本站中也提供了大量的在线实例，通过实例，您可以更好的学习编程。..

fly63前端教程网提供了HTML、CSS、Javascript、Vue、python等各种编程语言的入门教程，同时提供了大量的实例演示，通过实例可以更好的学习编程。