Вы превысили запрос на
0 знаков
0 знаков
HTML и CSS
20 тестов 189 уроков
FrontendBook
Нехватает информации по HTML-тегам, нужна дополнительная литература или бесплатные иконки для своих проектов? Вот решение для Вас.
FrontendColors
У Вас нет образования дизайнера, а Вы хотите наполнить свой сайт красивыми шрифтами и сочетающимися между собой цветами? Вот Вам решение.
FrontendGradients
Если выбрать наобум парочку цветов, то получится ли идеальный градиент? Инструменты этого сайта помогут Вам с правильным выбором.
Чтобы использовать все функции сайта (например, сохранение прогресса прохождения уроков и участие в рейтинге среди пользователей), вам нужно авторизоваться. Это можно сделать пройдя обычную регистрацию с использованием почты или в пару кликов, если у вас есть один из аккаунтов: ВКонтакте, GitHub, Google, Яндекс или Telegram.
Раздел 1. Знакомство с HTML
☓
1. УРОК: Вводный урок по курсу HTML и CSS
☓
2. УРОК: Что такое HTML?
☓
3. УРОК: Первое знакомство с HTML
☓
4. УРОК: Теги в HTML. Одинарные и парные теги
☓
5. УРОК: Что такое теги и для чего они нужны?
☓
6. УРОК: Одинарные теги
☓
7. УРОК: Парные теги
☓
8. ТЕСТ: Вводный тест по курсу HTML и CSS
☓
9. ТЕСТ: Тест по одинарным и парным тегам
☓
10. ПРАКТИКА: Структура HTML документа
☓
11. УРОК: Что означают теги HTML, HEAD, BODY?
☓
12. УРОК: Первая строка всех сайтов - DOCTYPE
☓
13. УРОК: Исходный код веб-страницы
☓
14. УРОК: Заголовок в HTML - тег TITLE
☓
15. ТЕСТ: Тест по структуре HTML документа
☓
16. УРОК: Кодировка HTML страницы и атрибуты
☓
17. УРОК: Описание стилей в HTML документе
☓
18. УРОК: Подключение внешних файлов в HTML - стили CSS
☓
19. ПРАКТИКА: Что не хватает в структуре?
☓
20. ПРАКТИКА: Опять чего-то не хватает в структуре
☓
21. ТЕСТ: Тест по подключению файлов к веб-странице и кодировке
☓
22. УРОК: Использование HTML метатегов (Мета теги)
☓
23. ПРАКТИКА: Повторим метатеги
☓
24. ПРАКТИКА: Метатеги Facebook
Раздел 2. Разметка текста
☓
25. УРОК: Заголовки и подзаголовки в HTML
☓
26. ПРАКТИКА: Заголовки и подзаголовки в HTML (практика 1)
☓
27. ТЕСТ: Тест по заголовкам и подзаголовкам в HTML
☓
28. УРОК: Что такое абзац в HTML (тег P)?
☓
29. ТЕСТ: Тест по абзацам в HTML
☓
30. УРОК: Перенос строки и разделительная линия в HTML
☓
31. ПРАКТИКА: Практика: Перенос строки в HTML
☓
32. ТЕСТ: Тест по переносу строки и разделительной линии в HTML
☓
33. УРОК: Нумерованный список в HTML
☓
34. ТЕСТ: Тест по нумерованным спискам в HTML
☓
35. УРОК: Что такое маркированный список в HTML
☓
36. ТЕСТ: Тест по маркированным спискам в HTML
☓
37. УРОК: Акцентирование (выделение) текста в HTML
☓
38. ПРАКТИКА: Жирно-курсиво-перечеркнутый
☓
39. ТЕСТ: Тест по акцентированию текста в HTML
☓
40. УРОК: Цитаты в HTML
☓
41. ТЕСТ: Тест по цитатам в HTML
☓
42. УРОК: Верхний и нижний индекс в HTML
☓
43. ТЕСТ: Тест по индексам в HTML
☓
44. УРОК: Универсальные атрибуты в HTML
☓
45. ТЕСТ: Тест по универсальным атрибутам в HTML
Раздел 3. Ссылки
☓
46. УРОК: Что такое ссылки в HTML
☓
47. УРОК: Якоря в HTML
☓
48. УРОК: Атрибуты для ссылок
☓
49. ТЕСТ: Тест по ссылкам в HTML
Раздел 4. Изображения
☓
50. УРОК: Что такое изображение в HTML
☓
51. УРОК: Выравнивание изображений при помощи HTML
☓
52. ТЕСТ: Тест по основам работы с изображениями в HTML
☓
53. УРОК: Ширина, высота, рамка у изображений в HTML
☓
54. ПРАКТИКА: Рамка у изображений
☓
55. УРОК: Альтернативный текст в HTML
☓
56. ТЕСТ: Заключительный тест по изображениям в HTML
Раздел 5. Таблицы
☓
57. УРОК: Что такое таблица в HTML
☓
58. УРОК: Тег TR в HTML таблицах
☓
59. УРОК: Тег TD в HTML таблицах
☓
60. ТЕСТ: Тест по основам создания таблиц в HTML
☓
61. ПРАКТИКА: Практика 1: colspan и rowspan
☓
62. ПРАКТИКА: Практика 2: colspan и rowspan
☓
63. УРОК: Рамки для таблиц, строк и ячеек в HTML
☓
64. УРОК: Cтруктурирование HTML таблиц
☓
65. УРОК: Заголовок (CAPTION) HTML таблиц
☓
66. УРОК: Отступы между ячейками в HTML таблицах
☓
67. УРОК: Работаем с цветами в HTML таблице
☓
68. УРОК: Цветные строки в HTML таблице
☓
69. ТЕСТ: Заключительный тест по таблицам в HTML
☓
70. ПРАКТИКА: Поиск ошибок в таблицах
Раздел 6. Формы
☓
71. УРОК: Что такое формы в HTML
☓
72. УРОК: Как создать форму в HTML и ее атрибуты
☓
73. ТЕСТ: Вводный тест по формам в HTML
☓
74. УРОК: Кнопки в HTML - тег BUTTON
☓
75. УРОК: Универсальный тег в HTML форме - тег INPUT
☓
76. УРОК: Многострочное поле для текста – TEXTAREA
☓
77. УРОК: Метки в HTML формах - LABEL
☓
78. УРОК: Раскрывающийся список на HTML - тег SELECT
☓
79. УРОК: Для чего нужен тег KEYGEN
☓
80. УРОК: Группировка элементов в HTML формах
☓
81. УРОК: Группировка элементов списка в HTML
☓
82. ТЕСТ: Заключительный тест по формам в HTML
Раздел 7. HTML5
☓
83. УРОК: Знакомство с HTML5
☓
84. УРОК: Структурирование страницы при помощи HTML5
☓
85. УРОК: Еще отличия HTML5 от HTML4
☓
86. УРОК: Немного о CANVAS
☓
87. УРОК: Звук в HTML5, элемент AUDIO
☓
88. УРОК: Видео в HTML5, элемент VIDEO
Раздел 8. Остальное
☓
89. УРОК: Блочный элемент DIV в HTML
☓
90. УРОК: Строчной элемент SPAN в HTML
☓
91. УРОК: Плавающий фрейм IFRAME в HTML
☓
92. УРОК: Форматирование кода тегами PRE и CODE
Раздел 9. Знакомство с CSS
☓
93. УРОК: Что такое CSS?
☓
94. УРОК: Селекторы и свойства в CSS
Раздел 10. Селекторы в CSS
☓
95. УРОК: Основные правила и знакомство с селекторами
☓
96. УРОК: Группировка селекторов в CSS
☓
97. УРОК: Селекторы классов и идентификаторов
☓
98. УРОК: Несколько классов
☓
99. УРОК: Селекторы идентификаторов (id селекторы)
☓
100. УРОК: Селекторы атрибутов: простой выбор
☓
101. УРОК: Селекторы атрибутов: по конкретному значению
☓
102. УРОК: Селекторы атрибутов: по частичному значению
☓
103. УРОК: Селекторы атрибутов: по конкретному атрибуту
☓
104. УРОК: Структура документа: родитель-потомок в CSS
☓
105. УРОК: Структура документа: дочерние элементы в CSS
☓
106. УРОК: Структура документа: сестринские элементы в CSS
☓
107. УРОК: Псевдоклассы: ссылки
☓
108. УРОК: Псевдоклассы: первый дочерний элемент
☓
109. УРОК: Псевдоэлементы: первая буква и строка
Раздел 11. Структура и каскад
☓
110. УРОК: Специфичность в CSS
☓
111. УРОК: Наследование в CSS
☓
112. УРОК: Каскад в CSS
Раздел 12. Единицы измерения
☓
113. УРОК: Числа и процентные значения в CSS
☓
114. УРОК: Именованные цвета в CSS
☓
115. УРОК: Цветовая модель RGB в CSS
☓
116. УРОК: Единицы измерения длины в CSS
☓
117. УРОК: URL в CSS
Раздел 13. Шрифт
☓
118. УРОК: Семейство шрифтов в CSS
☓
119. УРОК: Насыщенность шрифта в CSS
☓
120. УРОК: Размер шрифта в CSS
☓
121. УРОК: Стиль шрифта в CSS
☓
122. УРОК: Свойство font в CSS
☓
123. УРОК: Как подключить сторонний шрифт в CSS
Раздел 14. Свойства текста
☓
124. УРОК: Как сделать отступ или красную строку в CSS
☓
125. ПРАКТИКА: Красная строка - первый раз
☓
126. ПРАКТИКА: Красная строка - самостоятельно
☓
127. ПРАКТИКА: Красная строка - где ошибка?
☓
128. ПРАКТИКА: Красная строка - где еще ошибка?
☓
129. УРОК: Горизонтальное и вертикальное выравнивание в CSS
☓
130. ПРАКТИКА: Горизонтальное выравнивание - первый раз
☓
131. ПРАКТИКА: Горизонтальное выравнивание - где ошибка?
☓
132. ПРАКТИКА: Межстрочный интервал (интерлиньяж) - первый раз
☓
133. ПРАКТИКА: Межстрочный интервал (интерлиньяж) - самостоятельно
☓
134. ПРАКТИКА: Межстрочный интервал (интерлиньяж) - где ошибка?
☓
135. ПРАКТИКА: Расстояние между словами (word-spacing) - первый раз
☓
136. ПРАКТИКА: Расстояние между словами (word-spacing) - самостоятельно
☓
137. ПРАКТИКА: Расстояние между словами (word-spacing) - где ошибка?
☓
138. ПРАКТИКА: Расстояние между буквами (letter-spacing) - первый раз
☓
139. ПРАКТИКА: Расстояние между буквами (letter-spacing) - самостоятельно
☓
140. ПРАКТИКА: Расстояние между буквами (letter-spacing) - где ошибка?
☓
141. ПРАКТИКА: Изменение регистра (text-transform) - первый раз
☓
142. ПРАКТИКА: Изменение регистра (text-transform) - самостоятельно
☓
143. ПРАКТИКА: Изменение регистра (text-transform) - где ошибка?
☓
144. ПРАКТИКА: Убираем подчеркивание у ссылок (text-decoration)
☓
145. ПРАКТИКА: Добавляем подчеркивание текста (text-decoration)
Раздел 15. Форматирование
☓
146. УРОК: Свойства форматирования all, clear и clip
☓
147. УРОК: Свойство display
Раздел 16. Отступы, рамки, поля
☓
148. УРОК: Свойство margin для установки отступов
☓
149. УРОК: Свойство padding для установки полей
☓
150. УРОК: Свойство border для создания границ
☓
151. УРОК: Свойство outline для создания внешних границ
Раздел 17. Цвета и фон
☓
152. УРОК: Свойство background для работы с фоном
☓
153. УРОК: Свойство color для работы с цветом
☓
154. УРОК: Добавляем градиент к фону элемента
Раздел 18. Позиционирование
☓
155. УРОК: Позиционирование элементов свойством position
☓
156. УРОК: Изменяем свойствами left, top, right и bottom положение элемента
☓
157. УРОК: Свойство z-index для определения уровня элемента
Раздел 19. Верстка таблиц
☓
158. УРОК: Общая информация и форматирование таблиц
Раздел 20. Списки
☓
159. УРОК: Типы списков в CSS
☓
160. УРОК: Маркер списка в виде изображения
☓
161. УРОК: Как изменить положение маркера списка
☓
162. УРОК: Краткое свойство для изменения стиля списка
Раздел 21. Анимация
☓
163. УРОК: Как сделать плавный переход в CSS
☓
164. УРОК: Трансформирование элементов при помощи CSS
Раздел 22. Практика с htmlbook.ru
☓
165. ПРАКТИКА: TEX
☓
166. ПРАКТИКА: Андроид в кружке
☓
167. ПРАКТИКА: Вложенные списки
☓
168. ПРАКТИКА: Выворотка
☓
169. ПРАКТИКА: Заголовки
☓
170. ПРАКТИКА: Многочлен степени n
☓
171. ПРАКТИКА: Объединение ячеек
☓
172. ПРАКТИКА: Отступы между блоков
☓
173. ПРАКТИКА: Поле для ввода чисел
☓
174. ПРАКТИКА: Поле для поиска
☓
175. ПРАКТИКА: Работа с абзацами
☓
176. ПРАКТИКА: Разноцветные ссылки
☓
177. ПРАКТИКА: Рисованная рамка
☓
178. ПРАКТИКА: Создание веб-страницы
☓
179. ПРАКТИКА: Создание ссылок
☓
180. ПРАКТИКА: Создание таблицы
☓
181. ПРАКТИКА: Стиль для печати
☓
182. ПРАКТИКА: Стихотворение
☓
183. ПРАКТИКА: Флаг Японии
☓
184. ПРАКТИКА: Цвет и фон в таблице
☓
185. ПРАКТИКА: Цвет фона и текста документа
☓
186. ПРАКТИКА: Чередующиеся квадраты
☓
187. ПРАКТИКА: Ширина таблицы
☓
188. ПРАКТИКА: Батарейка
☓
189. ПРАКТИКА: Вырезанные уголки
☓
190. ПРАКТИКА: Гламурная кнопка
☓
191. ПРАКТИКА: Градиентные кнопки в Safari
☓
192. ПРАКТИКА: Граница вокруг формы
☓
193. ПРАКТИКА: Двойная рамка
☓
194. ПРАКТИКА: Значки для листания фотографий
☓
195. ПРАКТИКА: Индикатор прогресса
☓
196. ПРАКТИКА: Квадратный корень
☓
197. ПРАКТИКА: Квадраты
☓
198. ПРАКТИКА: Круговая диаграмма
☓
199. ПРАКТИКА: Наложение слоев
☓
200. ПРАКТИКА: Нумерация
☓
201. ПРАКТИКА: Нумерация страниц
☓
202. ПРАКТИКА: Обязательные поля формы
☓
203. ПРАКТИКА: Отступ под изображением
☓
204. ПРАКТИКА: Поле для игры в гомоку
☓
205. ПРАКТИКА: Последняя линия справа
☓
206. ПРАКТИКА: Прогноз погоды
☓
207. ПРАКТИКА: Рамка с поворотом
Раздел 23. Элементы сайта
☓
208. ПРАКТИКА: Кнопка на сайте codebra
Раздел 24. Знакомство с Flexbox
☓
209. УРОК: Знакомимся с Flexbox в CSS