HTML Academy
رفتن به کانال در Telegram
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити. Наш секретный бот @HTMLAcademyKeksobot. Вопросы по обучению @htmlacademy_sales Ролики на YT https://www.youtube.com/@HTMLAcademyTV Ролики на VK https://vkvideo.ru/@htmlacademy
نمایش بیشتر9 517
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-17 روز
-3130 روز
در حال بارگذاری داده‌ها
کانال‌های مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.telemetr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسب‌ها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اکتبر '26اکتبر '26
اکتبر '26
+36
در 0 کانال‌ها
سپتامبر '26
+28
در 1 کانال‌ها
Get PRO
اوت '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
در 6 کانال‌ها
Get PRO
فوریه '26
+37
در 0 کانال‌ها
Get PRO
ژانویه '26
+54
در 0 کانال‌ها
Get PRO
دسامبر '25
+48
در 3 کانال‌ها
Get PRO
نوامبر '25
+44
در 2 کانال‌ها
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 اکتبر | +1 | |||
| 25 اکتبر | +2 | |||
| 24 اکتبر | 0 | |||
| 23 اکتبر | +4 | |||
| 22 اکتبر | +2 | |||
| 21 اکتبر | +2 | |||
| 20 اکتبر | 0 | |||
| 19 اکتبر | +2 | |||
| 18 اکتبر | 0 | |||
| 17 اکتبر | +1 | |||
| 16 اکتبر | 0 | |||
| 15 اکتبر | +1 | |||
| 14 اکتبر | 0 | |||
| 13 اکتبر | +1 | |||
| 12 اکتبر | +2 | |||
| 11 اکتبر | 0 | |||
| 10 اکتبر | 0 | |||
| 09 اکتبر | +3 | |||
| 08 اکتبر | +1 | |||
| 07 اکتبر | +4 | |||
| 06 اکتبر | +4 | |||
| 05 اکتبر | +3 | |||
| 04 اکتبر | +1 | |||
| 03 اکتبر | +2 | |||
| 02 اکتبر | 0 | |||
| 01 اکتبر | 0 |
پست‌های کانال
🔴 Вместе с WayDev запускаем совместную программу обучения фронтенд-разработчиков
Сегодня в 12:00 (MSK) руководитель WayDev выходит в эфир, чтобы поговорить с будущими выпускниками напрямую. Расскажет о проектах студии, о том, как команда встречает новичков и работает с ИИ. Свой вопрос можно задать в чате.
Успешные выпускники программы проходят собеседование у каждого работодателя. По его итогам — оплачиваемая стажировка, работа в штате или оплачиваемая работа по проектам, формат у каждой компании свой.
В конце эфира разыграем бесплатное место на программе среди первых 100 зарегистрировавшихся.
🌞 https://htmlacademy.ru/events/live-waydev
| 2 |  Студия встроила ИИ в работу команды. Что теперь доверят джуну?
Завтра, 22 октября, в 12:00 (MSK) — эфир с руководителем WayDev. Спросим, как это устроено и что это значит для новичка:
– Какие задачи студия доверит джуну, который умеет работать с ИИ?
– Что о работе с ИИ спрашивают на собеседовании?
– Кто принимает решение, если код написал агент?
Работать с ИИ-агентами учат и в программе: курс «Разработка с AI-агентами: инженерный подход» идёт отдельным модулем после вёрстки и JavaScript. На нём вы учитесь ставить агенту задачу и проверять результат. Этот курс мы добавили во все профессии с работодателями.
Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, итоги подведём завтра в конце эфира.
https://htmlacademy.ru/events/live-waydev | 631 |
| 3 |  «Ответственный и легкообучаемый»: какие слова в резюме раздражают рекрутеров
SuperJob спросил 1000 эйчаров, есть ли в резюме слова, которые их раздражают. Вопрос был открытый: варианты не предлагали, каждый писал своё.
Что называли чаще всего, в долях опрошенных:
– «многозадачность» — 21%
– «стрессоустойчивость» — 15%
– «ответственность» — 14%
– «коммуникабельность» — 12%
– «легкообучаемость» — 9%
Все пять слов — это заявления о себе, которые по резюме нельзя проверить. Среди прочих ответов рекрутеры упоминали и обратную сторону: в резюме не указаны результаты работы.
Опрос измеряет раздражение, а не решение: из него не следует, что за слово «ответственность» резюме отклоняют. Больше половины рекрутеров такие слова не задевают. И это не срез по ИТ и не срез по начинающим — опрашивали кадровиков из всех отраслей.
У начинающего в резюме мало строк про опыт, и пустое место чаще всего занимают как раз эти слова — это наше рассуждение, опрос его не проверял. Заменить их можно тем, что у вас уже есть.
Возьмите своё резюме и к каждому слову о себе допишите: какая была задача, что вы сделали сами, чем закончилось. «Легкообучаемость» превращается в строку о том, что вы освоили и что на этом сделали. «Ответственность» — в работу, которую вы довели до конца и можете показать. Если дописать нечего, слово лучше убрать: без подтверждения оно ничего не сообщает.
Приглашения на собеседование это не гарантирует. Но это та часть отбора, которая зависит от вас. | 643 |
| 4 |  Эта студия делала первые версии сервиса, который знает каждый, кто хоть раз искал работу
WayDev работает с тех времён, когда каждая веб-команда писала собственную CMS. Теперь студия — один из работодателей нашей новой программы «Фронтенд-разработчик».
22 октября в 12:00 (MSK) на эфире познакомимся с её руководителем и командой, в которую попадут выпускники. Спросим:
– Какими проектами в студии гордятся больше всего?
– Как устроена команда разработки и где в ней место фронтенд-разработчика?
– Что руководитель хочет понять о новичке на собеседовании?
Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе. Победителя выберем случайно и назовём в конце эфира.
https://htmlacademy.ru/events/live-waydev | 808 |
| 5 | Большой визуальный гайд по CSS Anchor Positioning
От базовой привязки элементов до прикладных приёмов: создания прочных соединителей и цепочек якорей.
Собрали материалы нескольких месяцев работы в большую статью в формате "CSS-фича в картинках". Получилось больше 50 иллюстраций!
Теперь про Anchor Positioning можно и почитать, и поиграть.
https://habr.com/ru/articles/1092540/
→ опубликовано через smmtp:// | 895 |
| 6 |  Суперприёмы Anchor Positioning
В детстве мы играли в файтинги на денди (а мажоры на сегамегадрайве). И там были суперприёмы. В анкор позишнинге они тоже есть!
Суперприём #1 – прочная связь двух элементов
Один угол заякорённого элемента привязываем к первому якорю, противоположный угол — ко второму якорю. Готово. Связь будет сохраняться при перемещении связанных элементов. Визуально оформить связь можно фоном или рамками. Код:
.svyaz {
/* один угол связали с --a1 */
top: anchor(--a1 center);
left: anchor(--a1 center);
/* второй с --a2 */
bottom: anchor(--a2 center);
right: anchor(--a2 center);
}
Суперприём #2 – цепочки якорей
Один заякорённый элемент можно делать якорем для второго, а тот для третьего и так далее. Простор для творчества — гигансткий.
Этот приём напоминает мне школьную игру про "... дорисуй вагон другой".
Пощупать эти приёмы можно в очередном уровне игры про Anchor Positioning. Перед этим лучше пройти все предыдущие уровни.
→ опубликовано через smmtp:// | 1 159 |
| 7 |  anchor() – царица якорей
Функция anchor() живёт внутри большинства сложных демок и крутых приёмов, связанных с якорным позиционированием.
Простейший вид якорей:
1. anchor-name у якоря;
2. position-anchor + position-area у привязанного элемента.
Продвиутый вид:
1. anchor-name у якоря;
2. inset-свойства со значениями, содержащими anchor(), у привязанного элемента.
Например:
.anchor {
anchor-name: --a1;
}
.target {
position: absolute;
left: anchor(--a1 right);
}
То есть элемент можно привязать любой стороной к любому якорю (да-да, элемент можно привязать сразу к нескольким разным якорям). А ещё можно использовать выражения с anchor(). Всё это даёт невероятную гибкость в выборе точек привязки и в позиционировании элементов.
Поисследуйте anchor() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования. | 1 131 |
| 8 |  Скругления в неожиданных местах
Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк.
Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc.
Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота.
P.S.: если в первый раз видите shape(), то начните игру с первого уровня | 1 187 |
| 9 | 👍 С 25 по 27 сентября условия покупки курса или профессии предлагаете вы. Мы назвали это «Акцией-конструктором».
Например, можно попросить «TypeScript. Теория типов» и «Паттерны проектирования» по цене одного курса. Или скидку на «Фронтенд-разработчика» в индивидуальном формате, где с вами весь путь работает личный наставник. А за курс «Разработка с AI-агентами: инженерный подход» — назвать свою цену.
Каждое предложение рассмотрим. Если такие условия возможны, зафиксируем их, если нет — ответим встречным вариантом, и его тоже можно обсуждать.
Напишите свои условия нам в @htmlacademy_sales до 27 сентября. Бум! | 1 340 |
| 10 |  CSS shape() — фича больших надежд
CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape().
shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор?
Но давайте посмотрим на текущий потенциал фичи:
— сложные формы контейнеров (с нормальной отрисовкой рамок),
— траектории движения для анимаций,
— просто обрезки,
— комбинирование с другими фичами (например с anchor-positioning).
Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально.
P.S.: куда поместить навык работы с shape() в системе грейдов?
Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы? | 1 231 |
| 11 |  🔴 Вместе с OKTTA запускаем совместную программу обучения фронтенд-разработчиков
Нужна ли студии сильная вёрстка, когда код пишет нейросеть? В 12:00 (MSK) руководитель студии ответит и расскажет, как новичок входит в распределённую команду. Выпускники программы идут на собеседование к каждому её работодателю. После него — оплачиваемая стажировка, штат или попроектная работа, у каждой компании свой формат.
Последний шанс на бесплатное место: разыграем его в конце эфира среди первых 100 зарегистрировавшихся. Подключайтесь в 12:00 и оставайтесь до финала, победителя назовём в прямом эфире.
🔜 https://htmlacademy.ru/events/live-oktta | 1 294 |
| 12 |  Завтра спросим у работодателя, что джун должен уметь без нейросети
Эфир с руководителем студии OKTTA — завтра в 12:00 (MSK). Что спросим:
— Что джун должен уметь сам, без нейросети?
— Как работодатель понимает, сам ли кандидат сделал тестовое?
— Что студия делает с кодом от нейросети, который приносит заказчик?
— Каково новичку в команде, где все работают удалённо?
Курс «Разработка с AI-агентами: инженерный подход» уже входит в программу отдельным модулем. На нём вы ставите агенту задачу с границами и критериями приёмки, сами тестируете его код и доводите изменения через ревью до релиза. Почему сами? Отвечать за результат всё равно вам, и курс учит видеть, где заканчивается зона агента.
Ну и регистрируйтесь сегодня: бесплатное место на программе разыграем среди первых 100 зарегистрировавшихся, итоги подведём в конце эфира.
https://htmlacademy.ru/events/live-oktta
🔜 Что хороший разработчик не должен передавать агентам, как считаете? Напишите, а завтра в эфире будет с чем сравнить. | 985 |
| 13 |  17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений.
Пока все спорят, забрали ли нейросети стартовые задачи у джунов, спросим у работодателя напрямую:
— Какого джуна студия готова взять в команду?
— Что нейросеть пока не может сверстать по макету?
— Почему бы не нанять верстальщика через обычные отклики?
Ответы — в эфире. А среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, победителя назовём в конце.
Регистрируйтесь — за час до начала пришлём напоминание.
https://htmlacademy.ru/events/live-oktta | 1 057 |
| 14 |  CSS Anchor Positioning
Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства.
Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями.
Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич.
Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества). | 1 072 |
| 15 |  Штош, вот и подходит к концу 1 сентября и начинается учебный год. А ваше «когда-нибудь разберусь с программированием» переедет на следующий учебный год.
На https://htmlacademy.ru снова работает «Колесо фортуны», вход через коробку с подарком.
Что выпадет, то ваше: персональная скидка на обучение и повод начать учиться в один день со школьниками. | 1 494 |
| 16 |  Треугольники на CSS
Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов.
Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов.
Cхема решения такая:
conic-gradient(
from 335deg
at bottom right,
transparent 0 25deg,
red 25deg
);
"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол.
Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку. | 1 396 |
| 17 |  Флексы или флоаты
Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден.
Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям.
Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре | 1 131 |
| 18 |  Мифические измерения гридов
"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).
Никогда не понимал, что это значит. Признайтесь, у кого так же?
Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек.
Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area.
Поиграться с именованными областями можно в новом уровне грид-лего | 1 186 |
| 19 |  Сегодня работодатель отвечает вживую: реально ли джуну войти во фронтенд, когда стартовый код пишет ИИ
Каждый, кто сейчас осваивает вёрстку и программирование, слышит одно: во фронтенд не пробиться, стартовые задачи забрал ИИ. Андагар 10 лет строит платформы для энергетики, банков и фармы — и всё равно берёт джунов, растит их под свои проекты. Сегодня в 12:00 (MSK) спросим у работодателя напрямую: чем новичок теперь ценен команде и кто ведёт его через первые недели на боевом проекте.
🦖 Как по-вашему: ИИ усложнил джуну вход в Айти или дал фору тем, кто научился им пользоваться? Накидайте вариантов в комментарии, а в 12:00 сверим с ответом работодателя совместной программы.
Эфир сегодня, 12:00 (MSK).
https://htmlacademy.ru/events/live-andagar | 1 263 |
| 20 |  Код, с которого начинают во фронтенде, всё чаще пишет ИИ. Зачем Андагар растит своих джунов с нуля?
23 июля в 12:00 (MSK) спросим об этом у самой компании в прямом эфире. Андагар 10 лет делает цифровые продукты и высоконагруженные платформы для крупного бизнеса: энергетика, банки, ритейл, фарма, логистика. TAdviser включил компанию сразу в три раздела карты цифровизации промышленности.
Спросим напрямую:
– Как выглядят боевые задачи фронтенда, когда за интерфейсом энергетика, банк или аптечная сеть?
– Кто в загруженной команде ведёт новичка первые недели, пока он вникает в проект?
– Как в потоке автооткликов, сгенерированных нейросетью, разглядеть живого джуна?
Ещё одно, важное для новичков. Умение работать с AI-агентами сегодня спрашивают на всех грейдах, не только у сеньоров. Поэтому в программу с Андагаром сразу включили полноценный обновлённый курс «Разработка с AI-агентами: инженерный подход» — этот навык вы осваиваете вместе с профессией, а не годы спустя. Как это работает в реальной команде, тоже обсудим на эфире.
👍 Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, имя победителя назовём в конце эфира.
Регистрируйтесь на эфир 23 июля — за час пришлём напоминание.
https://htmlacademy.ru/events/live-andagar | 998 |
