web前端实战项目(web前端可以做的项目)

web前端实战项目

1）小米官网
项目描绘：首先挑选小米官网为第一个实战事例，是因为刚开始入门，有个参考点，另外站点比较倾向现在的卡片式设计，完成常见作用。目的为学者操练编写小米官网，了解div+css布局。学习资料的话能够加下web前端开发学习裙：600加上610再加上151自己去群里下载下。
项目技能：HTML+CSS+Div布局
2）迅雷官网
项目描绘：此站点特效较多，所以经过操练编写次站点，学生能够更多操练CSS3的新特性过渡与动画的完成，而且能够很好的操练div+css布局。
项目技能：HTML5+CSS3新特性
3、音乐播映器
项目描绘：本项目为音乐类项目，首要完成音乐主页展现，今天引荐类别，歌曲列表，歌曲播映及歌手列表和搜索功用。首要操练Vue的根底运用和组件如何设计。项目如何构架与测验。经过本项目能够让学者更快的了解Vue结构的运用。而且熟练的构建整个项目需求的架构。
项目技能：Vue+Flex+Vue-Router+Webpack+ES6
4）Love
项目描绘：这是一款为女性专门打造的App，引荐更好的产品，产品包括化装用品，护理用品，穿戴用品。功用包括阅读，引荐，活动，购物车与购买功用
项目技能：HTML+CSS+JavaScript+第三方结构
接下来，给我们介绍一套web前端开发必学的常识结构，感兴趣的来~
第一阶段：
HTML+CSS：HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、
JavaScript根底：Js根底教程、js内置目标常用办法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。
JS根本特效：常见特效、例如：tab、导航、整页翻滚、轮播图、JS制造幻灯片、弹出层、手风琴菜单、瀑布流布局、翻滚事情、滚差视图。
JS高档特征：正则表达式、排序算法、递归算法、闭包、函数节省、作用域链、根据间隔运动结构、面向目标根底、
JQuery：根底运用悬着器、DOM操作、特效和动画、办法链、拖拽、变形、JQueryUI组件根本运用。
第二阶段：
HTML5：HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas.
CSS3：CSS3新挑选器、伪元素、脸色表示法、边框、阴影、background系列属性改动、Transition、动画、景深和深透、3D作用制造、Velocity.js结构、元素出场、出场策略、炫酷CSS3网页制造。
Bootstrap：呼应式概念、媒体查询、呼应式网站制造、删格体系、删格体系原理、Bootstrap常用模板、LESS和SASS。
移动Web开发：跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事情、手机中常见JS作用制造、Zepto.js、手机聚划算页面、手机滚屏。
第三阶段：
WEB服务器根底：服务器根底常识、Apache服务器和其他WEB服务器介绍、Apache服务器建立、HTTP介绍。
PHP根底：PHP根底语法、运用PHP处理简略的GET或许POST恳求、
AJAX上篇：Ajax简介和异步的概念、Ajax结构的封装、XMLHttpRequest目标详细介绍办法、兼容性处理办法、Ajax结构的封装、Ajax中缓存问题、XML介绍和运用。
AJAX下篇：JSON和JSON解析、数据绑定和模板技能、JSONP、跨域技能、图片预读取和lazy-load技能、JQuery结构中的AjaxAPI、运用Ajax完成爆布流事例额。
第四阶段：
面向目标终极篇：从内存角度到理解JS面向目标、根本类型、杂乱类型、原型链、ES6中的面向目标、属性读写权限、设置器、拜访器。
面向目标三大特征：继承性、多态性、封装性、接口。
设计形式：面向目标编程思维、单例形式、工厂形式、策略形式、观察者形式、模板办法形式、代理形式、装修者形式、适配器形式、面向切面编程。
第五阶段：
结构封装根底：事情流、冒泡、捕获、事情目标、事情结构、挑选结构。
结构封装中级：运动原理、单物体运动结构、多物体运动结构、运动结构面向目标封装。
结构封装高档和弥补：JQuery结构雏形、可扩展性、模块化、封装属于传智自己的结构。
第六阶段：
面向组件编程：面向组件编程的方法、面向组件编程的完成原理、面向组件编程实战、根据组件化思维开发网站运用程序。
面向模块编程：AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。
第七阶段：
Web开发工作流：GIT/SVN、Yeoman脚手架、NPM/Bower依靠管理工具、Grunt/Gulp/Webpack。
MVC/MVVM/MVW结构：Angular.js、Backbone.js、Knockout/Ember。
常用库：React.js、Vue.js、Zepto.js。
第八阶段：HTML5原生移动运用开发
Cordova：WebApp/NativeApp/HybirdApp简介、Cordova简介、与PhoneGap之间的联系、开发环境建立、Cordova实战（创建项目，装备，编译，调试，布置发布）。
Ionic：Ionic简介和同类比照、模板项目解析、常见组件及运用、结合Angular构建APP、常见作用（下拉改写，上拉加载，侧滑导航，选项卡）。
ReactNative：ReactNative简介、ReactNative环境装备、创建项目，装备，编译，调试，布置发布、原生模块和UI组件、原生常用API。
HTML5+：HTML5+我国产业联盟、HTML5PlusRuntime环境、HBuilder开发工具、MUI结构、H5+开发和布置。
第九阶段：
快速入门：Node.js发展、生态圈、Io.js、Linux/Windows/OSX环境装备、REPL环境和控制台程序、异步编程，非堵塞I/O、模块概念，模块管理工具、开发流程，调试，测验。
核心模块和目标：大局目标global，process，console，util、事情驱动，事情发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、Socket.IO。
Web开发根底：HTTP协议，恳求呼应处理过程、联系型数据库操作和数据拜访、非联系型数据库操作和数据拜访、原生的Node.js开发Web运用程序、Web开发工作流、Node.js开发Blog事例。
快速开发结构：Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、运用Express重构Blog事例、Koa等其他常见MVC结构。
Node.js开发电子商务实战：需求与设计、账户模块注册登录、会员中心模块、前台展现模块、购物车，订单结算、在线客服即时通讯模块。

