Учим 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 (размещаем сайт на сервере)
🎓 Мои курсы на Udemy со скидкой + 🧾 сертификат об окончании:
❤️ Python https://tukas.dev/python-full-course/
💛 Docker https://tukas.dev/docker-full-course/
💚 WSL (free) https://tukas.dev/wsl-setup-course/
🧩 Ответы на вопросы о курсах ⬆️:
🔹 Проходить курс можно в любое время и в любом темпе (нет ограничения по времени).
🔹 Пожизненный доступ к курсу и к всем будущим его обновлениям и дополнениям.
🔹 Выбирайте "Одноразовая покупка" а не "Подписка", чтоб выгодно купить только выбранный курс навсегда по минимальной цене по промокоду встроенному в ссылки выше.
🔹 На Udemy можно получить сертификат об окончании полного курса (кроме free WSL курса).
🔹 ДА, моя поддержка там есть👍, если возникают вопросы во время прохождения курса!
Посмотреть на сайт из последнего проекта:
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...
💡Все мои курсы на YouTube:
🔷🔥Новый курс по Python на YouTube [12 часов]:
• Курс Python с Абсолютного нуля! [12 часов ...
🔷 Roadmap по Python, что учить:
• Что реально пишут на python, что учить и к...
🔷 Docker & Docker Compose
🔹 Курс на YouTube (4 часа):
• Docker и Docker Compose - Полный Курс Dock...
🔷 Django (18 часов):
• Полный курс уроков по Django python
🔷 Telegram бот на python (aiogram):
• Telegram бот на python. Курс по разработке...
🔷 Парсинг на сайтов на python:
• Курс Парсинга на Python
🔷 Экспресс по ООП python (музыка только в 1-ом видео):
• Полный курс уроков обучения ООП Python
🔷 И другие видео на канале!
Всем хорошего дня от канала Python Hub Studio!