Skip to content

Instantly share code, notes, and snippets.

View nikolai-shabalin's full-sized avatar

Nikolai Shabalin nikolai-shabalin

View GitHub Profile
@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-3.md
Last active September 17, 2019 11:11
Вопросы к разделу «Работа с графикой» на 26 потоке

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

1. Не так давно узнал о таких инструментах как Figma, Zeplin и Avacode. Будет ли комфортно переходить на них после фотошопа?

Да, смысл есть, так как фотошоп не особо предназначен для верстальщика. Да, с поомщью фотошопа можно сверстать макет, но это как раз бедут не очень комфортно. Привыкнуть к Figma, Zeplin, Avocode вы сможете без каких-либо проблем.

2. Порекомендуйте сайты, на которых есть окно для кода HTLM/CSS/JS

@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-5.md
Last active September 24, 2019 11:08
Вопросы к разделу «Введение в CSS» на 26 потоке

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

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

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

.title {
  font-size: 14px; 
  line-height: 21px;
}
@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-7.md
Last active October 10, 2019 11:17
Вопросы к разделу «Декоративные элементы»

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-9.md
Last active October 16, 2019 15:57
Вопросы к разделу «Введение в JavaScript»

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-8.md
Last active January 11, 2020 18:18
Вопросы к разделу «Погружение в автоматизацию»

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

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

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

image

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-6.md
Last active December 15, 2019 22:02
Вопросы к разделу «Адаптивная графика»

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-4.md
Created October 10, 2019 11:43
Вопросы к разделу «Адаптивные сетки»

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

Вопрос

TODO

@nikolai-shabalin
nikolai-shabalin / htmlcss-2__section-2.md
Last active November 28, 2019 11:23
Вопросы к разделу «Методологии вёрстки»

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

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

<div class="block">
  <ul class="block__element list">
    <li class="list__item"></li>
    <li class="list__item"></li>
 
@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-3.md
Last active February 4, 2020 03:59
Вопросы к разделу «Работа с графикой» на 27 потоке

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

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

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

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

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

@nikolai-shabalin
nikolai-shabalin / htmlcss-1__section-5.md
Created January 23, 2020 13:32
Вопросы к разделу «Введение в CSS» на 27 потоке

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

TODO