Вопросы на собеседование на должность верстальщика

1. Что такое DOCTYPE и для чего он нужен?
2. Что пишут в теге HEAD?
3. В чем разница между тегами div и span?.
4. Вложенность тегов?
5. Нужно ли в 5-м ХТМЛ закрывать /> одиночные теги ?
6. Отличие i от em и т. д.?
7. Как сделать чтобы все гиперссылки сайта открывались в новом окне, т.е чтобы по умолчанию использовался target=»_blank»?А как теперь быть, если какую-то из гиперссылок я захочу открыть в этом же окне, т.е. не создавая новое?
8. Как убрать маркер у ul.
10. Типы верстки. Табличная, адаптивная. Вопросы по стилю. Как больше нравится, почему? Как именует и группирует в CSS. Как часто оставляет комментарии и что вообще комментирует. Что геморно делать. На чем верстает.
11. Используете ли сас?
12. Объясните своими словами отличия между xhtml 1.0 и html 5.
13. Какие бывают значения display? Расскажите как ведёт себя каждое свойство.
14. Что вы знаете о весе селекторов? Каковы значения веса?
15. Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство.
16. Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static?
17. Что такое float? Float в переводе с английского — наплывать.
18. Что такое clearfix? Из чего он состоит и для чего он?
19. Как верстать html письма?
20. Из чего строится размер элемента?
21. Что такое border-box?
22. Расскажите о различия padding и margin?
23. Как ведут себя margin у двух элементов по соседству?
24. Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как?
25. Есть ли у тегов предопределённые стили?
26. Как повлиять на вертикальное выравнивание строчного элемента?
27. Как браузер “читает” css?
28. Какие свойства браузеру отрисовать тяжелее всего?
29. При изменении каких свойств браузер затратит больше всего ресурсов и почему?
30. Какие вы знаете псевдоэлементы? Где их используют?
31. Что такое инлайновые стили?
32. Инлайновые стили “сильнее” стилей в обычном файле css?
33. Что такое наследование стилей?
34. Что вы знаете об !important?
35. Как отцентровать элемент по горизонтали не зная ширину родительского блока?
36. Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы.
37. Какие вы знаете значения размеров в “резиновой” вёрстке?
38. Какие бывают значения у свойства background-size? Расскажите о каждом из них.
39. Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо?
40. Чем отличается article от section?
41. Из чего можете верстать (форматы файлов, программы).
42. Опишите идеально созданный для вас .PSD
43. Знакомы ли с бутстрапом? Или другие фремворки?
44. Пару заданий «на внимательность» — найти ошибку в тегах атрибутах. Изменить шаблон чтобы было меньше элементов в менюшке (позаботясь об индексации и спрайтах), Как сделать то-то и то-то в CSS (закругленные уголки — тут и кроссбраузерность и напишет ли 2 радиуса по x и y).
45. Практические знания, если хоть несколько сайтов сайтов сверстал — ответит. На стиль дам задание где текст в виде фото (что исправишь?), в резиновом дизайне выброшу минимальную ширину (тот же вопрос).
46. Приоритеты, несколько правил к одному элементу. Какой стиль «победит» — атрибут в теге, или !important, в теге style класс или наследование тегов, по ИД и классам вопросы.
47. Позиционирование, зет-индекс. Наследование свойств. «тег+тег» vs «тег>тег» vs «тег тег».
48. Задачки на кроссбраузерность. Что нужно сделать, чтобы в браузере таком-то отображалось адекватно. Настройки пользователя. Сброс. Универсальный селектор.
49. Можно на *{font-size: 200%;} и вложенные элементы дать. Каким будет размер шрифта.
50. Какие вы знаете способы организации css кода?
51. Что такое БЭМ?
52. По БЭМ может ли быть блок внутри блока?
53. Какие из препроцессоров вы знаете? В чём их различия?
54. Какие из инструментов сборки вам знакомы?
55. Что лучше Gulp или Grunt?
56. Как происходит “сборка” проекта в Gulp и Grunt?
57. Что лучше Less или Scss?
58. Вы знакомы с Google Pagespeed?
59. Что такое gracefull degradation?
60. Как проверить html-код на валидность?
61. Что такое размер viewport?
62. Вертикальный скролл входит в размер viewport?
63. Какой размер вертикального скролла?
64. Как правильно задать overflow для body чтобы сохранить вертикальный скролл?
65. Как сделать мобильную, планшетную и десктопную версию сайта?
66. Что такое ретинизация?
67. Как можно задавать размеры картинкам?
68. Что такое SVG?
69. Что такое иконочные шрифты? Где их искать и как подключать?
70. Что лучше, делать иконки через SVG или через иконочные шрифты?
71. Какие вы знаете способы подключения шрифтов к странице?
72. Какие есть способы вставки SVG в HTML? В чём между ними разница?
73. Как мы можем взаимодействовать с SVG?
74. Как проверить кроссбраузерность тех или иных методов вёрстки?
75. Что такое JQuery?Как найти элемент на странице с помощью JS и JQuery?
76. Что вы знаете о замыканиях и областях видимости в JS?
77. Чем ограничена область видимости JS?
78. Чем ограничена область видимости Document?
79. Что такое DOM?
80. Что подразумевает понятие MVC?
81. Что такое AJAX?
82. Как вызвать отладчик в разных браузерах?
83. Расскажите что показывает каждая вкладка в отладчике?
84. Что такое NODE JS?
85. Что такое Bower?
86. Что такое npm?
87. Расскажите про формат .json?
88. Зачем нам обычно файл package.json?
89. Что такое git?
90. Знакомо ли вам git flow? Если да, то расскажите что это такое?
91. Вы знакомы с работой в командной строке?
92. Какой командой посмотреть список папок и файлов в категории?
93. Какой командой мы можем создать и удалить папку в директории?
94. Какому DOCTYPE отдается предпочтение при верстке с нуля?
95. Для каких браузеров/устройств верстали?
96. В чем облегчение при отказе от верстки под IE6? IE7?
97. Какие свойства получает элемент, которому назначено свойство display:inline-block?
98. Чем отличается display:none от visibility:hidden?
99. Какой HTML-документ можно назвать валидным? Что проверяет валидатор?
100. Какие теги в HTML употреблять нельзя?
101. Какие атрибуты html-тегов устарели?
102. Чем отличается класс (class) от идентификатора (id) в HTML?
103. Какими тегами и атрибутами можно подключать внешние ресурсы в HTML?
104. Какие атрибуты есть у тега input?
105. Какие значения есть у атрибута type тега input?
106. Чем отличается visibility:hidden от dusplay:none?
107. Как очистить поток? Приведите примеры, зачем это может понадобиться.
108. В чем разница между inline, block, inline-block?
109. Чем отличается margin от padding?
110. Как отпозиционировать один элемент относительно другого?
111. Что такое спрайты?
112. Расскажите о принципах Responsive верстки
113. Используете вы Perfect Pixel или что-то аналогичное?
114. Знаете ли вы о CSS архитектурах? БЭМ, OOCSS, SMACSS?

