HTML Academy

Гайд, как не пройти испытательный срок

Наверное, всех джунов интересует, как пройти испытательный срок и крепко закрепиться в компании. Вера Ясюкевич, руководитель KLBR Studio, поделилась основной ошибкой новичков, которая приводит к отказу после испытательного срока.

Полный эфир с KLBR Studio — по ссылке:
🐭 Смотреть в YT
🐹 Смотреть в VK Video
🟢 Подробнее о программе

Сети и протоколы без магии: базовые знания, которые нужны фронтендеру
➿➿➿➿➿➿➿➿➿➿➿➿
Разберётесь, как данные реально идут по сети: от модели OSI и стека TCP/IP до различий между HTTP/1.1, HTTP/2 и HTTP/3; когда уместны WebSockets; как работает TLS и проверка сертификатов. С этими знаниями вы осознанно выбираете транспорт под сценарий и понимаете, что происходит при установке защищённого соединения.

Результат — меньше накладных расходов и быстрее метрики вроде TTFB/LCP, плюс снижение рисков уязвимостей за счёт корректной настройки шифрования и аутентификации.

🟠 Смотреть программу

Подводим итоги!

Чемпионат по вёрстке подошёл к концу. В 12:00 вместе с экспертами из компаний подведём итоги чемпионата, раздадим оценки и выберем победителя.

🐭 Подключиться в YT
🐹 Подключиться в VK Video

Вышла вторая часть разбора радиальных градиентов в CSS!

В первой мы научились управлять цветами, смещать центр и менять форму. А теперь — идём глубже:

1️⃣ Radial shape: как зафиксировать градиент в форме круга (circle).
2️⃣ Radial size: абсолютные размеры и ограничения для процентов.
3️⃣ Четыре ключевых слова (closest-side, farthest-side, closest-corner, farthest-corner) — как они работают и когда реально выручают.
4️⃣ Практика: делаем анимированный «бильярдный шарик» с бликом.

🐭 Смотреть на YT
🐹 Смотреть в VK Video

navigator.credentials: как ускорить вход в браузере

➿➿➿➿➿➿➿➿➿➿➿➿

navigator.credentials позволяет браузеру безопасно хранить и по запросу возвращать учётные данные — пароли, токены или ключи. Через get() можно получить сохранённые данные (например, с mediation: optional), а через store() — сохранить их после входа.

Работает по HTTPS, требует фокуса страницы. Поддерживается в Chrome, Edge и Android WebView; в Safari и Firefox — частично или нет.

✅ Читать статью

counter-set в CSS: как задать номер без хака и JavaScript

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент.

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

🔺 Читать статью

Круговая диаграмма на чистом CSS

Чистый CSS уже многое умеет для простой визуализации данных. Только взгляните: круг собирается через conic-gradient, цвета задаются в кастомных свойствах, форма "бублика" получается с помощью масок.

❗️ Смотрите и другие визуализации на удобных площадках:
YouTube | VK Video

cause: ключ к понятной обработке ошибок в JavaScript

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

Свойство cause позволяет передать оригинальную ошибку дальше по цепочке, не теряя контекста.

📌 Свойство cause поддерживается в современных браузерах и средах, включая Node.js. Разбираем детали и примеры → статья.

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

Мр-мяу! Финальный рывок: сегодня собираем «системность» — наводим порядок в стилях с препроцессором и смотрим на проект глазами сервера. Чуть-чуть дисциплины в переменных и цветовых функциях, капля модульности в компонентах, щепотка шаблонов — и интерфейс становится предсказуемым и масштабируемым. Это последний день недели знаний, а завтра — прямой эфир с розыгрышем призов: самое время красиво добежать до ленточки.

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

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

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

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

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

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

Где компаниям находить джунов в команду или проблема одинаковых резюме

Вера Ясюкевич, руководитель KLBR Studio, рассказала, почему компании проще брать разработчиков из образовательных программ, чем искать их на платформах онлайн-рекрутинга:

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

Полный эфир с KLBR Studio — по ссылке:
🐭 Смотреть
🐹 Смотреть
✅ Подробнее о программе

Vue.js 3 на практике: Vite, Composition API, Pinia и тесты

На курсе разбираем современные подходы к клиентским приложениями на Vue.js 3: script setup и реактивность, маршрутизацию с guard’ами, управление состоянием в Pinia, работу с HTTP и обработку ошибок, анимации, модульные тесты на Vitest и Vue Test Utils.

Практика — два проекта: учебный таск-менеджер и фронтенд онлайн-пиццерии поверх готового API. Формат — теория → разбор → задачи. В чате отвечаем на вопросы и показываем типичные решения.

📌 Программа и детали: https://htmlacademy.ru/levelup/vue

Всё про единицы измерения em: просто и понятно

em — мощный инструмент для адаптивной типографики и интерфейсов. Он требует внимательности к контексту, но позволяет легко управлять масштабом и пропорциями элементов на странице.

❗️ В статье разбираем, когда em — лучшее решение, а также рассматриваем примеры его использования.

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

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

Плюс визуализируем алгоритмы и добьём базовые приёмы задачниками. Пройдемся по пузырьковой сортировке руками, потом — в коде; закрепим циклы, функции, работу со строками и массивами. Это как тренажёрный зал, только для логики и интерфейсов.

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

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

CSS-боль, выпуск про чистый CSS

Сегодня две функции: sibling-index() и sibling-count().

Что внутри:

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

🐭 Смотреть в YT
🐹 Смотреть в VK Video

Пустые элементы в HTML? Разбираем псевдокласс :empty

Псевдокласс :empty позволяет находить элементы без содержимого. В статье рассказываем и показываем, как работает :empty и какие есть нюансы.

Чтобы гарантировать, что элемент точно будет пустым, убедитесь, что внутри нет даже невидимых символов.
<div></div> — считается пустым.
<div> </div> — не считается пустым (есть пробел).
<div><br></div> — не считается пустым (есть дочерний элемент).

🔵 Читать статью

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

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

Поработаем с основами языка, разберёмся со структурами данных и приручим браузерное API: от for и return до addEventListener и шаблонов. Итог — уверенные руки на клавиатуре и предсказуемый интерфейс на экране.

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

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