TGViewer
Channel Public Channel
HTML Academy

HTML Academy

@htmlacademy

Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Open in Telegram
Subscribers
9.54K
Photos
5.6K
Videos
190
Links
3.5K

Showing posts older than #8446 · Back to latest

Older Posts 18 shown
Post #8445 1.44K
Начинающие верстальщики в своих первых проектах часто задают высоту элементам, чтобы попасть в размеры чётко по макету. Давайте разберёмся, а действительно ли высота везде нужна?


Вёрстка макета часто начинается с попытки «задать высоту» элементам — но CSS-свойство height умеет гораздо больше, чем просто фиксировать размер. В статье подробно разбираемся, как работает высота: при указании точного значения блок сохраняет заданный размер независимо от содержимого, а когда применяется относительная запись в процентах, высота рассчитывается от родительского элемента. Это позволяет управлять вертикальным пространством — от декоративных элементов до областей, наполненных контентом.

🎁 Читать статью
  • ❤‍🔥 7
  • 🔥 3
  • ⚡ 2
  • ❤ 1
Post #8444 1.4K
Цвет в веб-странице — это не только «чёрный» или «белый», а целая система представления чисел, отражающая интенсивность, оттенок и прозрачность.

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

🎁 Читать статью
  • ❤‍🔥 4
  • 🔥 3
  • ⚡ 2
Post #8443 1.18K

Forwarded from CSS Боль

Статья «Восхитительный Range Syntax в CSS»

Помните сĸазĸу про мальчиĸа, ĸоторый ĸричал «волĸи»? Примерно таĸ же в 2025 году случилось с «программированием на CSS». Вышла фунĸция if() . Блогеры преждевременно хайпанули: всё, теперь у нас условия в CSS. Разработчиĸи пошли читать специфиĸации, попробовали — и довольно быстро выяснилось, что внутри условного выражения style() возможностей почти нет. Многие разочаровались и похоронили идею.

В ĸонце 2025 года Chrome выĸатил революционный Range Syntax For Style Container Queries. Обновлённый style() научился сравнивать переменные между собой и поддерживать диапазонные выражения. Мы наĸонец-то получили мощную условную логиĸу в CSS, но мало ĸто это заметил.

В статье мы возрождаем идею программирования на CSS. На примере паттерна — «выделение диапазона дат в ĸалендаре» — разберём, ĸаĸ обычная JS-логиĸа превращается в CSS-логиĸу (спойлер: очень просто).

Читать статью → https://habr.com/ru/articles/1002216/

Попробовать демку → https://htmlacademy.ru/demos/249
  • ❤ 8
  • ❤‍🔥 2
  • 👍 2
  • ⚡ 1
Post #8442 1.18K
CSS-псевдоклассы задают элементам состояния, которые реализуются при определённых действиях пользователя. Состояния меняют цвет или размер элемента, добавляют ему рамку, делают более интерактивным, выделяют и указывают на его назначение.


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

🎁 Читать статью
  • 🔥 4
  • 👍 3
  • ❤‍🔥 1
Post #8440 1.19K

Forwarded from CSS Боль

CSS Masking уже почти Widely Available, а многие до сих пор её игнорируют.
➿➿➿➿➿➿➿➿➿➿
В новом выпуске «CSS Боли» разбираем CSS-маски для тех, кто с ними не знаком, с помощью интерактивных визуализаций.

— Что такое маскирование и как оно работает.
— Главная «киллер-фича» масок.
— Принцип работы масок.
— 4 свойства, которые закрывают 95% задач.
— Классный пример маски в реальном интерфейсе.

🎁 Попробуйте в демке самостоятельно и смотрите разбор целиком. Если работаете с UI — это надо знать.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
  • ❤ 5
  • 🔥 5
