- Plague Портал! Софт, Игры, Фильмы, Помощь по uCoz! - Описание сайта
Главная » Управление дизайном » Редактирование шаблонов » Новости сайта » Страница материала и комментариев к нему
Главная » 2020»Июль»2 » Интерактивный онлайн-курс «Продвинутая вёрстка» (2020)
Если Вы используете bootstrap, понимаете его минусы и хотите использовать самые современные технологии, то данный курс однозначно для Вас. Детально изучить flexbox, научиться использовать NPM, Gulp - это дорогого стоит!
Вишенкой на торте этого курса является конечно же Smartgid. С помошью этого чудесного инструмента смог усовершенствовать и в тоже время многократно упростить свою верстку, а также значительно сократить время верстки лендингов.
Материал подается простыми словами с множеством примеров, что делает его предельно понятным.
Программа курса: Вводный вебинар Техническая информация Доступы в группы и к тренажёрам Обзор программы курса Обзор вспомогательных инструментов
1. Основы Flexbox Основная и вспомогательная оси Тонкости выравнивания элементов Адаптивка без media-запросов Расчёт размеров элемента - Разбор домашних работ Фокусы flex-grow Нюансы в IE 11 Погрешность расчёта размеров Код без media-запросов: за и против
2. Flex-direction: column Нюансы переноса элементов Вертикальные и горизонтальные отступы Смена порядка следования элементов Задачи, для которых flex неудобен - Разбор домашних работ Общие выводы по технологиям Необходимость автоматизации мелочей Моральная подготовка к node.js
3. Node.js и NPM - основы магии Gulp - сборка проекта Autoprefixer - кроссбраузерность Concat - соединение файлов Sourcemaps - удобная отладка - Разбор домашних работ Плагин Clean CSS Group CSS Media Queries Неудобства плагина concat Чего не хватает в чистом CSS
4. Основы CSS-препроцессоров Иерархическое написание Переменные и примеси Написание кода на LESS Написание кода на SASS (SCSS) - Разбор домашних работ Синтаксисы разных препроцессоров LESS vs SCSS Препроцессоры vs постпроцессоры
5. npm i smart-grid - поехали! Основы создания сетки Отступы в px или в % Margin и padding варианты Настройка свойств сетки - Разбор домашних работ Нюансы fields и offset Резиновые и обычные элементы Row и col без size
6. Вёрстка макета Оптимизация кода Иерархия селекторов vs BEM Дополнительные приёмы вёрстки Кроссбраузерность - Разбор домашних работ Подведение итогов курса Ответы на финальные вопросы Направление дальнейшего развития
![[Houston]](http://houston.ucoz.net/alldesign.gif "[Houston]"){kind=small}
.gif "Футболки и сувениры с символикой фильмов и сериалов"){kind=small}
