怎么开展前端学习？

前端程序员最开始被称之为“切图仔”，现在呢它不再是掌握“HTML+CSS+JavaScript”三件套就能胜任的岗位了。但是JavaScript 学得好确实是必要的。

01 前端大佬成长记：刚毕业

​

编辑切换为居中

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

要达到熟练掌握HTML5、CSS3、JavaScript等Web开发技术，有良好的编程习惯；.熟悉业界主流前端框架 React、Vue优先；当然实习生可能要求没这么高，大致差不多，你会的越多选择的越多。做有准备的入职攻略机会更大

1.1 HTML5怎么学？

初识：网页组成和本质、浏览器、web标准、HTML骨架、vscode的简介和使用

认知：注释、标签组成和关系、标题和段落、换行和水平线标签、文本格式化标签、图片-基本使用

、绝对路径、相对路径、音频标签、视频标签、超链接

基础：列表、表格、表单-应用场景

除了多动手练习之外，学完后自己也要尝试做一个思维导图梳理一下知识点，你会对自己学习很有成就感的。 学会的合格标准：练习到闭着眼睛，脑海里有完整框架，直接上手就敲打的地步才算合格，然后进接着学。同时也别忘了多看一些精美的网页，查看代码思考它的框架布局，色彩搭配，功能体验。兴趣是最好的老师，把HTML5当做玩一样去学习，在学习中去体验玩的快乐。

​

1.2 CSS3 怎么学？

主要学习CSS基础语法、选择器、文字样式、盒模型、CSS背景技巧、浏览器兼容、CSS hack、CSS高级技巧、BFC规范、网页开发规划及流程、CSS3编码规划、2D与3D变换、animation 动画、预处理器Less、Flex布局等内容。

​

1.3 练习2个项目

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

掌握目标

• 能够遵循品优购代码规范

• 能够在品优购首页中引入 favicon 图标

• 能够说出三大标签 SEO 优化

• 能够在品优购首页中使用字体图标

• 能够说出 LOGO 需要哪些 SEO 优化

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

掌握目标

• 能够写出列表页

• 能够写出注册页

• 能够把品优购网站部署到本地服务器

• 能够把品优购网站上传到远程服务器

1.4 JavaScript 怎么学？

在web开发应用层面JavaScript需要重点学习的内容并不是特别的多。但是需要一条清晰的学习路线了，基础部分（定义变量、函数、数组、字符串、内置函数、内置对象）——>面向过程的编程思想（在这里可以试着用自定义按钮、自定义播放器练习）——>面向过程编程思想（封装一些我们自己想的对象，提供有意义的接口） 主要需要大家掌握： 1、JavaScript的相关基础，即变量、数据类型、操作符、流程控制、函数、简单类型和复杂类型等内容， 2、jQuery的应用，jQuery是JS的一个框架，它提供了一种简便的JS设计模式，优化HTML文档操作、时间处理、动画设计和Ajax交互等内容。

3、JavaScript面向对象、函数进阶、递归及其应用、正则表达式、ES6等等JS的高级课程内容。高级课程内容相对难度会有所提升，但是只要能理解了相应的编程思维，整体掌握难度并不是很大。

​

编辑切换为居中

图片来源网络，基础整理的很好，大家可以参考

如果作为一个城市的前端开发工程师，不仅需要掌握这些JS必备的技能，还需要掌握JS的主流框架Vue.js、React.js等等。需要拓展学习的内容比较多。所以在掌握了JavaScript开发技术之后，需要有更长的时间来进行拓展学习，才能在前端开发工作中更好地运用JS。

1.5 JS的主流框架Vue.js

Vue是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue被设计为可以自底向上逐层应用。其他大型框架往往一开始就对项目的技术方案进行强制性的要求，而Vue更加灵活，开发者既可以选择使用Vue来开发一个全新项目，将Vue引入到一个现有的项目中。 学习的时候，要明白库和框架的区别、设计思想然后去掌握基础，随后做项目实操

​

编辑切换为居中

