Как стать Front-end разработчиком? #2 CSS

Во второй части серии статей “Как стать Front-end разработчиком?” речь пойдет о том что такое CSS, на что обратить внимание и какие ресурсы использовать для изучения CSS.

CSS (Cascading Style Sheets) - это код, который используется для стилизации веб-страницы. Любые визуальные изменения, такие как цвет текста, позиции блоков и т.д. делаются с помощью CSS.

Основные моменты

• CSS используется для стилизации HTML тегов
• Для того чтобы стилизовать тег нужно его “выбрать” - по типу тега, классу, айди или атрибуту

• Способы добавления стилей

  • непосредственно к тегу - инлайн
  • в файле .html используя тег
  • в отдельном файле с расширением .css и импортировать в .html файл с помощью тега link

Структура CSS файла

Селектор - в данном случае тег параграф p, класс и айди

Поле стилей - то что находится в фигурных скобках

// выборка по тегу
p {
 color: red;
}

// выборка по классу
.elementClass {
  color: red;
}

// выборка по id
#elementId {
  color: red;
}

Ресурсы для изучения

Русскоязычные

• HTML academy - интерактивная платформа для теории и практики
• HTML book - справочник с различными свойствами

Англоязычные

• Free code camp - интерактивная платформа с теорией и практикой
• W3 school - учебник, можно использовать для пошагового изучения
• CSS tricks - различные статьи, решение проблем, связанных со стилями, и просто крутые штуки
• Speckyboy - интересные статьи на тему CSS и всего, что связанно с дизайном

Бонус

• cssfx - некоторые готовые анимации
• codepen - песочница с большим количеством крутых анимаций. Можно брать и использовать, изменять или просто вдохновляться тем что уже сделано

План действий

1. Поначалу пробуйте интерактивные платформы - читайте теорию и повторяйте на практике.
2. Когда не знаете, как добавить тот или иной стиль - переходите в справочник и снова пробуйте решить проблему.
3. Практикуйтесь и создавайте свои проекты, с практикой вы быстрее всего набьете руку и запомните какие стили отвечают за те или иные свойства.

На что обратить внимание

• Обязательно изучите свойство flex и все, что с ним связано - это позволит вам строить современные веб-страницы и позиционировать элементы на странице быстро, удобно и профессионально.
• Свойство position - также позволит определять позицию элементов на странице, но уже немного по другому
• Уделите внимание медиа запросам для того, чтобы создавать стили для различных разрешений и устройств.
• Изучите основные Псевдоклассы - active, hover, focus, first-child, last-child, nth-child.

Послесловие

Главное в освоении CSS - это понять принцип его работы. Выбираем элементы, которые хотим стилизовать, добавляем к ним свойства стилей. Принцип достаточно прост, остается только практиковаться и регулярно заглядывать в справочник.