25 Pertanyaan & Jawaban Wawancara Pengembang Web yang Harus Diketahui

Pengembang web terus diminati seiring dengan pertumbuhan Internet. Namun, untuk mendapatkan pekerjaan tersebut, Anda harus terlebih dahulu memenuhi syarat untuk mengikuti sesi wawancara dengan pemberi kerja.

Meskipun tim yang lebih besar cenderung merekrut pengembang front-end atau back-end secara khusus, tim yang lebih kecil dan perusahaan rintisan akan lebih sering memilih pengembang full-stack. Jadi, ada baiknya Anda mengetahui sebanyak mungkin.

Berikut ini adalah daftar 25 pertanyaan wawancara pengembang web yang harus diketahui beserta jawabannya untuk membantu Anda bersiap.

1. Apa Peran HTML, JavaScript, dan CSS dalam Pengembangan Web?

HTML adalah singkatan dari HyperText Markup Language dan merupakan bahasa standar untuk mengembangkan dokumen yang akan dipublikasikan di web. JavaScript dan CSS adalah tambahannya.

JavaScript pada awalnya dirancang sebagai bahasa pemrograman sisi klien, yang dijalankan di browser untuk menghasilkan lebih banyak fungsi di halaman web. CSS merupakan singkatan dari Cascading Style Sheets dan digunakan untuk menampilkan elemen di layar.

2. Apa Itu Desain Web Responsif?

Desain web responsif adalah pendekatan pengembangan web yang bertujuan untuk menciptakan pengalaman terbaik bagi pengguna dengan menyesuaikan tampilan situs web berdasarkan perangkat atau lingkungan pengguna tersebut.

Tujuannya adalah agar situs web terlihat bagus di semua perangkat dan ini memerlukan perubahan dinamis yang mengurangi atau menambah ukuran kotak dan penyelarasan berdasarkan ukuran layar atau orientasi perangkat.

3. Apa Manfaat Menggunakan Kerangka Kerja?

Ada banyak manfaat menggunakan framework dalam mengembangkan aplikasi web. Manfaat utamanya adalah sebagai berikut:

1. Proses pengembangan yang lebih mudah dengan praktik terbaik.
2. Pengembangan yang lebih cepat dengan proyek permulaan menghemat waktu.
3. Penggunaan kode yang telah teruji dan terbukti.
4. Seringkali memberikan keamanan yang lebih baik.
5. Menghemat biaya, terutama untuk proyek yang lebih besar.

4. Apa itu JavaScript Callback?

Panggilan balik JavaScript adalah fungsi yang harus dijalankan setelah fungsi lain. Nama dan argumen fungsi panggilan balik dapat diteruskan sebagai argumen ke fungsi pertama, selain itu fungsi pertama juga dapat meneruskan argumen secara internal ke fungsi panggilan balik yang merupakan hasil perhitungannya.

Fungsi panggilan balik paling baik digunakan dengan fungsi asinkron yang harus menunggu fungsi lain menyelesaikan eksekusi terlebih dahulu.

5. Jelaskan perbedaan antara Cakupan Lokal dan Cakupan Global dalam JavaScript

Variabel yang didefinisikan ditulis dalam kata-kata dan ini hanya bermakna dalam konteks yang tepat. Cakupan lokal dan global mengacu pada konteks variabel yang didefinisikan ini. Variabel global harus didefinisikan di luar suatu fungsi, sedangkan variabel lokal didefinisikan di dalam suatu fungsi.

Dengan demikian, variabel global memiliki cakupan global, yang berarti variabel tersebut dapat diakses dari mana saja dalam program. Namun, variabel lokal memiliki cakupan lokal dan ini berarti variabel tersebut hanya dapat diakses dari dalam fungsi.

6. Jelaskan Z-Index dalam CSS

Indeks-z adalah properti elemen yang digunakan untuk menentukan urutan tumpukan elemen. Urutan tumpukan mengacu pada kemampuan suatu elemen untuk berada di belakang atau di depan elemen lain seperti tumpukan kartu.

Elemen dengan susunan tumpukan yang lebih tinggi muncul di depan elemen dengan susunan tumpukan yang lebih rendah. Dalam konteks ini, memberi elemen susunan tumpukan 2 atau 100 menjamin elemen tersebut akan ditampilkan di atas semua elemen lain pada halaman. Demikian pula, halaman tanpa susunan tumpukan yang ditentukan akan menumpuk elemen bawah dari sumber lebih tinggi daripada elemen atas.

7. Apa itu Marquee dalam HTML?

Marque adalah tag kontainer dalam HTML, yang digunakan untuk menampilkan teks yang bergulir. Tag ini memungkinkan Anda mengontrol arah dan kecepatan gulir. Namun, Marquee tidak lagi digunakan dalam HTML5, dan Anda disarankan untuk menggunakan CSS sebagai gantinya.

