前端想自学后找个小公司混口饭吃，需要学到什么程度?

大厂：大厂更看重的是我们的基础方面，HTML+CSS+JavaScript，另外就是数据结构、算法和计算机网络，那准备的方向就要从这些方面入手。比如我们要做Vue或者React开发，那就要知道Virtual dom和diff算法的原理。

小厂：这就需要大量的实战经验了，为了快速抢占市场，产品的开发进度都会很紧张，没有时间去培养新人。理论方面的东西不会太关注，针对面试，我们需要从实战经验去准备。

很多同学初期找工作的时候都会觉得，招聘需求写的越短的越不清楚的，越容易进入。其实完全错了！企业招聘需求越清楚，用人方越知道自己要找什么样的人。反而是那种不清不楚的需求，越是面来面去找他们认为「优秀的」。

我们了解了不同企业的一些侧重点，以及招聘需求之后。就来分享技术栈—课程—项目—简历的全路径学习内容。

一、前端自学线路图并所有课程资源

黑马程序员前端：2022年前端学习路线图

本套线路图，包括了前端的学习路径以及4个阶段，9套课程，共计课程273+小时，1861集。 知识点包括了：HTML+CSS-->移动web->JavaScript基础-->Web APIs->数据交互&异步编程-->Node.js-->Vue2+Vue3-->React核心技术-->微信小程序。

很多小白开始自学前端都是先来背HTML的标签，从HTML、body、div...往下背，跟背英语单词一样，学了背了就忘了，然后失去学习动力。 其实正确的方式是，从静态页面的完成开始，不用过于纠结记住标签，因为很多前端大牛都是通过多年的经验形成了下意识的记忆。 HTML标签明白了之后，开始了CSS学习，什么阴影，圆角、动画等等的，这些都是日常应用。但是这里需要注意的是，要熟练掌握css定位的原理，盒子模型，等等，如果这些没有弄清楚，javascript学习就会遇到困难。 更多HTML+CSS学习笔记如下（已完结）：

• 认识网页 / HTML标签大全 / 表格 / 列表

• CSS入门笔记 / Css样式表 / emmet语法 / CSS的复合选择器 / 显示模式 /

• CSS背景 / CSS三大特性 / 盒子模型 / 圆角边框、盒子阴影、文字阴影

• 浮动知识点汇总 / PS切图 / CSS属性书写顺序（重点） / CSS练手之学成在线页面制作

• CSS定位的4种分类 / 学成在线模块添加 / HTML+CSS之定位（position）的应用

• 案例：淘宝轮播图 / 元素的显示与隐藏 / 土豆网鼠标经过显示遮罩 /

• 【重点】CSS之精灵图 / 字体图标 / 用户界面样式源码 / vertical-align 属性应用 /

• 溢出的文字省略号显示 / 常见布局技巧+案例 / CSS新增选择器 / 盒子模型和其他新特性

HTML+CSS项目《品优购》完整笔记+源码（万字版可复制）：

• HTML+CSS大项目1：品优购项目笔记+源码（万字！收藏）

• HTML+CSS大项目2：品优购项目笔记+源码（万字！收藏）

移动开发笔记（更新中）

• 移动WEB开发之入门&视口 / 二倍图 / 主流方案选择 / 携程网首页案例制作

• rem基础&媒体查询 / less基础 / rem实际开发适配方案 /

JavaScript最全拔高（更新中） JavaScript面向对象开发相关模式 / JavaScript创建对象简单方式到优化 / JavaScript面向对象游戏案例：贪吃蛇 二、前端自学时间安排参考

• HTML+CSS 25天

• JavaScript 20天

• 环境基础 15天

• 计算机基础 25天

• Bootstrap（15天）、jQuery UI（15天）、Amaze UI；流行的前端框架：jquery mobile、angular.Js（20天）、Vue.js（20天）、React.js（20天）

• Echarts（1周）、tableau（1周）

以上时间安排是每天至少学习6小时的时间安排，大家可以根据每天学习的小时数字型加减天数。

​

编辑切换为居中

添加图片注释，不超过 140 字（可选）

三、前端项目如何学习 电商项目的学习：哪里能找到可以学习的前端实战项目？

综合项目学习：

刚学前端的话，有什么项目是可以上手的吗？

上述的2022年学习路线图中每一个阶段都包括了项目课，上面这两个问答当中也含有项目学习思路。有一些注意点：

• 不要觉得我要把框架学了，node.js也要学了，我才能做一个项目；每一个阶段都有不同阶段的项目！

• 一定要看书尤其是JavaScript相关的书籍要读的！但是不建议初学者直接看书； >《javascript面向对象编程指南》，风格轻松易懂，比较适合初学者，原型那块儿讲得透彻，12种继承方式呢。 >《js权威指南》、《js高级程序设计》，这两本书经典是经典，但是太厚，适合把其中任意一章都当成一本书来读。洋洋洒洒，很难一口气看完。比较适合当做参考书。

项目阶段要知道一个项目的整体框架和设计思路：

• 确定框架和技术点（一般来说开源的项目，都整理好了，就算没整理，评论区的大牛也有整理出来的）

