零基础学习前端：学习路线、学习计划、实战项目和面试题简历分享。

怼烎@ 2023-01-16 02:55 46阅读 0赞

前端简单概括就是所有你可见的效果呈现都可囊括到前端范畴，前端是一个没有任何竞争的方向，它的不可替代性是其他方向所没有的，比如后端，你可以用 Java、PHP、C\#、Go、Ruby 等语言开发。前端相较于其他方向也是比较好入门的，但是前端也是比较杂的，它涉及的东西比较多，这也对我们前端从业者提出了一定的要求，那就是要有比较强的学习能力。

不论是前端还是后端，你工作几年有了自己的感悟之后，就会发现越简单、越基础的东西反而越难。后面学习的框架、组件等，其实都是由基础的东西拼凑起来的，步入工作之后你肯定会遇到那种不用任何框架开发的团队，因为很多成熟的团队都有自己的一套前端框架，市面上的那些框架不可能满足产品的所有需求，所以一个项目可能会用到多个框架或者自己团队的框架。由此可见基础的重要性，基础一定要打好、夯实，以后工作中才能得心应手。

学习不光要学，还要多练习，编程的学习是不能光看的，一定要多练习，每天的练习不能少于 2 遍，第一遍跟着老师敲，第二遍盲敲，若是真的想不起来了再去看，如果可以，第三遍扩展练习，根据当天所学知识去实现类似效果。只有这样去做了，才能灵活运用知识，才真正理解知识。软件开发之所以称之为技术那是因为他也讲求动手能力，而且很强调动手能力，练习的量大了才能达到质的提升。

初学者所面临的常见问题

1、 前端学习路线？

2、 学习计划？

3、 学到什么程度可以找工作？

4、 没有合适的实战项目可以做？

5、 面试题和简历怎么办？

1、前端学习路线

根据当下市场需求，排列出前端的学习顺序如下：

1.基础阶段：HTML+CSS

2.js阶段：JavaScript基础、JavaScript进阶、JavaScript高级

3.jQ阶段：jquery部分

4.h5、css3阶段：H5+CSS3 、canvas画布、bootstrap 、响应式网站开发

5.前后端交互阶段：Node.js 、node+Gulp+MongoDB+Express+Ajax 、git+gitHub 阿里秀百秀项目

6.移动端开：移动端开发、电商项目实战

7.es6、模块化开发阶段、ES6 前端工程化、前端模块化

8.vue阶段：vue 、vue综合项目

9.小程序阶段：微信小程序、微信小程序扩展

10.react阶段：react 、TypeScript

2、 学习计划

1.基础阶段

HTML+CSS(10 天)

扩展( 2 天 )

学完了本阶段所有内容之后练习如下网页，如下练习均把首页实现出来即可。

仿写京东首页 http://www.jd.com，大概框架搭建出来即可。

仿中通 https://www.zto.com/

仿写淘宝首页 https://www.taobao.com/

仿写顺丰首页 https://www.sf-express.com/cn/sc/

如上，课程学习时间 12 天，课程练习时间 11 天，网页练习时间 7 天，总计 30 天。

2.js阶段

JavaScript基础 （6 天）

JavaScript进阶 （7 天）

JavaScript高级 （5 天）

如上，课程学习时间为 18 天，课程练习时间 12 天，小计 30 天。根据学习状况和接受能力浮动 15 天。总计 45 天。

3.jQ阶段

jquery 部分 （9 天）

jqueryx 效实战 （3 天）

如上，jquery 部分学习 5 天，jqueryx效实战学习时间 5 天，课程练习时间 5 天，总计15 天。

4.h5、css3 阶段

H5+CSS3 （6 天）

canvas 画布 （2 天）

bootstrap（3 天）

响应式网站开发 （1 天）

HTML5+CSS3学完之后即可做本练习：

仿 OPPO reno 5 练习：https://www.oppo.com/cn/smartphones/series-reno/reno5-pro/

如上，课程学习时间 12 天，课程练习时间 10 天，总计 22 天。

5.前后端交互阶段

Node.js （12 天）

node+Gulp+MongoDB+Express+Ajax（5 天）

git+gitHub（1 天）

如上，课程学习时间 18 天，课程练习时间 12 天，总计 30 天。

6.移动端开发

移动端开发 （6 天）

