Новый выпуск «CSS Боль»!
Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём, который открывает нам путь в новую эру CSS.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём, который открывает нам путь в новую эру CSS.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤4
HTML Academy
Новый выпуск «CSS Боль»! Мы находимся на пороге нового дивного мира, в котором задавать условия отображения стилей можно прямо в СSS! Для этого не хватало удобного механизма сравнения CSS-переменных. Но он появился! Мы разберём удивительно простой приём,…
This media is not supported in your browser
VIEW IN TELEGRAM
❤🔥9❤2
Как защитить 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⚡3❤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
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
❤8👍3❤🔥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❤🔥1⚡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👍2
Media is too big
VIEW IN TELEGRAM
Чемпионат по вёрстке — мнение эксперта.
Артём Леванов, выпускник HTML Academy, а теперь Frontend Lead в WebRise, рассказал свои впечатления об уровне участников чемпионата.
#чемпионат #фронтенд
Артём Леванов, выпускник HTML Academy, а теперь Frontend Lead в WebRise, рассказал свои впечатления об уровне участников чемпионата.
#чемпионат #фронтенд
🔥4👍3
Планы на выходные: посмотреть вчерашний эфир с Only
Час разговора с HR-лидом и тимлидом фронтенда о том, как джунам попасть в digital-агентство.
Главный инсайт: навык коммуникации может быть важнее умения программировать.
Плюс цифры про зарплаты, статистику найма и реальные советы для собеседований.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🔄 Программа обучения
Час разговора с HR-лидом и тимлидом фронтенда о том, как джунам попасть в digital-агентство.
Главный инсайт: навык коммуникации может быть важнее умения программировать.
Плюс цифры про зарплаты, статистику найма и реальные советы для собеседований.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8⚡1❤🔥1
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣15🤯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⚡2❤🔥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⚡3🔥3
<input> прошёл путь от простых полей до умных типов, которые помогают и пользователю, и браузеру: упрощают ввод, уменьшают ошибки и улучшают доступность.В HTML очень много типов:
email, tel, url, number, range, date, time, color, password, search, file, hidden и другие. На примерах статья показывает, как правильный type даёт семантику и встроенную валидацию: email проверяет формат адреса, tel на смартфонах вызывает цифровую клавиатуру, url ожидает корректный адрес. Это ускоряет ввод и снижает количество ошибок. #html #allyЧитать статью
❤🔥13🔥4⚡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🔥3⚡1
Красим посещённые ссылки: псевдоклассы :link, :visited и :any-link
➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿ ➿
В статье разбираем три псевдокласса:
🌟 Читать статью
Когда вы создаёте веб-страницу, ссылки — один из ключевых элементов интерфейса. Они помогают пользователям перемещаться по сайту или переходить на внешние ресурсы.
В статье разбираем три псевдокласса:
:link для непосещённых ссылок, :visited для уже открытых пользователем и современный :any-link, охватывающий оба состояния. Покажем безопасные приёмы стилизации и разберём порядок правил: от общего (:any-link) к более специфичным (:link, :visited), чтобы стили не конфликтовали. #html #cssPlease open Telegram to view this post
VIEW IN TELEGRAM
Это взгляд изнутри финала чемпионата по вёрстке. Автор — Артём Леванов, Front Lead в WebRise, партнёре-работодателе HTML Academy: он показывает, как жюри оценивало работы финалистов в «боевых» критериях — от удобства и адаптивности до анимаций и аккуратной работы с SVG. Это разбор конкретных решений, которые повышали или снижали оценку, и почему один лишь pixel-perfect без «живости» интерфейса уже не впечатляет.
Хочу выразить благодарность HTML Academy за доверие и возможность оценить сильные проекты, которые уже приближаются к уровню middle-разработчика. Это был очень позитивный и вдохновляющий опыт. Важно: финалисты не просто следуют макету, а предлагают собственные — порой более удачные — решения и уверенно идут в ногу с современными подходами к вёрстке.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5❤4❤🔥3