odin sign up form

Proyek Odin - Solusi Formulir Pendaftaran

Ini adalah solusi untuk diproyeksikan: formulir pendaftaran untuk proyek ODIN. Proyek ODIN menyediakan kurikulum pengkodean open-source gratis yang dapat diambil sepenuhnya online.

Proyek: Kalkulator adalah salah satu dari dua proyek dalam kursus HTML dan CSS menengah. Ini memberikan kesempatan untuk mempraktikkan konten yang tercakup dalam bagian kursus konsep HTML menengah , konsep CSS menengah , dan bentuk .

Daftar isi

• Ringkasan
  • Tangkapan layar
  • Tautan
• Proses saya
  • Dibangun dengan
  • Apa yang saya pelajari
  • Pengembangan lanjutan
  • Sumber daya yang berguna
• Pengarang
• Ucapan Terima Kasih

Ringkasan

Tangkapan layar

Tautan

• Repositori GitHub
• Situs langsung

Proses saya

Membangun dengan

• Markup HTML5 semantik
• Properti Kustom CSS
• CSS Flexbox

Apa yang saya pelajari

Tiga hal dalam solusi ini yang belum pernah saya gunakan dalam proyek sebelumnya adalah:

• Jenis Input HTML5
• Bentuk penataan
• Tumpukan Font Sistem

Fitur lain yang dibahas bagian kursus konsep HTML menengah , konsep CSS menengah , dan bentuk dan yang saya gunakan dalam solusi saya adalah:

• Reset CSS
• Unit relatif
• Font yang diselenggarakan sendiri
• Gaya teks
• Gambar latar belakang
• Bayangan kotak
• Kelas semu
• Properti Kustom

Pengembangan lanjutan

Untuk solusi saya, saya hanya menggunakan fitur HTML dan CSS yang tercakup dalam kurikulum jalur pembelajaran JavaScript tumpukan penuh ke proyek ini.

CSS Grid tercakup di bagian selanjutnya setelah proyek ini. Tata letak dalam file desain untuk proyek ini akan menjadi kandidat yang baik untuk tata letak desain pertama dan kisi CSS.

Desain responsif tidak tercakup sampai nanti dalam kurikulum. Saya membuat solusi saya responsif mungkin dengan alat yang saya miliki, menggunakan CSS Flexbox tetapi tidak ada kueri media.

Aksesibilitas web juga dibahas jauh kemudian dalam kurikulum. Saya menggunakan apa yang telah saya pelajari tentang aksesibilitas saat mengerjakan tantangan Mentor Frontend.

Memvalidasi bahwa bidang kata sandi cocok satu sama lain membutuhkan javascript. Menggunakan JavaScript untuk validasi formulir tercakup dalam pelajaran di masa depan. Solusi saya hanya menggunakan validasi situs klien untuk alamat email. Itu tidak memiliki bidang formulir yang diperlukan karena tidak ada yang ditunjukkan dalam file desain.

Formulir tidak memiliki backend dan tidak mengirim data yang dikirimkan ke mana pun.

Sumber daya yang berguna

• Tumpukan font ini akan meningkatkan kinerja situs Anda oleh Kevin Powell - video ini memberikan pengantar yang baik untuk System UI Font Stack.

Pengarang

Temukan saya online:

• Mastodon - @sabineemden

Ucapan Terima Kasih

Selain tumpukan font sistem, solusi ini menggunakan Font Norse Bold oleh Joël Carrouché. Font gratis untuk penggunaan pribadi dan komersial dan termasuk alfabet runic lengkap dengan dukungan unicode.

Solusi ini juga menggunakan reset CSS Josh Comeau dan skema warna hampir hitam & putih.