Верстка сайта Apple.com

👨🏼‍💻 ТГ Канал с материалами: https://t.me/+9XtDDNBdHAk4Yjhi

Программы ВебКадеми:
📦 HTML верстальщик: https://webcademy.ru/htmlstart
🛠️ Frontend разработчик: https://webcademy.ru/frontend

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

🌍 Сайт ВебКадеми: https://webcademy.ru

ТАЙМ КОДЫ:

Введение и подготовка проекта

00:00 Приветствие, план стрима, структура apple.com
01:10 Про прошлые стримы: линтеры, Husky, настройка окружения
03:00 Разбор архитектуры сайта и выбор технологий
06:00 Голосование за стек, почему выбираем Next.js
09:00 Коротко о Vite и Webpack, когда что использовать
17:00 Курсы WebCademy, формат и преимущества обучения
23:00 Создание проекта npx create-next-app, структура и запуск

Навигация и шапка сайта

29:00 Очистка шаблона и структура файлов app/
33:00 Подключение шрифта SF Pro Display
40:00 Разметка nav: логотип, пункты меню, иконки
47:00 Компонент Nav и стили через CSS-модули
53:00 Стилизация шапки: фон, flex-раскладка, кликабельность
01:03:00 Подключение SVG-иконок и управление цветом
01:33:00 Проверка адаптивности и финальные правки

Hero-блок и работа с изображениями

01:45:00 Начало Hero: структура Apple, подготовка изображений
02:02:00 Компонент Hero и использование next/image
02:07:00 Позиционирование, фон, z-index
02:22:00 Мобильные картинки, useEffect и переключение версий
02:27:00 Контент Hero: заголовки, кнопки, адаптивные размеры

Компоненты и кнопки

02:42:00 Создание компонента Button (Button.jsx, style.css)
02:50:00 Пропсы title, type, hover-эффект, outline/primary
02:55:00 Переменные цветов и мелкие стили
03:00:00 Оптимизация изображений и производительности

Вариации Hero и рефакторинг

03:06:00 Добавление HeroWhite, type="white"
03:09:00 Единый объект данных: title, subtitle, buttons, images
03:18:00 Второй Hero (iPhone Air), работа с key и выравниванием
03:23:00 Третий Hero (iPhone 17), адаптивные отступы и фон

Блок Promo и мелкие карточки

03:27:00 Новый раздел Promo: сетка и подход
03:31:00 Сохранение изображений (Watch, AirPods, MacBook, Trade In, Card, iPad)
03:35:00 Сетка PromoGrid через CSS Grid и медиазапросы
03:41:00 HeroSmall и HeroSmall.module.css
03:47:00 Мелкие стили, уменьшенные шрифты и высота блоков
03:52:00 Подключение данных Promo и рендеринг
03:55:00 Вынос данных в /data/Hero.js и /data/Promo.js

Финальные штрихи

04:05:00 Готовая главная: Hero + Promo, адаптивная структура
04:08:00 Адаптив меню и иконок
04:11:00 Заголовок как изображение (type: "image"), visual-hidden для SEO
04:17:00 Финальные отступы, типографика, проверка Promo
04:22:00 Прощание, ответы на вопросы
04:25:00 Удаление Tailwind и PostCSS — чистовой рефакторинг

Видео Верстка сайта Apple.com канала ВебКадеми | Юрий Ключевский