Contoh pengguliran dengan marquee:

Teks gulungan tenda

8. Sebutkan Cara Utama untuk Mengurangi Waktu Pemuatan Halaman

Ada banyak langkah yang dapat dilakukan pengembang untuk meningkatkan waktu muat halaman, yang utama adalah:

• Optimalkan gambar dan kurangi ukurannya
• Singkirkan widget yang tidak diperlukan
• Kurangi pencarian hingga seminimal mungkin
• Hosting situs web pada host yang layak
• Gunakan Accelerated Mobile Pages atau situs statis
• Gambar pemuatan malas
• Minimalkan kode Anda

9. Apa perbedaan antara Canvas dan SVG?

SVG adalah singkatan dari Scalable Vector Graphics dan Tag adalah elemen wadah untuk membuat grafik, seperti lingkaran, kotak, elips, dan sebagainya. Anda dapat memodifikasi SVG menggunakan CSS atau JavaScript dan karena dapat diskalakan, maka SVG berfungsi dengan baik untuk keluaran beresolusi tinggi.

Itu Sebaliknya, container berbasis raster dan tidak dapat diskalakan. Container juga digunakan untuk membuat grafik tetapi hanya dapat dimodifikasi oleh JavaScript. Container lebih efisien dalam menangani sejumlah besar objek.

10. Bagaimana Null Berbeda Dari Belum diatur?

Null adalah representasi tanpa nilai. Null umumnya digunakan sebagai tempat penempatan untuk menginisialisasi variabel terdefinisi yang belum diberi nilai riil. Sebaliknya, Undefined merujuk pada variabel terdefinisi yang belum diinisialisasi.

Dalam JavaScript:

var variabelA;

var variabelB = null;

alert(variabelA); //menunjukkan tidak terdefinisi

alert(variabelB); //menunjukkan null

11. Apa bedanya ID dengan Kelas?

ID dan class adalah dua metode untuk mengidentifikasi dan menangani elemen dalam dokumen HTML. Namun, perbedaan utama antara keduanya adalah ID harus unik. Dengan kata lain, dua elemen tidak dapat berbagi ID yang sama, tetapi dua elemen atau lebih dapat berbagi class yang sama.

ID digunakan untuk menangani elemen-elemen tertentu, sedangkan kelas digunakan untuk menangani sekelompok elemen yang memiliki satu atau lebih ciri umum.

12. Bagaimana Anda Meningkatkan Fitur Keamanan Situs Web?

Beberapa langkah yang dapat Anda ambil untuk meningkatkan keamanan situs web meliputi:

1. Menerapkan kebijakan kata sandi yang kuat. Ini berarti memeriksa apakah kata sandi yang dipilih memiliki lebih dari 8 karakter dan berisi angka, karakter khusus, serta karakter huruf besar dan kecil.
2. Penggunaan captcha atau tindakan anti-bot lainnya.
3. Menggunakan metode autentikasi 2 faktor atau multi faktor seperti OTP (One-Time-Password) dan dongle perangkat keras, jika diperlukan.
4. Menggunakan host dengan perlindungan DDoS dan fitur pencadangan otomatis.

13. Apa perbedaan localStorage dengan sessionStorage?

Sistem localStorage dan sessionStorage memungkinkan pengembang menyimpan data di browser web. Namun, localStorage bersifat persisten, sedangkan sessionStorage tidak. Dengan kata lain, data yang disimpan di localStorage akan tersedia di browser selama beberapa sesi, sedangkan data yang disimpan di sessionStorage akan dihapus setelah tab browser ditutup.

14. Sebutkan beberapa perbaikan HTTP2.0 dibandingkan HTTP 1.1

Protokol HTTP/2 diterbitkan pada tahun 2015 dan menawarkan peningkatan signifikan, seperti:

1. Keamanan yang lebih baik menggunakan biner daripada teks.
2. Performa lebih baik.
3. Latensi Lebih Rendah.
4. Penanganan kesalahan yang lebih baik.
5. Biaya overhead lebih rendah.

15. Apa Perbedaan Antara Git Pull dan Git Merge?

Perintah git pull memungkinkan Anda mengunduh konten dari repositori jarak jauh, lalu memperbarui repositori lokal Anda dengan konten yang diunduh.

Sebaliknya, perintah git merge memungkinkan Anda menggabungkan dua cabang yang dikembangkan secara terpisah dari proyek yang sama. Perintah merge harus dilakukan dari cabang yang ingin Anda gabungkan, dan ini biasanya adalah cabang utama.

16. Apa perbedaan GET dengan POST dan PUT?

Metode HTML GET digunakan oleh browser untuk meminta informasi dari server, sedangkan metode POST dan PUT digunakan untuk mengirim informasi dari browser ke server.

