This media is not supported in your browser
VIEW IN TELEGRAM
Разбираемся, как создавать объёмную иконку в стиле глассморфизма в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/159
Вы узнаете, как использовать свойства
#туториалотhtmlacademy
https://htmlacademy.ru/demos/159
Вы узнаете, как использовать свойства
mask и clip-path для "вырезания" элементов сложной формы, разберётесь, как использовать тени для создания объёма и как создавать эффект матового стекла с помощью backdrop-filter#туториалотhtmlacademy
👍12👏4❤🔥1
Автор написал собственный CSS-резет. Не общепринятый и популярный резет, не модификацию общепринятого резета, а просто свой небольшой резетик. А в статье объясняет, почему он так устроен. Рекомендуем для осторожного ознакомления с большой долей скепсиса
https://www.joshwcomeau.com/css/custom-css-reset/
Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
https://www.joshwcomeau.com/css/custom-css-reset/
Комментарий от Николая Громова, ведущего разработчика интерфейсов компании Наука:
Модернизированный CSS-reset. Интересная штука с объяснением что для чего нужно. Местами холиварная (интерлиньяж, кровавое убийство margin-ов), но никто не мешает взять это не целиком...
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
👍8❤2
⚡️Как сделать всплывающую подсказку
Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.
Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu
#htmlacademy_статьи
Всплывающая подсказка — это небольшой блок, его также называют тултип, который появляется при наведении или нажатии на элемент. Цель такого блока — дать более подробную информацию о содержимом элемента. Часто тултипы используются вместе с формами, чтобы добавлять пояснения к полям.
Подсказку можно сделать, создав отдельный элемент в HTML-разметке и прописав ему нужные стили в CSS. В статье подробно рассмотрим процесс создания тултипа — https://tml.io/hvgnu
#htmlacademy_статьи
HTML Academy
Как сделать всплывающую подсказку
Просто и быстро на CSS.
👍13❤🔥3
Через час, в 19:00, начнётся лайв с компанией Brew про обучение напрямую для работодателя.
Приходите на лайв, чтобы подробнее узнать о компании и программах обучения. Записаться на лайв можно по ссылке
https://htmlacademy.ru/events/live_brew
Приходите на лайв, чтобы подробнее узнать о компании и программах обучения. Записаться на лайв можно по ссылке
https://htmlacademy.ru/events/live_brew
🔥3👍2
Начался лайв с компанией 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
VK Видео
Brew & HTML Academy: Обучение, которое ищут работодатели
HTML Academy и Brew разработали совместную программу, цель которой — с нуля подготовить будущих сотрудников компании. Обучение проходит в малой группе, и успешные выпускники попадают в команду Brew. Присоединяйтесь к нашему лайву, чтобы подробнее узнать о…
❤6🔥2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Визуализация flex-grow
#visualisation #css #flexbox #flexgrow
Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
#visualisation #css #flexbox #flexgrow
Ещё больше визуализаций и интерактивных туториалов → https://htmlacademy.ru/demos
👍39
Итак, типы или интерфейсы?
Если коротко – да как хочешь.
https://www.mykytam.com/blog/type-vs-interface/
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
Если коротко – да как хочешь.
https://www.mykytam.com/blog/type-vs-interface/
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотnauka
👍6🔥4
Полезная статья, в которой простым языком, с примерами, разобран новый control-flow для Angular v17 и выше. Полезно при переходе с версий ниже 17-й, а так же для понимания базовых методов манипуляции DOM через шаблоны компонент в свежих версиях.
https://angularexperts.io/blog/angular-control-flow
Статьёй поделились разработчики компании «Открытые решения».
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотosinit
https://angularexperts.io/blog/angular-control-flow
Статьёй поделились разработчики компании «Открытые решения».
---
Компании, для которых мы готовим разработчиков на совместных программах, делятся полезными техническими материалами в рубрике «полезное от работодателей».
#полезноеотработодателей #полезноеотosinit
👍8❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Знакомимся с сабгридами в новом бесплатном курсе. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/161
Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.
#туториалотhtmlacademy #frontend #subgrid
https://htmlacademy.ru/demos/161
Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.
#туториалотhtmlacademy #frontend #subgrid
👍33
Полезная шпаргалка по функции inset()
Поиграться вживую https://htmlacademy.ru/demos/151
#cheatsheet #frontend #css
Поиграться вживую https://htmlacademy.ru/demos/151
#cheatsheet #frontend #css
👍29❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Создаём JavaScript-компонент для имитации посимвольного ввода текста. Наглядно, интерактивно, без воды.
https://htmlacademy.ru/demos/163
А ещё познакомимся с рекурсией.
#туториалотhtmlacademy #frontend #javascript
https://htmlacademy.ru/demos/163
А ещё познакомимся с рекурсией.
#туториалотhtmlacademy #frontend #javascript
👍17❤6🔥2
⚡ Пока вы думаете, кто-то уже сделал шаг вперёд!
⏳ Осталось всего 𝟒 дня до конца «Чёрной пятницы», чтобы:
Новичкам — начать путь в программирование.
Мидл-специалистам — выйти на новый уровень карьеры.
И всё это со скидками до 𝟕𝟓%!
🎯 Выберите свой путь:
𝟕𝟎% — тренажёры и подписки для старта
𝟓𝟎% — пакеты мидл-курсов для прокачки
𝟕𝟓% — профессии лайт для нового этапа
𝟐𝟎% — профессия React-разработчик для работодателя Brew и Лига А
Будущее ваших навыков — за одним кликом.
👉 Успейте до 𝟑𝟎 ноября: tml.io/BF2024
Не ждите — действуйте!
⏳ Осталось всего 𝟒 дня до конца «Чёрной пятницы», чтобы:
Новичкам — начать путь в программирование.
Мидл-специалистам — выйти на новый уровень карьеры.
И всё это со скидками до 𝟕𝟓%!
🎯 Выберите свой путь:
𝟕𝟎% — тренажёры и подписки для старта
𝟓𝟎% — пакеты мидл-курсов для прокачки
𝟕𝟓% — профессии лайт для нового этапа
𝟐𝟎% — профессия React-разработчик для работодателя Brew и Лига А
Будущее ваших навыков — за одним кликом.
👉 Успейте до 𝟑𝟎 ноября: tml.io/BF2024
Не ждите — действуйте!
l.htmlacademy.ru
Black Friday 2024 в HTML Academy
👍9
Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения в новом интерактивном курсе.
https://htmlacademy.ru/demos/165
В первой части работаем над разметкой и базовой стилизацией шапки. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/165
В первой части работаем над разметкой и базовой стилизацией шапки. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
👍23❤🔥3
Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.
https://htmlacademy.ru/demos/167
Во второй части работаем над сеткой десктопной версии шапки и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
https://htmlacademy.ru/demos/167
Во второй части работаем над сеткой десктопной версии шапки и проверяем её на переполнение. Ссылка на макет компонента — внутри курса.
#туториалотhtmlacademy #frontend #макет
👍19
🎉 Открытая неделя в HTML Academy!
С 2 по 8 декабря мы вместе с партнёрами-работодателями открываем доступ ко всем тренажёрам @htmlacademy!
Что вас ждёт?
– Выполняйте задания и набирайте баллы.
– Проходите испытания и соревнуйтесь с другими участниками.
– Зовите друзей и получайте дополнительные бонусы!
Призы для самых активных
1. Бесплатное место на совместной программе обучения для компаний.
2. Курс «TypeScript: Теория типов».
3. Курс «Vite: свежий и быстрый инструмент сборки».
4. Курс «Введение в React.js».
🤖 Получить доступ к открытой неделе можно в нашем боте. Стартуем уже в понедельник!
С 2 по 8 декабря мы вместе с партнёрами-работодателями открываем доступ ко всем тренажёрам @htmlacademy!
Что вас ждёт?
– Выполняйте задания и набирайте баллы.
– Проходите испытания и соревнуйтесь с другими участниками.
– Зовите друзей и получайте дополнительные бонусы!
Призы для самых активных
1. Бесплатное место на совместной программе обучения для компаний.
2. Курс «TypeScript: Теория типов».
3. Курс «Vite: свежий и быстрый инструмент сборки».
4. Курс «Введение в React.js».
🤖 Получить доступ к открытой неделе можно в нашем боте. Стартуем уже в понедельник!
❤🔥25👍13🔥2