HTML Academy

👍Случайно подсмотрели в ваш телефон, и вот что нашли

У нас вы можете развивать навыки постепенно:
1️⃣ начинаете с тренажёров — интерактивных задач, на которых руки запоминают HTML, CSS, JavaScript;
2️⃣ переходите к программам «Профессии» — много месяцев системной практики под ревью наставников;
3️⃣ а затем точечно расширяете свои навыки, чтобы уверенно чувствовать себя на уровне мидла.
➿➿➿➿➿➿➿➿➿➿➿➿
Чего, по-вашему, не хватает на карточках? Делитесь в комментариях.

Селекторы в CSS: просто, точно и без лишнего

Хорошее знание селекторов — это фундамент вёрстки. В статье собрали основные типы селекторов: от комбинаторов и псевдоклассов до атрибутных и универсальных.

Даже опытные разработчики порой используют избыточные конструкции или ошибаются со специфичностью. Эта шпаргалка поможет не только избежать типичных ошибок, но и писать CSS понятнее — для себя и команды.

👉Статья тут
➿➿➿➿➿➿➿➿➿➿➿➿
А чтобы потренироваться использовать селекторы на практике, пройдите эти тренажёры из курса «Старт в программирование».

HTML-сущности без паники: спецсимволы, которые нужно знать

Вёрстка — не место для сюрпризов от <, & или ©. Если вы вставляете спецсимволы в HTML, но всё едет или ломается — в статье объясняем, какие сущности использовать и почему это важно. Минимум теории, максимум пользы: от кавычек и тире до математических знаков и валют.

Это не просто справочник, а рабочий инструмент: копируй и вставляй — и никаких багов в разметке.

💫Кликай сюда

Визуализируем :nth-child, часть 4

:nth-child() — это псевдокласс, который позволяет выбирать элементы по их порядковому номеру. Используется для стилизации элементов на основе их порядка в DOM дереве.

В клипе рассматриваем более сложные комбинации 2n, 3n, 4n и так далее. Наглядно разбираем, как меняется результат в зависимости от значений.

➿➿➿➿➿➿➿➿➿➿➿➿➿
Другие визуализации смотрите на наших платформах:

💫 Смотреть в YT
💫 Смотреть в TikTok

Что пора менять в вёрстке в 2025 ?

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

Если вы работаете с HTML и CSS на ежедневной основе — стоит сверить свои привычки с актуальными подходами. Статья полезна не только новичкам: даже опытные верстальщики найдут, что можно улучшить.

👉 Читать статью

[Новый курс] Удивите коллег и работодателей мастерством создания потрясающих эффектов на чистом CSS, пройдя бесплатный курс:

https://htmlacademy.ru/demos/225

В этой мастерской мы продолжим использовать радиальные градиенты для создания потрясающих декоративных эффектов и разберёмся, как создать эффект сияющей иллюстрации взрыва.

#туториалотhtmlacademy #frontend #html #css

HTML Academy и ADM — теперь партнёры. Выпускники флагманских программ HTML Academy, соответствующих стандартам IT-гигантов, смогут попасть в команду ADM.

Подробнее о программе
➿➿➿➿➿➿➿➿➿➿
ADM — веб-студия, занимающаяся созданием сайтов с 2018 года. Компания специализируется на разработке веб-решений для бизнеса и сотрудничает с заказчиками из Воронежа и Москвы. За годы работы ADM реализовали десятки успешных проектов, которые помогли клиентам развивать свои компании и достигать новых высот. Входят в пятёрку лучших веб-студий Воронежа по версии WADLINE.

#работодателиhtmlacademy

Сколько получает джуниор-разработчик в студии? На примере ADM

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

Ставка напрямую зависит от скорости обучения и способности брать более сложные задачи. Чем быстрее джун вливается в процессы и начинает приносить пользу, тем выше его почасовая оплата.

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

📝Узнайте о нашей совместной программе обучения с ADM → https://tml.io/backend-for-adm

Многие разработчики годами используют только метод log() у console, даже не подозревая, насколько мощным инструментом, на самом деле, является объект console.

В статье подробно разбираем полезные, но малоизвестные методы:
➿ console.table() для удобного вывода данных;
➿ console.grouр () для структурирования логов;
➿ console.time() для замера производительности и другие.

Освоив эти инструменты, вы сможете более наглядно работать с ошибками.

👉🏻 Читать статью

Новый курс

Создайте карточку с потрясающим декоративным эффектом в мастерской, состоящей из 14 заданий-головоломок, и отточите свои навыки использования градиентов.

https://htmlacademy.ru/courses/425

Курс доступен по подписке. Бесплатно познакомиться с принципом создания этого декоративного эффекта можно в интерактивной демонстрации.

https://htmlacademy.ru/demos/223

#туториалотhtmlacademy #frontend #html #css

Каждый, в принципе, может стать крутым разработчиком, но не каждый научится работать в команде

