HTML Academy

День 3️⃣, сообщение от Кекса

Сегодня делаем интерфейсы выразительными без лишней мишуры: многослойные фоны, аккуратные рамки и точные тени — всё по делу, всё управляемо. Будем собирать «картинку» из слоёв, не теряя производительность и читаемость кода.

Подключим графический интеллект: background-* как палитра, border-image как конструктор нестандартных рамок, а SVG — как векторный инструмент, который масштабируется без «пикселей» и поддаётся трансформациям. Ваша UI-работа станет и аккуратнее, и богаче.

В программе:
152 задания, 45 испытаний и 68 вызовов, а также 717 баллов.

Подробнее | Кексобот | Правила

👍 За последние дни мы рассказали о компаниях, которые следят за чемпионатом по вёрстке — вот ещё несколько.

Кто-то из них разрабатывает крупные сервисы, кто-то создаёт креативные digital-проекты, а кто-то работает над продуктами, которыми пользуются миллионы.

Объединяет их одно — интерес к вашим навыкам и вашему коду.

https://htmlacademy.ru/contest

Показываем процесс создания галереи со скользящим hover-эффектом

Этот код создает адаптивную галерею с красивым скользящим эффектом при наведении:

🔴 плавное поднятие элемента при наведении,
🔴 увеличение изображения с эффектом зума,
🔴 скользящее появление текстового описания снизу,
🔴 адаптивная сетка на CSS Grid,
🔴 элегантные тени и градиенты,
🔴 кнопка для копирования кода.

Вы можете легко адаптировать этот код под свои нужды, изменив цвета, размеры или добавив дополнительные эффекты. Галерея отлично смотрится на любых экранах и устройствах.

День 2️⃣, сообщение от Кекса

Сегодня точность — наше всё: будем «прицеливаться» селекторами так метко, что ни один лишний <div> не ускользнёт. Псевдоклассы, атрибуты и состояния — ваш набор инструментов, чтобы интерфейсы вели себя предсказуемо и выглядели взрослым, продуманным кодом.

А ещё разберём табличные раскладки без мифов и хаков: когда display: table по-делу, как центрировать по вертикали и собрать тот самый «Святой Грааль». Итог дня — CSS короче, специфичность под контролем, а диффы чище.

В программе:
50 заданий и 6 испытаний, а также 80 баллов.

Подробнее | Кексобот | Правила

День 1️⃣, сообщение от Кекса

Звонок прозвенел — но не в школе, а в IDE. Сегодня «день разметки»: собираем скелет страницы и учим его держаться прямо. Покажу, как формы подсказывают, таблицы говорят с технологиями доступности, а раскладки не разваливаются при первом же ресайзе.

Начнём учебный год по-взрослому: связываем поля и подписи, наводим порядок в табличных данных и раскладываем блоки гибко — Flexbox и Grid как основа читаемых и масштабируемых интерфейсов.

В программе:
142 задания и 15 испытаний, а также 217 баллов.

Подробнее | Кексобот | Правила

🆗 Неделя знаний началась!

Совместно с NAUKA, KLBR Studio и TravelLine открыли тренажёры HTML Academy: 895 заданий и 151 испытание — всё бесплатно и на целую неделю. Самое время прокачать навыки, заработать баллы и, возможно, унести приз.

Однажды у наставника спросили, как успеть всё. Он ответил: «Начните с одного задания — прямо сейчас. Завтра — ещё одно». Через неделю останется список сделанного, а не список планов. Сделайте одно задание сейчас — остальное подтянется.

Что делать?

– Присоединиться к неделе знаний через лендинг или прямо в боте.
– Выбрать тренажёр и начать — с нуля или с любого места.
– Каждый день участвовать в викторинах, испытаниях и вызовах.
– Звать друзей и вместе набирать очки.

И помните: розыгрыш 14 призов среди тех, кто по итогам недели окажется в топ-30. Финал в прямом эфире 8 сентября в 20:00 (MSK) — ссылку пришлём в боте.

Пора! Тренажёры открыты! Заходите и начинайте!

Подробнее | Кексобот | Правила

Удачи всем!

