Responsive web design | Building Piano

Desain Responsif memberi tahu halaman web Anda bagaimana tampilannya pada layar dengan ukuran berbeda.
Dalam kursus ini, Anda akan menggunakan CSS dan Desain Responsif untuk membuat kode piano. Anda juga akan mempelajari lebih lanjut tentang kueri media dan pemilih semu.

 

Langkah 1
Mulailah dengan struktur dasar HTML. Tambahkan deklarasi DOCTYPE dan elemen html, head, body, dan title.
Setel bahasa halaman ini ke bahasa Inggris. Setel judul ke Piano.

Langkah 2
Tambahkan dua tag meta, satu untuk mengoptimalkan halaman Anda untuk perangkat seluler, dan satu lagi untuk menentukan kumpulan karakter yang diterima untuk halaman tersebut.

 

Langkah 3
Saatnya mulai mengerjakan piano. Buat elemen div di dalam elemen tubuh Anda dengan id diatur ke piano.

Langkah 4
Sarang div kedua di dalam div Anda yang sudah ada, dan setel kelas menjadi kunci.

Langkah 5
Di dalam elemen .keys Anda, tambahkan tujuh elemen div. Beri mereka semua kunci kelas.

 

Langkah 6
Ingatlah bahwa atribut kelas dapat memiliki banyak nilai. Untuk memisahkan tuts putih dari tuts hitam, Anda akan menambahkan nilai kelas dua dari tuts hitam. Tambahkan ini ke elemen .key kedua, ketiga, kelima, keenam, dan ketujuh Anda.

Langkah 7
Sekarang salin kumpulan dari tujuh elemen .key, dan tempelkan dua kumpulan lainnya ke dalam div .keys.

 

Langkah 8
Tambahkan elemen tautan di dalam elemen kepala Anda. Untuk elemen link tersebut, setel atribut rel ke stylesheet dan href ke ./styles.css.

Langkah 9
Browser dapat menerapkan nilai margin dan padding default ke elemen tertentu. Untuk memastikan piano Anda terlihat benar, Anda perlu mengatur ulang model kotaknya.
Tambahkan pemilih aturan html ke file CSS Anda, dan setel properti ukuran kotak ke kotak batas.

 

Langkah 10
Sekarang setelah Anda mengatur ulang model kotak html, Anda juga harus meneruskannya ke elemen di dalamnya. Untuk melakukan ini, Anda dapat menyetel properti ukuran kotak untuk mewarisi, yang akan memberi tahu elemen yang ditargetkan untuk menggunakan nilai yang sama dengan elemen induk.
Anda juga perlu menargetkan elemen semu, yang merupakan kata kunci khusus yang mengikuti pemilih. Dua elemen semu yang akan Anda gunakan adalah elemen semu ::before dan ::after.
Pemilih ::before membuat elemen pseudo yang merupakan anak pertama dari elemen yang dipilih, sedangkan pemilih ::after membuat elemen pseudo yang merupakan anak terakhir dari elemen yang dipilih. Elemen semu ini sering digunakan untuk membuat konten kosmetik, yang akan Anda lihat nanti di proyek ini.
Untuk saat ini, buat pemilih CSS untuk menargetkan semua elemen dengan *, dan sertakan elemen semu dengan ::before dan ::after. Setel properti ukuran kotak untuk diwariskan.

 

Langkah 11
Sekarang targetkan elemen #piano Anda dengan pemilih id. Setel properti background-color ke #00471b, properti width ke 992px dan properti height ke 290px.

 

Langkah 12
Atur margin #piano ke 80px otomatis.

 

Langkah 13
Saatnya menata kunci. Di bawah aturan #piano, targetkan elemen .keys dengan pemilih kelas. Berikan aturan baru properti warna latar belakang #040404, properti lebar 949px, dan properti tinggi 180px.

 

Langkah 14
Beri .keys padding-left sebesar 2px.

 

Langkah 15
Pindahkan tuts ke posisinya dengan menyesuaikan pemilih #piano. Setel properti padding ke 90px 20px 0 20px.

Langkah 16
Saatnya menata kunci itu sendiri. Buat pemilih kelas untuk elemen .key. Setel background-color ke nilai #ffffff, properti position ke relative, properti width ke 41px, dan properti height ke 175px.

