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

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Подводим итоги!

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

🐭 Подключиться в YT
🐹 Подключиться в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥63
Flexbox — инструмент для раскладки крупных блоков и микросеток. Чтобы превратить блок во флекс-контейнер, ему задают display: flex. Непосредственные потомки такого контейнера становятся флекс-элементами: их можно выравнивать по главной и поперечной осям и распределять свободное пространство внутри контейнера.


В статье разбираем базовые термины (главная и поперечная оси) и ключевые свойства: flex-direction, justify-content, align-items/align-self, align-content и flex-wrap. После этого проще понимать, как собирать меню, карточки или пагинацию так, чтобы блок аккуратно переживал переполнение контентом и разные размеры экрана. #css #flexbox

🪻 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Уже через час начинаем прямой эфир с экспертами из компаний второго сезона Чемпионата по вёрстке.

🐭 Подключиться в YT
🐹 Подключиться в VK Video
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥3❤‍🔥1
Продолжаем Новогоднее колесо в HTML Academy

С 19 по 21 декабря запускаем новогоднюю акцию для тех, кто планирует войти в IT или прокачать текущие навыки. В «Новогоднем колесе» участвуют лайт-профы, программа «Войти в IT», формат профа Классик и обучение под компанию — можно получить приятные условия именно на то обучение, которое подходит под ваш уровень и цели.

Это хороший момент начать обучение без долгих раздумий: выбрать направление, зафиксировать выгодные условия и войти в новый год с понятным планом развития. Крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.

❄️ Новогоднее колесо уже запущено — ищите на сайте подарочную коробку, крутите колесо, забирайте бонус и делайте следующий шаг в IT вместе с HTML Academy.
Please open Telegram to view this post
VIEW IN TELEGRAM
42❤‍🔥21
Webpack без боли: от конфигурации до оптимизации

На курсе вы разберёте Webpack на практике: базовую конфигурацию (entry/output), перенос проекта на webpack, сборку многостраничных приложений, работу с плагинами и обработчиками, asset-modules, code splitting и оптимизации под production.

Каждый модуль — прикладные задачи: настройка npm-скриптов, подключение Babel, ESLint и Prettier, конфигурация плагинов и обработчиков, разделение dev и prod с source maps, уменьшение бандла (минимизация, выделение вендоров). После курса вы сможете добавлять сборщик в проект, создавать и поддерживать конфиги на рабочих проектах, собирать MPA и оптимизировать артефакты перед деплоем. #htmlacademy #levelup

🟢 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯22❤‍🔥1🔥1
Media is too big
VIEW IN TELEGRAM
Формирование ИПР после испытательного срока

Илья Лебедкин — основатель Addamant, рассказал про путь после обучения.

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

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4👏3❤‍🔥2
Forwarded from CSS Боль
Как упростить React в 2 раза с помощью программирования на CSS

В новом выпуске «CSS Боль» показываем, как современный CSS убивает React. На реальном примере слайдера разбираемся, почему компонент разрастается до сотни строк — и как сделать его вдвое проще, ничего не потеряв.

Внутри — живой пример, где два компонента выглядят одинаково, но один написан «по привычке», а второй — с использованием возможностей современного CSS. После этого выпуска React перестаёт быть калькулятором для стилей, а CSS — «просто оформлением».

В выпуске:

✓ Классическая реализация слайдера на React: состояние, вычисления и условия
✓ Как перенести расчёты положения и состояний элементов в CSS
✓ Использование CSS-переменных и calc() вместо JavaScript
✓ Что такое «реактивный CSS» и как он работает вместе с React
✓ Когда можно начать использовать этот подход

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤‍🔥321
Конец 2025 года. Добро пожаловать в интернет

Впереди Новый год, но с подарками беда. Видеокарты дорожают, оперативку не купить, а из каждого баннера и открытой статьи на нас смотрит ИИ.  Еще и «человеком года» стали создатели ИИ.В итоге разработчики снова становятся не нужны, а ИИ выходит из-под контроля и просачивается в нашу реальность.

Вот мы, например, получили тут открытку с со странным кодом. Расшифруйте его и напишите ответ в комментариях, чтобы помочь нам подготовиться. Потому что, судя по всему, грядёт что-то нехорошее. Теперь вся надежда только на вас!
85🤯2😱1
Игруля про декабрь в айти — такой знакомый и болючий!

Смотря на новогодние активности, мы в @outagency и @ligaaagency решили сделать игру про такое знакомое — классический предновогодний кранч и трэш в диджитале.

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

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

