HTML Academy @htmlacademy Channel on Telegram

HTML Academy

@htmlacademy

Курсы по веб-разработке — вёрстка, программирование, работа и комьюнити.

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

Ролики на Ютубе https://www.youtube.com/@HTMLAcademyTV

HTML Academy (Russian)

HTML Academy - это канал, предназначенный для всех, кто интересуется веб-разработкой. Здесь вы найдете курсы по вёрстке, программированию, работе и комьюнити. Наш канал поможет вам освоить основы и продвинутые темы веб-разработки, а также научиться применять их на практике. У нас вы сможете задавать вопросы по обучению, связавшись с нами через @htmlacademy_sales. Кроме того, мы регулярно выкладываем полезные видеоролики на нашем YouTube канале, который доступен по ссылке https://www.youtube.com/@HTMLAcademyTV. Присоединяйтесь к нам, учите новое и развивайтесь вместе с HTML Academy!

HTML Academy

21 Nov, 11:30

Полезная статья, в которой простым языком, с примерами, разобран новый control-flow для Angular v17 и выше. Полезно при переходе с версий ниже 17-й, а так же для понимания базовых методов манипуляции DOM через шаблоны компонент в свежих версиях.

https://angularexperts.io/blog/angular-control-flow

Статьёй поделились разработчики компании «Открытые решения».

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотosinit
427
HTML Academy

20 Nov, 12:44

Итак, типы или интерфейсы?
Если коротко – да как хочешь.

https://www.mykytam.com/blog/type-vs-interface/

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka
957
HTML Academy

18 Nov, 17:32

Визуализация flex-grow

#visualisation #css #flexbox #flexgrow

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
1,396
HTML Academy

18 Nov, 16:01

Начался лайв с компанией Brew про обучение напрямую для работодателя

Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239533
Ютюб — https://www.youtube.com/live/_BdqAKVwPEg
1,248
HTML Academy

18 Nov, 15:01

Через час, в 19:00, начнётся лайв с компанией Brew про обучение напрямую для работодателя.

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

https://htmlacademy.ru/events/live_brew
1,333
HTML Academy

18 Nov, 06:16

Наконец-то CSS, который мы заслужили
1,569
HTML Academy

16 Nov, 14:00

⚡️Как сделать всплывающую подсказку

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

Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu

#htmlacademy_статьи
1,687
HTML Academy

16 Nov, 07:00

margin и padding одной картинкой.

Вспомнить, что это 👉 https://tml.io/margin-padding
1,572
HTML Academy

15 Nov, 12:54

Разбираемся, как создавать объёмную иконку в стиле глассморфизма в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/159

Вы узнаете, как использовать свойства mask и clip-path для "вырезания" элементов сложной формы, разберётесь, как использовать тени для создания объёма и как создавать эффект матового стекла с помощью backdrop-filter

#туториалотhtmlacademy
1,631
HTML Academy

15 Nov, 08:01

Как выбрать <aside> и <article> при разметке страницы? Задавайте эти четыре вопроса.

А если не поможет, загляните в наш разбор.
1,676
HTML Academy

14 Nov, 11:01

Лайв с компанией Brew — обучение напрямую для работодателя

HTML Academy и Brew разработали совместную программу, цель которой — с нуля вырастить будущих сотрудников компании.

Обучение проходит в малой группе, успешные выпускники попадают в штат.

Приходите на лайв 18 ноября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.

https://htmlacademy.ru/events/live_brew
1,798
HTML Academy

14 Nov, 08:11

Научитесь настраивать внешний вид курсора с помощью свойства cursor в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/157

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

#туториалотhtmlacademy
1,807
HTML Academy

13 Nov, 14:45

Научитесь легко и просто создавать маски ввода для популярных форматов данных в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/155

Вы поработаете с масками для номеров телефонов, банковских карт и дат. Познакомитесь и с более сложными масками.

#туториалотhtmlacademy
1,879
HTML Academy

13 Nov, 12:08

Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 25 ноября

Подробности программы и запись по ссылке:
https://tml.io/backender-maximum
1,706
HTML Academy

12 Nov, 14:12

