HTML Academy
9.52K subscribers
5.55K photos
190 videos
4 files
3.5K links
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

Вопросы по обучению @htmlacademy_sales

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Пропустили эфир Контур × HTML Academy? Запись уже доступна — можно спокойно посмотреть на выходных.

Вчера поговорили с Евгением Суанка (менеджер стажировок) и Аленой Малко (ведущий инженер-программист) о том, как джуну пройти отбор и что ждёт на стажировке.

Что важно из выпуска:

1️⃣ В Контуре открыто говорят: стажировки помогают понять культуру и быстрее влиться; многие начинают карьеру внутри — так адаптация идёт лучше. Компания часто нанимает через обучающие программы.
2️⃣ На интервью ценят честность, способность быстро учиться и проактивность.
3️⃣ Для новичка во фронтенде важна уверенная база: вёрстка + JavaScript и TypeScript.
4️⃣ Разбираем, как устроены видеовизитка, собеседование и стажировка в Контуре.

Сохраните и посмотрите на выходных: на скорости ×2 это ~30 минут — и у вас сложится честная картина, что ждёт фронтенд-джуна в продуктовой команде.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🔵 Программа обучения
Please open Telegram to view this post
VIEW IN TELEGRAM
⚡5🔥5❤1🤣1
Ни недели без выпусков «CSS Боль»!

В Chrome появилась свежая фича — CSS if(). Многие уже поспешили назвать это революцией и превращением CSS в язык программирования. Но всё ли так радужно?

В ролике:
1️⃣ что реально умеет if() — стилевые запросы, медиа и supports;
2️⃣ ограничения, из-за которых это пока только синтаксический сахар;
3️⃣ сравнение с классическими директивами;
4️⃣ и главное — куда всё это может развиться дальше.

Если интересно понять, как работает CSS if() на практике и стоит ли с нетерпением дожидаться (нет) полной поддержки — включайте выпуск!

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8⚡3❤2👍1
В CSS цвет можно задавать не только через RGB, HEX или HSL, но и именованными ключевыми словами. Такие названия, как red, limegreen, blue или rebeccapurple, делают стили понятнее и помогают быстрее накидывать оформление.


Имена цветов есть в CSS с первой спецификации и во многом выросли из палитры X11. Сегодня стандартизировано 147 именованных цветов, и их поддерживают все современные браузеры. Это удобный инструмент для прототипов и учебных проектов: он дополняет числовые форматы и CSS-переменные, но не заменяет их — особенно если важны точные бренд-оттенки и прозрачность.

🌟 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Магия sibling-count() в действии!

Создаём динамический индикатор загрузки без единой строчки JavaScript.
#css #frontend
🔥10👍4
Операторы &&= и ||= — короткая запись для проверки и присваивания в JavaScript. Они помогают убирать лишние if и делают код компактнее — уже поддерживаются во всех современных браузерах.


В статье на простых примерах разбираем, как &&= присваивает новое значение только когда выражение слева истинно, а ||= — когда слева ложное. Это удобно для деактивации флагов и установки значений по умолчанию без дублирования кода. Например, вместо if (a) a = b; — a &&= b;, а для «дефолта» — username ||= 'Гость'. #js #baseline

🌸 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥6🔥4⚡2
Запустился State of JavaScript 2025 — ежегодный опрос про то, чем мы пользуемся в JavaScript: фреймворки, инструменты и языковые фичи. Он помогает увидеть, что закрепляется в экосистеме, а что остаётся нишей. В прошлых выпусках, например, был заметен рост Vite и Astro. #js #stateofjs

Это открытый опрос: ~15–20 минут, вопросы можно пропускать. Чем больше ответов от нашего комьюнити, тем шире и полезнее будет картина. Мнение новичков тоже важно — даже если только начинаете, пройдите опрос.

Ссылку оставляем тут.

Опрос открыт до 1 ноября.
8⚡3❤1❤‍🔥1👏1
Это встроенная возможность CSS, которая помогает выбрать элементы на странице по их порядку внутри какого-нибудь контейнера, например, списка или блока.

Этот псевдокласс позволяет выбирать элементы не только по чётности (even, odd) или конкретному порядковому номеру, но и по формулам: 3n, n+5, -n+10. С их помощью можно стилизовать каждый третий элемент, выделить диапазон — например, с пятого до десятого, и даже комбинировать условия, чтобы точно выбрать нужные позиции в списке или блоке. #css

Визуализация в статье помогает увидеть, как именно формулы влияют на выборку.

Эта же визуализация доступна в формате коротких клипов:
🐭 Смотрите в YouTube
🐰 Смотрите в TikTok
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6⚡1❤‍🔥1
Мастер анимаций: CSS и JavaScript-анимации
➿➿➿➿➿➿➿➿➿➿➿➿
Анимация в интерфейсе — инструмент управления вниманием и смыслом. На курсе вы научитесь настраивать CSS-переходы (transition, transition-timing-function), писать @keyframes и использовать группу свойств animation, связывать эффекты с взаимодействием (клик, скролл), собирать типовые сценарии — открытие и закрытие меню, бесконечный слайдер, табы и аккордеон — а также применять 2D/3D-трансформации и параллакс.

Практика — через задания и пошаговые демонстрации. Отдельный блок — производительность и отладка: линейные и покадровые анимации, инструменты DevTools, оптимизация и учёт пользовательских настроек через медиазапросы prefers-reduced-motion и update. На выходе — умение делать анимации, которые помогают интерфейсу и стабильно работают на разных устройствах. #css #js

