How to use BEM naming CSS in practice? Типичный Верстальщик • Анна Блок
1) Naming HTML/CSS — https://tpverstak.ru/common-css-class…
LEARN BULMA CSS creating_interfaces_with_bulma_sample BULMA
ПРАКТИЧЕСКИЙ КУРС ПО ВЕРСТКЕ ЛЕНДИНГА ITVDN
ВЕРСТКА В LPGENERATOR https://lpgenerator.ru/features/
HTML/CSS RESOURCES Discussion1HTMLandCSS
Урок 1
— Основные понятия;
— Создание базовой сетки;
— Домашнее задание.
Урок 2
— Определение размера строк и столбцов сетки;
— Домашнее задание.
Урок 3
— Свойство для определения шаблона сетки;
— Домашнее задание.
Урок 4
— Создание промежутков между столбцами и строками;
— Домашнее задание.
Урок 5
— Выравнивание содержимого;
— Домашнее задание.
Урок 6
— Нумерация линий сетки;
— Домашнее задание.
Урок 7
— Присвоение имен линиям сетки;
— Домашнее задание.
Урок 8
— Совместная работа с Flexbox CSS;
— Домашнее задание.
Урок 9
— Явная и неявная сетка;
— Домашнее задание.
Урок 10
— Свойства, которые объединяют несколько свойств в одну запись;
— Домашнее задание.
Урок 11
— DevTools;
— Плагин для удобной работы с Grid CSS;
— Что делать с поддержкой?
Список тем для наставничества
- Графические редакторы
– Adobe Photoshop для верстальщика
– Adobe Illustrator для верстальщика
– Avocode для верстальщика
- Основы HTML
– Подготовка проекта к верстке (создание папок, иерархии, создание html-файла);
– Структура html-документа (html, head, body) ;
– Рассмотрим самые популярные теги HTML по работе с текстом, ссылками, кнопками, списками, блоками, изображениями, аудио, видео, таблицами, формами;
– Узнаем для чего нужные семантические теги (header, footer, nav, section, main и пр.);
– Идентификаторы и классы
- Основы CSS
– Подключение CSS к документу HTML;
– Структура CSS-файлов;
– Способы подключения шрифтов на страницу;
– Форматирование текста при помощи CSS;
– Стили для работы со шрифтами;
– Разные типы записи цвета в CSS документе;
– Селекторы, которые стоит знать и применять;
– Стилизация ссылок;
– Блочные/строчные элементы;
– Типы позиционирования элементов;
– Работа с изображениями;
– Работа со списками;
– Работа с after и before;
– Фильтры в CSS;
– Центрирование объектов в документе;
– Создание рамок и радиусов в CSS;
– Создание теней;
– Float;
– Создание градиента в CSS
– Что такое кроссбраузерность?
– Переходы в CSS;
– Трансформации в CSS;
– Создание анимаций при помощи CSS3;
– Проверка HTML и CSS на валидность;
– Медиа-запросы;
– Работа с SVG-изображениями;
– CSS Flexbox;
– CSS Grid.
- Основы jQuery
– Библиотеки JavaScript;
– Добавление библиотеки jQuery на страницу;
– Основные селекторы;
– Фильтры jQuery;
– Добавление содержимого на страницу;
– Установка и чтение атрибутов элемента.
– Ожидание загрузки HTML-кода;
– События наведения и смещения указателя мыши;
– Всплывающее окно авторизации;
– Распространенные задачи, решаемые с помощью jQuery.
– Слайдеры
- CSS-препроцессоры
– Подробный обзор SASS/SCSS;
– Подробный обзор LESS;
– Подробный обзор Stylus;
– Какой препроцессор выбрать для работы?
- Создание сайта на бесплатном хостинге Github
– Краткое описание систем контроля версий. Для чего они нужны?
– Регистрация на сайте Github;
– Создание репозитория;
– Наполнение репозитория файлами.
- CSS-фреймворки
– Что такое CSS-фреймворки?
– Какие CSS-фреймворки существуют на сегодняшний день?
– Boostrap: какую версию выбрать?
– Обзор элементов Boostrap.
Домашнее задание.
- Актуальные темы.
– Как найти свой первый заказ или устроиться на работу, если ты новичок;
– Выясним, что лучше подойдет именно тебе: офис, удаленная работа или фриланс;
– Самоорганизация и работа в команде: рассмотрим популярные сайты и приложения по управлению проектами.