12+
Оглавление - Шпаргалки для начинающего верстальщика HTML/CSS
- Вступление
- Как работать с данной книгой
- Создаем каркас сайта
- Общая универсальная структура нашей страницы
- Пишем шапку сайта
- Оформляем шапку сайта в HTML (тип 1)
- Кратко опишу теги, примененные выше в коде
- Ширина изображения
- Форма поиска по сайту
- Зачем нужны секция, контейнер и див-блоки
- Зачем нужен class
- Оформляем шапку сайта в HTML (тип 2)
- Кратко опишу теги, примененные выше в коде
- Оформляем шапку первого типа в CSS
- Кратко опишу теги, примененные выше в коде
- Оформляем шапку второго типа в HTML с помощью Bootstrap
- Кратко опишу теги, примененные выше в коде
- Как оформить блок из 2х частей
- в HTML мы оформим его так
- И если в CSS укажем
- Оформляем блок с карточками
- HTML мы оформим так
- Текст списком
- в HTML
- в CSS
- Верстаем подвал
- в HTML
- в CSS
- Примечание по коду
- Часто используемые свойства в CSS
- Отображение на экране
- Оформляем элемент
- Свойство width
- Оформляем границу
- Скругление углов
- Фоновое изображение
- Если фоновое изображение нужно прокручивать вместе с текстом
- Что означает padding и margin
- padding
- margin
- Размеры в CSS
- Выравниваем текст
- Свойства CSS для шрифтов
- Толщина, размер, красная строка и курсив текста
- Декорируем шрифт
- Межстрочный интервал
- Как подключать шрифты в CSS
- Специфика блочных и строчных элементов в CSS
- Специфика строчно-блочных элементов
- Свойство display
- flex-элементы CSS
- Абсолютное и относительное позиционирование элементов CSS
- Позиционирование относительно родителя
- Наложение элементов
- Размещение flex- элементов
- Приоритеты стилей в CSS
- Псевдоэлементы и псевдоклассы
- Медиа-запросы в CSS
- Как работать с медиа-запросами
- Выравниваем блок по центру
- Блок с текстом поверх картинки
- в HTML
- в CSS
- Если нужно сделать блоку тень
- Разное
- Декоративные линии
- Разделяем предложение
- Блок на всю ширину экрана
- Кратко основы jQuery
- Прикрутим анимацию и видео с помощью jQuery-плагина Fancybox
- Делаем переключение в меню
- Полезное
- Как работать с панелью разработчика
- Некоторые приемы для работы с панелью разработчика
- Что такое Git
- Кратко о CSS Grid
- Bootstrap
- Как он работает данный фреймворк?
- Как учить Bootstrap?
- Полезные библиотеки и веб-ресурсы
- Полезные плагины для верстки
- Что почитать?