插件窝 干货文章 宇宙网:学生的空间和代码之旅

宇宙网:学生的空间和代码之旅

li strong 探索 挑战 1011    来源:    2024-10-20

前端挑战 v24.09.04 提交:探索宇宙

这是前端挑战 v24.09.04 的提交,Glam Up My Markup: Space

我建造了什么

我创建了“探索宇宙”,这是一个身临其境的教育登陆页面,带领游客踏上太阳系之旅。我们的目标是设计一个引人入胜、视觉上有吸引力且信息丰富的网站,激发人们对太空和天体的好奇心。

登陆页面的主要功能包括:

  • 带有太空背景和动画滚动箭头的迷人标题
  • 太阳系的全面概述
  • 有关每个行星的详细信息,包括关键事实和图像
  • 专门介绍著名卫星和其他天体的部分
  • 链接到 NASA 科学页面以进行进一步探索的互动元素

设计旨在平衡美学与教育内容,创造一种既视觉震撼又刺激智力的体验。

演示

[Github 存储库]

您可以在以下位置查看该项目的现场演示:

探索宇宙.web.app

旅行

作为一名学生,这是我第一次参加这样的活动,我很高兴能分享我的旅程!创作“探索宇宙”不仅是一次激动人心的冒险,让我将我对网络开发的热情与对太空的迷恋结合起来,而且对我来说也是一次重要的学习经历。

  1. 初次体验:第一次参加这样的活动,心里既紧张又兴奋。这项挑战将我推出了舒适区,并鼓励我将自己的技能应用到现实场景中。

  2. 规划和研究:我首先研究与太空相关的内容并决定要包含的关键元素。这帮助我以逻辑且引人入胜的方式构建信息。

  3. 设计:我选择了深色配色方案来模拟广阔的空间,使用鲜明的白色和微妙的动画来创造视觉兴趣。选择字体(Space Grotesk 和 Space Mono)是为了增强空间主题。这是我第一次如此专注于设计方面,它教会了我很多关于用户体验和视觉传达的知识。

  4. 开发

    • HTML:我专注于语义标记以确保可访问性和 SEO 友好性。这个项目帮助我理解了结构良好的 HTML 的重要性。
    • CSS:我使用网格和 Flexbox 等现代 CSS 技术进行布局。动画背景和滚动箭头具有挑战性,但实施起来很有意义。
    • JavaScript:我通过使每个天体可点击来添加交互性,链接到 NASA 的科学页面以获取更深入的信息。
  5. 挑战

    • 平衡视觉吸引力与性能,尤其是背景动画
    • 确保不同屏幕尺寸的响应能力,同时保持行星图像和布局的视觉完整性
    • 作为一名学生,时间管理是一个挑战,需要平衡这个项目与我的其他学术责任
  6. 学习内容

    • 提高了我创建沉浸式网络体验的技能
    • 更深入地了解 CSS 动画及其对性能的影响
    • 在策划内容的同时了解更多关于我们的太阳系的信息
    • 培养项目管理技能并学会如何在挑战的约束下工作
    • 对自己作为网络开发人员的能力充满信心

我对教育内容与引人入胜的设计的无缝集成感到特别自豪。每张行星卡在悬停时都会发生变化,邀请用户进一步探索,这是我非常喜欢的一个细节。作为一名学生,看到我的愿景成为现实是令人难以置信的回报,并激励我继续探索网络开发。

下一步

这段经历激发了人们对网络开发和太空教育的热情。展望未来,我很乐意通过以下方式扩展该项目:

  • 添加更多互动元素,也许是太阳系的3D模型
  • 实施测验功能来测试用户对空间的了解
  • 为每个天体创建包含更详细信息的单独页面

参与这项挑战是将创造力与技术技能相结合的绝佳机会,我很高兴能够继续完善和扩展我的项目。作为一名学生,这段经历非常宝贵,它为我提供了实用技能,增强了我的信心,并让我体验到了现实世界的网络开发挑战。期待以后能参加更多这样的活动!

稍后见。
谢谢你!