HTML Academy

Якорь в одном контейнере, кораблик — в другом. Но CSS всё равно может их связать! Знакомьтесь, CSS Anchor Positioning. С его помощью можно привязать один элемент к другому, даже если они находятся в разных контейнерах. А когда якорь перемещается, CSS сам пересчитывает положение элемента. И всё это без JavaScript. Теперь ваша очередь! Попробуйте первое задание → https://htmlacademy.ru/skill-levels/455/run/1

🔴 Вместе с WayDev запускаем совместную программу обучения фронтенд-разработчиков Сегодня в 12:00 (MSK) руководитель WayDev выходит в эфир, чтобы поговорить с будущими выпускниками напрямую. Расскажет о проектах студии, о том, как команда встречает новичков и работает с ИИ. Свой вопрос можно задать в чате. Успешные выпускники программы проходят собеседование у каждого работодателя. По его итогам — оплачиваемая стажировка, работа в штате или оплачиваемая работа по проектам, формат у каждой компании свой. В конце эфира разыграем бесплатное место на программе среди первых 100 зарегистрировавшихся. 🌞 https://htmlacademy.ru/events/live-waydev

Студия встроила ИИ в работу команды. Что теперь доверят джуну? Завтра, 22 октября, в 12:00 (MSK) — эфир с руководителем WayDev. Спросим, как это устроено и что это значит для новичка: – Какие задачи студия доверит джуну, который умеет работать с ИИ? – Что о работе с ИИ спрашивают на собеседовании? – Кто принимает решение, если код написал агент? Работать с ИИ-агентами учат и в программе: курс «Разработка с AI-агентами: инженерный подход» идёт отдельным модулем после вёрстки и JavaScript. На нём вы учитесь ставить агенту задачу и проверять результат. Этот курс мы добавили во все профессии с работодателями. Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, итоги подведём завтра в конце эфира. https://htmlacademy.ru/events/live-waydev

«Ответственный и легкообучаемый»: какие слова в резюме раздражают рекрутеров SuperJob спросил 1000 эйчаров, есть ли в резюме слова, которые их раздражают. Вопрос был открытый: варианты не предлагали, каждый писал своё. Что называли чаще всего, в долях опрошенных: – «многозадачность» — 21% – «стрессоустойчивость» — 15% – «ответственность» — 14% – «коммуникабельность» — 12% – «легкообучаемость» — 9% Все пять слов — это заявления о себе, которые по резюме нельзя проверить. Среди прочих ответов рекрутеры упоминали и обратную сторону: в резюме не указаны результаты работы. Опрос измеряет раздражение, а не решение: из него не следует, что за слово «ответственность» резюме отклоняют. Больше половины рекрутеров такие слова не задевают. И это не срез по ИТ и не срез по начинающим — опрашивали кадровиков из всех отраслей. У начинающего в резюме мало строк про опыт, и пустое место чаще всего занимают как раз эти слова — это наше рассуждение, опрос его не проверял. Заменить их можно тем, что у вас уже есть. Возьмите своё резюме и к каждому слову о себе допишите: какая была задача, что вы сделали сами, чем закончилось. «Легкообучаемость» превращается в строку о том, что вы освоили и что на этом сделали. «Ответственность» — в работу, которую вы довели до конца и можете показать. Если дописать нечего, слово лучше убрать: без подтверждения оно ничего не сообщает. Приглашения на собеседование это не гарантирует. Но это та часть отбора, которая зависит от вас.

Эта студия делала первые версии сервиса, который знает каждый, кто хоть раз искал работу WayDev работает с тех времён, когда каждая веб-команда писала собственную CMS. Теперь студия — один из работодателей нашей новой программы «Фронтенд-разработчик». 22 октября в 12:00 (MSK) на эфире познакомимся с её руководителем и командой, в которую попадут выпускники. Спросим: – Какими проектами в студии гордятся больше всего? – Как устроена команда разработки и где в ней место фронтенд-разработчика? – Что руководитель хочет понять о новичке на собеседовании? Среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе. Победителя выберем случайно и назовём в конце эфира. https://htmlacademy.ru/events/live-waydev

Большой визуальный гайд по CSS Anchor Positioning От базовой привязки элементов до прикладных приёмов: создания прочных соединителей и цепочек якорей. Собрали материалы нескольких месяцев работы в большую статью в формате "CSS-фича в картинках". Получилось больше 50 иллюстраций! Теперь про Anchor Positioning можно и почитать, и поиграть. https://habr.com/ru/articles/1092540/ → опубликовано через smmtp://

