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

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

Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
Download Telegram
Селекторы в CSS: просто, точно и без лишнего

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

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

👉Статья тут

А чтобы потренироваться использовать селекторы на практике, пройдите эти тренажёры из курса «Старт в программирование».
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥136❤‍🔥21
👍Случайно подсмотрели в ваш телефон, и вот что нашли

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

Чего, по-вашему, не хватает на карточках? Делитесь в комментариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7🤣321❤‍🔥1
📌Алгоритмы и структуры данных: код быстрее, интерфейсы надёжнее

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

Что разберёте на практике — и где это пригодится прямо в продакшене:

O-большое без теории ради теории — находите «дорогие» циклы ещё до ревью;
Обход деревьев и графов — ускоряете diff-алгоритм шаблонизатора и виртуального DOM;
Хеш-таблицы и Map/Set — убираете дубли среди 100 000 элементов за O(1) вместо O(n);
Поиск и quicksort — «живой» поиск и бесконечный скролл без фризов.

Какой алгоритм в последний раз выручил ваш проект? Делитесь в комментариях.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍33❤‍🔥11🤣1
Media is too big
VIEW IN TELEGRAM
Страшный сон джуна — устроиться на работу и в первый рабочий день получить задачу:
Перенеси верстку на WordPress с анимациями
Так ли на самом деле?

Алексей Шпилев, основателем воронежской веб-студии ADM, на эфире поделился, как происходит адаптация новых сотрудников. «Главное — дать человеку задачи по силам/опыту и постепенно усложнять путь».

Со временем джун подключается к реальным проектам и самостоятельно их ведёт. Такой подход помогает постепенно повышать свой скилл до мидла.

Стартуйте на стажировке в ADM после совместной программы.
🟡Записаться на обучение
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥102❤‍🔥1
Как вам Container Queries?

Столько было ожиданий. Говорили про революцию в мире адаптивности. Что можно будет забыть про стандартные вьюпорты.

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

И, всё-таки, может быть есть те, кто полностью перешел на container queries? Поделить опытом.

А, если вы пытались, но не зашло, расскажите почему, чем неудобна технология?
👍2🔥1
Прямой эфир с компанией NAUKA

Год назад мы запустили первый поток программы «Обучение под работодателя» вместе с компанией NAUKA. После 7 месяцев интенсивного изучения JavaScript, TypeScript, React и современных инструментов, успешные выпускники прошли собеседования и успешно закончили стажировку в компании.

В этом году мы запускаем второй поток! Приходите на эфир 14 августа в 12:00, вместе обсудим:

1️⃣чем занимается NAUKA, узнаем, чем второй поток отличается от первого и для кого он подходит;
2️⃣какие решения выпускников первого потока уже работают в продакшене и как они помогают бизнесу;
3️⃣программу обучения и узнаем, как полученные знания пригодятся в реальных задачах;
4️⃣как проходит стажировка выпускников: формат, продолжительность и оплата.

Если планируете сменить профессию и выбираете программу, мечтаете начать карьеру в продуктовой IT-компании и сомневаетесь, что джунам доверяют реальные задачи — приходите на эфир и регистрируйтесь по ссылке: напомним о трансляции и расскажем, как попасть на обучение.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥12❤‍🔥32👏1
Media is too big
VIEW IN TELEGRAM
Курс с визуализациями про адаптивность отлично подходит для тех, кто начинает погружаться в эту сложную тему. Бесплатно, наглядно, без воды

https://htmlacademy.ru/demos/231

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

#туториалотhtmlacademy #frontend #html #css
🔥17❤‍🔥4👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Полезного контента много не бывает!

Визуализируем :nth-child, заключительная пятая часть. Комбинированные селекторы.
В этой части разбираем сложные комбинации условий, где один элемент должен соответствовать сразу двум правилам.

