Собеседование html верстальщик

Какие вопросы могут задавать на собеседовании верстальщику? [закрыт]

Хотите улучшить этот вопрос? Переформулируйте вопрос, чтобы он соответствовал тематике «Stack Overflow на русском».

Закрыт 4 года назад .

Какие вопросы могут задавать на собеседовании при устройстве на работу верстальщиком?

3 ответа 3

Смотря к кому попадешь на собеседование, если к техническому специалисту, то вопросы могут быть какими угодно, если вы справитесь с основами, то могут пойти каверзные вопросы из собственного опыта разработчика, главное не волноваться и не пугаться того чего не знаете.

Если собеседование будет проводить пм, то берите инициативу в свои руки, если видите, что он толком не знает, что спрашивать, сами расскажите о самом сложном проекте который у вас был, что вы сделали и как решали свои сложные задачи, с чем интересным сталкивались, какие технологии или примочки применяли.

Также нужно показать, что яваскрипт для вас это первостепенная задача для обучения и совершенствования, надо показать, что вам можно доверить любую клиентскую часть, а если вы столкнетесь с трудностями, то вы их быстро решите, потому что знаете, где и что именно искать.

И конечно желаю удачи на собеседовании.

Могут задать пару каверзных вопросов по взаимодействию блоков: разберитесь с relative, fixed, absolute. и их комбинациях.

Могут предложить сделать кроссбраузерные закругленные уголки с минимальным числом элементов.

Могут спросить чем em отличается от i, а strong от b.

Короче, если шарите хорошо — справитесь. Если не очень — не стесняйтесь ответить, что чего-то не знаете, но не забывайте уточнить, что всегда сможете быстро посмотреть в документации. Потом — да, тестовое задание. От скорости, качества и кроссбраузерности напрямую зависит вероятность попадения в команду, если вы — мужчина.

Я бы задавал вопросы по: 1) Прошлой работе, к-во и качество проектов, портфолио.

2) Общим темам, теория. Чем див от спана отличается? Вложенность тегов. Нужно ли в 5-м ХТМЛ закрывать /> одиночные теги. Отличие i от em и т.д.

3) Пару заданий «на внимательность» — найти ошибку в тегах атрибутах. Изменить шаблон чтобы было меньше элементов в менюшке (позаботясь об индексации и спрайтах), Как сделать то-то и то-то в CSS (закругленные уголки — тут и кроссбраузерность и напишет ли 2 радиуса по x и y). Как убрать маркер у ul.

4) Практические знания, если хоть несколько сайтов сайтов сверстал — ответит. На стиль дам задание где текст в виде фото (что исправишь?), в резиновом дизайне выброшу минимальную ширину (тот же вопрос).

5) Приоритеты, несколько правил к одному элементу. Какой стиль «победит» — атрибут в теге, или !important, в теге style класс или наследование тегов, по ИД и классам вопросы.

6) Позиционирование, зет-индекс. Наследование свойств. «тег+тег» vs «тег>тег» vs «тег тег».

7) Задачки на кроссбраузерность. Что нужно сделать, чтобы в браузере таком-то отображалось адекватно. Настройки пользователя. Сброс. Универсальный селектор.

6+7)Можно на * и вложенные элементы дать. Каким будет размер шрифта.

8) Типы верстки. Табличная, адаптивная. Вопросы по стилю. Как больше нравится, почему? Как именует и группирует в CSS. Как часто оставляет комментарии и что вообще комментирует. Что геморно делать. На чем верстает. Что нравится делать, что нет.

Десять типичных вопросов на собеседованиях на знание HTML

Аурэлио Де Роза несколько дней назад выпустил, на мой взгляд, очень привлекательную статью, которой я хочу с вами поделиться на тот случай, если у вас плохо с английским.

Несколько недель назад на SitePoint были опубликованы две мои статьи, в которых я рассмотрел наиболее часто задаваемые на собеседовании вопросы по JavaScript (в случае, если вы пропустили: «5 Typical JavaScript Interview Exercises» и «5 More JavaScript Interview Exercises»).

