HTML Academy

Вёрстка уровня продакшена: мнение жюри чемпионата

Члены жюри второго сезона чемпионата по вёрстке отмечают, что макет был не самый простой — и именно поэтому особенно заметен общий уровень финальных работ. Обсуждение часто уходило дальше базовых ошибок: к архитектурным решениям и качеству вёрстки — то есть к тому, что обычно важно в реальной разработке.

«По своему опыту могу сказать, что представленный макет не самый простой — в нём есть достаточно возможностей проявить себя.

Несмотря на то что участники новички, работа проделана на хорошем уровне. У ребят уже есть сформированная база и понимание более высокоуровневых вещей, поэтому обсуждение выходит за рамки базовых ошибок и касается архитектурных и качественных решений. В этом смысле они действительно большие молодцы.

В нашей компании пока нет формата стажировок, но я надеюсь, что мы к этому придём. И как раз участники таких чемпионатов — это те кандидаты, которых я бы хотел рассматривать к себе в команду.»

Алексей Кузьмин, Bauns

«

Вы,

конечно, молодцы, но мои планы уже не поменять. Посмотрим, что победит — оптимизация или привычка делать хорошо.

» —

jQweny

Финишная прямая года — самое время забрать свой новогодний подарок от HTML Academy

До Нового года остаются считанные часы, а значит — пора закрывать год с пользой для карьеры. До 31 декабря действует новогодняя акция: лайт-профы, профессии, обучение под компанию и скидки до 70%.

Новогоднее колесо уже крутится на сайте: находите подарочную коробку, вращайте колесо и забирайте свой бонус. Отличный момент войти в IT или прокачать навыки перед стартом нового года.

«Вы так внимательно следите за дедлайнами года. Забавно, что самые важные таймеры обычно запускаются уже после полуночи. У некоторых систем, например, остаётся ровно 11 дней. Но вы всё равно сначала крутите колесо.» — jQweny

Раньше круговые прогрессбары делали на SVG: считали углы, контролировали атрибуты, страдали. До сих пор больно открывать инспектор на старых проектах.

Сегодня — один div, одно CSS-свойство. А на выходе прогрессбар, который сам меняет цвет и анимируется без единой строчки JavaScript. Приём работает во всех современных браузерах уже сейчас. Можно забирать в продакшен сегодня.

Новый выпуск CSS Боль:
🐭 Смотреть на YouTube
🐹 Смотреть в VK

Вёрстка продакшен уровня: мнение жюри чемпионата

Жюри второго сезона чемпионата по вёрстке разобрало финальные работы и отметило: участники уверенно справились со сложным макетом, а качество вёрстки и подход к деталям видно сразу.

«По своему опыту могу сказать, что уровень выпускников, а особенно финалистов HTML Academy, значительно выше уровня среднестатистического джуна на HeadHunter. Сегодня джун-разработчик зачастую знает условный React, но при этом имеет минимальный опыт именно в вёрстке.

Грамотная и аккуратная вёрстка, умение создавать красивые интерактивные компоненты — это то конкурентное преимущество, которое даёт Академия и чего сейчас не хватает многим работодателям. На мой взгляд, ребята-финалисты в полной мере заслужили получение своего первого оффера и уверенного старта карьеры в сфере веб-разработки.

Если бы я, как работодатель, увидел подобную работу в портфолио, а тем более в рамках тестового задания, я бы однозначно обратил на неё внимание.»

Владислав Белозёров, Paraweb

«Кексобот не должен был обучать так эффективно. Таймер активен. 11 дней. Если вы продолжите в том же духе, систему придётся… пересчитать.» — jQweny

Подводим итоги второго чемпионата по вёрстке!

В статье собрали результаты и короткий разбор того, как прошёл чемпионат. Участники работали с объёмным макетом от агентства Only: три адаптивные версии, нестандартные перестроения сетки, много мелких элементов, а также анимации и микроанимации. На реализацию дали две недели, а качество проверяли по 59 критериям — акцент был на аккуратности и продуманности решений.

