↓↓↓ Макет и ссылка на материалы в описании под видео ↓↓↓
Выполняю верстку тестового задания с собеседования. Верстка карточек, flexbox, мобильная верстка, JavaScript скрипты, интерактив на странице, кроссбраузерность и полифилы.
Материалы ВебКадеми на всех площадках: https://webcademy.ru/taplink/
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
💻 Бесплатный курс "Создай свой первый сайт на HTML5 и CSS3"
От установки редактора, до публикации в сети.
👉 Получить уроки, конспекты, макет и код из уроков: http://webcademy.ru/htmlsite/
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Мои авторские курсы:
💻 Профессия HTML верстальщик
Для начинающих. Курс по созданию и верстке сайтов.
👉 https://webcademy.ru/htmlstart/
💻 Курс "Frontend разработчик. JavaScript + React"
Станьте frontend разработчиком за 3 месяца.
👉 https://webcademy.ru/jscourse/
💻 Курс "Разработка сайтов на 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