Обе эти статьи имели огромный успех, что было крайне неожиданным. Я решил, что пришло время написать подобную статью, но уже на тему HTML — и вот, что у меня получилось.

Валидация разметки

Рассмотрим следующую разметку:

Валидный ли это код? Поясните, почему.

Ответ

В разметке используется тэг picture, который совсем недавно вошел в спецификацию. Код валидный вплоть до последнего изображения в атрибуте srcset ; 320y — невалидное значение. Если изменить y на w , то код будет валидным полностью.

Элемент main

Дайте определение элементу main . Какова его цель? Сходятся ли в определении этого элемента спецификации W3C и WHATWG?

Ответ

main элемент не имеет единого определения и в каждой спецификации оно разное.

Спецификация W3C описывает элемент как главное содержание страницы, то есть контент, который описывает основную тему страницы или является ключевым элементом функциональности приложения. В спецификации также говорится, что на странице не может быть больше одного main элемента.

Спецификация WHATWG не наделяет тэг main какой-либо семантикой и описывает элемент как контейнер для главенствующего содержания какого либо элемента. Также, согласно WHATWG, вам не запрещается иметь на одной странице несколько элементов main . Если у вас имеется несколько article элементов на странице, то вы можете выделить главенствующее содержимое каждого article с помощью тэга main .

WAI-ARIA

Рассмотрим следующую разметку:

Можете ли вы улучишь доступность разметки с помощью WAI-ARIA ролей, где это возможно, учитывая старые технологии?

Ответ

Код должен быть переписан следующим образом:

Чтобы улучшить доступность, список навигации был помещен в тэг nav . Чтобы улучшить доступность для старых технологий, которые не поддерживают новые семантичные тэги, роли header , navigation , main , article , и contentinfo были добавлены элементам header , nav , main , article , и footer соответственно.

Другое улучшение касается формы поиска. Сначала форме была добавлена роль search . После чего был добавлен элемент label , который связан с элементом input с помощью атрибута for .

Элемент small

Расскажите, в каких случаях уместно использование элемента small и приведите пример.

Ответ

Элемент small был представлен в HTML 4.01 и предназначался для того, чтобы делать текст маленьким. В HTML5 этому тэгу придали семантическое значение и рекомендуют помещать в него различного рода предупреждения, юридические текст и прочее, что должно быть написано «мелким шрифтом». При этом текст может выглядеть маленьким, но это уже не обязательно.

Пример использования приведен ниже:

Подзаголовки

Подзаголовки — это одни из самых распространенных элементов в любом вебсайте. Несколько лет назад тэг hgroup был представлен как раз для этих нужд, однако совсем недавно он был удалён из спецификации. Можете ли вы описать, почему отказались от hgroup и как проблему с разметкой заголовков решают сегодня?

Ответ

Элемент hgroup был создан для того, чтобы группировать заголовки ( h1 — h6 ) и тем самым исключить возможность непреднамеренного создания подуровня в иерархии. Чтобы понять, к какой же все-таки проблеме взывает данный тэг, давайте рассмотрим следующую разметку:

Вот что мы получаем, если попробовать изобразить иерархию вышеизложенной разметки:

Эта простая схема наглядно показывает, что параграф являестя содержимым элемента h2 вместо того, чтобы быть содержимым элемента h1 , вне зависимости от того, планировалось ли так сделать. Если же было намерение создать подзаголовок, а p связать с h1 , то данная разметка является неправильной.

Собственно, элемент hgroup и был создан для того, чтобы решить эту проблему. Однако он был удалён из спецификации HTML5 в апреле 2013 года в виду отсутствия реализаций и отсутствия прецедентов, что делает его использование недопустимым.

Решением для задачи создания подзаголовка так, чтобы следующий далее параграф был связан с h1 , изложено ниже:

Изображения и доступность

Является ли атрибут alt обязательным для img элемента? Если нет, то приведите пример, в котором атрибут alt может иметь пустое значение. Изменится ли как-то доступность этого элемента в данном случае?