Вчера к нам на эфир заглянул Алексей Шпилев, основатель веб-студии ADM — компании, реализующей проекты по созданию сайтов и выводу их на топовые позиции в поисковых системах. Алексей поделился, как небольшая команда создаёт корпоративные сайты и интернет-магазины, которые заменяют клиентам ERP-системы, и как начать карьеру в разработке c помощью стажировки.

Вместе с Алексеем обсудили:

➿ Современный стек компании: PHP 8, WordPress, интеграции с банками, логистикой и системами учёта.
➿ Почему WordPress — это не «устаревшая CMS»?
➿ Скорость, безопасность и SEO-дружественность с первого дня.

Вместо гениев-одиночек ADM ищет командных игроков. Смотрите запись эфира — и узнайте, как стартовать веб-разработчиком в региональной студии!

Смотреть на YouTube | Смотреть в VK | Совместная программа с ADM

Все программы с работодателями ➡️https://htmlacademy.ru/joint_professions

Патронус в мире магии — то же, что и атрибуты dataset и data-* в мире HTML и JavaScript

В статье объясняем, как использовать атрибуты data-* для хранения дополнительной информации в элементах. Доступ к данным через dataset в JavaScript — чисто и удобно, а поддержка браузерами — полная.

Если вам нужно привязать к элементу статус или любые другие данные — data-* станет мощным инструментом. Просто, без лишнего кода и с понятным синтаксисом.

💡 Где применять dataset и подробнее о подводных камнях рассказали тут.

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

https://htmlacademy.ru/events/live-adm

Как работает :nth-child в CSS? Разбираем на пальцах!

Вы наверняка слышали, как говорят: «Чтобы хорошо разобраться в материале — нужно прочитать его несколько раз». А мы предлагаем несколько раз посмотреть!

➿➿➿➿➿➿➿➿➿➿

Первые части, как и другие визуализации, можете посмотреть на наших платформах:

Смотреть в YT

Смотреть в TikTok

Прямой эфир с основателем веб-студии ADM

HTML Academy и Aleks Digital Mаrketing запускают совместную программу «Обучение под работодателя»: вы изучаете PHP и фреймворки в небольшой группе, а после курса можете получить шанс пройти стажировку в ADM.

Приходите на эфир 30 июля в 12:00, чтобы:

➿ Познакомиться с ADM — компанией, которая делает сайты для заводов, культурных учреждений и бизнеса, включая проекты с ERP-интеграцией;
➿ Узнать, как устроен процесс стажировки;
➿ Разобраться, какие навыки нужны для старта и как компания выбирает кандидатов.

Зарегистрируйтесь по ссылке — мы напомним о трансляции и расскажем, как попасть на обучение.

HTML Academy и NEWMARK — теперь партнёры. Выпускники флагманских программ HTML Academy, соответствующих стандартам IT-гигантов, смогут попасть в команду NEWMARK

Подробнее: https://tml.io/bigtech-newmark

NEWMARK — digital‑агентство полного цикла с 20-летней историей, специализирующееся на разработке и продвижении корпоративных сайтов и интернет-магазинов, в основном на платформе 1С-Битрикс.

#работодателиhtmlacademy

Год назад, в июле 2024 года, мы запустили новую главу в русском онлайн-образовании — обучение напрямую под работодателя.

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

Прошёл год. Можно подвести первые итоги:

— Мы начинали с 3 партнёрами-работодателями, а сейчас их 35. Популярность совместных программ среди компаний растёт. На старте приходилось пробиваться через стену недоверия работодателей, но стена пробита. Потому что…
— Формат работает. Несколько программ прошли полный жизненный цикл: создание программы, набор группы, обучение, собеседование выпускников, стажировка, переход в штат. Работодатели увидели уровень выпускников и оценили процесс выращивания кадров, который оказался на порядок эффективнее фильтрации с рынка.
— Компании возвращаются для запуска повторных потоков. Этим всё сказано. Вы увидите повторные старты уже в августе.

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

В чём отличие margin и padding?

Когда вы только начинаете, легко перепутать margin и padding. В статье объясняем так, чтобы запомнилось надолго! Margin отвечает за расстояние снаружи элемента, а padding – за пространство внутри.

👉🏻 Подробнее разбираем в статье

Мыслите как дизайнер? HSL в помощь!

В статье мы просто и понятно объясняем, почему HSL — отличная альтернатива RGB. В этой модели цвет задаётся через оттенок (Hue), насыщенность (Saturation) и светлоту (Lightness). Это делает работу с цветами более гибкой и наглядной. Например, чтобы сделать цвет темнее, просто уменьшите Lightness — никаких сложных расчётов!

HSL — это наглядный инструмент, его можно использовать прямо в редакторах кода и графики. Поддерживается всеми современными браузерами. Если вы ещё не пробовали — самое время внедрить HSL в свои проекты!

👉🏻Читать статью