Tetapi sementara permintaan POST dapat sekadar menambahkan data ke sumber daya server, permintaan PUT digunakan untuk mengganti sumber daya sepenuhnya dengan menggunakan muatan permintaan.

17. Daftar Format Pertukaran Data Paling Populer

Berikut adalah format pertukaran data paling populer hingga saat ini:

1. XML
2. YAML
3. CSV
4. JSON
5. HTTP
6. SQL

18. Sebutkan 3 Jenis Kotak Popup

Kotak pop-up dalam JavaScript digunakan untuk menampilkan pesan kepada pengguna, meminta masukan, dan terkadang melakukan keduanya. Berikut adalah 3 jenis pop-up JavaScript:

1. Kotak Peringatan – Ini menampilkan pesan Anda beserta tombol 'OK'.
2. Kotak Konfirmasi – Kotak dialog ini memiliki tombol ‘OK’ dan ‘Batal’ yang dapat memengaruhi kode.
3. Kotak Prompt – Kotak ini berisi kotak masukan teks untuk mengumpulkan informasi dari pengguna.

19. Sebutkan beberapa cara untuk memasukkan kode CSS

Ada 3 cara untuk memasukkan CSS ke dalam dokumen HTML. Yaitu:

1. CSS eksternal – Anda menyertakan dokumen .css menggunakan di dalam dokumen tag.
2. CSS Tertanam – Anda memasukkan kode CSS ke dalam tag, di mana saja dalam dokumen.
3. CSS sebaris – Anda menggunakan pasangan style=”CSS-property:value” di dalam tag HTML Anda, misalnya. Persegi!

20. Bagaimana jendela.onload Berbeda dengan document.onload?

Window.onload digunakan untuk mengeksekusi kode JavaScript setelah browser memuat pohon DOM halaman dan dasar-dasar lainnya, termasuk gambar, kode CSS, dan skrip.

Sementara document.onload dijalankan segera setelah DOM siap, ini dapat berarti bahkan sebelum gambar dan pustaka eksternal dimuat.

21. Bagaimana cara menyembunyikan elemen menggunakan CSS?

Anda dapat menyembunyikan elemen HTML menggunakan 3 metode CSS, yaitu:

1. Tampilan: tidak ada; – Elemen tidak dirender atau ditampilkan.
2. Visibilitas: tersembunyi; – Elemen dirender tetapi tidak ditampilkan.
3. Posisi: Mutlak; – Elemen dirender dan ditampilkan, tetapi diposisikan di luar area tampilan.

22. Apa Saja Kegunaan Terbaik Ajax?

Ajax adalah metode pemuatan data dari server di latar belakang menggunakan JavaScript. Metode ini memiliki banyak kegunaan, seperti validasi data, aplikasi obrolan, komentar, pemfilteran data, penyuntingan visual, jajak pendapat, dan sebagainya.

23. Sebutkan beberapa fitur baru CSS3

CSS3 mencakup banyak fitur modern dan bermanfaat dibandingkan CSS2, seperti:

1. Sudut membulat untuk kotak dan gambar.
2. Animasi objek.
3. Variabel & fungsi untuk deklarasi.
4. Grid & Flexbox untuk desain responsif.
5. Gradien untuk warna latar belakang.
6. Kontrol opasitas menggunakan rgba.
7. Efek bayangan untuk kotak dan teks.
8. Transisi untuk Melayang dan Fokus pada elemen.

24. Jenis input baru apa saja yang diperkenalkan dalam HTML5?

Tipe input adalah nilai yang Anda berikan pada elemen input dalam dokumen HTML.

Contohnya adalah:

or

Jenis masukan HTML5 yang baru meliputi:

1. Tanggal
2. Warna
3. Email
4. Cari
5. tel
6. Bulan
7. Kisaran angka
8. Bulan
9. URL
10. Tanggal waktu-lokal

25. Jelaskan Elemen Media HTML5

HTML5 menyertakan lebih banyak tag elemen untuk menangani jenis dan sumber media. Tag-tag tersebut adalah:

• – untuk video MP4, WebM, dan Ogg.
• – untuk mendefinisikan beberapa sumber dalam format yang berbeda.
• – untuk audio MP3, Ogg, dan WAV.
• – wadah untuk menyertakan sumber daya eksternal mulai dari gambar hingga video dan halaman web.
• – untuk menentukan trek subtitle untuk video.

Kesimpulan

Mencapai akhir daftar 25 pertanyaan wawancara pengembang web yang harus diketahui, Anda dapat melihat bahwa dibutuhkan kombinasi berbagai teknologi untuk menjadi pengembang tumpukan penuh.

Meskipun ini adalah panduan yang membahas berbagai aspek pekerjaan, panduan ini tidak lengkap. Jadi, Anda sendiri yang harus mengidentifikasi area yang belum Anda pahami dan kemudian mempelajarinya.