Суперприёмы 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://

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() самостоятельно в мини-игре. Цель — пройти уровень идеально. После этого, как говорил братишка Иллидан, вы будете готовы к сложным приёмам якорного позиционирования.

Скругления в неожиданных местах Скругления хороши в углах блоков, а в других местах они превращаются в жуткий головняк. Проблему скруглений решает CSS-функция shape(), причём сразу несколькими способами. Самый грубый — команда arc. Теперь с arc можно поиграться в новой мини-игре. Цель, как обычно, пройти уровень идеально (можно не с первого раза). В процесее оцените, насколько сложно вырезать стрелочку со скриншота. P.S.: если в первый раз видите shape(), то начните игру с первого уровня

👍 С 25 по 27 сентября условия покупки курса или профессии предлагаете вы. Мы назвали это «Акцией-конструктором». Например, можно попросить «TypeScript. Теория типов» и «Паттерны проектирования» по цене одного курса. Или скидку на «Фронтенд-разработчика» в индивидуальном формате, где с вами весь путь работает личный наставник. А за курс «Разработка с AI-агентами: инженерный подход» — назвать свою цену. Каждое предложение рассмотрим. Если такие условия возможны, зафиксируем их, если нет — ответим встречным вариантом, и его тоже можно обсуждать. Напишите свои условия нам в @htmlacademy_sales до 27 сентября. Бум!

CSS shape() — фича больших надежд CSS начал вырастать из коротких штанишек квадратного веба. Швы конкретно затрещали, когда хром зарелизил свойство border-shape, ядро которого — CSS-функция shape(). shape() была не особо популярной, про неё вспоминали, когда нужно было что-то обрезать. Но и тут можно было повыбирать: маски или clip-path, а можно ли использовать какой-нибудь генератор? Но давайте посмотрим на текущий потенциал фичи: — сложные формы контейнеров (с нормальной отрисовкой рамок), — траектории движения для анимаций, — просто обрезки, — комбинирование с другими фичами (например с anchor-positioning). Короче, с фичей пора знакомиться, можно начать с мини-игры по CSS shape(). Цель — пройти уровень идеально. P.S.: куда поместить навык работы с shape() в системе грейдов? Я думаю, что на текущем этапе даже базовое владение shape() — это удел синьоров, потому что синьор — это про кругозор и перспективные фичи, а мидл — это про использование надёжного и предсказуемого. А как думаете вы?

🔴 Вместе с OKTTA запускаем совместную программу обучения фронтенд-разработчиков Нужна ли студии сильная вёрстка, когда код пишет нейросеть? В 12:00 (MSK) руководитель студии ответит и расскажет, как новичок входит в распределённую команду. Выпускники программы идут на собеседование к каждому её работодателю. После него — оплачиваемая стажировка, штат или попроектная работа, у каждой компании свой формат. Последний шанс на бесплатное место: разыграем его в конце эфира среди первых 100 зарегистрировавшихся. Подключайтесь в 12:00 и оставайтесь до финала, победителя назовём в прямом эфире. 🔜 https://htmlacademy.ru/events/live-oktta

Завтра спросим у работодателя, что джун должен уметь без нейросети Эфир с руководителем студии OKTTA — завтра в 12:00 (MSK). Что спросим: — Что джун должен уметь сам, без нейросети? — Как работодатель понимает, сам ли кандидат сделал тестовое? — Что студия делает с кодом от нейросети, который приносит заказчик? — Каково новичку в команде, где все работают удалённо? Курс «Разработка с AI-агентами: инженерный подход» уже входит в программу отдельным модулем. На нём вы ставите агенту задачу с границами и критериями приёмки, сами тестируете его код и доводите изменения через ревью до релиза. Почему сами? Отвечать за результат всё равно вам, и курс учит видеть, где заканчивается зона агента. Ну и регистрируйтесь сегодня: бесплатное место на программе разыграем среди первых 100 зарегистрировавшихся, итоги подведём в конце эфира. https://htmlacademy.ru/events/live-oktta 🔜 Что хороший разработчик не должен передавать агентам, как считаете? Напишите, а завтра в эфире будет с чем сравнить.

