Панель разработчика
Панель разработчика можно вызвать 4 способами:
Вкладка "Вычисление"
Вкладка "Консоль"
Как вытащить любой элемент из кода
- Нажать клавишу F12
- Нажать сочетание клавиш Ctrl+Shift+I
- Нажать сочетание клавиш Ctrl+Shift+С (сразу активируется режим выбора элемента)
- Иконка 3-х точек в правом верхнем углу - Дополнительные инструменты - Инструменты разработчика
Вкладка "Вычисление"
Вкладка "Консоль"
Как вытащить любой элемент из кода
Поиск класса элемента
Чаще всего нужный класс из стандартного блока имеет обозначение вида t000__name, где name в нашем примере может обозначаться как:
title - заголовок
descr - описание
subtitle - подзаголовок
uptitle - надзаголовок
price - цена
price_old - старая цена
text - текст (описание)
img - изображение (иконка)
btn - кнопка
wrapper - обертка всех элементов одной карточки
col - обертка по верх wrapper
Для потоков и магазина классы имеют следующий вид:
t-feed__post-bgimg -
js-feed-post-title
js-feed-post-descr
js-feed-post-date
t-feed__button-readmore
Магазин
js-product-img
js-store-prod-name
js-store-prod-descr
t-store__card__price
title - заголовок
descr - описание
subtitle - подзаголовок
uptitle - надзаголовок
price - цена
price_old - старая цена
text - текст (описание)
img - изображение (иконка)
btn - кнопка
wrapper - обертка всех элементов одной карточки
col - обертка по верх wrapper
Для потоков и магазина классы имеют следующий вид:
t-feed__post-bgimg -
js-feed-post-title
js-feed-post-descr
js-feed-post-date
t-feed__button-readmore
Магазин
js-product-img
js-store-prod-name
js-store-prod-descr
t-store__card__price
CSS-стили
Скругление углов у любого блока
Чтобы скруглить углы у какого-то определенного блока, сперва необходимо найти нужный класс элемента через панель разработчика
Отступы внутренние и внешние
Что такое margin и padding
Позиционирование и выравнивание элементов
absolute, relative, sticky
top, bottom, left, right
top, bottom, left, right
Ширина и высота элементов
height, width, max-height, max-width
CSS для zero-block
1.Css и html
Введение
Основные элементы и свойства, с которыми мы будем работать
Что такого id, class, tag, data-atribute
2. Панель разработчика
Панель разработчика можно вызвать 4 способами:
Нажать клавишу F12
Нажать сочетание клавиш Ctrl+Shift+I
Нажать сочетание клавиш Ctrl+Shift+С (сразу активируется режим выбора элемента)
Иконка 3-х точек в правом верхнем углу - Дополнительные инструменты - Инструменты разработчика
Вкладка "Стили" - что означают и как ими пользоваться
Вкладка "Вычисление"
Вкладка "Консоль"
Как найти класс элемента
Как обращаться к нужному нам элементу
3.Работа с текстом + шрифты
Преобразование текста ( text-transform)
Выравнивание и выключка строк(text-align,
Стили текста ( зачеркивание, подчеркивание, толщина, размер)
Трекинг, кернинг и спэйсинг
Списки
Как поменять любой шрифт на сайте на свой
Текст в zero-block
4.Декорирование элементов
Скругление углов, обводка, тень, цвет, градиент
5.Изображения и их свойства + работа с фоном
Как менять свойства изображений(cover, fit, fill)
6.Ширина, высота и единицы измерения
Свойства widht, height, max-width, max-height
Какие бывают единицы измерения
7.Позиционирование элементов
position, смещение, обтекание, z-index,
8.Отступы внутренние и внешние
Как уменьшать или добавлять размер отступов у стандартных блоков
9.Блочные и строчные элементы
block, inline-block, flex, grid
10.Эффекты
Научимся работать с эффектами в стандартных блоках(blur, grayscale и тд
11.Трансформация и 3D-трансформация
Поворот, смещение, искажение, увеличение
12.Анимация
Длительность, плавность перехода, зацикленность
13.Наведение на элементы: hover
Как работать со свойством hover
Комбинации анимаций
14.Псевдоклассы before и after
Как и где можно использовать псевдоклассы
15.Медиа запросы
Что такое медиазапрос и какими они бывают
16.Кроссбразерность
Работа с префиксами
17.Работа с переменными в css
Что это такое и почему с ними удобно работать в рамках тильды
Бонусы
Обзор и работа с annexx
Закрытый чат с поддержкой от участников
SVG анимация
Работа с Java Script
Введение
Основные элементы и свойства, с которыми мы будем работать
Что такого id, class, tag, data-atribute
2. Панель разработчика
Панель разработчика можно вызвать 4 способами:
Нажать клавишу F12
Нажать сочетание клавиш Ctrl+Shift+I
Нажать сочетание клавиш Ctrl+Shift+С (сразу активируется режим выбора элемента)
Иконка 3-х точек в правом верхнем углу - Дополнительные инструменты - Инструменты разработчика
Вкладка "Стили" - что означают и как ими пользоваться
Вкладка "Вычисление"
Вкладка "Консоль"
Как найти класс элемента
Как обращаться к нужному нам элементу
3.Работа с текстом + шрифты
Преобразование текста ( text-transform)
Выравнивание и выключка строк(text-align,
Стили текста ( зачеркивание, подчеркивание, толщина, размер)
Трекинг, кернинг и спэйсинг
Списки
Как поменять любой шрифт на сайте на свой
Текст в zero-block
4.Декорирование элементов
Скругление углов, обводка, тень, цвет, градиент
5.Изображения и их свойства + работа с фоном
Как менять свойства изображений(cover, fit, fill)
6.Ширина, высота и единицы измерения
Свойства widht, height, max-width, max-height
Какие бывают единицы измерения
7.Позиционирование элементов
position, смещение, обтекание, z-index,
8.Отступы внутренние и внешние
Как уменьшать или добавлять размер отступов у стандартных блоков
9.Блочные и строчные элементы
block, inline-block, flex, grid
10.Эффекты
Научимся работать с эффектами в стандартных блоках(blur, grayscale и тд
11.Трансформация и 3D-трансформация
Поворот, смещение, искажение, увеличение
12.Анимация
Длительность, плавность перехода, зацикленность
13.Наведение на элементы: hover
Как работать со свойством hover
Комбинации анимаций
14.Псевдоклассы before и after
Как и где можно использовать псевдоклассы
15.Медиа запросы
Что такое медиазапрос и какими они бывают
16.Кроссбразерность
Работа с префиксами
17.Работа с переменными в css
Что это такое и почему с ними удобно работать в рамках тильды
Бонусы
Обзор и работа с annexx
Закрытый чат с поддержкой от участников
SVG анимация
Работа с Java Script
