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

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

⚛️⚛️⚛️
Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me.
Детали тут: https://makeweb.me/course-js-fullstack-developer
Телеграм для связи по курсу: @makewebchatme

🛍 🛍 🛍
Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru.
Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги).

💬 💬 💬
Присоединяйся к нашему Telegram-чату https://t.me/makewebme

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