前端开发系列课程阶段性项目汇总

#PC端 #响应式 #移动端 #js原生 #ES6 #Vue JS万博manbext3.0首页登录集 CSS3万博manbext3.0首页登录集 CSS3万博manbext备用网址区 JS万博manbext备用网址区

响应式：AntDesign首页

利用media queries响应式布局，完成由PC端到移动端的响应式布局单页练习

  • media queries响应式，丰富的细节让布局很有技巧性
  • 复杂的下拉菜单、比较复杂的flex布局
  • 视频的显示隐藏
  • animation动画
  • border-image的应用

    • 响应式：蓝铅笔首页

    利用media queries响应式布局，完成由PC端到移动端的响应式复杂首页布局，文字和图片内容更丰富

  • media queries响应式，复杂的内容非常考验对布局的统筹能力和细节的观察能力
  • 复杂的弹出式面板菜单和swiper幻灯结合
  • 层次丰富的文本信息，颜色、大小、间隔、对齐、对比等布局原则
  • 对单行和多行文本的省略号的处理
  • 内容太丰富的页面应该单独做移动端页面

    • 响应式：英文网页公司面试上机题

    这是一个公司面试的时候给的上机题，利用CSS3布局完成响应式设计，自主添加动效和鼠标经过的变化等细节

  • flex+grid+media queries+rem完成响应式设计
  • @font-face加载外部英文特殊字体
  • filter滤镜的使用
  • 无缝linear-gradient渐变运动动画
  • 模拟数字循环向上无缝滚动animation动画

    • 纯移动端：起点小说网首页

    纯移动端布局，仿站起点小说网首页，让学生感受响应式和纯移动端的差别，js部分是后期讲完了js基础再添加

  • flex+grid+rem+vw布局
  • overflow-x横向溢出的滑动操作
  • swiper幻灯
  • 倒计时
  • 选项卡的功能封装

    • js原生整站练习：PC端少儿绘画培训官网

    ES5、DOM、BOM、ajax、面向对象、原型、作用域链等学完之后的js原生整站练习。项目是我自己设计的PS源文件，再完成html、css等页面制作之后，作为js(主要是ES5)原生阶段的综合性练习项目

  • 瀑布流插件waterfall的使用、ajax访问json数据滚动加载、点击小图看大图、点赞一次等
  • 弹出面板封装、选项卡封装、幻灯片封装、手风琴切换等常规交互
  • 复杂的无缝滑动幻灯片的嵌套
  • 城市地区的关联菜单查询
  • 视频弹出面板的打开和关闭

    • js原生基础：68design首页交互

    学习完js基础和对DOM的操作后，开始把以前的页面添加上js的交互行为效果

  • PC端页面js交互行为
  • 幻灯片的切换
  • 选项卡的切换
  • 回到顶部的滚动条减速滑动效果
  • 根据滚动条的位置切换固定导航

    • js原生基础：PC端起点小说首页交互

    学习完js基础和对DOM的操作后，开始把以前的页面添加上js的交互行为效果

  • PC端页面js交互行为
  • 表单的弹出菜单选择、幻灯片的点击切换、手风琴切换
  • 复杂3D幻灯的自动播放和切换
  • 2天内的倒计时
  • 常规的显示隐藏切换等

    • PC端独立设计：码小易少儿编程企业网站

    CSS3高级技巧，独立设计的PS源文件，使用了很多CSS3动效和特殊布局技巧，适合对页面有更独特的个性化需求

  • 更复杂的flex+grid+定位布局相结合完成个性化需求的PC端页面
  • linear-gradient、transform、transition、animation等的大量运用
  • border-image的运用
  • 无缝渐变运动动画
  • 首页、合作加盟、校区分布、下载中心四个页面可以点击

    • PC端独立设计：菁瑞优智培训企业官网

    使用了独立设计的PS源文件，除了常规布局之外，着重掌握专题页的布局技巧，增加恰当的CSS3动效让页面更丰富

  • flex+grid+定位布局相结合完成专题页偏多的PC端企业官网
  • linear-gradient、transform、transition、animation、border-radius等的使用技巧
  • 轴对称交错布局技巧
  • 幻灯片和选项卡等js在学完了js基础后再让学生补充完整

    • PC端：站酷网站“我的首页”

    学完HTML和CSS基础样式之后，利用浮动和定位完成布局，%和rem实现自适应的PC端网页，页面虽然不大，但是有很多细节非常锻炼技术和观察能力。

  • 基础页面练习
  • PC端自适应网页
  • 浮动和定位布局、显示隐藏菜单面板、iconfont、复选框美化、下拉菜单滚动条样式修改等
  • 要求对仿站的页面高度还原
  • “我的首页”和“关注的类型”两个页面可以点击

    • PC端仿站：仿QQMusic

    学完CSS3基础之后，利用flex弹性布局和grid网格布局，结合CSS3变形、动画等完成对QQ音乐的仿站

  • flex弹性布局、grid网格布局、定位布局相结合完成PC端页面
  • iconfont+精灵图相结合
  • 3D transform完成票务页面的幻灯片
  • 对单行、多行文字溢出省略号的处理
  • 对页面图片和文字等细节的处理，还原度达到98%
  • 首页、排行榜、票务三个页面可以点击

    • ES6练习：todos任务列表

    在js基础之上，完成ES6学习之后，通过todoMVC这个通用的项目，用ES6原生的代码实现全部功能。

  • localStorage本地存储的读写
  • 键盘事件、单击、双击事件的判断、事件委托
  • 对hash的处理
  • 大量数组方法的使用
  • 增删改查等功能函数的封装

    • Vue练习：todos任务列表

    掌握js,gulp,webpack,脚手架,了解node.js之后,就可以开启Vue的学习了,这是上完Vue基础课程的第一个完整小万博manbext3.0首页登录.

  • 第一次用Vue写的小万博manbext3.0首页登录,体会与原生js的差别
  • localStorage本地存储的读写
  • 各种指令以及双向绑定的使用
  • methods和computed的区别
  • watch监听数据的变化
  • 对Vue实例的理解