"إذا أراد العامل أن يؤدي عمله بشكل جيد، فعليه أولاً أن يشحذ أدواته." - كونفوشيوس، "مختارات كونفوشيوس. لو لينجونج"
الصفحة الأمامية > برمجة > محاولة الواجهة الأمامية

محاولة الواجهة الأمامية

تم النشر بتاريخ 2024-11-04
تصفح:259

هذا تقديم لـ Frontend Challenge v24.09.04، Glam Up My Markup: Space

ما قمت ببنائه

لقد قمت بإنشاء صفحة مقصودة ذات موضوع فضائي توفر معلومات حول استكشاف الفضاء. كان الهدف هو إنشاء تصميم جذاب وبسيط يسلط الضوء على الجوانب الرئيسية لتاريخ الفضاء والمهام الحالية والمهام المستقبلية والمزيد. تتضمن الصفحة أقسامًا للمنزل، وحول، والتاريخ، والمهمات الحالية، والمهمات المستقبلية، واستبيان، ومعلومات الاتصال.

عرض توضيحي
يمكنكم مشاهدة المشروع مباشرة هنا. فيما يلي لقطة شاشة للصفحة المقصودة:
Frontend Attempt
الصفحة المقصودة لاستكشاف الفضاء

يمكنك أيضًا التحقق من الكود على Github

رحلة

كان إنشاء هذا المشروع رحلة مثيرة. فيما يلي بعض النقاط الأساسية حول العملية:

التصميم والتخطيط : كنت أهدف إلى تصميم نظيف وبسيط مع خلفية داكنة ذات طابع فضائي لإنشاء تجربة غامرة. التصميم بسيط ولكنه غني بالمعلومات، مما يسهل على المستخدمين التنقل عبر الأقسام المختلفة.

المحتوى: قمت بتضمين معلومات مفصلة حول تاريخ استكشاف الفضاء والمهام الحالية والمستقبلية. يتيح قسم الاستبيان للمستخدمين التفاعل ومشاركة أفكارهم حول استكشاف الفضاء.

التحديات: كان أحد التحديات هو التأكد من أن تفاعل الرسوم المتحركة يعمل بسلاسة عبر الأجهزة وأحجام الشاشات المختلفة. لقد تعلمت الكثير عن التصميم سريع الاستجابة والتوافق عبر المتصفحات خلال هذه العملية.

الخطط المستقبلية : أخطط لإضافة المزيد من العناصر التفاعلية، مثل اختبار حول حقائق الفضاء وجدول زمني للأحداث الهامة في استكشاف الفضاء. وآمل أيضًا أن أدمج المزيد من الرسوم المتحركة والانتقالات المتقدمة لجعل الصفحة أكثر جاذبية.

شفرة

HTML



    Space Exploration

Welcome to Space Exploration

Home

Discover the wonders of the universe and our journey into space.

About

Learn about the history and future of space exploration.

History of Space Exploration

1. Early Concepts (Pre-20th Century)

Ancient Civilizations: Ancient cultures like the Babylonians, Egyptians, Greeks, and Chinese were among the first to study the stars and celestial objects, laying the foundation for astronomy.

17th Century: Johannes Kepler’s laws of planetary motion and Isaac Newton’s law of universal gravitation provided the necessary understanding for future space travel concepts.

2. Early 20th Century

Tsiolkovsky's Rocket Equation (1903): Russian scientist Konstantin Tsiolkovsky proposed the idea of space travel using rockets and formulated the Tsiolkovsky rocket equation, a fundamental principle in astronautics.

Robert Goddard (1926): An American physicist, Robert Goddard, successfully launched the world's first liquid-fueled rocket, proving that space travel was possible.

3. The Space Race (1950s-1970s)

Sputnik 1 (1957): The Soviet Union launched the first artificial satellite, Sputnik 1, into space, marking the beginning of the Space Age.

