零基础怎么更好的学好web前端，学习路线分享建议（脑图）

悠悠 2022-11-12 09:34 146阅读 0赞

### 前言 ###

在正式学习编程之前，我已经是一个编程的爱好者了。大学一直想要学习编程，奈何当时家里人觉得不是一个很好的职业发展道路（本身是心理学），于是这一想法就被打压在摇篮之中了。  
我是2018年大学本科毕业，17年参加工作到现在一直在教育行业摸爬打滚。但是总会觉得我不能一直就这样下去。  
于是一股脑的决定，我要学习编程，之所以选择web前端是觉得对于一个新手来说很好入门，学起来不太枯燥，炫酷的特效还能制定简历，天天跟产品和测试妹子打交道，根本不用担心单身问题。

**新手学习前端最常见的几个问题：**

*  不知道学习路线，不知道该学习什么
 *  学习过程中遇到问题，要解决半天，甚至找不到答案
 *  学了很久但是掌握的东西还是很少
 *  很难坚持，有时候都不想学，以至于想要放弃

**你是不是也是这种情况？**  
针对此情况，这是我为大家提供的学习计划，请查收

### 学习之路 ###

**开始学注意几点：**  
1.代码规范，这本身就是一个非常好的习惯，如果开始不养成好的代码规划，以后会很痛苦  
2.多动手，少看书，很多人学web前端就一味的看书，这不是学数学物理，你看例题可能就会了，学习web前端主要是学习编程思想。  
3.勤练习，学完新的知识点，一定要记得如何去应用，不然学完就会忘，学我们这行主要都是实际操作。  
4.学习要有效率，如果自己都觉得效率非常低，那就停不停，找一下原因，去问问过来人这是为什么。

> ##### [web前端思维导图、面试题合集、学习笔记免费获取，点击这里][web] #####

### HTML基础 ###

关键词：标题，段落，元素，属性，Style样式；

**表单和验证**  
目前有大量的外部库可以在很短的时间内实现验证表单，但是HTML的表单和验证一样要学好。

### CSS样式 ###

##### 1. CSS基础 #####

CSS Grid：CSS的布局系统  
Flexbox布局：CSS3中的一种布局模式，可以让元素在不同屏幕尺寸下自动适应大小。Flexbox在现代Web中用途广泛。  
CSS属性：用来定义样式的属性  
CSS模块

**样式化组件**  
**2. CSS框架**  
Bootstrap：Bootstrap有丰富体系结构以及足够的自定义选项。在WordPress和Drupal用户中广受欢迎。Bootstrap对于初学者来说更加易于学习。  
Tailwind CSS

**3. 响应式设计**  
要构建响应式Web应用程序，请牢记以下三个术语：  
CSS媒体查询  
视口：网页的可见区域，称为视口  
Rem单位

**4. CSS预处理器**  
Sass：最受欢迎的CSS预处理器之一  
PostCSS：PostCSS相比Sass更易于使用

**5. 动画**  
普通CSS动画：在深入CSS动画库之前，最好学习基本的CSS动画技能，例如为动画定义关键帧。  
GSAP：GreenSock动画工具适合初学者使用，目前全球有超过800万个站点上使用这个工具。

### JavaScript:行为 ###

关键词：JavaScript的基本语法，JSON格式，ES6 / ES7，TypeScript，提取API  
如果对OOP编程语言有一定的经验，可以学习一些工具来提升JavaScript技能，例如：Axios，ESLint，VS代码扩展，npm脚本，版本控制系统（Git），包管理人员（npm或yarn）

**前端框架**  
React  
Angular  
Vue  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center 2]

### 项目 ###

在学习了Web开发相关的基础知识后，不妨试试离开书本和教程来尝试自己创建一些东西。这么做的好处是：

*  获取亲手创建的快感。
 *  发现知识的薄弱点。
 *  学习如何真正的解决问题。

你想要创建什么都可以，唯一要做到的是要确保项目越小越好。  
此外，还应该对项目目标有一个定义，即，项目到了何种程度就算是done了。（并不需要十全十美，因为没有发布的需要。）  
选择的web开发领域不同，制定的项目也会不尽相同，不过下面这些项目可供参考：

*  待办事项列表app。
 *  私人博客工具。
 *  购物车实例。

基本上，只要项目的主要目的是跟踪一些基本数据，那对初学者而言就是测试知识的好方法。

### 最后，提醒大家几点 ###

#### 一：盲目的去学 ####

当初我在对于前端这个行业什么都不了解的情况下，比如：不知道未来发展趋势，不知道学习前端应该注意哪些初始问题，不知道具体的学习规划学习路线等等，一味的买书看书，看视频，到了中期阶段萌生放弃的想法，和主要是因为觉得自己越学越迷茫，也知道自己这样学找不到工作，这是初学者最大的误区。

#### 二：孤军奋战 ####

当初在学前端的时候，从来都没有跟别人交流过，就感觉活在自己的世界里，总认为自己什么都可以搞定，而且很多知识不会了，直接就过去了，并没有深究，而这种学习态度也注定了我的学习是失败，学习前端一定要有讨论的过程，只有跟不同的交流才能了解到你自己不知道的东西。

#### 三：没人指点 ####

前端对于我来说是从来不了解的行业，而我当时从来没有想过找一个这个行业比较厉害的人去请教下，现在我终于认识到了一点什么叫”方法不对，努力白费”所有的前端大神都有自己的学习方法，学习前端有困难可以加裙：714205369，我收集和整理了很多这方面的视频教程，讲的基本上通俗易懂，有想学这一门技术的小伙伴，可以来学习和获取资源。

[web]: https://jq.qq.com/?_wv=1027&k=gi4i6bNm
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210323143453442.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221022/7b8ce95de96a4759a08df87f14af78fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl81NjEzNDM4MQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221022/01d83029ff4f4e968cb928f2fc714030.png