nikolai-shabalin

Вопросы к разделу «Декоративные элементы»

Как делать слайдеры

Скажите, в настоящем времени - что в большей степени используется для построения слайдеров- CSS или JS? Что использовать правильнее и из чего/каких условий стоит исходить?

Для любых компонентов нужно смотреть, нет ли в браузерах уже существующих встроенных решений, которые декларативно (с помощью HTML) позволяют просто вставить и использовать их. Например, <input type="date"> или <input type="color"> вполне хорошо поддерживаются. Потом нужно понять, можно ли оформить этот компонент для ваших целей. И только потом, если не получилось на предыдщих шагах, нужно делать свой компонент на HTML, CSS и JS. Чем сложнее компонент, тем больше вероятность, что для него потребуется JS.

Стоит ли делать слайдеры на чистом css или в настоящее время это уже не так актуально?

nikolai-shabalin

Вопросы к разделу «Введение в CSS»

TODO

nikolai-shabalin

Вопросы к разделу «Работа с графикой»

Какой инструмент выбрать: Фотошоп, Фигма, Зеплин

Какой редактор на ваш взгляд самый популярный и удобный в данный момент? На одной из лекций видел сообщения, что ФШ используется все реже и реже, да и вообще, для верстальщика он не очень удобный. Что скажете на этот счет? На перспективу лучше использовать Zeppelin, например?

Какой инструмент выбрать для начала, фотошоп, фигма, зеплин может другие еще есть? на слуху только фотошоп был. из вашей академии узнал о другух редакторах. Поспрашивал знакомых верстальщиков. мнения разделились Одному без разницы какой инструмент другой сказал фотошоп не предназначен для удобной работы для извлечения контента. В Видео на youtube сказали что лучше с фотошопа начать и не в коем случае не зеплина и авакода. якобы не дадут полного представления о работе с графикой. так что лучше?

Будет ли обзор Adobe XD? Насколько он актуален для верстальщика? В некоторых вакансиях требуется знания целого зоопарка графических программ (Ph

nikolai-shabalin

Вопросы к разделу «Методологии вёрстки»

Как правильно записать по БЭМ если ul со своими элементами, должен быть элементом другого списка ? (Вложенный список в другой список если так яснее).

<div class="block">
  <ul class="block__element list">
    <li class="list__item"></li>
    <li class="list__item"></li>
 

nikolai-shabalin

Вопросы к разделу «Адаптивные сетки»

Вопрос

TODO

nikolai-shabalin

Вопросы к разделу «Адаптивная графика»

Адаптивные картинки

Если попросили сделать резиновую верстку, картинки тоже должны резиниться? Например, она на всю ширину вьюпорта должна располагаться, есть крайние точки - мобилка от 0 до 720 пикселей, в этом случае картинка должна растягиваться до 720 пикселей? Дальше крайние точки от 720 до 1140, здесь уже через srcet подставляем картинку качественнее, и уже эта более качественная картинка тянется в пределах этих точек, и так далее, правильно я понимаю?

В резиновой вёрстке картинки резинятся вместе со всеми блоками. Самый ленивый вариант — вставить картинку максимального разрешения для десктопа и она просто сузится на мобильных. Но тогда вы будете передавать пользователям мобильных лишние сотни килобайтов, что в сумме складывается в лишние мегабайты. Лучше готовить отдельные изображения для подходящих брейкпоинтов и дальше переключать их с помощью srcset и синтаксиса 400.png 400w — мы расскажем об этом подробнее в лекции.

Оформление адаптивных карт

nikolai-shabalin

Вопросы к разделу «Погружение в автоматизацию»

Как загрузить визуальный интерфес для Squoosh и SVGOMG? На лекции Валим Макеев рассказал, что можно установить эти программы локально, и использовать вне браузера, отдельными окнами. Подскажите пожалуйста как это сделать.

• Откройте Google Chrome
• Зайдите по очереди на jakearchibald.github.io/svgomg/ и squoosh.app
• Установите их с помощью кнопки в адресной строке:

nikolai-shabalin

Вопросы к разделу «Введение в JavaScript»

Асинхронная загрузка скриптов в шапке (HEAD) или же подключение скриптов в самом конце документа. Что лучше?

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

Как верстается и оживляется сложный фильтр с двумя "range" слайдерами?

Через сторонние библиотеки. Реализовывать это самому не имеет никакого смысла. Если кратко о принципе: то получают положение ползунка и считают по пропорции значение.

nikolai-shabalin

Вопросы к разделу «Декоративные элементы»

Позиционирование и z-index

Можно ли в слайдере глейси размещать текст на мороженом и кнопку с помощью позиционирования? Если это некорректный способ, нужно использовать z-index?

Попробуйте расположить текст и кнопку с помощью флексов, а картинку с мороженым вставить фоном. В этом случае вам не понадобится ничего позиционировать. Но если захочется, то да — этo position: absolute + z-index, только не забудьте проверить вёрстку на переполнение контентом: текст над кнопкой может быть не только в две, но и в одну, три и больше строк.

Что важнее: 100% соответствие макету или кратность 5px?

nikolai-shabalin

Вопросы к разделу «Введение в CSS»

Поясните пожалуйста критерий "Д13. Файл стилей представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный"

CSS-правила пишутся достаточно размашисто

.title {
  font-size: 14px; 
  line-height: 21px;
}