HTML Academy @htmlacademy Channel on Telegram

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

09 Jan, 09:24


👍 Новогодняя неделя завершилась! Совместно с Лигой А. и Слетать.ру мы открыли доступ ко всем тренажёрам и дали возможность каждому принять участие в насыщенной неделе знаний. Теперь настало время подвести итоги и разыграть призы!

Следите за розыгрышем в прямом эфире — сегодня в 20:00.

Эфир в YT | Рестрим в VK

HTML Academy

07 Jan, 08:50


Золотой уровень открыт!

Все участники новогодней недели — огромные молодцы! Поздравляем с этим впечатляющим достижением. Максимальное количество призов разблокировано.

Благодаря вашей активности вы выполнили 33 615 заданий и заработали 235 339 баллов. Теперь мы разыграем программы для мидлов, ещё больше самостоятельных программ и подарим каждому в топ-100 приятные бонусы.

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

Подробнее об акции | Telegram-бот

👍 Завершим новогоднюю неделю вместе!

HTML Academy

05 Jan, 11:04


Серебряный уровень открыт!

Участники новогодней недели сделали это! Благодаря общей активности вы выполнили 22 469 заданий и заработали 162 853 балла — и это только начало! Теперь открыты призы серебряного уровня, которые разыграют не только топ-10, но и топ-100 участников.

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

Подробнее об акции | Telegram-бот

HTML Academy

03 Jan, 07:30


Уже 3️⃣ день новогодней недели, и 👍 Кексобот начинает присылать подсказки и мотивацию.

HTML Academy

30 Dec, 12:10


🔠🔠🔠🔠🔠🔠🔠✖️🔠🔠🔠🔠🔠🔠🔠🔠🔠🔠🟰

Новогодняя неделя с 👍 HTML Academy — это не только бесплатный доступ к тренажёрам с 1 по 8 января, но и возможность побороться за крутые призы. Чем больше баллов заработают участники, тем выше уровень наград — от бронзового до золотого.

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

Начинаем через 2 дня! Подробности и полный список призов смотрите на лендинге.

Объединяйтесь с друзьями, проходите тренажёры и зарабатывайте баллы.

HTML Academy

26 Dec, 07:11


👍 Чувствуете? Это запах мандаринов и тренажёров. Новый год близко, а значит пора засучить рукава и готовиться к ежегодному безумию вместе с HTML Academy. Совместно с Лига А. и Слетать.ру мы дарим бесплатный доступ к тренажёрам с 1 по 8 января.

Что вас ждёт?
1️⃣ Полный доступ к тренажёрам HTML, CSS и JavaScript,
2️⃣ Ежедневные викторины, задания и испытания,
3️⃣ Возможность заработать баллы и выиграть призы.

Приглашайте друзей, чтобы ваше участие стало ещё веселее и продуктивнее! Чем активнее будут участники новогодней недели, тем больше призов разыграем в конце. Подробнее читайте на лендинге.

🤘 Начинаем 1 января!

Подробнее об акции | Telegram-бот

HTML Academy

16 Dec, 08:55


Вместе с 5 углов мы готовим будущих разработчиков

Уже сегодня в 19:00 на эфире мы поговорим о программе обучения, на которой мы готовим специалистов под реальные задачи. Технический лидер компании 5 углов расскажет о перспективах для выпускников и ответит на ваши вопросы.

⭐️ Эфир в YT | Рестрим в VK | Записаться

HTML Academy

12 Dec, 10:04


Прямой эфир с техническим лидером 5 углов: ваш шанс начать карьеру в компании!

HTML Academy и 5 углов запускают уникальную программу «Обучение под работодателя». Вы обучаетесь в малой группе, осваиваете нужные навыки, и, самое главное, получаете шанс присоединиться к команде 5 углов по завершении обучения.

Приходите на прямой эфир 16 декабря в 19:00, чтобы:

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

⭐️ Зарегистрируйтесь по ссылке — мы напомним вам о трансляции.

HTML Academy

11 Dec, 15:54


Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.

https://htmlacademy.ru/demos/171

В четвёртой части мы завершаем вёрстку мобильной и планшетной версий шапки. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

HTML Academy

11 Dec, 09:48


Помогите нам понять, в какое время лучше всего проводить прямой эфир на буднях?

HTML Academy

10 Dec, 15:00


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

Эфир в YT | Рестрим в VK | Записаться

HTML Academy

09 Dec, 13:49


Прямой эфир с ComonTECH: обучение под работодателя.

HTML Academy и ComonTECH запустили совместную программу, которая поможет вам вырасти с нуля до востребованного специалиста в команде компании. Обучение проходит в малых группах, а успешных выпускников приглашают в штат.

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

Ссылка

HTML Academy

04 Dec, 14:49


Продолжаем вёрстку макета из олимпиады по фронтенду от HTML Academy и Яндекса в новом интерактивном курсе.

https://htmlacademy.ru/demos/169

В третьей части работаем над состояниями интерактивных компонентов шапки, опираясь на стайлгайд. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

HTML Academy

04 Dec, 12:06


✒️ Кодпен дня — «типа реалистичный текст»

Лукас Беббер накодил забавную демку, в которой можно посмотреть на любой текст так, будто он напечатан в книге.

70 строк CSS и капля JS: https://codepen.io/lbebber/pen/OJWNZV

HTML Academy

04 Dec, 09:17