Langkah 17
Beri .key margin 2px dan properti float diatur ke kiri.

 

Langkah 18
Sekarang saatnya menggunakan pseudo-selector yang telah Anda siapkan sebelumnya. Untuk membuat kunci hitam, tambahkan pemilih .key.black--key::after baru. Ini akan menargetkan elemen dengan kunci kelas black--key, dan memilih elemen semu setelah elemen ini di HTML.
Di pemilih baru, atur background-color ke #1d1e22. Juga setel properti konten ke "". Ini akan membuat elemen semu menjadi kosong.
Properti konten digunakan untuk mengatur atau mengganti konten elemen. Secara default, pseudo-elements yang dibuat oleh ::before dan ::after pseudo-selector kosong, dan elemen tidak akan dirender ke halaman. Menyetel properti konten ke string kosong "" akan memastikan elemen dirender ke halaman saat masih kosong.

Jika Anda ingin bereksperimen, coba hapus properti background-color dan tetapkan nilai yang berbeda untuk properti konten, seperti "♥". Ingatlah untuk membatalkan perubahan ini setelah Anda selesai agar tes lulus.

Langkah 19
Berikan .key.black--key::setelah properti position disetel ke absolute dan properti left disetel ke -18px.

 

Langkah 20
Untuk .key.black--key::after, atur lebar ke 32px dan tinggi ke 100px.

 

Langkah 21
Piano membutuhkan logo freeCodeCamp untuk menjadikannya resmi.
Tambahkan elemen img sebelum elemen .keys Anda. Beri img kelas logo, dan setel src ke https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg. Berikan teks alternatif Logo CodeCamp gratis.

Langkah 22
Mulailah menata logo dengan membuat pemilih .logo. Atur lebar menjadi 200px, posisi absolut dan set teratas menjadi 23px.

 

Langkah 23
Elemen img membutuhkan induknya untuk menetapkan posisi sebagai titik referensi. Setel posisi pemilih #piano ke relatif.

 

Langkah 24
Untuk memperhalus tepi tajam piano dan tuts, mulailah dengan memberi #piano border-radius 10px.

Langkah 25
Beri pemilih .key nilai border-radius 0 0 3px 3px.

 

Langkah 26
Berikan .key.black--key::after pemilih radius batas 0 0 3px 3px agar cocok dengan tombol.

 

Langkah 27
@media at-rule, juga dikenal sebagai kueri media, digunakan untuk menerapkan CSS secara kondisional. Kueri media umumnya digunakan untuk menerapkan CSS berdasarkan lebar viewport menggunakan properti max-width dan min-width.
Pada contoh di bawah ini, padding diterapkan ke kelas .card ketika viewport lebarnya 960px ke bawah.

@media (max-width: 960px) {
  .card {
    padding: 2rem;
  }
}

Tambahkan kueri media yang akan diterapkan saat viewport 

lebarnya 768px ke bawah. 

 
Langkah 28
Tambahkan pemilih #piano baru dalam kueri @media Anda, 

dan atur lebarnya menjadi 358px.

Langkah 29
Di dalam kueri @media, tambahkan pemilih .keys dan atur lebarnya

menjadi 318px.


Langkah 30
Sekarang tambahkan pemilih .logo ke kueri @media, dan 

setel properti lebar ke 150px.

 

Langkah 31
Anda mungkin menyadari bahwa tombol runtuh saat jendela browser

lebih kecil dari 768px.

Setel luapan ke tersembunyi di pemilih .keys pertama, untuk mengatasi

masalah ini. 

Properti ini akan menyembunyikan elemen apa pun yang didorong

di luar 

nilai lebar .keys yang ditetapkan.

 

Langkah 32
Operator logis dapat digunakan untuk membuat kueri media yang

lebih kompleks.

Operator and logis digunakan untuk menanyakan dua kondisi media.
Misalnya, kueri media yang menargetkan lebar tampilan 

antara 500px dan 1000px adalah:

Tambahkan aturan @media lain untuk diterapkan jika jendela browser

lebih lebar dari 769px tetapi lebih kecil dari 1199px.
 


Langkah 33
Untuk aturan @media yang baru, atur lebar #piano menjadi 675px dan lebar 

.keys menjadi 633px.
Dengan itu, piano Anda sudah selesai!

 


Full script bisa di download disini