Frontend Attempt
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:
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Space Exploration</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="space-background">
<h1>Welcome to Space Exploration</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#history">History</a></li>
<li><a href="#current-missions">Current Missions</a></li>
<li><a href="#future-missions">Future Missions</a></li>
<li><a href="#questionnaire">Questionnaire</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="space-background">
<section id="home">
<h2>Home</h2>
<p>Discover the wonders of the universe and our journey into space.</p>
</section>
<section id="about">
<h2>About</h2>
<p>Learn about the history and future of space exploration.</p>
</section>
<section id="history">
<h2>History of Space Exploration</h2>
<h3>1. Early Concepts (Pre-20th Century)</h3>
<p><strong>Ancient Civilizations:</strong> 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.</p>
<p><strong>17th Century:</strong> Johannes Kepler’s laws of planetary motion and Isaac Newton’s law of universal gravitation provided the necessary understanding for future space travel concepts.</p>
<h3>2. Early 20th Century</h3>
<p><strong>Tsiolkovsky's Rocket Equation (1903):</strong> Russian scientist Konstantin Tsiolkovsky proposed the idea of space travel using rockets and formulated the Tsiolkovsky rocket equation, a fundamental principle in astronautics.</p>
<p><strong>Robert Goddard (1926):</strong> An American physicist, Robert Goddard, successfully launched the world's first liquid-fueled rocket, proving that space travel was possible.</p>
<h3>3. The Space Race (1950s-1970s)</h3>
<p><strong>Sputnik 1 (1957):</strong> The Soviet Union launched the first artificial satellite, Sputnik 1, into space, marking the beginning of the Space Age.</p>
<p><strong>Yuri Gagarin (1961):</strong> Soviet cosmonaut Yuri Gagarin became the first human to orbit Earth aboard Vostok 1, a major milestone in space exploration.</p>
<p><strong>Apollo 11 (1969):</strong> 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."</p>
<h3>4. Post-Moon Landings and the Space Shuttle Era (1970s-1990s)</h3>
<p><strong>Space Stations:</strong></p>
<ul>
<li><strong>Salyut and Mir (1971-1986):</strong> The Soviet Union launched a series of space stations, culminating in the long-lasting Mir, which operated until 2001.</li>
<li><strong>Skylab (1973):</strong> The United States launched its first space station, Skylab, which was operational for six years.</li>
</ul>
<p><strong>Space Shuttle Program (1981-2011):</strong> 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).</p>
<h3>5. International Cooperation and Space Exploration (1990s-Present)</h3>
<p><strong>International Space Station (ISS) (1998-present):</strong> 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.</p>
<p><strong>Mars Exploration:</strong></p>
<ul>
<li><strong>Rovers and Orbiters:</strong> The Mars rovers like Spirit, Opportunity, Curiosity, and Perseverance have provided detailed information about the Martian surface and its potential to support life.</li>
<li><strong>ExoMars (2020):</strong> A European-Russian mission designed to search for signs of life on Mars.</li>
</ul>
<h3>6. Private Space Exploration and the Future (2000s-Present)</h3>
<p><strong>Commercial Spaceflight:</strong> Companies like SpaceX, Blue Origin, and Virgin Galactic are pioneering commercial space travel, aiming to make space more accessible to private individuals and researchers.</p>
</section>
<section id="current-missions">
<h2>Current Missions</h2>
<p>Explore the ongoing missions that are expanding our understanding of the universe.</p>
</section>
<section id="future-missions">
<h2>Future Missions</h2>
<p>Learn about the upcoming missions that aim to push the boundaries of space exploration.</p>
</section>
<section id="questionnaire">
<h2>Questionnaire</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="question1">1. What is your favorite planet?</label><br>
<input type="text" id="question1" name="question1" required><br><br>
<label for="question2">2. Have you ever visited a space museum?</label><br>
<input type="radio" id="yes" name="question2" value="yes">
<label for="yes">Yes</label><br>
<input type="radio" id="no" name="question2" value="no">
<label for="no">No</label><br><br>
<label for="question3">3. What interests you the most about space exploration?</label><br>
<textarea id="question3" name="question3" rows="4" cols="50" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Get in touch with us for more information about space exploration.</p>
</section>
</main>
<footer class="space-background">
<p>© 2024 Space Exploration. All rights reserved.</p>
</footer>
</body>
</html>
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.
The above is the detailed content of Frontend Attempt. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1422
52
1316
25
1268
29
1241
24
Demystifying JavaScript: What It Does and Why It Matters
Apr 09, 2025 am 12:07 AM
JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.
The Evolution of JavaScript: Current Trends and Future Prospects
Apr 10, 2025 am 09:33 AM
The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.
JavaScript Engines: Comparing Implementations
Apr 13, 2025 am 12:05 AM
Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Python vs. JavaScript: The Learning Curve and Ease of Use
Apr 16, 2025 am 12:12 AM
Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
JavaScript: Exploring the Versatility of a Web Language
Apr 11, 2025 am 12:01 AM
JavaScript is the core language of modern web development and is widely used for its diversity and flexibility. 1) Front-end development: build dynamic web pages and single-page applications through DOM operations and modern frameworks (such as React, Vue.js, Angular). 2) Server-side development: Node.js uses a non-blocking I/O model to handle high concurrency and real-time applications. 3) Mobile and desktop application development: cross-platform development is realized through ReactNative and Electron to improve development efficiency.
How to Build a Multi-Tenant SaaS Application with Next.js (Frontend Integration)
Apr 11, 2025 am 08:22 AM
This article demonstrates frontend integration with a backend secured by Permit, building a functional EdTech SaaS application using Next.js. The frontend fetches user permissions to control UI visibility and ensures API requests adhere to role-base
Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)
Apr 11, 2025 am 08:23 AM
I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing
From C/C to JavaScript: How It All Works
Apr 14, 2025 am 12:05 AM
The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
