При изменении каких свойств браузер затратит больше всего ресурсов и почему

Если вы давно подумываете о смене профессии или же наоборот только вступаете в трудовую жизнь и Вам интересен web, интернет, дизайн, то обратите внимание на такую профессию как верстальщик. Верстальщик создает при помощи кода разметки web-страницы: размещает текст и картинки. Дизайнер придумывает дизайн сайта, а верстальщик делает так, чтобы это всё работало в разных браузерах, на планшетах и мобильных телефонах.

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

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

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?

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