Ответ

Атрибут alt является обязательным для тэга img , однако значение этого атрибута может быть пустым (т.е. alt=»» ). Имеет смысл оставлять значение атрибута пустым в случае, когда изображение используется только для декоративных целей и не является частью содержания страницы. Что касается доступности, если атрибут alt ничего не содержит, то экранные дикторы проигнорируют изображение. Оставлять атрибут пустым в данном случае крайне рекомендуется, ведь что-нибудь вроде «Разделитель содержимого» будет только раздражать тех, кто слушает экранного диктора.

Элемент time

Возможно ли изобразить интервал дат с помощью одного элемента time ?

Ответ

Нет, невозможно. Можно представить эту информацию используя два элемента time. Например, для того, чтобы представить временной интервал от 6-го ноября 2014 до 9-го ноября 2014 года, разработчик может написать:

meter и progress

В чем разница между элементами meter и progress ?

Ответ

«Элемент meter призван представить скалярное измерение в пределах известного диапазона или дробное значение. Этот элемент не очень хорошо подходит для измерения чего-нибудь вроде температуры, потому что не имеет фиксированного диапазона. Тем не менее, meter может быть использован для описания занимаемой памяти жесткого диска.

Элемент progress используется для того, чтобы показать прогресс выполнения задачи. В отличии от элемента meter , прогресс, описываемый элементом progress , может быть и не определен. Например, вы могли бы этим элементом показать, что прогресс выполнения задачи имеется, но вы не сможете указать, когда задача будет выполнена.

Атрибут longdesc

Что такое атрибут longdesc ? Можете ли вы объяснить его цель?

Ответ

Атрибут longdesc элемента img был и во времена HTML4, но и до сих пор считается валидным в HTML5. Этот атрибут был сделан для того, чтобы позволить более детально описывать изображения, нежели это позволяет сделать атрибут alt . Интересная вещь: вместо того, чтобы являть собой описание изображения (как это делает атрибут alt ), longdesc указывает на гиперссылку, содержащую описание.

Ниже продемонстрирован пример использование атрибута longdesc :

Элемент mark

Что такое элемент mark ? Приведите пример использования этого элемента.

Ответ

Элемент mark подсвечивает текст. Распространённый пример использования — это подсвечивание ключевого слова или ключевых слов, которые ищет пользователь.

Заключение

В данной статье я рассмотрел десять вопросов для собеседования, которые вы можете использовать для тестирования на знание HTML. В следующем своем собеседовании вы можете использовать один или несколько из них.

Чтобы помочь вам изучить эти и другие смежные по теме семантики вопросы, я рекомендую прочитать некоторые из следующих статей SitePoint:

Руководство для прохождения интервью по фронтенду

Часть 1. HTML

Что это такое?

В отличие от типичного собеседования с разработчиками ПО, на собеседованиях фронтенд-разработчиков меньше внимания уделяется алгоритмам. Большая часть вопросов касается специфичных знаний и компетенций в таких областях, как HTML, CSS, JavaScript.

Несмотря на то, что существуют ресурсы, призванные помочь в подготовке к собеседованию, они сильно отличаются по полноте материалов от тех же ресурсов для разработчиков ПО. Среди того, что существует на сегодняшний день, наиболее полезным может быть сборник вопросов Front-end Developer Interview Questions. К сожалению, на многие вопросы я не смог найти в сети полные и удовлетворяющие ответы. Поэтому в документе ниже я постарался самостоятельно ответить на них. Будучи открытым репозиторием, этот проект может жить и развиваться благодаря сообществу, поскольку интернет эволюционирует.

Нужна более общая подготовка?

Вас может заинтересовать Tech Interview Handbook, в котором содержится информация для прохождения общих технических интервью, в частности описаны алгоритмы, даны ответы на вопросы по софт-скиллс. Также есть Interview Cheatsheet!

Вопросы по HTML

Ответы на вопросы из списка Front-end Job Interview Questions — HTML Questions. Комментарии с предложениями по улучшению и дополнению приветствуются!