Научитесь создавать компоненты, внешний вид которых полностью настраивается с помощью CSS-переменных, в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/153

На превью четыре разных индикатора загрузки. Но это один и тот же компонент с разными настройками внешнего вида.

Меняйте настройки на последнем шаге и делитесь результатами в комментариях!

#туториалотhtmlacademy
1,925
HTML Academy

11 Nov, 14:43

Визуализация схлопывания и выпадания маргинов

#visualization #css #margin

Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
2,035
HTML Academy

08 Nov, 17:28

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

https://htmlacademy.ru/demos/151

Вы научитесь пользоваться свойством clip-path, разберётесь с синтаксисом функции inset(), а также познакомитесь с продвинутой техникой использования :has.

#туториалотhtmlacademy
2,369
HTML Academy

07 Nov, 14:01

Создайте анимированный индикатор загрузки с эффектом пульсации в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/149

Лоадер реализован с помощью единственного тега и линейных градиентов.

#туториалотhtmlacademy
2,312
HTML Academy

07 Nov, 12:53

В рубрике «сегодня я узнал» прекрасная история про таинственный третий регистр текста, или почему по строке mad в венгерском нельзя найти строку madzag.

https://habr.com/ru/articles/856784/
2,182
HTML Academy

07 Nov, 10:02

Идёт набор на совместную программу обучения для компании Максимум:
— Обучение напрямую для работодателя
— Малая группа — 10 человек
— Старт — 11 ноября

Подробности программы и запись по ссылке:
https://tml.io/frontmaximum
2,184
HTML Academy

06 Nov, 16:31

Научитесь создавать вращающийся лоадер и использовать CSS-переменные для кардинального сокращения и упрощения стилей в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/147

#туториалотhtmlacademy
2,071
HTML Academy

05 Nov, 15:50

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

https://htmlacademy.ru/demos/145

Изюминка этого компонента — сложные «точки-заполнители», которые отлично отображаются в любых условиях. Ключевую роль в реализации эффекта играют тонкости абсолютного позиционирования.

#туториалотhtmlacademy
2,074
HTML Academy

04 Nov, 16:02

Визуализация математических CSS-функций

https://htmlacademy.ru/demos/143

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

#туториалотhtmlacademy
2,286
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
4,160
HTML Academy

01 Nov, 16:01

Научитесь создавать прилипающие блоки aka «sticky headers» в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/141

Это хрестоматийный пример использования position: sticky.

#туториалотhtmlacademy
1,403
HTML Academy

31 Oct, 13:51

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

https://htmlacademy.ru/demos/139

Ключевую роль в этой технике играют :has и CSS-переменные.

#туториалотhtmlacademy
1,737
HTML Academy

30 Oct, 15:05

Создадим адаптивную галерею с "резиной" и фиксированными пропорциями изображений в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/137

Вы познакомитесь со свойствами aspect-ratio и object-fit, а также поэкспериментируете с адаптивностью от контейнера, Container Queries.

#туториалотhtmlacademy
1,779
HTML Academy

29 Oct, 08:23

Научитесь создавать круговые диаграммы с помощью конических CSS-градиентов в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/135

Помимо конических градиентов вы узнаете как использовать CSS-маски для вырезания прозрачных областей в элементах и создадите круговую диаграмму-бублик.

#туториалотhtmlacademy
1,818
HTML Academy

28 Oct, 08:09

Заглянем в будущее и узнаем, как на чистом CSS создавать анимации, управляемые прокруткой в новом бесплатном курсе.

https://htmlacademy.ru/demos/133

Мы создадим индикатор прочтения статьи без всякого JavaScript, с помощью scroll-timeline. Это новейшая технология, которая есть ещё не во всех браузерах. Рекомендуем смотреть демонстрацию в Chrome.

#туториалотhtmlacademy
1,968
HTML Academy

25 Oct, 16:02

Создайте интерактивный индикатор для поля ввода на JavaScript в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/131

#туториалотhtmlacademy
2,173
HTML Academy

24 Oct, 16:02

Начался лайв с компанией Максимум про обучение напрямую для работодателя