Vue的数据驱动是通过MVVM(Model-View-ViewModel)模式来实现，VUE的工作原理：

1.6 React.js怎么学？

虽然React框架本身比较容易理解，结构很清晰，就是由十几个API组成，然后异步渲染。但是很多人反映上手还是有一定的的难度的。React是单向数据流，代码写起来会较双向数据流的多一些，但是同样的排查问题时思路清晰很多。

​

编辑切换为居中

图片来源网络，整理的很好，大家可以参考

框架还有很多，可以工作慢慢学，用到什么学什么

1.7开始做项目吧大兄弟们，给自己简历贴金的时候

别想着投机取巧，基础不扎实，框架底层都没搞懂，工作难找的，扎实了就好好练习项目 项目查找网址：

• https://www.leapcloud.cn/website/case#

• apicloud.com/cases

• 历趣应用商店 - 手机APP下载&手游排行榜

• 小程序|小程序社区|小程序开发社区-极乐小程序社区-www.wxapp-union.com

• http://app.weijuju.com/all_tpl.html?list=03_0_0

• https://adhub.com.cn/#!/case

• http://www.pc6.com/pc/shoujikanche/10/

• 解放号数智版-伴行数字化转型的软件产业互联网

• IT项目在线交易平台--米鼠网

另外大家在JavaScript的学习上，多多看一些经典书籍。少看一些速成的书籍！

• 《JavaScript DOM编程艺术》

• 《JavaScript权威指南》

• 《javaScript DOM高级程序设计》

• 《JavaScript设计模式》

02 前端大佬是怎么样的存在，一张图足够证明了，保存了开卷

​get 性能优化

• 1.了解前端性能衡量指标、性能监控要点，掌握一种前端性能监控方案

• 2.了解常见的Web、App性能优化方案

• 3.SEO排名规则、SEO优化方案、前后端分离的SEO

• 4.SSR实现方案、优缺点、及其性能优化

• 5.Webpack的性能优化方案

• 6.Canvas性能优化方案

• 7.React、Vue等框架使用性能优化方案

get 前端安全

• 1.XSS攻击的原理、分类、具体案例，前端如何防御

• 2.CSRF攻击的原理、具体案例，前端如何防御

• 3.HTTP劫持、页面劫持的原理、防御措施

精进自己业务相关的内容

• 1.能理解所开发项目的整体业务形态、业务目标、业务架构，可以快速定位线上业务问题

• 2.能理解所开发项目整体的技术架构、能快读的根据新需求进行开发规划、能快速根据业务报警、线上日志等定位并解决线上技术问题

• 3.可以将自己的想法或新技术在业务中落地实践，尽量在团队中拥有一定的不可替代性

后端技能

• 1.了解后端的开发方式，在应用程序中的作用，至少会使用一种后端语言

• 2.掌握数据最终在数据库中是如何落地存储的，能看懂表结构设计、表之间的关联，至少会使用一种数据库

最后再给大家分享一些平时学习前端时，经常用到的一些辅助工具类网站。

网址	描述
unbug.github.io/codelf	变量命名智能推荐（支持中文）
www.docschina.org	Web 前端开发人员提供优质中文文档
regexr.com	正则表达式验证匹配
any-rule	正则表达式库，非常全，使用起来很方便
www.toptal.com/developers	多张图片合成雪碧图，并生成对应 css
tool.lu	众多工具集合，包括时间戳转换，进制转换等
www.bootcdn.cn 或 cdn.baomitu.com	国内的CDN库，速度快
www.jsdelivr.com	国外的 cdn 库，支持 github，npm，WordPress
www.gitignore.io	根据选择会去生成 .gitignore 文件
codesandbox.io	在线编辑代码
www.typora.io	实用的 Markdown 写作工具，所见即所得
mdnice.com	使 markdown 语法更加美观，如果你有写博客，那这个非常合适你(强烈推荐)

谢谢你在千万个回答中点开了小扎，希望对你有帮助~点赞收藏我会开心一整天~