Что делает DOCTYPE?

— это сокращение от « document type» (тип документа). Он объявляется в HTML для того, чтобы различать стандартный режим или режим совместимости ( quirks mode). Его наличие говорит браузеру работать со страницей в стандартном режиме.

Мораль истории — просто добавляй в начало страницы.

Ссылки

Как поддерживать страницу на нескольких языках?

Вопрос немного расплывчатый. Полагаю, что речь о наиболее частом случае: как поддерживать страницу с содержимым на нескольких языках, где одновременно должен отображаться только один язык.

Когда к серверу делается HTTP-запрос, то браузер пользователя обычно отсылает информацию о предпочитаемом языке в заголовке Accept-Language . Сервер может использовать эту информацию, чтобы вернуть версию документа на подходящем языке, если такая возможность есть. В возвращенном HTML-документе обязательно должен быть указан атрибут lang у тега , к примеру .

На бэкенде HTML-разметка будет содержать плейсхолдер i18n , а контент для конкретного языка будет хранится в YML- или JSON-формате. Сервер динамически формирует HTML-страницу с контентом на конкретном языке, чаще всего при помощи бэкенд-фреймворка.

Ссылки

На что обратить внимание при разработке мультиязычных сайтов?

• Используй атрибут lang в HTML.
• Перенаправляй пользователей на версию сайта на их языке. Позволяйте быстро и без проблем изменить страну и язык.
• Текст на картинках плохо поддается адаптации. Многие до сих пор помещают текст на картинки чтобы получить хорошо выглядящий несистемный шрифт на любом компьютере. Однако чтобы перевести текст картинкой, нужно иметь подготовленную картинку с каждой строкой текста для каждого языка. При большом количестве текста это быстро выйдет из под контроля.
• Ограничение длины слов и предложений. Некоторый контент может быть длиннее при написании на другом языке. Будьте внимательны к макету и проверяйте поведение блоков при переполнении. Количество символов важно в таких элементах, как заголовки, лейблы и кнопки. Но не так важно в основном тексте или в блоке комментария.
• Помните о восприятии цветов. В разных языках и культурах цвета имеют разное значение. Дизайн должен учитывать эти особенности.
• Форматируете даты и валюты. Календарные даты иногда пишутся по-разному. Например, «Май 31, 2012» в Америке или «31 мая 2012» в большинстве стран Европы.
• Не склеивайте переведенные строки. Не пишите что-то вроде «Сегодняшняя дата » + date . Эта фраза будет выглядеть коряво на языках с другим порядком слов. Вместо этого используйте параметры шаблона.
• Разные направления чтения. В русском мы читаем слева направо, сверху вниз. В традиционном японском языке текст читается сверху вниз, справа налево.

Ссылки

Для чего отлично подойдут data-атрибуты?

До того, как JavaScript-фреймворки стали популярны, фронтенд-разработчики использовали data -атрибуты чтобы хранить дополнительные данные прямо в DOM без хаков вроде нестандартных атрибутов или дополнительных свойств в DOM. Атрибуты этого семейства предназначены для хранения частных данных пользователя, для которых не существует более подходящих атрибутов или элементов, на странице или в приложении.

На сегодняшний день использование data -атрибутов не поощряется. Одной из причин является то, что пользователь может модифицировать данные в атрибуте, используя инспектор кода в браузере. Данные лучше хранить в самом JavaScript и обновлять DOM при помощи связывания данных через библиотеку или фреймворк.

Ссылки

Представьте HTML5 как открытую веб-платформу. Из каких блоков состоит HTML5?

1. Семантика. Позволяет более точно описать из чего состоит контент.
2. Связанность. Позволяет общаться с сервером новыми и инновационными способами.
3. Офлайн и хранилище. Позволяют страницам хранить данные локально на клиентской стороне и более эффективно работать в офлайне.
4. Мультимедиа. Ставит создание видео и аудио на первое место в вебе.
5. 2D- и 3D-графика и эффекты. Позволяет расширить возможности презентации.
6. Производительность и интеграция. Обеспечивает большую скорость оптимизации и лучшее использование аппаратных средств.
7. Доступ к устройствам. Позволяет взаимодействовать с различными устройствами ввода и вывода.
8. Стилизация. Позволяет создавать более сложные темы оформления.

