/questions-to-css-coder

https://medium.com/@ermo4enkov/%D1%87%D1%82%D0%BE-%D0%BE%D0%B6%D0%B8%D0%B4%D0%B0%D1%82%D1%8C-%D0%BE%D1%82-%D1%81%D0%BE%D0%B1%D0%B5%D1%81%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D0%B4%D0%BE%D0%BB%D0%B6%D0%BD%D0%BE%D1%81%D1%82%D1%8C-hmtl-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%BB%D1%8C%D1%89%D0%B8%D0%BA-junior-frontend-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%81%D1%82-a916de106283#.aeecl1rse

#Вопросы

###Какие бывают значения display? Расскажите как ведёт себя каждое свойство. display: block; — Блочная модель, занимает всю ширину родителя, отступы.

display: inline-block; — Без указания ширины имеют ширину контента, выстраиваются друг за другом слева направо, есть оступ равный ширине пробела.

display: inline; — Без указания ширины имеют ширину контента, выстраиваются друг за другом слева направо, отступы сверху и снизу не работают.

display: table; — Как таблица <table>.

display: table-row; — Строка таблицы <tr>.

display: none; — Элемент удалятся и место не резирвируется, будто его и не было.

display: inline-table; — Встраивается как таблица <table>, но я вляется строчным элементом и обтекается другими строчными элементами, например текстом(есть маргины).

display: flex; — Элемент ведет себя как блочный и выкладывает содержимое согласно флекс-модели.

display: inline-flex; — Элемент ведет себя как блочный и выкладывает содержимое согласно флекс-модели.

display: inline-flex; — Элемент ведет себя как блочный и выкладывает содержимое согласно флекс-модели.

display: list-item; — Элемент ведет себя как блочный и добавляется как макер списка.

display: run-in; — Элемент ведет себя как блочный или строчный, в зависимости от контекста.

display: table-caption — Элемент ведет себя как заголовок таблицы <caption>.

display: table-cell; — Элемент ведет себя как ячейка таблицы <td> или <th>.

display: table-column; — Элемент ведет себя как колонка таблицы <col>.

display: table-column-group; — Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.

display: table-footer-group; — ведет себя как <tfoot>.

display: table-header-group; — ведет себя как <thead>.

display: table-row-group; — ведет себя как <tbody>.

###Что вы знаете о весе селекторов? Каковы значения веса?

###Какие бывают значения у свойства position? Расскажите как ведёт себя каждое свойство. ###Что будет если задать элементу с position:relative свойство top:10px left: 10px? Что будет если тоже самое задать элементу с position: static? ###Что такое float? ###Что такое clearfix? Из чего он состоит и для чего он? ###Как верстать html письма? ###Из чего строится размер элемента? ###Что такое border-box? ###Расскажите о различия padding и margin? ###Как ведут себя margin у двух элементов по соседству? ###Какие теги по умолчанию являются блочными, а какие строчными? Можно ли изменить их поведение и как? ###Есть ли у тегов предопределённые стили? ###Как повлиять на вертикальное выравнивание строчного элемента? ###Как браузер “читает” css? ###Какие свойства браузеру отрисовать тяжелее всего? ###При изменении каких свойств браузер затратит больше всего ресурсов и почему? ###Какие вы знаете псевдоэлементы? Где их используют? ###Что такое инлайновые стили? ###Инлайновые стили “сильнее” стилей в обычном файле css? ###Что такое наследование стилей? ###Что вы знаете об !important? ###Приходилось ли Вам сталкиваться с фоном в письмах? Расскажите о своём опыте. ###Как отцентровать элемент по горизонтали не зная ширину родительского блока? ###Как отцентровать элемент по вертикали не зная высоту родительского блока? Перечислите все известные вам методы. ###Что такое “резиновая” вёрстка? ###Какие вы знаете значения размеров в “резиновой” вёрстке? ###Какие бывают значения у свойства background-size? Расскажите о каждом из них. ###Что такое семантичная вёрстка? Для чего она? Улучшает ли она что либо? ###Чем отличается article от section? ###Какие вы знаете способы организации css кода? ###Что такое БЭМ? ###По БЭМ может ли быть блок внутри блока? ###Какие из препроцессоров вы знаете? В чём их различия? ###Какие из инструментов сборки вам знакомы? ###Что лучше Gulp или Grunt? ###Как происходит “сборка” проекта в Gulp и Grunt? ###Что лучше Less или Scss? ###Вы знакомы с Google Pagespeed? ###Что такое gracefull degradation? ###Как проверить html-код на валидность? ###Что такое Bootstrap? Из чего состоит его сетка? На чём построен Bootstrap? ###Что такое размер viewport? ###Вертикальный скролл входит в размер viewport? ###Какой размер вертикального скролла? ###Как правильно задать overflow для body чтобы сохранить вертикальный скролл? ###Как сделать мобильную, планшетную и десктопную версию сайта? ###Что такое ретинизация? ###Должны ли мы отдавать разные размеры картинок пользователям разных устройств? Если да, то как? ###Как можно задавать размеры картинкам? ###Что такое SVG? ###Что такое иконочные шрифты? Где их искать и как подключать? ###Что лучше, делать иконки через SVG или через иконочные шрифты? ###Какие вы знаете способы подключения шрифтов к странице? ###Какие есть способы вставки SVG в HTML? В чём между ними разница? ###Как мы можем взаимодействовать с SVG? ###Как проверить кроссбраузерность тех или иных методов вёрстки? ###Что такое JQuery? ###Как найти элемент на странице с помощью JS и JQuery? ###Что вы знаете о замыканиях и областях видимости в JS? ###Чем ограничена область видимости JS? ###Чем ограничена область видимости Document? ###Что такое DOM? ###Что подразумевает понятие MVC? ###Что такое AJAX? ###Как вызвать отладчик в разных браузерах? ###Расскажите что показывает каждая вкладка в отладчике? ###Что такое NODE JS? ###Что такое Bower? ###Что такое npm? ###Расскажите про формат .json? ###Зачем нам обычно файл package.json? ###Что такое git? ###Что такое ветки(branches)? ###Как посмотреть все ветки в вашем проекте? ###Как посмотреть текущее состояние ветки? ###Что такое отслеживание в git? ###Что такое commit? ###Знакомо ли вам git flow? Если да, то расскажите что это такое? ###Вы знакомы с работой в командной строке? ###Какой командой посмотреть список папок и файлов в категории? ###Какой командой мы можем создать и удалить папку в директории? ##Тесты ###Эти тесты были даны прямо на собеседованиях. Решать нужно было с помощью карандаша и листка бумаги. ###Сверстайте горизонтальный слайдер. Обычная галерея из трёх картинок. Одна картинка занимает размер всего блока. Картинки меняются по нажатию. Реализуйте с помощью JQuery и(или) CSS. ###Реализуйте мобильное меню “гамбургер”. При нажатии на кнопку всплывает полное меню. Реализуйте с помощью JQuery и(или)CSS. ###Дано три блока [1][2][3]. Нужно: ###сделать блоки вертикально ###поменять блоки местами [3][2][1], [3][1][2] ###сделать блоки горизонтально без расстояния между блоками ###Решите без помощи flex. ###Напишите стандартный AJAX запрос на получение информации из формы. Можно не точь-в-точь, на память. ###Что выведет код: var a=1; function num() { var a; console.log(a); a = 3; } num();