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 年 4 月 13 日 24:00，在截止时间之前，可以无限次的提交。
- 学有余力的同学可以尝试使用某种技术（GitHub Pages、Netlify等）部署能供公网访问的页面
加分项。 - 所有标记为进阶或加分项的要求请根据自己的能力完成，我们鼓励同学积极学习，尽可能多的满足这些要求。
- 兴趣题持续更新中，不作为考核标准，欢迎对前端感兴趣或学有余力的同学积极探究
1. 搭建静态个人主页
[blame Amo]
前端工程师怎么能没有自己的主页呢！搭建一个静态界面往往是大家踏入前端世界的第一次尝试，而这通常是最能体现前端乐趣的过程。
要求
- 请参考各式 CSS 布局
- 大段文字信息请使用 Markdown 语法
- 个人主页的内容应包括你的基本信息、兴趣爱好、想表达的内容等等，请尽情发挥你的创造力
- 请将页面控制在三页以内，一到两页为最佳
Tips
这里列出一些适合前端入门的教程：
- 文档版：MDN Web Docs、 菜鸟教程
- 视频版：黑马程序员pink老师前端入门教程 | HTML、CSS、 黑马程序员前端JavaScript入门到精通
- Markdown语法：Markdown 基本语法
- 请在互联网上自行搜索导航栏、卡片样式等教程
2. 写个日历吧
[blame Amo]
时间线性向前,是人们给时间以纪念,让星球运转的某个特定角度获得了意义时间线性向前,是人们给时间以纪念,让星球运转的某个特定角度获得了意义
要求
- 使用原生的CSS以及JavaScript
- 只需要适配显示器屏幕
- 样式自定,注意美观性
基础功能
- 用户可以切换年份和月份
- 界面应只显示一个月内的日期
- 以合理的方式凸显出当天的日期，并对该日期之前和之后的日期做出区分
进阶功能
- 用户可以选择特定日期添加备注,备注应以合理的方式在页面上显示出来
- 用户可以选择特定日期作为倒计时的终点, 日历上应该用合理的方式显示"距离[备注]还有XX天"
若无备注,则显示"距离yyyy年mm月dd日还有XX天"
Tips
- 请注意闰年和平年的区别
- 怎么在刷新网站后还能看到备注呢？
3. 搭建瀑布流网站
[blame Amo]
什么是瀑布流布局（Masonry Layouts）
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式，主要用于展示以图片为主的内容。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到要求，依次按照规则放入指定位置。
Pinterest，这是第一家采用瀑布流式布局的网站，可以参考他们的布局。
类似的网站还包括：Designspiration、Unsplash
功能
- 搭建一个用于展示图片的网站,要求采用瀑布流布局
- 展示的图片不少于50张
- 加分项：点击图片后可以以原始尺寸查看图片
基础要求
- 请使用此压缩包（fe_q3_image）里的图片作为素材，也可以使用自己喜欢的图片
- 使用原生的 CSS 或 JavaScript
- 要求每张图片显示的宽度相同
- 请保证从左到右，自上而下的刷新顺序
不要出现向下滚动之后图片只出现在一侧的情况
进阶要求
- 移动端才是瀑布流布局最适合的场景，请考虑适配移动端网页
关于移动端的适配，请参考响应式布局 - 工作室有的学长没有手机，请考虑适配电脑端网页
电脑和移动端最主要的不同是显示器的宽度，请思考如何一劳永逸地解决 - 已知瀑布流布局有多种方法(纯 CSS3 实现、JS+flex 布局等) , 请尽可能采用多的方式实现
Tips
本次项目只有五十张图片，但要是有更多张的话……该怎么办呢？
4. Tic-Tac-Toe
[blame yzh]
React官方文档的经典入门教学- 重点在于 React 文档的阅读（如果感觉不好读，可去知乎搜黄玄，看他的导读）
- 尝试对比基于框架书写 UI 和原生三大件书写 UI 的区别（重点）
tip：本题目无需提交代码，但如果你实现和官网有所不同，非常欢迎你提交代码
5. Webpack
[blame yzh]
对于初学者可能较难，主要在于很多人还没进行过工程化的前端开发，对里面的一些配置感知不到使用场景，因此建议好好完成前面三道
如果你已经完成了题目4，那么构建React应用时可能是基于 CRA 完成的，如果你之前学过 Vue，那么你可能也了解 VueCli（不过 22 年开始接触 Vue 的同学官方默认脚手架应该已经是 Vite 了）
脚手架在构建前端应用时帮我们快速配置了一些工程化能力，但遇到复杂的场景还是需要自己手动的更改配置文件，因此本题目希望你能基于 Webpack5 完成 React+TS 开发环境的构建。参考资料：
0 条评论