Web Kosmik: Perjalanan Pelajar Melalui Angkasa dan Kod

Penyerahan Frontend Challenge v24.09.04: Terokai Kosmos

Ini ialah penyerahan untuk Frontend Challenge v24.09.04, Glam Up My Markup: Space

Apa yang Saya Bina

Saya mencipta "Teroka Kosmos," halaman pendaratan yang mengasyikkan dan mendidik yang membawa pelawat melalui sistem suria kita. Matlamatnya adalah untuk mereka bentuk tapak web yang menarik, menarik secara visual dan bermaklumat yang mencetuskan rasa ingin tahu tentang angkasa lepas dan badan angkasa.

Ciri utama halaman pendaratan termasuk:

• Tajuk yang menawan dengan latar belakang ruang dan anak panah tatal animasi
• Gambaran keseluruhan sistem suria kita
• Maklumat terperinci tentang setiap planet, termasuk fakta dan imej utama
• Bahagian yang dikhaskan untuk bulan terkenal dan objek angkasa lain
• Elemen interaktif yang memaut ke halaman sains NASA untuk penerokaan lanjut

Reka bentuk ini bertujuan untuk mengimbangi estetika dengan kandungan pendidikan, mencipta pengalaman yang menakjubkan secara visual dan merangsang intelek.

Demo

[Repositori Github]

Anda boleh melihat demo langsung projek di:

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.

1. 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.

2. 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.

3. 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.

4. 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.

5. 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

6. 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!

Atas ialah kandungan terperinci Web Kosmik: Perjalanan Pelajar Melalui Angkasa dan Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!