EN
creator cover Анна Блок

Анна Блок

Практика создания сайтов и новинки CSS
Анна Блок
523
subscribers

About the creator

Привет, меня зовут Анна Блок и я веду канал по веб-разработке. На моём Youtube и Дзен есть плейлисты с практикой, которые можно использовать для самообучения:
Макеты для практики доступны всем, кто оформил тариф «Джун с макетами» и выше. Найти макет можно через навигацию — нажми сюда.
В этом разделе раз в неделю будут появляться материалы с разбором новинок CSS в формате видео и постов. Материалы доступны всем, кто оформил тариф «Мидл с прокачкой» или выше.
Кроме перечисленного выше, иногда выходят статьи на темы, которые не относятся к другим категориям. Они доступны тарифу «Мидл с прокачкой», либо их можно приобрести отдельно вне тарифа.
Список статей:
Слайдер на чистом CSS (исходный код + SCSS для удобства)
Добро пожаловать в наш уютный Telegram чат, который доступен всем, кто оформил тариф «Джун с макетами» и выше.
Занимайся со мной и добивайся результатов! 💪

Используй @supports в CSS, чтобы не париться с браузерами

Уверена, вы сталкивались с такой ситуацией: сверстали сайт по макету, всё выглядит прекрасно и замечательно, но открывая его в другом браузере вдруг выясняется, что не всё так хорошо. Давайте я познакомлю вас с правилом @supports, потому что он может помочь решить эту проблему легко!
Show more
Практика с правилом @supports
Покажу, как делать сайты с корректным отображением в любом браузере и закрепим полученный материал.
Level required:
Мидл с прокачкой
Зачем нужен +1rem в формуле clamp(1.5rem, 2vw + 1rem, 2.25rem)?
Объясняю на пальцах, как это использовать, для чего и в чем их суть на конкретном примере.
Level required:
Мидл с прокачкой
Практика с функцией clamp()
Не только расскажу о том, как работает функция clamp(), но и разобраем небольшой пример и выполним практику.
Level required:
Мидл с прокачкой
В чем польза @container в отличии от @media?
Объясняю на примере, для чего используется CSS Container и какие преимущества от медиа-запросов в этом есть.
Level required:
Мидл с прокачкой
Полезный Subgrid (ч.3)
Рассмотрим, как работает Subgrid на примере карточек, выстроенных через CSS Grid
Level required:
Мидл с прокачкой
Полезный Subgrid (ч.2)
Объяснение преимущества Subgrid на примере формы обратной связи
Level required:
Мидл с прокачкой
Пишем простое приложение на Vue за 30 минут
Видео-практика опубликована на Youtube, а тут вы можете скачать готовые файлы (код, изображения и пр.).
Level required:
Джун с макетами
Практика с псевдоклассами :is(), :where() и :has()
Внутри поста я опубликовала практику для закрепления темы использования псевдоклассов :is(), where(), :has(). Проведи время с пользой!
Level required:
Мидл с прокачкой
Псевдокласс :where()
Внутри поста я опубликовала код, который вам необходимо преобразовать в :where(). Проведи время с пользой, закрепи тему на практике!
Level required:
Мидл с прокачкой

Subscription levels

Поддержка канала

$ 1,18 per month
Просто поддержка за контент! ❤️

Джун с макетами

$ 2,95 per month
Доступ к макетам из плейлиста с практикой на YouTube
Закрытый чат в Telegram
+ chat

Мидл с прокачкой

$ 5,3 per month
Доступ к макетам из плейлиста с практикой на YouTube
Закрытый чат в Telegram
✅ Каждую неделю видео или пост с разбором новинки CSS
В подарок авторская методичка про CSS Grid и адаптивность
+ chat

Сеньор со всеми преимуществами

$ 17,6 per month
Доступ к макетам из плейлиста с практикой на YouTube
Закрытый чат в Telegram
✅ Каждую неделю видео с теорией и практикой о новинке CSS
Дополнительно раз в неделю пост с разбором новинки CSS для наглядности
В подарок авторская методичка про CSS Grid и адаптивность
✅ Запишу для вас эксклюзивное видео. Тему выбираете по своему желанию.
✅ Возможность предложить тему для видео 
✅ Возможность выбрать макет для следующих видео с практкой
+ chat

Мега VIP

$ 47 per month
⬆️ Преимущества предыдущего уровня и...
Проверка вашего кода в работах с подробным разбором от меня 
Общение с Анной Блок напрямую (например, для оценки резюме, консультация по собеседованию и т.д.)
Тариф для тех, кто готов наслаждаться всеми плюшками 😎
+ chat
Go up