大一小白也能拿奖？我们如何用HTML+CSS+JS做了一个考研计划网站参加C4网络技术挑战赛

大一团队如何用基础Web技术斩获C4网络技术挑战赛奖项去年秋天当宿舍里三位计算机专业的大一新生决定组队参加中国高校计算机大赛-网络技术挑战赛时他们手里只有半学期学到的HTML/CSS基础知识和几节JavaScript入门课。令人意外的是这个看似草台班子的团队最终凭借一个考研计划网站获得了选拔赛三等奖。作为亲历者我想分享这段从零开始的参赛历程——用最基础的技术做出完整作品或许能给同样起点不高的同学一些启发。1. 组队与选题找准定位比技术炫技更重要1.1 组建互补型团队我们三人团队的分工很明确视觉设计有美术基础的同学负责UI/UX核心编码编程课成绩最好的同学主攻JS逻辑文档与测试细心耐心的同学负责文档撰写和功能测试提示低年级团队不必追求全栈大神每人专注一个方向反而能提高整体效率1.2 选题的降维打击策略对比往届获奖作品后我们放弃了区块链、AI等热门但超出能力范围的主题转而聚焦一个具体痛点考研学生需要科学规划每日学习任务现有工具要么太复杂要么缺乏趣味性基础Web技术完全能解决这个问题最终确定开发一个趣味考研计划器核心功能包括随机任务抽签避免选择困难自定义任务池灵活适配不同专业进度可视化激励学习动力2. 技术实现用基础语法构建完整功能栈2.1 最小可行技术栈我们严格限定技术边界!-- 基础结构示例 -- div classtask-pool h2今日考研任务/h2 button idrandom-btn随机抽取/button ul idtask-list/ul /div// 核心交互逻辑 function randomTask() { const tasks [背50个单词, 做2篇阅读, 复习政治第3章]; const randomIndex Math.floor(Math.random() * tasks.length); document.getElementById(task-list).innerHTML li${tasks[randomIndex]}/li; }2.2 避坑实战记录CSS布局冲突最初使用float布局导致模块错位改用Flexbox后解决/* 修正后的布局方案 */ .task-container { display: flex; flex-direction: column; gap: 15px; }JS事件失效发现动态生成的按钮无法触发点击事件改用事件委托document.body.addEventListener(click, function(e) { if(e.target.classList.contains(dynamic-btn)) { // 处理逻辑 } });3. 作品包装让评审看到完整思考3.1 作品简介撰写技巧评审专家平均浏览每份简介的时间不足3分钟我们采用问题驱动式结构模块内容要点字数限制痛点分析考研规划存在的三大问题100字解决方案如何通过随机机制提升执行力150字技术亮点纯前端实现的创新交互设计100字3.2 演示视频制作使用OBS录制时发现两个关键细节转码参数必须符合大赛要求的H264编码演示节奏遵循功能展示→使用场景→技术实现三段式注意视频开头10秒必须呈现核心功能避免冗长的团队介绍4. 参赛心得低起点团队的逆袭法则4.1 评审的隐藏标准与评委交流后了解到基础赛道的评分重点在于功能完整性而非技术复杂度用户体验细节按钮反馈、错误处理等文档规范程度代码注释、使用说明4.2 给后来者的建议时间分配公式开发60% → 测试20% → 文档视频20%必做检查清单[ ] 所有功能在Chrome/Firefox最新版测试通过[ ] 删除console.log等调试代码[ ] 压缩图片资源到500KB以内比赛结束后有评委特别指出我们的作品展现了初级开发者难得的完整思维。这让我意识到用基础技术解决真实问题的能力往往比堆砌新技术更有价值。现在回看那个充斥着var声明和行内样式的代码库虽然稚嫩但每个像素和交互都凝结着我们对问题的思考。