Верстаю тестовое задание с собеседования на должность
Верстаю тестовое задание с собеседования на должность «HTML верстальщик сайтов». Полное видео
Разбираю и верстаю тестовое задание с собеседования на должность Веб-мастер / HTML верстальщик. Показываю как сверстать каталог товаров, сверстать фильтр, сделать pixel perfect, добавить мобильную адаптивность и сделать требуемые JS скрипты для страницы. Тестирую кроссбраузерность и добавляю полифилы для IE 11. Вакансия размещена в веб-студии, город Санкт-Петербург, оклад 40'000 — 55'000 рублей в месяц.
Видео будет полезно всем кто хочет стать веб-разработчиком и планирует начать с верстки сайтов и работать HTML верстальщиком сайтов.
Автор: Юрий Ключевский
Школа обучения веб-разработки ВебКадеми.рф
Скачать макет: webcademy.ru/files/design-html-test-webcademy.zip
Тайм коды к видео:
00:00 Введение
01:15 Вакансия, требования
02:50 Макет тестового задания
04:05 Техническое задание
09:09 Создание проекта
11:54 Экспорт графики
16:20 Подключение шрифтов
17:38 Приступаем к верстке
23:20 Верстка карточки — HTML
25:25 Верстка карточки — CSS
39:06 Проверка карточки на pixel perfect
43:39 Дублируем карточки
50:48 Кнопка «Показать Ещё»
0:57:44 Верстка сайдбара. Заголовок в виджетах
1:04:39 Верстка виджета «Близость к метро» (нестандартные элементы)
1:25:42 Верстка виджета «Срок сдачи» (радиокнопки)
1:40:19 Верстка виджета «Дополнительные опции» (чекбоксы)
1:55:16 Верстка toggle переключателя «Услуги»
2:05:10 Кнопки в сайдбаре «Применить» и «Сбросить»
2:17:21 PixelPerfect для сайдбара и всего макета
2:35:48 Мобильная адаптация
2:53:10 Сайдбар на мобильных
2:59:35 Иконка для открытия сайдбара + JS
3:13:50 Финальные штрихи в мобильном адаптиве
3:19:40 JS для кнопки «Показать еще» в карточках
3:24:44 JS для открыть/закрыть виджет, клик по заголовку виджета
3:36:00 JS для кнопок в виджете «Близость к метро»
3:51:33 JS для ссылки показать еще в виджете «Дополнительные опции»
4:02:58 Сброс формы, финальные штрихи с JS
4:05:52 Кроссбраузерность, полифил для IE 11
4:09:58 Заключение
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Разбираю и верстаю тестовое задание с собеседования на должность Веб-мастер / HTML верстальщик. Показываю как сверстать каталог товаров, сверстать фильтр, сделать pixel perfect, добавить мобильную адаптивность и сделать требуемые JS скрипты для страницы. Тестирую кроссбраузерность и добавляю полифилы для IE 11. Вакансия размещена в веб-студии, город Санкт-Петербург, оклад 40'000 — 55'000 рублей в месяц.
Видео будет полезно всем кто хочет стать веб-разработчиком и планирует начать с верстки сайтов и работать HTML верстальщиком сайтов.
Автор: Юрий Ключевский
Школа обучения веб-разработки ВебКадеми.рф
Скачать макет: webcademy.ru/files/design-html-test-webcademy.zip
Тайм коды к видео:
00:00 Введение
01:15 Вакансия, требования
02:50 Макет тестового задания
04:05 Техническое задание
09:09 Создание проекта
11:54 Экспорт графики
16:20 Подключение шрифтов
17:38 Приступаем к верстке
23:20 Верстка карточки — HTML
25:25 Верстка карточки — CSS
39:06 Проверка карточки на pixel perfect
43:39 Дублируем карточки
50:48 Кнопка «Показать Ещё»
0:57:44 Верстка сайдбара. Заголовок в виджетах
1:04:39 Верстка виджета «Близость к метро» (нестандартные элементы)
1:25:42 Верстка виджета «Срок сдачи» (радиокнопки)
1:40:19 Верстка виджета «Дополнительные опции» (чекбоксы)
1:55:16 Верстка toggle переключателя «Услуги»
2:05:10 Кнопки в сайдбаре «Применить» и «Сбросить»
2:17:21 PixelPerfect для сайдбара и всего макета
2:35:48 Мобильная адаптация
2:53:10 Сайдбар на мобильных
2:59:35 Иконка для открытия сайдбара + JS
3:13:50 Финальные штрихи в мобильном адаптиве
3:19:40 JS для кнопки «Показать еще» в карточках
3:24:44 JS для открыть/закрыть виджет, клик по заголовку виджета
3:36:00 JS для кнопок в виджете «Близость к метро»
3:51:33 JS для ссылки показать еще в виджете «Дополнительные опции»
4:02:58 Сброс формы, финальные штрихи с JS
4:05:52 Кроссбраузерность, полифил для IE 11
4:09:58 Заключение
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
0 комментариев