Присоединяйтесь по ссылкам:
ВК — https://vk.com/video-38306835_456239509
Ютюб — https://www.youtube.com/live/sbN8jysfjbE
2,067
HTML Academy

24 Oct, 15:01

Через час, в 19:00, начнётся лайв с компанией Максимум про обучение напрямую для работодателя.

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

https://htmlacademy.ru/events/live_maximum
1,773
HTML Academy

24 Oct, 12:01

Узнайте, как работать с 3D-трансформациями и создайте анимированный куб в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/129

Вы разберётесь, как использовать 3D-трансформации, увидите, какой эффект дают свойства perspective и backface-visibility, поймёте принцип работы множественных трансформаций.

#туториалотhtmlacademy
1,813
HTML Academy

23 Oct, 16:26

Научитесь создавать кнопки со сложными анимационными эффектами в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/127

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

#туториалотhtmlacademy
1,978
HTML Academy

23 Oct, 10:26

Лайв с компанией Максимум — обучение напрямую для работодателя

HTML Academy и Максимум разработали несколько совместных программ, цель которых — с нуля вырастить будущих сотрудников компании.

Обучение проходит в малой группе, успешные выпускники попадают в штат.

Приходите на лайв 24 октября в 19:00, чтобы подробнее узнать о компании и программах обучения. Регистрируйтесь по ссылке, чтобы мы напомнили вам о старте мероприятия.

https://htmlacademy.ru/events/live_maximum
1,795
HTML Academy

23 Oct, 10:01

Вопрос дня #4

Девочка Света была известна своей внимательностью и любовью к программированию.

Она определила переменную a, равную трём с половиной, умножила b на 3, прибавила к результату корень (то ли квадратный, то ли кубический) из 19389, сложила результат со строкой NaNaNa, поделила его на семь и вывела результат в консоль.

Чему в итоге оказалась равна переменная a?
1,747
HTML Academy

23 Oct, 06:01

Выводим внешний контур на чистом CSS

В этом нам поможет свойство outline. В отличие от border, контур череp outline не влияет на размеры элемента и может быть смещён от его границ с помощью outline-offset.

👀 Подробнее об outline:

outline-style: стиль контура (сплошной, пунктирный и т.д.)
outline-width: ширина
outline-color: цвет;
outline-offset: отступ от границы элемента.

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

Добавьте в избранное, чтобы не потерять!
1,837
HTML Academy

22 Oct, 11:36

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

https://htmlacademy.ru/demos/125

Ключевую роль в реализации эффекта играют, сюрприз, CSS-тени. Откройте для себя новые тонкости работы привычных теней.

#туториалотhtmlacademy
1,752
HTML Academy

22 Oct, 07:59

широкий_кекс.жпг

Когда картинка не соответствует размеру бокса, но её всё равно нужно добавить, используйте object-fit. Он определяет, как элемент реагирует на размеры своего бокса.

С помощью object-fit можно обрезать встроенное изображение и определить, как оно будет сжиматься и растягиваться.

Разбор свойства 👉️️️️ https://htmlacademy.ru/blog/css/objectfit
1,650
HTML Academy

21 Oct, 08:42

Познакомьтесь с неоморфизмом и разберитесь, как реализовывать неофоморфные кнопки разной сложности в новом бесплатном курсе. Наглядно, интерактивно, без воды.

https://htmlacademy.ru/demos/123

#туториалотhtmlacademy
1,828
HTML Academy

18 Oct, 15:56

Можете ли вы сделать красивую градиентную рамку с помощью одного контейнера, без дополнительных обёрток и псевдоэлементов? Да ещё и анимировать её. Раскрываем секретные приёмы в новом интерактивном туториале

https://htmlacademy.ru/demos/121

Ключевую роль в этом приёме играют свойство background-origin и директива property.

#туториалотhtmlacademy
1,940
HTML Academy

17 Oct, 16:01

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

https://htmlacademy.ru/demos/119

Разберёмся, как разбивать на части многокомпонентные CSS-значения и удобно работать с отдельным компонентами. Что незаменимо при работе с цветами, тенями, градиентами, анимациями и другими составными CSS-значениями.