电商项目实战（5 天）

如上，课程学习时间 11 天，课程练习时间 4 天，总计 15 天。

7.es6、模块化开发阶段

ES6 （3 天）

前端工程化（1 天）

前端模块化（1 天）

如上 ，课程学习时间 5 天，练习时间 2 天，总计 7 天。

8.vue阶段

vue （19 天）

vue 综合项目（至少做 3 个）

如上，课程学习时间 19 天，课程练习时间 11 天，总计 30 天。

9.小程序阶段

微信小程序（8 天）

微信小程序扩展（10 天）

如上，课程学习时间 18 天，课程练习时间 12 天，总计 30 天。

10.react阶段

react （8 天）

TypeScript（3 天）

如上，课程学习时间 11 天，课程练习时间 7 天，总计 18 天。

3、学到什么程度可以找工作？

优秀的Web前端工程师具备编写任何一个互联网系统的前端页面、交互代码的能力。

根据对100家互联网名企对Web开发工程师的招聘要求分析，企业要求主要有两部分，一个是核心要求，一个是辅助要求。

核心要求包括：

语言技术：JS基础和核心、HTML5、CSS3；

框架技术：JQuery、AJAX、BOM、DOM、AngularJS；

通讯协议技术：HTTP协议、服务端开发技术；

交互技术：UI交互设计

熟练使用 React 或 Vue 相关技术栈

具备前端工程化思维和实践经验，技术视野广阔，有主导前端技术方案设计的能力和经验，能够独立承担模块功能的前端开发工作。

…

辅助要求：

有1-3年Web工作经验（近80%的企业）、学历及相关专业、文档规范写作能力、团队合作能力、责任心。

3、 没有合适的实战项目可以做？

学习完后，相关的综合性实战项目推荐：GitHub 、博客园、CSDN 、码云等，

前端项目：web书城、美团网、仿京东金融、去哪儿网APP等。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]

4、面试题和简历怎么办？

面试题可以去牛客上刷一刷  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]  
以上的练习题、简历模板和面试特辑文章只是我们的冰山一角，到时候可以根据你的情况进行面试指导，这部分内容不是固定的，是根据自身情况和市场情况而变动的，仅供参考。

> 在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993> 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】  
> 每天更新最新技术文章干货。

学习编程我们需要做到以下几点

1、贵在规范：代码规范，不是说小白时期不重要，正是什么都不懂的时候，才要严格执行学到的规范。徐徐渐进，等到学有所成，渐渐地形成一套自己的代码风格

2、贵在手写：最开始学习建议手写代码，哪怕只有一行代码，也要一个字母一个空格的敲打出来

3、贵在动手：哪怕只有一行代码的事例，也要手动编写运行，而不是眼高手低，哦，好简单会了，就不动手了

4、贵在基础：只有小白阶段把基础打好了（比如：HTML、CSS、Jquery），后续进阶难关才会更好克服

5、贵在坚持：在觉得最难的时刻，坚持一下，天空会完全不一样

6、贵在计划：制定相应的计划，并严格执行，否则一般学习效果大打折扣

7、贵在一步一个脚印：前端要学习掌握的知识非常多，需要跟着计划一步一个脚印，由易到难

8、以上：是个人学习时的总结，如果能够较好的遵循，学习效果和后续的进阶方面，有大大的帮助。当然适合自己的方法方式才是最好的。

谁的人生不迷茫，谁的路途不蹉跎

我们现在生活的大环境里面，选择很多，看不清前途，物质是富裕的精神却很空虚，行动是自由的感觉却很闭塞！

但是学习肯定是要静下心来的，刚开始肯定比较难，慢慢养成学习习惯和态度，从学习中获得乐趣！

学习成长不是一朝一夕的事，而是一个长期的过程！

你今天的成就好与不好、满足与不满足，在你过去的1-3年的选择和行动就已经决定了！

而你现在的选择和行动，就决定了未来3-5年的样子！我们总会站在原地缅怀过去，憧憬未来！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70]: /images/20221022/df692ecee3a941b99b6cc7820c493705.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 1]: /images/20221022/af73981a556844a4bd58b63959c98ce8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JPTTQ4NTQ4MA_size_16_color_FFFFFF_t_70 2]: /images/20221022/5dc8d34e04734387983196ae0c813661.png