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

У вашего броузера проблема в совместимости с HTML5

Завершаем работу над лендингом, оптимизируем, прикручиваем отзывы в 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