3️⃣ День 3, сообщение от Кекса

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

День точности

Сегодня мы серьёзно погрузимся в 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 Academy

03 Dec, 09:20


2️⃣ День 2

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

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

В программе у нас 161 задание и 16 испытаний. За их выполнение можно заработать 241 балл.

Подробнее | Правила акции

HTML Academy

02 Dec, 08:36


Открытая неделя началась! Доступ ко всем тренажёрам открыт.

С 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

HTML Academy

29 Nov, 12:47


🎉 Открытая неделя в HTML Academy!

С 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 #макет

HTML Academy

27 Nov, 12:29


Верстаем сайт по графическому макету из олимпиады по фронтенду от HTML Academy и Яндекса с учётом адаптивности и переполнения в новом интерактивном курсе.

https://htmlacademy.ru/demos/165

В первой части работаем над разметкой и базовой стилизацией шапки. Ссылка на макет компонента — внутри курса.

#туториалотhtmlacademy #frontend #макет

HTML Academy

27 Nov, 10:53


Пока вы думаете, кто-то уже сделал шаг вперёд!

Осталось всего 𝟒 дня до конца «Чёрной пятницы», чтобы:
Новичкам — начать путь в программирование.
Мидл-специалистам — выйти на новый уровень карьеры.
И всё это со скидками до 𝟕𝟓%!

🎯 Выберите свой путь:
𝟕𝟎% — тренажёры и подписки для старта
𝟓𝟎% — пакеты мидл-курсов для прокачки
𝟕𝟓% — профессии лайт для нового этапа
𝟐𝟎% — профессия React-разработчик для работодателя Brew и Лига А

Будущее ваших навыков — за одним кликом.
👉 Успейте до 𝟑𝟎 ноября: tml.io/BF2024

Не ждите — действуйте!

HTML Academy

26 Nov, 11:25


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

https://htmlacademy.ru/demos/163

А ещё познакомимся с рекурсией.

#туториалотhtmlacademy #frontend #javascript

HTML Academy

25 Nov, 08:03


Полезная шпаргалка по функции inset()

Поиграться вживую https://htmlacademy.ru/demos/151

#cheatsheet #frontend #css

HTML Academy

21 Nov, 16:01


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

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

HTML Academy

20 Nov, 12:44


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

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

HTML Academy

18 Nov, 16:01


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

Присоединяйтесь по ссылкам:
ВК — 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

HTML Academy

18 Nov, 06:16


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

HTML Academy

16 Nov, 14:00


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

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

Подсказку можно сделать, создав отдельный элемент в 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

Вы узнаете, как использовать свойства 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

14 Nov, 08:11


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

https://htmlacademy.ru/demos/157

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

#туториалотhtmlacademy

HTML Academy

13 Nov, 14:45


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

https://htmlacademy.ru/demos/155

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

#туториалотhtmlacademy

HTML Academy

13 Nov, 12:08


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

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

HTML Academy

12 Nov, 14:12


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

https://htmlacademy.ru/demos/153

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

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

#туториалотhtmlacademy

HTML Academy

11 Nov, 14:43


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

#visualization #css #margin

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

HTML Academy

08 Nov, 17:28


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

https://htmlacademy.ru/demos/151

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

#туториалотhtmlacademy

HTML Academy

07 Nov, 14:01


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

https://htmlacademy.ru/demos/149

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

#туториалотhtmlacademy

HTML Academy

07 Nov, 12:53


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

https://habr.com/ru/articles/856784/

HTML Academy

07 Nov, 10:02


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

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

HTML Academy

06 Nov, 16:31


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

https://htmlacademy.ru/demos/147

#туториалотhtmlacademy

HTML Academy

05 Nov, 15:50


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

https://htmlacademy.ru/demos/145

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

#туториалотhtmlacademy

HTML Academy

04 Nov, 16:02


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

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

HTML Academy

01 Nov, 16:01


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

https://htmlacademy.ru/demos/141

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

#туториалотhtmlacademy

HTML Academy

31 Oct, 13:51


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

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

HTML Academy

29 Oct, 08:23


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

https://htmlacademy.ru/demos/135

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

#туториалотhtmlacademy

HTML Academy

28 Oct, 08:09


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

https://htmlacademy.ru/demos/133

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

#туториалотhtmlacademy

HTML Academy

25 Oct, 16:02


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

https://htmlacademy.ru/demos/131

#туториалотhtmlacademy

HTML Academy

24 Oct, 16:02


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

Присоединяйтесь по ссылкам:
ВК — 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

HTML Academy

24 Oct, 12:01


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

https://htmlacademy.ru/demos/129

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

#туториалотhtmlacademy

HTML Academy

23 Oct, 16:26


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

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

23 Oct, 10:01


Вопрос дня #4

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

Она определила переменную 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

HTML Academy

22 Oct, 07:59


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

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

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

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

HTML Academy

21 Oct, 08:42


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

https://htmlacademy.ru/demos/123

#туториалотhtmlacademy

HTML Academy

18 Oct, 15:56


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

https://htmlacademy.ru/demos/121

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

#туториалотhtmlacademy

HTML Academy

17 Oct, 16:01


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

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

HTML Academy

16 Oct, 16:29


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

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

HTML Academy

15 Oct, 08:21


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

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 или консоли.

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

HTML Academy

14 Oct, 08:03


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

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.

HTML Academy

12 Oct, 07:01


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

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

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

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

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

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