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

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Голограммы без шейдеров и JavaScript — это вообще реально?

Да, и в новом выпуске «CSS Боль» мы это доказываем.

Три слоя, конический градиент и два режима смешивания mix-blend-mode — вот и весь секрет переливающегося эффекта. Никакого WebGL, никаких библиотек. Только conic-gradient(), @property и правильное наложение слоёв.

Самое интересное: можно менять цвета, скорость вращения и параметры градиента прямо в интерактивной демке. Один эффект превращается в десятки вариантов — от тёплого свечения до холодного льда.

Разбираем на примере карточки заклинания из «Героев 3». Потому что ностальгия.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥15❤‍🔥22
This media is not supported in your browser
VIEW IN TELEGRAM
Как сверстать карточку с вырезом? Разбираем старый и новый способ.
#css
🔥26👍7❤‍🔥1
👍 Напоминаем: завтра в 12:00 (MSK) — прямой эфир HTML Academy × WAPP о синдикатном потоке программы «Обучение под работодателя».

И главное — среди первых 100 регистраций разыграем одно бесплатное место на совместную программу. Это 8,5 месяцев обучения с наставником и возможность проектной работы после выпуска.

Как участвовать:

1️⃣ Зарегистрируйтесь по ссылке ниже.
2️⃣ Подключитесь к трансляции — победителя объявим в финале.

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

https://htmlacademy.ru/events/live-wapp
Please open Telegram to view this post
VIEW IN TELEGRAM
53❤‍🔥3
Как понять, что юзер нажал клавишу: события клавиатуры в JavaScript

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


В статье разбираются сами события, их работа при нажатии и отпускании клавиши, почему keypress считать легаси, и чем отличаются event.key и event.code: первое зависит от раскладки, второе — от физической клавиши. Есть мини-примеры и практические советы. #js #a11y

Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥43❤‍🔥3
HTML Academy
Прямой эфир с основателем студии разработки WAPP HTML Academy и компания WAPP запускают синдикатный поток обучения под работодателя. Небольшая группа из 10 человек, четыре модуля за 8,5 месяцев и возможность проектной работы после выпуска — обучение адаптировано…
Вместе с WAPP запускаем синдикатный поток совместной программы обучения

Сегодня в 12:00 (MSK) — прямой эфир со студией разработки WAPP. Основатель компании расскажет, как устроен фронтенд в студии, что ждёт выпускников на проектной работе и как пройти путь от обучения до первых заказов.

В финале разыграем бесплатное место на программу!

https://htmlacademy.ru/events/live-wapp
64❤‍🔥3
Дизайн для фронтендеров

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


Курс учит прикладной «дизайнерской грамотности» разработчика: работе с Figma (стили, компоненты, библиотеки), сетке и вертикальному ритму (включая 8px-подход), типографике и иерархии, цвету и контрастности с учётом доступности, адаптиву без готовых макетов, безопасной UI-анимации и базовым UX-паттернам.

После курса вы умеете применять на практике:

📎 работать в Figma со стилями, компонентами и библиотеками;
📎 строить сетку (8px), держать выравнивание и вертикальный ритм;
📎 собирать резиновую вёрстку и адаптив без готовых макетов, продумывать крайние состояния;
📎 добавлять состояния интерактивных элементов и уместно анимировать UI.

🔵 Записаться на курс
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥6🔥31
Media is too big
VIEW IN TELEGRAM
Разбираем ограничения при трудоустройстве с ONLY

Предпочитаете работать дома или в офисе? Как вливаться в мир разработки до 18 лет? Марианна Воденицкая, HRBP ONLY, рассказала про удалёнку, возрастные и другие ограничения.

Полный эфир с ONLY — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
⭐️ Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍3🔥3
Запись вчерашнего эфира с WAPP — на выходные

400₽/час на старте, пересмотр через 3-6 месяцев, проектная работа. Максим Ермилов рассказал про реальную экономику студии: почему нет постоянной занятости, как растут ставки и зачем нужна «скамейка запасных» из 30 человек.

Плюс — как клиенты продавили переход с Vue.js на React и что такое «собеседование по вайбу».

🐭 Смотреть на YouTube
🐹 Смотреть в VK
⚫️ Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥762🔥2
👍 Хэллоуин × Колесо Фортуны

