Yahor Vaziyanau
Профессиональный формошлеп / JS разработчик / Bug Janitor.
WARNING
Это нестандартная лекция.
Знакомство
Это Я =>
Software Engineer в
iTechArt.
Профессиональный формошлёп.
@fasvald
Как меня найти
live:egorvoz2
Наш ту ду список
Обзор ту ду:
- Разберем HTML & CSS
- А также верстку
- И еще постпроцессоры
- Ну и PostCSS тоже посмотрим
- А на десерт - методологии разработки
- И Т О Г И
ВНИМАНИЕ!!!
Дальше пойдет сухая теория
HTML & CSS
Препроцессоры CSS
Битва препроцессоров
SCSS (?LESS?)
Stylus
Итак.
Ты все-таки используешь SCSS.
PostCSS
Что такое PostCSS ?
Это специальный инструмент который преобразует CSS с помощью плагинов написанных на ЖаваСкрипте.
Из-за чего он популярен?
Методологии CSS
Рассмотрим примеры работы с SCSS и PostCSS
Проведем небольшое демо (так сказать маленький Workshop)
НО, если тебя не было на лекции, то ты сможешь легко пройти его сам просто открыв 1 из ссылок в разделе полезных материалов.
Подведем И Т О Г И
И т о г о:
- Вы посмотрели презентацию и послушали меня.
- Потратили 60-90 минут свой жизни на вот это вот.
НО
Теперь вы шарите
Полезные ссылки
Полезные туториалы
- https://www.toptal.com/sass/theming-scss-tutorial
- https://medium.com/quick-code/top-tutorials-to-learn-sass-and-scss-33e4dcd63e9b
- https://marksheet.io/sass-scss-less.html
- https://css-tricks.com/bem-101/
- https://seesparkbox.com/foundry/bem_by_example
- https://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
- https://flexboxfroggy.com/
- https://css-tricks.com/snippets/css/complete-guide-grid/
Полезные сайтецы
- https://css-tricks.com/
- https://www.smashingmagazine.com/
- https://codesandbox.io/
- https://codepen.io/
- https://github.com/
- https://css-live.ru/
- Телеграм канал "Веб-стандарты"
- Телеграм канал "For web ..."
И смотрите скринкасты (youtube, egghead, ...).
Домашнее задание
(o_O)
Я все. Спасибо.
Вопросики и ответики ?
HTML/CSS, препроцессоры и PostCSS, а также методологии разработки стилей
By Yahor Vaziyanau
