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

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн.

В четверг 23 апреля в 12:00 (MSK) генеральный директор компании расскажет о совместной программе обучения: как устроена работа в небольшой веб-студии из топ-100 по 1С-Битрикс и почему здесь разработчики растут от вёрстки до фулстека, работая с AI-инструментами.

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

https://htmlacademy.ru/events/live-mediamint
❤‍🔥3🔥32
Какой цвет фона в .selector { background-color: 20px; background-color: red; }?

А если первое значение — var(--not-a-color), и переменная содержит те же 20px? Результат будет другим.

Каскад — один из четырёх этапов обработки значений в CSS. Сначала браузер фильтрует объявления и отбрасывает невалидные, потом через каскад для каждого свойства выбирает одно значение. Если какого-то не хватает — берёт унаследованное или начальное. Дальше три стадии вычислений: вычисленные, используемые и действительные.

Разбираем весь путь CSS-значения: от объявления в файле до значения, с которым браузер отрисовывает элемент. Со схемами, примерами и тестом для самопроверки. #css

🔴 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥3🔥2
HTML Academy
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн. В четверг 23 апреля в 12:00 (MSK) генеральный директор…
Завтра — эфир с CEO. Главные вопросы о нейросетях в работе джуна

23 апреля в 12:00 (MSK) — один час, чтобы успеть спросить главное у CEO компании, которая год работает с ИИ-агентами в повседневной разработке.

Что спросим:

❤️ Джун и ИИ-агент: ускоряет рост или подменяет его
❤️ Какой вопрос на собеседовании показывает: разобрался сам или ответил через агента
❤️ В каких задачах ИИ ускоряет команду прямо сейчас, а в каких всё портит

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

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

https://htmlacademy.ru/events/live-mediamint
Please open Telegram to view this post
VIEW IN TELEGRAM
8❤‍🔥2🔥2
Media is too big
VIEW IN TELEGRAM
Алгоритмы абстрактны, их сложно представить в голове. Поэтому сортировку пузырьком и вставками удобнее посмотреть, чем изучать по тексту.

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

В интерактивных демках из курса можно задать свой массив и прогнать алгоритм заново:

Сортировка вставками — https://htmlacademy.ru/demos/187
Сортировка пузырьком — https://htmlacademy.ru/demos/181
🔥6❤‍🔥32
HTML Academy
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн. В четверг 23 апреля в 12:00 (MSK) генеральный директор…
Вместе с MediaMint запускаем совместную программу обучения фронтенд-разработчиков

Сегодня в 12:00 (MSK) — прямой эфир с CEO. Компания работает с 2014 года, за это время — больше 270 проектов в самых разных отраслях. Внутри команды верстальщиков растят до фулстеков на реальных задачах, с наставниками. На эфире расскажут, зачем им новички с программы обучения и какой путь ждёт выпускников.

Успеть в первую сотню регистраций — последний шанс попасть в розыгрыш бесплатного места на программе. Результат объявим в прямом эфире.

https://htmlacademy.ru/events/live-mediamint
5🔥3❤‍🔥2
Фронтенд — ваше или не ваше? Проверьте за две недели

28 апреля стартует группа по программе «Фронтенд-разработчик для компании Зионек». На этот набор мы даём две недели пробного периода — чтобы вы проверили профессию на практике, ничем не рискуя.

Как это работает? Бронируете место за 15 000 ₽ и учитесь как все. За две недели успеете сделать первые задачи и поработать с наставником. Этого хватит, чтобы понять — ваше это или не ваше.

💡 Если подошло — продолжаете программу. Впереди месяцы обучения и проекты в портфолио, а на выходе — возможность поработать в компании Зионек.

📎 Если нет — ваши 15 000 ₽ не сгорают. Переведём вас на программу «Верстальщик»: курсы по фундаментальной вёрстке и адаптивной вёрстке, наставник в общем чате.

Записаться в Телеграме
Записаться через MAX
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤‍🔥33🤣2
Если в VS Code у вас в ходу одни и те же пять-шесть горячих клавиш — в редакторе есть ещё десятки. Вот четыре, с которых стоит начать:

- F2 переименует переменную сразу во всех местах.
- F12 откроет файл с её объявлением — даже если оно в другом модуле.
- Ctrl + G поможет попасть к строке по номеру.
- Alt со стрелками поменяет строки местами.

Ещё шесть — в статье. #vscode #tools

👾 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍15❤‍🔥44
«Мастер анимаций: CSS и JavaScript-анимации»

Курс учит анимировать карточки товаров, меню, модалки, слайдеры и аккордеоны — плавно и без фризов на слабых устройствах.

72 примера. Движемся от переходов по ховеру до 3D-трансформаций и параллакса со скроллом. Параллельно — отладка: в DevTools ловим просадки по кадрам и оптимизируем рендеринг. Отдельно — prefers-reduced-motion для пользователей, которым движения мешают.