TypeScript для инженеров: проектирование типов, а не просто аннотации

Если цель — снижать класс ошибок за счёт статической проверки и проектировать выразительный API, посмотрите курс по TypeScript.

Главное, что отрабатываем (кратко и по делу):

🔘Дженерики с ограничениями: параметризация API без any, вывод и значения по умолчанию.
🔘Сужение типов и дискриминированные объединения: исчерпывающие проверки, отсутствие «мёртвых» веток.
🔘Conditional / Mapped / Template literal types: производные модели, безопасные ключи и события.
🔘Вариантность колбэков и сигнатур: корректная совместимость параметров в обработчиках.
🔘 Брендированные (opaque) типы для идентификаторов и единиц: защита от подстановки «не той строки».

Курс про практику проектирования типов: меньше рантайм-сюрпризов, больше строгости на этапе компиляции. Подробности на лендинге.

https://htmlacademy.ru/levelup/typescript

Paratype — шрифтовой партнёр чемпионата по вёрстке. Они лучшие, и мы их тоже любим.

Шрифтовая студия с самой большой коллекцией в России — 1000+ шрифтов. Макет, с которым будут работать участники, — сайт @paratype_fonts.

(И да, за их внимательность к деталям мы снова отдаём сердце разработчика: всё читаемо, всё дышит — верстать одно удовольствие.)

https://htmlacademy.ru/contest

Чемпионат идёт полным ходом, а мы продолжаем знакомить вас с партнёрами!

Мы стартовали в среду в 12:00, и с тех пор кипит жизнь:

⚡️ участники обсуждают решения, задают вопросы, делятся опытом,
⚡️ немного волнуются — всё как на настоящем чемпионате!

А ещё сегодня прошёл прямой эфир с Wemakefab. И это только начало! Оставайтесь с нами — расскажем, кто ещё следит за вашим кодом.

https://htmlacademy.ru/contest

Какие софт-скиллы должны быть у джуна, чтобы попасть в NAUKA?

Выбирайте удобную площадку и смотрите первую часть с набором хард-скиллов для джуна.

🐭 смотреть
🐹 смотреть

Прямой эфир c Wemakefab

Вместе с дизайнером из Wemakefab обсудим подход студии к макетам и то, как смотреть на макет чемпионата по вёрстке:

⭐️ какие ожидания по аккуратности и качеству,
⭐️ как организовать работу и на что обратить внимание.

На эфире ответим на заранее собранные вопросы участников чемпионата о макете и связанных с ним требованиях.

Подключайся в 12:00 (MSK)

Смотреть на YT | Смотреть в VK

Неделя знаний: что можно выиграть и как увеличить шансы?

Всего 14 призов. Разыгрываем профессии и курсы для мидлов. Финал в эфире 8 сентября в 20:00 (MSK) — ссылку пришлём в боте.

Как это устроено:
➿ 7 призов среди всех, кто по итогам недели вошёл в топ-30 рейтинга;
➿ ещё 7 призов — среди тех, у кого засчитано 20+ часов практики и есть попадание в топ-30.

План-победителя (супер короткая версия):
📌 каждый день проходим задания и закрываем испытания;
📌 отвечаем на вопросы викторины не спеша, но без пропусков;
📌 зовём пару друзей — так интереснее, а баллы лишними не бывают;
📌 фиксируем прогресс к вечеру и держим ровный темп до финала.

Итоги подведём 8 сентября на розыгрыше в 20:00.

Подробнее об акции | Telegram-бот

Новый выпуск «CSS Боль»!

На этот раз разбираем радиальные градиенты — инструмент, который часто недооценивают.

1️⃣ как работает radial-gradient() и зачем нужен gradient box;
2️⃣ что такое color stops и как с их помощью управлять плавностью или делать резкие границы;
3️⃣ почему градиент не всегда круг и как влиять на его форму;
4️⃣ как сдвигать центр, чтобы получить необычные эффекты;
5️⃣ анимация радиальных градиентов с CSS-переменными (и почему без них не получится).

Если вы когда-то копировали готовый код градиентов, но не понимали, почему он работает — этот выпуск для вас.

Смотреть на YT | Смотреть в VK