В. — Как лучше верстать breadcrumbs списком или ссылками? О. — посмотрите, как делают типовые элементы в Бутстрапе http://getbootstrap.com/components/ Можно взять за основу код, написанный профессионалами. Копируйте с пониманием - свой код вы должны знать на 120%
В. — Что такое flex-box? О. — http://frontender.info/a-guide-to-flexbox/ и https://www.youtube.com/watch?v=x0fcNDaE7Z0, и http://html5.by/blog/flexbox, и http://bennettfeely.com/flexplorer, и https://youtu.be/tge9YQDAasc А так гугл в помощь.
В. — Я закинул на FTP папку с html и css файлом, плюс 4 картинки. Открываю index.html - они не работают? О. — Проверьте адреса подключаемых css файлов и картинок. Кстати, мы пользуемся относительной адресацией - когда путь отсчитывается от текущего пути файла, а не от домена или адреса файла в файловой системе.
В. — Имеем в верстке блок под img в него кинем картинку в дальнейшем. Вырезать картинку из макета какого размера — по размерам заданного контейнера, а если она при этом изменяется? О. — 1. Вырезаем картинку по её границам и центруем внутри блока. 2. Вырезаем картинку по размеру контейнера. В обоих случаях стоит уделить внимание защите от переполнения, т.е. добавить ограничение ширины img и добавить height:auto.
В. — Зачем нужно оборачивать поля формы вместе с <label> в отдельный блок?
О. — Чтобы контролировать отступы между элементами формы. Если форма будет очень простой и состоять из 2-3 полей, то рациональней использовать для контроля отступов «соседний селектор», например input[type=”email”]+input[type=”password”].
В. — Почему label должен через for подписываться? О. — Атрибут for ссылается на уникальный атрибут id элемента . Другими словами, label содержит ссылку, чтобы быстро выделить правильное поле в фокус. Кроме того, label[for] очень удобен для чекбоксов и радиокнопок.
В. — Почему span и label не реагируют на margin’ы? О. — Потому что они inline-элементы (другими словами строчные), а отступы у нас применяются для блочных (исключение display: inline-block). http://html5book.ru/block-inline-elements/
В. — Допустим, на разных страницах сайта заданы хедеры с классом page-header. Но в хедерах есть отличия. Как правильно поступать: каждому задавать класс page-header и класс-модификатор, в котором прописывать уникальные свойства? О. — Если отличий много - это разные блоки. Если отличий мало и они незначительны значит через модификаторы.
В. — В разметке слова "Новости" и "Фотогалерея" писать в верхнем или нижнем регистре? О. — Все тексты пишутся по правилам русского языка, с маленькой; в начале предложения и для собственных имен — с большой. Поднимаем через css свойство text-transform, со значением uppercase.
В. — Каким тегом верстать кнопку? О. — В большинстве случаев это ссылка . В формах также встречаются и . Также может быть и вне формы.
В. — Как делать разметку если там должен быть элемент с JS. О. — В большинстве случаев требуется разметить и стилизовать элементы, а также все возможные состояния, которые будут реализованы через js. Состояния обычно добавляются классами, допустим классом active для открытого таба. Существуют элементы, которые размечать сразу не надо, например навигационные буллеты в слайдере. Обычно сначала встраивают слайдер, а потом стилизуют автоматически сгенерированные скриптом буллеты, пользуясь классами слайдера, либо изменяя их через API-плагина.
В. — normalize.css и reset.css. Что это такое? О. — Браузеры по-разному отображат элементы без стилей. Чтобы не мучаться, Эрик Майер когда-то придумал ресет, файлик, который устанавливает в ноль стили у всех элементов. Потом можно накладывать поверх собственные стили. Прошли годы, и человечество поняло, что сбрасывать всю разметку в ноль – как-то слишком, достаточно устанавливать везде «нормальное» состояние. Так появился нормализатор.
В. — Что такое валидатор? О. — Валидатор - инструмент, проверяющий код на соответствие спецификации, то есть правильность самого кода.
В. — Шрифты, которые в макете лежат, тоже через линк подключаются или через @ и в css? О. — На интенсиве лучше подключать через google fonts https://www.google.com/fonts следуя инструкциям оттуда. Нестандартные шрифты подключаются через @fontface, об этом есть отдельная тема в интенсиве.
В. — Как отцентрировать элемент? О. — http://howtocenterincss.com/
В. — Почему нужен 1 css-файл на все страницы? О. — 1. Браузер сохранит css файл в кеше при первом открытии страницы и не будет загружать дополнительные стили при переходе на новые. 2. Подготовка разных css файлов сильно усложнит правки каких-то общих элементов — придется контролировать, что изменены все возможные файлы. Вот, например, по барбершопу у тебя 4 стилевых файла. И вдруг нужно поменять все шрифты на проекте. Тебе придется изменить кучу классов во всех 4 css, а потом еще и тестировать, что нигде ничего не потерялось и все работает.
В. — Зачем .page-wrapper, если есть body? О. — Общая обертка для всего содержимого часто бывает полезна для стилей, которые не хочется назначать body. Например, для назначения свойства overflow: hidden.
В. — Как написать в css “подняться выше на папку”? О. — “../”. Например background: url(“../img/example.jpg”);
В. — Делаю форму. Из-за того, что указываю в textarea rows и cols, начинает выпадать блок с кнопками. О. — Указывай размеры в css.
В. — Почему clearfix не работает? О. — Этот класс должен задаваться родителю float-элементов. Подробная статья с разными видами clearfix’а - http://webformyself.com/ochistka-plavayushhix-elementov-obzor-razlichnyx-metodov-clearfix
В. — Можно ли в тег а вставлять div? О. — Можно, если дизайн этого требует и нельзя реализовать это с помощью :before и :after.
В. — Какие картинки вставлять img, а какие фоном? О. — Изображения, добавляемые непосредственно в контент и являющиеся его частью (например фотографии в посте или слайдер) делаются через img. Изображения служащие для оформления (например иконки, декоративные элементы, full-screen изображение) делаются через background.
В. — Что такое sticky footer? О. — Это такой футер, который остается прижат к нижнему краю экрана в случае, когда контента не хватает на всю высоту экрана. Пример и реализацию можно посмотреть здесь https://css-tricks.com/snippets/css/sticky-footer/. Еще одна эффективная реализация - через display: table-row (см статью https://htmlacademy.ru/blog/29 ). Преимущество последнего подхода — не надо фиксировать высоту футера.
В. — Как размечать заголовки на странице? О. — Тегами от h1 до h6, с указанием классов. Стилизация должна проходить так, чтобы можно было легко изменить h2 на div(например), и при этом не потерять внешний вид элементов. Также следует следить за иерархией заголовков: если на странице есть h2 и h4, то между ними должен быть h3. При использовании тегов не путайте контентные заголовки и элементы, которые выглядят как заголовки, но ими не являются (то есть не озаглавливают контент).
В. — Как подключить Bootstrap (или другой фреймворк)? О. — Не подключайте все файлы полностью! Получите слоновый css с кучей лишнего кода. Воспользуйтесь онлайн генератором http://getbootstrap.com/customize/ Если вы пишете на Less/Sass, проведите эту кастомизацию вручную — просто закомментируйте подключения файлов в основном коде.