на главную сниппетовЛюбые навыки прокачиваются опытным путём и упорным изучением – это факт, с которым сложно не согласиться. Изучение языков программирования и каскадных таблиц стилей не являются исключением – достичь высоких результатов в этом вопросе удастся только благодаря регулярной практике.
Владея знаниями по вёрстке, можно достичь поставленных целей и перейти на следующую ступень профессионализма. В этой статье я расскажу, какие материалы мы с коллегами используем в своей работе: уверен, эта информация будет полезна разработчикам на 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
С помощью платформ, например:
Для тренировки и визуализации небольшого участка кода применяются редакторы кода:
Онлайн-редактор кода, например, 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/
Информацию по свойствам берём через онлайн-справочники:
Цель: Повысить скорость работы и использовать тонкости CSS на практике. Достигается примерно за 1000 часов.
Что изучать?
Адаптивная вёрстка https://doka.guide/css/media/
Теоретические примеры: https://tpverstak.ru/adaptive-cheatsheet/
Вёрстка под PixelPerfect https://htmlacademy.ru/blog/html/pixel-perfect
Особенности отображения стилей в разных браузерах
Сетки 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 – очень сложно, плюс, из-за регулярного обновления версий браузеров добавляются новые свойства, функции, дорабатываются уже имеющиеся данные и появляются свежие подходы к вёрстке. Именно поэтому специалист, хорошо владеющий базой, всегда сможет найти для себя новые интересные грани в этой сфере и перспективы для развития своего профессионального потенциала.
на главную сниппетов