web前端可以做的项目

1、企业官方网站的开发与保护
这个应该是最简略的了，基本上是纯静态页面的展示，就算有交互模块，应该也是比较简略的那种。
2、门户类型网站的开发与保护
例如像搜狐相同的门户网站，相对来说也不难，这种网站一般分成许多个模块，每个模块的展示结构是十分相似的。
怎么做到可复用性强，对产品需求改变迭代时更加友爱，那就很检测开发人员前端三大言语的规划模式了。
3、电商网站
例如京东和淘宝，里面不只有对用户友爱的展示方法，合乎逻辑的交互方法，还会涉及到网站、产品的颜色规划、排版规划、交互规划，尽管或许都由规划师来出方案，但是前端开发同学能够从中学到许多东西。
此外，除了单纯的展示，你需求考虑更多的东西了。
例如，不同端的字体展示，呼应式布局，图片大小，静态资源缓存，CDN部署，Ajax动态数据交互。这些还都是偏纯展示的。
还会有涉及到个人信息填写、支付款项、暗码输入等等，会涉及到一系列的前端安全问题，这部分也是很训练人的。
4、后台办理系统
一般这个是给内部人员运用的，所以能够不必考虑太多的兼容性，直接要求统一运用谷歌浏览器或者火狐。
5、营销移动端页面
H5的活动营销页、红包落地页、明星投票页等等一系列与营销活动相关的移动端页面。
这些需求你的CSS功底十分扎实，常常要写一些动态效果、动画效果，越生动越吸引用户参与。
6、移动端视频播放页面
最近短视频崛起，但是许多短视频App中的页面是Web前端页面，这样做的原因是App过审麻烦且时刻周期长，业务需求快速迭代和修复的情况下，前端责无旁贷。
那么这时候检测的是你对视频的操作能力，对流式播放技能和能力的掌握。此外，视频挂件、贴纸、弹幕、互动、美颜、变老挑战等等，都是现在短视频必备的能力。
7、小程序
微信、支付宝、百度等大企业，先后推出了小程序，当然身为前端开发的我们是必须掌握的一门技巧，尽管不是新的言语，但代码安排方法、调试方法、底层原理，也是值得重视和学习。
8、造轮子写工具、写框架，搭建基础设施
公司逐渐开展壮大今后，会面对一个问题，那就是怎么将前端基础设施做起来。基础设施对前端的工程搭建与开展来说，太重要了。