Forwarded from Как стать мидлом
Мастер анимаций: CSS и JavaScript-анимации
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Анимация в интерфейсе — инструмент управления вниманием и смыслом. На курсе вы научитесь настраивать CSS-переходы (
Практика — через задания и пошаговые демонстрации. Отдельный блок — производительность и отладка: линейные и покадровые анимации, инструменты DevTools, оптимизация и учёт пользовательских настроек через медиазапросы
⏺ Смотреть программу
Анимация в интерфейсе — инструмент управления вниманием и смыслом. На курсе вы научитесь настраивать CSS-переходы (
transition, transition-timing-function), писать @keyframes и использовать группу свойств animation, связывать эффекты с взаимодействием (клик, скролл), собирать типовые сценарии — открытие и закрытие меню, бесконечный слайдер, табы и аккордеон — а также применять 2D/3D-трансформации и параллакс.Практика — через задания и пошаговые демонстрации. Отдельный блок — производительность и отладка: линейные и покадровые анимации, инструменты DevTools, оптимизация и учёт пользовательских настроек через медиазапросы
prefers-reduced-motion и update. На выходе — умение делать анимации, которые помогают интерфейсу и стабильно работают на разных устройствах. #css #jsPlease 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
HTML Academy и Only запускают второй поток обучения под работодателя. Небольшая группа, практические задачи и менторская поддержка — программа синхронизирована с процессами компании, а выпускники могут попасть на стажировку.
Приходите на эфир 9 октября в 12:00 (MSK), чтобы:
Бонус: разыграем одно бесплатное место на программу среди первых 100 зарегистрировавшихся. Победителя объявим в конце трансляции.
Эфир онлайн, участие бесплатное. Регистрируйтесь по ссылке — пришлём напоминание перед началом и расскажем, как попасть на обучение.
https://htmlacademy.ru/events/live-only-2025
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10 3❤🔥2❤1
Новый выпуск «CSS Боль»!
Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём, который открывает нам путь в новую эру CSS.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём, который открывает нам путь в новую эру CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6❤4 2⚡1❤🔥1
HTML Academy
Новый выпуск «CSS Боль»! Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём,…
This media is not supported in your browser
VIEW IN TELEGRAM
❤🔥9❤3 1
Как защитить VPS от взлома: 10 простых правил
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Безопасность VPS — не про «поставил пароль и забыл», а про системный подход. В статье собраны десять базовых, но важных мер, которые снижают риск распространённых атак. Полезно и фронтендерам: если вы держите на VPS личные проекты, демо или тестовые стенды — этот минимум стоит знать.
Внутри — минимум для базовой защиты: вход по ключам и запрет паролей, настройка ufw и список допущенных пользователей, fail2ban против брутфорса, автоматические обновления и регулярные бэкапы. Плюс — как следить за логами; бонусом — 2FA для SSH. #vps #security
🔵 Читать статью
Безопасность 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-агентстве.
🪻 Зарегистрироваться на эфир
И главное — среди первых 100 регистраций на эфир разыграем одно бесплатное место на совместную программу.
Как участвовать:
В эфире обсудим программу второго потока: почему Only делает ставку на сильную вёрстку и JavaScript, как проходят стажировки в команде и какие качества помогают новичкам закрепиться в digital-агентстве.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5 3⚡2❤🔥1👍1
HTML Academy
Вместе с Only запускаем второй поток совместной программы обучения
Сегодня в 12:00 (MSK) — прямой эфир с digital-агентством Only. Расскажем о роли стажёра в команде, как проходит отбор, что изменилось в компании и какие ожидания к новичкам на старте.
В финале разыграем бесплатное место на программу!
https://htmlacademy.ru/events/live-only-2025
Сегодня в 12:00 (MSK) — прямой эфир с digital-агентством Only. Расскажем о роли стажёра в команде, как проходит отбор, что изменилось в компании и какие ожидания к новичкам на старте.
В финале разыграем бесплатное место на программу!
https://htmlacademy.ru/events/live-only-2025
Мы перезапускаем самую человечную рассылку для айтишников.
Каждую пятницу в вашем инбоксе — свежие материалы, полезные ссылки и немного нашего фирменного юмора.
Никакого спама, никакого AI — только живые тексты, написанные руками.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9👍4❤🔥2
Как сделать свой сайт на VPS. Самая простая инструкция
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Женя, похоже, провалился во временную яму: вокруг — двухтысячные и один-единственный веб-сервер — Apache. Чтобы выбраться, он поднял самый простой сервер и записал пошаговую памятку. #vps #linux
Кажется, материал сознательно ограничен базовой настройкой. Домен, SSL, Nginx, а также связки с Node.js и PHP — это логичные следующие шаги.
🌼 Читать статью
Женя, похоже, провалился во временную яму: вокруг — двухтысячные и один-единственный веб-сервер — Apache. Чтобы выбраться, он поднял самый простой сервер и записал пошаговую памятку. #vps #linux
Кажется, материал сознательно ограничен базовой настройкой. Домен, SSL, Nginx, а также связки с Node.js и PHP — это логичные следующие шаги.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤9⚡2❤🔥1🔥1
Forwarded from Как стать мидлом
Мастер анимаций: SVG-анимации
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
SVG — стандарт векторной графики в вебе. На курсе мы системно разбираем анимацию векторных изображений: CSS, SMIL и JavaScript. Практикуем GSAP, Anime.js, Snap.svg и KUTE.js. Двигаемся от transform к анимации контуров и траекторий, морфингу, маскам, фильтрам, паттернам и анимации графиков.
После курса вы умеете готовить и оптимизировать SVG, выбирать подходящую технику, собирать таймлайны, анимировать текст, иконки, главные экраны, делать обводку и закрашивание, морфить пути, анимировать диаграммы, отлаживать и ускорять анимации. Понимаете границы SVG и когда переходить к Canvas и D3.js. #htmlacademy #levelup
🌸 Смотреть программу
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👍3 2👏1
Media is too big
VIEW IN TELEGRAM
Чемпионат по вёрстке — мнение эксперта.
Артём Леванов, выпускник HTML Academy, а теперь Frontend Lead в WebRise, рассказал свои впечатления об уровне участников чемпионата.
#чемпионат #фронтенд
Артём Леванов, выпускник HTML Academy, а теперь Frontend Lead в WebRise, рассказал свои впечатления об уровне участников чемпионата.
#чемпионат #фронтенд
👍5🔥4
Планы на выходные: посмотреть вчерашний эфир с Only
Час разговора с HR-лидом и тимлидом фронтенда о том, как джунам попасть в digital-агентство.
Главный инсайт: навык коммуникации может быть важнее умения программировать.
Плюс цифры про зарплаты, статистику найма и реальные советы для собеседований.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🔄 Программа обучения
Час разговора с HR-лидом и тимлидом фронтенда о том, как джунам попасть в digital-агентство.
Главный инсайт: навык коммуникации может быть важнее умения программировать.
Плюс цифры про зарплаты, статистику найма и реальные советы для собеседований.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8⚡2❤🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣16🤯2
FrontendConf 2025 × HTML Academy
Уже на следующей неделе на FrontendConf — крупнейшей профессиональной конференции фронтенд-разработчиков в России — выступит Александр Першин, сооснователь HTML Academy.
0️⃣ FrontendConf 2025
1️⃣ 20–21 октября
2️⃣ Кластер «Ломоносов», Москва
Подробнее о докладе → https://frontendconf.ru/moscow/2025/abstracts/15798
P.S. —говорят, что если пройти тест из двух вопросов на сайте конференции, то можно получить 10% скидку на конференцию.
Уже на следующей неделе на FrontendConf — крупнейшей профессиональной конференции фронтенд-разработчиков в России — выступит Александр Першин, сооснователь HTML Academy.
Во время доклада соберём мини-утилиту для «обратного радиуса» на чистом CSS. В процессе разберём линейные и радиальные градиенты, маски, CSS-переменные и магию calc().
Подробнее о докладе → https://frontendconf.ru/moscow/2025/abstracts/15798
P.S. —
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8⚡3❤🔥1👏1
Как сделать анимированную светящуюся рамку без JavaScript?
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
Правильно — на
Новый выпуск «CSS Боль» про конические градиенты:
✓ От базового синтаксиса до декоративных эффектов
✓ Как работают color stops и параметры
✓ Почему между первым и последним цветом резкий переход
✓ Проверяем всё по спецификации W3C
Внутри — интерактивная демка, где можно поиграться с каждым примером самостоятельно.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Правильно — на
conic-gradient(). Конические градиенты умеют больше, чем кажется на первый взгляд.Новый выпуск «CSS Боль» про конические градиенты:
✓ От базового синтаксиса до декоративных эффектов
✓ Как работают color stops и параметры
from и at✓ Почему между первым и последним цветом резкий переход
✓ Проверяем всё по спецификации W3C
Внутри — интерактивная демка, где можно поиграться с каждым примером самостоятельно.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤🔥6⚡4🔥3
<input> прошёл путь от простых полей до умных типов, которые помогают и пользователю, и браузеру: упрощают ввод, уменьшают ошибки и улучшают доступность.В HTML очень много типов:
email, tel, url, number, range, date, time, color, password, search, file, hidden и другие. На примерах статья показывает, как правильный type даёт семантику и встроенную валидацию: email проверяет формат адреса, tel на смартфонах вызывает цифровую клавиатуру, url ожидает корректный адрес. Это ускоряет ввод и снижает количество ошибок. #html #allyЧитать статью
❤🔥14🔥5⚡2
Как узнать, что юзер кликнул. События мыши в JS
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
В статье разбираем ключевые события:
🔶 Читать статью
Мышь — один из самых привычных способов взаимодействия с веб-страницей, и JavaScript даёт разработчику базовые инструменты, чтобы реагировать на действия пользователя. Мышиные события позволяют «слушать» клики и движения, создавая динамичные и удобные интерфейсы.
В статье разбираем ключевые события:
click, dblclick, mousedown, mouseup, mousemove, mouseenter, mouseleave и contextmenu. На примерах показываем, как навешивать обработчики, менять состояние интерфейса при нажатии и отслеживать координаты курсора. В конце даём направление для практики: как подступиться к простому перетаскиванию на связке mousedown → mousemove → mouseup. #js #eventsPlease open Telegram to view this post
VIEW IN TELEGRAM
❤🔥5🔥5⚡1