HTML และ CSS นั้นยากที่จะสัมภาษณ์ด้วยเหตุผลบางประการ:
พวกมันพื้นฐานเกินไปเมื่อเทียบกับภาษาการเขียนโปรแกรม
พวกเขาขึ้นอยู่กับบริบทของงานเป็นอย่างมาก ตัวอย่าง:
หากคุณสร้างมาตราส่วนของ Google เว็บไซต์ที่เร็วที่สุดและได้รับการปรับปรุงให้ดีที่สุดคนที่คุณสัมภาษณ์สำหรับงานจะต้องไม่เพิกเฉยว่าสไปรต์ CSS คืออะไร
หากคุณสร้างเว็บไซต์ที่ถูกต้อง XHTML W3C คุณควรตรวจสอบให้แน่ใจว่าผู้สมัครทราบความแตกต่างระหว่าง XHTML 1.0 และ XHTML 1.1 หรือแอตทริบิวต์ที่จำเป็นสำหรับสิ่ง<img/>อื่น ๆ
หากคุณสร้างเว็บไซต์ที่น่ากลัวซึ่งเต็มไปด้วยแฮ็คคุณควรถามคนที่คุณสัมภาษณ์เกี่ยวกับวิธีที่พวกเขาจะทำเช่นนั้นหรือแฮ็กวิธีที่พวกเขาให้บริการ CSS ที่แตกต่างกันสำหรับเบราว์เซอร์ที่แตกต่างกันเป็นต้น
เป็นต้น
หากเป็นงาน HTML และ CSS ที่บริสุทธิ์บุคคลนั้นจะต้องทำงานกับนักออกแบบในมือเดียวและนักพัฒนาในอีกทางหนึ่ง พวกเขาต้องรู้จัก HTML และ CSS แต่สิ่งที่มีค่ามากกว่าคือความสามารถในการโต้ตอบกับผู้คนเหล่านั้นและเข้าใจทั้งความต้องการของนักออกแบบข้อกำหนดของนักพัฒนาและข้อ จำกัด ของ HTML และ CSS
ตัวอย่างเช่นพวกเขาต้องรู้วิธีการจัดโครงสร้าง HTML ของพวกเขาในลักษณะที่จะเป็นเรื่องง่ายสำหรับนักพัฒนา JavaScript ในการเพิ่มการโต้ตอบในภายหลัง
คุณอาจต้องการเริ่มต้นด้วยคำถามพื้นฐาน:
เบราว์เซอร์ที่คุณชอบคืออะไร?
หากบุคคลนั้นตอบว่า "Internet Explorer" ให้หยุดการสัมภาษณ์ทันที: คุณไม่ต้องการใครแบบนั้น
ไม่ฉันล้อเล่น คำตอบไม่เกี่ยวข้อง คุณสามารถถามสิ่งต่อไปนี้แทน:
บอกฉันเกี่ยวกับเครื่องมือดีบั๊กที่คุณใช้ในเบราว์เซอร์ที่คุณโปรดปราน
หลักโดยใช้ Chrome ฉันทำงานทุกวันด้วยเครื่องมือสำหรับนักพัฒนา เครื่องมือเหล่านั้นทำให้ฉัน:
ดูคำขอจากหน้า
ศึกษาเวลาที่ใช้ในการโหลดหน้าเว็บและแหล่งข้อมูลที่เกี่ยวข้องโดยเฉพาะอย่างยิ่งการค้นหา DNS รอและรับเวลา
ศึกษาส่วนหัวขององค์ประกอบที่ส่งรวมถึงตัวบ่งชี้แคช
ดู DOM และศึกษาวิธีใช้ตัวเลือก CSS
ฉันยังใช้ YSlow ซึ่งทำหน้าที่เป็นรายการตรวจสอบสำหรับการเพิ่มประสิทธิภาพของเว็บไซต์ที่ต้องการความยืดหยุ่นสูง YSlow ยังเป็นเครื่องมือที่ดีเมื่อต้องพิจารณาว่ามีการกำหนดค่าเซิร์ฟเวอร์อย่างถูกต้องหรือไม่ (ส่งส่วนหัวที่ถูกต้อง ฯลฯ )
ใน Firefox ฉันใช้ Firebug ซึ่งเป็นเครื่องมือที่คล้ายกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จาก Chrome เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ยังมีอยู่ใน Internet Explorer เวอร์ชันใหม่และทำให้ฉันสามารถเปลี่ยนเป็นมุมมองที่เข้ากันได้กับ IE7 เป็น IE10 คุณลักษณะสุดท้ายนี้มีประโยชน์มากเพราะหากไม่มีฉันจะถูกบังคับให้ติดตั้งเครื่องเสมือนหลายเครื่องเพียงเพื่อทดสอบระบบดั้งเดิมหรือใช้บริการชำระเงินเช่นLitmusบ่อยขึ้น
โปรดอธิบายฉัน<dl/>เกี่ยวกับแท็กเกี่ยวกับอะไร แท็กนี้มีจุดประสงค์เพื่ออะไร ใช้ในทางปฏิบัติอย่างไร? คุณคิดอย่างไรเกี่ยวกับการใช้เพิ่มเติมนี้?
ที่นี่คุณต้องการคนที่จะสามารถที่จะอธิบายว่า<dl/>เป็นพจนานุกรมเชื่อมโยงคีย์เดียวกับหนึ่งหรือหลายค่า,<dt/> <dd/>ในขณะที่การใช้งานหลักของแท็กนี้เกี่ยวข้องกับความหมายล้วนๆ แต่ในทางปฏิบัติมันถูกใช้อย่างกว้างขวางเพื่อแทนที่ตารางตัวอย่างที่ดีคือ PHPBB3 นี่เป็นสิ่งที่ดีเมื่อตารางกำลังชะลอการแสดงผลของหน้า แต่ต้องใช้ด้วยความระมัดระวัง: ไม่เพียง แต่ตารางยังเหมาะสมในหลายกรณีเพื่ออธิบายข้อมูลได้ดีขึ้น แต่อาจมีวิธีอื่นเช่นสามัญ <dl/>รายการที่จะอธิบายเนื้อหาโดยไม่ต้องใช้
ความแตกต่างระหว่างเลย์เอาต์คงที่และของไหลคืออะไร? ข้อดีและข้อเสียของแต่ละข้อคืออะไร?
เค้าโครงคงที่มีความกว้างที่กำหนดไว้ล่วงหน้าขององค์ประกอบ องค์ประกอบของเลย์เอาต์ของเหลวขึ้นอยู่กับความกว้างของหน้า
เลย์เอาต์คงที่ทำให้การออกแบบหน้าง่ายขึ้นโดยเฉพาะอย่างยิ่งเมื่อมีกราฟิกแบบเต็มความกว้างจำนวนมาก แม้จะไม่มีกราฟิกก็ยังง่ายขึ้นเพราะคุณใส่ใจเฉพาะกรณีที่แม่นยำ ตัวอย่างเช่น Programmers.SE เป็นเว็บไซต์รูปแบบคงที่คอลัมน์ที่แสดงคำถามและคำตอบมีขนาดเท่ากันเสมอ หากรูปแบบของเหลวจะใช้สำหรับคอลัมน์นี้สิ่งนี้จะสร้างปัญหา: บนหน้าจอขนาดเล็กข้อความจะไม่สามารถอ่านได้เพราะบรรทัดจะสั้นเกินไปขณะที่บนหน้าจอขนาดใหญ่บรรทัดจะมีขนาดใหญ่มากดังนั้นข้อความ จะอ่านไม่ได้ด้วย
ปัญหาของเลย์เอาท์แบบคงที่คือมันใช้งานได้ดีสำหรับการแก้ปัญหาที่ใช้น้อยที่สุด แต่ไม่มากหรือน้อยสำหรับทุกสิ่ง มันมีความสำคัญอย่างยิ่งเนื่องจากการใช้จอภาพขนาดใหญ่กว้างและการใช้อินเทอร์เน็ตที่เพิ่มขึ้นบนอุปกรณ์พกพาขนาดเล็ก
เลย์เอาต์ที่ลื่นไหลช่วยได้ แต่การออกแบบทำได้ยากกว่าสำหรับเว็บไซต์ดังกล่าว ในบางสถานการณ์ในโครงการที่มีการจัดการที่ไม่ดีสิ่งนี้อาจนำไปสู่การแฮ็ก HTML และ CSS, หน้าใหญ่, การบำรุงรักษาต่ำและระหว่างการพัฒนาไปสู่ต้นทุนที่สูงขึ้นและกำหนดเวลาที่ไม่ได้รับ
ในหน้าเว็บที่มีเลย์เอาต์ของเหลวคุณจะหลีกเลี่ยงสถานการณ์ที่คอลัมน์ของข้อความใหญ่เกินไปที่จะอ่านได้อย่างไร
คุณสามารถ จำกัด ความกว้างของโซนข้อความโดยใช้max-widthคุณสมบัติ
คุณคิดอย่างไรเกี่ยวกับชิ้นส่วนของรหัสนี้<p color="Red" align="Center">Text here</p>?
ส่วนหนึ่งของรหัสมีข้อบกพร่องในการผสมตรรกะการนำเสนอภายใน HTML ต้องนำเสนอตรรกะใน CSS ด้วยเหตุผลหลายประการ:
- ช่วยแยกความกังวลและทำความสะอาดรหัสซึ่งหมายถึงการบำรุงรักษาที่ถูกกว่าในภายหลัง
- มันทำให้รูปแบบที่นำมาใช้ซ้ำได้จากหน้าหนึ่งไปอีกหน้าหนึ่งซึ่ง (นอกกังวลการบำรุงรักษา) ช่วยให้มั่นใจว่าคุณกำลังใช้รูปแบบเดียวกันในเว็บไซต์ทั้งหมด
- ช่วยลดแบนด์วิดท์เนื่องจากไฟล์ CSS จะถูกแคช
หลังจากคำถามพื้นฐานสองสามข้อเช่นนั้นคุณอาจถามคำถามที่ยุ่งยากมากกว่านี้:
คุณจะหลีกเลี่ยงการทำซ้ำสีหรือแบบอักษรใน CSS ได้อย่างไรเมื่อสีหรือแบบอักษรเหล่านั้นถูกนำไปใช้กับองค์ประกอบหลายอย่างซึ่งไม่สามารถกำหนดเป้าหมายโดยตัวเลือกเดียวได้ มีข้อเสียหรือไม่
คุณทำได้โดยใช้ตัวประมวลผลล่วงหน้า CSS เช่น Sass หรือ LESS พวกเขาอนุญาตให้กำหนดสีแบบอักษรและส่วนอื่น ๆ ของสไตล์ภายในตัวแปรที่คุณสามารถใช้ในภายหลังในสไตล์ของคุณ
ข้อเสียของตัวประมวลผลล่วงหน้า CSS คือ:
บางครั้งพวกเขาจำเป็นต้องเปลี่ยนเวิร์กโฟลว์การพัฒนาและการปรับใช้เพื่อให้มีรหัส CSS ที่ทันสมัยในเบราว์เซอร์
พวกเขาเป็นที่รู้จักโดยนักพัฒนาเพียงไม่กี่คนซึ่งทำให้บุคคลใหม่เข้าร่วมหรือดูแลโครงการได้ยากขึ้น
ไม่มีทั้ง IDE ที่ดีและรวดเร็วสำหรับ Sass หรือ LESS และการรวมภายใน IDE ที่นิยมมากที่สุดนั้นค่อนข้างน่าผิดหวัง
ยกตัวอย่างhrefค่าของภาพที่อยู่ใน CDN ให้ฉันเพราะภาพนี้จะปรากฏบนเว็บไซต์ที่สามารถเข้าถึงได้ทั้งผ่าน HTTP และ HTTPS
ตั้งแต่ HTTPS ทุกความต้องการทรัพยากรที่เรียกว่าจะต้องอยู่บน HTTPS เกินไป (มิฉะนั้นคำเตือนการรักษาความปลอดภัยจะแสดงให้กับผู้ใช้ในหลาย ๆ กรณี) http://cdn.example.com/image.pngมันเป็นไปไม่ได้ที่จะระบุการเชื่อมโยงเป็น หากต้องการเชื่อมโยงไปยังภาพอย่าง//cdn.example.com/image.pngถูกต้องจะต้องใช้; เบราว์เซอร์จะเสริมhttp:หรือhttps:ขึ้นอยู่กับบริบท
เนื่องจากขนาดของหน้าและจำนวนคำขอในเว็บไซต์ไม่สามารถปรับให้เหมาะสมและไม่สามารถเปลี่ยนเนื้อหาหรือเพิ่ม AJAX ได้คุณจะสร้างความประทับใจให้กับผู้ใช้ว่าเว็บไซต์นั้นเร็วขึ้นได้อย่างไร มันเกี่ยวข้องกับอะไรจากมุมมอง HTML?
หาก HTTP 1.1 จะใช้หน้าอาจจะchunked ซึ่งหมายความว่าส่วนแรกจะปรากฏเร็วขึ้นสร้างความประทับใจว่าเว็บไซต์เร็วกว่าที่เป็นจริง การเข้ารหัสการถ่ายโอนแบบหนาเป็นไปไม่ได้ใน HTTP 1.0 ซึ่งหมายความว่าในกรณีนี้ไม่มีสิ่งใดทำ
ความสามารถในการแสดงเนื้อหาที่เป็นชิ้น ๆ จำเป็นต้องใช้จากมุมมอง HTML เพื่อจัดลำดับองค์ประกอบใหม่โดยวางสิ่งที่สำคัญที่สุดไว้ที่ด้านบนของไฟล์ (ซึ่งไม่ได้หมายความว่าจะต้องปรากฏที่ด้านบนของหน้า) ตัวอย่างเช่นในเว็บไซต์อีคอมเมิร์ซเมื่อผู้ใช้ต้องการดูรายละเอียดของผลิตภัณฑ์ชิ้นแรกอาจมี<head/>และรายละเอียดผลิตภัณฑ์ อันถัดไปอาจมีองค์ประกอบหลักเช่นโลโก้ของเว็บไซต์เมนูหลักลิขสิทธิ์ ฯลฯ สุดท้ายก้อนสุดท้ายอาจมีส่วน "คนที่ซื้อสิ่งนี้ซื้อด้วย" ความคิดเห็นและการให้คะแนนของผลิตภัณฑ์ "แชร์บน Facebook" เป็นต้น
ในที่สุดคุณอาจขอให้ผู้สมัครทำงานในสถานการณ์จริง มันอาจจะเป็นอะไรก็ได้เช่นเดียวกับที่ง่ายที่สุดด้านล่างสำหรับสถานการณ์ที่ซับซ้อนซึ่งบุคคลนั้นต้องจัดการกับ CSS sprites หรือเทคนิคการเพิ่มประสิทธิภาพขั้นสูงอื่น ๆ โดยมีเบราว์เซอร์ไม่สอดคล้องกัน ฯลฯ
ได้โปรดคุณสามารถสร้างหน้า XHTML ที่มีสองโซน: หนึ่งหน้าซ้ายด้วยรายการและอีกหนึ่งหน้าขวาพร้อมข้อความ สองโซนจะถูกคั่นด้วยเส้นแนวตั้งซึ่งขยายจากส่วนบนสุดถึงด้านล่างสุดของหน้า รายชื่อและข้อความมีขนาดแตกต่างกันคุณไม่สามารถคาดเดาได้ว่าข้อความใดจะมีความสูงมากที่สุด คุณไม่สามารถใช้<table/>s
ที่จริงแล้วมันค่อนข้างง่าย แต่แสดงให้เห็นว่าบุคคลนั้นมีความคิดที่จะคิดเกี่ยวกับความสูง ผู้สมัครที่ไม่มีประสบการณ์จะสร้างfloat:leftโซนและborder-left:solid 1px #ccc;โซน แต่ลืมเพิ่มขอบลงในโซนด้านซ้ายและขยายเพื่อให้ทั้งสองเส้นจะอยู่ที่เดียวกัน