Post #8439 1.72K
HTML Academy День рождения HTML Academy × Колесо Фортуны ➿➿➿➿➿➿➿➿➿➿➿➿ С 20 по 24 февраля — праздничные дни в Академии! В честь дня рождения на сайте появится настоящее колесо с подарками: одно вращение колеса — и в вашу корзину падает скидка 20, 30 или 50%, выгодное комбо…
👍 HTML Academy получает паспорт. Сегодня нам — 14 лет!

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

Заходите на сайт Академии, находите иконку с подарком и крутите колесо. Внутри — промокоды, скидки, курсы и даже годовая подписка на тренажёры бесплатно.

🎁 Испытать удачу
  • ❤ 31
  • ❤‍🔥 6
  • 🔥 3
Post #8438 1.66K
План на выходные: эфир про вёрстку, AI и рост в студии

Директор по развитию и тимлид разработки SimpleUp рассказали, как устроена работа в компании, которая за год выросла втрое:

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

Если на неделе было не до контента — самое время включить.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎁 Программа обучения
  • 🔥 8
  • ❤‍🔥 2
  • ❤ 1
Post #8437 1.5K
Сколько платят стажёру и джуну на испытательном сроке — отвечает основатель студии Bquadro.
➿➿➿➿➿➿➿➿➿➿➿
В совместной программе обучения с HTML Academy студенты учатся под задачи конкретной компании. В этом клипе — про деньги: какую зарплату предлагают на старте и чего ожидать в первые месяцы.

Полный эфир — на YouTube и в VK.
🐭 Смотреть на YouTube
🐹 Смотреть в VK
🎖 Программа обучения
  • ❤ 4
  • 🔥 4
  • ❤‍🔥 2
  • 🤣 2
Post #8434 1.1K

Forwarded from Как стать мидлом

Добавляете фичу — и половина приложения ломается. Часто причина — отсутствие архитектуры.

На курсе «Паттерны проектирования» разбираем 25 паттернов в контексте JavaScript и фронтенд-разработки. Каждый привязан к практической задаче: Adapter помогает работать с «кривым» API, Observer убирает ручную синхронизацию между компонентами, State упрощает управление состояниями интерфейса.

После курса вы начнёте видеть проект как систему: где нужна фабрика, где декоратор сэкономит часы поддержки, а где MV*-подход организует UI. #htmlacademy #levelup

✨ Записаться на курс
  • ❤‍🔥 4
  • ❤ 2
  • ⚡ 2
Post #8432 1.43K
День рождения HTML Academy × Колесо Фортуны
➿➿➿➿➿➿➿➿➿➿➿➿
С 20 по 24 февраля — праздничные дни в Академии! В честь дня рождения на сайте появится настоящее колесо с подарками: одно вращение колеса — и в вашу корзину падает скидка 20, 30 или 50%, выгодное комбо или даже годовая подписка на тренажёры.

Не упустите шанс отпраздновать 14-летие вместе с нами и забрать свой подарок.

Коротко: 1 вращение • 20–24 февраля • Подарки всем.

🎁 https://htmlacademy.ru
  • ❤‍🔥 8
  • 🔥 5
  • 👏 2
  • ❤ 1
Post #8431 1.51K
Контент-менеджер прислал фото 1920×1080, а в карточке места 300×200. Без object-fit получается сплющенный кот.

Свойство object-fit управляет тем, как <img> или <video> вписывается в свой контейнер. cover заполнит бокс с обрезкой лишнего, contain впишет картинку целиком с сохранением пропорций, fill растянет как есть. В статье разбираем каждое значение на примерах и показываем, зачем добавлять max-width: 100%, чтобы картинки не ломали сетку. #css #html

📕 Читать статью
  • ❤‍🔥 9
  • 🔥 3
  • ❤ 2
Post #8430 1.39K
HTML Academy SimpleUp — студия, которая строит маркетинговые решения для бизнеса. Вместо того чтобы гнаться за сеньорами на рынке, компания решила вырастить разработчиков с нуля. В четверг 19 февраля (MSK) в 12:00 директор по развитию и тимлид разработки расскажут: 1️⃣…
Вместе с SimpleUp запускаем совместную программу обучения фронтенд-разработчиков.

