web前端10个新手项目列表，学完即可上手做项目

最新推荐文章于 2024-05-02 15:42:51 发布

阿学世界

最新推荐文章于 2024-05-02 15:42:51 发布

阅读量5.1k

点赞数 10

本文链接：https://blog.csdn.net/weixin_46483221/article/details/105663600

版权

这篇文章是我推荐给大家有想法学习前端，或者已经开始琢磨web前端的小伙伴们的。
之前就有很多朋友跟我说，学习编程学习前端的时候，总是摸不清头脑，一大推问题需要解决，种种书籍需要去啃，字符、单词都需要去记。就感觉要费上很多时间，居然担忧青春饭是否能吃到？

实际上，是很少有自己做过项目，或者没有自己做过。凡事都是从0到1的过程，从1到100就非常简单了

小编为各位想加入程序员大军，加入前端的朋友们整理了三十个实战项目列表，有非常详细的教程。选择几个进行学习，或者发挥自己的想象去完成自己的项目
项目列表：

所含知识点：HTML基础，CSS基础，CSS核心属性，CSS样式层叠，继承，盒模型，容器，溢出及元素类型，浏览器兼容与宽高自适度，定位，锚点与透明，图片整合，表格，CSS属性与滤镜

所含知识点：HTML5新增的元素与属性，表单域增强元素，CSS3选择器，文字字体相关样式，CSS3位移与变形处理，CSS3 2D转换与过度动画，CSS3 3D转换与关键帧动画，弹性盒模型，媒体查询，响应式设计

所含知识点：移动端页面设计规范，移动端切图，文字流式/控件弹性/图片等比例/特殊设计的100%布局，等比缩放布局，viewport/meta，rem/vw的使用，flexbox详解，移动web特别样式处理（reset, 1px border, 高清图片）

所含知识点：基本语法，循环语句，函数与数组，String与Date，BOM与DOM，事件，拖拽效果，cookie存储，正则表达式，Ajax，面向对象基础，运动与游戏开发

所含知识点：Promise/A+，设计模式（观察者模式等），原型链，构造函数，执行上下文栈与执行上下文，变量对象与活动对象，作用域链，闭包，this，ES5，ES6

所含知识点：DOM库，事件库，AJAX库，原型和继承库，MVVM核心库，基于SPA的路由库

所含知识点：时间轴特效，tab页面切换效果，网页定位导航特效，滑动门特效，焦点图轮播特效，导航条菜单效果，瀑布流特效，弹出层效果，倒计时效果，抽奖效果

所含知识点：PHP，MySQL，HTTP(s)协议详解，Ajax进阶、跨域与Defered，Apache与Nginx 环境搭建与配置，接口的定义，Mock数据，Restful，前后端联调，前端安全(XSS,CSRF,JSON注入)

所含知识点：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模块化

所含知识点：大首页、列表页与详情页展示与交互特效、搜索、登录与注册、购物车、jQueryUI 与 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平台系统前端

如有侵权，请联系我删除，谢谢大家

关注