Nama   : Moh. Izzatul Haqi
NRP     : 5053231032
Kelas    : Pemrograman Web (M)


ETS Pemrograman Website

Soal : 
1. Apa itu responsive web design dan sebutkan dua teknik yang sering digunakan untuk mencapainya
2. Apa fungsi elemen <meta> dalam HTML dan sebutkan salah satu atribut penting yang dimilikinya?    Berikan contoh penggunaan dalam bentuk kode kemudian beri penjelasan
3. Buatlah halaman landing page sederhana untuk sebuah toko online yang menjual produk elektronik. Halaman ini harus mencakup: 
  • Header dengan logo dan navigasi (Home, Produk, Tentang Kami, Hubungi Kami).
  • Bagian utama dengan gambar produk unggulan dan tombol "Beli Sekarang*.
  • Footer dengan alamat toko dan link media sosial.
Buatlah desain webnya kemudian implementasikan dalam kode.
4. Seorang klien membutuhkan data member dalam halaman web produk. Buatlah sebuah form dan pengecekannya dengan javascript untuk memastikan isian datanya benar.

Jawaban :
1. Responsive web design adalah sebuah pendekatan dalam web design yang digunakan untuk membuat  tampilan website agar dapat menyesuaikan sesuai dengan device pengguna.
Dua teknik yang sering digunakan dalam responsive web design adalah :
1) Media Queries : 
  • Media Queries adalah sebuah teknik di CSS yang bergantung pada jenis perangkat seperti lebar layar. Dengan menggunakan Media Queries website dapat menyesuaikan tata letak, ukuran font, dan elemen lainnya sesuai dengan perangkat yang digunakan.
2) Flexible Grids and Layouts : 
  • Flexible Grids and Layouts adalah teknik dalam responsive web di mana grid yang fleksibel digunakan untuk mengatur komponen tata letak web. Grid ini menggunakan unit relatif seperti persentase (%), daripada ukuran tetap seperti piksel. Ini memungkinkan elemen untuk beradaptasi dengan berbagai ukuran layar.
2. Elemen <meta> dalam HTML merupakan elemen yang berada di bagian head yang memiliki fungsi untuk memberikan metadata atau informasi tambahan tentang halaman web kepada browser dan search engine. Metadata ini dapat mencakup informasi seperti karakter encoding, pengaturan responsif, deskripsi halaman, dan instruksi tentang SEO (Search Engine Optimization).


Elemen <meta name="viewport" content="width=device-width, initial-scale=1.0"> digunakan untuk mengontrol tampilan dan perilaku layout pada perangkat seluler dan tablet. Elemen ini memberi tahu browser cara menyesuaikan halaman web berdasarkan lebar dan skala layar perangkat pengguna.

3.  Landing Page produk Toko Online yang Menjual Produk Elektronik


GitHub :  Code
Hosting : Deploy

4. Form Pendaftaran Member


GitHub :  Code
Hosting : Deploy