⌘K

Учебник HTML и CSS для новичков

Простой учебник по верстке на языках HTML и CSS для новичков с подробной теорией и задачником.

Основы HTML

001

Языки для создания сайта

002

Язык HTML

003

HTML теги

004

Атрибуты в HTML тегах

005

Стили HTML тегов

006

Основная структура страницы HTML

007

Работа с основными HTML тегами

008

Теги для абзацев

009

Теги для заголовков страницы

010

Теги для выделения текста жирным

011

Теги для выделения текста курсивом

012

Неупорядоченные списки в HTML

013

Упорядоченные списки в HTML

014

Работа со ссылками в HTML

015

Внутренние ссылки в HTML

016

Работа с изображениями в HTML

017

Ширина картинки в HTML

018

Высота картинки в HTML

019

Ширина и высота картинке в HTML

020

Работа с таблицами в HTML

021

Ширина и высота таблицы в HTML

022

Ячейки-заголовки в таблице в HTML

023

Практика на основные HTML теги

Основы CSS

024

Основы работы с языком CSS

025

Как работать с CSS

026

Ключевые слова для цвета в CSS

027

Любые цвета в CSS

028

Ширина и высота элементов в CSS

029

Выравнивание текста в CSS

030

Выравнивание текста вправо в CSS

031

Выравнивание текста по центру в CSS

032

Выравнивание текста влево в CSS

033

Выравнивание текста одновременно вправо и влево в CSS

034

Практика на выравнивание текста в CSS

035

Жирность текста в CSS

036

Курсив в CSS

037

Размер шрифта в CSS

038

Тип шрифта в CSS

039

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

040

Значение line-height без единиц в CSS

041

Свойство-сокращение font в CSS

042

Красная строка текста в CSS

043

Эффекты текста в CSS

044

Нижнее подчеркивание текста в CSS

045

Верхнее подчеркивание текста в CSS

046

Перечеркивание текста в CSS

047

Отмена эффектов для текста в CSS

048

Практика на основные CSS свойства

Селекторы

049

Родственные связи тегов в HTML

050

Наследование CSS свойств

051

Группировка селекторов в CSS

052

Общие свойства при группировке селекторов в CSS

053

Селектор потомков в CSS

054

Дочерний селектор в CSS

055

Классы элементов в CSS

056

Тег span для кусочков текста в HTML

057

Тег div для группировки тегов в HTML

058

Группировка классов в CSS

059

Тег с заданным классом в CSS

060

Селектор потомков и классы в CSS

061

Сложные комбинации селектора потомков и классов в CSS

062

Ошибка новичков в селекторе потомков

063

Элемент с несколькими CSS классами

064

Выбор элемента по уникальному id в CSS

065

Селектор по id и CSS классы

066

Использование id в CSS

067

Выбор элемента по нескольким классам в CSS

068

Несколько селекторов слитно в CSS

069

Ошибка при использовании несколько CSS селекторов

070

Группировка сложных селекторов в CSS

071

Ошибка при группировке сложных CSS селекторов

072

Практика на комбинации CSS селекторов

073

Приоритет селекторов CSS

074

Замечание к конфликту свойств CSS

075

Правила специфичности в CSS

076

Приоритет селекторов потомков в CSS

077

Соседний селектор в CSS

078

Родственный селектор в CSS

079

Универсальный селектор в CSS

080

Селекторы атрибутов в CSS

081

Состояния ссылок в CSS

082

Нюансы последовательности состояния ссылок в CSS

083

Состояния ссылок link и visited в CSS

084

Обычное использование состояния ссылок в CSS

085

Сложные селекторы с состояниями ссылок в CSS

086

Ссылка с классом в CSS

087

Выборка концевых элементов в CSS

088

Выборка по позиции элементов в CSS

089

Выборка единственного потомка в CSS

090

Выборка пустых элементов в CSS

091

Выборка по позиции и типу элементов в CSS

092

Селектор отрицания в CSS

Оформление

093

Установка фонового цвета в CSS

094

Основы работы с границами в CSS

095

Сплошная граница в CSS

096

Toчечная граница в CSS

097

Граница в виде тире в CSS

098

Выпуклая граница в CSS

099

Двойная граница в CSS

100

Свойство-сокращение для границы в CSS

101

Граница для отдельных сторон в CSS

102

Скругление границ блока в CSS

103

Скругление границ фона в CSS

104

Создание круга в CSS

105

Разные скругления для разных углов CSS

106

Четыре значения скругления для разных углов CSS

107

Два значения скругления для разных углов CSS

108

Три значения скругления для разных углов в CSS

109

Скругленные уголки в процентах в CSS

110

Создание круга при скруглении в процентах в CSS

111

Картинка для фона в CSS

112

Повторение картинки фона в CSS

113

Другие свойства для фона в CSS

114

Работа с маркерами списков ul в CSS

115

Квадратные маркеры списков ul в CSS

116

Маркеры списков ul в виде кружков в CSS

117

Работа с маркерами списков ul в CSS

118

Отсутствие маркеров списков ul в CSS

119

Работа с маркерами списков ol в CSS

120

Строчные римские цифры для списков ol в CSS

121

Заглавные римские цифры для списков ol в CSS

122

Строчные латинские буквы для списков ol в CSS

123

Заглавные латинские буквы для списков ol в CSS

124

Строчные греческие буквы для списков ol в CSS

125

Числа с нулем впереди для списков ol в CSS

Блочная модель

126

Работа с отступами margin в CSS

127

Отступы margin для разных сторон в CSS

128

Несколько значений в свойстве margin в CSS

129

Четыре значения в свойстве margin в CSS

130

Два значения в свойстве margin в CSS

131

Три значения в свойстве margin в CSS

132

Работа с отступами padding в CSS

133

Отступы padding для разных сторон в CSS

134

Несколько значений в свойстве padding в CSS

135

Работа с отступами padding в CSS

136

Влияние границы на расширение элементов в CSS

137

Влияние padding и границы на расширение элементов в CSS

138

Отмена расширения элементов в CSS

139

Особенности блочных элементов в CSS

140

Ширина и высота блочного элемента в CSS

141

Ширина блочного элемента в CSS

142

Высота блочного элемента в CSS

143

Высота блочного элемента без содержимого в CSS

144

Несколько блочных элементов рядом в CSS

145

Особенности строчных элементов в CSS

146

Ширина и высота строчного элемента в CSS

147

Несколько строчных элементов рядом в CSS

148

Отступы между строчными элементами в CSS

149

Определение блочной модели HTML тегов

150

Работа со свойством display в CSS

151

Особенности строчно-блочных элементов в CSS

152

Ширина и высота строчно-блочного элемента в CSS

153

Ширина строчно-блочного элемента в CSS

154

Высота строчно-блочного элемента в CSS

155

Несколько строчно-блочных элементов рядом в CSS

156

Выравнивание блочных элементов в CSS

157

Выравнивание блочного элемента с отступом слева в CSS

158

Выравнивание блочного элемента с отступом справа в CSS

159

Выравнивание строчных элементов в CSS

160

Центрирование строчных элементов в CSS

161

Центрирование нескольких строчных элементов

162

Выравнивание строчных элементов по правому краю в CSS

163

Выравнивание строчно-блочных элементов в CSS

164

Центрирование строчно-блочных элементов в CSS

165

Выравнивание строчно-блочных элементов по правому краю в CSS

166

Флекс элементы в CSS

167

Высота родителя флекс элементов в CSS

168

Ширина родителя флекс элементов в CSS

169

Строчно-блочный родитель флекс элементов в CSS

170

Отступы padding родителя флекс элементов в CSS

171

Отступы margin потомкам в CSS

172

Выравнивание flex элементов в CSS

173

Выравнивание флекс элементов по центру в CSS

174

Выравнивание флекс элементов по родителю в CSS

175

Выравнивание флекс элементов по родителю с отступами

176

Выравнивание флекс элементов по родителю с равными отступами

Позиционирование

177

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

178

Относительное позиционирование элементов в CSS

179

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

180

Позиционирование относительно абсолютного родителя в CSS

181

Абсолютное позиционирование без координат в CSS

182

Центрирование через абсолют в CSS

183

Отрицательные значения при позиционировании в CSS

184

Фиксированное позиционирование в CSS

185

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

186

Наложение элементов по оси Z в CSS

187

Регулирование наложения элементов по оси Z в CSS

188

Нюансы применения отрицательного значения z-index в CSS

Флоаты

189

Введение в свойство float в CSS

190

Проникновение плавающих элементов через теги в CSS

191

Сочетание float и margin в CSS

192

Сочетание float и padding в CSS

193

Плавающие элементы под тегами в CSS

194

Действие флоатов на родителя в CSS

195

Высота родителя флоатов в CSS

196

Текст в родителе флоатов в CSS

197

Обтекание в CSS

198

Отмена обтекания с помощью свойства clear в CSS

199

Отдельный див с клиарфиксом в CSS

200

Клиарфикс и высота родителя в CSS

201

Свойство float для блоков в CSS

202

Свойство float и несколько блоков в CSS

203

Свойство float и родитель без текста в CSS

Флексы

204

Размещение флекс элементов в ряд или колонку в CSS

205

Размещение флекс элементов в перевернутом ряду в CSS

206

Размещение флекс элементов в колонку в CSS

207

Переворачивание колонки с флекс элементами в CSS

208

Главная и поперечная оси в флекс блоках в CSS

209

Выравнивание флекс элементов по главной оси в CSS

210

Выравнивание флекс блоков по поперечной оси в CSS

211

Значение center свойства align-items в CSS

212

Центрирование без высоты блоков в CSS

213

Центрирование с разной высотой блоков в CSS

214

Значение stretch свойства align-items в CSS

215

Практика на выравнивание по осям в CSS

216

Выравнивание отдельного элемента в flex модели в CSS

217

Порядок flex блоков в CSS

Гриды

218

Введение в CSS гриды

219

Треки и линии в CSS гридах

220

Отображение гридов в отладчике браузера

221

Количество и ширина столбцов в CSS гридах

222

Единица fr в CSS гридах

223

Дробные единицы fr в CSS гридах

224

Пиксели и единицы fr в CSS гридах

225

Проценты и единицы fr в CSS гридах

226

Функция repeat в CSS гридах

227

Значение auto в CSS гридах

228

Значение auto-fill в CSS гридах

229

Функция minmax в CSS гридах

230

Значение auto-fit в CSS гридах

231

Количество и ширина рядов в CSS гридах

232

Сокращение для рядов и столбцов в CSS гридах

233

Объединение рядов в CSS гридах

234

Объединение столбцов в CSS гридах

235

Комбинации объединений по рядам и столбцам в CSS гридах

236

Перекрытие столбцов в CSS гридах

237

Расстояние между столбцами в CSS гридах

238

Расстояние между рядами в CSS гридах

239

Расстояние между столбцами и рядами в CSS гридах

240

Плиточка в грид в CSS

Макеты

241

Создание меню в CSS

242

Простые одноколоночные макеты сайтов в CSS

243

Схема макетов с несколькими врапперами в CSS

244

Структурные блоки сайта в HTML

245

Схема двухколоночного макета сайта в CSS

246

Схема трехколоночного макета сайта в CSS

247

Специальные теги для элементов макета сайта в HTML

248

Основные теги макета в HTML

249

Тег для секций в HTML

250

Практика на макетах на HTML и CSS