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, страница может быть разделена на части . Это означает, что первые части будут появляться быстрее, создавая впечатление, что сайт работает быстрее, чем на самом деле. Кодирование передачи по частям невозможно в HTTP 1.0, что означает, что в этом случае ничего не нужно делать.
Возможность обслуживания фрагментированного контента требует с точки зрения HTML переупорядочения элементов, помещая наиболее важные из них в верхнюю часть файла (что не означает, что они должны будут отображаться в верхней части страницы). Например, на веб-сайте электронной коммерции, когда пользователь хочет просмотреть подробную информацию о продукте, первый блок может содержать данные <head/>о продукте и. Следующий блок может содержать основные элементы, такие как логотип веб-сайта, главное меню, авторские права и т. Д. Наконец, последний блок может содержать раздел «Люди, купившие это, также купили», комментарии и оценки продукта, «Поделиться в Facebook» и т. д.
Наконец, вы можете попросить кандидата поработать над реальным сценарием. Это может быть что угодно, например, самый простой из приведенных ниже, сложных сценариев, когда человеку приходится иметь дело с CSS-спрайтами или другими передовыми методами оптимизации, с несовместимостью браузера и т. Д.
Пожалуйста, не могли бы вы создать страницу XHTML с двумя зонами: левой со списком и правой с текстом. Две зоны разделены вертикальной линией, которая простирается от самого верха до самого низа страницы. Список и текст различаются по размеру, вы не можете предсказать, какой из них будет иметь наибольшую высоту. Вы не можете использовать <table/>s.
На самом деле, это довольно просто, но показывает, есть ли у человека рефлекс, чтобы думать о высоте. Неопытный кандидат создаст float:leftзону и border-left:solid 1px #ccc;зону, но забудет добавить границу в левую зону и расширить ее так, чтобы две границы были в одном месте.
