HTML Academy
الذهاب إلى القناة على Telegram
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити. Наш секретный бот @HTMLAcademyKeksobot. Вопросы по обучению @htmlacademy_sales Ролики на YT https://www.youtube.com/@HTMLAcademyTV Ролики на VK https://vkvideo.ru/@htmlacademy
إظهار المزيد9 549
المشتركون
-124 ساعات
-67 أيام
-7230 أيام
جاري تحميل البيانات...
القنوات المماثلة
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
سبتمبر '26سبتمبر '26
سبتمبر '26
+27
في 1 قنوات
أغسطس '26
+31
في 0 قنوات
Get PRO
يوليو '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 سبتمبر | +4 | |||
| 24 سبتمبر | +2 | |||
| 23 سبتمبر | +3 | |||
| 22 سبتمبر | +1 | |||
| 21 سبتمبر | +1 | |||
| 20 سبتمبر | +3 | |||
| 19 سبتمبر | 0 | |||
| 18 سبتمبر | 0 | |||
| 17 سبتمبر | 0 | |||
| 16 سبتمبر | 0 | |||
| 15 سبتمبر | +3 | |||
| 14 سبتمبر | 0 | |||
| 13 سبتمبر | 0 | |||
| 12 سبتمبر | 0 | |||
| 11 سبتمبر | +2 | |||
| 10 سبتمبر | +1 | |||
| 09 سبتمبر | +1 | |||
| 08 سبتمبر | +1 | |||
| 07 سبتمبر | +2 | |||
| 06 سبتمبر | +1 | |||
| 05 سبتمبر | +1 | |||
| 04 سبتمبر | 0 | |||
| 03 سبتمبر | +1 | |||
| 02 سبتمبر | 0 | |||
| 01 سبتمبر | 0 |
منشورات القناة
Repost from CSS Боль
Скругления в неожиданных местах
Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.
Проблему скруглений решает CSS-функция
shape(), причём сразу несколькими способами. Самый грубый — команда arc.
Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.
P.S.: если в первый раз видите shape(), то начните игру с первого уровня| 2 | 👍 С 25 по 27 сентября условия покупки курса или профессии предлагаете вы. Мы назвали это «Акцией-конструктором».
Например, можно попросить «TypeScript. Теория типов» и «Паттерны проектирования» по цене одного курса. Или скидку на «Фронтенд-разработчика» в индивидуальном формате, где с вами весь путь работает личный наставник. А за курс «Разработка с AI-агентами: инженерный подход» — назвать свою цену.
Каждое предложение рассмотрим. Если такие условия возможны, зафиксируем их, если нет — ответим встречным вариантом, и его тоже можно обсуждать.
Напишите свои условия нам в @htmlacademy_sales до 27 сентября. Бум! | 558 |
| 3 |  CSS shape() — фича больших надежд
CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().
shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?
Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).
Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.
P.S.: куда поместить навык работы с shape() в системе грейдов?
Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы? | 771 |
| 4 |  🔴 Вместе с OKTTA запускаем совместную программу обучения фронтенд-разработчиков
Нужна ли студии сильная вёрстка, когда код пишет нейросеть? В 12:00 (MSK) руководитель студии ответит и расскажет, как новичок входит в распределённую команду. Выпускники программы идут на собеседование к каждому её работодателю. После него — оплачиваемая стажировка, штат или попроектная работа, у каждой компании свой формат.
Последний шанс на бесплатное место: разыграем его в конце эфира среди первых 100 зарегистрировавшихся. Подключайтесь в 12:00 и оставайтесь до финала, победителя назовём в прямом эфире.
🔜 https://htmlacademy.ru/events/live-oktta | 1 020 |
| 5 |  Завтра спросим у работодателя, что джун должен уметь без нейросети
Эфир с руководителем студии OKTTA — завтра в 12:00 (MSK). Что спросим:
— Что джун должен уметь сам, без нейросети?
— Как работодатель понимает, сам ли кандидат сделал тестовое?
— Что студия делает с кодом от нейросети, который приносит заказчик?
— Каково новичку в команде, где все работают удалённо?
Курс «Разработка с AI-агентами: инженерный подход» уже входит в программу отдельным модулем. На нём вы ставите агенту задачу с границами и критериями приёмки, сами тестируете его код и доводите изменения через ревью до релиза. Почему сами? Отвечать за результат всё равно вам, и курс учит видеть, где заканчивается зона агента.
Ну и регистрируйтесь сегодня: бесплатное место на программе разыграем среди первых 100 зарегистрировавшихся, итоги подведём в конце эфира.
https://htmlacademy.ru/events/live-oktta
🔜 Что хороший разработчик не должен передавать агентам, как считаете? Напишите, а завтра в эфире будет с чем сравнить. | 826 |
| 6 |  17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений.
Пока все спорят, забрали ли нейросети стартовые задачи у джунов, спросим у работодателя напрямую:
— Какого джуна студия готова взять в команду?
— Что нейросеть пока не может сверстать по макету?
— Почему бы не нанять верстальщика через обычные отклики?
Ответы — в эфире. А среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, победителя назовём в конце.
Регистрируйтесь — за час до начала пришлём напоминание.
https://htmlacademy.ru/events/live-oktta | 892 |
| 7 |  CSS Anchor Positioning
Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.
Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.
Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.
Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества). | 936 |
| 8 |  Штош, вот и подходит к концу 1 сентября и начинается учебный год. А ваше «когда-нибудь разберусь с программированием» переедет на следующий учебный год.
На https://htmlacademy.ru снова работает «Колесо фортуны», вход через коробку с подарком.
Что выпадет, то ваше: персональная скидка на обучение и повод начать учиться в один день со школьниками. | 1 464 |
| 9 |  Треугольники на CSS
Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.
Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.
Cхема решения такая:
conic-gradient(
from 335deg
at bottom right,
transparent 0 25deg,
red 25deg
);
"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.
Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку. | 1 396 |
| 10 |  Флексы или флоаты
Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.
Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.
Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре | 1 131 |
| 11 |  Мифические измерения гридов
"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).
Никогда не понимал, что это значит. Признайтесь, у кого так же?
Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.
Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.
Поиграться с именованными областями можно в новом уровне грид-лего | 1 186 |
| 12 |  Сегодня работодатель отвечает вживую: реально ли джуну войти во фронтенд, когда стартовый код пишет ИИ
Каждый, кто сейчас осваивает вёрстку и программирование, слышит одно: во фронтенд не пробиться, стартовые задачи забрал ИИ. Андагар 10 лет строит платформы для энергетики, банков и фармы — и всё равно берёт джунов, растит их под свои проекты. Сегодня в 12:00 (MSK) спросим у работодателя напрямую: чем новичок теперь ценен команде и кто ведёт его через первые недели на боевом проекте.
🦖 Как по-вашему: ИИ усложнил джуну вход в Айти или дал фору тем, кто научился им пользоваться? Накидайте вариантов в комментарии, а в 12:00 сверим с ответом работодателя совместной программы.
Эфир сегодня, 12:00 (MSK).
https://htmlacademy.ru/events/live-andagar | 1 263 |
| 13 |  Код, с которого начинают во фронтенде, всё чаще пишет ИИ. Зачем Андагар растит своих джунов с нуля?
23 июля в 12:00 (MSK) спросим об этом у самой компании в прямом эфире. Андагар 10 лет делает цифровые продукты и высоконагруженные платформы для крупного бизнеса: энергетика, банки, ритейл, фарма, логистика. TAdviser включил компанию сразу в три раздела карты цифровизации промышленности.
Спросим напрямую:
– Как выглядят боевые задачи фронтенда, когда за интерфейсом энергетика, банк или аптечная сеть?
– Кто в загруженной команде ведёт новичка первые недели, пока он вникает в проект?
– Как в потоке автооткликов, сгенерированных нейросетью, разглядеть живого джуна?
Ещё одно, важное для новичков. Умение работать с AI-агентами сегодня спрашивают на всех грейдах, не только у сеньоров. Поэтому в программу с Андагаром сразу включили полноценный обновлённый курс «Разработка с AI-агентами: инженерный подход» — этот навык вы осваиваете вместе с профессией, а не годы спустя. Как это работает в реальной команде, тоже обсудим на эфире.
👍 Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, имя победителя назовём в конце эфира.
Регистрируйтесь на эфир 23 июля — за час пришлём напоминание.
https://htmlacademy.ru/events/live-andagar | 998 |
| 14 |  🆕 Мы пересобрали курс «Фронтенд на автопилоте: 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 |
| 15 |  Лего-гриды
Гриды бесят. Это самый сложный и муторный механизм раскладки, в котором есть дополнительная (по сравнению с флексами) виртуальная сущность — шаблоны.
Флексы намного проще и намного популярнее. Но, к сожалению, владеть нужно и гридам — слишком уж мощная технология.
И если разбираться с гридами неспеша, с помощью красивых кубиков лего, то они почти не бесят.
Играть в новый уровень про гриды | 816 |
| 16 |  Сегодня скидка закрывается вместе с выходными. 60% на курс «Протоколы и сети: основы» по промокоду NET60 — до конца дня.
Понимание сетевых протоколов — один из навыков, которых не хватает мидл-фронтендерам: так показывает наша карта компетенций. Если откладывали курс — сегодня последняя возможность взять его со скидкой.
🔒 Записаться на курс | 1 025 |
| 17 |  +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 |
| 18 |  +1Продолжение мини-игры по CSS-фильтрам
Меняйте код, подбирая комбинации карточек, чтобы повторить образец. Чем меньше ходов — тем вы круче!
Можно играть даже на мобильном.
👉🏻 Играть здесь | 705 |
| 19 |  Карусели, ленты сторис, постраничные слайдеры раньше означали JavaScript: обработчики касаний, подсчёт смещений, ручная докрутка. CSS Scroll Snap делает «прилипание» к слайдам силами самого браузера — двумя свойствами и без единой строки скрипта.
Работает во всех современных браузерах, а в старых лента листается как обычно. В статье — что это за свойства, пара приёмов для тонкой настройки и живая лента, которую можно поскроллить прямо на странице. #css #baseline
🎲 Читать статью | 928 |
| 20 | 🤔 Загадка от Кекса №6: что вернёт это выражение? | 1 018 |
