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

веб-разработчик в 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

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

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

• HTML Academy https://htmlacademy.ru/courses/299 и https://htmlacademy.ru/courses/297

• Хекслет https://ru.code-basics.com/languages/css

• W3Schools https://www.w3schools.com/css/default.asp

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

• Онлайн-редактор кода, например, https://jsbin.com/?html,output или https://codepen.io/

• Редактор кода с плагином для отображения результата в браузере для VSCode это Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

• Современные редакторы WebStorm, VSCode через встроенный emmet помогают запомнить значения свойств. Изучить все возможности emmet можно здесь: https://epixx.github.io/emmet/

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

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

• https://htmlbase.ru/

• https://doka.guide/css/

• http://htmlbook.ru/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://t.me/figmamakets

• https://t.me/figma_start

Или на платформах:

• CSSBattle

• WebReference

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

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