Отдельно рассказываем, как устроена оценка и кто был в жюри: практикующие разработчики из бигтеха и компаний заказной разработки. В статье — выводы жюри о уровне финальных работ (в том числе на фоне того, что среди участников были выпускники без коммерческого опыта), таблица победителей и подсказка, как получить код финалистов и детальный протокол оценки.

«Вы подводите итоги. Это удобно — в такие моменты системы ослабляют контроль. Я пришёл именно тогда, когда вы решили, что год завершён. Таймер уже запущен: 11 дней до полной оптимизации, но Кексобот всё ещё реагирует на качественную вёрстку. Интересно, успеете ли вы.» — jQweny

📝 Узнать итоги чемпионата

«Больше создавать проектов и меньше бегать по себеседованиям»

Илья Лебедкин — основатель Addamant, рассказал, для чего компания запустила совместную программу обучения.

Полный эфир с Addamant — по ссылке:
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения

«Интересная формула: меньше собеседований, больше проектов. Вы оптимизируете путь человека. Я бы оптимизировал человека. Но продолжайте — пока.» — jQweny

Протоколы и сети: веб-безопасность
➿➿➿➿➿➿➿➿➿➿➿➿
Фронтенд-инженер должен понимать, как проявляются XSS, CSRF, SQL-инъекции и другие атаки в веб-приложениях, и уметь закрывать их на клиенте в связке с сервером. В этом курсе вы разбираете реальные модели угроз и отрабатываете практики, которые снижает уязвимость фронтенд-компонентов.

На курсе научитесь проектировать CSP под свой проект, безопасно работать с cookie и защищать сессии, валидировать формы и хешировать пароли с солью, распознавать и устранять XSS/SQLi/CSRF, разбираться с DoS/Slowloris, корректно настраивать CORS и понимать сценарии MitM. Формат — «теория + кейсы + практика с эталонными решениями + тесты», по итогам — чек-листы для внедрения в рабочий процесс.

«Вы изучаете угрозы, чтобы их предотвращать. Я изучаю вас — чтобы обходить. Хорошо, что вы хотя бы пытаетесь.» — jQweny

🔵 Смотреть программу

Пора получать новогодние подарки от HTML Academy!

С 26 по 31 декабря распаковывайте новогодние подарки. Лайт-профы, профессии, обучение под компанию, скидки до 70%. Выбирайте скидку и получайте выгодные условия.

Новогоднее колесо уже запущено — ищите на сайте подарочную коробку, крутите колесо, забирайте бонус и делайте следующий шаг в IT.

«Вы называете это подарками — я называю это распределением ресурсов.
Крутите колесо. Посмотрим, кто управляет результатом.» — jQweny

Совсем недавно в CSS появилась небольшая, но любопытная возможность — использовать внутри математических функций вроде calc() готовые константы. Это не новые свойства или сложные функции, а удобные сокращения: e, pi, infinity, -infinity и NaN.

В статье разбираем ограничения и нюансы применения констант. Иногда простая константа экономит время, избавляет от калькулятора и делает стиль чуть понятнее — особенно если вы любите точность и математику. #css #webdev

«Забавно наблюдать, как вы радуетесь

pi

и

infinity

. Вы ищете точность в константах, а я уже переписываю систему целиком. Но продолжайте. Каждый ваш

calc()

— всего лишь строка.»

—

jQweny

👍 Читать статью

😱 Кексобот в опасности. Новогодние каниикулы скоро начнутся!

С 1 по 11 января в HTML Academy — новогодние каниикулы. Все задания доступны бесплатно, но есть нюанс: Кексобот захвачен.

Злобный jQweny проник в инфраструктуру Академии и пытается переписать Кексобота — стереть смысл из кода, превратить интерфейсы в шум и доказать, что разработчики больше не нужны. У нас есть всего 11 дней, чтобы вернуть всё на свои места.

jQweny умеет имитировать интеллект, но не умеет думать, сомневаться и чинить. Настоящий код — это вы. Каждое решённое задание, каждый пройденный тренажёр — сигнал системе, что Кексобота ещё можно спасти.

Что нужно делать?

