Новогодняя неделя идёт уже третий день: мы стартовали 1 января, и пока вы отдыхаете и празднуете, кот Кекс не дремлет — теперь он будет ежедневно присылать новые задания, чтобы сориентировать вас среди мандаринов. У вас ещё куча шансов попробовать себя в чём-то новом!

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

Мяу! Вы готовы прокачивать лапки и вёрстку? Сегодня вы освоите технику управления табличными компонентами и научитесь «разбирать» и «собирать» таблицы так, чтобы они идеально выглядели на любых устройствах.

Ещё мы углубимся в мир селекторов. Разберём сложные варианты для работы с формами и научимся делать интерфейсы умными и удобными для пользователя. Кто бы мог подумать, что селекторы могут быть такими мощными? Это настоящая магия фронтенда!

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

Подробнее | Правила

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

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

И это ещё не всё! Вы научитесь создавать анимированные иконки, которые реагируют на действия пользователей. С таким багажом знаний ваши проекты станут неотразимыми

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

Подробнее | Правила

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

Эй, код-мастера! Сегодня будем превращаться в настоящих повелителей JavaScript. Вас ждут переменные, циклы, функции и ещё тонна интересного! Мы напишем фитнес-калькулятор, драйвер принтера и даже симулятор дартс-машины — да-да, чтобы можно было виртуально метать дротики прямо из консоли.

Ну а те, кто захочет большего, смогут погрузиться в создание собственных калькуляторов и даже конструировать компьютеры с нуля — только представьте, какие интерфейсы вас ждут!

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

Подробнее | Правила

✨ Серебряный уровень открыт! ✨

Участники новогодней недели сделали это! Благодаря общей активности вы выполнили 22 469 заданий и заработали 162 853 балла — и это только начало! Теперь открыты призы серебряного уровня, которые разыграют не только топ-10, но и топ-100 участников.

Но это ещё не конец! Впереди золотой уровень с ещё более крутыми наградами! Чтобы приблизить общий успех, присоединяйтесь к акции, выполняйте задания, участвуйте в викторинах и зовите друзей — каждый ваш балл приближает всех к финальной цели!

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

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

Мурр! Сегодня ваш JavaScript-багаж пополнится практическими суперспособностями. Мы будем разрабатывать фотоприложение с фильтрами — создадим интерфейс, настроим стили и оживим его при помощи кода.

А для самых смелых — настоящее испытание: 51 задача по программированию, чтобы проверить свои навыки и узнать, на что вы способны. Готовы доказать, что вы настоящие мастера кода?

В программе:
37 заданий и 53 испытания, а также 302 балла.

Подробнее | Правила

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

Кодерята, готовы вдохнуть жизнь в ваши интерфейсы? Сегодня вы освоите магию трансформаций и микроанимаций! Мы будем не только создавать стильные декоративные элементы, но и добавлять движения, которые делают интерфейсы по-настоящему живыми.

Секрет успеха в том, чтобы не переборщить и сохранить баланс. Ваши элементы станут плавными, интерактивными и удивят любого пользователя!

В программе:
89 заданий и 3 испытания, а также 104 балла.

Подробнее | Правила

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

Котики, финальный рывок! Сегодня мы вооружимся инструментами автоматизации и сделаем ваш код быстрее и элегантнее. Препроцессоры помогут вам ускорить вёрстку и работать над библиотекой компонентов, а PHP откроет двери к серверной магии!

На десерт — создание интернет-магазина. Да-да, своими лапками! Это финальная возможность прокачать навыки и завершить акцию на высокой ноте. Вы — просто звёзды фронтенда!

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

Подробнее | Правила

https://usehooks.com – коллекция кастомных React хуков

Рекомендации по использованию от Николая Громова, ведущего разработчика интерфейсов компании Наука:

«Коллекция хорошая, но есть несколько "но":

1. Видимо, разумнее всего просто копипастить нужный хук (отсюда: https://github.com/uidotdev/usehooks/blob/main/index.js) в свой проект (обновления редки, а все хуки в исходнике - в одном файле, который весь будет взят в сборку).

2. Часть хуков требуют экспериментальных версий react и react-dom (видно по команде установки на странице хука).»

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka

Учебник по Git и GitHub

Собрали бесплатный учебник, который поможет погрузиться в основы контроля версий и понять, чего же там от вас все хотят в первый рабочий день.

📖 Читать учебник

Новый макет и новый компонент! Верстаем промо-блок из олимпиады по фронтенду от HTML Academy и Яндекса.

htmlacademy.ru/demos/173

В пятой части курса мы делаем разметку и базовую стилизацию десктопной версии промо-блока. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

https://angularexperts.io/blog/typescript-decorators – cтатья с разбором полезных декораторов, написанных на TуpeScript, содержит примеры кода и объяснения, что и зачем было написано. Статья поможет лучше понять TуpeScript и разобраться, что такое декораторы и зачем они могут понадобиться.

Статьёй поделились разработчики компании «Открытые решения».

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотosinit

Этот генератор box-shadow позволяет быстро и легко создавать стильные тени на вашем веб-сайте. Генератор позволяет добавлять до 10 теней с различными настройками, такими как горизонтальное и вертикальное смещение, размытие, прозрачность и цвет тени.

С помощью этого генератора вы можете создавать различные эффекты, такие как внутренняя подсветка текста или приподнятость элементов на странице. CSS-код для каждой тени может быть легко скопирован и использован на вашей странице.

Используйте этот генератор box-shadow, чтобы быстро и легко настроить тени на вашей странице и улучшить ее визуальный стиль — https://tml.io/yd6fm

#htmlacademy_статьи

Читайте новые инструкции по CSS в блоге Академии:

Как передвинуть элемент на странице. CSS-свойство position

Как изменить цвет на странице. CSS-свойство color

Как изменить ширину элемента. свойство width

Как сделать фон на странице. css-свойство background

Как размыть картинку. css-свойство filter

#htmlacademy_статьи

https://css-tip.com/width-scrollbar/ – приём, который позволяет получить ширину скроллбара на чистом CSS

Николай Громов, ведущий разработчика интерфейсов компании Наука, о пользе этого приёма:

«Встречал несколько раз: при открытии модалки нужно блокировать скролл страницы, но если лифт есть и он не 0 пикселей, это вызовет "дергание" контента. Приходится добавлять padding справа, но как вычислять его размер? А вот и ответ»

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka

Почему Vite выбирают разработчики?

Vite — это скорость, простота и возможность сосредоточиться на коде, а не на настройках. Он мгновенно обновляет изменения, поддерживает множество фреймворков и идеально подходит для современных проектов.

Что нового появилось в Vite 6? Спойлер: разработчики точно оценят новые шаблоны и поддержку последних версий Node.js.

Подробности — в статье: https://htmlacademy.ru/blog/js/vite-6