Учим 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:
-------------------------------------------------------------------------------------------------------------------
Кто хочет, может купить автору кофе, чтоб делать новое видео было веселей:
Доступны функции Спонсорство и Суперспасибо.
При этом весь контент на канале, как был, так и останется в открытом доступе ДЛЯ ВСЕХ!
А спонсосрство и суперспасибо - это способ выразить особую благодарность автору и
мотивировать на создание нового полезного контента!
Кнопки Суперспасибо и Спонсировать под видео(отображаются не во всех странах)
-------------------------------------------------------------------------------------------------------------------
Подписывайтесь на канал!
1 view
235
56
2 weeks ago 01:55:55 1
Зачем художнику соцсети? Farely
2 weeks ago 00:10:17 1
Быстрая Демонстрация Дыхательной Техники Вима Хофа (Это Займет Всего 6 Минут!)
2 weeks ago 00:03:12 1
ДЕТСКАЯ ПЕСНЯ ПРО КОСМОС | НА ДЕНЬ КОСМОНАВТИКИ
2 weeks ago 03:55:52 1
Адаптивная верстка сайта с нуля для начинающих. Объяснение действий. HTML CSS
2 weeks ago 00:40:55 1
БРОСИЛ ВСЕ в ГОРОДЕ , УЕХАЛ в ЛЕС , ЖИВУ СРЕДИ ЖИВОТНЫХ. №302
3 weeks ago 00:01:00 1
Про добрые дела и душу
3 weeks ago 00:22:22 1
Беседа с Елизаветой о школе IROHA Japanese Language School в Фукуоке
3 weeks ago 00:06:38 1
Spotlight 2. Страница 87. Unit 11b. Английский язык. 2 класс. Упражнение 3. Спой песенку, сопрово...
3 weeks ago 00:15:30 1
Мультфильм для самых маленьких. Учим дорожные знаки. “Цветашки“ часть 1.