Bagaimana saya bisa mengevaluasi pengetahuan kandidat tentang Html / CSS selama wawancara? [Tutup]

Saya mencoba menentukan beberapa pertanyaan wawancara yang baik untuk menilai kemampuan orang yang datang untuk pekerjaan Html / CSS, namun topik itu sangat luas, dan saya tidak yakin pertanyaan seperti apa yang bisa saya tanyakan untuk mengevaluasi HTML / seseorang dengan benar. Pengetahuan CSS.

Pertanyaan apa yang bisa saya tanyakan untuk mengevaluasi kemampuan Html / CSS kandidat selama wawancara?

Idealnya saya ingin mengajukan beberapa pertanyaan dan kemudian memberi mereka skenario kehidupan nyata untuk dilawan.

HTML dan CSS sulit diwawancarai karena beberapa alasan:

1. Mereka terlalu mendasar, dibandingkan, misalnya, dengan bahasa pemrograman,

2. Mereka sangat bergantung pada konteks pekerjaan. Contoh:

   • Jika Anda membuat skala Google, situs web yang sangat cepat dan optimal, orang-orang yang Anda wawancarai untuk pekerjaan itu tidak dapat mengabaikan apa itu CSS sprite.

   • Jika Anda membuat situs web yang valid XHTML W3C, Anda harus memastikan bahwa para kandidat mengetahui perbedaan antara XHTML 1.0 dan XHTML 1.1, atau apa atribut wajib untuk <img/>, dll.

   • Jika Anda membuat situs web yang mengerikan penuh dengan peretasan, Anda harus bertanya kepada orang-orang yang Anda wawancarai tentang bagaimana mereka akan melakukan peretasan ini atau itu, bagaimana mereka menyajikan berbagai CSS untuk peramban yang berbeda, dll.

   • dll.

3. Jika itu murni pekerjaan HTML dan CSS, orang tersebut harus bekerja dengan desainer di satu sisi, dan pengembang di sisi lain. Mereka harus tahu HTML dan CSS, tetapi yang jauh lebih berharga adalah kemampuan mereka untuk berinteraksi dengan orang-orang itu , dan untuk memahami kebutuhan perancang, persyaratan pengembang, dan kendala HTML dan CSS.

   Misalnya, mereka harus tahu cara menyusun HTML mereka sedemikian rupa sehingga akan mudah bagi pengembang JavaScript untuk menambahkan interaktivitas nanti.

Anda mungkin ingin memulai dengan beberapa pertanyaan dasar:

Apa browser favorit kamu?

Jika orang itu menjawab "Internet Explorer", segera hentikan wawancara: Anda tidak memerlukan orang seperti itu.

Tidak, saya bercanda. Jawabannya tidak relevan. Sebagai gantinya, Anda dapat menanyakan hal berikut:

Ceritakan tentang alat debug yang Anda gunakan di browser favorit Anda.

Primer menggunakan Chrome, saya bekerja setiap hari dengan Alat Pengembang. Alat-alat itu memungkinkan saya untuk:

• Lihat permintaan yang dibuat dari halaman,

• Pelajari waktu yang diperlukan untuk memuat halaman dan sumber daya terkait, terutama pencarian DNS, waktu tunggu dan penerimaan,

• Pelajari header dari elemen yang dikirim, serta indikator cache,

• Lihat DOM dan pelajari bagaimana penyeleksi CSS diterapkan,

Saya juga menggunakan YSlow yang berfungsi sebagai daftar periksa untuk pengoptimalan situs web yang membutuhkan skalabilitas tinggi. YSlow juga merupakan alat yang baik untuk menentukan apakah server dikonfigurasi dengan benar (mengirimkan tajuk yang benar, dll.).

Di Firefox, saya menggunakan Firebug, alat yang sangat mirip dengan Alat Pengembang dari Chrome. Alat pengembang juga tersedia dalam versi baru Internet Explorer, dan juga memungkinkan saya untuk beralih ke tampilan kompatibilitas IE7 ke IE10. Fitur terakhir ini sangat membantu, karena tanpa itu, saya akan dipaksa untuk menginstal beberapa mesin virtual hanya untuk pengujian warisan, atau untuk menggunakan lebih sering layanan berbayar seperti Litmus .

