Социальные иконки

Нажмите ESC, чтобы закрыть

Изучите CSS

Закладки Поделиться
Поделиться курсом
Ссылка на страницу
Поделиться в социальных сетях

О курсе

Раскройте потенциал веб-дизайна с нашим комплексным курсом CSS! 🎨

Вы освоили основы HTML и готовы воплотить свои веб-сайты в жизнь? Этот курс — ваш следующий шаг к становлению опытным веб-разработчиком. Окунитесь в мир Каскадные таблицы стилей (CSS) и узнайте, как преобразовать простой HTML-код в визуально привлекательные, профессиональные и адаптивные веб-сайты.

Этот курс проведёт вас пошаговым путём, начиная с самых основ и постепенно переходя к более продвинутым, практическим методам. Вы выйдете за рамки теории и приобретёте практический опыт создания основных компонентов современных веб-сайтов.

Вот небольшой обзор того, что вы построите:

  • Интерактивные панели навигации

  • Динамические выпадающие меню

  • Стилизованные веб-формы и кнопки

  • Элегантные подсказки и наложения изображений

  • Привлекательные CSS-анимации и переходы

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

Показать больше

Чему вы научитесь?

  • В этом комплексном курсе CSS вы перейдете от основ к более продвинутым темам, приобретая навыки, необходимые для создания современных адаптивных веб-сайтов. 🎨
  • Освойте основы: изучите основные концепции CSS, включая применение стилей с использованием встроенных, внутренних и внешних таблиц стилей.
  • Используйте мощные селекторы: научитесь точно выбирать любой элемент, используя селекторы тегов, классов и идентификаторов, а также расширенные селекторы атрибутов и псевдоклассы.
  • Стиль текста и шрифтов: получите полный контроль над типографикой вашего веб-сайта с помощью свойств оформления текста, преобразования, интервалов и семейств шрифтов, включая возможность встраивания собственных пользовательских шрифтов.
  • Создавайте глубину и визуальную привлекательность: научитесь использовать границы, цвета (включая шестнадцатеричные, RGB и HSL), градиенты и тени, чтобы сделать ваши элементы выделяющимися.
  • Создавайте динамические макеты: управляйте точным размещением и потоком вашего контента, используя основные свойства макета, такие как положение, отображение и обтекание, и научитесь управлять стекированием с помощью z-index.
  • Оживите свой сайт: создавайте плавные анимации и интерактивные эффекты с помощью переходов CSS, а также создавайте сложные многошаговые анимации с помощью @keyframes.
  • Разрабатывайте адаптивный дизайн: изучите основы адаптивного дизайна с использованием @media-запросов, чтобы адаптировать макет под разные размеры экранов: от мобильных телефонов до настольных компьютеров.
  • Создавайте общие компоненты пользовательского интерфейса: получите практический опыт создания основных компонентов веб-сайта с нуля, включая стилизованные кнопки, раскрывающиеся списки, нумерацию страниц, панели навигации, формы и подсказки.

Содержимое курса