Порядок обучения — от простого к сложному: transition, затем @keyframes и animation, а на финише — JavaScript для интерактивных сценариев. #htmlacademy #levelup

🎁 Смотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥52👍1
HTML Academy
MediaMint — веб-студия, с 2014 года разрабатывает и продвигает сайты для бизнеса из разных отраслей. Делает современные, удобные и функциональные проекты, помогает компаниям эффективнее работать онлайн. В четверг 23 апреля в 12:00 (MSK) генеральный директор…
«Я постою над тобой и не дай бог шаг вправо, шаг влево» — CEO про джуна пять лет назад

Максим Заруцкий из MediaMint это помнит и не скрывает: пять лет назад он бы сказал джуну — полгода в офисе, надо посидеть, познакомиться. Сегодня берёт новичка на удалёнку с первого дня. В эфире объяснил, что изменилось: CRM и метрики показывают, кто как работает, без физического присутствия — и один из верстальщиков за полтора месяца дорос до фулстека и забрал проект целиком.

Если вы джун и боитесь, что вас возьмут только «обратно в офис под присмотр» — послушайте разговор. И посмотрите программу, по которой попадают в команду MediaMint.

🎁 Программа
🐭 Смотреть в YT
🐹 Смотреть в VK
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4❤‍🔥2👍2
Утро, открываете тикет, кидаете задачу в нейронку: «Напиши компонент карточки товара». Через минуту в редакторе компонент. Классы выдуманные, поля называются как-то по-своему, а эффект при наведении вообще никто не просил.

Знакомо? Дальше — час правок.

Чаще всего проблема в самом запросе. В нём нет типа данных с сервера и списка классов из дизайн-системы — поэтому нейросеть достраивает всё сама. По общим примерам, без оглядки на ваш проект.

В статье — шаблоны запросов на новый компонент и на тесты к нему. Отдельный приём для правки существующих стилей: эффективнее попросить «измени только эту функцию», чем «перепиши файл». А ещё пять приёмов из практики, главный из которых — показать нейросети соседний компонент из проекта вместо описания на словах. #ai #webdev

🔥 Читать статью
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥43
HTML Academy
Финишная прямая! Третий сезон Чемпионата по вёрстке завершён. 29 апреля в 12:00 (MSK) вместе с экспертами из компаний подведём результаты, озвучим оценки и объявим победителя. 🐭 Подключиться в YT 🐹 Подключиться в VK Video
Через час эфир. Подведём итоги чемпионата по вёрстке 3: разберём проекты участников вместе с экспертами из бигтех-компаний, которые их проверяли, и объявим победителя сезона.

Подключайтесь в YouTube или в VK Video.
❤‍🔥11👍1
🍀 На Кексодаче готовятся к майским.

Кекс приехал к воротам, проверил петли, починил колесо у входа — оно у нас собрано из обода старого велосипеда и подшипника от «Малютки». Грядки за зиму подзаросли, лягушки уже расселись на лилиях точно через space-between.

Первого мая ворота открываются. Каждый, кто заходит, по традиции крутит колесо и забирает корзинку с урожаем — внутри скидка до 50% на любой курс Академии.

➡️ Зайдите на htmlacademy.ru 1 мая, крутаните колесо у ворот и заберите свою скидку. Открытие сезона до 3 мая.
Please open Telegram to view this post
VIEW IN TELEGRAM
4❤‍🔥21👍1
Спросили у нейросети, как работает useEffect. Помогло. Через месяц на интервью просят объяснить — рассказать своими словами не получается.

Готовый ответ создаёт иллюзию понимания. Знания закрепляются, когда задача упирается и вы долго разбираетесь сами. Психологи называют это «желательными трудностями» — их обходят, когда отдают учёбу нейросети, и платят позже: на ревью, на интервью, в чужой кодовой базе.

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

Простой тест перед делегированием: если ИИ напишет код, а вы его не прочитаете — это станет проблемой? #ai #webdev

Читать статью
👍5❤‍🔥4🔥21
Самый крупный текст на макете — это всегда <h1> страницы?

Часто — нет.

Возьмём страницу магазина мороженого «Глейси». Крупное «Нежный пломбир с клубничным джемом» — это заголовок одного из слайдов: на следующем слайде стоит другой текст. Заголовок первого уровня для всего документа — «Магазин натурального мороженого Глейси». На макете этого заголовка нет: разработчик добавляет его в HTML отдельно, скрытым через класс visually-hidden.


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

В статье — как разбирать макет на заголовки и когда нужны скрытые <h2>. И отдельно — про инструмент проверки иерархии заголовков в валидаторе W3C. #html #webdev

Читать статью
62🔥2
Относитесь к себе бережно — не ругайте, если что-то не выходит, и хвалите, если получается.
❤‍🔥136👍43