Tolong, jelaskan tentang apa itu <dl/>tag? Apa tujuan penggunaan tag ini? Bagaimana ini digunakan dalam praktek? Apa pendapat Anda tentang penggunaan yang diperluas ini?

Di sini, Anda ingin orang tersebut dapat menjelaskannya <dl/>untuk kamus, mengaitkan satu kunci <dt/>,, dengan satu atau beberapa nilai <dd/>,. Walaupun penggunaan utama tag ini murni terkait dengan semantik, pada praktiknya tag ini digunakan secara luas untuk mengganti tabel, contoh yang bagus adalah PHPBB3. Ini adalah hal yang baik ketika tabel memperlambat rendering halaman, tetapi harus digunakan dengan hati-hati: tidak hanya tabel yang masih sesuai dalam banyak kasus untuk menggambarkan data dengan lebih baik, tetapi juga mungkin ada cara lain, seperti biasa daftar, untuk menggambarkan konten tanpa menggunakan <dl/>.

Apa perbedaan antara tata letak tetap dan cairan? Apa pro dan kontra dari masing-masing?

Tata letak tetap memiliki lebar elemen yang telah ditentukan sebelumnya. Unsur-unsur tata letak cairan tergantung pada lebar halaman.

Tata letak yang diperbaiki membuatnya lebih mudah untuk mendesain halaman, terutama ketika ada banyak gambar lebar penuh. Bahkan tanpa grafis, itu masih lebih mudah, karena Anda hanya peduli untuk kasus yang tepat. Sebagai contoh, Programmers.SE menjadi situs web tata letak tetap, kolom yang menampilkan pertanyaan dan jawabannya selalu berukuran sama. Jika tata letak cairan akan digunakan untuk kolom ini, ini akan menimbulkan masalah: pada layar kecil, teks tidak dapat dibaca, karena garis akan terlalu pendek, sedangkan pada layar besar, garis akan sangat besar, sehingga teks akan terbaca juga.

Masalah dengan tata letak tetap adalah bahwa ia bekerja dengan baik untuk beberapa, resolusi paling banyak digunakan, tetapi gagal lebih atau kurang untuk yang lainnya. Ini menjadi sangat penting karena adopsi monitor yang sangat besar, lebar, dan meningkatnya penggunaan internet pada perangkat seluler yang kecil.

Tata letak cairan membantu dengan itu, tetapi desain lebih sulit dilakukan untuk situs web tersebut. Dalam beberapa skenario pada proyek yang dikelola dengan buruk, ini dapat menyebabkan peretasan HTML dan CSS, halaman besar, pemeliharaan yang rendah dan, selama pengembangan, dengan biaya yang lebih tinggi dan tenggat waktu yang terlewat.

Pada halaman dengan tata letak yang lancar, bagaimana Anda bisa menghindari situasi di mana kolom teks menjadi terlalu besar untuk bisa dibaca?

Anda dapat membatasi lebar zona teks dengan menggunakan max-widthproperti.

Apa pendapat Anda tentang potongan kode ini: <p color="Red" align="Center">Text here</p>?

Sepotong kode memiliki cacat untuk mencampur logika presentasi di dalam HTML. Logika presentasi harus dimasukkan ke dalam CSS karena beberapa alasan:

• Ini membantu pemisahan masalah dan kode bersih, yang berarti pemeliharaan lebih murah nanti,
• Itu membuat gaya dapat digunakan kembali dari halaman ke halaman, yang (di luar masalah rawatan) membantu memastikan bahwa Anda menggunakan gaya yang sama di seluruh situs web,
• Ini membantu mengurangi bandwidth, karena file CSS akan di-cache.

Setelah beberapa pertanyaan dasar seperti itu, Anda dapat mengajukan beberapa pertanyaan yang lebih rumit:

