HTML và CSS khó phỏng vấn vì một vài lý do:
Chúng quá cơ bản, ví dụ, so với ngôn ngữ lập trình,
Họ phụ thuộc rất nhiều vào bối cảnh của công việc. Ví dụ:
Nếu bạn tạo quy mô Google, các trang web cực kỳ nhanh và được tối ưu hóa, những người bạn phỏng vấn cho công việc không thể bỏ qua các họa tiết CSS là gì.
Nếu bạn tạo các trang web hợp lệ XHTML W3C, bạn nên đảm bảo rằng các ứng viên biết sự khác biệt giữa XHTML 1.0 và XHTML 1.1 hoặc các thuộc tính bắt buộc để làm gì <img/>, v.v.
Nếu bạn tạo các trang web khủng khiếp đầy hack, bạn nên hỏi những người bạn phỏng vấn về cách họ sẽ thực hiện hoặc hack như vậy, cách họ phục vụ CSS khác nhau cho các trình duyệt khác nhau, v.v.
Vân vân.
Nếu đó là một công việc HTML và CSS thuần túy, người đó sẽ phải làm việc với các nhà thiết kế một mặt và mặt khác là các nhà phát triển. Họ phải biết HTML và CSS, nhưng điều đáng giá hơn nhiều là khả năng tương tác với những người đó và để hiểu cả nhu cầu của người thiết kế, yêu cầu của nhà phát triển và ràng buộc của HTML và CSS.
Ví dụ, họ phải biết cách cấu trúc HTML của mình theo cách sao cho nhà phát triển JavaScript có thể dễ dàng thêm tính tương tác sau này.
Bạn có thể muốn bắt đầu bằng một số câu hỏi cơ bản:
Trình duyệt yêu thích của bạn là gì?
Nếu người đó trả lời "Internet Explorer", hãy dừng cuộc phỏng vấn ngay lập tức: bạn không cần ai đó như thế.
Không, tôi đang đùa. Câu trả lời là không liên quan. Thay vào đó, bạn có thể hỏi như sau:
Hãy cho tôi biết về các công cụ gỡ lỗi bạn sử dụng trong trình duyệt yêu thích của bạn.
Chính sử dụng Chrome, tôi làm việc hàng ngày với Công cụ dành cho nhà phát triển. Những công cụ đó cho phép tôi:
Xem các yêu cầu được thực hiện từ một trang,
Nghiên cứu thời gian cần thiết để tải trang và các tài nguyên liên quan, đặc biệt là thời gian tra cứu, chờ và nhận DNS,
Nghiên cứu các tiêu đề của các yếu tố được gửi, cũng như chỉ báo bộ đệm,
Xem DOM và nghiên cứu cách áp dụng các bộ chọn CSS,
Tôi cũng sử dụng YSlow phục vụ cho tôi như một danh sách kiểm tra để tối ưu hóa trang web yêu cầu khả năng mở rộng cao. YSlow cũng là một công cụ tốt khi xác định xem máy chủ có được cấu hình đúng không (gửi tiêu đề chính xác, v.v.).
Trong Firefox, tôi sử dụng Fireorms, công cụ rất giống với Công cụ dành cho nhà phát triển từ Chrome. Các công cụ dành cho nhà phát triển cũng có sẵn trong các phiên bản mới của Internet Explorer và cũng cho phép tôi chuyển sang chế độ xem tương thích IE7 sang IE10. Tính năng cuối cùng này rất hữu ích, vì không có nó, tôi sẽ buộc phải cài đặt một số máy ảo chỉ để thử nghiệm kế thừa hoặc sử dụng thường xuyên hơn các dịch vụ trả phí như Litmus .
Xin vui lòng, giải thích cho tôi những gì về <dl/>thẻ là về? Mục đích sử dụng cho thẻ này là gì? Nó được sử dụng như thế nào trong thực tế? Bạn nghĩ gì về việc sử dụng mở rộng này?
Ở đây, bạn muốn người đó có thể giải thích điều đó <dl/>dành cho từ điển, liên kết một khóa <dt/>, với một hoặc một vài giá trị , <dd/>. Mặc dù việc sử dụng chính của thẻ này hoàn toàn liên quan đến ngữ nghĩa, nhưng trong thực tế, nó được sử dụng rộng rãi để thay thế các bảng, một ví dụ điển hình là PHPBB3. Đây là một điều tốt khi các bảng làm chậm việc hiển thị trang, nhưng nó phải được sử dụng một cách thận trọng: không chỉ các bảng vẫn phù hợp trong nhiều trường hợp để mô tả dữ liệu tốt hơn, mà còn có thể có các phương tiện khác, như thông thường danh sách, để mô tả nội dung mà không sử dụng <dl/>.
Sự khác biệt giữa bố trí cố định và chất lỏng là gì? Những ưu và nhược điểm của mỗi là gì?
Bố cục cố định có chiều rộng được xác định trước của các yếu tố. Các yếu tố của một bố cục chất lỏng phụ thuộc vào chiều rộng của trang.
Bố cục cố định giúp thiết kế trang dễ dàng hơn, đặc biệt là khi có nhiều đồ họa toàn chiều rộng. Ngay cả khi không có đồ họa, nó vẫn dễ dàng hơn, bởi vì bạn chỉ quan tâm đến một trường hợp chính xác. Ví dụ: Lập trình viên. Là một trang web bố cục cố định, cột hiển thị các câu hỏi và câu trả lời luôn có cùng kích thước. Nếu bố cục chất lỏng sẽ được sử dụng cho cột này, điều này sẽ tạo ra một vấn đề: trên màn hình nhỏ, văn bản sẽ không thể đọc được, vì các dòng sẽ quá ngắn, trong khi trên màn hình lớn, các dòng sẽ rất lớn, vì vậy văn bản cũng sẽ không thể đọc được.
Vấn đề với bố cục cố định là nó hoạt động tốt đối với một số độ phân giải được sử dụng nhiều nhất, nhưng thất bại ít nhiều cho mọi thứ khác. Nó trở nên đặc biệt quan trọng kể từ khi áp dụng các màn hình rất lớn, rộng và việc sử dụng internet ngày càng tăng trên các thiết bị di động nhỏ.
Bố cục chất lỏng giúp với điều đó, nhưng thiết kế khó thực hiện hơn cho trang web như vậy. Trong một số tình huống về các dự án được quản lý kém, điều này có thể dẫn đến các vụ hack HTML và CSS, các trang lớn, khả năng bảo trì thấp và trong quá trình phát triển, với chi phí cao hơn và thời hạn bị bỏ lỡ.
Trên một trang có bố cục trôi chảy, làm thế nào bạn có thể tránh được tình huống một cột văn bản trở nên quá lớn để có thể đọc được?
Bạn có thể giới hạn chiều rộng của một vùng văn bản bằng cách sử dụng thuộc max-widthtính.
Bạn nghĩ gì về đoạn mã này : <p color="Red" align="Center">Text here</p>?
Đoạn mã có một lỗ hổng để trộn logic trình bày bên trong HTML. Logic trình bày phải được đặt trong CSS vì nhiều lý do:
- Nó giúp phân tách các mối quan tâm và mã sạch, có nghĩa là bảo trì rẻ hơn sau này,
- Nó làm cho các kiểu có thể được sử dụng lại từ trang này sang trang khác, điều này (bên ngoài mối quan tâm về khả năng bảo trì) giúp đảm bảo rằng bạn đang sử dụng cùng một kiểu trên toàn bộ trang web,
- Nó giúp giảm băng thông, vì các tệp CSS sẽ được lưu trữ.
Sau một vài câu hỏi cơ bản như vậy, bạn có thể hỏi một số câu hỏi khó hơn:
Làm thế nào để bạn tránh trùng lặp màu hoặc phông chữ trong CSS, khi những màu hoặc phông chữ đó được áp dụng cho nhiều yếu tố không thể nhắm mục tiêu bởi một bộ chọn? Có những hạn chế?
Bạn làm điều đó bằng cách sử dụng các bộ tiền xử lý CSS, như Sass hoặc LESS. Chúng cho phép xác định màu sắc, phông chữ và các phần khác của kiểu bên trong các biến mà bạn có thể sử dụng sau này trong kiểu của mình.
Hạn chế của bộ tiền xử lý CSS là:
Đôi khi, họ yêu cầu thay đổi quy trình phát triển và triển khai để có mã CSS cập nhật trong trình duyệt,
Chúng chỉ được biết đến bởi một vài nhà phát triển, điều này khiến cho một người mới tham gia hoặc duy trì dự án sau này khó khăn hơn,
Không có cả IDE tốt và nhanh cho Sass hoặc LESS, và sự tích hợp bên trong các IDE phổ biến nhất là khá đáng thất vọng.
Cho tôi một ví dụ về hrefgiá trị của một hình ảnh trên CDN, với điều kiện là hình ảnh này được hiển thị trên một trang web có thể được truy cập cả thông qua HTTP và HTTPS.
Vì HTTPS cũng cần mọi tài nguyên được gọi để có trên HTTPS (nếu không, cảnh báo bảo mật sẽ được hiển thị cho người dùng trong nhiều trường hợp), nên không thể chỉ định liên kết là http://cdn.example.com/image.png. Để liên kết đúng với hình ảnh, //cdn.example.com/image.pngphải được sử dụng; trình duyệt sau đó sẽ trả trước http:hoặc https:tùy thuộc vào ngữ cảnh.
Cho rằng kích thước của các trang và số lượng yêu cầu trên một trang web không thể được tối ưu hóa và nội dung không thể thay đổi cũng như không được thêm AJAX, làm thế nào để bạn tạo ấn tượng cho người dùng rằng trang web nhanh hơn? Nó liên quan gì từ quan điểm HTML?
Nếu HTTP 1.1 được sử dụng, trang có thể bị chunk . Điều này có nghĩa là các phần đầu tiên sẽ xuất hiện nhanh hơn, tạo ấn tượng rằng trang web nhanh hơn thực tế. Mã hóa chuyển khối được thực hiện trong HTTP 1.0, điều đó có nghĩa là không có gì để làm trong trường hợp này.
Để có thể phục vụ nội dung được yêu cầu từ phối cảnh HTML để sắp xếp lại các yếu tố, đặt những yếu tố quan trọng nhất lên đầu tệp (điều đó không có nghĩa là chúng sẽ phải xuất hiện ở đầu trang). Ví dụ: trên trang web thương mại điện tử, khi người dùng muốn xem chi tiết về sản phẩm, đoạn đầu tiên có thể chứa <head/>và chi tiết sản phẩm. Đoạn tiếp theo có thể chứa các yếu tố chính như logo của trang web, menu chính, bản quyền, v.v ... Cuối cùng, đoạn cuối cùng có thể chứa phần "Những người đã mua này cũng đã mua", các nhận xét và xếp hạng của sản phẩm, "Chia sẻ trên Facebook", v.v.
Cuối cùng, bạn có thể yêu cầu ứng viên thực hiện kịch bản trong thế giới thực. Nó có thể là bất cứ điều gì, như cách dễ nhất dưới đây, đối với các kịch bản phức tạp mà người đó phải đối phó với các họa tiết CSS hoặc các kỹ thuật tối ưu hóa nâng cao khác, với sự không nhất quán của trình duyệt, v.v.
Xin vui lòng, bạn có thể tạo một trang XHTML có hai vùng: vùng bên trái, với danh sách và vùng bên phải có văn bản. Hai vùng được phân cách bằng một đường thẳng đứng, kéo dài từ đầu đến cuối trang. Danh sách và văn bản khác nhau về kích thước, bạn không thể dự đoán cái nào sẽ có chiều cao lớn nhất. Bạn không thể sử dụng <table/>s.
Trên thực tế, nó khá đơn giản nhưng cho thấy nếu người đó có phản xạ nghĩ về chiều cao. Một ứng cử viên thiếu kinh nghiệm sẽ tạo ra float:leftkhu vực và border-left:solid 1px #ccc;khu vực, nhưng quên thêm đường viền vào khu vực bên trái và mở rộng nó để hai biên giới sẽ ở cùng một nơi.
