Unduh fm recipe page - Unduh Kode Sumber fm recipe page

fm recipe page

Kode sumber lainnya

1.0.0

Unduh

Frontend Mentor - Solusi Halaman Resep

Ini adalah solusi untuk tantangan halaman resep di Frontend Mentor. Frontend Mentor Tantangan membantu Anda meningkatkan keterampilan pengkodean Anda dengan membangun proyek yang realistis.

Daftar isi

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

Ringkasan

Tantangannya

Brief untuk proyek ini adalah membangun halaman resep dan membuatnya tampak sedekat mungkin dengan desain, dimulai dengan aset berikut:

File desain jpeg untuk tata letak seluler & desktop
Panduan Gaya untuk Font, Warna, dll.
Aset gambar yang dioptimalkan
File font variabel dan statis
File html dengan konten pra-tertulis

Tangkapan layar

Tautan

Solusi Mentor Frontend
Repositori GitHub
Situs langsung

Proses saya

Dibangun dengan

Markup HTML5 semantik
Properti Kustom CSS
Alur kerja mobile-first

Apa yang saya pelajari

Solusi ini mencakup tiga hal yang baru bagi saya:

Penanda Daftar Penataan
Menata tabel html
Menggunakan kueri media

Halaman resep berisi dua daftar yang tidak dipesan dengan waktu persiapan dan bahan, masing -masing, dan daftar yang dipesan dengan instruksi.

Untuk daftar yang dipesan, saya menata penghitung menggunakan ::marker Pseudo-Element:

. instructions li :: marker {
  font-weight : 700 ;
  color : var ( --brown-800 );
}

Melakukan penanda daftar untuk daftar yang tidak dipesan sedikit lebih menantang. Dalam file desain JPEG untuk tata letak seluler, penanda tidak duduk di sebelah baris teks pertama tetapi dipusatkan secara vertikal jika konten teks dari item daftar membungkus dua baris. Saya menggunakan penanda khusus dengan ::before elemen semu untuk memposisikan penanda dengan flexbox:

. unordered {
  list-style : none;
  padding-left : 0 ;
}

. unordered li {
  display : flex;
  align-items : center;
  gap : 1.75 rem ;
  padding-left : 0.25 rem ;
}

. unordered li :: before {
  content : "•" ;
  font-weight : 700 ;
}

Untuk aksesibilitas yang lebih baik, saya menggunakan role="list" pada elemen <ul> di HTML. Tanpa itu, list-style: none yang akan menyebabkan browser Safari tidak lagi mengenali daftar di pohon aksesibilitas, dan pembaca layar tidak akan lagi mengumumkan informasi seperti jumlah item.

Pengembangan lanjutan

Saya perlu belajar optimasi gambar! Saat ini, file terbesar dalam proyek ini adalah tangkapan layar yang saya ambil untuk readme ini. Saya belajar cara mengoptimalkan file font. Sekarang ukuran file tangkapan layar lebih besar dari ukuran semua file font yang digabungkan.

Sumber daya yang berguna

Styling Daftar Kreatif oleh Michelle Barker untuk Web.de - Artikel ini membantu saya mencari cara untuk menata penanda daftar untuk daftar yang dipesan dan tidak dipesan.
Styling Tables di MDN - Artikel ini adalah penyegaran yang baik untuk teknik penataan meja dasar.