Выкладываю задание с благотворительного HTML-ивента
Для тех, кто тоже хочет попробовать поработать с задачкой, которую я дала джунам на верстку в рамках благотворительного ивента для джунов.
〰️ Суть задания
Сверстать макет на HTML/CSS/JS без фреймворков. Для слайдеров и эффектов можно брать готовые либы, а можно пробовать написать самим.
〰️ Макет
🔵 макет в фигма-формате лежит вот тут. Когда вы зайдете, вы увидите 2 темплейта. Почему так: покупные макеты всегда идут без картинок, чтобы не мучиться с авторскими правами.
Поэтому слева у вас полноценный макет без картинок (со слоями и ассетами), а справа шакальный jpg, как пример, как это должно быть с картинками. Картинки вы будете вставлять на ваше усмотрение (откуда брать бесплатные hi-res иллюстрации, смотрите в разделе поста "Ассеты и тексты");
🔵 макет потребует специальных шрифтов (откуда их брать, смотрите в разделе поста "Ассеты и тексты");
🔵 к макету оставлены мои комментарии. Часть из них про какие-то обязательные моменты, часть - про то, как усложнить себе задачу, если хочется больше челленджа;
🔵 макет идет только на десктоп. (что делать с адаптивом, смотрите в разделе "Адаптив");
〰️ Ассеты и тексты
🔵 картинки в высоком разрешении вы можете скачать бесплатно на Unsplash (например, по запросу Construction). Картинки будут много весить, не забудьте минифицировать их любым удобным вам способом (например, на сайте TinyPng);
🔵 в макете используются бесплатные шрифты из Google Fonts. Вы можете подключить их отсюда: Jost, Barlow (если в макете найдутся еще какие-то семейства шрифтов, ищите тоже на Google Fonts, а если там нет, заменяйте на любые понравившиеся оттуда);
🔵 если нужны дополнительные бесплатные иконки, берем с Flaticon;
🔵 местами, вам понадобятся отсутствующие тексты, например, для элементов слайдеров. Лучше генерировать разные через ChatGPT или аналоги, чем вставлять в Lorem Ipsum;
〰️ Адаптив
🔵 его в макете нет, остается на ваше усмотрение.
Попробуйте сделать так, чтобы прилично работало на стандартных брейкпойнтах (≥1400px, ≥1200px, ≥992px, ≥768px, ≥576px, <576px);
〰️ Как усложнить, если все слишком легко и быстро делается
🔵 часть комментов про усложнения оставлена в самом макете;
🔵 кроме этого, можно:
▫️ сделать анимации блоков на скролл (хотите - полностью кастомные, хотите - через библиотечки, например, можно подключить Animate.css и через js приделать коллбэк на скролл);
▫️ перевести все на Astro / любой фреймворк;
▫️ разобраться, как через сборщик автоматически минифицировать картинки;
▫️ попробовать сделать SVG-спрайты для части ассетов;
▫️ добавить всякие микроанимации на ховеры и клики;
▫️ написать кастомный слайдер вместо подключаемой библиотеки;
▫️ поиграть с оптимизациями (тег <picture>, critical css итд);
〰️ Ревью работ команд
Я в этих ревью много рассказывала про хорошие практики верстки:
🔵 часть #1
🔵 часть #2
〰️ Мои вебинары про БЭМ
Два больших вебинара про БЭМ и нейминг, могут вам пригодиться по ходу работы:
🔵 Структура HTML-страницы (часть #1)
🔵 Структура HTML-страницы (часть #2)
Если у вас есть любые вопросы, задавайте в комментах!
Для тех, кто тоже хочет попробовать поработать с задачкой, которую я дала джунам на верстку в рамках благотворительного ивента для джунов.
Сверстать макет на HTML/CSS/JS без фреймворков. Для слайдеров и эффектов можно брать готовые либы, а можно пробовать написать самим.
Поэтому слева у вас полноценный макет без картинок (со слоями и ассетами), а справа шакальный jpg, как пример, как это должно быть с картинками. Картинки вы будете вставлять на ваше усмотрение (откуда брать бесплатные hi-res иллюстрации, смотрите в разделе поста "Ассеты и тексты");
Попробуйте сделать так, чтобы прилично работало на стандартных брейкпойнтах (≥1400px, ≥1200px, ≥992px, ≥768px, ≥576px, <576px);
Я в этих ревью много рассказывала про хорошие практики верстки:
Два больших вебинара про БЭМ и нейминг, могут вам пригодиться по ходу работы:
Если у вас есть любые вопросы, задавайте в комментах!