Верстка тестового задания с собеседования на должность HTML верстальщик. Верстка, JS, полифилы.

↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓

Выполняю верстку тестового задания с собеседования. Верстка карточек, flexbox, мобильная верстка, JavaScript скрипты, интерактив на странице, кроссбраузерность и полифилы.

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Курс по созданию и верстке сайтов: https://webcademy.ru/htmlstart/
Обучение с наставником, 3 месяца, результат, гарантия.
Научим создавать веб-сайты и зарабатывать на этом.

💻 Курс "Frontend разработчик. JavaScript + React": https://webcademy.ru/jscourse/
Обучение с наставником, 3 месяца, результат, гарантия.

💻 Курс "Разработка сайтов на PHP + MySQL":
https://webcademy.ru/phpcourse/
Создание сайтов с системой управления.
Присоединиться к курсу можно прямо сейчас.

🏁 Обучение с нуля
💁‍♂️ Обучение с наставником
🎯 Доведение с нуля до результата
🏢 Помощь с трудоустройством
💵 Поможем взять первый заказ на фрилансе

💳 возможна рассрочка
💳 если курс не понравится, вернём деньги в первую неделю
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

Сайт школы ВебКадеми: https://webcademy.ru/
Вступайте в группу Вконтакте: https://vk.com/webcademy
Подписывайтесь на Telegram: https://t.me/webcademynews

Скачать верстка и дизайн:
https://webcademy.ru/files/design-and-ready-html-test-webcademy.zip

Скачать дизайн:
https://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 Заключение

💈 Сайт школы ВебКадеми: https://webcademy.ru/
💈 Вступайте в группу Вконтакте: https://vk.com/webcademy
💈 Подписывайтесь на Telegram: https://t.me/webcademynews