Некоторые вопросы похожи, их можно объединить, чтобы выдать наиболее полный ответ. Дерзайте, готовьтесь, много верстайте — работодатели очень любят портфолио. Рано или поздно вас пригласят работать.

В обязанности верстальщика сайтов входит верстка веб-страниц, т.е. он «переводит» их на компьютерный язык.
Он задает границы оформления веб-страниц – устанавливает размер шрифта, абзацы, заголовки и подзаголовки, рамки на картинках.

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

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

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

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

    Знаниями HTML, CSS, JavaScrpt, Photoshop;
    Иметь хорошую зрительную память;
    Быть грамотными, аккуратными, организованными.

Эта профессия совмещает обязанности программиста и дизайнера и является составляющей между ними.

На нарисованном дизайнером макете верстальщик сайтов пишет образец для программиста, оформляя дизайн посредством тегов.
Теги – текст, представляющий данные о различных элементах дизайна (таблица, график, картинки).

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

В процессе работы верстальщику понадобится использовать текстовый и графический редактор и браузер.

Многим может показаться, что работа верстальщика скучная и монотонная.
Но многие из них могут так увлечься своей работой, что не замечают, как летит время, и могут потратить на работу не только день, но еще и прихватить ночь.

Он работает с интересной информацией: с дизайнами сайтов, общается со многими людьми, правда, не лично, а при помощи электронной почты, скайпа и ICQ.

Заключение

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

Надеюсь, статья оказалась полезной. Если возникли вопросы, можете задать их через форму комментариев под этой статьей.

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

Отредактировано викНик (2018-08-13 12:54:29)