Ссылки

Объясните разницу между cookie, sessionStorage и localStorage.

Все вышеупомянутые технологии являются механизмами хранения типа ключ-значение на клиентской стороне. Они могут хранить данные только как строки.

Опыт собеседования на вакансию «верстальщик»

Опции темы

Доброго времени суток форумчане.
Сегодня я решил написать пост о вопросах, которые задают на собеседовании.
Дело в том, что еще перед Новым Годом ходил на собеседование и как вы уже поняли из топика, предлагали мне вакансию верстальщика макетов для сайтов.
Я решил поделится этим опытом, может кому-то поможет при собеседовании, тем более таких тем еще не находил на форуме. Здесь я напишу ответы к вопросам в спойлере, сначала попытайтесь сами ответить на вопрос, а потом уже проверите свои знания)).

Собеседовала меня тетенька лет 30, очень знающая свое дело.
Первый вопрос был такой: «Чем занимаешься, почему выбрал работу верстальщика и какие уже имеются проекты в интернете»
Я рассказал о парочке сайтов, которые сделаны на вордпресс, о минимальных знаниях поисковой оптимизации.

Потом пошли вопросы по HTML:

1. Что такое DOCETYPE и для чего он нужен?

Развернуть текст

2. Что пишут в теге HEAD?

Развернуть текст

3. В чем разница между тегами div и span?

Развернуть текст

4. Что означают такие знаки вокруг текста ?

Развернуть текст

5. Что такое entities?

Развернуть текст

На этом мои мучения по HTML закончились, теперь переходим до вопросов по PHP:

1. Первые три вопроса на логику и мышление:
А) Почему люки круглые?

Развернуть текст

Б) Почему белые медведи не едят пингвинов?

Развернуть текст

В) Как посчитать количество теннисных шариков, которыми заполнен школьный автобус? (Вопрос с подвохом, но решается банально просто)

Развернуть текст

2. Потом меня спросили: «Есть опыт работы с CMS, если есть, то с какими (хотя бы опыт работы как вебмастера)?»

3. Для чего нужны специальные теги ?

Развернуть текст

4. Какая разница между include и require?

Развернуть текст

5. Если в переменную записать число $a = 0123 , что будет при выводе echo $a?

Развернуть текст

6. Как в php можно определять константы?

Развернуть текст

7. Можно ли передавать переменные по ссылке?

Развернуть текст

8. Можно ли сравнить строку «10» и целое число 11 в PHP?

Развернуть текст

11. В чем разница между символами 23, 023 и x23?

Развернуть текст

12. Тут будет задача:

У Вас есть строка ABCDE. Нужно переставить местами буквы так, чтобы получилось EDCBA, используя, при этом только один цикл for:

Развернуть текст

Вопросы по JavaScript :

1. Какие типы данных есть в JavaScript?

Развернуть текст

2. Что делает функция isNaN?

Развернуть текст

3. Какая разница между этими двумя выражениями?
var x = 3;
x = 3;

Развернуть текст

4. Как создать новый объект в JavaScript?

Развернуть текст

5. Как назначать свойства объекта?

Развернуть текст

6. Каким способом можно добавить значение к массиву?

Развернуть текст

7. Что означает ключевое слово this?

Развернуть текст

Вот в принципе и все вопросы, которые мне задавали на собеседовании.
Вообщем они не сложные — это основы основ.

PS: признаюсь, что гуглил ответы на вопросы при написании этой статьи, так как знать и вбить эти все нюансы в голову сложно.

PSS: должны были после Нового Года перезвонить. К сожалению еще не позвонили. Значит не подошел им.

Последний раз редактировалось MERS; 24.01.2013 в 17:06 .