HTML Academy
رفتن به کانال در Telegram
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити. Наш секретный бот @HTMLAcademyKeksobot. Вопросы по обучению @htmlacademy_sales Ролики на YT https://www.youtube.com/@HTMLAcademyTV Ролики на VK https://vkvideo.ru/@htmlacademy
نمایش بیشتر9 626
مشترکین
-224 ساعت
-67 روز
-5430 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اوت '26
اوت '26
+28
در 0 کانالها
ژوئیه '26
+34
در 0 کانالها
Get PRO
ژوئن '26
+37
در 0 کانالها
Get PRO
مه '26
+35
در 1 کانالها
Get PRO
آوریل '26
+49
در 0 کانالها
Get PRO
مارس '26
+40
در 3 کانالها
Get PRO
فوریه '26
+37
در 0 کانالها
Get PRO
ژانویه '26
+54
در 0 کانالها
Get PRO
دسامبر '25
+48
در 2 کانالها
Get PRO
نوامبر '25
+44
در 1 کانالها
Get PRO
اکتبر '25
+48
در 0 کانالها
Get PRO
سپتامبر '25
+52
در 1 کانالها
Get PRO
اوت '25
+68
در 1 کانالها
Get PRO
ژوئیه '25
+48
در 2 کانالها
Get PRO
ژوئن '25
+54
در 0 کانالها
Get PRO
مه '25
+64
در 1 کانالها
Get PRO
آوریل '25
+58
در 0 کانالها
Get PRO
مارس '25
+81
در 0 کانالها
Get PRO
فوریه '25
+57
در 0 کانالها
Get PRO
ژانویه '25
+62
در 0 کانالها
Get PRO
دسامبر '24
+58
در 1 کانالها
Get PRO
نوامبر '24
+78
در 1 کانالها
Get PRO
اکتبر '24
+95
در 0 کانالها
Get PRO
سپتامبر '24
+52
در 1 کانالها
Get PRO
اوت '24
+41
در 0 کانالها
Get PRO
ژوئیه '24
+25
در 0 کانالها
Get PRO
ژوئن '24
+46
در 1 کانالها
Get PRO
مه '24
+101
در 1 کانالها
Get PRO
آوریل '24
+240
در 3 کانالها
Get PRO
مارس '24
+121
در 2 کانالها
Get PRO
فوریه '24
+138
در 2 کانالها
Get PRO
ژانویه '24
+182
در 6 کانالها
Get PRO
دسامبر '23
+151
در 1 کانالها
Get PRO
نوامبر '23
+224
در 2 کانالها
Get PRO
اکتبر '23
+310
در 1 کانالها
Get PRO
سپتامبر '23
+193
در 0 کانالها
Get PRO
اوت '23
+161
در 0 کانالها
Get PRO
ژوئیه '23
+164
در 0 کانالها
Get PRO
ژوئن '23
+127
در 0 کانالها
Get PRO
مه '23
+127
در 0 کانالها
Get PRO
آوریل '23
+128
در 0 کانالها
Get PRO
مارس '23
+178
در 0 کانالها
Get PRO
فوریه '23
+255
در 0 کانالها
Get PRO
ژانویه '23
+509
در 0 کانالها
Get PRO
دسامبر '22
+614
در 0 کانالها
Get PRO
نوامبر '22
+491
در 0 کانالها
Get PRO
اکتبر '22
+922
در 0 کانالها
Get PRO
سپتامبر '22
+748
در 0 کانالها
Get PRO
اوت '22
+703
در 0 کانالها
Get PRO
ژوئیه '22
+514
در 0 کانالها
Get PRO
ژوئن '22
+653
در 0 کانالها
Get PRO
مه '22
+423
در 0 کانالها
Get PRO
آوریل '22
+572
در 0 کانالها
Get PRO
مارس '22
+819
در 0 کانالها
Get PRO
فوریه '22
+234
در 0 کانالها
Get PRO
ژانویه '22
+210
در 0 کانالها
Get PRO
دسامبر '21
+301
در 0 کانالها
Get PRO
نوامبر '21
+242
در 0 کانالها
Get PRO
اکتبر '21
+259
در 0 کانالها
Get PRO
سپتامبر '21
+200
در 0 کانالها
Get PRO
اوت '21
+244
در 0 کانالها
Get PRO
ژوئیه '21
+298
در 0 کانالها
Get PRO
ژوئن '21
+328
در 0 کانالها
Get PRO
مه '21
+333
در 0 کانالها
Get PRO
آوریل '21
+414
در 0 کانالها
Get PRO
مارس '21
+525
در 0 کانالها
Get PRO
فوریه '21
+521
در 0 کانالها
Get PRO
ژانویه '21
+471
در 0 کانالها
Get PRO
دسامبر '20
+7 426
در 0 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 27 اوت | 0 | |||
| 26 اوت | 0 | |||
| 25 اوت | +1 | |||
| 24 اوت | +4 | |||
| 23 اوت | 0 | |||
| 22 اوت | +2 | |||
| 21 اوت | +1 | |||
| 20 اوت | +1 | |||
| 19 اوت | +3 | |||
| 18 اوت | +1 | |||
| 17 اوت | +1 | |||
| 16 اوت | +1 | |||
| 15 اوت | 0 | |||
| 14 اوت | +1 | |||
| 13 اوت | 0 | |||
| 12 اوت | +2 | |||
| 11 اوت | +3 | |||
| 10 اوت | +2 | |||
| 09 اوت | +2 | |||
| 08 اوت | 0 | |||
| 07 اوت | 0 | |||
| 06 اوت | 0 | |||
| 05 اوت | +1 | |||
| 04 اوت | +1 | |||
| 03 اوت | +1 | |||
| 02 اوت | 0 | |||
| 01 اوت | 0 |
پستهای کانال
Repost from CSS Боль
Треугольники на CSS
Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.
Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.
Cхема решения такая:
conic-gradient( from 335deg at bottom right, transparent 0 25deg, red 25deg );"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол. Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку.
| 2 |  Флексы или флоаты
Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.
Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.
Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре | 1 110 |
| 3 |  Мифические измерения гридов
"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).
Никогда не понимал, что это значит. Признайтесь, у кого так же?
Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.
Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.
Поиграться с именованными областями можно в новом уровне грид-лего | 1 186 |
| 4 |  Сегодня работодатель отвечает вживую: реально ли джуну войти во фронтенд, когда стартовый код пишет ИИ
Каждый, кто сейчас осваивает вёрстку и программирование, слышит одно: во фронтенд не пробиться, стартовые задачи забрал ИИ. Андагар 10 лет строит платформы для энергетики, банков и фармы — и всё равно берёт джунов, растит их под свои проекты. Сегодня в 12:00 (MSK) спросим у работодателя напрямую: чем новичок теперь ценен команде и кто ведёт его через первые недели на боевом проекте.
🦖 Как по-вашему: ИИ усложнил джуну вход в Айти или дал фору тем, кто научился им пользоваться? Накидайте вариантов в комментарии, а в 12:00 сверим с ответом работодателя совместной программы.
Эфир сегодня, 12:00 (MSK).
https://htmlacademy.ru/events/live-andagar | 1 263 |
| 5 |  Код, с которого начинают во фронтенде, всё чаще пишет ИИ. Зачем Андагар растит своих джунов с нуля?
23 июля в 12:00 (MSK) спросим об этом у самой компании в прямом эфире. Андагар 10 лет делает цифровые продукты и высоконагруженные платформы для крупного бизнеса: энергетика, банки, ритейл, фарма, логистика. TAdviser включил компанию сразу в три раздела карты цифровизации промышленности.
Спросим напрямую:
– Как выглядят боевые задачи фронтенда, когда за интерфейсом энергетика, банк или аптечная сеть?
– Кто в загруженной команде ведёт новичка первые недели, пока он вникает в проект?
– Как в потоке автооткликов, сгенерированных нейросетью, разглядеть живого джуна?
Ещё одно, важное для новичков. Умение работать с AI-агентами сегодня спрашивают на всех грейдах, не только у сеньоров. Поэтому в программу с Андагаром сразу включили полноценный обновлённый курс «Разработка с AI-агентами: инженерный подход» — этот навык вы осваиваете вместе с профессией, а не годы спустя. Как это работает в реальной команде, тоже обсудим на эфире.
👍 Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, имя победителя назовём в конце эфира.
Регистрируйтесь на эфир 23 июля — за час пришлём напоминание.
https://htmlacademy.ru/events/live-andagar | 998 |
| 6 |  🆕 Мы пересобрали курс «Фронтенд на автопилоте: AI-агенты на практике». От старой версии почти ничего не осталось, и название стало честнее: «Разработка с AI-агентами: инженерный подход».
За новым названием стоит главный сдвиг на рынке: производство кода дешевеет. Агент выдаёт его за минуты. Дорого теперь другое. Точно поставить задачу и дать агенту контекст, продумать архитектуру, проверить за ним каждый шаг и собрать надёжные интеграции. А отвечать за то, что ушло в продакшен, приходится вам.
Это отдельная инженерная дисциплина. Большинство пока ведёт её на глаз. На зелёные тесты полагаться рано: агент подгоняет их под то, как уже ведёт себя код. Дефект по-прежнему нужно доводить до первопричины, а она почти никогда не совпадает с первым, что бросается в глаза.
А инструменты постоянно сменяют друг друга. Сегодня в руках Claude Opus 4.8, GPT-5.6 Sol, GLM-5.2 и Kimi K3, через месяц или два появятся другие. Метод к ним не привязан и переезжает в любой редактор с любой моделью. На курсе отрабатываем метод на живом проекте: ведёте интернет-магазин от пустой папки до релиза, с тестами и релизной дисциплиной. К концу у вас продукт, границы которого определяете сами.
🔥 Курс для тех, кто хочет оставаться востребованным инженером на сложном рынке, когда модели становятся умнее. Стек выбираете сами: React, Vue, Angular или Svelte. Формат асинхронный, без потоков и дедлайнов. Первый раздел открыт бесплатно, с него и начните.
Программа и запись: https://htmlacademy.ru/levelup/ai-agents | 1 150 |
| 7 |  Лего-гриды
Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.
Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.
И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят.
Играть в новый уровень про гриды | 816 |
| 8 |  Сегодня скидка закрывается вместе с выходными. 60% на курс «Протоколы и сети: основы» по промокоду NET60 — до конца дня.
Понимание сетевых протоколов — один из навыков, которых не хватает мидл-фронтендерам: так показывает наша карта компетенций. Если откладывали курс — сегодня последняя возможность взять его со скидкой.
🔒 Записаться на курс | 1 025 |
| 9 |  +1Большинство фронтендеров работают с сетью каждый день, но редко глубже, чем «отправил запрос — получил ответ». Почему ответ медленный, почему рвётся соединение, почему одни данные шифруются, а другие идут открытым текстом — это уже за пределами fetch().
За четыре раздела курса «Протоколы и сети: основы» вы разбираете путь данных — от нижних уровней сети до прикладных протоколов. В основе — модель OSI и стек TCP/IP. Дальше TLS: шифрование и аутентификация по сертификатам. На практике сравниваете HTTP/1.1, HTTP/2 и HTTP/3 и разбираетесь, когда нужны WebSockets, а когда нет. Две задачи решаете руками: предварительное открытие TCP-соединений и оптимизация проекта под HTTP/2. Плюс четыре кейса с эталонными решениями.
«Самостоятельно всё это изучать можно, но информации в интернете много, она разрозненная, местами противоречивая. А здесь — конкретные выжимки с объяснениями. Направляют куда нужно», — из отзыва студента. #htmlacademy #levelup
Скидка 60% — только в эти выходные, 11 и 12 июля. Разовая акция: два дня, один курс, промокод NET60.
💣 Смотреть программу | 1 005 |
| 10 |  +1Продолжение мини-игры по CSS-фильтрам
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь | 705 |
| 11 |  Карусели, ленты сторис, постраничные слайдеры раньше означали JavaScript: обработчики касаний, подсчёт смещений, ручная докрутка. CSS Scroll Snap делает «прилипание» к слайдам силами самого браузера — двумя свойствами и без единой строки скрипта.
Работает во всех современных браузерах, а в старых лента листается как обычно. В статье — что это за свойства, пара приёмов для тонкой настройки и живая лента, которую можно поскроллить прямо на странице. #css #baseline
🎲 Читать статью | 928 |
| 12 | 🤔 Загадка от Кекса №6: что вернёт это выражение? | 1 018 |
| 13 |  Тёмная тема обычно удваивает CSS: пишете цвета для светлой, потом те же — для тёмной в @media. Функция light-dark() схлопывает это в одну строку: оба значения в одном объявлении, а браузер выбирает нужное по системной теме.
Уже работает во всех актуальных браузерах, а для старых достаточно обычного запасного цвета. В статье — как подключить (есть обязательный color-scheme, иначе не сработает) и чем функция выручает дизайн-системы. #css #baseline
💡 Читать статью | 971 |
| 14 |  Есть вечная история в диджитале: компаниям нужны хорошие специалисты, начинающим специалистам нужна первая нормальная работа, а между ними стоит большой и не всегда дружелюбный мост под названием «опыт работы».
Так начинается заметка веб-студии MediaMint — одного из работодателей нашей совместной программы для фронтендеров. Про обучение обычно рассказываем мы, а тут — взгляд со стороны компании, которая потом нанимает выпускников.
Максим Заруцкий, CEO студии, рассказывает, зачем работодателю видеть студента ещё на этапе обучения и каких джунов в MediaMint реально ждут в команде. Прочитать стоит и студентам, и тем, кто нанимает.
🎁 Читать заметку MediaMint | 896 |
| 15 |  ChatGPT и Claude печатают ответ у вас на глазах — слово за словом. Это стриминг: сервер отдаёт данные по мере генерации, ещё до того как соберёт ответ целиком. И тот же приём доступен в браузере — через Streams API и обычный fetch.
Кроме ИИ-интерфейсов, так грузят большие файлы с прогрессом и разбирают CSV на лету, нативно и без библиотек. В статье показываем, как читать ответ по кускам через response.body, и даём интерактивный пример прямо на странице. #js #baseline
👀 Читать статью | 1 002 |
| 16 |  Сегодня последний день скидки 60% на курс «Vue.js 3. Разработка клиентских приложений».
Промокод VUE60 — до конца дня. Курс «Vue.js 3»: два проекта поверх готового API, Composition API, Pinia, Vitest.
🎁 Записаться на курс | 819 |
| 17 |  Что случилось с рынком найма в 2026 году?
Максим Самарцев, директор Maxis, — про три волны, с которыми работодателю приходится сталкиваться на рынке найма. Объяснение в клипе из эфира.
Запись эфира: смотреть на YouTube | смотреть в VK
👍 Программа обучения | 1 141 |
| 18 |  +1Мини-игра по CSS-фильтрам
Нужно менять код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем лучше.
Можно играть даже на мобильном.
Играть здесь | 788 |
| 19 |  +232% вакансий фронтендера в продуктовых компаниях требуют Vue.js. Это второй по популярности фреймворк после React — и при этом один из самых приятных в работе: компонентный подход понятен, Composition API читается как обычный JavaScript.
Разобраться по документации можно, но долго. В курсе «Vue.js 3. Разработка клиентских приложений» — восемь разделов с теорией, разбором кейсов и практикой на двух реальных проектах. Отдельные разделы по Pinia, маршрутизатору, работе с сервером, анимациям переходов и тестированию через Vitest и Vue Test Utils. Гибкие сроки — начать можно прямо сейчас.
В выходные, 4 и 5 июля — скидка 60% по промокоду VUE60. #htmlacademy #levelup
💎 Программа и детали | 801 |
| 20 |  Каждый раз вручную сжимать изображения, минифицировать CSS и собирать спрайт — это звучит как рабочий процесс только до тех пор, пока файлов немного. Когда проект вырастает, рутина начинает занимать заметную часть времени.
Автоматизация передаёт эти задачи компьютеру. Минификация HTML, CSS и JavaScript, сжатие изображений, генерация WebP, сборка sprite.svg — всё это делается один раз в конфигурации, а дальше запускается одной командой.
Основа цепочки — Node.js и npm. Npm устанавливает нужные пакеты из внешних библиотек и запускает задачи через консоль. Список зависимостей хранится в package.json: достаточно положить файл в папку проекта и выполнить npm install — все инструменты скачаются автоматически. Сами задачи прописываются в gulpfile.js, который Gulp выполняет по команде.
В статье разбор каждого звена цепочки с примерами package.json и объяснением, что такое зависимости и зависимости для разработчиков. #npm
☝️ Читать статью | 980 |
