对于零基础想要学习web前端的小伙伴来说，不知道从哪学起，也不知道该掌握哪些知识，这里蜗牛学院就给大家整理了一份系统全面的web前端学习路线，希望可以给想要学习web前端的小伙伴带来一些帮助。
成都创新互联欢迎来电：18980820575，为您提供成都网站建设网页设计及定制高端网站建设服务，成都创新互联网页制作领域10年，包括卫生间隔断等多个行业拥有多年的网站维护经验，选择成都创新互联，为企业锦上添花。
第一阶段：专业核心基础
阶段目标：
1. 熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。
2. 熟练运用HTML+CSS特性完成页面布局。
4. 熟练应用CSS3技术，动画、弹性盒模型设计。
5. 熟练完成移动端页面的设计。
6. 熟练运用所学知识仿制任意Web网站。
7. 能综合运用所学知识完成网页设计实战。
知识点：
1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。
2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。
3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。
第二阶段：Web后台技术
阶段目标:
1. 了解JavaScript的发展历史、掌握Node环境搭建及npm使用。
2. 熟练掌握JavaScript的基本数据类型和变量的概念。
3. 熟练掌握JavaScript中的运算符使用。
4. 深入理解分之结构语句和循环语句。
5. 熟练使用数组来完成各种练习。
6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。
7.DOM和BOM实战练习和H5新特性和协议的学习。
知识点：
1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。
2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。
3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。
4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。
第三阶段：数据库和框架实战
阶段目标：
1. 综合运用Web前端技术进行页面布局与美化。
2. 综合运用Web前端开发框架进行Web系统开发。
3. 熟练掌握Mysql、Mongodb数据库的发开。
4. 熟练掌握vue.js、webpack、elementui等前端框技术。
5. 熟练运用Node.js开发后台应用程序。
6. 对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。
知识点：
1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。
2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。
3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。
4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。
第四阶段：移动端和微信实战
阶段目标：
1.熟练掌握React.js框架，熟练使用React.js完成开发。
2.掌握移动端开发原理，理解原生开发和混合开发。
3.熟练使用react-native和Flutter框架完成移动端开发。
4.掌握微信小程序以及了解支付宝小程序的开发。
5.完成大型电商项目开发。
知识点：
1、React面向组件编程、表单数据、组件通信、监听、声明周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。
2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。
3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。
4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js 、TypeScript。
Uniapp目前比较成熟，而且用的是Vue语法，学习成本比较低，而且行业里面用的也比较广泛，而Flutter的话，学习成本略高，因为要学习新的语言，还有就是目前生态不是特别完备，等他再发展发展吧。目前黑马程序员就有学习Vue的视频，你可以去学习一下，提高自己的能力，让自己的职场更好！您的采纳给我提供源源不断的动力，很高兴您能满意
编写手机App，用什么语言？
从简单到复杂，可以分三级：
简单方案：HTML5
其实就是把网页封装成App。编程语言就是网页三件套：HTML+CSS+Javascript
有多种工具和框架，如Cordova, uni等等。
这种方式实现“App”最容易，且跨平台，对于iOS和Android做一套就行了。代价是功能弱，性能低，换句话说就是“卡”。
中等方案：原生跨平台框架
这类方案在iOS和Android之上自行实现一套原生框架。通用的Flutter, ReactNative都是流行的原生跨平台框架。适用于 游戏 的Cocos2D，Corona SDK也可以算在这一级里。
这类方案实现App难度中等，因为跨平台，一次开发，iOS和Android都能运行。功能和性能也是中等，比不上原生App，但比HTML5的又好很多。
复杂方案：原生开发
直接在iOS和Android上各自开发一套原生App。
iOS可以使用Objective C或Swift。
Android可以使用Java或Kotlin。
还是来一个图表吧，虽然简单，却很明了：
推荐用Flutter，简单。
以前自己用android原生写过7天酒店签到程序，不过当时的安卓还是比较难写的，不像现在越来越容易上手。
Flutter
Flutter是一个由谷歌开发的开源移动应用软件开发工具包，用于为Android、iOS、 Windows、Mac、Linux、Google Fuchsia开发应用。
Flutter应用是使用Dart语言编写的，虽然是新的一种语言，但是难度不算大，上网搜下相关教程学习下，应该就能很快上手。
Flutter效果
这里是我上个月仿照教程弄的一个简单APP，效果图如下：
点击"Next"就切换下一张，点击"Pre"就切换前一张，点击“Reset”就全部滑落下来。
我女儿最喜欢中间的Reset效果，哈哈。
希望这个答案能帮到你。
现在Flutter正式版已经出来了，原生性能，安卓iOS多平台支持，谷歌大厂背书，大家可以比较放心的学习。编程语言用的是Dart，可以看做是加了语法糖版本的Java，学习起来也比较容易，如果想做手机app，可以考虑使用它。
如果只是自己做着玩的话推荐用H5开发，开发工具HBuilder或者HBuilderX。
先科普下什么是IOS和Android吧。
IOS只是操作系统而已，是苹果的操作系统。
开发IOS上运行的APP的话，现在流行的语言是Object-C和Swift。
Android也是操作系统，是谷歌基于Linux内核开发出来的手机操作系统。
开发Android上运行的APP的话，现在流行的语言我觉得仍然还是JAVA。
如果想要真的做一款APP的话，不仅仅会一门语言就够了，涉及的东西比较多，如下是我给你的学习推荐路线。
学习路线：
1：先学习js，然后学习下html 、css。
学习这些可以上菜鸟教程或者W3School网站学习。
开发工具使用vscode或者Notepad++都可以的。
2：了解Mui常用组件（官网：），
熟悉常用API(官网：)。
3：服务端的开发，要么用java开发，要么用.net webapi开发，推荐理由，java目前是主流，.net webapi简单容易。
java 开发工具IntelliJ IDEA，.net 开发工具 vs。
4：数据存储使用mysql。
补充说明：如果是想做专业开发APP的话还是建议用java开发客户端，ios APP则用swift开发。
当然现在为了一套代码多个平台，使用H5开发专业APP的也有。
会了就可以正式撸代码实现自己简单的APP了。
回答完毕，谢谢。我是只说代码的大饼。
那当然首选是h5套壳了。关于语言方面，我建议还是用PHP吧。随着进一步学习，可以学习uinapp一键多端。H5、小程序、App、小程序支持多个平台上架、微信抖音支付宝百度，希望可以帮助你
目前有三种app开发方式：原生app、混合app、webapp。
原生app：安卓需要java语言，ios需要 objec t-c，wp需要的.net语言。这种app用户体验最好，性能也是最好的，开发成本高，开发周期长，一款app需要开发多个语言版本；
混合app：需要h5，javascript，了解每个混合框架，比如appcan、hbulider、phonegap等等，以及封装的中间件。这种开发方式的用户体验、性能没有原生的好，但是他的开发周期短，开发成本低，对开发人员技能掌握比较高，开发一套程序可以兼容到多个设备上；
webapp：需要h5、javascript语言，不能调用底层设备，用户体验效果次之，开发简单，开发成本低，开发周期短，可以兼容多个设备。
综上所述三种开发各有优缺点，要根据具体的项目需求来选择适合自己的开发语言和开发场景。
uniapp了解下，多端应用。app的话要考虑安卓和苹果，但学了二种学习成本比较高。用uniapp就解决了。
现在中小型企业都在逐渐采用跨平台开发的模式 效率高 成本低 作为个人更是开发不二的选择 你问的iOS和安卓是原生开发 需要不同的开发语言和框架 学习成本也很高 既然你说你是小白 如果采用原生开发 可能得大概花一年半载才能开始上手
采用跨平台开发 只需要学习一下html css JavaScript 然后选择跨平台开发框架 比如react flutter uniapp 都可以 跨平台就是指你这一套代码编写的app可以到不同平台运行 比如iOS安卓都OK 但其实很多还可以编译到各类小程序平台运行 所以很方便
我这里推荐uniapp 一个基于vue的跨端开发框架 我自己也用这个开发了很多项目 确实很快 也提供了原生渲染能力 不做 游戏 等软件 基本没啥问题 社区插件市场也很热闹 基本有问题可以很快解决 希望可以帮到你。
按照开发方式可分为原生开发、混合开发、webapp开发，不同的开发方式学习的编程语言不一样，下面我们来一个一个分析一下：
一、原生开发
原生开发的编程语言主要为针对IOS运行环境的为编程语言为Swift或Object c，安卓环境为Java或Kotlin，WP环境为NET。原生开发的运行效率最高，用户体验最好，但是需要学习不同平台的编程语言，学习门槛较高。
二、混合开发（伪原生开发）
混合开发技术主要采用一套特别的渲染引擎来渲染UI界面和交互，按照渲染引擎可分为html与dart，其编程语言主要是Javascript或Typescript、Dart。
目前基于html渲染的开发框架有react native、weex、uniapp，基于dart的开发框架只有flutter。
混合开发由于调用了原生的控件来渲染UI，所以加载和体验与原生差不多，学习成本比较低，只要会js，选择一个框架开发就行了，或者学习dart语言，进行flutter开发。
三、webapp开发
webapp开发主要利用原生环境中的浏览器控件来装载服务器上的html页面，实际这个app就是一个自定义的浏览器app，所以只要会html，就会开发webapp，由于app内部加载的是远程的网页，所以加载速度和体验最差。
以上是我个人的总结，有不对的欢迎指出，谢谢。
本人用c#，除了单片机用c，cad CATIA，多媒体主要Adobe，它干完所有，不需要性能的视图混合dom代码。
建议大家刚开始学一定要静下心来把基础打好，不要只看视频或者书籍，多动手去实践。正确的前端学习路线：html语法、格式，常用的标签极其作用，理解标签的嵌套，学习使用firefox+firebug或者chrom的调试工具。CSS重点看盒子模型，定位，层级，过渡，动画和 transform。知道原理和规则。大部分工作都是照着设计稿化。掌握上面几个99%还原也不难。接下来重点学习几种常见的布局。学完之后去学flex。最后sass、less，基本就差不多了。千锋软件开发培训课程的授课模式采用全程面授，讲师成本虽高，但是效果却是显著的，和学员面对面沟通，了解到学员在学习过程中遇到的问题，动态地调整授课方式。千锋教育就有线上免费的软件开发公开课，。
HTML、CSS学完可以制作出简单的静态页面。js的执行顺序，基本的编程基础（变量、运算、流程控制、数组、调用函数、自定义函数、对象）、json、js的dom操作、js的事件机制（委托、绑定、监听，冒泡和阻止冒泡，兼容性）了解ajax的xmlhttprequest及其创建方法（多浏览器兼容）、跨域，明白其工作原理，熟悉http协议。js学完可以实现运用js语言为页面增加动态效果，达到用户交互的目的。千锋教育集团目前已与国内4000多家企业建立人才输送合作，与500多所大学建立实训就业合作，每年为各大企业输送上万名移动开发工程师，每年有数十万名学员受益于千锋教育组织的技术研讨会、技术培训课、网络公开课及免费教学视频。
Xcode编译经常遇到各种问题，处理起来费时费力，挺打击学习积极性的。记录下这些问题，方便自己也帮助后来人。
编译的时候遇到：
网上有很多解决方法，我是用这个方法解决的：
编译的时候遇到：
解决办法：
Project - User-Defined - FLUTTER_ROOT 改成本地 flutter SDK路径
感谢 issues 上的小哥，给你个????
在项目目录下执行 flutter run 可以正常运行到手机，但是在Xcode build 还是有问题。
这时需要手动添加 FLUTTER_ROOT 到 User-Defined ：
添加之后：
就可以正常在Xcode build 安装到手机了。
flutter build ios 后出现：
pod install 后出现：
解决办法：
这是因为terminal没有走代理的流量，
使用 git config --global http.proxy "localhost:port" ，设置代理。
port是端口号，根据不同的vpn不一样，我的端口是10080。
执行 git config --global http.proxy "localhost:10080"
Xcode build 的时候出现：
解决办法：打开 ios/Podflie 文件：
关于 bitcode 的问题，我检查了下用到的第三方SDK，应该是百度地图的问题，我引入了个第三方插件（吐槽下没官方插件），百度地图有支持和不支持 bitcode 的两个SDK，我取消这个插件就没有报这个错了，奇怪的是，再次引入同一个插件，也可以正常打包，所以说这个问题还没有完全解决。
大家可以试下这个处理方法：
TARGETS - Build Seettings 搜 arm ，试一下把其他删除，只留下armv7跟armv7s或者只留下armv7
解决办法：
我是clean Xcode之后就可以了
解决办法：
用的是P12证书，改成手动签名：
