写在最前

• 作为未来的前端人才，请注意代码的规范性以及网页的美观性。代码规范性无需多言，前端是程序与大众对接的窗口，一个功能完备的网页固然必需，但是界面的简洁、美观也同样是重中之重。尤其是不少人吐槽你电的网站很丑。
• 本次题目的绝大多数代码都可以在互联网上找到案例，我们鼓励同学在网上寻找并学习，但是反对原封不动地抄袭，请在代码中加入自己的思考。
• 前端题目看似题量较小，实际上我们提倡精益求精的精神。请尽可能的学习并使用JavaScript甚至Vue等开发框架。

一、个人博客

作为最能体现前端乐趣的项目，请尽情享受发挥创造的快乐。

• 使用HTML，CSS搭建一个个人博客。
• 博客页数应在2~3页之间，多做扣分。
• 博客的内容应包括：自我介绍、学习前端的心得体会、成分展示、自己的OC人设、游戏战绩截图......所有你想分享的东西都可以展现出来。
• 不硬性要求使用Javascript，使用可以适当加分。
• 请保证网页的简洁、美观（这点真的很重要）

Tips

这里列出一些适合前端入门的教程：

• 文档版：MDN Web Docs、 菜鸟教程
• 视频版：黑马程序员pink老师前端入门教程 | HTML、CSS、 黑马程序员前端JavaScript入门到精通
• Markdown语法：Markdown 基本语法
• 请在互联网上自行搜索导航栏、卡片样式等教程

二、赛博坦克

“我得重新集结部队”

工作室某些学长非常热爱即时战略游戏，更有甚者在大一一年内星际争霸的游戏时长达到了一千五百小时。可在一次战斗中，他的部队损失惨重。你可以帮他制造一辆坦克吗？

要求

• 使用HTML，CSS，Javascript实现坦克开炮的动画效果。
• 请自行在前端相关资源网站寻找需要的素材（或者自己利用手头可以得到的资源进行美术加工）。
• 只需仿造出坦克的开炮动画，视情况添加音效。
• 自行设计恰当的方式控制坦克的动作。
• 或者使用《星际争霸2》相关素材实现可以体现相应专业技能的效果，这么做的同学学长对你很有兴趣。
  

  三、仿做猛盒游界面

  原神，启动！

学前端最好的入门方式就是踩着前人的脚印前进，自己真正的上手构建一个网页是最能锻炼前端思维和代码能力的方式。
注意：
想完成本题，最好先学习有关布局的相关知识。

要求

• 模仿上图第几个图片搭建一个或多个静态网页
• 网页中的具体内容请自行设计
• 只需模仿界面即可，无需真正实现
• 图标icon素材可以自行寻找你认为恰当的图案
• 加分项请注意页面细节，实现动画效果可以酌情加分，例如：
  • 鼠标放置在启动器左下方焦点图时
  • 鼠标放置在启动器右侧外部链接图标时
  • 鼠标放置在游戏界面上方角色头像时
  • 鼠标放置在游戏界面左侧角色属性选项时
  • ...