Технология верстки 2021: создание простого лендинга (часть 9) HD

Завершаем работу над лендингом, оптимизируем, прикручиваем отзывы в JSON / через API и добавляем отправку данных из формы письмом на указанный email. СОДЕРЖАНИЕ: 00:00 Превращаем наш дизайн в Responsive из Adaptive. 02:46 Готовый вариант адаптации с учетом Responsive. 04:36 Валидация сайта на W3C Validator. Фикс проблемы с дублированием DOCTYPE и с заголовком в футере. 07:49 Делаем телефоны кликабельными на смартфонах. Отступ для подписи под формой. 09:14 Делаем комментарии динамическими. Первый способ - через JSON-файл. Ручная шаблонизация через JS на фронте. 19:53 Второй способ - запрос комментариев из внешнего API. Плагин JSONView. Вносим изменения в предыдущий код. 25:24 Собираем JS-ом данные из формы заявки для отправки письма через PHP. Используем fetch и FormData. 31:52 Запускаем веб-сервер и PHP. Пишем простой скрипт для отправки письма через функцию mail. Решаем проблему с CORS. 39:30 Минификация CSS и JS через Webpack. 41:36 Используем Lighthouse для оценки производительности нашей страницы. Анализ Desktop. 43:11 Защита от падения остальных файлов скриптов из-за ошибки 404 и ошибки парсинга невалидного JSON. 45:52 Проверяем мобильную версию через Lighthouse. Разбираем отчет. Объяснение про кэширование. 49:31 Супер-эффективное сжатие изображений через сервис Squoosh.app. 53:13 Рекомендация про HTML-тег picture для оптимизации загрузки изображений. 55:05 Заключение. Исходники к ролику (PSD-файл с дизайном находится там же): https://github.com/makewebme/website-landing-technology-2021 Стань спонсором канала и получи бонусы: https://www.youtube.com/channel/UCt36CWL85NGtOgUMZ2X6x5g/join Получи скидку 5% на первую оплату хостинга/домена в Reg.ru, используя промо-код: 948E-53B9-CF98-8204 Он вводится во время оплаты услуги. Не забывай - ты не только получаешь скидку, но и поддерживаешь проект! Присоединяйся к нашему Telegram-чату https://t.me/makewebme Если не работает, то http://makeweb.me/telegram-mw-1 или http://makeweb.me/telegram-mw-2 Или по имени чата в поиске - @makewebme