"If a worker wants to do his job well, he must first sharpen his tools." - Confucius, "The Analects of Confucius. Lu Linggong"
Online tools
Software tutorial
Site navigation
Programming
Front page > Programming > Frontend Attempt

Frontend Attempt

Published on 2024-11-04
Browse:540

This is a submission for Frontend Challenge v24.09.04, Glam Up My Markup: Space

What I Built

I built a space-themed landing page that provides information about space exploration. The goal was to create an attractive, minimalistic design that highlights key aspects of space history, current missions, future missions, and more. The page includes sections for home, about, history, current missions, future missions,a questionnaire, and contact information.

Demo
You can view the project live here. Below is a screenshot of the landing page:
Frontend Attempt
Space Exploration Landing Page

You can also check out the code on Github

Journey

Creating this project was an exciting journey. Here are some key points about the process:

Design and Layout: I aimed for a clean and minimalistic design with a dark, space-themed background to create an immersive experience. The layout is simple yet informative, making it easy for users to navigate through different sections.

Content: I included detailed information about the history of space exploration, current and future missions. The questionnaire section allows users to interact and share their thoughts on space exploration.

Challenges: One of the challenges was ensuring that the animations interactivity worked smoothly across different devices and screen sizes. I learned a lot about responsive design and cross-browser compatibility during this process.

Future Plans: I plan to add more interactive elements, such as a quiz about space facts and a timeline of significant events in space exploration. I also hope to integrate more advanced animations and transitions to make the page even more engaging.

CODE

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;
}

Team
This project was a solo effort, but I would like to credit the following resources and inspirations:

  • NASA for the stunning space images.

  • MDN Web Docs for the excellent documentation on web development.

License
This project is licensed under the MIT License. Feel free to use and modify the code as you see fit.

Release Statement This article is reproduced at: https://dev.to/abhiramp_2005/frontend-attempt-pp0?1 If there is any infringement, please contact [email protected] to delete it
Latest tutorial More>
ClassificationMore>
Learn japanese Learn Korean Learn Chinese Learn foreign language Game Common problem Technology peripherals AI Software tutorial Programming Article

Study Chinese

ToolMore>
Image base64 decoding
Chinese Pinyin
Unicode encoding
JS obfuscation encryption compression
URL hexadecimal encryption tool
UTF-8 encoding conversion tool
Online Ascii encoding and decoding tools
MD5 encryption tool
Hash/Hash text online encryption and decryption tool
Online SHA encryption

Disclaimer: All resources provided are partly from the Internet. If there is any infringement of your copyright or other rights and interests, please explain the detailed reasons and provide proof of copyright or rights and interests and then send it to the email: [email protected] We will handle it for you as soon as possible.

Copyright© 2022 湘ICP备2022001581号-3