#туториалотhtmlacademy
1,814
HTML Academy

17 Oct, 09:48

Простейшие советы для улучшения доступности.

https://piccalil.li/blog/practical-accessibility-tips-you-can-apply-today/

В том числе и использование списков, которые мы тоже очень любим.

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka
1,820
HTML Academy

16 Oct, 16:29

Первая часть интерактивного курса про CSS-переменные для начинающих и опытных разработчиков. Кратко, интерактивно, без воды.

https://htmlacademy.ru/demos/117

Бета-версия для мобильных
https://htmlacademy.ru/demos-mobile/117

Познакомимся с синтаксисом CSS Custom Properties и типовыми примерами их использования.

#туториалотhtmlacademy
1,829
HTML Academy

15 Oct, 10:36

Мечтали о нативной CSS-функции, которая возвращает порядковый номер текущего элемента? Или чтобы attr() можно было использовать везде? Всё это готовится в одной из будущих спецификаций! Вот анонс предстоящих обновлений:

https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS

Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:

«Не слишком люблю подобные анонсы, ибо
1. сильно похоже на "мы построим базу на Луне через 4 года".
2. использовать сейчас нельзя.
Однако как мечты и фантазии, имеющие вероятность воплощения - любопытно.»

---

Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».

#полезноеотработодателей #полезноеотnauka
1,952
HTML Academy

15 Oct, 08:21

Создаём простую и красивую анимацию волн в новом интерактивном туториале

https://htmlacademy.ru/demos/109

В реализации используются CSS-анимации. Ключевую роль для создания эффекта многослойности играет свойство opacity.

#туториалотhtmlacademy #html #css
1,834
HTML Academy

14 Oct, 14:00

Бесплатный учебник для изучения Git и GitHub

Git и GitHub — системы контроля версий с возможностью отслеживать все изменения в коде.

Новичкам GitHub помогает в создании портфолио, чтобы показать качество кода на собеседовании, практикующим разработчикам Git нужен для синхронизации работы в команде.

В начале изучения Git и GitHub легко запутаться в пушах и пулах. В помощь вам — собрали всё важное, что нужно знать о гите в учебник. В 11 главах познакомитесь с основными командами, узнаете, как настроить Git в VS Сode или консоли.

Читайте, добавляйте в закладки 👉️️ Читать
1,959
HTML Academy

14 Oct, 08:03

Создаём галерею с красивой анимацией переключения слайдов в новом интерактивном туториале

https://htmlacademy.ru/demos/115

При переключении слайдов используются CSS-трансформации. Ключевую роль играют transform-origin и animation-fill-mode.

#туториалотhtmlacademy #html #css #javascript
1,893
HTML Academy

13 Oct, 14:02

Дизайн для верстальщиков. Частые ошибки дизайнеров и способы их исправить

Дизайн-макет без единой ошибки — это что-то из параллельной вселенной, где существуют идеальные процессы и идеальные инструменты, которые позволяют создавать его без единого недочета и упущения.

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

Какие ошибки встречаются чаще всего и как их решить верстальщику самостоятельно
1,892
HTML Academy

12 Oct, 14:01

10 горячих клавиш VS Code, которые ускорят вашу работу

Горячие клавиши — добро, польза и экономия времени.

Разберёмся, как с их помощью упростить себе жизнь в Visual Studio Code.
2,223
HTML Academy

12 Oct, 07:01

Middle-Weekend: Скидки до 50%!

Только три дня – с 11 по 13 октября – доступ к лучшим курсам и пакетам для мидлов со скидками до 50%.

Что тебя ждет:

– Курсы для мидлов: обнови свои знания и овладей самыми актуальными технологиями.
– Пакеты для мидлов: комплексные программы обучения с максимальной выгодой. Как получить скидку?

Просто введи промокод SKIDON при оплате на сайте или оставь заявку по ссылке.

Не упусти шанс улучшить свои навыки и сделать следующий шаг в карьере!
1,922

2024 All Right Reserved

Disclaimer: The content displayed on this website is solely provided by the respective Telegram channels. We hold no ownership or responsibility for the content shared by these channels.