Bagaimana Anda menghindari duplikasi warna atau font di CSS, ketika warna atau font tersebut diterapkan ke beberapa elemen yang tidak dapat ditargetkan oleh pemilih tunggal? Apakah ada kekurangannya?

Anda melakukannya dengan menggunakan preprosesor CSS, seperti Sass atau KURANG. Mereka memungkinkan untuk menentukan warna, font dan bagian lain dari style di dalam variabel yang dapat Anda gunakan nanti dalam gaya Anda.

Kelemahan dari preprosesor CSS adalah:

• Mereka kadang-kadang perlu mengubah alur kerja pengembangan dan penyebaran, untuk memiliki kode CSS terbaru di browser,

• Mereka hanya diketahui oleh beberapa pengembang, yang mempersulit orang baru untuk bergabung atau memelihara proyek nanti,

• Tidak ada IDE baik dan cepat untuk Sass atau KURANG, dan integrasi di dalam IDE paling populer agak mengecewakan.

Berikan saya contoh hrefnilai gambar yang ada di CDN, mengingat gambar ini ditampilkan di situs web yang dapat diakses baik melalui HTTP dan HTTPS.

Karena HTTPS membutuhkan setiap sumber daya yang dipanggil juga berada di HTTPS (jika tidak, peringatan keamanan akan ditampilkan kepada pengguna dalam banyak kasus), tidak mungkin untuk menentukan tautan sebagai http://cdn.example.com/image.png. Untuk menautkan gambar dengan benar, //cdn.example.com/image.pngharus digunakan; browser kemudian akan menambahkan http:atau https:tergantung pada konteksnya.

Mengingat bahwa ukuran halaman dan jumlah permintaan pada situs web tidak dapat dioptimalkan dan konten tidak dapat diubah atau AJAX ditambahkan, bagaimana Anda memberi kesan kepada pengguna bahwa situs web lebih cepat? Apa yang terlibat dari perspektif HTML?

Jika HTTP 1.1 digunakan, halaman dapat dipotong . Ini berarti bahwa bagian pertama akan muncul lebih cepat, memberi kesan bahwa situs web lebih cepat daripada kenyataannya. Pengkodean transfer terpotong tidak mungkin di HTTP 1.0, yang berarti tidak ada yang bisa dilakukan dalam kasus ini.

Agar dapat menyajikan konten yang dipotong diperlukan dari perspektif HTML untuk menyusun ulang elemen, menempatkan yang paling kritis di bagian atas file (yang tidak berarti bahwa mereka harus muncul di bagian atas halaman). Misalnya, di situs web e-commerce, ketika pengguna ingin melihat detail produk, bongkahan pertama mungkin berisi <head/>dan detail produk. Potongan berikutnya mungkin berisi elemen utama seperti logo situs web, menu utama, hak cipta, dll. Akhirnya, potongan terakhir dapat berisi bagian "Orang yang membeli ini juga membeli", komentar dan peringkat produk, "Bagikan di Facebook", dll.

Akhirnya, Anda dapat meminta kandidat untuk bekerja pada skenario dunia nyata. Mungkin apa saja, seperti yang paling mudah di bawah ini, untuk skenario kompleks di mana orang tersebut harus berurusan dengan sprite CSS atau teknik pengoptimalan lanjutan lainnya, dengan inkonsistensi peramban, dll.

Tolong, bisakah Anda membuat halaman XHTML dengan dua zona: yang kiri, dengan daftar, dan yang kanan, dengan teks. Dua zona dipisahkan oleh garis vertikal, yang memanjang dari paling atas ke paling bawah halaman. Daftar dan teks dalam ukuran yang bervariasi, Anda tidak dapat memprediksi mana yang akan memiliki ketinggian terbesar. Anda tidak dapat menggunakan <table/>s.

Sebenarnya, ini cukup sederhana tetapi menunjukkan jika orang tersebut memiliki refleks untuk memikirkan ketinggian. Kandidat yang tidak berpengalaman akan membuat float:leftzona dan border-left:solid 1px #ccc;zona, tetapi lupa menambahkan perbatasan ke zona kiri dan memperluasnya sehingga dua perbatasan akan berada di tempat yang sama.