Урок 1
CSS — это то, как вы сообщаете браузеру, как должен выглядеть ваш HTML-код. В этом вводном уроке вы научитесь правильно подключать стили — встроенные, внутренние ( ), and external (.css file)—and learn the anatomy of a rule: selector { property: value; }. We’ll compare IDs (#logo) and classes (.btn), when to use each, and how they affect specificity so your styles actually “stick.” You’ll practice targeting elements with type selectors (h1, p), class selectors (.card), ID selectors (#header), and simple combined selectors (h1.title). Along the way we’ll set foundational properties—color, font-size, margin, padding, background, border—while building a small, clean style sheet you can reuse. By the end, you’ll know how to attach styles without making a mess, how to choose between an ID and a class without second-guessing, and how to keep selectors readable so future you doesn’t hate present you.

  • Введение и стили, селекторы идентификаторов и классов, селекторы
    36:43
  • Тест 1: Введение и селекторы

Урок 2
В этом уроке мы рассмотрим, как эффективнее использовать селекторы CSS, а также подробно разберем оформление границ и использование различных цветовых форматов. Вы узнаете, как применить один стиль к нескольким элементам, используя универсальный селектор (*) или группируя селекторы через запятую. В видео также показано, как назначить несколько классов одному HTML-элементу для объединения различных правил стилей. Значительную часть урока занимает подробное руководство по свойству border. Вы узнаете, как использовать это сокращённое свойство для одновременной установки ширины, стиля и цвета границы. В видео рассматриваются различные стили границ, включая сплошную, пунктирную, штриховую, двойную, бороздчатую и ребристую. Также показано, как индивидуально оформить каждую сторону границы элемента (верхнюю, правую, нижнюю, левую) разными стилями или цветами. Вы также узнаете, как создавать скруглённые углы с помощью свойства border-radius и даже использовать изображение в качестве границы с помощью свойства border-image. Наконец, в видео объясняются различные способы определения цветов в CSS. В нем рассматривается использование названий цветов, цветовых кодов HEX, значений RGB и HSL (оттенок, насыщенность, яркость), а также демонстрируется, что все они могут быть использованы взаимозаменяемо для достижения одних и тех же результатов.

Урок 3
В этом уроке мы рассмотрим, как управлять компоновкой и внешним видом элементов с помощью свойств display и float, а также предоставим подробное руководство по стилизации шрифтов. Вы узнаете о различных значениях свойства display, включая block, inline, inline-block, flex и grid, и поймете, как они влияют на компоновку элемента. В видео также объясняется разница между скрытием элемента с помощью display: none и visible: hidden, подчеркивая, как последний сохраняет пространство элемента в макете. Далее в уроке мы рассмотрим свойство float и покажем, как придать элементам обтекание слева или справа, чтобы другой контент мог их обтекать. Заключительный, подробный раздел посвящен шрифтам CSS. Вы узнаете о важности свойства font-family и о том, как создать «стек шрифтов», предоставив несколько резервных шрифтов на случай, если в браузере пользователя не установлен основной. В видео также рассматриваются другие ключевые свойства шрифта, такие как font-style (для курсива и наклонного начертания), font-variant (для капительных), font-weight (жирный, более жирный) и font-size. Наконец, вы узнаете, как встраивать пользовательские шрифты, загруженные вами, на свой сайт с помощью правила @font-face.

Урок 4
Этот урок представляет собой практическое руководство по управлению пространством, видимостью и расположением элементов, завершающееся стилизацией панели навигации. Сначала вы узнаете о свойстве margin, которое используется для создания отступа за пределами границы элемента. В видео объясняется, как задать отступы сразу со всех четырёх сторон (сверху, справа, снизу, слева) и как использовать отдельные свойства, такие как margin-top и margin-left. Далее в видео рассматривается свойство opacity, показывающее, как сделать элемент прозрачным или полупрозрачным, используя значения от 0,0 до 1,0. Затем вы изучите свойство overflow, которое управляет тем, что происходит с содержимым, которое слишком велико для размещения в контейнере. В уроке демонстрируются эффекты scroll (добавляет полосу прокрутки), hidden (обрезает содержимое) и visible (позволяет содержимому выходить за пределы). Затем объясняется концепция padding (отступа), подчёркивая его сходство с margin, но при этом подчёркивая, что он создаёт пространство внутри границы элемента. Наконец, все эти концепции объединены в руководстве по стилизации панели навигации. Вы узнаете, как стилизовать контейнер навигации и его ссылки, использовать псевдоклассы ссылок (:link, :visited, :hover, :active) для создания интерактивных эффектов, удалять подчеркивания с помощью text-decoration: none и изменять стиль курсора мыши с помощью свойства cursor.

Урок 5
В этом уроке представлен подробный обзор свойства CSS position и его использования для создания макетов и липких элементов. Вы узнаете о пяти основных значениях position: static (статическое, по умолчанию), relative, absolute, fixed и sticky. В видео объясняется, как относительное позиционирование работает со смещениями (сверху, справа, снизу, слева) для перемещения элемента относительно его обычного положения, в то время как абсолютное позиционирование размещает элемент относительно ближайшего позиционированного предка. Основное внимание в уроке уделяется созданию липкой панели навигации. Вы увидите практическую демонстрацию использования position: sticky вместе со смещением top: 0, чтобы элемент прикреплялся к верхней части области просмотра после прокрутки. В видео также рассматривается position: fixed и объясняется его отличие от sticky. Затем в уроке рассматривается свойство outline как альтернатива свойству border и демонстрируется, как использовать outline-offset для создания пространства между outline и краем элемента. Наконец, в видео подробно рассматриваются медиазапросы и объясняется, как использовать правило @media для применения различных стилей в зависимости от размера экрана (max-width, min-width), ориентации (альбомная) и даже возможности наведения курсора (any-hover). Вы также узнаете, как работать с различными типами медиа, например, экранными и печатными, и как использовать отдельные свойства overflow-x и overflow-y.

Урок 6
Конечно. Посмотрев видео https://www.youtube.com/watch?v=doVrD0IWWN4 полностью, я подготовил для него подробное описание. Вот описание для Урока 6: Тексты, Таблица, Общий селектор родственных элементов и Z-индекс. Урок 6: Тексты, Таблица, Общий селектор родственных элементов и Z-индекс Ссылка на видео: https://www.youtube.com/watch?v=doVrD0IWWN4 Этот урок охватывает разнообразный набор промежуточных свойств CSS, уделяя особое внимание расширенной стилизации текста, размещению элементов, мощным селекторам и подробному руководству по стилизации HTML-таблиц. Видео начинается с изучения различных свойств текста, показывая, как изменить регистр текста с помощью text-transform (заглавные, строчные, капитализация) и как управлять направлением текста для языков с письмом справа налево с помощью direction: rtl. Затем он подробно рассматривает свойство text-decoration, показывая не только его сокращённую запись, но и то, как управлять отдельными аспектами, такими как text-decoration-color, стиль (например, двойной, пунктирный) и толщина. Далее в уроке объясняется, как управлять порядком наложения элементов с помощью свойства z-index, показывая, как отрицательное значение может поместить изображение за текст. Затем в нём рассматриваются несколько мощных селекторов-комбинаторов, определяющих отношения между элементами, включая общий селектор родственных элементов (~), селектор смежных родственных элементов (+), селектор дочерних элементов (>) и селектор потомков (пробел). Заключительная и самая обширная часть урока представляет собой практическое руководство по профессиональному оформлению HTML-таблиц. Среди основных рассматриваемых приёмов — использование свойства border-collapse для создания чётких однолинейных границ, применение эффекта «зебровой полосы» с помощью псевдокласса :nth-child(even), добавление эффекта :hover к строкам таблицы и создание особого стиля для заголовка таблицы (th).

Урок 7
Этот урок посвящен созданию динамических и интерактивных эффектов с помощью CSS-переходов и расширенных селекторов, таких как псевдоклассы и псевдоэлементы. Вы узнаете, как использовать переходы для плавной анимации изменений свойств в течение заданного времени, предотвращая резкие, мгновенные изменения, которые происходят по умолчанию. Видео подробно описывает свойство transition, объясняя, как управлять свойством transition-property (например, шириной), длительностью transition-duration, функцией времени transition-timing-function (например, ease и linear) и задержкой transition-delay. Практический пример демонстрирует, как плавно увеличить изображение при наведении курсора (:hover). Затем в уроке объясняется разница между псевдоклассами (которые определяют особое состояние элемента, например, :hover) и псевдоэлементами (которые задают стиль для определенной части элемента). Вы узнаете, как использовать псевдоэлементы, такие как ::first-letter и ::first-line, для стилизации начала текстового блока, а также ::before и ::after для вставки контента, например, изображения, до или после фактического содержимого элемента. Наконец, в видео объясняется концепция специфичности CSS и представлено правило !important, демонстрирующее, как его можно использовать для переопределения других конфликтующих стилей и обеспечения того, чтобы определенный стиль всегда применялся независимо от его положения в таблице стилей.

Урок 8
Этот урок представляет собой подробное руководство по оформлению HTML-форм, знакомит с мощными селекторами атрибутов и объясняет, как выполнять вычисления непосредственно в CSS. Вы научитесь оформлять различные поля ввода форм, включая текстовые поля, поля паролей, поля адресов электронной почты и