Реклама. ООО «ЛитРес», ИНН: 7719571260.
Вступление
Как работать с данной книгой
Создаем каркас сайта
Общая универсальная структура нашей страницы
Пишем шапку сайта
Оформляем шапку сайта в 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?
Полезные библиотеки и веб-ресурсы
Полезные плагины для верстки
Что почитать?
Когда я только начинала учить верстку, я записалась на бесплатные курсы по основам HTML/CSS на одной достаточно известной платформе, дополнительно я читала книгу Э. Робсон, Э. Фримена «Изучаем HTML, XHTML и CSS (Head First)».
Все было отлично до того момента, пока я не сделала попытку сверстать небольшую простенькую веб-страницу самостоятельно. Оказывается пройденные курсы и прочитанная книга – это было зря потраченное время, так как информация, которую, например, мне дали курсы, была дана кусочками, дозировано, вследствие чего у меня совершенно не сложилось целостное понимание как и что я должна делать.
.....
Классы необходимо использовать, когда нужно определить стиль для индивидуального элемента веб-страницы или задать различные стили для одного тега. Отметим, что использовать русские буквы в именах классов нельзя.
Атрибут class указывает одно или несколько имен классов для элемента HTML. Если мы в HTML пишем элементу несколько классов, их мы должны указать просто через пробел.
.....