Сегодня в 12:00 (MSK) — прямой эфир с директором по развитию и тимлидом разработки SimpleUp. Узнаем, почему компания делает ставку на джунов, как устроена работа в небольшой студии и что ждёт выпускников совместной программы.

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

https://htmlacademy.ru/events/live-simpleup
  • 👍 4
  • ❤ 3
  • 🔥 2
  • ❤‍🔥 1
Post #8429 1.38K
HTML Academy SimpleUp — студия, которая строит маркетинговые решения для бизнеса. Вместо того чтобы гнаться за сеньорами на рынке, компания решила вырастить разработчиков с нуля. В четверг 19 февраля (MSK) в 12:00 директор по развитию и тимлид разработки расскажут: 1️⃣…
Завтра в 12:00 (MSK) — эфир с SimpleUp

Три вопроса, на которые ответят директор по развитию и тимлид разработки:

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

В программу обучения включён курс «Фронтенд на автопилоте: AI-агенты на практике» — научитесь кодить вместе с AI-агентами, использовать Cursor и другие инструменты.

Не забудьте про розыгрыш — бесплатное место на программу среди первых 100 регистраций.

🎁 https://htmlacademy.ru/events/live-simpleup
  • ❤ 3
  • 👍 3
  • ❤‍🔥 1
  • 🔥 1
Post #8428 1.59K
Форкнуть, клонировать, запушить — звучит просто, пока не откроешь терминал и не зависнешь на генерации SSH-ключа.

В статье проходим весь путь: установка Git, git config, регистрация на GitHub, настройка SSH. Потом — форк, git clone, создание ветки, первый коммит и пуш. В конце — пулреквест и синхронизация форка с мастер-репозиторием. Между шагами — квизы для самопроверки и словарик терминов. #tools #git

🎁 Читать статью
  • ❤ 11
  • 👍 5
  • ❤‍🔥 2
  • 🔥 2
Post #8427 1.37K

Forwarded from CSS Боль

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

В новом выпуске «CSS Боли» — почему кризис доверия останется навсегда и как подготовиться уже сейчас.

🐭 Смотреть на YouTube
🐹 Смотреть в VK
  • 🔥 4
  • ❤‍🔥 3
  • 👏 3
Post #8425 1.65K
SimpleUp — студия, которая строит маркетинговые решения для бизнеса. Вместо того чтобы гнаться за сеньорами на рынке, компания решила вырастить разработчиков с нуля.

В четверг 19 февраля (MSK) в 12:00 директор по развитию и тимлид разработки расскажут:

1️⃣ Зачем агентство нанимает джунов, а не опытных разработчиков
2️⃣ Как устроен рост внутри небольшой команды
3️⃣ Нужна ли вёрстка, когда есть нейросети
4️⃣ Что ждёт выпускников совместной программы

🎁 Бонус: среди первых 100 зарегистрировавшихся разыграем бесплатное место на программу. Итоги — в конце эфира.

https://htmlacademy.ru/events/live-simpleup
  • ❤‍🔥 5
  • 🔥 4
  • 👏 3
  • ❤ 1
Post #8421 1.51K

Forwarded from Как стать мидлом

Макет есть, а мобильной версии нет. Состояния кнопок не прописаны, дизайнер занят — и задача висит.

Курс «Дизайн для фронтендеров» учит решать такие задачи самостоятельно. Восемь разделов: Figma, 8px-сетка и вертикальный ритм, типографика, цвет и контрастность с учётом доступности, адаптив без готовых макетов и UI-анимация. В каждом — теория, разбор кейса и практика с эталонным решением.

Подходит разработчикам с базовым знанием HTML и CSS, которые хотят перестать зависеть от дизайнера в типовых интерфейсных задачах. #levelup #htmlacademy

🎁 Записаться на курс
  • 🔥 6
  • ❤‍🔥 2
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →