sproshchaev / html-css

Demo

html-css

Demo

Content

HTML5

1. Базовая структура, метатеги, Viewport, Шапка https://code-basics.com/ru/languages/html/lessons/basics https://code-basics.com/ru/languages/html/lessons/meta https://code-basics.com/ru/languages/html/lessons/viewport
2. Блочные элементы: параграфы, списки, pre, div, заголовки, таблицы. Строчные элементы: a, b, strong, i, em, картинки, span https://code-basics.com/ru/languages/html/lessons/block
3. Начертание текста: жирное и курсивное https://code-basics.com/ru/languages/html/lessons/text-style
4. Списки: маркированный и нумерованный, вложенные списки https://code-basics.com/ru/languages/html/lessons/lists https://code-basics.com/ru/languages/html/lessons/nested-lists
5. Таблицы: область таблицы, шапка, тело, строка, ячейка, объединение ячеек https://github.com/sproshchaev/html-css/tree/main/table
6. Специальные символы https://code-basics.com/ru/languages/html/lessons/special-characters
7. Ссылки, фавиконки (link) https://code-basics.com/ru/languages/html/lessons/links https://code-basics.com/ru/languages/html/lessons/link
8. Форматированный текст, вставка примера кода в html https://code-basics.com/ru/languages/html/lessons/pre
9. Изображения https://code-basics.com/ru/languages/html/lessons/img
10. Аудио (audio) https://code-basics.com/ru/languages/html/lessons/audio
11. Видео (video) https://code-basics.com/ru/languages/html/lessons/video
12. Формы https://github.com/sproshchaev/html-css/tree/main/form-basics
13. Поле для ввода текста https://code-basics.com/ru/languages/html/lessons/input
14. Чекбокс https://code-basics.com/ru/languages/html/lessons/checkbox
15. Радиокнопка https://code-basics.com/ru/languages/html/lessons/radio
16. Textarea https://code-basics.com/ru/languages/html/lessons/textarea
17. Список https://code-basics.com/ru/languages/html/lessons/select
18. Отправка формы https://code-basics.com/ru/languages/html/lessons/button
19. Семантические теги: article, aside, footer, header, main, nav, section https://code-basics.com/ru/languages/html/lessons/semantic-elements https://code-basics.com/ru/languages/html/lessons/semantics-header
20. Меню https://code-basics.com/ru/languages/html/lessons/nav
21. Уникальный контент страницы https://code-basics.com/ru/languages/html/lessons/main
22. Секция, Самостоятельная секция https://code-basics.com/ru/languages/html/lessons/section https://code-basics.com/ru/languages/html/lessons/article
23. Боковая панель https://code-basics.com/ru/languages/html/lessons/aside
24. Семантическая разметка https://code-basics.com/ru/languages/html/lessons/semantics
25. Микроразметка https://code-basics.com/ru/languages/html/lessons/microdata

CSS3

1. CSS в HTML

2. Запись стилей в теге style https://code-basics.com/ru/languages/css/lessons/style

3. Базовые стили тегов https://code-basics.com/ru/languages/css/lessons/basics-style

4. Классы https://code-basics.com/ru/languages/css/lessons/selectors-by-class

5. Селекторы https://code-basics.com/ru/languages/css/lessons/selectors

6. Цвета https://code-basics.com/ru/languages/css/lessons/color

7. Выравнивание текста https://code-basics.com/ru/languages/css/lessons/text-align

8. Размер шрифта https://code-basics.com/ru/languages/css/lessons/font-size ФОНТ

9. Насыщенность шрифта https://code-basics.com/ru/languages/css/lessons/font-weight ФОНТ

10. Курсив https://github.com/sproshchaev/html-css/tree/main/font-style ФОНТ

11. Капитель https://github.com/sproshchaev/html-css/tree/main/font-variant ФОНТ

12. Горизонтальная черта https://github.com/sproshchaev/html-css/tree/main/text-decoration

13. Размер шрифта и межстрочный интервал https://github.com/sproshchaev/html-css/tree/main/line-height

14. Семейство шрифта https://github.com/sproshchaev/html-css/tree/main/font-family ФОНТ

15. Правило для шрифтов https://github.com/sproshchaev/html-css/tree/main/font ФОНТ

16. Базовые правила типографики https://github.com/sproshchaev/html-css/tree/main/conclusion ФОНТ

17. Рамки https://github.com/sproshchaev/html-css/tree/main/border-style

18. Фон https://github.com/sproshchaev/html-css/tree/main/background

19. Внутренние отступы https://github.com/sproshchaev/html-css/tree/main/padding

20. Внешние отступы https://github.com/sproshchaev/html-css/tree/main/margin

21. Высота и ширина блока https://github.com/sproshchaev/html-css/tree/main/height-and-width

22. Блочная модель https://github.com/sproshchaev/html-css/tree/main/box-model

23. Единицы измерения https://github.com/sproshchaev/html-css/tree/main/units

24. Цветовая модель RGB https://github.com/sproshchaev/html-css/tree/main/colors

25. Медиа запросы https://github.com/sproshchaev/html-css/tree/main/media

26. Анимация https://github.com/sproshchaev/html-css/tree/main/animation

27. Переменные https://github.com/sproshchaev/html-css/tree/main/varibles

28. Позиционирование https://github.com/sproshchaev/html-css/tree/main/position

29. Flex и Grid https://github.com/sproshchaev/html-css/tree/main/flex-grid

30. SASS https://github.com/sproshchaev/html-css/tree/main/sass

31. Figma https://github.com/sproshchaev/html-css/tree/main/figma-demo

32. Media Queries & Responsive https://github.com/sproshchaev/html-css/tree/main/media-queries

33. Создание заголовков веб-сайтов с помощью CSS Flexbox

References

1. HTMLBASE - самый современный справочник по HTML и CSS https://htmlbase.ru/