HTML & CSS Практика

👨‍💻 Создание красивого сайта с Parallax эффектом и анимацией заголовка (HTML+CSS) От автора: "В этом уроке мы рассмотрим создание красивого сайта с анимацией заголовка и параллакс эффектом фона при скролле. Я покажу, как происходит создание таких красивых сайтов и на реальном примере подробно объясню все моменты и тонкие нюансы разработки. Ключевой особенностью данного примера является реализация анимации заголовка и Parallax эффекта фона посредством CSS transition." Смотреть видео 📱

🖥 Кастомный scrollbar и магнитный scroll на CSS Изменяем и улучшаем поведение scrollbar на веб-странице! Хотите узнать, как сделать скролл на сайте не только функциональным, но и эстетичным? Из этого видео вы узнаете о CSS-свойствах, которые помогут вам управлять поведением и стилем полос прокрутки. Разберём: 🔜 scrollbar-gutter — как добавить отступы для лучшей читаемости, 🔜 scroll-padding — настройка пространства вокруг контента, 🔜 scroll-snap-type и scroll-snap-align — фиксируем элементы н...

🤌 Делаем Шар судьбы на CSS Есть такая игрушка — Шар судьбы. Внутри шара в жидкости плавает многогранник, на каждой грани которого написан какой-то ответ. Мы берём шар, формулируем вопрос, трясём шар, многогранник всплывает какой-то стороной. Мы видим ответ, который появился в прозрачном окошке. Сегодня мы сделаем такой же шар — его можно потрясти и сразу узнать все ответы на любые вопросы. Будем собирать проект без JavaScript — это значит, что всё действие будет происходить внутри CSS-файла. Гл...

🎨 Рисуем абстрактные картины на чистом CSS Сегодня займёмся искусством сразу в двух направлениях: нарисуем 9 разных картин и посмотрим, как это легко сделать с помощью современного CSS. Работы на 10–15 минут, а в конце получится такая красота! Всё, что нам сегодня будет нужно, — это HTML и CSS. Скрипты не понадобятся, потому что современные стили уже умеют работать с переменными и создавать новые картинки на основе других элементов на странице Перейти к уроку 👨‍💻

👨‍💻 Верстка сайта с нуля для начинающих на HTML и CSS От автора: "Всем привет :) Приглашаю вас заняться вместе со мной версткой сайта с нуля, особенно - это будет полезным для начинающих. Верстать сайт мы будем на чистом HTML и CSS." Курс состоит из 8 коротких уроков! Перейти в плейлист 📱

🖥 Вёрстка сайта с нуля: HTML, CSS и Figma в действии Это полное руководство по верстке сайта с нуля с использованием HTML, CSS и FIGMA для новичков. От автора: "Вы вместе со мной сверстаете сайт с нуля, а после опубликуете свой сайт в интернете при желании вы сможете отправить ссылку на свой сайт своим друзьям, знакомым и продемонстрировать свои успехи." Научитесь создавать свой собственный сайт с легкостью и без нервов! Перейти в плейлист 📱

🖥 Адаптивная верстка интернет-магазина для начинающих В данном курсе вы вместе с автором сверстаете многостраничный сайт на чистом HTML и CSS, а также немного поработает с JavaScript. Перейти в плейлист 📱

🏄‍♂️ Создаём переходы между разделами на сайте в виде волны Из этой статьи вы узнаете, как используя CSS и векторную SVG графику визуально оформить разрыв между секциями страницы в виде плавно изогнутой кривой линии. Процесс разработки перехода начнём с создания SVG изображения. После создания SVG, рассмотрим несколько примеров его применения для оформления границы блока. 👨‍💻 Перейти к уроку

😎 13 приемов CSS, которые изменят твой подход к верстке Продвинутые техники, которые редко встречаются в базовых туториалах, но активно используются в enterprise-разработке. Ты узнаешь, как избегать типичных ошибок и использовать современные возможности браузеров по максимуму. Читать статью 🤓

🛒 Адаптивная верстка сайта магазина мебели для новичков В этом видео произведем подготовительные работы для верстки, познакомимся с макетом, узнаем какие плагины лучше всего использовать в Figma и не только. Перейти к уроку 👨‍💻