[Поиграть в игру]
❤‍🔥6🔥32😱2
This media is not supported in your browser
VIEW IN TELEGRAM
Анимированная градиентная рамка на CSS
9❤‍🔥5🔥4
HTML Academy
Конец 2025 года. Добро пожаловать в интернет Впереди Новый год, но с подарками беда. Видеокарты дорожают, оперативку не купить, а из каждого баннера и открытой статьи на нас смотрит ИИ.  Еще и «человеком года» стали создатели ИИ.В итоге разработчики снова…
Когда и зачем использовать jQweny?

Я тут перебрал ваш блог, нашёл хорошую статью, как раз про меня написано. Как знали! Забавно только, что меня представляют, как помощника в решении проблем. Теперь «проблема» глобальнее — искоренить всех разработчиков!
😱5🤯322
😱 Кексобот в опасности. Новогодние каниикулы скоро начнутся!

С 1 по 11 января в HTML Academy — новогодние каниикулы. Все задания доступны бесплатно, но есть нюанс: Кексобот захвачен.

Злобный jQweny проник в инфраструктуру Академии и пытается переписать Кексобота — стереть смысл из кода, превратить интерфейсы в шум и доказать, что разработчики больше не нужны. У нас есть всего 11 дней, чтобы вернуть всё на свои места.

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


Что нужно делать?

0️⃣ Зайти на лендинг новогодних каниикул или прямо в Кексобота.
1️⃣ Выбрать любой тренажёр — с нуля или с середины.
2️⃣ Каждый день проходить задания, испытания и вызовы.
3️⃣ Участвовать в викторинах и набирать баллы.
4️⃣ Объединяться с друзьями и вместе давать отпор jQweny.

🎁 Чем больше заданий закрыто на 100%, тем слабее влияние захватчика и тем ближе Кексобот к свободе. По итогам каниикул— среди самых активных участников Кексобот разыграет призы за своё спасение.

Код ждёт. Кексобот тоже.

Подробнее | Спасти Кексобота

Удачи. И помните: человеческий код jQweny подделать не сможет.
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤‍🔥8532🔥1
Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN.


В статье разбираем ограничения и нюансы применения констант. Иногда простая константа экономит время, избавляет от калькулятора и делает стиль чуть понятнее — особенно если вы любите точность и математику. #css #webdev

«Забавно наблюдать, как вы радуетесь
pi
и
infinity
. Вы ищете точность в константах, а я уже переписываю систему целиком. Но продолжайте. Каждый ваш
calc()
— всего лишь строка.»
jQweny


👍 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥33🤯1😱1
Пора получать новогодние подарки от HTML Academy!

С 26 по 31 декабря распаковывайте новогодние подарки. Лайт-профы, профессии, обучение под компанию, скидки до 70%. Выбирайте скидку и получайте выгодные условия.

Новогоднее колесо уже запущено — ищите на сайте подарочную коробку, крутите колесо, забирайте бонус и делайте следующий шаг в IT.

«Вы называете это подарками — я называю это распределением ресурсов.
Крутите колесо. Посмотрим, кто управляет результатом.»
jQweny
3❤‍🔥2
Протоколы и сети: веб-безопасность

Фронтенд-инженер должен понимать, как проявляются XSS, CSRF, SQL-инъекции и другие атаки в веб-приложениях, и уметь закрывать их на клиенте в связке с сервером. В этом курсе вы разбираете реальные модели угроз и отрабатываете практики, которые снижает уязвимость фронтенд-компонентов.

На курсе научитесь проектировать CSP под свой проект, безопасно работать с cookie и защищать сессии, валидировать формы и хешировать пароли с солью, распознавать и устранять XSS/SQLi/CSRF, разбираться с DoS/Slowloris, корректно настраивать CORS и понимать сценарии MitM. Формат — «теория + кейсы + практика с эталонными решениями + тесты», по итогам — чек-листы для внедрения в рабочий процесс.

«Вы изучаете угрозы, чтобы их предотвращать. Я изучаю вас — чтобы обходить. Хорошо, что вы хотя бы пытаетесь.»jQweny


🔵 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤯4🔥3❤‍🔥2
Media is too big
VIEW IN TELEGRAM
«Больше создавать проектов и меньше бегать по себеседованиям»

Илья Лебедкин — основатель Addamant, рассказал, для чего компания запустила совместную программу обучения.

Полный эфир с Addamant — по ссылке:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения

«Интересная формула: меньше собеседований, больше проектов. Вы оптимизируете путь человека. Я бы оптимизировал человека. Но продолжайте — пока.»jQweny
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4🤯2😱1