SynX工作室 前端类招新
写在最前
- 作为未来的前端人才，请注意代码的规范性以及网页的美观性。代码规范性无需多言，前端是程序与大众对接的窗口，一个功能完备的网页固然必需，但是界面的简洁、美观也同样是重中之重。
尤其是不少人吐槽你电的网站很丑 - 本次题目的绝大多数代码都可以在互联网上找到案例，我们鼓励同学在网上寻找并学习，但是反对原封不动地抄袭，请在代码中加入自己的思考。
提交要求
- 使用Git管理代码，并使用Git托管平台；
- 在Git Repository中附一Markdown格式文档，内容包含遇到的问题和解决方案；
- 为项目撰写符合 Best Practice 的 README 文档，可以参考以下规范：
- 本页面中的习题包括文档与代码，所有题目均写在同一份文档中，并导出为 PDF 格式，命名为 SynX 招新-前端类题目-20xxxxxxxxxxx-XXX.pdf。内容仅需是 Git Repository 的 URL（例如 github.com/xxx/xxx）。
- PDF 文档通过邮箱提交，邮箱为：[email protected]，邮件的主题为 SynX 招新-前端类题目-<学号>-<姓名>。
- 题目提交的截止时间为 2023 年 10月 9 日 00:00，在截止时间之前，可以无限次的提交。
加分项学有余力的同学可以尝试使用某种技术（GitHub Pages、Netlify等）部署能供公网访问的页面。- 所有标记为进阶或加分项的要求请根据自己的能力完成，我们鼓励同学积极学习，尽可能多的满足这些要求。
- 兴趣题持续更新中，不作为考核标准，欢迎对前端感兴趣或学有余力的同学积极探究
1. 个人博客
[blame Amo]
作为最能体现前端乐趣的项目，请尽情享受发挥创造的快乐。
要求
- 使用HTML，CSS搭建一个个人博客。
- 博客页数应在2~3页之间，多做扣分。
- 博客的内容应包括：自我介绍、学习前端的心得体会、个人兴趣爱好、
自己的OC人设、游戏战绩截图......所有你想分享的东西都可以展现出来。 - 不硬性要求使用Javascript，使用可以适当加分。
- 请保证网页的简洁、美观（这点真的很重要）
Tips
这里列出一些适合前端入门的教程：
- 文档版：MDN Web Docs、 菜鸟教程
- 视频版：黑马程序员pink老师前端入门教程 | HTML、CSS、 黑马程序员前端JavaScript入门到精通
- Markdown语法：Markdown 基本语法
- 请在互联网上自行搜索导航栏、卡片样式等教程
2. 扇子动画
[blame Amo]
工作室某些学长非常热爱体育运动，其中一位格外喜欢 ⌈ 太极扇 ⌋ 。可是，粗心大意的学长不小心把扇子弄丢了，这让他十分苦恼。作为学习前端知识的你们，能否用前端知识帮助这位学长呢？
要求
- 使用HTML，CSS，Javascript实现扇子的动画效果。
- 只需仿造出扇子的打开和收起，无需其他动画效果。
- 自行设计恰当的方式控制扇子的动作。
加分项在力所能及的范围内尽可能做的贴合扇子的机械结构。
3. 模仿Ubuntu扫雷
[blame Amo]
你怎么知道我扫雷记录是2分29秒？
工作室有学长常年沉迷扫雷，可是每次玩扫雷都要打开虚拟机，过于繁琐。他很苦恼，于是找到学习前端的你们，想让你们帮他一个忙：
注意有能力的同学可以下载Ubuntu实际体验一下这款扫雷。
要求
- 设计扫雷小游戏。
- 请优先实现功能，再实现界面的模仿。
加分项自行设计方式保存成功完成游戏的时间，并显示排行榜。加分项可以自选难度。在30X16_99mines难度下记录时间小于2分29秒的，请上传成绩截图，学长对你很感兴趣。
4. 仿做QQ界面
[blame Amo]
QQ，启动！
学前端最好的入门方式就是踩着前人的脚印前进，自己真正的上手构建一个网页是最能锻炼前端思维和代码能力的方式。
注意：
想完成本题，最好先学习有关布局的相关知识。
要求
- 模仿上图界面搭建一个静态网页
- 聊天信息和联系人请自行设计
- 只需模仿界面即可，无需真正实现
- 图标icon素材可以自行寻找你认为恰当的图案
加分项请注意页面细节，实现动画效果可以酌情加分，例如：- 鼠标放置在左侧联系人列表时
- 鼠标放置在右侧群成员时
- 鼠标放置在工具栏图标时
- ...
5. 模拟太阳系动画
[blame Amo]
在一片名为 ⌈罗德兰⌋ 的古老大陆上，某学长遇到了太阳骑士索拉尔，被他高大伟岸的精神所深深感动，后来工作室其他人再问起他的时候，他只留下了四个大字：
赞美太阳！
注意本题较难，请量力而行。
本题考查Javascript的编程水平和CSS的进阶应用。
要求
- 请用恰当的方式模拟太阳系八颗行星的运行情况。
- 基础要求：使用圆形轨道，俯视黄道面，二维展示。
加分项使用椭圆形轨道，考虑Z轴，考虑透视，三维展示。
6. 浅析Ajax
[blame Amo]
我可知道你用没用ChatGPT！
Ajax是前端相当重要的概念，请分享你对于其优缺点、便利性、同步异步、安全性的看法以及你在项目实践中对于Ajax的感想。
0 条评论