прокачиваем навыки владения CSS / Хабр
веб-разработчик в HTDev
Любые навыки прокачиваются опытным путём и упорным изучением – это факт, с которым сложно не согласиться. Изучение языков программирования и каскадных таблиц стилей не являются исключением – достичь высоких результатов в этом вопросе удастся только благодаря регулярной практике.
Владея знаниями по вёрстке, можно достичь поставленных целей и перейти на следующую ступень профессионализма. В этой статье я расскажу, какие материалы мы с коллегами используем в своей работе: уверен, эта информация будет полезна разработчикам на CSS.
На базовом уровне
Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов
Что изучать?
В первую очередь, синтаксис. А дальше по порядку:
-
Блочная модель https://doka.guide/css/box-model/
-
Специфичность https://doka.guide/css/specificity/
-
Принцип каскада https://doka.guide/css/cascade/
-
Методологии именования классов
Доклад: https://www.youtube.com/watch?v=1VM-vEItVeA&ab_channel=moscowcss
Презентация https://wsd.events/2016/10/01/pres/css-methodologies.pdf -
Позиционирование https://fls.guru/cssposition.html
-
Псевдоэлементы https://doka.guide/css/pseudoelements/ и псевдоклассы https://doka.guide/css/pseudoclasses/
-
Единицы измерения css https://fls.guru/css-units.html
-
Фон https://fls.guru/cssbackground.html https://yoksel.github.io/css-patterns/
-
Способы выравнивания элементов https://www.internet-technologies.ru/articles/centrirovanie-v-css-polnoe-rukovodstvo.html
-
Сетки Flex.
Теория: https://tpverstak.ru/flex-cheatsheet/Практика: https://the-echoplex.net/flexyboxes/ -
Основы SVG https://svgontheweb.com/ru/#preparation https://svgontheweb.com/ru/#implementation
-
Transform https://fls.guru/transform.html https://yoksel.github.io/pages/transform-functions/
-
Шрифты https://html5book.ru/css-shrifty/ https://doka.guide/css/font-face/Подробно о шрифтах: https://github.com/urfu-2015/verstka-lectures/blob/master/text/text.mdВариативные шрифты: https://yoksel.github.io/opentype-variable-fonts/
-
Дефолтные стили браузера: reset, normalize. https://htmlacademy.ru/blog/html/short-13https://htmlacademy.ru/blog/html/about-normalize-css
-
Валидное написание кода – по стандартам Консорциума Всемирной паутины (W3C). Проверить можно с помощью валидатора.
-
Стиль кода, к примеру:https://codeguide.academy/html-css.html#css
Как практиковаться?
С помощью платформ, например:
Для тренировки и визуализации небольшого участка кода применяются редакторы кода:
Где брать недостающую информацию?
Информацию по свойствам берём через онлайн-справочники:
На профессиональном уровне
Цель: Повысить скорость работы и использовать тонкости CSS на практике. Достигается примерно за 1000 часов.
Что изучать?
-
Адаптивная вёрстка https://doka.guide/css/media/
Теоретические примеры: https://tpverstak.ru/adaptive-cheatsheet/ -
Вёрстка под PixelPerfect https://htmlacademy.ru/blog/html/pixel-perfect
-
Особенности отображения стилей в разных браузерах
-
Препроцессоры SASS, Less, Stylus и постпроцессор PostCSS
-
Сетки Grid.
Теория: https://tpverstak.ru/grid/
Практика: https://alialaa.github.io/css-grid-cheat-sheet/ -
Работа с легаси (к примеру, float)
-
Продвинутые селекторы https://doka.guide/css/child/
http://css.yoksel.ru/nth-child/ -
Продвинутые фишки CSS
Например, z-index https://developer.mozilla.org/ru/docs/Web/CSS/z-index -
CSS-функции
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
https://dev.to/balaevarif/css-gio -
Стилизация скролла https://only-to-top.ru/blog/coding/2020-01-31-stilizaciya-skrolla-css.html
https://doka.guide/css/scroll-behavior/
https://doka.guide/css/scroll-padding/ -
CSS-анимация https://fls.guru/cssanimation.html
https://animista.net/play/text -
Углублённое изучение SVG https://svgontheweb.com/ru/
https://yoksel.github.io/svg-decoration/ -
SVG-анимация https://svgontheweb.com/ru/#animating
-
Библиотеки CSS:
Tailwind
Bootstrap
Foundation
Как практиковаться?
Самый эффективный способ – работая с макетами. Макеты можно найти в телеграм-каналах:
Или на платформах:
Где брать недостающую информацию?
В онлайн-справочниках:
https://doka.guide/css/
https://developer.mozilla.org/ru/docs/Web/CSS
В книгах:
-
Кит Грант «CSS для профи»
-
Дэвид Макфарланд «Большая книга по CSS»
-
Грег Сидельников «Наглядный CSS»
-
Леа Веру «Секреты CSS. Идеальные решения ежедневных задач»
На экспертном уровне
Цель: полная экспертность в вопросе и стремление развить свои навыки до высочайшего уровня. Достигается постоянным изучением CSS и практикой, измерение в часах невозможно.
Что изучать?
Фундаментальные механизмы CSS: обработка значений (value processing), каскад и наследование.
Оригинальная документация W3C https://www.w3.org/Style/CSS/Overview.en.html
Что практиковать?
Всё, включая апробацию новых фишек.
Где брать недостающую информацию?
Чтобы быть в курсе последних новостей:
-
Отслеживайте выход новых фишек в обновлениях браузеров
-
Читайте специализированные ресурсы, например, CSS-live
В заключении
Для человека, который только начинает изучать программирование, путь от первого знакомства с основами вёрстки до создания «одностраничника» без адаптивной версии займёт в среднем 70 часов. Однако работа верстальщика может включать не только создание лендингов, но и работу над масштабными проектами, такими, как, например, корпоративные порталы для федеральных компаний. Удержать в голове огромное количество знаний об особенностях CSS – очень сложно, плюс, из-за регулярного обновления версий браузеров добавляются новые свойства, функции, дорабатываются уже имеющиеся данные и появляются свежие подходы к вёрстке. Именно поэтому специалист, хорошо владеющий базой, всегда сможет найти для себя новые интересные грани в этой сфере и перспективы для развития своего профессионального потенциала.
