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

https://htmlacademy.ru/demos/161

Создадим карточки с несколькими текстовыми элементами, а затем с помощью магии сабгридов свяжем по высоте тексты, находящиеся в разных карточках.

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

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

https://htmlacademy.ru/demos/163

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

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

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

https://htmlacademy.ru/demos/165

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

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

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

https://htmlacademy.ru/demos/167

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

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

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

https://htmlacademy.ru/demos/169

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

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

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

https://htmlacademy.ru/demos/171

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

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

Новый макет и новый компонент! Верстаем промо-блок из олимпиады по фронтенду от HTML Academy и Яндекса.

htmlacademy.ru/demos/173

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

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

Завершаем вёрстку десктопной версии промо-блока из олимпиады по фронтенду от HTML Academy и Яндекса.

https://htmlacademy.ru/demos/175

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

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

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

https://htmlacademy.ru/demos/177

Создаём вертикальный аккордеон на базе нативного элемента <details>. Разбираемся, с помощью какого атрибута "связывать" друг с другом "вкладки" аккордеона.

#туториалотhtmlacademy #frontend #html #css

Верстаем адаптивные версии промо-блока из олимпиады по фронтенду от HTML Academy и Яндекса.

https://htmlacademy.ru/demos/179

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

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

CSS Container Queries — технология, которая изменит понятие адаптивности навсегда. Познакомьтесь с ней в новом бесплатном курсе!

https://htmlacademy.ru/demos/189

Мы создадим резиново-адаптивный чат и познакомится с основными возможностями выражений от контейнеров.

#туториалотhtmlacademy #frontend #html #css

Научитесь верстать по методологии Atomic CSS с помощью фреймворка mlut в новом бесплатном курсе:

https://htmlacademy.ru/demos/183

В первой главе курса мы познакомимся с основами методологии Atomic CSS. Также разберем базовые концепты инструмента mlut, который поможет эффективно верстать в этом подходе. Это официальный курс от автора фреймворка — Валентина Ульянова

#туториалотhtmlacademy #frontend #html #css #mlut

Секрет крутых CSS-теней: когда немного переборщил
#frontend #css #animation #coding

Пошагово показываем, как создать эффект фотозатвора на чистом CSS. Внутренние тени, переменные и пара хитрых приёмов с box-shadow — и эффект готов.

Попробуйте в действии → Демонстрация

Другие демки и сложные приёмы → Смотреть всё

Разбираем реальный продуктовый кейс использования CSS Container Queries во второй главе бесплатного курса.

https://htmlacademy.ru/demos/191

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

#туториалотhtmlacademy #frontend #html #css

[Новинка] Разбираем продуктовый кейс использования CSS Container Queries в третьей главе бесплатного курса.

https://htmlacademy.ru/demos/193

Мы создадим адаптивный список карточек, в котором количество карточек в ряду изменяется в зависимости от размера контейнера, а сами карточки тянутся.

#туториалотhtmlacademy #frontend #html #css

[Новинка] Станьте мастером создания бесконечных анимаций на чистом CSS в бесплатном курсе.

https://htmlacademy.ru/demos/185

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

#туториалотhtmlacademy #frontend #html #css

[Релиз!] Познакомьтесь с CSS-библиотекой от HTML Academy, которая кардинально упрощает создание и настройку инвертированных углов

https://htmlacademy.ru/demos/195

Углы работают даже на неоднородных фонах. Всё сделано на чистом CSS. Знакомьтесь с возможностями библиотеки и используйте с удовольствием!

#туториалотhtmlacademy #frontend #html #css

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

htmlacademy.ru/demos/199

Познакомимся с функцией radial-gradient(), научимся создавать простые градиенты, управлять списком колорстопов и расположением центра градиента. А также разберёмся, что влияет на форму радиального градиента.

#туториалотhtmlacademy #frontend #html #css

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

https://htmlacademy.ru/demos/201

Продолжим разбираться с радиальными градиентами. Научимся принудительно задавать форму и управлять размерами градиентов. Разберёмся с ключевыми словами closest-side, farthest-side, closest-corner, farthest-corner.

#туториалотhtmlacademy #frontend #html #css