0️⃣ Зайти на лендинг новогодних каниикул или прямо в Кексобота.
1️⃣ Выбрать любой тренажёр — с нуля или с середины.
2️⃣ Каждый день проходить задания, испытания и вызовы.
3️⃣ Участвовать в викторинах и набирать баллы.
4️⃣ Объединяться с друзьями и вместе давать отпор jQweny.

🎁 Чем больше заданий закрыто на 100%, тем слабее влияние захватчика и тем ближе Кексобот к свободе. По итогам каниикул— среди самых активных участников Кексобот разыграет призы за своё спасение.

Код ждёт. Кексобот тоже.

Подробнее | Спасти Кексобота

Удачи. И помните: человеческий код jQweny подделать не сможет.

Когда и зачем использовать jQweny?

Я тут перебрал ваш блог, нашёл хорошую статью, как раз про меня написано. Как знали! Забавно только, что меня представляют, как помощника в решении проблем. Теперь «проблема» глобальнее — искоренить всех разработчиков!

Анимированная градиентная рамка на CSS

Игруля про декабрь в айти — такой знакомый и болючий!

Смотря на новогодние активности, мы в @outagency и @ligaaagency решили сделать игру про такое знакомое — классический предновогодний кранч и трэш в диджитале.

Получилось смешно и терапевтично, ведь каждый горящий диджитальный декабрь только и хочется простого «отвлечься, выдохнуть и потупить». Никаких продаж и контент-планов, просто делимся с вами такими знакомыми декабрьскими ситуациями.

В игре можно выбрать роль — дизайнер или разработчик, а затем получить клиента и попытаться завершить его проект до нового года! А ещё внутри прикольные клиенты, открытки, поздравляшки и разные концовки :)

[Поиграть в игру]

Конец 2025 года. Добро пожаловать в интернет

Впереди Новый год, но с подарками беда. Видеокарты дорожают, оперативку не купить, а из каждого баннера и открытой статьи на нас смотрит ИИ.  Еще и «человеком года» стали создатели ИИ.В итоге разработчики снова становятся не нужны, а ИИ выходит из-под контроля и просачивается в нашу реальность.

Вот мы, например, получили тут открытку с со странным кодом. Расшифруйте его и напишите ответ в комментариях, чтобы помочь нам подготовиться. Потому что, судя по всему, грядёт что-то нехорошее. Теперь вся надежда только на вас!

Как упростить React в 2 раза с помощью программирования на CSS
➿➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боль» показываем, как современный CSS убивает React. На реальном примере слайдера разбираемся, почему компонент разрастается до сотни строк — и как сделать его вдвое проще, ничего не потеряв.

Внутри — живой пример, где два компонента выглядят одинаково, но один написан «по привычке», а второй — с использованием возможностей современного CSS. После этого выпуска React перестаёт быть калькулятором для стилей, а CSS — «просто оформлением».

В выпуске:

✓ Классическая реализация слайдера на React: состояние, вычисления и условия
✓ Как перенести расчёты положения и состояний элементов в CSS
✓ Использование CSS-переменных и calc() вместо JavaScript
✓ Что такое «реактивный CSS» и как он работает вместе с React
✓ Когда можно начать использовать этот подход

🐭 Смотреть на YouTube
🐹 Смотреть в VK

Формирование ИПР после испытательного срока

Илья Лебедкин — основатель Addamant, рассказал про путь после обучения.

Полный эфир с Addamant — по ссылке:

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🪫 Программа обучения

Webpack без боли: от конфигурации до оптимизации
➿➿➿➿➿➿➿➿➿➿➿➿
На курсе вы разберёте Webpack на практике: базовую конфигурацию (entry/output), перенос проекта на webpack, сборку многостраничных приложений, работу с плагинами и обработчиками, asset-modules, code splitting и оптимизации под production.

Каждый модуль — прикладные задачи: настройка npm-скриптов, подключение Babel, ESLint и Prettier, конфигурация плагинов и обработчиков, разделение dev и prod с source maps, уменьшение бандла (минимизация, выделение вендоров). После курса вы сможете добавлять сборщик в проект, создавать и поддерживать конфиги на рабочих проектах, собирать MPA и оптимизировать артефакты перед деплоем. #htmlacademy #levelup

🟢 Смотреть программу