Учим HTML и CSS за 7 часов! Уроки по созданию сайтов Полный курс HTML и CSS с нуля до профессионала

Курс веб разработки сайтов на HTML и CSS с нуля. Профессия Frontend разработчик. Верстка сайтов. 00:00 Интро в курс HTML и CSS 00:41 Содержание курса 03:18 HTML и CSS файлы 10:00 Установка редактора Visual Studio Code 17:22 Создание файла index html 21:44 Базовая разметка страницы html 5 26:14 Тема оформления vscode 28:10 Первые html теги 30:20 Инспектор элементов сайта 34:35 Форматирование html документа 42:20 блочные и строчные теги (h, p, span) 45:00 CSS свойства 49:45 создание файла CSS 51:49 Введение в каскадность (приоритетность) CSS стилей 52:23 Подключение CSS файла к HTML докуенту 01:04:34 Тег a 01:07:20 Настройка Wrap with Abbreviation в Emmet 01:09:05 Множественное обворачивание в тег 01:15:15 Тег ul, ol 01:18:02 Вложенный список html 01:19:05 Тег img - изображение 01:21:30 Позиционирование элементов на html странице 01:28:00 Свойства margin, padding 01:34:40 Контейнеры, тег div 01:35:45 Свойства display block и inline 01:37:40 Свойство text-align center 01:40:24 Свойство display inline-block 01:42:50 Макет карты товара 01:47:20 Простая сетка на свойстве inline-block 01:55:40 Свойство display flex (flex контейнер) 01:59:10 Вставка (дополнение) про простую сетку 02:06:11 Border для списка в div контейнере 02:13:17 Свойство float. Обтекание текстом 02:22:52 Неадаптивная навигационная панель на flex, тег nav со списком 02:39:20 Введение в media запросы 02:42:00 Боковая навигационная панель 02:54:31 Изображение в навигационной панели 02:59:50 Правила каскадности свойств CSS 03:01:50 CSS селекторы 03:04:40 Вес CSS селекторов (приоритетность) 03:17:40 Единицы измерения px, %, em, rem 03:35:40 Свойство display grid (сетка) 03:36:54 Адаптивная сетка CSS grid 03:50:00 media запросы для адаптивной сетки 04:00:30 Адаптивная сетка с боковыми панелями CSS grid 04:22:50 Адаптивная навигационная панель на HTML и CSS без js 04:27:39 Стилизация тега a в навигационной панели 04:30:24 Скрыть ссылки навигационной панели 04:31:02 Кнопка бургер 04:39:00 Псевдокласс hover 04:41:00 Выпадающее меню на чистом HTML и CSS без js 04:43:21 Свойство position - absolute и relative 04:51:33 Кнопка бургер слева 04:55:00 Создание сайта на Bootstrap 5 04:56:10 Структура проекта 04:58:03 Введение в Bootstrap 5 05:01:17 Подключение CSS и JS от Bootstrap 05:07:42 Навигационная панель от Bootstrap 05:24:40 Адаптивная сетка Bootstrap и контейнеры 05:29:05 Карта товара Bootstrap 05:43:40 Значения margin и padding в Bootstrap 05:45:38 Где взять шаблоны и примеры HTML и CSS оформления 05:52:45 Боковая панель на сетке Bootstrap 05:59:45 Подключение шрифта от Google Fonts 06:12:20 Карусель изображений 06:15:15 Кастомизация карусели Bootstrap 06:31:40 Делаем footer 06:43:01 Дополняем навигационную панель 06:52:20 Анимация на чистых HTML и CSS без js 07:03:18 Добавление favicon 07:07:35 Сделать видеофон на сайт 07:17:50 Хостинг сайта на github pages (размещаем сайт на сервере) Посмотреть на сайт из последнего проекта: Bootstrap: Ссылка на картинки для проекта с Bootstrap: Шаблоны html и css, анимация: Шрифты: Favicon: GitHub: Код последнего проекта: Курс программирования на языке Python: ------------------------------------------------------------------------------------------------------------------- Кто хочет, может купить автору кофе, чтоб делать новое видео было веселей: Доступны функции Спонсорство и Суперспасибо. При этом весь контент на канале, как был, так и останется в открытом доступе ДЛЯ ВСЕХ! А спонсосрство и суперспасибо - это способ выразить особую благодарность автору и мотивировать на создание нового полезного контента! Кнопки Суперспасибо и Спонсировать под видео(отображаются не во всех странах) ------------------------------------------------------------------------------------------------------------------- Подписывайтесь на канал!