Frontend Challenge v24.09.04 Einreichung: Entdecken Sie den Kosmos
Dies ist eine Einreichung für Frontend Challenge v24.09.04, Glam Up My Markup: Space
Was ich gebaut habe
Ich habe „Explore the Cosmos“ erstellt, eine immersive und lehrreiche Landingpage, die Besucher auf eine Reise durch unser Sonnensystem mitnimmt. Ziel war es, eine ansprechende, optisch ansprechende und informative Website zu entwerfen, die Neugier auf den Weltraum und Himmelskörper weckt.
Zu den Hauptmerkmalen der Zielseite gehören:
- Eine fesselnde Kopfzeile mit Leerzeichen-Hintergrund und animiertem Scrollpfeil
- Umfassender Überblick über unser Sonnensystem
- Detaillierte Informationen zu jedem Planeten, einschließlich wichtiger Fakten und Bilder
- Abschnitte, die bemerkenswerten Monden und anderen Himmelsobjekten gewidmet sind
- Interaktive Elemente, die zur weiteren Erkundung auf die Wissenschaftsseiten der NASA verweisen
Das Design zielt darauf ab, Ästhetik mit pädagogischen Inhalten in Einklang zu bringen und ein Erlebnis zu schaffen, das sowohl visuell beeindruckend als auch intellektuell anregend ist.
Demo
[Github-Repository]
Sie können die Live-Demo des Projekts ansehen unter:
explorecosmos.web.app
Perjalanan
Sebagai pelajar, ini kali pertama saya menyertai acara seperti ini, dan saya teruja untuk berkongsi perjalanan saya! Mencipta "Teroka Kosmos" bukan sahaja pengembaraan menarik yang membolehkan saya menggabungkan minat saya untuk pembangunan web dengan daya tarikan saya terhadap ruang, tetapi juga pengalaman pembelajaran yang penting untuk saya.
Pengalaman Kali Pertama: Menjadi kali pertama saya menyertai acara sedemikian, saya gementar dan teruja. Cabaran ini mendorong saya keluar dari zon selesa dan menggalakkan saya menggunakan kemahiran saya dalam senario dunia sebenar.
Perancangan dan Penyelidikan: Saya bermula dengan menyelidik kandungan berkaitan ruang dan memutuskan elemen utama yang perlu disertakan. Ini membantu saya menyusun maklumat dengan cara yang logik dan menarik.
Reka Bentuk: Saya memilih skema warna gelap untuk meniru keluasan ruang, menggunakan warna putih terang dan animasi halus untuk mencipta minat visual. Pilihan fon (Space Grotesk dan Space Mono) telah dipilih untuk meningkatkan tema ruang. Ini adalah kali pertama saya memfokuskan dengan sangat mendalam pada aspek reka bentuk, dan ia mengajar saya banyak tentang pengalaman pengguna dan komunikasi visual.
-
Pembangunan:
- HTML: Saya menumpukan pada penanda semantik untuk memastikan kebolehaksesan dan mesra SEO. Projek ini membantu saya memahami kepentingan HTML yang tersusun dengan baik.
- CSS: Saya menggunakan teknik CSS moden seperti Grid dan Flexbox untuk reka letak. Latar belakang animasi dan anak panah tatal adalah mencabar tetapi bermanfaat untuk dilaksanakan.
- JavaScript: Saya menambah interaktiviti dengan menjadikan setiap badan angkasa boleh diklik, memautkan ke halaman sains NASA untuk mendapatkan maklumat yang lebih mendalam.
-
Cabaran:
- Mengimbangkan daya tarikan visual dengan prestasi, terutamanya dengan animasi latar belakang
- Memastikan responsif merentas saiz skrin yang berbeza sambil mengekalkan integriti visual imej dan reka letak planet
- Sebagai pelajar, pengurusan masa adalah satu cabaran, mengimbangi projek ini dengan tanggungjawab akademik saya yang lain
-
Pembelajaran:
- Meningkatkan kemahiran saya dalam mencipta pengalaman web yang mengasyikkan
- Mendapat pemahaman yang lebih mendalam tentang animasi CSS dan kesannya terhadap prestasi
- Ketahui lebih lanjut tentang sistem suria kita sambil memilih kandungan
- Membangunkan kemahiran pengurusan projek dan belajar cara bekerja di bawah kekangan cabaran
- Mendapat keyakinan terhadap kebolehan saya sebagai pembangun web
Saya amat berbangga dengan penyepaduan lancar kandungan pendidikan dengan reka bentuk yang menarik. Cara setiap kad planet berubah pada tuding, menjemput pengguna untuk meneroka lebih lanjut, adalah perincian yang sangat saya nikmati. Sebagai seorang pelajar, melihat visi saya menjadi nyata adalah sangat menggembirakan dan telah mendorong saya untuk terus meneroka pembangunan web.
Langkah Seterusnya
Pengalaman ini telah mencetuskan semangat untuk pembangunan web dan pendidikan angkasa lepas. Melangkah ke hadapan, saya ingin mengembangkan projek ini dengan:
- Menambah lebih banyak elemen interaktif, mungkin model 3D sistem suria
- Melaksanakan ciri kuiz untuk menguji pengetahuan pengguna tentang ruang
- Mencipta halaman individu untuk setiap badan angkasa dengan maklumat yang lebih terperinci
Menyertai cabaran ini merupakan peluang yang hebat untuk menggabungkan kreativiti dengan kemahiran teknikal, dan saya teruja untuk terus memperhalusi dan mengembangkan projek saya. Sebagai seorang pelajar, pengalaman ini sangat berharga, memberikan saya kemahiran praktikal, meningkatkan keyakinan saya dan memberi saya rasa cabaran pembangunan web dunia sebenar. Saya tidak sabar-sabar untuk menyertai lebih banyak acara seperti ini pada masa hadapan!
Jumpa lagi nanti.
Terima kasih!
Das obige ist der detaillierte Inhalt vonCosmic Web: Die Reise eines Studenten durch Raum und Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
