Часть 1 Учим 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 запросы для адаптивной сетки

Посмотреть на сайт из последнего проекта:
https://pythonhubstudio.github.io/

Bootstrap:
https://getbootstrap.com/

Ссылка на картинки для проекта с Bootstrap:
https://drive.google.com/drive/folders/1THgTXkBtJuYEebla2K1M515qBPRdjWFS?usp=sharing&pli=1

Шаблоны html и css, анимация:
https://webcode.tools/

Шрифты:
https://fonts.google.com/
https://developers.google.com/fonts/docs/getting_started?hl=ru

Favicon:
https://favicon.io/favicon-generator/

GitHub:
https://github.com/

Код последнего проекта:
https://github.com/PythonHubStudio/pythonhubstudio.github.io