📚 А вы знали, что существуют разные свойства анимации в CSS?
Свойство animation, как можно догадаться по названию, используется для создания анимации и определяет набор ключевых кадров. С помощью него можно задавать движение, изменение цвета, повороты, изменение размера на веб-страницах.
Transition служит для создания плавных переходов между двумя состояниями элемента, делая анимацию более естественной и приятной для глаз. В данном примере мы применим плавный переход цвета фона (background-color) для элемента p при наведении курсора. Фон плавно изменится за секунду.
p {
background-color: blue;
transition: background-color 1s ease-in-out;
}
p:hover {
background-color: red;
}
Ну а благодаря свойству transform вы сможете вращать, масштабировать, перемещать и наклонять элементы, а также применять сложные преобразования с помощью матриц. Код со свойством rotate повернёт элемент вокруг его центра на 20 градусов по часовой стрелке.
div {
transform: rotate(20deg);
}
Подробнее прочитать про каждое свойство вы можете в подборке наших статей по ссылкам ниже.
Animation — https://tml.io/animation58t
Transition — https://tml.io/transition58t
Transform — https://tml.io/transform58t
#htmlacademy_полезное
Свойство animation, как можно догадаться по названию, используется для создания анимации и определяет набор ключевых кадров. С помощью него можно задавать движение, изменение цвета, повороты, изменение размера на веб-страницах.
Transition служит для создания плавных переходов между двумя состояниями элемента, делая анимацию более естественной и приятной для глаз. В данном примере мы применим плавный переход цвета фона (background-color) для элемента p при наведении курсора. Фон плавно изменится за секунду.
p {
background-color: blue;
transition: background-color 1s ease-in-out;
}
p:hover {
background-color: red;
}
Ну а благодаря свойству transform вы сможете вращать, масштабировать, перемещать и наклонять элементы, а также применять сложные преобразования с помощью матриц. Код со свойством rotate повернёт элемент вокруг его центра на 20 градусов по часовой стрелке.
div {
transform: rotate(20deg);
}
Подробнее прочитать про каждое свойство вы можете в подборке наших статей по ссылкам ниже.
Animation — https://tml.io/animation58t
Transition — https://tml.io/transition58t
Transform — https://tml.io/transform58t
#htmlacademy_полезное
👍21❤3
🐣 Завтра начинается учёба на новом потоке профессии «Фронтенд-разработчик»
Записывайтесь и учитесь делать интерфейсы сайтов и веб-приложений. Это важная работа, потому что без интерфейсов мир был бы непонятным и не таким красивым. После обучения мы вас устроим стажёром в айти-компанию на пару месяцев, чтобы вы набрали коммерческий опыт и реальных проектов в портфолио. А дальше поможем найти работу.
Не затягивайте с решением. Фронтенд — нормальная тема, с ним можно и переехать, и остаться. Попробуйте, это кайф, вот ссылка на запись 👉 https://tml.io/front78t
#htmlacademy_обучение
Записывайтесь и учитесь делать интерфейсы сайтов и веб-приложений. Это важная работа, потому что без интерфейсов мир был бы непонятным и не таким красивым. После обучения мы вас устроим стажёром в айти-компанию на пару месяцев, чтобы вы набрали коммерческий опыт и реальных проектов в портфолио. А дальше поможем найти работу.
Не затягивайте с решением. Фронтенд — нормальная тема, с ним можно и переехать, и остаться. Попробуйте, это кайф, вот ссылка на запись 👉 https://tml.io/front78t
#htmlacademy_обучение
👍16👎16😢1
📚 Как исправить ошибки SyntaxError в JavaScript
У всех же было такое, что полночи ищете ошибку в коде, а оказывается, что где-то пропущена точка с запятой или вместо английской буквы C написали русскую C? И у нас тоже, понимаем.
Ошибки SyntaxError появляются, если разработчик нарушил правила синтаксиса JS. В статье мы поможем разобраться, что означает каждая ошибка, кто виноват и что делать
👉 https://tml.io/syntaxerror88t
#htmlacademy_полезное
У всех же было такое, что полночи ищете ошибку в коде, а оказывается, что где-то пропущена точка с запятой или вместо английской буквы C написали русскую C? И у нас тоже, понимаем.
Ошибки SyntaxError появляются, если разработчик нарушил правила синтаксиса JS. В статье мы поможем разобраться, что означает каждая ошибка, кто виноват и что делать
👉 https://tml.io/syntaxerror88t
#htmlacademy_полезное
🔥14❤3👍1
🔥 Горячие клавиши в Figma
Фигма — это инструмент для создания дизайна, который любят веб-разработчики. Вы ведь тоже её любите? Одна из причин, почему она так популярна — это горячие клавиши, которые ну ооочень сильно упрощают и ускоряют процесс работы. Почитайте нашу статью про эти самые клавиши и, возможно, вы станете самой быстрой рукой во всей веб-разработке.
👉 https://tml.io/figmahk98t
#htmlacademy_полезное
Фигма — это инструмент для создания дизайна, который любят веб-разработчики. Вы ведь тоже её любите? Одна из причин, почему она так популярна — это горячие клавиши, которые ну ооочень сильно упрощают и ускоряют процесс работы. Почитайте нашу статью про эти самые клавиши и, возможно, вы станете самой быстрой рукой во всей веб-разработке.
👉 https://tml.io/figmahk98t
#htmlacademy_полезное
🔥10
🏆 Марафон «Сиэсэсошная» (попробуйте выговорить)
С 14 по 28 августа мы проведём марафон «Сиэсэсошная». Это уже скоро, так что отпрашивайтесь на работе, отправляйте детей к бабушке и записывайтесь. У нас будет две недели работы, состоящие из трёх блоков: первый — практика на тренажёрах, второй — вёрстка макета, третий — финальный лайв.
Марафон отлично подойдёт для новичков. Вёрстка — это старт в IT, ведь освоив HTML вы можете стать кем угодно. Для всех сомневающихся это также возможность проверить, подойдёт ли вам вообще айти или нет.
После регистрации на почту пришлём письмо со всей необходимой информацией (а еще можно подписаться на телеграм канал марафона, чтобы ничего не пропустить).
Завершится марафон финальным лайвом 28 августа, где подведём итоги прошедших двух недель, ответим на вопросы и разыграем бесплатное обучение на курсе «Профессиональная вёрстка сайтов».
👉 Записаться
#htmlacademy_обучение
С 14 по 28 августа мы проведём марафон «Сиэсэсошная». Это уже скоро, так что отпрашивайтесь на работе, отправляйте детей к бабушке и записывайтесь. У нас будет две недели работы, состоящие из трёх блоков: первый — практика на тренажёрах, второй — вёрстка макета, третий — финальный лайв.
Марафон отлично подойдёт для новичков. Вёрстка — это старт в IT, ведь освоив HTML вы можете стать кем угодно. Для всех сомневающихся это также возможность проверить, подойдёт ли вам вообще айти или нет.
После регистрации на почту пришлём письмо со всей необходимой информацией (а еще можно подписаться на телеграм канал марафона, чтобы ничего не пропустить).
Завершится марафон финальным лайвом 28 августа, где подведём итоги прошедших двух недель, ответим на вопросы и разыграем бесплатное обучение на курсе «Профессиональная вёрстка сайтов».
👉 Записаться
#htmlacademy_обучение
🔥15👍4❤1👏1
🅰️ 11 свойств, с помощью которых вы оформите вообще любой текст
Все тексты разные. И хотя обычно заголовки крупные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу, каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Во всём этом легко запутаться.
Собрали для вас подборку с интерактивными примерами, которая поможет быстро разобраться или вспомнить всё, что нужно для оформления текста. В статье мы разберём 11 главных css-свойств: font-family, font-weight, font-style, text-transform, text-shadow, text-align, line-height, а ещё font, text-decoration, font-weight, blockquote, list-style-type.
Добавляйте в закладки, это то, к чему придётся частенько возвращаться.
👉 https://tml.io/fontsstyles108t
#htmlacademy_полезное
Все тексты разные. И хотя обычно заголовки крупные, текст в абзацах нормального размера и начертания, а ссылки обычно синие и подчёркнутые снизу, каждый из этих элементов можно стилизовать по-своему, например, поменять размер, начертание или цвет. Во всём этом легко запутаться.
Собрали для вас подборку с интерактивными примерами, которая поможет быстро разобраться или вспомнить всё, что нужно для оформления текста. В статье мы разберём 11 главных css-свойств: font-family, font-weight, font-style, text-transform, text-shadow, text-align, line-height, а ещё font, text-decoration, font-weight, blockquote, list-style-type.
Добавляйте в закладки, это то, к чему придётся частенько возвращаться.
👉 https://tml.io/fontsstyles108t
#htmlacademy_полезное
🔥13👍5
Как вы произносите HTML?
Anonymous Poll
69%
Аштиэмэл
6%
Хэтэмээл
12%
Аштэимэл
3%
Хэтэмэлэ
9%
Где-то это уже было
😁29😱3🌚3
🚀 «Вёрстка — от основ к профессии» со скидкой 70%
У нас новость. Три самых популярных курса для новичков по HTML и CSS теперь можно приобрести в составе единой программы обучения «Вёрстка — от основ к профессии».
Начинайте с нуля и устраивайтесь стажёром в веб-студию или берите небольшие заказы на фрилансе сразу после обучения. А ещё это отличный способ подготовиться к началу обучения профессии фронтенд-разработчика на серьёзном уровне.
В каждом курсе программы вас ждут:
- Учебный чат с поддержкой наставников и кураторов.
- Регулярные живые консультации с опытными разработчиками-наставниками.
- Личный проект, выполняемый самостоятельно.
- Глубокое кодревью личного проекта от опытного разработчика.
До 13 августа программу можно приобрести со скидкой в 30 000 рублей.
👉 https://tml.io/packsale118t
#htmlacademy_обучение
У нас новость. Три самых популярных курса для новичков по HTML и CSS теперь можно приобрести в составе единой программы обучения «Вёрстка — от основ к профессии».
Начинайте с нуля и устраивайтесь стажёром в веб-студию или берите небольшие заказы на фрилансе сразу после обучения. А ещё это отличный способ подготовиться к началу обучения профессии фронтенд-разработчика на серьёзном уровне.
В каждом курсе программы вас ждут:
- Учебный чат с поддержкой наставников и кураторов.
- Регулярные живые консультации с опытными разработчиками-наставниками.
- Личный проект, выполняемый самостоятельно.
- Глубокое кодревью личного проекта от опытного разработчика.
До 13 августа программу можно приобрести со скидкой в 30 000 рублей.
👉 https://tml.io/packsale118t
#htmlacademy_обучение
🔥5👍3
📚 :hover, :focus, :active, или зачем указывать состояния элементам
Знакомы с CSS-псевдоклассами: hover, :focus и :active? Они задают элементам состояния, которые реализуются при определённых действиях пользователя. Например :hover срабатывает, когда пользователь наводит курсор на элемент, а :focus при клике. В статье мы поближе познакомимся с каждым псевдоклассом и узнаем зачем указывать состояния элементам.
👉 https://tml.io/hofoac128t
#htmlacademy_полезное
Знакомы с CSS-псевдоклассами: hover, :focus и :active? Они задают элементам состояния, которые реализуются при определённых действиях пользователя. Например :hover срабатывает, когда пользователь наводит курсор на элемент, а :focus при клике. В статье мы поближе познакомимся с каждым псевдоклассом и узнаем зачем указывать состояния элементам.
👉 https://tml.io/hofoac128t
#htmlacademy_полезное
👍14🔥5🐳1
🎙 Подкаст «Про код», выпуск 19. Форматеры объектов, новая Prisma и repeat() в гридах
Обсудили форматеры в Firefox 116: зачем они нужны и кто ими пользуется. Вспомнили VanJS — микрофреймворк, который дорос до версии 1.0. Подробно разобрали функцию repeat() для использования в гридах. Устроили ликбез по ORM и разобрали нововведения в Prisma. Поговорили про новую спеку анимаций основанных на прокрутке и это ещё не всё…
Ведущие: Коля Шабалин и Игорь Антонов.
00:00:25 Пользовательские форматеры объектов в DevTools теперь и в Firefox
00:08:51 VanJS дорос до версии 1.0
00:13:50 Как использовать функцию repeat() гридов
00:34:09 Вышла Prisma версии 5.1
00:52:26 tsup
00:58:24 Анимация прокрутки в CSS
01:07:06 Бойлерплейты: Hackathon Starter для Node.js, Vite React Boilerplate
👉 https://tml.io/procode19
#htmlacademy_полезное
Обсудили форматеры в Firefox 116: зачем они нужны и кто ими пользуется. Вспомнили VanJS — микрофреймворк, который дорос до версии 1.0. Подробно разобрали функцию repeat() для использования в гридах. Устроили ликбез по ORM и разобрали нововведения в Prisma. Поговорили про новую спеку анимаций основанных на прокрутке и это ещё не всё…
Ведущие: Коля Шабалин и Игорь Антонов.
00:00:25 Пользовательские форматеры объектов в DevTools теперь и в Firefox
00:08:51 VanJS дорос до версии 1.0
00:13:50 Как использовать функцию repeat() гридов
00:34:09 Вышла Prisma версии 5.1
00:52:26 tsup
00:58:24 Анимация прокрутки в CSS
01:07:06 Бойлерплейты: Hackathon Starter для Node.js, Vite React Boilerplate
👉 https://tml.io/procode19
#htmlacademy_полезное
🔥10❤1👍1
📋 Alt-текст: шесть правил, которые нужно знать
Альтернативный текст — это описание изображения на сайте словами. Он нужен для изображений, которые не видны пользователям из-за медленного соединения, неправильного пути, или при чтении скринридерами. Давайте поговорим о том, как написать хорошее описание в атрибуте alt.
👉 https://tml.io/goodalt158t
#htmlacademy_полезное
Альтернативный текст — это описание изображения на сайте словами. Он нужен для изображений, которые не видны пользователям из-за медленного соединения, неправильного пути, или при чтении скринридерами. Давайте поговорим о том, как написать хорошее описание в атрибуте alt.
👉 https://tml.io/goodalt158t
#htmlacademy_полезное
🔥13
📚 Свойство display
Что объединяет table, flex и grid? Правильно, это всё значения свойства display. Если вы вдруг забыли (или не знали), за что отвечает каждое значение, то читайте нашу подборку. Сохраняйте в избранное — это то, к чему вы ещё не раз вернётесь.
👉 Table https://tml.io/table168t
👉 Flex https://tml.io/flex168t
👉 Grid https://tml.io/grid168t
#htmlacademy_полезное
Что объединяет table, flex и grid? Правильно, это всё значения свойства display. Если вы вдруг забыли (или не знали), за что отвечает каждое значение, то читайте нашу подборку. Сохраняйте в избранное — это то, к чему вы ещё не раз вернётесь.
👉 Table https://tml.io/table168t
👉 Flex https://tml.io/flex168t
👉 Grid https://tml.io/grid168t
#htmlacademy_полезное
🔥14👍1
👨🏫 Индивидуальное обучение в HTML Academy: мифы и реальность
Как обучиться новой профессии во взрослом возрасте наиболее эффективно? Мы постоянно изучаем этот вопрос, развиваем и обновляем наши курсы, чтобы знания не только были актуальными и качественными, но и хорошо усваивались.
Например, недавно мы запустили индивидуальный формат обучения, который позволяет составлять личный график с любой желаемой нагрузкой. Студент может выбрать сверхинтенсивный режим, если хочет быстро освоить материал. А может размеренный и спокойный, если у студента работа и дела не позволяют идти по строгому расписанию.
Давайте рассмотрим, как проходит обучение, какой путь вы можете пройти и чего достигнуть на нём.
👉 https://tml.io/individ178t
#htmlacademy_обучение
Как обучиться новой профессии во взрослом возрасте наиболее эффективно? Мы постоянно изучаем этот вопрос, развиваем и обновляем наши курсы, чтобы знания не только были актуальными и качественными, но и хорошо усваивались.
Например, недавно мы запустили индивидуальный формат обучения, который позволяет составлять личный график с любой желаемой нагрузкой. Студент может выбрать сверхинтенсивный режим, если хочет быстро освоить материал. А может размеренный и спокойный, если у студента работа и дела не позволяют идти по строгому расписанию.
Давайте рассмотрим, как проходит обучение, какой путь вы можете пройти и чего достигнуть на нём.
👉 https://tml.io/individ178t
#htmlacademy_обучение
👍12🔥5❤1
This media is not supported in your browser
VIEW IN TELEGRAM
🔧 Инструмент недели — locatorjs.com
Бывает же у вас такое, что при разработке веб-приложения React вы видите какой-то элемент и нужно быстро найти его в коде? Расширение Locator.js помогает сделать это за пару кликов и сразу открыть нужное место в редакторе кода. Звучит заманчиво? Тогда скорее качайте и тестируйте.
👉 https://www.locatorjs.com
#htmlacademy_полезное
Бывает же у вас такое, что при разработке веб-приложения React вы видите какой-то элемент и нужно быстро найти его в коде? Расширение Locator.js помогает сделать это за пару кликов и сразу открыть нужное место в редакторе кода. Звучит заманчиво? Тогда скорее качайте и тестируйте.
👉 https://www.locatorjs.com
#htmlacademy_полезное
👍7❤1
👍6❤2👎2
Ох и пошумели вы вчера в комьюнити-чате с этим камнем.
Но правильный ответ такой. Камень вытесняет объем воды, равный своему объему, но при этом у камня выше плотность. Поэтому стакан с камнем и водой тяжелее, чем стакан просто с водой.
В чате даже провели эксперимент — на фото его результаты. Приходите ещё :)
Но правильный ответ такой. Камень вытесняет объем воды, равный своему объему, но при этом у камня выше плотность. Поэтому стакан с камнем и водой тяжелее, чем стакан просто с водой.
В чате даже провели эксперимент — на фото его результаты. Приходите ещё :)
🔥46👍8👎6
🗃️ CSS-свойство contain
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Сontain говорит браузеру, как именно элементы должны взаимодействовать. В статье познакомимся поближе со свойством и его значениями.
👉 https://tml.io/contain218t
#htmlacademy_полезное
Представьте, что у вас есть контейнер. Внутри него находятся разные элементы: текст, изображения или что-то другое. Сontain говорит браузеру, как именно элементы должны взаимодействовать. В статье познакомимся поближе со свойством и его значениями.
👉 https://tml.io/contain218t
#htmlacademy_полезное
🔥15
🔢 Осталось 12 дней до начала учёбы на профессии «Фулстек-разработчик»
Программа рассчитана на новичков, поэтому вы сначала подготовитесь: пройдёте несколько тренажёров, поймёте основы вёрстки и джаваскрипта. Потом начнётся реальная учёба фронтенду — сделаете парочку сервисов, научитесь пользоваться библиотекой компонентов, чтобы не переписывать одни и те же строчки кода заново. Часть про бэкенд тоже очень интересная и проекты там посложнее.
После обучения — оплачиваемая стажировка, портфолио, резюме и помощь в трудоустройстве.
Фулстек-разработчиком быть здорово — знаний больше, зарплата выше, задачи интереснее. 12 дней звучит как много, но на самом деле это мало. Не откладывайте на потом, запишитесь сейчас.
👉 https://tml.io/fullstack238t
#htmlacademy_обучение
Программа рассчитана на новичков, поэтому вы сначала подготовитесь: пройдёте несколько тренажёров, поймёте основы вёрстки и джаваскрипта. Потом начнётся реальная учёба фронтенду — сделаете парочку сервисов, научитесь пользоваться библиотекой компонентов, чтобы не переписывать одни и те же строчки кода заново. Часть про бэкенд тоже очень интересная и проекты там посложнее.
После обучения — оплачиваемая стажировка, портфолио, резюме и помощь в трудоустройстве.
Фулстек-разработчиком быть здорово — знаний больше, зарплата выше, задачи интереснее. 12 дней звучит как много, но на самом деле это мало. Не откладывайте на потом, запишитесь сейчас.
👉 https://tml.io/fullstack238t
#htmlacademy_обучение
🔥4