Challenge 2: Base Apparel Coming Soon Page

 

Demo: https://nadiajamhari.github.io/Base-Apparel-coming-soon-page/

Solusi untuk semua cabaran daripada front-end mentor io: Frontend Mentor | nadiajamhari's profile

Apa yang saya gunakan dalam cabaran ini ?

Menggunakan 3 language utama untuk front-end development iaitu HTML, CSS dan Js.

Kali ini penggunaan Js adalah untuk validation form.

Apa yang saya belajar dalam cabaran ini ?

Cabaran kali ini banyak juga yang saya belajar, terutama ialah selecter baru dalam css.

Jujur, saya hanya mahir satu selector sahaja iaitu :hover . Cabaran kali ini saya boleh tahu bebapa selector

input[type="email"]::placeholder
input[type="email"]:focus-visible,
input[type="text"]:focus-visible
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
transition: background-color 5000s ease-in-out 0s;
-webkit-outofil ni sebenarnya satu css dimana ia tetap pada browser.
color: hsl(0, 36%, 70%) !important;
}

Untuk maklumat lebih lanjut mengenai Selector Css boleh rujuk

https://www.w3schools.com/cssref/css_selectors.asp

Apa yang paling mencabar ?

1. Apabila saya ingin hilangkan background color outofill . Sebab background saya patut background image keseluruhan. Tetapi encik google amat membantu. Ini pun selepas saya inspect dan lihat css apa yang menganggu. **penting untuk tahu ilmu inspect apabila buat front - end.
2. Media Breakpoint - Saya akui saya masih lemah mengenai responsive web. Masih perlu lagi menelaah, dan melihat beberapa mentor - mentor yang ada buat video khas tentang ilmu responsive web
3. Ada beberapa gambar saya tidak boleh access (tidak pasti kenapa) - contohnya seperti gambar button submit. Sepatutnya guna gambar, tapi sebab tiada gambar, jadi saya buat seakan - akan sama dengan design.