Berikut adalah beberapa pertanyaan yang ingin saya tanyakan tentang CSS:

1. Model kotak CSS. Margin, padding, dll. Model IE vs model W3C. Bagaimana seseorang bisa beralih di antara keduanya? Apa manfaat dan kelemahannya?
2. Penempatan CSS. Apa artinya elemen menjadi "dalam aliran" dan "keluar dari aliran"
3. inline-blockdan nilai tampilan lainnya. Perbedaan antara display: none;dan visibility: hidden; (ini adalah pertanyaan yang bagus dan mudah untuk orang yang baru mengenal CSS)
4. inline-blockvs floatuntuk tata letak.
5. Penyeleksi.
6. Reset CSS. Mengapa mereka dibutuhkan dan apa yang mereka capai?
7. Pertanyaan media dan desain responsif.
8. Bagaimana mengatur gaya dan bagaimana menjaga jumlah pemilih kecil. KURANG, Sass dan pra-prosesor CSS lainnya. CSS Berorientasi Objek.

Dan beberapa pertanyaan tentang HTML:

1. Mode DOCTYPE dan browser.
2. Mengapa beberapa tag lebih disukai daripada yang lain ( misalnya emvs i)?
3. Apa prinsip dasar yang harus diikuti seseorang untuk menjaga HTML dan CSS dikelola dan mudah dirawat?

Secara umum saya lebih menekankan pada CSS karena merupakan bidang yang sulit dipahami dan digunakan oleh banyak orang. Saya bertemu banyak kandidat yang memasukkan "CSS" di CV mereka tetapi tidak dapat menjawab pertanyaan tentang hal itu. Kebanyakan orang hanya mengatakan langsung, "Tidak, tidak, saya tahu CSS cukup baik untuk menghadapinya tetapi tidak cukup baik untuk membicarakannya."

Kadang-kadang itu ide yang baik untuk hanya memberikan tugas sederhana dan diwawancarai untuk diselesaikan. Katakanlah, rancang halaman sederhana dengan tata letak dan blokir gaya yang mendukung berbagai ukuran layar dan sesuaikan dengan itu. Itu harus memakan waktu sekitar satu atau dua jam dan kandidat harus menjelaskan apa yang dia lakukan dan mengapa.

Semoga berhasil dengan wawancara!

Jika Anda melakukan wawancara langsung, maka cara terbaik adalah meminta pengembang untuk menulis beberapa kode html / css.

Contoh (sangat umum dalam pengembangan nyata). Minta pengembang untuk menulis kode halaman html / css dengan:

1. Lebar cairan.
2. Header dengan tinggi 100px;
3. Tombol masuk di sudut kanan atas tajuk
4. Panel sisi kiri dan sisi kanan dengan lebar 100px dan tinggi 200px;
5. Panel tengah untuk teks artikel.
6. Footer, yang akan berada di bagian bawah. Bahkan jika artikel memiliki 1 baris.

UPD: Tentu saja, minta pengembang untuk menulis kode menggunakan divs saja (tanpa tabel).

Seharusnya terlihat seperti:

Tetapi sebelum wawancara langsung, saya sarankan Anda untuk menguji kandidat secara online. Karena lebih mudah untuk menguji kandidat secara online dan mengundang untuk wawancara hanya pengembang yang terampil, daripada menghabiskan waktu Anda pada setiap kandidat.

Saya duduk di beberapa wawancara desainer web, dan apa yang kami lakukan adalah mencetak tata letak Blog yang sangat sederhana di atas kertas, dan kemudian meminta kandidat untuk hanya menuliskan beberapa HTML dan / atau CSS pada halaman lebih dari 10 menit atau lebih, untuk memberikan kami ide dasar tentang bagaimana mereka akan kode itu. Ini beri tahu kami jika seseorang SEBENARNYA mengetahui CSS atau tidak. Kami hanya mencari hal-hal dasar seperti floats vs tables, atau apa pun, dan kami menjelaskan bahwa itu tidak harus sempurna dengan cara apa pun.

