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

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Forwarded from Кексобот: неделя знаний
День 7️⃣, сообщение от Кекса

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


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

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

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

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


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

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

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

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


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

🔺 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤3
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👍2
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
🔥7❤‍🔥4⚡2
Подводим итоги!

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

🐭 Подключиться в YT
🐹 Подключиться в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
1⚡5❤‍🔥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👍2
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
🔥53⚡2❤‍🔥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
👍10❤‍🔥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
🔥5❤‍🔥4⚡2👏1
Как работает Map в JavaScript

Коллекция Map — это встроенная структура JavaScript для хранения пар «ключ–значение». Она похожа на обычный объект ({}), но имеет важные преимущества: поддерживает ключи любого типа и сохраняет порядок вставки — удобно, когда нужен предсказуемый перебор.


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

🪻 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7
Media is too big
VIEW IN TELEGRAM
Кайф от sibling-index()

Смотрите и наслаждайтесь тем, как sibling-index() упрощает вёрстку!

Удаляем ненавистные инлайновые индексы из разметки, заменяем переменные-индексы в стилях на sibling-index() и получаем рабочий компонент с чистейшим кодом.

#CSS #Frontend #код #siblingIndex
🔥14❤‍🔥4⚡3
Таймеры в JavaScript

setTimeout и clearTimeout — проверенные временем инструменты для работы с асинхронностью в JavaScript. Их простота и гибкость делают их полезными в задачах от прототипирования до продвинутых сценариев, таких как дебаунсинг или интеграция с современными фреймворками.


Практически это значит: setTimeout используют не только для задержек, но и для управления порядком выполнения — отложить код после текущего стека (setTimeout(fn, 0)), настроить дебаунс ввода, запустить отложенные эффекты и анимации (а сами анимации — через requestAnimationFrame). А зная про clearTimeout, можно вовремя отменять лишние вызовы и избегать багов.

В статье разбираем механику работы, важные особенности (негарантированная задержка, троттлинг в фоновых вкладках, макро- vs микро-задачи) и показываем практические примеры, чтобы использовать таймеры осознанно.

➕ Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10❤‍🔥3❤3⚡2
HTML Academy
Прямой эфир с лидом бэкенд-разработки в Garage Eight 👍 Garage Eight и HTML Academy запускают совместную программу «Обучение под работодателя»: вы занимаетесь в небольшой группе, осваиваете PHP и ООП, REST-подход и тестирование, пробуете типовые задачи джуна…
Вместе с Garage Eight мы готовим будущих бэкенд-разработчиков.

Сегодня в 12:00 в эфире поговорим о совместной программе обучения: как прокачать навыки и применять их в реальных проектах. Лид бэкенд-разработки Garage Eight расскажет о компании, первых задачах для новичков, перспективах развития и ответит на ваши вопросы.

https://htmlacademy.ru/events/live-garage-8-backend
❤4🔥2⚡1
Вырезы в блоках — революция | CSS боль

Хотите узнать, как делать вырезы в блоках одной строчкой CSS?

В новом выпуске мы сравним старый способ (много контейнеров, фиксированные размеры, хаки) и современный подход с mask-image и радиальными градиентами.

В видео:

1️⃣ как работал классический «дедовский» метод;
2️⃣ mask-image и радиальные градиенты: чистый CSS для вырезов;
3️⃣ приём с полпиксельным смещением для аккуратных краёв;
4️⃣ гибкие и адаптивные компоненты с любым фоном: градиентами, картинками или видео;
5️⃣ смена парадигмы: от «приклеивания блоков» к «вырезанию» прямо в CSS.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥13❤‍🔥2👍2