⏺ Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3❤‍🔥2❤2⚡1
Media is too big
VIEW IN TELEGRAM
Совсем недавно мы проводили Чемпионат по вёрстке — 45 участников, 13 дней.

Что сказали эксперты про уровень работ:
✅ «Работы достойны продакшена»
✅ «Это уже уровень джунов, а не интернов»
✅ «Макет непростой, но ребята справились круто»
✅ «Очень понравилось внимание к деталям и креативные решения»

Итог: все финалисты подтвердили, что уже готовы к реальным проектам. И, да, чемпионат точно стоит повторить!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥21👍3
👍 Прямой эфир с HRBP и тимлидом фронтенда компании Only

HTML Academy и Only запускают второй поток обучения под работодателя. Небольшая группа, практические задачи и менторская поддержка — программа синхронизирована с процессами компании, а выпускники могут попасть на стажировку.

Приходите на эфир 9 октября в 12:00 (MSK), чтобы:
3️⃣ Познакомиться с Only: как живёт команда и как устроена работа фронтендеров.
2️⃣ Разобрать рабочие процессы: стек, ревью кода, обратная связь.
1️⃣ Понять, что ждёт выпускников на стажировке: формат, продолжительность и оплата — обсудим в эфире.

Бонус: разыграем одно бесплатное место на программу среди первых 100 зарегистрировавшихся. Победителя объявим в конце трансляции.

Эфир онлайн, участие бесплатное. Регистрируйтесь по ссылке — пришлём напоминание перед началом и расскажем, как попасть на обучение.

https://htmlacademy.ru/events/live-only-2025
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥103❤‍🔥2❤1
Новый выпуск «CSS Боль»!

Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём, который открывает нам путь в новую эру CSS.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤42⚡1❤‍🔥1
Как защитить VPS от взлома: 10 простых правил
➿➿➿➿➿➿➿➿➿➿➿➿
Безопасность VPS — не про «поставил пароль и забыл», а про системный подход. В статье собраны десять базовых, но важных мер, которые снижают риск распространённых атак. Полезно и фронтендерам: если вы держите на VPS личные проекты, демо или тестовые стенды — этот минимум стоит знать.

Внутри — минимум для базовой защиты: вход по ключам и запрет паролей, настройка ufw и список допущенных пользователей, fail2ban против брутфорса, автоматические обновления и регулярные бэкапы. Плюс — как следить за логами; бонусом — 2FA для SSH. #vps #security

🔵 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7⚡4❤3❤‍🔥1👍1
Напоминаем: завтра в 12:00 (MSK) — прямой эфир HTML Academy × Only о втором потоке программы «Обучение под работодателя».
➿➿➿➿➿➿➿➿➿➿➿➿

И главное — среди первых 100 регистраций на эфир разыграем одно бесплатное место на совместную программу.

Как участвовать:
1️⃣ Зарегистрируйтесь по ссылке ниже.
2️⃣ Подключитесь к трансляции — победителя объявим в финале трансляции.

В эфире обсудим программу второго потока: почему Only делает ставку на сильную вёрстку и JavaScript, как проходят стажировки в команде и какие качества помогают новичкам закрепиться в digital-агентстве.

🪻 Зарегистрироваться на эфир
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥53⚡2❤‍🔥1👍1
HTML Academy
👍 Прямой эфир с HRBP и тимлидом фронтенда компании Only HTML Academy и Only запускают второй поток обучения под работодателя. Небольшая группа, практические задачи и менторская поддержка — программа синхронизирована с процессами компании, а выпускники могут…
Вместе с Only запускаем второй поток совместной программы обучения

Сегодня в 12:00 (MSK) — прямой эфир с digital-агентством Only. Расскажем о роли стажёра в команде, как проходит отбор, что изменилось в компании и какие ожидания к новичкам на старте.

В финале разыграем бесплатное место на программу!

https://htmlacademy.ru/events/live-only-2025
8👍6⚡1
👍 Редакторская рассылка снова с вами!

Мы перезапускаем самую человечную рассылку для айтишников.

Каждую пятницу в вашем инбоксе — свежие материалы, полезные ссылки и немного нашего фирменного юмора.

Никакого спама, никакого AI — только живые тексты, написанные руками.

🔺 Подписаться
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍4❤‍🔥2
Как сделать свой сайт на VPS. Самая простая инструкция
➿➿➿➿➿➿➿➿➿➿➿➿
Женя, похоже, провалился во временную яму: вокруг — двухтысячные и один-единственный веб-сервер — Apache. Чтобы выбраться, он поднял самый простой сервер и записал пошаговую памятку. #vps #linux

Кажется, материал сознательно ограничен базовой настройкой. Домен, SSL, Nginx, а также связки с Node.js и PHP — это логичные следующие шаги.

🌼 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9⚡2❤‍🔥1🔥1
Мастер анимаций: SVG-анимации
➿➿➿➿➿➿➿➿➿➿➿➿
SVG — стандарт векторной графики в вебе. На курсе мы системно разбираем анимацию векторных изображений: CSS, SMIL и JavaScript. Практикуем GSAP, Anime.js, Snap.svg и KUTE.js. Двигаемся от transform к анимации контуров и траекторий, морфингу, маскам, фильтрам, паттернам и анимации графиков.

После курса вы умеете готовить и оптимизировать SVG, выбирать подходящую технику, собирать таймлайны, анимировать текст, иконки, главные экраны, делать обводку и закрашивание, морфить пути, анимировать диаграммы, отлаживать и ускорять анимации. Понимаете границы SVG и когда переходить к Canvas и D3.js. #htmlacademy #levelup

🌸 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥3👍32👏1