С 26 по 31 октября — страшно выгодная неделя в Академии! Заклинания скидок уже наложены: одно вращение колеса — и в вашу корзину падает хэллоуинский подарок.

Не дайте скидкам испариться — они исчезнут, как туман под утро.

Коротко: 1 вращение • 26–31 октября • Ведьмино Колесо Профессий.

🎃 https://htmlacademy.ru
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥664😱2
Как сделать вогнутые углы без боли, костылей и SVG?

nebo.css в помощь. Это маленькая, но мощная CSS-библиотека, которая превращает мучения с инвертированными углами в пару строк кода.

❗️ В новом выпуске «CSS Боль»:

✓ Что такое инвертированный угол и почему его так сложно сверстать нативно
✓ Как nebo.css решает задачу буквально одним классом
✓ Как настраивать форму угла через CSS-переменные
✓ Что нового в версии 1.1 — независимые радиусы, эллипсы и параметр
✓ Как добавить сразу несколько углов и добиться сложных форм без единого SVG

Никаких псевдоэлементов, дополнительных div-ов и хака с позиционированием — всё работает даже на градиентах и изображениях. HTML Academy подготовили для вас библиотеку, чтобы боль исчезла.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥113❤‍🔥2
Функции btoa() и atob() — встроенные средства JavaScript для кодирования и декодирования строк в формате base64.


Base64 — это не шифрование и не способ защитить данные, а способ представить бинарную информацию в текстовом виде. В статье разбираем, как это работает в JavaScript: btoa() и atob() кодируют и декодируют строки, но только для байтовых строк (ASCII/Latin-1). При попытке закодировать Unicode-текст браузер бросит ошибку — показываем, как обойти это через TextEncoder и TextDecoder. Это важно, если вы работаете с emoji, кириллицей или API с многоязычными данными. #js #webdev

‼️ Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4❤‍🔥32
Осенью вечера становятся длиннее. Кто-то зажигает фонари у дверей, а мы — зелёные галочки в тренажёрах. Десять-двадцать решённых заданий в день — и код становится светлее.

С 3 по 9 ноября запускаем осеннюю неделю от @htmlacademy. Вместе с нашими партнёрами-работодателями — Addamant, Grokhotov Studio и Bquadro — на неделю открываем бесплатный доступ к тренажёрам с заданиями и испытаниями. Вызовы и мастер-классы — по активной подписке; баллы за них учитываются в общем зачёте.

Что вас ждёт?
1️⃣ 895 заданий и 151 испытание по HTML, CSS, SVG и JavaScript.
2️⃣ Рейтинг: выполняйте задания и испытания, поднимайтесь в топ-30.
3️⃣ Викторина на неделю — 200 вопросов, баллы за правильные ответы.

Зовите друзей, проходите задания и повышайте шансы на призы. Подробнее — на лендинге.

Начинаем 3 ноября — присоединяйтесь и приглашайте друзей!

Подробнее | Telegram-бот
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥75🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
📝 CSS Container Queries

Карточка с адаптивным поведением. HTML Academy подготовили для вас демонстрацию, чтобы посмотреть детально каждый шаг.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍13❤‍🔥33
Операторы ?? и ??= — удобные инструменты для работы с null и undefined в JavaScript. Они делают код короче, понятнее и безопаснее, особенно при задании значений по умолчанию или аккуратном обновлении переменных.


В статье разбираем, как ?? отличается от ||: если || подставляет значение по умолчанию при любом «ложном» значении (0''false), то ?? реагирует только на реальные отсутствия данных — null и undefined. Показываем практику: дефолты для настроек, аккуратная инициализация свойств с ??= — значение задаётся только когда данных нет. #js #webdev

🪻 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤‍🔥3👍3
API Intl.RelativeTimeFormat — инструмент для отображения относительного времени в локализованном виде. Он прост в использовании, поддерживает множество языков и подходит для интерфейсов, где важна понятность и культурная адаптация.


В статье разбираем, как выводить относительное время естественным языком: «вчера», «через 2 дня», «3 недели назад». Всё это без сторонних библиотек: создаём new Intl.RelativeTimeFormat('ru', { numeric: 'auto' }) и передаём число и единицу времени (dayhourmonth). API автоматически подстраивается под выбранную локаль и грамматические формы; саму разницу во времени считаем отдельно. #js #webdev

🌹 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11