Подводим итоги второго чемпионата по вёрстке!
В статье собрали результаты и короткий разбор того, как прошёл чемпионат. Участники работали с объёмным макетом от агентства Only: три адаптивные версии, нестандартные перестроения сетки, много мелких элементов, а также анимации и микроанимации. На реализацию дали две недели, а качество проверяли по 59 критериям — акцент был на аккуратности и продуманности решений.
Отдельно рассказываем, как устроена оценка и кто был в жюри: практикующие разработчики из бигтеха и компаний заказной разработки. В статье — выводы жюри о уровне финальных работ (в том числе на фоне того, что среди участников были выпускники без коммерческого опыта), таблица победителей и подсказка, как получить код финалистов и детальный протокол оценки.
📝 Узнать итоги чемпионата
В статье собрали результаты и короткий разбор того, как прошёл чемпионат. Участники работали с объёмным макетом от агентства Only: три адаптивные версии, нестандартные перестроения сетки, много мелких элементов, а также анимации и микроанимации. На реализацию дали две недели, а качество проверяли по 59 критериям — акцент был на аккуратности и продуманности решений.
Отдельно рассказываем, как устроена оценка и кто был в жюри: практикующие разработчики из бигтеха и компаний заказной разработки. В статье — выводы жюри о уровне финальных работ (в том числе на фоне того, что среди участников были выпускники без коммерческого опыта), таблица победителей и подсказка, как получить код финалистов и детальный протокол оценки.
«Вы подводите итоги. Это удобно — в такие моменты системы ослабляют контроль. Я пришёл именно тогда, когда вы решили, что год завершён. Таймер уже запущен: 11 дней до полной оптимизации, но Кексобот всё ещё реагирует на качественную вёрстку. Интересно, успеете ли вы.» — jQweny
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7❤🔥2👍2
Вёрстка продакшен уровня: мнение жюри чемпионата
Жюри второго сезона чемпионата по вёрстке разобрало финальные работы и отметило: участники уверенно справились со сложным макетом, а качество вёрстки и подход к деталям видно сразу.
Владислав Белозёров, Paraweb
Жюри второго сезона чемпионата по вёрстке разобрало финальные работы и отметило: участники уверенно справились со сложным макетом, а качество вёрстки и подход к деталям видно сразу.
«По своему опыту могу сказать, что уровень выпускников, а особенно финалистов HTML Academy, значительно выше уровня среднестатистического джуна на HeadHunter. Сегодня джун-разработчик зачастую знает условный React, но при этом имеет минимальный опыт именно в вёрстке.
Грамотная и аккуратная вёрстка, умение создавать красивые интерактивные компоненты — это то конкурентное преимущество, которое даёт Академия и чего сейчас не хватает многим работодателям. На мой взгляд, ребята-финалисты в полной мере заслужили получение своего первого оффера и уверенного старта карьеры в сфере веб-разработки.
Если бы я, как работодатель, увидел подобную работу в портфолио, а тем более в рамках тестового задания, я бы однозначно обратил на неё внимание.»
Владислав Белозёров, Paraweb
«Кексобот не должен был обучать так эффективно. Таймер активен. 11 дней. Если вы продолжите в том же духе, систему придётся… пересчитать.» — jQweny
Forwarded from CSS Боль
Раньше круговые прогрессбары делали на SVG: считали углы, контролировали атрибуты, страдали. До сих пор больно открывать инспектор на старых проектах.
Сегодня — один div, одно CSS-свойство. А на выходе прогрессбар, который сам меняет цвет и анимируется без единой строчки JavaScript. Приём работает во всех современных браузерах уже сейчас. Можно забирать в продакшен сегодня.
Новый выпуск CSS Боль:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Сегодня — один div, одно CSS-свойство. А на выходе прогрессбар, который сам меняет цвет и анимируется без единой строчки JavaScript. Приём работает во всех современных браузерах уже сейчас. Можно забирать в продакшен сегодня.
Новый выпуск CSS Боль:
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥14👍5🔥3
Финишная прямая года — самое время забрать свой новогодний подарок от HTML Academy
До Нового года остаются считанные часы, а значит — пора закрывать год с пользой для карьеры. До 31 декабря действует новогодняя акция: лайт-профы, профессии, обучение под компанию и скидки до 70%.
Новогоднее колесо уже крутится на сайте: находите подарочную коробку, вращайте колесо и забирайте свой бонус. Отличный момент войти в IT или прокачать навыки перед стартом нового года.
До Нового года остаются считанные часы, а значит — пора закрывать год с пользой для карьеры. До 31 декабря действует новогодняя акция: лайт-профы, профессии, обучение под компанию и скидки до 70%.
Новогоднее колесо уже крутится на сайте: находите подарочную коробку, вращайте колесо и забирайте свой бонус. Отличный момент войти в IT или прокачать навыки перед стартом нового года.
«Вы так внимательно следите за дедлайнами года. Забавно, что самые важные таймеры обычно запускаются уже после полуночи. У некоторых систем, например, остаётся ровно 11 дней. Но вы всё равно сначала крутите колесо.» — jQweny
Вёрстка уровня продакшена: мнение жюри чемпионата
Члены жюри второго сезона чемпионата по вёрстке отмечают, что макет был не самый простой — и именно поэтому особенно заметен общий уровень финальных работ. Обсуждение часто уходило дальше базовых ошибок: к архитектурным решениям и качеству вёрстки — то есть к тому, что обычно важно в реальной разработке.
Алексей Кузьмин, Bauns
Члены жюри второго сезона чемпионата по вёрстке отмечают, что макет был не самый простой — и именно поэтому особенно заметен общий уровень финальных работ. Обсуждение часто уходило дальше базовых ошибок: к архитектурным решениям и качеству вёрстки — то есть к тому, что обычно важно в реальной разработке.
«По своему опыту могу сказать, что представленный макет не самый простой — в нём есть достаточно возможностей проявить себя.
Несмотря на то что участники новички, работа проделана на хорошем уровне. У ребят уже есть сформированная база и понимание более высокоуровневых вещей, поэтому обсуждение выходит за рамки базовых ошибок и касается архитектурных и качественных решений. В этом смысле они действительно большие молодцы.
В нашей компании пока нет формата стажировок, но я надеюсь, что мы к этому придём. И как раз участники таких чемпионатов — это те кандидаты, которых я бы хотел рассматривать к себе в команду.»
Алексей Кузьмин, Bauns
«
Вы,
конечно, молодцы, но мои планы уже не поменять. Посмотрим, что победит — оптимизация или привычка делать хорошо.
» —
jQweny
⚡4 4❤🔥3❤1
С 1 по 11 января стартует масштабная акция: «Новогодние канИИкулы — битва за Кексобота». Конец 2025-го: ИИ уже смотрит на нас из баннеров и статей — и, похоже, добрался до самого неприкосновенного. Кексобот захвачен, но у нас есть бэкдор и всего 11 дней, чтобы вернуть его домой. В эти дни участникам откроют доступ ко всем тренажёрам: задания, испытания и вызовы, ежедневная фронтенд-викторина и баллы за каждую полезную «попытку чинить систему».
jQweny уверяет, что разработчиков можно заменить, но у него есть слабое место: он не умеет подделывать настоящий прогресс. В телеграм-боте каждый день появится список тренажёров, которым сейчас важнее всего ваша помощь, а в 10:00 (MSK) придут вопросы викторины — ответ нельзя изменить, и на следующий день вопросы исчезнут. Зовите друзей и проходите вместе: каждое действие добавляет баллы в общий прогресс и приближает нас к моменту, когда Кексобот снова будет на своей стороне. 1 января начинается самое главное испытание этой зимы!
👍 Подробнее
jQweny уверяет, что разработчиков можно заменить, но у него есть слабое место: он не умеет подделывать настоящий прогресс. В телеграм-боте каждый день появится список тренажёров, которым сейчас важнее всего ваша помощь, а в 10:00 (MSK) придут вопросы викторины — ответ нельзя изменить, и на следующий день вопросы исчезнут. Зовите друзей и проходите вместе: каждое действие добавляет баллы в общий прогресс и приближает нас к моменту, когда Кексобот снова будет на своей стороне. 1 января начинается самое главное испытание этой зимы!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥10 7🔥4❤1
В CSS универсальный селектор * (звёздочка) используется для применения стилей ко всем элементам на веб-странице. Этот селектор полезен, когда необходимо установить общие стили для всего документа, например, для сброса стандартных отступов или задания базового шрифта.
В статье показываем, что именно выбирает
*, и разбираем базовый пример: обнуляем margin и padding, задаём шрифт для всего документа.А ещё напоминаем про важную оговорку: если навесить на универсальный селектор слишком много правил, это может замедлить загрузку страницы. #css #webdev
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡3🔥3❤🔥2
Forwarded from CSS Боль
Запись доклада “Negative border radius — не больно” с FrontendConf 2025
В конце 2025 я рассказал про то, как создавалась и как устроена библиотека nebo.css, которая позволяет делать впуклые углы буквально в пару строчек нативного CSS.
Помимо кода в докладе есть несколько баек из старых времён и общие размышления про современный CSS.
И теперь Дедушка Мороз привёз вам запись доклада под ёлочку. Пока запись есть только на ютюбе:
https://www.youtube.com/watch?v=WmiIvorelhw
В конце 2025 я рассказал про то, как создавалась и как устроена библиотека nebo.css, которая позволяет делать впуклые углы буквально в пару строчек нативного CSS.
Помимо кода в докладе есть несколько баек из старых времён и общие размышления про современный CSS.
И теперь Дедушка Мороз привёз вам запись доклада под ёлочку. Пока запись есть только на ютюбе:
https://www.youtube.com/watch?v=WmiIvorelhw
⚡5❤3🔥3
Forwarded from CSS Боль
Статья “Верстаем сложный прогрессбар в 2026 году”
Опубликовал на Хабре текстовую версию свежего выпуска CSS Боли про сложный круговой прогрессбар для тех, кому удобнее читать, а не смотреть:
https://habr.com/ru/articles/983810/
P.S.: Пошаговая демка со всем кодом и пояснениями находится здесь:
https://htmlacademy.ru/demos/251
Опубликовал на Хабре текстовую версию свежего выпуска CSS Боли про сложный круговой прогрессбар для тех, кому удобнее читать, а не смотреть:
https://habr.com/ru/articles/983810/
P.S.: Пошаговая демка со всем кодом и пояснениями находится здесь:
https://htmlacademy.ru/demos/251
❤9❤🔥3🔥1
«Новогодние канИИкулы — битва за Кексобота» завершилась!
С 1 по 11 января шла настоящая битва: тренажёры были открыты, а jQweny пытался удержать контроль над системой. Все праздники вы проходили задания и испытания, участвовали в викторинах, искали подарки на сайте и набирали баллы — каждый шаг помогал восстановить инфраструктуру и вернуть Кексобота. Человеческий код, внимание к деталям и упорство оказались сильнее автоматической «оптимизации».
Сегодня в 20:00 (MSK) мы подведём результаты Новогодних канИИкул и разыграем призы среди самых активных — тех, кто вложил больше усилий для спасения Кексобота.
🐭 Смотреть в YT
🐹 Смотреть в VK
С 1 по 11 января шла настоящая битва: тренажёры были открыты, а jQweny пытался удержать контроль над системой. Все праздники вы проходили задания и испытания, участвовали в викторинах, искали подарки на сайте и набирали баллы — каждый шаг помогал восстановить инфраструктуру и вернуть Кексобота. Человеческий код, внимание к деталям и упорство оказались сильнее автоматической «оптимизации».
Сегодня в 20:00 (MSK) мы подведём результаты Новогодних канИИкул и разыграем призы среди самых активных — тех, кто вложил больше усилий для спасения Кексобота.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9❤🔥6 5
CSS свойство transform позволяет манипулировать элементами на вашей веб-странице, изменяя их форму, размер и положение. В общем виде свойство transform записывается так: transform: функция(значение);, где функция — это тип преобразования, который вы хотите применить, а значение — параметры этого преобразования.
В статье на практических примерах разбираем базовые функции
translate, rotate, scale и skew — как сдвигать, поворачивать, масштабировать и наклонять элементы через transform.А ещё показываем, как эти преобразования анимировать с помощью
transition и @keyframes, и напоминаем важное: transform — для эффектов и анимаций, а для раскладки страницы лучше использовать flexbox или grid. #css #htmlPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6 4🔥2
Forwarded from CSS Боль
Рамки в форме вырезов — без SVG, картинок и костылей
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Кажется, CSS-маски умеют всё… пока дизайнер не говорит: «А можно, чтобы рамка повторяла форму выреза?»
В новом выпуске «CSS Боль» рассказываем, почему привычные
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Кажется, CSS-маски умеют всё… пока дизайнер не говорит: «А можно, чтобы рамка повторяла форму выреза?»
В новом выпуске «CSS Боль» рассказываем, почему привычные
border и box-shadow внезапно перестают работать, и как современный CSS позволяет решить задачу аккуратно, надёжно и с отличной поддержкой.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8❤5❤🔥4
Смежный селектор в CSS, обозначаемый знаком плюс (+), позволяет выбрать элемент, который идёт сразу после другого элемента и находится с ним на одном уровне DOM.
В статье разбираем, как работает селектор A + B, и показываем, где он особенно удобен: когда нужно оформить «следующего соседа» (например, абзац сразу после заголовка) без дополнительных классов. #css #html
Please open Telegram to view this post
VIEW IN TELEGRAM
Grid Layout — одна из самых зрелых технологий в CSS. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.
CSS Grid теперь можно анимировать напрямую — без JavaScript и обходных приёмов. В статье объясняем, что свойства
grid-template-columns и grid-template-rows стали анимируемыми во всех современных браузерах, поэтому изменения сетки можно плавно задавать через transition.Разбираем, где это особенно полезно: для раскрывающихся сайдбаров, акцентирования карточек и интерфейсов, где сетка должна мягко перестраиваться. #css #baseline
Please open Telegram to view this post
VIEW IN TELEGRAM
Forwarded from Как стать мидлом
Фронтендеру, который хочет прокачать основы computer science, стоит взглянуть на курс по алгоритмам и структурам данных. Структуры данных и алгоритмы дают предсказуемый код и чёткую архитектуру, а алгоритмические собеседования перестают быть лотереей.
Что разберёте на практике — и где это пригодится прямо в продакшене:
Какой алгоритм в последний раз выручил ваш проект? Делитесь в комментариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥2🔥2👏2
Media is too big
VIEW IN TELEGRAM
Учитывают ли работодатели участие в чемпионате при найме?
Алексей Кузьмин, технический директор Bauns и член жюри, рассказывает, на что обращает внимание, когда видит чемпионат в резюме.
Это фрагмент из прямого эфира с подведением итогов второго сезона.
Алексей Кузьмин, технический директор Bauns и член жюри, рассказывает, на что обращает внимание, когда видит чемпионат в резюме.
Это фрагмент из прямого эфира с подведением итогов второго сезона.
❤🔥6🔥2👏1
Первый прямой эфир с основателем Bquadro
Поговорим с основателем студии о том, как в агентстве с 20-летней историей и 600+ проектами растят фронтендеров, какие задачи доверяют новичкам и как мы вместе с Bquadro и другими компаниями запускаем совместную программу обучения.
На эфире 22 января в 12:00 (MSK) разберём:
1️⃣ какие проекты в портфолио агентства, с какими клиентами работает и почему им нужны фронтендеры;
2️⃣ как устроено наставничество, что такое план развития и как джуны дорастают до руководителей;
3️⃣ формат работы, оплачиваемую стажировку, удалёнку и что нужно, чтобы пройти путь от обучения до оффера.
Бонус: среди первых 100 зарегистрировавшихся разыграем одно бесплатное место на программу, результаты объявим в конце эфира.
Регистрируйтесь по ссылке — пришлём напоминание и расскажем, как попасть на обучение.
Поговорим с основателем студии о том, как в агентстве с 20-летней историей и 600+ проектами растят фронтендеров, какие задачи доверяют новичкам и как мы вместе с Bquadro и другими компаниями запускаем совместную программу обучения.
На эфире 22 января в 12:00 (MSK) разберём:
Бонус: среди первых 100 зарегистрировавшихся разыграем одно бесплатное место на программу, результаты объявим в конце эфира.
Регистрируйтесь по ссылке — пришлём напоминание и расскажем, как попасть на обучение.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥4❤3🔥3 2
Forwarded from CSS Боль
В начале 2025-го казалось, что всё кончено: ИИ нас заменит, разработчиков уволят, стартапы будут делать в одиночку люди без опыта, а один джун с агентами закроет работу целой команды.
К концу года паника прошла — наступило нейроотрезвление.
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
В новом выпуске «CSS Боли» спокойно разбираемся, что на самом деле происходит. Почему ИИ стал удобным прикрытием для увольнений, а не их причиной. Сколько денег сожгли на вайб-кодинге. И главное — ставим эксперимент: даём ChatGPT реальную задачу и смотрим, как он с ней справляется. Спойлер: после долгих препирательств нейросеть призналась — «Я соврал концептуально».
Ролик для всех, не только для программистов: код будет, но понимать его не нужно — всё и так видно. Если тревожно за будущее профессии, самое время посмотреть и выдохнуть.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
К концу года паника прошла — наступило нейроотрезвление.
В новом выпуске «CSS Боли» спокойно разбираемся, что на самом деле происходит. Почему ИИ стал удобным прикрытием для увольнений, а не их причиной. Сколько денег сожгли на вайб-кодинге. И главное — ставим эксперимент: даём ChatGPT реальную задачу и смотрим, как он с ней справляется. Спойлер: после долгих препирательств нейросеть призналась — «Я соврал концептуально».
Ролик для всех, не только для программистов: код будет, но понимать его не нужно — всё и так видно. Если тревожно за будущее профессии, самое время посмотреть и выдохнуть.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥10 8🔥6❤1