Belajar Dasar Pemrograman Web

Kriteria

• Terdapat elemen <header>, <footer>, <main>, <article>, dan <aside> di berkas HTML.
• Masing-masing elemen wajib berisi konten yang peruntukkannya sesuai dengan elemen tersebut (menerapkan konsep semantic HTML dalam menyusun struktur website).
• Contohnya, elemen header berisi judul dan navigation, sedangkan konten artikel tidak boleh berada pada elemen header.
• Wajib menampilkan identitas diri (biodata diri) yang minimal harus berisi foto asli diri dan nama sesuai profil Dicoding. Identitas diri wajib ditampilkan dalam elemen <aside>.
• Menyusun layout dengan menggunakan float atau flexbox.
• Tema yang ditampilkan bebas, kecuali tema Bandung.
• Semakin detail dan lengkap website Anda maka nilai submission bisa lebih tinggi.

Tips

Tips:

1. Ketika melakukan import suatu resource pada file HTML, pastikan untuk menggunakan relative path, dan hindari menggunakan absolute path karena berpotensi menyebabkan resource tersebut tidak dapat dibaca ketika dilakukan reviu. Berikut adalah contohnya:
   Absolute path: C:\Users\Documents\Projects\styles\style.css atau /home/user/Projects/styles/style.css
   Relative path: styles/style.css

2. Masih dalam topik yang sama mengenai asset/resource, pastikan dalam penulisan nama file atau folder sama persis dengan keadaan sebenarnya. Misalnya pada folder proyek, ada gambar dengan nama profile.jpg, maka harus di import juga dengan nama profile.jpg (bukan Profile.jpg). Hal ini bertujuan agar beberapa file tersebut bisa dimuat dengan baik oleh browser pada beberapa Sistem Operasi, seperti Linux.

3. Agar memudahkan Anda dalam membuat submission, gunakanlah IDE (Integrated Development Environtment) yang mendukung produktivitas dalam menuliskan kode. Misalnya Atom, VSCode, atau yang lainnya.

Penilaian

Submission Anda akan dinilai oleh reviewer dengan skala 1-5 berdasarkan dari parameter yang ada. Anda dapat menerapkan beberapa saran untuk mendapatkan nilai tinggi. Berikut sarannya.

• Menerapkan tampilan aplikasi yang menarik:
  • Memiliki pemilihan warna yang pas dengan tema aplikasi (Dalam memilih warna, Anda dapat memanfaatkan tools pemilihan warna seperti colorhunt.co).
  • Tata letak elemen yang pas.
  • Contoh: Tidak ada konten yang bertumpuk.
  • Penggunaan font yang pas dengan tema.
  • Penerapan padding dan margin yang pas.
• Menerapkan layout yang responsif:
  • Menggunakan media query untuk menyesuaikan layout pada berbagai ukuran layar device.
    Pastikan untuk tidak terdapat konten yang menumpuk maupun keluar dari kontainer ketika dicoba pada dekstop, tablet, dan juga mobile.
  • Menerapkan flexbox dalam menyusun layout.
• Terdapat penerapan JavaScript dalam memanipulasi DOM, seperti: (pilih satu)
  • Membuat dropdown.
  • Memanfaatkan logika seperti looping dalam menampilkan elemen dan konten.
  • Membuat slider.
  • dan lainnya yang mendukung tampilan website agar lebih hidup.