Успешные выпускники попадают в команду компании, а обучение проходит на основе легендарного контента.
Записаться
HTML Academy
@htmlacademy
Курсы по веб-разработке: вёрстка, программирование, работа и комьюнити.
Наш секретный бот @HTMLAcademyKeksobot.
Вопросы по обучению @htmlacademy_sales
Ролики на YT https://www.youtube.com/@HTMLAcademyTV
Ролики на VK https://vkvideo.ru/@htmlacademy
HTML Academy (Russian)
HTML Academy - это канал, предназначенный для всех, кто интересуется веб-разработкой. Здесь вы найдете курсы по вёрстке, программированию, работе и комьюнити. Наш канал поможет вам освоить основы и продвинутые темы веб-разработки, а также научиться применять их на практике. У нас вы сможете задавать вопросы по обучению, связавшись с нами через @htmlacademy_sales. Кроме того, мы регулярно выкладываем полезные видеоролики на нашем YouTube канале, который доступен по ссылке https://www.youtube.com/@HTMLAcademyTV. Присоединяйтесь к нам, учите новое и развивайтесь вместе с HTML Academy!
HTML Academy
13 Feb, 14:24
Успешные выпускники попадают в команду компании, а обучение проходит на основе легендарного контента.
Записаться
HTML Academy
13 Feb, 10:42
Новый курс «Алгоритмы сортировки через визуализации»
https://htmlacademy.ru/demos/181
Алгоритмы — сложная тема, но не с этим курсом! Мы превратим абстрактные сортировки в наглядные анимации, где всё сразу становится понятно. Учитесь легко, наблюдая, как алгоритмы работают вживую!
В этой главе мы с помощью визуализаций изучим хрестоматийный алгоритм сортировки пузырьком.
#туториалотhtmlacademy #алгоритмы #algorithms
https://htmlacademy.ru/demos/181
Алгоритмы — сложная тема, но не с этим курсом! Мы превратим абстрактные сортировки в наглядные анимации, где всё сразу становится понятно. Учитесь легко, наблюдая, как алгоритмы работают вживую!
В этой главе мы с помощью визуализаций изучим хрестоматийный алгоритм сортировки пузырьком.
#туториалотhtmlacademy #алгоритмы #algorithms
HTML Academy
12 Feb, 10:07
Как разделять работу и жизнь, если ты разработчик или дизайнер? Что такое выгорание и как его избежать?
Вопросы, которые легли в основу новой игры от ребят из Лиги А. Ответов не обещают, зато будет возможность управлять судьбами персонажей в стиле тамагочи —😌 разработчиком и 😌 дизайнером.
Над ней прямо сейчас работают разработчики Лиги — бывшие студенты Академии, кстати.
Если вам сложно разделять работу и жизнь, вы сталкивались с тем самым выгоранием или прямо сейчас к нему близки, ждите релиза в конце февраля. А пока игра в разработке, приходите послушать про выгорание на эфир.
Вместе с гостями Лиза и Женя из Лиги разберутся:
• почему бывает сложно разделять работу и жизнь
• как не выгорать
• что делать, если это случилось
А ещё поделятся опытом, инсайтами и советами для разработчиков.
Кто будет:
• Лиза, CEO Лиги А.
• Саша, дизайнер агентства Мера
• Паша, CEO агентства Cedro
• Женя, руководитель отдела разработки Лиги А.
Сегодня, в 17:00 по мск встречаемся в канале Лиги!
Вопросы, которые легли в основу новой игры от ребят из Лиги А. Ответов не обещают, зато будет возможность управлять судьбами персонажей в стиле тамагочи —
Над ней прямо сейчас работают разработчики Лиги — бывшие студенты Академии, кстати.
Если вам сложно разделять работу и жизнь, вы сталкивались с тем самым выгоранием или прямо сейчас к нему близки, ждите релиза в конце февраля. А пока игра в разработке, приходите послушать про выгорание на эфир.
Вместе с гостями Лиза и Женя из Лиги разберутся:
• почему бывает сложно разделять работу и жизнь
• как не выгорать
• что делать, если это случилось
А ещё поделятся опытом, инсайтами и советами для разработчиков.
Кто будет:
• Лиза, CEO Лиги А.
• Саша, дизайнер агентства Мера
• Паша, CEO агентства Cedro
• Женя, руководитель отдела разработки Лиги А.
Сегодня, в 17:00 по мск встречаемся в канале Лиги!
HTML Academy
12 Feb, 08:06
HTML Academy и TravelLine запускают уникальную программу «Обучение под работодателя». Вы обучаетесь в малой группе, осваиваете нужные навыки, и самое главное, получаете шанс присоединиться к команде TravelLine по завершении обучения.
Приходите на прямой эфир 13 февраля в 19:00, чтобы:
HTML Academy
11 Feb, 08:53
Как сделать аккордеон на чистом HTML и CSS? Разбираемся в бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/177
Создаём вертикальный аккордеон на базе нативного элемента
#туториалотhtmlacademy #frontend #html #css
https://htmlacademy.ru/demos/177
Создаём вертикальный аккордеон на базе нативного элемента
<details>. Разбираемся, с помощью какого атрибута "связывать" друг с другом "вкладки" аккордеона.#туториалотhtmlacademy #frontend #html #css
HTML Academy
10 Feb, 09:46
Попробуйте в действии → Демонстрация
Больше визуализаций и интерактивных туториалов → Смотреть всё
HTML Academy
06 Feb, 08:56
— Слетать.ру — крупная IT-компания в туристической сфере с современным фронтендом: React.js, TypeScript, Next.js, библиотека компонентов на Storybook.
— Компания чаще нанимает мидлов, но джуны тоже нужны: их обучают с нуля, помогают тимлиды и коллеги. Обучить с нуля проще, чем переучивать мидла с устоявшимися привычками. Испытательный срок — настоящие проекты, своя документация, код до продакшена. Через 9–12 месяцев — рост до мидла и уверенная работа.
— Оценить навыки джуна с рынка за 1–2 часа собеседования сложно. А совместная программа помогает увидеть, как он работает, обучается и справляется с задачами на длительной дистанции.
— Программа включает все нужные ключевые темы: вёрстка, JavaScript, архитектура клиентских приложений, React.js. Компания следит за прогрессом и видит код студентов.
— Для кандидата найм после совместной программы проще и комфортнее, чем с рынка: не нужно проходить классический отбор, компания уже знакома с его работой, а собеседование больше похоже на обсуждение итогов обучения и дальнейшего развития.
— Старт в компании начинается с оплачиваемой стажировки, рассчитанной примерно на два месяца, с полной занятостью.
— Работа в Слетать.ру — это возможность развиваться в современном стеке, решать разнообразные задачи и работать в команде, где важны инициативность и влияние на продукт.
Обучение под работодателя.
HTML Academy
06 Feb, 07:27
Наука — это не только лаборатории и формулы. В программировании тоже есть место исследованиям, гипотезам и открытиям! Если ты давно задумывался о старте в IT, этот день — отличный повод сделать первый шаг.
С чего начать?
Веб-разработка кажется сложной, но если двигаться шаг за шагом, вход в профессию будет гораздо проще. Мы подготовили статью, которая поможет разобраться в основах:
Три курса со скидкой 50% ко дню науки
До 12 февраля три самых популярных курса для новичков доступны по специальной цене.
HTML Academy
03 Feb, 08:31
Попробуйте в действии → Демонстрация
Больше визуализаций и интерактивных туториалов → Смотреть всё
HTML Academy
31 Jan, 16:01
Начался эфир с компанией ✈️ Слетать.ру про обучение напрямую для работодателя.
Присоединяйтесь по ссылкам:
📱 https://www.youtube.com/live/NBEZh2b6yC4
📱 https://vk.com/video-38306835_456239578
Присоединяйтесь по ссылкам:
HTML Academy
31 Jan, 13:02
Кто, что и кому должен в онлайн-образовании IT-профессий?
Онлайн-образование IT-профессиям — это фабрика сертификатов, где обещают «карьеру мечты», а на выходе — тонны резюме без откликов. Школы учат устаревшим технологиям, работодатели хотят готовых специалистов, а студенты остаются с долгами и иллюзиями. Кто виноват? Школы, которые наживаются на надеждах? Работодатели, которые не хотят растить кадры? Или сами студенты, которые верят в «волшебную таблетку»?
Какой вариант, по вашему мнению, наиболее эффективен?
Онлайн-образование IT-профессиям — это фабрика сертификатов, где обещают «карьеру мечты», а на выходе — тонны резюме без откликов. Школы учат устаревшим технологиям, работодатели хотят готовых специалистов, а студенты остаются с долгами и иллюзиями. Кто виноват? Школы, которые наживаются на надеждах? Работодатели, которые не хотят растить кадры? Или сами студенты, которые верят в «волшебную таблетку»?
Какой вариант, по вашему мнению, наиболее эффективен?
HTML Academy
31 Jan, 10:04
Уже сегодня в 19:00 на эфире мы поговорим о программе обучения, на которой мы готовим специалистов под реальные задачи. Технический директор и тимлид фронтенда компании Слетать.ру расскажут о перспективах для выпускников и ответят на ваши вопросы.
HTML Academy
30 Jan, 11:29
HTML Academy и Слетать.ру запускают уникальную программу «Обучение под работодателя». Вы обучаетесь в малой группе, осваиваете нужные навыки, и, самое главное, получаете шанс присоединиться к команде Слетать.ру по завершении обучения.
Приходите на прямой эфир 31 января в 19:00, чтобы:
– Узнать из первых уст о компании Слетать.ру и ближайших планах по найму.
– Детально разобраться в программе: как она заточена под реальные требования рынка.
– Получить ответы на все интересующие вопросы от представителей компании.
– Понять, какие конкретные навыки вы освоите и как это поможет вам получить оффер от компании.
HTML Academy
29 Jan, 08:29
Мы советуем изучить, как работает атрибут
https://web.dev/articles/fetch-priority?hl=ru#fetchpriority-attribute
А Николай Громов, ведущий разработчик интерфейсов компании Наука, рассказывает, почему надо использовать
«И создал он атрибут
И Создал он
Но потом создал ОН один атрибут, чтобы править всеми!
(приоритетами загрузки)
и имя ему –
И возрыдали разработчики,
ибо ОН прекрасен и готов к продакшену.»
Полностью согласны. Ни убавить, ни прибавить.
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
fetchpriority:https://web.dev/articles/fetch-priority?hl=ru#fetchpriority-attribute
А Николай Громов, ведущий разработчик интерфейсов компании Наука, рассказывает, почему надо использовать
fetchpriority:«И создал он атрибут
loading и дал его эльфам.И Создал он
preload у <video> и дал его людям.Но потом создал ОН один атрибут, чтобы править всеми!
(приоритетами загрузки)
и имя ему –
fetchpriorityИ возрыдали разработчики,
ибо ОН прекрасен и готов к продакшену.»
Полностью согласны. Ни убавить, ни прибавить.
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
HTML Academy
28 Jan, 08:48
Завершаем вёрстку десктопной версии промо-блока из олимпиады по фронтенду от HTML Academy и Яндекса.
https://htmlacademy.ru/demos/175
В шестой части курса мы завершаем десктопную версию компонента и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/175
В шестой части курса мы завершаем десктопную версию компонента и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
HTML Academy
27 Jan, 08:58
HTML Academy
23 Jan, 10:19
В новой рубрике «CSS боль» мы подробно разбираем, как работают
position: absolute, контейнерные блоки, координаты auto, а также концепцию shrink-to-fit, которая позволяет элементам идеально адаптироваться под содержимое.Кроме того, мы изучаем спецификацию и анализируем специально подготовленную демонстрацию, чтобы лучше понять эти механики.
Ролик в YT | Ролик в VK | Демонстрация
HTML Academy
21 Jan, 07:35
Почему Vite выбирают разработчики?
Vite — это скорость, простота и возможность сосредоточиться на коде, а не на настройках. Он мгновенно обновляет изменения, поддерживает множество фреймворков и идеально подходит для современных проектов.
Что нового появилось в Vite 6? Спойлер: разработчики точно оценят новые шаблоны и поддержку последних версий Node.js.
Подробности — в статье: https://htmlacademy.ru/blog/js/vite-6
Vite — это скорость, простота и возможность сосредоточиться на коде, а не на настройках. Он мгновенно обновляет изменения, поддерживает множество фреймворков и идеально подходит для современных проектов.
Что нового появилось в Vite 6? Спойлер: разработчики точно оценят новые шаблоны и поддержку последних версий Node.js.
Подробности — в статье: https://htmlacademy.ru/blog/js/vite-6
HTML Academy
16 Jan, 08:08
https://css-tip.com/width-scrollbar/ – приём, который позволяет получить ширину скроллбара на чистом CSS
Николай Громов, ведущий разработчика интерфейсов компании Наука, о пользе этого приёма:
«Встречал несколько раз: при открытии модалки нужно блокировать скролл страницы, но если лифт есть и он не 0 пикселей, это вызовет "дергание" контента. Приходится добавлять padding справа, но как вычислять его размер? А вот и ответ»
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
Николай Громов, ведущий разработчика интерфейсов компании Наука, о пользе этого приёма:
«Встречал несколько раз: при открытии модалки нужно блокировать скролл страницы, но если лифт есть и он не 0 пикселей, это вызовет "дергание" контента. Приходится добавлять padding справа, но как вычислять его размер? А вот и ответ»
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
HTML Academy
15 Jan, 13:59
Читайте новые инструкции по CSS в блоге Академии:
Как передвинуть элемент на странице. CSS-свойство position
Как изменить цвет на странице. CSS-свойство color
Как изменить ширину элемента. свойство width
Как сделать фон на странице. css-свойство background
Как размыть картинку. css-свойство filter
#htmlacademy_статьи
Как передвинуть элемент на странице. CSS-свойство position
Как изменить цвет на странице. CSS-свойство color
Как изменить ширину элемента. свойство width
Как сделать фон на странице. css-свойство background
Как размыть картинку. css-свойство filter
#htmlacademy_статьи
HTML Academy
14 Jan, 13:58
Этот генератор
С помощью этого генератора вы можете создавать различные эффекты, такие как внутренняя подсветка текста или приподнятость элементов на странице. CSS-код для каждой тени может быть легко скопирован и использован на вашей странице.
Используйте этот генератор
#htmlacademy_статьи
box-shadow позволяет быстро и легко создавать стильные тени на вашем веб-сайте. Генератор позволяет добавлять до 10 теней с различными настройками, такими как горизонтальное и вертикальное смещение, размытие, прозрачность и цвет тени.С помощью этого генератора вы можете создавать различные эффекты, такие как внутренняя подсветка текста или приподнятость элементов на странице. CSS-код для каждой тени может быть легко скопирован и использован на вашей странице.
Используйте этот генератор
box-shadow, чтобы быстро и легко настроить тени на вашей странице и улучшить ее визуальный стиль — https://tml.io/yd6fm#htmlacademy_статьи
HTML Academy
14 Jan, 08:28
https://angularexperts.io/blog/typescript-decorators – cтатья с разбором полезных декораторов, написанных на TуpeScript, содержит примеры кода и объяснения, что и зачем было написано. Статья поможет лучше понять TуpeScript и разобраться, что такое декораторы и зачем они могут понадобиться.
Статьёй поделились разработчики компании «Открытые решения».
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотosinit
Статьёй поделились разработчики компании «Открытые решения».
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотosinit
HTML Academy
13 Jan, 16:52
Новый макет и новый компонент! Верстаем промо-блок из олимпиады по фронтенду от HTML Academy и Яндекса.
htmlacademy.ru/demos/173
В пятой части курса мы делаем разметку и базовую стилизацию десктопной версии промо-блока. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
htmlacademy.ru/demos/173
В пятой части курса мы делаем разметку и базовую стилизацию десктопной версии промо-блока. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
HTML Academy
13 Jan, 13:58
Учебник по Git и GitHub
Собрали бесплатный учебник, который поможет погрузиться в основы контроля версий и понять, чего же там от вас все хотят в первый рабочий день.
📖 Читать учебник
Собрали бесплатный учебник, который поможет погрузиться в основы контроля версий и понять, чего же там от вас все хотят в первый рабочий день.
📖 Читать учебник
HTML Academy
13 Jan, 08:08
https://usehooks.com – коллекция кастомных React хуков
Рекомендации по использованию от Николая Громова, ведущего разработчика интерфейсов компании Наука:
«Коллекция хорошая, но есть несколько "но":
1. Видимо, разумнее всего просто копипастить нужный хук (отсюда: https://github.com/uidotdev/usehooks/blob/main/index.js) в свой проект (обновления редки, а все хуки в исходнике - в одном файле, который весь будет взят в сборку).
2. Часть хуков требуют экспериментальных версий react и react-dom (видно по команде установки на странице хука).»
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
Рекомендации по использованию от Николая Громова, ведущего разработчика интерфейсов компании Наука:
«Коллекция хорошая, но есть несколько "но":
1. Видимо, разумнее всего просто копипастить нужный хук (отсюда: https://github.com/uidotdev/usehooks/blob/main/index.js) в свой проект (обновления редки, а все хуки в исходнике - в одном файле, который весь будет взят в сборку).
2. Часть хуков требуют экспериментальных версий react и react-dom (видно по команде установки на странице хука).»
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
HTML Academy
09 Jan, 09:24
Следите за розыгрышем в прямом эфире — сегодня в 20:00.
Эфир в YT | Рестрим в VK
HTML Academy
07 Jan, 08:50
✨ Золотой уровень открыт! ✨
Все участники новогодней недели — огромные молодцы! Поздравляем с этим впечатляющим достижением. Максимальное количество призов разблокировано.
Благодаря вашей активности вы выполнили 33 615 заданий и заработали 235 339 баллов. Теперь мы разыграем программы для мидлов, ещё больше самостоятельных программ и подарим каждому в топ-100 приятные бонусы.
До завершения новогодней недели осталось совсем немного времени. Если вы ещё сомневались — самое время попробовать тренажёры и влюбиться в веб-разработку.
Подробнее об акции | Telegram-бот
👍 Завершим новогоднюю неделю вместе!
Все участники новогодней недели — огромные молодцы! Поздравляем с этим впечатляющим достижением. Максимальное количество призов разблокировано.
Благодаря вашей активности вы выполнили 33 615 заданий и заработали 235 339 баллов. Теперь мы разыграем программы для мидлов, ещё больше самостоятельных программ и подарим каждому в топ-100 приятные бонусы.
До завершения новогодней недели осталось совсем немного времени. Если вы ещё сомневались — самое время попробовать тренажёры и влюбиться в веб-разработку.
Подробнее об акции | Telegram-бот
HTML Academy
05 Jan, 11:04
✨ Серебряный уровень открыт! ✨
Участники новогодней недели сделали это! Благодаря общей активности вы выполнили 22 469 заданий и заработали 162 853 балла — и это только начало! Теперь открыты призы серебряного уровня, которые разыграют не только топ-10, но и топ-100 участников.
Но это ещё не конец! Впереди золотой уровень с ещё более крутыми наградами! Чтобы приблизить общий успех, присоединяйтесь к акции, выполняйте задания, участвуйте в викторинах и зовите друзей — каждый ваш балл приближает всех к финальной цели!
Подробнее об акции | Telegram-бот
Участники новогодней недели сделали это! Благодаря общей активности вы выполнили 22 469 заданий и заработали 162 853 балла — и это только начало! Теперь открыты призы серебряного уровня, которые разыграют не только топ-10, но и топ-100 участников.
Но это ещё не конец! Впереди золотой уровень с ещё более крутыми наградами! Чтобы приблизить общий успех, присоединяйтесь к акции, выполняйте задания, участвуйте в викторинах и зовите друзей — каждый ваш балл приближает всех к финальной цели!
Подробнее об акции | Telegram-бот
HTML Academy
03 Jan, 07:30
Уже 3️⃣ день новогодней недели, и 👍 Кексобот начинает присылать подсказки и мотивацию.
HTML Academy
30 Dec, 12:10
Новогодняя неделя с
Выполняйте задания, участвуйте в викторинах, приглашайте друзей и следите за прогрессом. Призы ждут самых настойчивых!
Начинаем через 2 дня! Подробности и полный список призов смотрите на лендинге.
Объединяйтесь с друзьями, проходите тренажёры и зарабатывайте баллы.
HTML Academy
26 Dec, 07:11
Что вас ждёт?
Приглашайте друзей, чтобы ваше участие стало ещё веселее и продуктивнее! Чем активнее будут участники новогодней недели, тем больше призов разыграем в конце. Подробнее читайте на лендинге.
Подробнее об акции | Telegram-бот
HTML Academy
16 Dec, 08:55
Вместе с 5 углов мы готовим будущих разработчиков
Уже сегодня в 19:00 на эфире мы поговорим о программе обучения, на которой мы готовим специалистов под реальные задачи. Технический лидер компании 5 углов расскажет о перспективах для выпускников и ответит на ваши вопросы.
⭐️ Эфир в YT | Рестрим в VK | Записаться
Уже сегодня в 19:00 на эфире мы поговорим о программе обучения, на которой мы готовим специалистов под реальные задачи. Технический лидер компании 5 углов расскажет о перспективах для выпускников и ответит на ваши вопросы.
HTML Academy
12 Dec, 10:04
Прямой эфир с техническим лидером 5 углов: ваш шанс начать карьеру в компании!
HTML Academy и 5 углов запускают уникальную программу «Обучение под работодателя». Вы обучаетесь в малой группе, осваиваете нужные навыки, и, самое главное, получаете шанс присоединиться к команде 5 углов по завершении обучения.
Приходите на прямой эфир 16 декабря в 19:00, чтобы:
1️⃣ Узнать из первых уст о компании 5 углов и ближайших планах по найму.
2️⃣ Детально разобраться в программе: как она заточена под реальные требования рынка.
3️⃣ Получить ответы на все интересующие вопросы от представителей компании.
4️⃣ Понять, какие конкретные навыки вы освоите и как это поможет вам получить оффер от компании.
⭐️ Зарегистрируйтесь по ссылке — мы напомним вам о трансляции.
HTML Academy и 5 углов запускают уникальную программу «Обучение под работодателя». Вы обучаетесь в малой группе, осваиваете нужные навыки, и, самое главное, получаете шанс присоединиться к команде 5 углов по завершении обучения.
Приходите на прямой эфир 16 декабря в 19:00, чтобы:
HTML Academy
11 Dec, 15:54
Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.
https://htmlacademy.ru/demos/171
В четвёртой части мы завершаем вёрстку мобильной и планшетной версий шапки. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/171
В четвёртой части мы завершаем вёрстку мобильной и планшетной версий шапки. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
HTML Academy
11 Dec, 09:48
Помогите нам понять, в какое время лучше всего проводить прямой эфир на буднях?
HTML Academy
10 Dec, 15:00
Подключайтесь уже через час к прямому эфиру с ComonTECH. Поговорим о компании, программе обучения и перспективах работы.
Эфир в YT | Рестрим в VK | Записаться
Эфир в YT | Рестрим в VK | Записаться
HTML Academy
09 Dec, 13:49
Прямой эфир с ComonTECH: обучение под работодателя.
HTML Academy и ComonTECH запустили совместную программу, которая поможет вам вырасти с нуля до востребованного специалиста в команде компании. Обучение проходит в малых группах, а успешных выпускников приглашают в штат.
Приходите на лайв 10 декабря в 19:00, где мы расскажем о компании, программе обучения и ответим на все вопросы. Зарегистрируйтесь по ссылке — мы напомним о начале трансляции.
Ссылка
HTML Academy и ComonTECH запустили совместную программу, которая поможет вам вырасти с нуля до востребованного специалиста в команде компании. Обучение проходит в малых группах, а успешных выпускников приглашают в штат.
Приходите на лайв 10 декабря в 19:00, где мы расскажем о компании, программе обучения и ответим на все вопросы. Зарегистрируйтесь по ссылке — мы напомним о начале трансляции.
Ссылка
HTML Academy
04 Dec, 14:49
Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.
https://htmlacademy.ru/demos/169
В третьей части работаем над состояниями интерактивных компонентов шапки, опираясь на стайлгайд. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/169
В третьей части работаем над состояниями интерактивных компонентов шапки, опираясь на стайлгайд. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
HTML Academy
04 Dec, 12:06
✒️ Кодпен дня — «типа реалистичный текст»
Лукас Беббер накодил забавную демку, в которой можно посмотреть на любой текст так, будто он напечатан в книге.
70 строк CSS и капля JS: https://codepen.io/lbebber/pen/OJWNZV
Лукас Беббер накодил забавную демку, в которой можно посмотреть на любой текст так, будто он напечатан в книге.
70 строк CSS и капля JS: https://codepen.io/lbebber/pen/OJWNZV
HTML Academy
04 Dec, 09:17
3️⃣ День 3, сообщение от Кекса
Доброе утро, команда! Проснулись, потянулись, почистили зубы, позавтракали — пора снова за тренажёры. Сегодня у нас день точности! Заданий немного, но они совсем не простые. Придётся как следует подумать.
День точности
Сегодня мы серьёзно погрузимся в CSS-селекторы. У нас будет всё: от
В программе:
50 заданий и 6 испытаний. За их выполнение можно заработать 80 баллов.
Подробнее | Правила акции
Доброе утро, команда! Проснулись, потянулись, почистили зубы, позавтракали — пора снова за тренажёры. Сегодня у нас день точности! Заданий немного, но они совсем не простые. Придётся как следует подумать.
День точности
Сегодня мы серьёзно погрузимся в CSS-селекторы. У нас будет всё: от
::before и ::after до :nth-last-of-type, :only-child, :required, :optional и :checked. Тренируем селекторы, пока они не начнут вам сниться! Так что запасайтесь шоколадом — он точно пригодится.В программе:
50 заданий и 6 испытаний. За их выполнение можно заработать 80 баллов.
Подробнее | Правила акции
HTML Academy
03 Dec, 09:20
···
▷ Продвинутые возможности HTML · 19 заданий, 1 испытание
Вспомним, какие элементы входят в стандарт HTML, и научимся их правильно использовать. Попрактикуемся в добавлении на страницу аудио, видео и векторных изображений. Освоим подключение нестандартных шрифтов и познакомимся с крутыми возможностями CSS.
▷ Погружение в формы · 42 задания, 3 испытания
Разберём основы работы с формами: от базовых возможностей до продвинутых техник.
▷ Работа с таблицами · 20 заданий, 3 испытания
Изучим структуру таблиц: теги, количество строк и столбцов, объединение ячеек и оформление таблиц.
▷ Погружение в техники раскладок · 80 заданий, 9 испытания
Разберём основные методы создания раскладок: флексбоксы и гриды. Изучим основы, углубимся в детали и закрепим знания, сверстав несколько раскладок.
▷ Продвинутые возможности HTML · 19 заданий, 1 испытание
Вспомним, какие элементы входят в стандарт HTML, и научимся их правильно использовать. Попрактикуемся в добавлении на страницу аудио, видео и векторных изображений. Освоим подключение нестандартных шрифтов и познакомимся с крутыми возможностями CSS.
▷ Погружение в формы · 42 задания, 3 испытания
Разберём основы работы с формами: от базовых возможностей до продвинутых техник.
▷ Работа с таблицами · 20 заданий, 3 испытания
Изучим структуру таблиц: теги, количество строк и столбцов, объединение ячеек и оформление таблиц.
▷ Погружение в техники раскладок · 80 заданий, 9 испытания
Разберём основные методы создания раскладок: флексбоксы и гриды. Изучим основы, углубимся в детали и закрепим знания, сверстав несколько раскладок.
HTML Academy
03 Dec, 09:20
2️⃣ День 2
Совсем забыл рассказать! Пока вы проходите тренажёры, я собрал для вас тренировочный план. Каждый день я буду скидывать вам тренажёры, на которых стоит сосредоточиться.
Сегодня у нас день структуры: разберёмся со всеми элементами, подробнее изучим формы и таблицы, а затем возьмёмся за раскладки. Готовьтесь, тренировка сегодня будет насыщенной! Не забывайте делать перерывы между заданиями и пить воду.
В программе у нас 161 задание и 16 испытаний. За их выполнение можно заработать 241 балл.
Подробнее | Правила акции
Совсем забыл рассказать! Пока вы проходите тренажёры, я собрал для вас тренировочный план. Каждый день я буду скидывать вам тренажёры, на которых стоит сосредоточиться.
Сегодня у нас день структуры: разберёмся со всеми элементами, подробнее изучим формы и таблицы, а затем возьмёмся за раскладки. Готовьтесь, тренировка сегодня будет насыщенной! Не забывайте делать перерывы между заданиями и пить воду.
В программе у нас 161 задание и 16 испытаний. За их выполнение можно заработать 241 балл.
Подробнее | Правила акции
HTML Academy
02 Dec, 08:36
Открытая неделя началась! Доступ ко всем тренажёрам открыт.
С 2 по 8 декабря прокачайте навыки веб-разработки бесплатно. Выполняйте задания, зовите друзей, соревнуйтесь и выигрывайте крутые призы.
Переходите в бота и получайте доступ к открытой недели. Мы уже начали!
https://htmlacademy.ru/special/open-week/2024/december
С 2 по 8 декабря прокачайте навыки веб-разработки бесплатно. Выполняйте задания, зовите друзей, соревнуйтесь и выигрывайте крутые призы.
Переходите в бота и получайте доступ к открытой недели. Мы уже начали!
https://htmlacademy.ru/special/open-week/2024/december
HTML Academy
02 Dec, 05:58
Кодпен дня — отклеивалка
Джей Томпкинс сделал эту штуку на CSS, вообще без JS-кода.
Отвал всего в 368 строках CSS 👉 https://codepen.io/jh3y/pen/rNRdZMM
Джей Томпкинс сделал эту штуку на CSS, вообще без JS-кода.
Отвал всего в 368 строках CSS 👉 https://codepen.io/jh3y/pen/rNRdZMM
HTML Academy
29 Nov, 12:47
🎉 Открытая неделя в HTML Academy!
С 2 по 8 декабря мы вместе с партнёрами-работодателями открываем доступ ко всем тренажёрам @htmlacademy!
Что вас ждёт?
– Выполняйте задания и набирайте баллы.
– Проходите испытания и соревнуйтесь с другими участниками.
– Зовите друзей и получайте дополнительные бонусы!
Призы для самых активных
1. Бесплатное место на совместной программе обучения для компаний.
2. Курс «TypeScript: Теория типов».
3. Курс «Vite: свежий и быстрый инструмент сборки».
4. Курс «Введение в React.js».
🤖 Получить доступ к открытой неделе можно в нашем боте. Стартуем уже в понедельник!
С 2 по 8 декабря мы вместе с партнёрами-работодателями открываем доступ ко всем тренажёрам @htmlacademy!
Что вас ждёт?
– Выполняйте задания и набирайте баллы.
– Проходите испытания и соревнуйтесь с другими участниками.
– Зовите друзей и получайте дополнительные бонусы!
Призы для самых активных
1. Бесплатное место на совместной программе обучения для компаний.
2. Курс «TypeScript: Теория типов».
3. Курс «Vite: свежий и быстрый инструмент сборки».
4. Курс «Введение в React.js».
🤖 Получить доступ к открытой неделе можно в нашем боте. Стартуем уже в понедельник!
HTML Academy
28 Nov, 15:08
Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.
https://htmlacademy.ru/demos/167
Во второй части работаем над сеткой десктопной версии шапки и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/167
Во второй части работаем над сеткой десктопной версии шапки и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
HTML Academy
27 Nov, 12:29
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения в новом интерактивном курсе.
https://htmlacademy.ru/demos/165
В первой части работаем над разметкой и базовой стилизацией шапки. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/165
В первой части работаем над разметкой и базовой стилизацией шапки. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
HTML Academy
27 Nov, 10:53
⚡ Пока вы думаете, кто-то уже сделал шаг вперёд!
⏳ Осталось всего 𝟒 дня до конца «Чёрной пятницы», чтобы:
Новичкам — начать путь в программирование.
Мидл-специалистам — выйти на новый уровень карьеры.
И всё это со скидками до 𝟕𝟓%!
🎯 Выберите свой путь:
𝟕𝟎% — тренажёры и подписки для старта
𝟓𝟎% — пакеты мидл-курсов для прокачки
𝟕𝟓% — профессии лайт для нового этапа
𝟐𝟎% — профессия React-разработчик для работодателя Brew и Лига А
Будущее ваших навыков — за одним кликом.
👉 Успейте до 𝟑𝟎 ноября: tml.io/BF2024
Не ждите — действуйте!
⏳ Осталось всего 𝟒 дня до конца «Чёрной пятницы», чтобы:
Новичкам — начать путь в программирование.
Мидл-специалистам — выйти на новый уровень карьеры.
И всё это со скидками до 𝟕𝟓%!
🎯 Выберите свой путь:
𝟕𝟎% — тренажёры и подписки для старта
𝟓𝟎% — пакеты мидл-курсов для прокачки
𝟕𝟓% — профессии лайт для нового этапа
𝟐𝟎% — профессия React-разработчик для работодателя Brew и Лига А
Будущее ваших навыков — за одним кликом.
👉 Успейте до 𝟑𝟎 ноября: tml.io/BF2024
Не ждите — действуйте!
HTML Academy
26 Nov, 11:25
Создаём JavaScript-компонент для имитации посимвольного ввода текста. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/163
А ещё познакомимся с рекурсией.
#туториалотhtmlacademy #frontend #javascript
https://htmlacademy.ru/demos/163
А ещё познакомимся с рекурсией.
#туториалотhtmlacademy #frontend #javascript
HTML Academy
25 Nov, 08:03
Полезная шпаргалка по функции inset()
Поиграться вживую https://htmlacademy.ru/demos/151
#cheatsheet #frontend #css
Поиграться вживую https://htmlacademy.ru/demos/151
#cheatsheet #frontend #css
HTML Academy
21 Nov, 16:01
Знакомимся с сабгридами в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/161
Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.
#туториалотhtmlacademy #frontend #subgrid
https://htmlacademy.ru/demos/161
Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.
#туториалотhtmlacademy #frontend #subgrid
HTML Academy
21 Nov, 11:30
Полезная статья, в которой простым языком, с примерами, разобран новый control-flow для Angular v17 и выше. Полезно при переходе с версий ниже 17-й, а так же для понимания базовых методов манипуляции DOM через шаблоны компонент в свежих версиях.
https://angularexperts.io/blog/angular-control-flow
Статьёй поделились разработчики компании «Открытые решения».
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотosinit
https://angularexperts.io/blog/angular-control-flow
Статьёй поделились разработчики компании «Открытые решения».
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотosinit
HTML Academy
20 Nov, 12:44
Итак, типы или интерфейсы?
Если коротко – да как хочешь.
https://www.mykytam.com/blog/type-vs-interface/
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
Если коротко – да как хочешь.
https://www.mykytam.com/blog/type-vs-interface/
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
HTML Academy
18 Nov, 17:32
Визуализация flex-grow
#visualisation #css #flexbox #flexgrow
Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
#visualisation #css #flexbox #flexgrow
Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
HTML Academy
18 Nov, 16:01
Начался лайв с компанией Brew про обучение напрямую для работодателя
Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239533
Ютюб — https://www.youtube.com/live/_BdqAKVwPEg
Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239533
Ютюб — https://www.youtube.com/live/_BdqAKVwPEg
HTML Academy
18 Nov, 15:01
Через час, в 19:00, начнётся лайв с компанией Brew про обучение напрямую для работодателя.
Приходите на лайв, чтобы подробнее узнать о компании и программах обучения. Записаться на лайв можно по ссылке
https://htmlacademy.ru/events/live_brew
Приходите на лайв, чтобы подробнее узнать о компании и программах обучения. Записаться на лайв можно по ссылке
https://htmlacademy.ru/events/live_brew
HTML Academy
16 Nov, 14:00
⚡️Как сделать всплывающую подсказку
Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.
Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu
#htmlacademy_статьи
Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.
Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu
#htmlacademy_статьи
HTML Academy
16 Nov, 07:00
margin и padding одной картинкой.Вспомнить, что это 👉 https://tml.io/margin-padding
HTML Academy
15 Nov, 12:54
Разбираемся, как создавать объёмную иконку в стиле глассморфизма в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/159
Вы узнаете, как использовать свойства
#туториалотhtmlacademy
https://htmlacademy.ru/demos/159
Вы узнаете, как использовать свойства
mask и clip-path для "вырезания" элементов сложной формы, разберётесь, как использовать тени для создания объёма и как создавать эффект матового стекла с помощью backdrop-filter#туториалотhtmlacademy
HTML Academy
15 Nov, 08:01
Как выбрать <aside> и <article> при разметке страницы? Задавайте эти четыре вопроса.
А если не поможет, загляните в наш разбор.
А если не поможет, загляните в наш разбор.
HTML Academy
14 Nov, 11:01
Лайв с компанией Brew — обучение напрямую для работодателя
HTML Academy и Brew разработали совместную программу, цель которой — с нуля вырастить будущих сотрудников компании.
Обучение проходит в малой группе, успешные выпускники попадают в штат.
Приходите на лайв 18 ноября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.
https://htmlacademy.ru/events/live_brew
HTML Academy и Brew разработали совместную программу, цель которой — с нуля вырастить будущих сотрудников компании.
Обучение проходит в малой группе, успешные выпускники попадают в штат.
Приходите на лайв 18 ноября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.
https://htmlacademy.ru/events/live_brew
HTML Academy
14 Nov, 08:11
Научитесь настраивать внешний вид курсора с помощью свойства
https://htmlacademy.ru/demos/157
Вы познакомитесь с некоторыми системными курсорами, научитесь устанавливать пользовательские курсоры с помощью изображений и управлять их параметрами.
#туториалотhtmlacademy
cursor в новом бесплатном курсе. Наглядно, интерактивно, без воды.https://htmlacademy.ru/demos/157
Вы познакомитесь с некоторыми системными курсорами, научитесь устанавливать пользовательские курсоры с помощью изображений и управлять их параметрами.
#туториалотhtmlacademy
HTML Academy
13 Nov, 14:45
Научитесь легко и просто создавать маски ввода для популярных форматов данных в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/155
Вы поработаете с масками для номеров телефонов, банковских карт и дат. Познакомитесь и с более сложными масками.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/155
Вы поработаете с масками для номеров телефонов, банковских карт и дат. Познакомитесь и с более сложными масками.
#туториалотhtmlacademy
HTML Academy
13 Nov, 12:08
Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 25 ноября
Подробности программы и запись по ссылке:
https://tml.io/backender-maximum
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 25 ноября
Подробности программы и запись по ссылке:
https://tml.io/backender-maximum
HTML Academy
12 Nov, 14:12
Научитесь создавать компоненты, внешний вид которых полностью настраивается с помощью CSS-переменных, в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/153
На превью четыре разных индикатора загрузки. Но это один и тот же компонент с разными настройками внешнего вида.
Меняйте настройки на последнем шаге и делитесь результатами в комментариях!
#туториалотhtmlacademy
https://htmlacademy.ru/demos/153
На превью четыре разных индикатора загрузки. Но это один и тот же компонент с разными настройками внешнего вида.
Меняйте настройки на последнем шаге и делитесь результатами в комментариях!
#туториалотhtmlacademy
HTML Academy
11 Nov, 14:43
Визуализация схлопывания и выпадания маргинов
#visualization #css #margin
Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
#visualization #css #margin
Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
HTML Academy
08 Nov, 17:28
Создайте галерею с красивейшим скользящим эффектом при наведении в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/151
Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/151
Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.
#туториалотhtmlacademy
HTML Academy
07 Nov, 14:01
Создайте анимированный индикатор загрузки с эффектом пульсации в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/149
Лоадер реализован с помощью единственного тега и линейных градиентов.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/149
Лоадер реализован с помощью единственного тега и линейных градиентов.
#туториалотhtmlacademy
HTML Academy
07 Nov, 12:53
В рубрике «сегодня я узнал» прекрасная история про таинственный третий регистр текста, или почему по строке
https://habr.com/ru/articles/856784/
mad в венгерском нельзя найти строку madzag.https://habr.com/ru/articles/856784/
HTML Academy
07 Nov, 10:02
Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 11 ноября
Подробности программы и запись по ссылке:
https://tml.io/frontmaximum
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 11 ноября
Подробности программы и запись по ссылке:
https://tml.io/frontmaximum
HTML Academy
06 Nov, 16:31
Научитесь создавать вращающийся лоадер и использовать CSS-переменные для кардинального сокращения и упрощения стилей в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/147
#туториалотhtmlacademy
https://htmlacademy.ru/demos/147
#туториалотhtmlacademy
HTML Academy
05 Nov, 15:50
Научитесь верстать адаптивное оглавление в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/145
Изюминка этого компонента — сложные «точки-заполнители», которые отлично отображаются в любых условиях. Ключевую роль в реализации эффекта играют тонкости абсолютного позиционирования.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/145
Изюминка этого компонента — сложные «точки-заполнители», которые отлично отображаются в любых условиях. Ключевую роль в реализации эффекта играют тонкости абсолютного позиционирования.
#туториалотhtmlacademy
HTML Academy
04 Nov, 16:02
Визуализация математических CSS-функций
https://htmlacademy.ru/demos/143
В этой интерактивной визуализации мы познакомимся с математическими CSS-функциями, порисуем графики, повспоминаем линейную алгебру. Кстати, визуализация тоже сделана на чистом CSS.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/143
В этой интерактивной визуализации мы познакомимся с математическими CSS-функциями, порисуем графики, повспоминаем линейную алгебру. Кстати, визуализация тоже сделана на чистом CSS.
#туториалотhtmlacademy
HTML Academy
04 Nov, 11:17
С 4 по 10 ноября HTML Academy вместе с партнёрами-работодателями открывает доступ ко всем тренажёрам
https://htmlacademy.ru/special/open-week/2024/november
Зарабатывайте баллы за прохождение тренажёров и приглашение друзей. Самые активные участники получат бесплатные места на совместных программах обучения.
Правила акции читайте тут:
https://htmlacademy.ru/docs/action/open-week
https://htmlacademy.ru/special/open-week/2024/november
Зарабатывайте баллы за прохождение тренажёров и приглашение друзей. Самые активные участники получат бесплатные места на совместных программах обучения.
Правила акции читайте тут:
https://htmlacademy.ru/docs/action/open-week
HTML Academy
01 Nov, 16:01
Научитесь создавать прилипающие блоки aka «sticky headers» в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/141
Это хрестоматийный пример использования position: sticky.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/141
Это хрестоматийный пример использования position: sticky.
#туториалотhtmlacademy
HTML Academy
31 Oct, 13:51
Научитесь создавать цветовые темы и реализовывать их переключение на чистом CSS в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/139
Ключевую роль в этой технике играют :has и CSS-переменные.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/139
Ключевую роль в этой технике играют :has и CSS-переменные.
#туториалотhtmlacademy
HTML Academy
30 Oct, 15:05
Создадим адаптивную галерею с "резиной" и фиксированными пропорциями изображений в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/137
Вы познакомитесь со свойствами aspect-ratio и object-fit, а также поэкспериментируете с адаптивностью от контейнера, Container Queries.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/137
Вы познакомитесь со свойствами aspect-ratio и object-fit, а также поэкспериментируете с адаптивностью от контейнера, Container Queries.
#туториалотhtmlacademy
HTML Academy
29 Oct, 08:23
Научитесь создавать круговые диаграммы с помощью конических CSS-градиентов в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/135
Помимо конических градиентов вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/135
Помимо конических градиентов вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.
#туториалотhtmlacademy
HTML Academy
28 Oct, 08:09
Заглянем в будущее и узнаем, как на чистом CSS создавать анимации, управляемые прокруткой в новом бесплатном курсе.
https://htmlacademy.ru/demos/133
Мы создадим индикатор прочтения статьи без всякого JavaScript, с помощью scroll-timeline. Это новейшая технология, которая есть ещё не во всех браузерах. Рекомендуем смотреть демонстрацию в Chrome.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/133
Мы создадим индикатор прочтения статьи без всякого JavaScript, с помощью scroll-timeline. Это новейшая технология, которая есть ещё не во всех браузерах. Рекомендуем смотреть демонстрацию в Chrome.
#туториалотhtmlacademy
HTML Academy
25 Oct, 16:02
Создайте интерактивный индикатор для поля ввода на JavaScript в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/131
#туториалотhtmlacademy
https://htmlacademy.ru/demos/131
#туториалотhtmlacademy
HTML Academy
24 Oct, 16:02
Начался лайв с компанией Максимум про обучение напрямую для работодателя
Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239509
Ютюб — https://www.youtube.com/live/sbN8jysfjbE
Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239509
Ютюб — https://www.youtube.com/live/sbN8jysfjbE
HTML Academy
24 Oct, 15:01
Через час, в 19:00, начнётся лайв с компанией Максимум про обучение напрямую для работодателя.
Приходите на лайв, чтобы подробнее узнать о компании и программах обучения. Записаться на лайв можно по ссылке
https://htmlacademy.ru/events/live_maximum
Приходите на лайв, чтобы подробнее узнать о компании и программах обучения. Записаться на лайв можно по ссылке
https://htmlacademy.ru/events/live_maximum
HTML Academy
24 Oct, 12:01
Узнайте, как работать с 3D-трансформациями и создайте анимированный куб в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/129
Вы разберётесь, как использовать 3D-трансформации, увидите, какой эффект дают свойства perspective и backface-visibility, поймёте принцип работы множественных трансформаций.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/129
Вы разберётесь, как использовать 3D-трансформации, увидите, какой эффект дают свойства perspective и backface-visibility, поймёте принцип работы множественных трансформаций.
#туториалотhtmlacademy
HTML Academy
23 Oct, 16:26
Научитесь создавать кнопки со сложными анимационными эффектами в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/127
Вы разберётесь, как использовать CSS-трансформации, тени и плавные переходы для создания иллюзии подъёма и вращения при наведении.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/127
Вы разберётесь, как использовать CSS-трансформации, тени и плавные переходы для создания иллюзии подъёма и вращения при наведении.
#туториалотhtmlacademy
HTML Academy
23 Oct, 10:26
Лайв с компанией Максимум — обучение напрямую для работодателя
HTML Academy и Максимум разработали несколько совместных программ, цель которых — с нуля вырастить будущих сотрудников компании.
Обучение проходит в малой группе, успешные выпускники попадают в штат.
Приходите на лайв 24 октября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.
https://htmlacademy.ru/events/live_maximum
HTML Academy и Максимум разработали несколько совместных программ, цель которых — с нуля вырастить будущих сотрудников компании.
Обучение проходит в малой группе, успешные выпускники попадают в штат.
Приходите на лайв 24 октября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.
https://htmlacademy.ru/events/live_maximum
HTML Academy
23 Oct, 10:01
Вопрос дня #4
Девочка Света была известна своей внимательностью и любовью к программированию.
Она определила переменную a, равную трём с половиной, умножила b на 3, прибавила к результату корень (то ли квадратный, то ли кубический) из 19389, сложила результат со строкой NaNaNa, поделила его на семь и вывела результат в консоль.
Чему в итоге оказалась равна переменная a?
Девочка Света была известна своей внимательностью и любовью к программированию.
Она определила переменную a, равную трём с половиной, умножила b на 3, прибавила к результату корень (то ли квадратный, то ли кубический) из 19389, сложила результат со строкой NaNaNa, поделила его на семь и вывела результат в консоль.
Чему в итоге оказалась равна переменная a?
HTML Academy
23 Oct, 06:01
Выводим внешний контур на чистом CSS
В этом нам поможет свойство
👀 Подробнее об
В итоге мы не просто нарисовали рамку, а использовали средства для вывода внешнего контура.
Добавьте в избранное, чтобы не потерять!
В этом нам поможет свойство
outline. В отличие от border, контур череp outline не влияет на размеры элемента и может быть смещён от его границ с помощью outline-offset. 👀 Подробнее об
outline:outline-style: стиль контура (сплошной, пунктирный и т.д.)outline-width: ширина outline-color: цвет;outline-offset: отступ от границы элемента.В итоге мы не просто нарисовали рамку, а использовали средства для вывода внешнего контура.
Добавьте в избранное, чтобы не потерять!
HTML Academy
22 Oct, 11:36
Научитесь создавать красивый эффект при наведении, похожий на работу затвора фотоаппарата, в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/125
Ключевую роль в реализации эффекта играют, сюрприз, CSS-тени. Откройте для себя новые тонкости работы привычных теней.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/125
Ключевую роль в реализации эффекта играют, сюрприз, CSS-тени. Откройте для себя новые тонкости работы привычных теней.
#туториалотhtmlacademy
HTML Academy
22 Oct, 07:59
широкий_кекс.жпг
Когда картинка не соответствует размеру бокса, но её всё равно нужно добавить, используйте
С помощью
Разбор свойства 👉️️️️ https://htmlacademy.ru/blog/css/objectfit
Когда картинка не соответствует размеру бокса, но её всё равно нужно добавить, используйте
object-fit. Он определяет, как элемент реагирует на размеры своего бокса.С помощью
object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.Разбор свойства 👉️️️️ https://htmlacademy.ru/blog/css/objectfit
HTML Academy
21 Oct, 08:42
Познакомьтесь с неоморфизмом и разберитесь, как реализовывать неофоморфные кнопки разной сложности в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/123
#туториалотhtmlacademy
https://htmlacademy.ru/demos/123
#туториалотhtmlacademy
HTML Academy
18 Oct, 15:56
Можете ли вы сделать красивую градиентную рамку с помощью одного контейнера, без дополнительных обёрток и псевдоэлементов? Да ещё и анимировать её. Раскрываем секретные приёмы в новом интерактивном туториале
https://htmlacademy.ru/demos/121
Ключевую роль в этом приёме играют свойство
#туториалотhtmlacademy
https://htmlacademy.ru/demos/121
Ключевую роль в этом приёме играют свойство
background-origin и директива property.#туториалотhtmlacademy
HTML Academy
17 Oct, 16:01
Вторая часть курса про CSS-переменные для начинающих и опытных разработчиков, в которой появляются настоящие киллер-фичи. Кратко, интерактивно, без воды.
https://htmlacademy.ru/demos/119
Разберёмся, как разбивать на части многокомпонентные CSS-значения и удобно работать с отдельным компонентами. Что незаменимо при работе с цветами, тенями, градиентами, анимациями и другими составными CSS-значениями.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/119
Разберёмся, как разбивать на части многокомпонентные CSS-значения и удобно работать с отдельным компонентами. Что незаменимо при работе с цветами, тенями, градиентами, анимациями и другими составными CSS-значениями.
#туториалотhtmlacademy
HTML Academy
17 Oct, 09:48
Простейшие советы для улучшения доступности.
https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/
В том числе и использование списков, которые мы тоже очень любим.
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/
В том числе и использование списков, которые мы тоже очень любим.
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
HTML Academy
16 Oct, 16:29
Первая часть интерактивного курса про CSS-переменные для начинающих и опытных разработчиков. Кратко, интерактивно, без воды.
https://htmlacademy.ru/demos/117
Бета-версия для мобильных
https://htmlacademy.ru/demos-mobile/117
Познакомимся с синтаксисом CSS Custom Properties и типовыми примерами их использования.
#туториалотhtmlacademy
https://htmlacademy.ru/demos/117
Бета-версия для мобильных
https://htmlacademy.ru/demos-mobile/117
Познакомимся с синтаксисом CSS Custom Properties и типовыми примерами их использования.
#туториалотhtmlacademy
HTML Academy
15 Oct, 10:36
Мечтали о нативной CSS-функции, которая возвращает порядковый номер текущего элемента? Или чтобы attr() можно было использовать везде? Всё это готовится в одной из будущих спецификаций! Вот анонс предстоящих обновлений:
https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS
Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:
«Не слишком люблю подобные анонсы, ибо
1. сильно похоже на "мы построим базу на Луне через 4 года".
2. использовать сейчас нельзя.
Однако как мечты и фантазии, имеющие вероятность воплощения - любопытно.»
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS
Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:
«Не слишком люблю подобные анонсы, ибо
1. сильно похоже на "мы построим базу на Луне через 4 года".
2. использовать сейчас нельзя.
Однако как мечты и фантазии, имеющие вероятность воплощения - любопытно.»
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
HTML Academy
15 Oct, 08:21
Создаём простую и красивую анимацию волн в новом интерактивном туториале
https://htmlacademy.ru/demos/109
В реализации используются CSS-анимации. Ключевую роль для создания эффекта многослойности играет свойство opacity.
#туториалотhtmlacademy #html #css
https://htmlacademy.ru/demos/109
В реализации используются CSS-анимации. Ключевую роль для создания эффекта многослойности играет свойство opacity.
#туториалотhtmlacademy #html #css
HTML Academy
14 Oct, 14:00
Бесплатный учебник для изучения Git и GitHub
Git и GitHub — системы контроля версий с возможностью отслеживать все изменения в коде.
Новичкам GitHub помогает в создании портфолио, чтобы показать качество кода на собеседовании, практикующим разработчикам Git нужен для синхронизации работы в команде.
В начале изучения Git и GitHub легко запутаться в пушах и пулах. В помощь вам — собрали всё важное, что нужно знать о гите в учебник. В 11 главах познакомитесь с основными командами, узнаете, как настроить Git в VS Сode или консоли.
Читайте, добавляйте в закладки 👉️️ Читать
Git и GitHub — системы контроля версий с возможностью отслеживать все изменения в коде.
Новичкам GitHub помогает в создании портфолио, чтобы показать качество кода на собеседовании, практикующим разработчикам Git нужен для синхронизации работы в команде.
В начале изучения Git и GitHub легко запутаться в пушах и пулах. В помощь вам — собрали всё важное, что нужно знать о гите в учебник. В 11 главах познакомитесь с основными командами, узнаете, как настроить Git в VS Сode или консоли.
Читайте, добавляйте в закладки 👉️️ Читать
HTML Academy
14 Oct, 08:03
Создаём галерею с красивой анимацией переключения слайдов в новом интерактивном туториале
https://htmlacademy.ru/demos/115
При переключении слайдов используются CSS-трансформации. Ключевую роль играют transform-origin и animation-fill-mode.
#туториалотhtmlacademy #html #css #javascript
https://htmlacademy.ru/demos/115
При переключении слайдов используются CSS-трансформации. Ключевую роль играют transform-origin и animation-fill-mode.
#туториалотhtmlacademy #html #css #javascript
HTML Academy
13 Oct, 14:02
Дизайн для верстальщиков. Частые ошибки дизайнеров и способы их исправить
Дизайн-макет без единой ошибки — это что-то из параллельной вселенной, где существуют идеальные процессы и идеальные инструменты, которые позволяют создавать его без единого недочета и упущения.
Но, мы живём в реальном мире. Дизайнер может что-то забыть, не перепроверить проект по чек-листу, не подумать о редких сценариях, ошибиться или просто чего-то не знать.
Какие ошибки встречаются чаще всего и как их решить верстальщику самостоятельно
Дизайн-макет без единой ошибки — это что-то из параллельной вселенной, где существуют идеальные процессы и идеальные инструменты, которые позволяют создавать его без единого недочета и упущения.
Но, мы живём в реальном мире. Дизайнер может что-то забыть, не перепроверить проект по чек-листу, не подумать о редких сценариях, ошибиться или просто чего-то не знать.
Какие ошибки встречаются чаще всего и как их решить верстальщику самостоятельно
HTML Academy
12 Oct, 14:01
10 горячих клавиш VS Code, которые ускорят вашу работу
Горячие клавиши — добро, польза и экономия времени.
Разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
Горячие клавиши — добро, польза и экономия времени.
Разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
HTML Academy
12 Oct, 07:01
Middle-Weekend: Скидки до 50%!
Только три дня – с 11 по 13 октября – доступ к лучшим курсам и пакетам для мидлов со скидками до 50%.
Что тебя ждет:
– Курсы для мидлов: обнови свои знания и овладей самыми актуальными технологиями.
– Пакеты для мидлов: комплексные программы обучения с максимальной выгодой. Как получить скидку?
Просто введи промокод SKIDON при оплате на сайте или оставь заявку по ссылке.
Не упусти шанс улучшить свои навыки и сделать следующий шаг в карьере!
Только три дня – с 11 по 13 октября – доступ к лучшим курсам и пакетам для мидлов со скидками до 50%.
Что тебя ждет:
– Курсы для мидлов: обнови свои знания и овладей самыми актуальными технологиями.
– Пакеты для мидлов: комплексные программы обучения с максимальной выгодой. Как получить скидку?
Просто введи промокод SKIDON при оплате на сайте или оставь заявку по ссылке.
Не упусти шанс улучшить свои навыки и сделать следующий шаг в карьере!
11,368
subscribers
4,933
photos
91
videos
![Frontender's notes [ru] Telegram Channel](/avatar/1306/1306975317.jpg)
