Архипкин Дмитрий

веб-разработчик в HTDev

Любые навыки прокачиваются опытным путём и упорным изучением – это факт, с которым сложно не согласиться. Изучение языков программирования и каскадных таблиц стилей не являются исключением – достичь высоких результатов в этом вопросе удастся только благодаря регулярной практике.

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

На базовом уровне

Цель: Помнить все свойства в CSS. Достигается примерно за 300 часов

Что изучать?

В первую очередь, синтаксис. А дальше по порядку:

  1. Блочная модель https://doka.guide/css/box-model/

  2. Специфичность https://doka.guide/css/specificity/

  3. Принцип каскада https://doka.guide/css/cascade/

  4. Методологии именования классов
    Доклад: https://www.youtube.com/watch?v=1VM-vEItVeA&ab_channel=moscowcss
    Презентация https://wsd.events/2016/10/01/pres/css-methodologies.pdf

  5. Позиционирование https://fls.guru/cssposition.html

  6. Псевдоэлементы https://doka.guide/css/pseudoelements/ и псевдоклассы https://doka.guide/css/pseudoclasses/

  7. Единицы измерения css https://fls.guru/css-units.html

  8. Фон https://fls.guru/cssbackground.html https://yoksel.github.io/css-patterns/

  9. Способы выравнивания элементов https://www.internet-technologies.ru/articles/centrirovanie-v-css-polnoe-rukovodstvo.html 

  10. Сетки Flex.
    Теория: https://tpverstak.ru/flex-cheatsheet/Практика: https://the-echoplex.net/flexyboxes/

  11. Основы SVG https://svgontheweb.com/ru/#preparation https://svgontheweb.com/ru/#implementation

  12. Transform https://fls.guru/transform.html https://yoksel.github.io/pages/transform-functions/

  13. Шрифты 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/

  14. Дефолтные стили браузера: reset, normalize. https://htmlacademy.ru/blog/html/short-13https://htmlacademy.ru/blog/html/about-normalize-css

  15. Валидное написание кода – по стандартам Консорциума Всемирной паутины (W3C).  Проверить можно с помощью валидатора.

  16. Стиль кода, к примеру:https://codeguide.academy/html-css.html#css

Как практиковаться?

С помощью платформ, например:

Для тренировки и визуализации небольшого участка кода применяются редакторы кода:

Где брать недостающую информацию?

Информацию по свойствам берём через онлайн-справочники:

На профессиональном уровне

Цель: Повысить скорость работы и использовать тонкости CSS на практике. Достигается примерно за 1000 часов.

Что изучать?

  1. Адаптивная вёрстка https://doka.guide/css/media/
    Теоретические примеры: https://tpverstak.ru/adaptive-cheatsheet/

  2. Вёрстка под PixelPerfect https://htmlacademy.ru/blog/html/pixel-perfect 

  3. Особенности отображения стилей в разных браузерах

  4. Препроцессоры SASS, Less, Stylus и постпроцессор PostCSS

  5. Сетки Grid.
    Теория: https://tpverstak.ru/grid/
    Практика: https://alialaa.github.io/css-grid-cheat-sheet/

  6. Работа с легаси (к примеру, float)

  7. Продвинутые селекторы https://doka.guide/css/child/
    http://css.yoksel.ru/nth-child/

  8. Продвинутые фишки CSS
    Например, z-index https://developer.mozilla.org/ru/docs/Web/CSS/z-index

  9. CSS-функции
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
    https://dev.to/balaevarif/css-gio 

  10. Стилизация скролла 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/

  11. CSS-анимация https://fls.guru/cssanimation.html
    https://animista.net/play/text

  12. Углублённое изучение SVG https://svgontheweb.com/ru/
    https://yoksel.github.io/svg-decoration/

  13. SVG-анимация https://svgontheweb.com/ru/#animating

  14. Библиотеки 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 – очень сложно, плюс, из-за регулярного обновления версий браузеров добавляются новые свойства, функции, дорабатываются уже имеющиеся данные и появляются свежие подходы к вёрстке. Именно поэтому специалист, хорошо владеющий базой, всегда сможет найти для себя новые интересные грани в этой сфере и перспективы для развития своего профессионального потенциала.

Комментарии (1)


  1. Rad_66
    11.11.2022 10:48

    В отличии от большинства местных статей, которые пишу не для того, чтобы закрыть какой то пробел в специфической информации. а скорее для поднятия своего рейтинга, тут человек действительно постарался дать людям знания.

    Мог бы плюсануть с удовольствием сделал бы это!!