Смотрите всю серию визуализаций
YouTube
TikTok
👍5🔥531
Три мастера сдали работы: один — быстро, второй — функционально, третий — аккуратно. Победил тот, чей код был надёжным и поддерживаемым. Качество — это не «красиво», а «стабильно».


В конце августа запускаем чемпионат по вёрстке. Формат — полностью онлайн, длительность — две недели. Участие — бесплатное для выпускников наших профессий. Макет предоставляет Wemakefab — студия, входящая в топ-12 по дизайну в России.

Что точно будет:
Крутой кейс: макет, отмеченный более чем десятью престижными digital-наградами.
Критерии качества индустрии: просто сверстать будет недостаточно — оцениваем аккуратность, надёжность, поддерживаемость и внимание к деталям.
Партнёры-работодатели: в жюри — компании, которые ищут сильных новичков.

А вот чего точно не будет:
Задач на скорость.
Простых решений.
Работ на Tailwind.

В следующих постах расскажем другие подробности о чемпионате. А пока переходите на лендинг и записывайтесь на участие — это бесплатно.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥14👏32❤‍🔥22
HTML Academy
Прямой эфир с компанией NAUKA Год назад мы запустили первый поток программы «Обучение под работодателя» вместе с компанией NAUKA. После 7 месяцев интенсивного изучения JavaScript, TypeScript, React и современных инструментов, успешные выпускники прошли собеседования…
Уже завтра — эфир с NAUKA

14 августа в 12:00 (MSK) встречаемся на прямом эфире про второй поток «Обучение под работодателя».

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

Регистрируйтесь по ссылке: пришлём напоминание о трансляции и подскажем, как попасть на обучение.
🔥522
HTML Academy
Уже завтра — эфир с NAUKA 14 августа в 12:00 (MSK) встречаемся на прямом эфире про второй поток «Обучение под работодателя». Разберём: — чем занимается NAUKA и чем второй поток отличается от первого, кому он подойдёт; — какие решения выпускников уже работают…
Сегодня в 12:00 на эфире поговорим о программе обучения под реальные задачи. Руководитель отдела фронтенд-разработки и ведущий разработчик интерфейсов NAUKA расскажут о компании, перспективах для выпускников и ответят на ваши вопросы.

https://htmlacademy.ru/events/live-nauka-2025
❤‍🔥7🔥3👍1
::first-line в CSS: тонкая настройка первой строки, о которой забывают даже профи

Псевдоэлемент ::first-line — одна из тех возможностей CSS, которая кажется простой, но скрывает мощный потенциал для типографики. Псевдоэлемент позволяет оформить только первую видимую строку текста: выделить её цветом, изменить шрифт, добавить фон или акцентировать внимание типографикой. И всё это — без дополнительного HTML.

Но у приёма есть тонкости: поддерживаются не все CSS-свойства, а результат зависит от ширины контейнера и адаптивности. Если знать ограничения, ::first-line станет идеальным инструментом для аккуратного визуального акцента.

Разбираем, что можно, что нельзя и как использовать без ошибок — читайте статью.
🔥6❤‍🔥31
Vite — это не модная альтернатива Webpack, а стандарт для фронтенда

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

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

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

📎Начать обучение и перейти на быструю сборку без боли.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤‍🔥821🔥1
Media is too big
VIEW IN TELEGRAM
За сколько джун вырастает до мидла? Реальный кейс ADM

Система компании ADM:
0-3 месяца:
Задачи: Формы, правка контента
Оплата: 600-900 ₽ в час (парт-тайм)
3-6 месяцев:
Задачи: API, кастомизация e-commerce
Оплата: 1200 ₽ в час (фултайм)
6-12 месяцев:
Уровень: Мидл

Почему так быстро?
Нет «воды» — только задачи из продакшена
Командная прокачка, разбор ошибок

Стартуйте на стажировке после программы «PHP-разработчик»
Записаться на обучение

Все программы с работодателями → https://htmlacademy.ru/joint_professions
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥2❤‍🔥1