前端是一个泛指，范畴更广泛，web前端属于web开发的前端，是一个明确的范围，方向更明确；前端开发包括了移动前端开发和web前端开发，即包括了PC端开发和移动端领域的开发，而web前端开发主要指传统的PC端网页开发，这是它们之间最大的区别。
本教程操作环境：windows7系统、Dell G3电脑。
前端是一个泛指，范畴更广泛，web前端属于web开发的前端，是一个明确的范围，方向更明确。前端根据产品设计/UI，进行用户侧应用编码落地的工作均属于前端开发的范畴（包含web、app、小程序类、桌面类等等不同的应用形态）；就是直面用户的界面，通常来讲，前端就包含了Web前端了。
简单来说，前端开发包括了移动前端开发和web前端开发，即包括了PC端开发和移动端领域的开发，而web前端开发主要指传统的PC端网页开发，这是它们之间最大的区别。
移动前端开发和web前端开发都属于前端开发，具体有以下区别。
立即学习“前端免费学习笔记（深入）”；
1、业务的应用场景
web前端开发主要指传统的PC端网页开发，页面主要是运行在PC端浏览器中，移动前端开发出来的页面主要是运行在手机上。
直观上会感觉，PC端页面大一些，移动端页面小一些，但是根据开发经验，页面大可并不代表书写的代码复杂，页面小也并不意味着开发简单，难与易主要还是取决于具体的业务需求。
2、新技术的使用
由于在移动端主要以webkit内核为主，对于HTML5等新技术支持的更好，所以可以更大范围的使用新技术，而PC端开发由于很多场景下要求兼容IE等老版本浏览器，出于浏览器兼容性的考虑，有些情况下限制了新技术的使用。
3、页面的适配性
传统PC端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用。
从这一点上来说移动端页面的适配难度更高一些。
4、页面的性能
PC端的网络情况一般比较稳定，都是通过网线或者Wi-Fi连接网络，但是移动端就比较复杂，除了Wi-Fi，还有2G、3G、4G甚至是在几种不同的网络连接中交替切换也经常发生。
不稳定的网络连接对页面性能带来的挑战是移动端的页面资源不能太大，否则在恶劣网络情况下时，页面将会无法访问 ，严重影响用户体验。
nopCommerce 是一个由ASP.NET多层模式开发的开源电子商城系统，可以自行设置模板、配置灵活、功能强大，它内含一个目录前端和一个管理工具后端。前端包括用户注册、商品购买(可以进行评论)、投票、Blog等，后端有类别管理、产品管理、客户及角色管理、订单管理、纳税管理、国家（地区管理）、邮件发送、消息模板、新闻发布、blog管理,可以对列表数据进行XML导出。
5、框架选型
由于移动端网络情况的不稳定，导致我们在移动端页面框架选型时，一般只考虑小而美的框架，例如像zepto.js这样的压缩之后只有9.6K，就能满足一般业务的需要，如果是想要构建更复杂的单页面应用，可以选择像vue.js这样的框架，功能强大，但体积压缩后却只有20多K。
而web端相对选择的范围就比较大，一些比较重型的框架也可以根据项目需求加以考虑，例如古老但庞大的ext.js，依然凭借着众多UI组件活跃在一些企业的后台管理系统项目中。
扩展资料
Web前端开发需要掌握的技术：
1、熟练掌握前端开发技术(HTML5、JS、JSON、XHTML、CSS3)，了解各项技术的相关标准。
2、掌握Ajax异步编程，能够写出高性能、可复用的前端组件。
3、对OO、MVC、MVVM等编程思想、前端框架有深刻理解，熟练掌握一个前端框架（常用前端框架 Vuejs，AngularJS，React，Bootstrap，QUICK UI，移动端有：Frozen UI，weUI ，SUI，MUI，AUI）了解其原理（框架有很多，选择两三个主流的框架，熟练，深度了解才可以）。
4、善于Web性能优化，可访问性、对SEO等有良好的体验；理解表现层与数据层分离的概念、 Web语义化（这些也是在找工作中，很有用的加分项）。
5、了解前端安全机制，熟悉HTTP协议以及浏览器缓存策略。
6、熟悉常见JS开发框架源码实现，（如：prototype、jQuery、Mootools，Ext， Dojo，underscore、YUI、Kissy），至少熟练一种（当然也不要去选一些用的人很少的框架，要明白大项目都是团队做，不能自己搞一套）。
7、拥有良好的代码编写，设计文档撰写的经验，熟练使用Git等版本控制工具。
8、对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案，如IE6/7/8/9、 Firefox、Safari、Chrome。
9、具有较高的审美（这个很重要，多去见识一些模板，高端的项目，就能感觉到有多大的差距）。
（学习视频分享：web前端入门）
