Курс веб разработки сайтов на 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) Спонсорство на RU-vid и дополнительные бонусы:
/ @pythonhubstudio
2) И кнопка Суперспасибо!
Это способ выразить особую благодарность автору и
мотивировать на создание нового полезного контента!
Посмотреть на сайт из последнего проекта:
pythonhubstudio.github.io/
Bootstrap:
getbootstrap.com/
Ссылка на картинки для проекта с Bootstrap:
drive.google.com/drive/folder...
Шаблоны html и css, анимация:
webcode.tools/
Шрифты:
fonts.google.com/
developers.google.com/fonts/d...
Favicon:
favicon.io/favicon-generator/
GitHub:
github.com/
Код последнего проекта:
github.com/PythonHubStudio/py...
Курс программирования на языке Python:
• Учим python за 7 часов...
Подписывайтесь на канал!
5 май 2024