17 сентября в 12:00 (MSK) — прямой эфир с руководителем студии OKTTA. Студия сама делает дизайн и разработку цифровых продуктов: корпоративных сайтов, интернет-магазинов, мобильных приложений. Пока все спорят, забрали ли нейросети стартовые задачи у джунов, спросим у работодателя напрямую: — Какого джуна студия готова взять в команду? — Что нейросеть пока не может сверстать по макету? — Почему бы не нанять верстальщика через обычные отклики? Ответы — в эфире. А среди первых 100 зарегистрировавшихся разыграем бесплатное место на программе, победителя назовём в конце. Регистрируйтесь — за час до начала пришлём напоминание. https://htmlacademy.ru/events/live-oktta

CSS Anchor Positioning Бывают такие фичи, до которых долго доходят руки. Но чуть познакомишься — понимаешь, что фича — бомба. Якорное позиционирование — бомба, прям петарда чёрный корсар из детства. Заякорённые элементы это как бы абсолютно позиционированные, но с суперспособностями. Например, их можно привязывать не только к элементу в цепочке родителей, но к элементам вне родителя. И ещё куча других фич. Короче, не затягивайте с тем, чтобы поиграться с Anchor Positioning, тем более мы сделали красивую мини игру про эту фичу (первую из множества).

Штош, вот и подходит к концу 1 сентября и начинается учебный год. А ваше «когда-нибудь разберусь с программированием» переедет на следующий учебный год. На https://htmlacademy.ru снова работает «Колесо фортуны», вход через коробку с подарком. Что выпадет, то ваше: персональная скидка на обучение и повод начать учиться в один день со школьниками.

Треугольники на CSS Недавно вышла статья, в которой автор открыл для себя треугольники на конических градиентах. Идея простая: помещаем центр градиента в угол и используем резкий переход цветов. Способ гибкий и удобный: не нужен дополнительный элемент, можно сделать сразу несколько треугольников и независимо управлять их параметрами с помощью многослойных фонов. Cхема решения такая:

conic-gradient(
  from 335deg
  at bottom right,
  transparent 0 25deg,
  red 25deg
);

"Наклон" треугольника задаём позицией цвета, помещаем центр градиента в нужный угол контейнера и подбираем подходящий стартовый угол. Этот полезный приём можно сразу закрепить в небольшом игровом уровне по CSS-градиентам: 5 минут практики, чтобы поиграть с параметрами и набить руку.

Флексы или флоаты Для опытных разработчиков этот вопрос даже не встаёт. Выбор в пользу флоатов очевиден. Но для фронтендеров-неофитов последних двух поколений были придуманы флексы. Этакое простое введение в системы раскладок (в общем-то такая же эрзац-система-раскладки, как и гриды). Главная цель флексов — не отпугнуть новичка на пути к вершине мастерства (флоатам). Так что не удивляйтесь их достаточно слабым возможностям. Свои первые робкие шаги во флексах можно сделать в нашей красивой псевдо-три-дэ игре

Мифические измерения гридов

"Флексы одномерные, а гриды двумерные" (ага, а трансформации трёхмерные).

Никогда не понимал, что это значит. Признайтесь, у кого так же? Я расшифровываю это так: в гридах есть явная двумерная адресация для элементов, а во флексах — нет. Грид-элементу можно сказать: "живи в 4 колонке 3 ряда". И он будет там жить, даже если в грид-контейнере он один-одинёшенек. Двумерная адресация — это хорошо. Но настоящая жемчужина (без иронии) гридов — именованные области и адресация по имени: grid-template-areas + grid-area. Поиграться с именованными областями можно в новом уровне грид-лего

Сегодня работодатель отвечает вживую: реально ли джуну войти во фронтенд, когда стартовый код пишет ИИ Каждый, кто сейчас осваивает вёрстку и программирование, слышит одно: во фронтенд не пробиться, стартовые задачи забрал ИИ. Андагар 10 лет строит платформы для энергетики, банков и фармы — и всё равно берёт джунов, растит их под свои проекты. Сегодня в 12:00 (MSK) спросим у работодателя напрямую: чем новичок теперь ценен команде и кто ведёт его через первые недели на боевом проекте. 🦖 Как по-вашему: ИИ усложнил джуну вход в Айти или дал фору тем, кто научился им пользоваться? Накидайте вариантов в комментарии, а в 12:00 сверим с ответом работодателя совместной программы. Эфир сегодня, 12:00 (MSK). https://htmlacademy.ru/events/live-andagar