• 开发工具确认

• 开发规范+命名规范（这点在职场上很重要，所以学习项目的时候要注意）

• 后面就是技术点的学习并且要了解业务。

• 前期是抄一抄，可以借鉴一些社区的技术文章

• 后期可以在学会的基础上优化一些什么，然后变成自己的经验。

比如我们构建一个实时聊天应用的话：

• 首先使用create-react-app或者vue-cli来创建项目

• 使用现有的Sass服务商，例如极光IM、腾讯IM、网易云信，它们都有免费使用的额度。

• 使用http://socket.io框架自行搭建聊天服务

• 使用Node.js自行搭建websocket服务

比如电商项目的话：

• 使用create-react-app或者vue-cli来创建项目，使用Node API来构建后台服务

• 使用Postgres或者MongoDB数据库，使用像Prisma（Postgres）或者Mongoose (MongoDB)这样的ORM框架

• 使用支付宝、微信接入支付功能

• 将Node API和前端应用部署阿里云、腾讯云等

四、前端就业相关的简历和面试

简历相关：

• 简历格式要做足工作，给人耳目一新的感觉，整洁，突出重点；

• 名字，名字里面有繁体字，或者生疏的字最好标写拼音；

• E-mail，最好写最通用的，防止收不到的意外情况；

• 学历、年龄、工作经验要对上；

• 求职状态，写简历和面试时，最好说自己现在是在职状态，这样公司聘用你时，你可以灵活安排入职时间；

• 求职意向最好写单项，写多项显得你不专业，显得自己的方向不稳定；

• 期望薪水最好不写或者写面议不要写具体多少，面试要的时候不要太少，多的话自己hold住就可以了。

专业技能： 详详细细的动脑筋写明白，对写上去的每项技能自己是要负责的，面试的时候会问的。自己会的，尽量多写。 了解、熟悉、熟练、精通；

项目经验： 简历上写的项目一定要特别熟悉，并且所涉及的技术最好能融合我们做过的项目，即使没涉及到，你也可以这样说：已经做了主题切换，准备下一个版本上线； 项目的开发时间、开发人数要搞清楚，你负责哪些模块； 项目中所涉及的技术怎么描述，事先需要准备好，背下来； 参考：

• 编程基础扎实，有扎实的数据结构和算法功底；

• 扎实的计算机基础知识，较强的逻辑理解能力和学习能力，理解设计模式；

• 精通HTML5、CSS3、W3C标准、常见协议、浏览器兼容性；

• 精通JavaScript，ES6、AJAX、DOM等前端技术，掌握面向对象编程思想，对常见JS框架（如jQuery/Kissy/Zepto/Bootstrap等）；

• 掌握Vue、React、argular等主流开发框架；

• 掌握node、express、koa，mysql等后端技术；

• 熟悉移动端和 Hybrid Web 开发，适配及性能调优；

• 掌握canvas，svg，webGL，D3，tree.js等图形处理技术；

• 掌握微信小程序、微信公众号，h5开发；

• 掌握前端自动化构建工具，如grunt、gulp、browserify、webpack等；

• 熟悉前端性能优化方法，如发包压缩、资源懒加载、CDN加速等；

• 模块化、组件化、OOP、MVC有较多实践并有自己的理解；

• 热爱技术、主动钻研、沟通和协作能力优秀，抗压能力强；

• 优秀的分析和解决问题的能力，有较强的沟通能力，责任心和团队意识。

面试相关： 最主要的就是刷题了：

趣IT官网-互联网求职刷题神器​www.funit.cn/​www.funit.cn/​www.funit.cn/​www.funit.cn/

一面就是技术相关的问题，建议大家刷题的基础上还有自己模拟面试，把常见面试问题整理出来，自己整理好回答。 二面三面经常会问的就是技术外的内容，比如未来的职业规划？新技术如何看待？优势？这些的内容，都是开放性内容，没有什么标准答案。但是要提前思考再说，别再这些问题上给自己挖坑。

---

下面看看黑马的学员们独立完成的项目吧：

• 学员作品展示- 深圳 -38期肖同学：《光·遇》官网 - 温暖的灵魂终将相遇

• 学员作品展示- 深圳 -38期王同学：《阴阳师：百闻牌》手游官网_安卓测试预约_百鬼欢聚 一局忘忧

• 学员作品展示- 广州 - 27期三组：三亚婚纱摄影_三亚拍婚纱照_首选【飘视觉】_三亚外景海景婚纱摄影_三亚婚纱店

• 学员作品展示 - 西安 -7期张同学：- 西安唯一视觉【官网】西安婚纱摄影|西安婚纱照|西安婚纱影楼|婚纱摄影工作室

我是黑马程序员，愿意在知乎上解决你们一切编程问题。欢迎来问，免费答疑~更多内容希望帮助到你：

• 自学前端从哪开始?

• Web前端主要用什么语言?

• 前端刚毕业工作，公司技术老旧，要不要辞职?

• 有哪些关于前端开发技术（HTML、CSS 和 JavaScript 等）的值得推荐的书籍？