HTML Academy
10.7K subscribers
5.04K photos
128 videos
4 files
3.1K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Всё про единицы измерения em: просто и понятно

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


❗️ В статье разбираем, когда em — лучшее решение, а также рассматриваем примеры его использования.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍8🔥3❤‍🔥2
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
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥64❤‍🔥4
Media is too big
VIEW IN TELEGRAM
Где компаниям находить джунов в команду или проблема одинаковых резюме

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

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


Полный эфир с KLBR Studio — по ссылке:
🐭 Смотреть
🐹 Смотреть
Подробнее о программе
Please open Telegram to view this post
VIEW IN TELEGRAM
4🔥3👍1
Forwarded from Кексобот: неделя знаний
День 6️⃣, сообщение от Кекса

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


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

Подробнее | Кексобот | Правила
41👍1🔥1
Forwarded from Кексобот: неделя знаний
День 7️⃣, сообщение от Кекса

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


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

Подробнее | Кексобот | Правила
32🔥2
cause: ключ к понятной обработке ошибок в JavaScript

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

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


📌 Свойство cause поддерживается в современных браузерах и средах, включая Node.js. Разбираем детали и примеры → статья.
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥3❤‍🔥21
Media is too big
VIEW IN TELEGRAM
Круговая диаграмма на чистом CSS

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

❗️ Смотрите и другие визуализации на удобных площадках:
YouTube | VK Video
🔥114
counter-set в CSS: как задать номер без хака и JavaScript

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


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

🔺 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53
navigator.credentials: как ускорить вход в браузере



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

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

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍1
HTML Academy
CSS-боль, выпуск про чистый CSS Сегодня две функции: sibling-index() и sibling-count(). Что внутри: - как раньше решали задачу и почему это боль; - как помогали циклы в препроцессорах и зачем от них уходить; - промежуточный вариант на переменных и calc();…
Вышла вторая часть разбора радиальных градиентов в CSS!

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

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

🐭 Смотреть на YT
🐹 Смотреть в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥42
Подводим итоги!

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

🐭 Подключиться в YT
🐹 Подключиться в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
14❤‍🔥33🔥2
Сети и протоколы без магии: базовые знания, которые нужны фронтендеру

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

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

🟠 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Гайд, как не пройти испытательный срок

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

Полный эфир с KLBR Studio — по ссылке:
🐭 Смотреть в YT
🐹 Смотреть в VK Video
🟢 Подробнее о программе
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥531❤‍🔥1
Технические выходные × Колесо фортуны

🎉 День программиста: хороший повод закрыть пробелы и подобрать «пару» курсов на вырост. Одно вращение колеса и случайный подарок ваш. Ищите на сайте коробочку и вращайте колесо все выходные.

Что добавить в копилку знаний:

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

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

TypeScript — системное мышление о типах, работа с дженериками, утилитами и сужением типов.

Vue, Vite, Webpack — сборка под прод, профилирование бандла, HMR по делу.

Анимации (CSS/JS/SVG) — тайминг-функции, последовательности, производительность.

Доступность (a11y) и дизайн-системы — роли и атрибуты, токены, библиотека компонентов.

➡️ Коротко: 1 вращение • 12–14 сентября • 7 дней на применение.

https://htmlacademy.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤‍🔥3🔥2
Прямой эфир с лидом бэкенд-разработки в Garage Eight

👍 Garage Eight и HTML Academy запускают совместную программу «Обучение под работодателя»: вы занимаетесь в небольшой группе, осваиваете PHP и ООП, REST-подход и тестирование, пробуете типовые задачи джуна на учебных проектах, работаете с Git и CI. На эфире разберём, как это соотносится с рабочими процессами команды и входом на стажировку.

Приходите на эфир 18 сентября в 12:00 (MSK), чтобы:

🔲 Понять, как устроены процессы в Garage Eight: ревью кода, менторство, адаптация новичка и план первых недель;
🔲 Разобрать программу по делу: какие навыки требуются на старте (PHP, работа с фреймворками, REST, тесты) и как они закрываются на учёбе;
🔲 Узнать про стажировку: критерии готовности, отбор, формат занятости и типовые задачи для джуна на входе.



Планируете вход в профессию, хотите понять ожидания к джуну и как выглядит старт в продуктовой команде? Зарегистрируйтесь по ссылке — пришлём напоминание и доступ к эфиру.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤‍🔥21👏1