随着移动互联网的发展，前端开发成为重点。移动端有多个平台，Android，iOS，微信小程序，支付宝小程序，还有不断出现的新操作系统，比如阿里YunOS，华为鸿蒙，等等。
为了支持这些平台和系统，越来越多的应用开始使用H5跨平台架构，现在有个新名词叫做“大前端”。
一，H5跨平台开发
这时的H5前端开发已经不再是单单的网页开发了，而是前端应用开发。具体到H5 Hybrid架构，常用三剑客：HTML, css, JavaScript
1) HTML和css是页面设计，没有代码逻辑
2) JavaScript编程，还有其它衍生语言，比如常用的TypeScript
JavaScript是一种脚本语言，由解释器加载执行，常用在网页前端动态展示、和服务后端交互等场景。接下来重点介绍JavaScript开发。
二，学习阶段和时间计划
1）编程基础，一到两周
学习JavaScript语言基础，掌握基本的编程方法。如果对着课本教程学习比较枯燥，难以坚持，那么可以使用网上的一些学习练手资源，边学习边动手，比如HackerRank
2）开发框架，一到两月
JavaScript前端开发有很多成熟的框架可用，比如JQuery, AngularJS，React，还有前后端都跑通的NoteJS。阿里开源框架Ant Design Pro是一个功能完善的脚手架，推荐新学者练手。
新手学习时，推荐当前普遍使用的Top3开发框架，太新或者太旧的都不适合用来学习练手。
3）项目经验，一到两年
学习的最终目的是学以致用，在实际项目中积累经验，不断提升。有了一定技术基础后，推荐尝试参与开源项目，在开发功能、提交代码的过程中，提升非常快。而且开源项目经验，和工作经验一样，应聘时非常受欢迎。
偶是工作多年的Web应用架构师，欢迎关注偶，了解更多IT专业知识。
前言
学习Web前端开发，需要的基本条件就是一根网线+一台电脑。对于想要学习Web前端的同学，可以按以下步骤来进行学习。
熟悉HTML
HTML就犹如人的骨架，是一个页面的基本组成。HTML所需要学习的内容就是HTML标签。标签都是由开始标签和结束标签构成，同时标签也会有一系列的属性。如下所示：
运行效果如下所示：
推荐阅读书籍《HTML＆XHTML权威指南》
熟悉CSS
CSS犹如人的肤色，CSS用来确定HTML标签各位置的摆放以及界面的视觉效果，比如标签的大小，字体颜色等设置。代码示例如下：
运行效果如下：
推荐阅读书籍《CSS权威指南》
熟悉JavaScript
JavaScript犹如人的血液，正因有了血液的流动，人才有活力，正因有了JavaScript，页面才有了交互。代码示例如下：
运行结果如下：
JavaScript推荐阅读数据《JavaScript高级程序设计》
组件库和JavaScript框架
有了前面三步，大家就掌握了Web前端开发的基础了。但在实际工作开发中，为了提高开发工作效率，大家还需要掌握一套组件库和对应的JavaScript框架。
较为流行的组合有两大类：element组件库+Vue框架 和 Ant Design组件库 + React框架。但在国内的公司当中，element组件库 + Vue框架的这种组合使用更多一些，所以也推荐初学者可以先掌握Element组件库 + Vue框架的方式来进行学习。
总结
以上就是学习Web前端的步骤和相关资料，希望能帮到有想法进入Web前端的小伙伴们。如有其他疑问，也可关注私信与偶。如果觉得问题文章不错，欢迎大家关注转发哦！
关注偶，不定期分享好玩科技知识，带大家一起体会探索科技的那份独有思考和乐趣。
偶是一个有项目架构经验的java软件工程师，欢迎关注偶，了解更多java前沿技术!目前都使用微服务实现模块化Web应用。
如果觉得《主流网站的前端组件化开发 怎么制定Web前端学习计划 – 前端技术 – 前端》对你有帮助，请点赞、收藏，并留下你的观点哦！
