Шпаргалки для начинающего верстальщика HTML/CSS

 Шпаргалки для начинающего верстальщика HTML/CSS. Елена Эберт....2

Вступление....4

Как работать с данной книгой....5

Создаем каркас сайта....6

Общая универсальная структура нашей страницы....7

Пишем шапку сайта....9

Оформляем шапку сайта в HTML (тип 1)....11

Кратко опишу теги, примененные выше в коде....11

Ширина изображения....13

Форма поиска по сайту....14

Зачем нужны секция, контейнер и див-блоки....16

Зачем нужен class....17

Оформляем шапку сайта в HTML (тип 2)....18

Кратко опишу теги, примененные выше в коде....20

Оформляем шапку первого типа в CSS....21

Кратко опишу теги, примененные выше в коде....22

Оформляем шапку второго типа в HTML с помощью Bootstrap....23

Кратко опишу теги, примененные выше в коде....24

Как оформить блок из 2х частей....26

в HTML мы оформим его так....26

И если в CSS укажем....27

Оформляем блок с карточками....28

HTML мы оформим так....28

Текст списком....30

в HTML....30

в CSS....30

Верстаем подвал....32

в HTML....32

в CSS....33

Примечание по коду....35

Часто используемые свойства в CSS....36

Отображение на экране....37

Оформляем элемент....38

Свойство width....38

Оформляем границу....39

Скругление углов....40

Фоновое изображение....40

Если фоновое изображение нужно прокручивать вместе с текстом....40

Что означает padding и margin....42

padding....42

margin....43

Размеры в CSS....44

Выравниваем текст....46

Свойства CSS для шрифтов....47

Толщина, размер, красная строка и курсив текста....47

Декорируем шрифт....47

Межстрочный интервал....47

Как подключать шрифты в CSS....49

Специфика блочных и строчных элементов в CSS....50

Специфика строчно-блочных элементов....53

Свойство display....53

flex-элементы CSS....55

Абсолютное и относительное позиционирование элементов CSS....57

Позиционирование относительно родителя....58

Наложение элементов....59

Размещение flex- элементов....61

Приоритеты стилей в CSS....64

Псевдоэлементы и псевдоклассы....65

Медиа-запросы в CSS....66

Как работать с медиа-запросами....67

Выравниваем блок по центру....69

Блок с текстом поверх картинки....70

в HTML....70

в CSS....70

Если нужно сделать блоку тень....71

Разное....72

Декоративные линии....73

Разделяем предложение....74

Блок на всю ширину экрана....75

Кратко основы jQuery....76

Прикрутим анимацию и видео с помощью jQuery-плагина Fancybox....79

Делаем переключение в меню....81

Полезное....83

Как работать с панелью разработчика....84

Некоторые приемы для работы с панелью разработчика....87

Что такое Git....88

Кратко о CSS Grid....89

Bootstrap....93

Как он работает данный фреймворк?....93

Как учить Bootstrap?....96

Полезные библиотеки и веб-ресурсы....98

Полезные плагины для верстки....100

Что почитать?....101

Книга отлично подходит тем, кто только начинает учить верстку. Здесь вы найдете универсальный код и полезные советы, крутые эффективные ресурсы, применяя которые можно быстро и легко научиться верстать реальные проекты. Вы откроете новые фишки, лайфхаки для своей верстки…