Yuri Gagarin (1961): Soviet cosmonaut Yuri Gagarin became the first human to orbit Earth aboard Vostok 1, a major milestone in space exploration.

Apollo 11 (1969): The United States' NASA successfully landed astronauts Neil Armstrong and Buzz Aldrin on the Moon, with Armstrong famously declaring, "That's one small step for man, one giant leap for mankind."

4. Post-Moon Landings and the Space Shuttle Era (1970s-1990s)

Space Stations:

  • Salyut and Mir (1971-1986): The Soviet Union launched a series of space stations, culminating in the long-lasting Mir, which operated until 2001.
  • Skylab (1973): The United States launched its first space station, Skylab, which was operational for six years.

Space Shuttle Program (1981-2011): NASA’s reusable Space Shuttle fleet completed 135 missions over 30 years, including launching satellites, conducting scientific research, and assembling the International Space Station (ISS).

5. International Cooperation and Space Exploration (1990s-Present)

International Space Station (ISS) (1998-present): A joint effort by NASA, Roscosmos (Russia), ESA (Europe), JAXA (Japan), and other partners, the ISS serves as a hub for scientific research and international collaboration in low Earth orbit.

Mars Exploration:

  • Rovers and Orbiters: The Mars rovers like Spirit, Opportunity, Curiosity, and Perseverance have provided detailed information about the Martian surface and its potential to support life.
  • ExoMars (2020): A European-Russian mission designed to search for signs of life on Mars.

6. Private Space Exploration and the Future (2000s-Present)

Commercial Spaceflight: Companies like SpaceX, Blue Origin, and Virgin Galactic are pioneering commercial space travel, aiming to make space more accessible to private individuals and researchers.

Current Missions

Explore the ongoing missions that are expanding our understanding of the universe.

Future Missions

Learn about the upcoming missions that aim to push the boundaries of space exploration.

Questionnaire















Contact

Get in touch with us for more information about space exploration.

© 2024 Space Exploration. All rights reserved.

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #000;
    color: #fff;
}

.space-background {
    background: rgba(0, 0, 0, 0.8) url('https://www.nasa.gov/sites/default/files/thumbnails/image/potw2048a.jpg') no-repeat center center;
    background-size: cover;
}

header {
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin-bottom: 0.5rem;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

main {
    padding: 2rem;
}

section {
    margin-bottom: 2rem;
}

form {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 5px;
}

form label {
    display: block;
    margin-bottom: 0.5rem;
}

form input[type="text"],
form input[type="email"],
form textarea {
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 1rem;
    border: none;
    border-radius: 5px;
}

form input[type="submit"] {
    background: #333;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    cursor: pointer;
}

form input[type="submit"]:hover {
    background: #555;
}

footer {
    text-align: center;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

فريق
كان هذا المشروع مجهودًا فرديًا، ولكن أود أن أشيد بالموارد والإلهامات التالية:

  • وكالة ناسا للصور الفضائية المذهلة.

  • MDN Web Docs للتوثيق الممتاز حول تطوير الويب.

رخصة
هذا المشروع مرخص بموجب ترخيص MIT. لا تتردد في استخدام وتعديل الكود كما تراه مناسبًا.

بيان الافراج تم نشر هذه المقالة على: https://dev.to/abhiramp_2005/frontend-attempt-pp0?1 إذا كان هناك أي انتهاك، يرجى الاتصال بـ [email protected] لحذفه
أحدث البرنامج التعليمي أكثر>

تنصل: جميع الموارد المقدمة هي جزئيًا من الإنترنت. إذا كان هناك أي انتهاك لحقوق الطبع والنشر الخاصة بك أو الحقوق والمصالح الأخرى، فيرجى توضيح الأسباب التفصيلية وتقديم دليل على حقوق الطبع والنشر أو الحقوق والمصالح ثم إرسالها إلى البريد الإلكتروني: [email protected]. سوف نتعامل مع الأمر لك في أقرب وقت ممكن.

Copyright© 2022 湘ICP备2022001581号-3