Изучайте CSS

Добро пожаловать на курс «Изучайте CSS»! #

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

Вы изучите основы CSS, такие как блочная модель, каскад и специфичность, адаптируемый блок flexbox, двумерная сетка grid и свойство z-index. И, наряду с этими основами, вы узнаете о функциях, цветовых типах, градиентах, логических свойствах и наследовании, чтобы стать всесторонним разработчиком интерфейсов, готовым взяться за любой пользовательский интерфейс.

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

Этот курс создан как для начинающих, так и для опытных разработчиков CSS. Вы можете пройти всю серию от начала до конца, чтобы получить общее представление о CSS, или использовать курс в качестве справочника по конкретным темам веб-дизайна. Тем, кто только начинает заниматься веб-разработкой, рекомендует ознакомиться с курсом «Введение в HTML» от MDN, чтобы узнать всё о том, как писать разметку и связывать таблицы стилей.

Изучаемые темы:

Box Model

Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

Selectors

To apply CSS to an element you need to select it. CSS provides you with a number of different ways to do this, and you can explore them in this module.

The cascade

Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection.

Specificity

This module takes a deeper look at specificity, a key part of the cascade.

Inheritance

Some CSS properties inherit if you don't specify a value for them. Find out how this works, and how to use it to your advantage in this module.

Color

There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values.

Sizing Units

In this module find out how to size elements using CSS, working with the flexible medium of the web.

Layout

An overview of the various layout methods you have to choose from when building a component or page layout.

Flexbox

Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.

Grid

CSS Grid Layout provides a two dimensional layout system, controlling layout in rows and columns. In this module discover everything grid has to offer.

Logical Properties

Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS.

Spacing

Find out how to select the best method of spacing elements, taking into consideration the layout method you are using and component that you need to build.

Pseudo-elements

A pseudo-element is like adding or targeting an extra element without having to add more HTML. They have a variety of roles and you can learn about them in this module.

Pseudo-classes

Pseudo-classes let you apply CSS based on state changes. This means that your design can react to user input such as an invalid email address.

Borders

A border provides a frame for your boxes. In this module find out how to change the size, style and color of borders using CSS.

Shadows

There are a number of ways to add shadows to text and elements in CSS. In this module you'll learn how to use each option, and the tasks they were designed for.

Focus

Understand the importance of focus in your web applications. You'll find out how to manage focus, and how to make sure the path through your page works for people using a mouse, and those using the keyboard to navigate.

Z-index and stacking contexts

In this module find out how to control the order in which things layer on top of each other, by using z-index and the stacking context.

Functions

CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.

Gradients

In this module you will find out how to use the various types of gradients available in CSS. Gradients can be used to create a whole host of useful effects, without needing to create an image using a graphics application.

Animations

Animation is a great way to highlight interactive elements, and add interest and fun to your designs. In this module find out how to add and control animation effects with CSS.

Filters

Filters in CSS mean that you can apply effects you might only think possible in a graphics application. In this module, you can discover what is available.

Blend Modes

Create compositional effects by mixing two or more layers, and learn how to isolate an image with a white background in this module on blend modes.

Lists

A list, structurally, is composed of a list container element filled with list items. In this module, you'll learn how to style all the parts of a list.

Transitions

In this module, learn how to define transitions between states of an element. Use transitions to improve user experience by providing visual feedback to user interaction.

Overflow

Overflow is how you deal with content that doesn’t fit in a set parent size. In this module, you’ll think outside the box, and learn how to style overflowing content.

Backgrounds

In this module learn the ways you can style backgrounds of boxes using CSS.

Text and typography

In this module, learn how to style text on the web.

Conclusion and next steps

Further resources to help you take your next steps.

Итак, вы готовы изучить CSS? Приступим.