ETS - Pemrograman Web

Pertanyaan

1. Jelaskan apa yang dimaksud dengan web responsive? Dan bagaimana cara membangun web yang responsive?

Pengertian

Responsive web design atau desain web responsif adalah sebuah teknik atau metode bagi web designer untuk membuat suatu layout website yang dapat menyesuaikan diri sesuai dengan ukuran layar pengguna. Baik dari ukuran huruf, user interface, gambar dan tata letak akan menyesuaikan dengan lebar layar dan resolusi device yang digunakan. Selain dapat memengaruhi apa yang ditampilkan pada perangkat tertentu, ini juga untuk meningkatkan kenyamanan pengguna dalam mengunjungi suatu website.

Cara membangun website yang responsive

- Layout atau tata letak
Pertama, tentukan desain situs web Anda. Perencanaan ini harus mencakup bagaimana situs akan terlihat pada berbagai ukuran layar.
- Media
Contohnya dengan menggunakan gambar dengan dengan resolusi yang sesuai, dan kompres file untuk mempercepat waktu muat file.
- Tools uji responsive
Gunakan tools yang bisa menguji seberapa responsive web yang kita buat, semisal menggunak Chrome DevTools.
- Maintenance
Melakukan pemantauan atau maintenance secara berkala, agar website yang kita buat tetap terjaga dari sisi responsivenya.

2. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.

    - Web Portfolio (HTML + CSS): https://tech-docs-4ituk8exg-danielcristho.vercel.app
    1. Tampilan halaman About
        
        
        2. Tampilan halaman Skills & Tecnologies

        


        3. Tampilan halaman Contacts

         


        - Membuat layout sederhana (HTML & CSS): https://tech-docs-2wyfosgjg-danielcristho.vercel.app
           
          1. Halaman awal (home)
         

3. Sebuah perusahaan  ingin membuat aplikasi web untuk portal berita. Fungsi aplikasi untuk display berita terbaru, pengelompokan kategori, lowongan pekerjaan, informasi iklan atau event kegiatan. Selain itu tersedia juga form untuk pembaca memasukkan artikel atau opini yang ingin dimuat di portal berita. Desainkan front end website.

    - Untuk desain front end, saya menggunakan HTML, CSS dan JavaScript
    - Link demo      : https://youtu.be/KZh3CGIfDew

4. Implementasikan desain mu dan buat dokumentasi.
    - Tampilan Home & terdiri dari beberapa navbar 
    

   
        







    








Komentar

Posting Komentar

Postingan populer dari blog ini

PPB Tugas 2

Gambar
Membuat Aplikasi Sederhana Menggunakan Jetpack Compose Gloriyano C. Daniel Pepuho 5025201121 PPB D Link Project:  https://github.com/danielcristho/Mobile-Docs/tree/main/basics_codelab Pada pertemuan ke-2, diberikan tugas untuk mencoba untuk membuat program hello world menggunakan Jetpack Compose dan mengikut panduan dari  Android Codelabs . Tampilan Awal: Modifikasi MainActivity.kt: mengubah warna utama (primary) dari blue ke teal menyimpan teks di strings.xml agar mudah diubah tanpa di-harcode Hasil Akhir: Referensi:  https://developer.android.com/codelabs/build-your-first-android-app-kotlin#0
Baca selengkapnya

PPB Tugas 4

Gambar
Membuat aplikasi Dice Roller interaktif Gloriyano C. Daniel Pepuho 5025201121 PPB D Repository:  https://github.com/danielcristho/Mobile-Docs/tree/main/dice_roller Tampilan awal: Modifikasi file dice_1.xml sampai file dice_6.xml untuk menganti warna dadu: Menamabah keterangan untuk setiap dadu yang dilempar: Hasil akhir:
Baca selengkapnya

PPB Tugas 3

Gambar
Aplikasi Ucapan Selamat Ulang Tahun Gloriyano C. Daniel Pepuho 5025201121 PPB D Repository:  https://github.com/danielcristho/Mobile-Docs/tree/main/birthday_greetings Tampilan Awal: Modifikasi MainActivity.kt: Menambahkan input field Modifikasi ucapan ulang tahun Hasil akhir:
Baca selengkapnya