[!] HTML & CSS - онлайн Уроки для начиющих с нуля
Введение
- Урок #0 Среда выполнения - как мы будем запускать примеры
- Урок #1 История появления HTML и CSS
Основы HTML
- Урок #2. Что такое HTML: теги и атрибуты
- Урок #3. Структура HTML-документа:
<!DOCTYPE html>, html, head, body, комментарии
- Урок #4. Основные метатэги:
charset, title, viewport, description
- Урок #5. Заголовки и абзацы:
h1–h6, p, br, hr
- Урок #6. Форматирование текста:
strong, em, b, i, u, s, sup, sub
- Урок #7. Ссылки: тег
a, атрибут href, абсолютные и относительные пути, якоря, target
- Урок #8. Изображения: тег
img, атрибуты src, alt, width/height, форматы
- Урок #9. Списки:
ul, ol, li, вложенные списки, dl/dt/dd
- Урок #10. Таблицы:
table, tr, th, td, thead/tbody, colspan/rowspan
- Урок #11. Контейнеры:
div и span — блочные и строчные элементы
- Урок #12. Семантические теги:
header, nav, main, section, article, aside, footer
- Урок #13. Специальные символы:
, <, & и другие мнемоники
- Урок #14. Атрибуты
id и class — подготовка к CSS
- Урок #15. Валидация HTML: как проверить код валидатором
Основы CSS
- Урок #16. Что такое CSS: простой пример — меняем цвет и размер текста
- Урок #17. Способы добавить стили: атрибут
style, тег style, внешний файл и link
- Урок #18. Селекторы: по тегу, по
class и по id
- Урок #19. Цвета и фоны:
color, background-color, форматы записи (red, #ff0000, rgb())
- Урок #20. Шрифт и текст:
font-size, font-family, font-weight, text-align, text-decoration
- Урок #21. Блочная модель:
width, height, padding, margin, border
- Урок #22. Практика: оформляем страницу, свёрстанную в уроках по HTML
Формы и мультимедиа
- Урок #23. Формы: тег
form, атрибуты action и method
- Урок #24. Элементы формы:
input и его типы (text, password, checkbox, radio, email), label
- Урок #25.
select/option, textarea, кнопки: button, submit
- Урок #26. Мультимедиа:
audio, video, вставка видео с YouTube через iframe
Раскладка и адаптивность
- Урок #27. Свойство
display: block, inline, inline-block, none
- Урок #28. Позиционирование:
position (static, relative, absolute, fixed)
- Урок #29. Flexbox:
display: flex — гибкая раскладка
- Урок #30. Адаптивность:
@media, max-width, мобильная версия
- Урок #31. Итоговый практикум: свёрстать и оформить сайт из нескольких страниц
Дополнительные материалы:
