15 вопросов для собеседования HTML-верстальщика | ПРОДВИНУТЫЙ уровень
Вставка
- Опубліковано 20 чер 2024
- В данном видео разберем 15 вопросов для HTML-верстальщика.
Вопросы подобраны уже для людей, которые уже давно занимаются версткой и знают различные нюансы.
Поддержать меня на Boosty:
boosty.to/yuri_simonov
Таймкоды:
00:00 Вступление
01:19 Является ли данная разметка правильной? (пример)
01:54 Является ли данная разметка правильной? (пример)
02:38 Является ли данная разметка правильной? (пример)
03:38 Является ли данная разметка правильной? (пример)
04:07 Может ли быть несколько заголовков "h1" на странице?
06:55 Может ли быть несколько тегов "header" или "footer" на странице?
07:55 Почему не используется стандарт HTML5 при верстке email-рассылок?
08:27 Какой из вариантов разметки является правильным?
09:08 На какие элементы из примера сработает данный селектор: p[class^="red"] ?
09:43 Как с помощью CSS обратиться к тегу "p", у которого нет класса "text", не затронув при этом никак теги "p", имеющие класс "text"?
11:02 Какой тег отвечает за описание страницы в интернете при поисковом запросе?
11:55 Если блоку задано свойство "overflow-x: hidden", тогда какое свойство станет по умолчанию по оси "y" (overflow-y) ?
13:11 Чем полезны data- атрибуты?
13:50 Как можно оптимизировать скорость загрузки сайтов на примере изображений?
15:31 Какое CSS-правило явно задает кодировку символов в таблице стилей?
16:03 Заключение
Ссылка на первое видео из данного плейлиста:
• 15 вопросов для собесе...
Ссылка на плейлист с вопросами:
• Вопросы для собеседования
Мой телеграм канал по айтишечке:
t.me/yuri_simonov_it
Я в соц.сетях:
VK: yura1596
Круто! Продолжайте пожалуйста.
хорошая подборочка, продолжай пилить в том же духе!!!!
Очень полезно! Спасибо!
Отличный формат!!Продолжайте выпускать подобные видео)) Жду видео по js!
Спасибо большое за такие видео. Очень помогают при подготовке к собеседованию. Узнаёшь свои слабые стороны.
Юрий, отличный контент, спасибо!
Вам спасибо за обратную связь! :)
❤❤❤❤❤
Можно такую же серию видео но об JavaScript? Вас приятно слушать
Не ожидал такой похвалы)
Насчет серии по JS есть мысли сделать такого рода видео
По поводу 5 вопроса: действительно, в спецификации какое-то время было указано, что можно использовать только h1 и в зависимости от секционных элементов будет построена иерархия. Однако этот алгоритм не реализовал ни один браузер, поисковые роботы по-прежнему ориентируются на уровни заголовков, а упоминания этой возможности уже удалили из спецификации. Таким образом всё ещё нужно использовать заголовки h1-h6 и соблюдать правильную иерархию.
По 6 вопросу: хедеров и футеров может быть сколько угодно, но есть нюансы. Хотя валидатор и не ругается на приведённый пример, но с точки зрения доступности это не правильно. Если header/footer не являются дочерними для section, article, aside или nav, то они будут создавать ориентиры banner и complimentary. Элемент main не является секционным, поэтому в примере два header и два footer относятся к body. Если переместить их в article, то всё будет корректно.
14й вопрос: я бы добавил ещё 4й способ оптимизации - уменьшение веса стандартных форматов jpeg/png за счёт ресайза, компрессии, уменьшения палитры и тд.
Спасибо за такой развернутый ответ! Возможно так и есть
Хорошие уроки у вас, где-то что вспоминаю, где-то что-то новое узнаю.
Я уже верстаю давно, но до сих пор для меня новый формат загрузки иконок svg напрягает. Я думаю про svg можно даже одно полноценное видео записать. Так как есть куча способов их загружать и у каждого свои минусы есть. Так же в одном проекте через админку грузят заказчики svg при создании раздела нового например и он грузится через , но при такой загрузке нет возможности управлять цветом картинки и она ничем не отличается от png получается и приходится делать скрипт, который преобразует вывод в вывод . В общем много всякого связано с ними, что меня аж бесит). Ещё вариант icomoon например тоже вымогучий в том плане, что ты уже сдал проект, а тебе говорят вот тут ещё одна страничка, а на ней новые svg иконки и опять нужно генерировать icomoon либо подключать второй icomoon называя его icomoon2, что уже является неправильным.
Может я ещё что-то не знаю про svg и вы смогли бы в этом видео открыть для меня идеальный способ загрузки svg иконок, которым можно было пользоваться и не заморачиваться).
Насчет проекта с админкой есть 1 предложение по решению вашей проблемы - использовать CSS-свойство "filter".
Оно вам поможет если иконки действительно в итоге становятся png-форматом и не имеют фона. Знакомы с этим свойством?
@@Yuri_Simonov Знаком с filter, но что же у него может поменять цвет изображения? Я только использовал его, когда нужно было по наведению например сделать однотонным или затемнить, или наоборот осветлить, но именно поменять цвет через filter вроде нельзя.
@@user-kz8iy7yg7s Да, вы правы. Но можно изменить цветовой оттенок, с помощью "filter: hue-rotate();"
Правда тут 2 сценария могут быть:
1) Если svg-иконка изначально черная/серая/белая, то ее надо покрасить в любой из цветов (green/red/blue/yellow), чтобы была возможность изменять цвет, т.к. свойство "filter" и с png-форматом работает (покрасить можно в том же фотошопе. Да, геморрой, но всё же).
2) Если иконка изначально цветная, а нужно ее сделать черной/серой/белой, то "filter" опять же это может сделать.
Понимаете к чему я клоню?
@@Yuri_Simonov Действительно с цветными объектами можно работать при помощи hue-rotate, правда нужный цвет сложно поймать)). Надо будет попрактиковаться или поискать как с помощью hue-rotate поймать нужный цвет.
А в чёрный или белый я уже делал при помощи brightness или grayscale.
По картинкам не упомянули метод создания спрайтов, хотя это довольно редкий вариант. И банальное сжатие картинки.
Ещё сюда можно косвенно отнести кеширование, хотя оно уже не к вёрстке относится.
Переход к webp-формату отчасти можно отнести к сжатию картинок. Иначе какой смысл использовать данный формат.
Но если рассматривать чисто jpg/png, тогда да, сжатие тоже поможет.
По label, я бы всё-таки склонялся, что это несовершенство самого HTML5 вкупе с ленью верстальщиков. Видимо, предполагается, что лейбел нужен только для текстового описания поля, что, конечно, правильно, и очень удобно с точки зрения семантики. Но дефолтная возможность «перенаправления» клика с лейбла на инпут слишком уж подкупает. Не писать же ради этого каждый раз скрипт, когда зона клика является сложным задизайненым элементом.
Возможно в будущем мы увидим доработку label и в него можно будет вставлять блочные теги (как с тегом "а". Он же тоже инлайновый, но валидатор не ругается, если вставить в него блочные теги).
Вроде бы нельзя, чтобы h1 был несколько раз на одной странице
Можете сами проверить, если не верите)
Мне кажется много здесь тупо не понадобиться