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

Published: 21 October 2022
on channel: Python Hub Studio

1,178,175

39k

Курс веб разработки сайтов на 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 (размещаем сайт на сервере)

Поддержать канал:

1) Спонсорство на YouTube:
/ @pythonhubstudio
2) И кнопка Суперспасибо!
3) https://www.buymeacoffee.com/PythonHu...

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

Bootstrap:
https://getbootstrap.com/

Ссылка на картинки для проекта с Bootstrap:
https://drive.google.com/drive/folder...

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

Шрифты:
https://fonts.google.com/
https://developers.google.com/fonts/d...

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

GitHub:
https://github.com/

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

Курс программирования на языке Python:
• Учим python за 7 часов! Уроки Python ...

Подписывайтесь на канал!

Watch video Учим HTML и CSS за 7 часов! Уроки по созданию сайтов Полный курс HTML и CSS с нуля до профессионала online, duration hours minute second in high quality that is uploaded to the channel Python Hub Studio 21 October 2022. Share the link to the video on social media so that your subscribers and friends will also watch this video. This video clip has been viewed 1,178,175 times and liked it 39 thousand visitors.

9,157