Banyak orang mengklaim pengalaman bertahun-tahun dengan CSS, tetapi ketika ditekan untuk menuliskannya, mereka menulis tebakan liar seperti " layout: floating; direction: up;" atau omong kosong semacam itu. Lebih dari 1 "CSS Ninja" bahkan tidak mendapatkan sintaks yang benar, ala " div(margin=5)". Itu sangat membuka mata saya, untuk melihat berapa banyak orang yang langsung berbohong dalam wawancara. Dan itu tampaknya lebih mudah untuk berbohong tentang CSS daripada tentang lurus ke atas. Anda tidak dapat mengetahui apa-apa tentang CSS, tetapi lakukan beberapa googling dan dapat membuang terminologi yang tepat dengan cepat. Anda tidak dapat benar-benar melakukannya secara efektif dengan konsep tingkat yang lebih tinggi seperti OOP, misalnya.

Ada tes online di mana Anda harus mencantumkan Tag HTML atau Properti CSS dalam 5 menit.

Meskipun ini bukan tes yang sepenuhnya tahan, ini bisa memberi tahu Anda jika kandidat cukup familiar dengan HTML / CSS.

Tentang pertanyaan, Anda dapat melakukan tes dengan kode sampel dan memintanya untuk mendeteksi kesalahan sintaksis / struktur.

Adapun skenario kehidupan nyata, semuanya tergantung pada apa yang akan dikerjakan oleh kandidat di perusahaan Anda. Jika Anda hanya menginginkan dev ujung depan, Anda dapat meminta desain situs web tentang topik acak.

Salah satu jenis tes yang berlaku untuk bahasa pemrograman dan bahasa markup adalah tinjauan kode. Buat sampel kecil (20 atau 30 baris) dengan campuran kesalahan sintaksis, kesalahan logika, kasus sudut, gaya yang bisa dibilang buruk ... Kemudian minta kandidat untuk mengidentifikasi apa pun yang menurut mereka mencurigakan.

Sangat penting untuk menggunakan tes semacam ini dengan benar: seperti halnya dengan pertanyaan wawancara, cara kandidat mendekati tugas itu penting, dan bukan hanya hasilnya.

Saya tidak akan memposting tes saya, tetapi beberapa petunjuk untuk cara menerapkan ini ke CSS:

• Kesalahan sintaksis: kehilangan beberapa titik koma. Sebagai bonus, Anda dapat melewatkan beberapa opsi (gaya yang dapat diperdebatkan) dan melihat apakah kandidat berkomentar.
• Kesalahan logika: menempatkan properti awalan setelah yang non-awalan. Ini juga menguji keakraban dengan CSS3 dan dapat memicu diskusi tentang cara standar dikembangkan.
• Kasing sudut: mis. Margin dengan 3 nilai - Anda akan terkejut betapa banyak orang yang tidak sadar bahwa itu mungkin. Jika kandidat tidak berkomentar, Anda dapat bertanya bagaimana itu ditafsirkan untuk memeriksa bahwa mereka mengabaikannya karena pengetahuan daripada ketidaktahuan.
• Kasus sudut lain: gunakan dua atau tiga bug IE7 favorit Anda. Ini akan membedakan mereka yang memiliki bekas luka pertempuran (yang harus melihat setidaknya satu dari mereka) dari yang tidak berpengalaman atau hanya Webkit.
• Gaya: kekhususan yang berlebihan, hilang emdan px, dll. Seseorang yang mempelajari sintaksis untuk wawancara mungkin tidak akan menangkap banyak dari ini.

Dari pengalaman pribadi, bekerja dengan pengembang lain, saya pikir pertanyaan tentang HTML & CSS tidak akan memilah orang-orang yang tahu apa yang mereka bicarakan dari orang-orang yang tahu apa yang sebenarnya mereka lakukan.

Saya akan merekomendasikan tes tiruan / prototipe berdasarkan pengalaman realistis dari kebutuhan perusahaan Anda.