Адаптивная верстка сайта с нуля для новичков №8. Полезные советы по верстке сайта

YOUTUBE · 26.11.2025 05:37

Ключевые темы и таймкоды

Создание макета сайта

0:05

Автор возвращается на канал после 20-дневного перерыва и начинает с создания макета сайта.
Он объясняет, что будет делать марафон для новичков, где покажет, как создавать макет сайта с нуля.
Он начинает с создания файлов и папок для сайта, используя HTML и CSS.

Создание структуры сайта

2:04

Автор создает структуру сайта, используя теги HTML и CSS.
Он объясняет, почему использует определенные теги и стили, и как это влияет на структуру сайта.

Разметка и стилизация сайта

5:01

Автор начинает разметку и стилизацию сайта, объясняя, почему он делает это в таком порядке.
Он также объясняет, почему использует определенные классы и стили для элементов сайта.

Навигация и контент сайта

7:00

Автор создает навигацию и контент сайта, используя списки и классы.
Он объясняет, почему он использует определенные элементы и стили для навигации и контента.

Завершение макета сайта

10:00

Автор завершает создание макета сайта, объясняя, как он будет использовать стили для различных элементов.
Он также обсуждает, как он будет использовать CSS для стилизации сайта.

Создание контента

11:55

Создание контейнера и элементов, таких как заголовок, текст, кнопки и фоновые изображения.
Использование типографии для правильного написания текста и выравнивания элементов.

Разделение контента

15:53

Создание двух блоков: "about" и "projects".
Использование списков для создания одинаковых элементов.

Добавление заголовков и текста

17:51

Добавление заголовков и текста в блоки "about" и "projects".
Использование типографии для создания абзацев и выравнивания текста.

Создание портфолио

21:45

Создание отдельного элемента "портфолио" с двумя колонками.
Добавление заголовков, текста и кнопок для описания проектов.

Скрытие заголовка и добавление класса

23:41

Скрытие заголовка с помощью класса "visually hidden".
Добавление текста и значков для описания портфолио.

Создание разметки для сайта

24:41

Создание элементов с использованием списков, заголовков и кнопок.
Использование типографики для создания текста и его форматирования.
Создание цитаты с использованием специального тега.

Создание контента сайта

27:36

Создание секции с изображением и текстом.
Создание списка услуг и его элементов.
Использование классов для создания заголовков и описания.

Оформление и настройка сайта

32:33

Размещение логотипа, адреса, телефона и социальных сетей.
Создание формы подписки и ее элементов.
Подключение шрифтов и настройка стилей.
Использование плагина для определения шрифтов и их подключения.

Конвертация шрифтов

39:23

Автор конвертирует шрифты из формата .otf в формат .woff, чтобы использовать их в проекте.
Он объясняет, что это необходимо для того, чтобы шрифты были доступны для всех современных браузеров.

Использование переменных в CSS

45:15

Автор предлагает использовать переменные в CSS для упрощения работы с цветами и шрифтами.
Он показывает, как можно использовать переменные для создания более читаемого и удобного кода.

Верстка и адаптация сайта

49:09

Автор объясняет, как использовать медиа-запросы для адаптации сайта под разные размеры экрана.
Он также показывает, как использовать классы для управления стилями и контентом на сайте.

Работа с кнопками и иконками

51:08

Автор предлагает сбросить ненужные стили и размеры кнопок, чтобы улучшить их внешний вид и удобство использования.
Он также объясняет, как использовать переменные для настройки иконок и размеров кнопок.

Создание шапки

53:06

В видео автор объясняет, как создать шапку для сайта, используя HTML и CSS.
Он объясняет, как управлять цветом и размером шапки, а также как правильно расположить элементы.
Автор также обсуждает использование классов и стилей для создания шапки, а также объясняет, как правильно расположить элементы в строке.

Работа с текстом и кнопками

59:57

Автор продолжает работу над созданием шапки, обсуждая, как правильно расположить текст и кнопки.
Он также объясняет, как использовать модификаторы CSS для создания более универсального дизайна.
Автор также объясняет, как правильно настроить отступы и ширину элементов для создания красивого и корректного макета.

Завершение работы над первой секцией

1:04:52

Автор завершает работу над первой секцией шапки, обсуждая, как правильно настроить отступы и размеры элементов.
Он также объясняет, как использовать классы и стили для создания красивого и корректного макета.

Стилизация текста и блоков

1:06:46

Автор объясняет, как стилизовать текст и блоки в HTML-коде, используя свойства CSS.
Он также показывает, как использовать свойства gap и padding для создания колонок и отступов между элементами.

Работа с видео

1:12:43

Автор загружает видео с сайта и вставляет его в HTML-код.
Он объясняет, как использовать атрибуты и свойства CSS для настройки видео, включая загрузку видео при клике и скрытие кнопки плеера.

Подключение JavaScript

1:18:37

Автор подключает JavaScript-скрипт для запуска видео при клике на кнопку.
Он также объясняет, как использовать document.

Настройка CSS-классов

1:19:36

Автор добавляет CSS-классы для управления отображением видео и скрытием кнопки плеера.
Он также отключает ненужные элементы управления видео.

Создание элементов и стилей

1:20:36

Создание элементов и стилей для кнопок, колонок, заголовков и контента.
Использование классов и стилей для создания макета.

Работа с колонками и контентом

1:24:28

Размещение элементов в колонки с использованием flexbox.
Стилизация заголовков, контента и картинок.

Работа с разделами и услугами

1:29:27

Создание разделов с использованием секций и кода.
Стилизация текста и картинок в разделах.

Завершение работы и улучшение макета

1:33:22

Написание стилей для элементов внутри разделов.
Создание бургер меню и его настройка.
Улучшение макета и добавление дополнительных элементов.

Улучшение дизайна

1:36:13

Автор обсуждает улучшение дизайна сайта, включая добавление иконок, изменение текста и стилизацию элементов.
Он также обсуждает использование классов и псевдоэлементов для стилизации и настройки элементов.

Адаптивная верстка

1:45:01

Автор предлагает использовать переменную для отступа, чтобы упростить адаптивную верстку.
Он также предлагает использовать горизонтальный скролл для меню и изменить размеры элементов для разных разрешений экрана.

Финальные изменения

1:48:58

Автор вносит последние изменения в дизайн, включая изменение размеров элементов, отступов и использование медиазапросов для разных разрешений экрана.
Он также обсуждает необходимость переопределения некоторых элементов для лучшей адаптации к разным разрешениям.

Адаптивный дизайн

1:50:54

Создание меню с использованием flexbox и адаптивного дизайна.
Работа с заголовком и отступами.

Работа с контентом

1:53:47

Уменьшение размеров текста и картинок.
Использование медиазапросов для изменения стилей при определенных разрешениях.

Работа с иконками и стилями

1:57:41

Изменение цветов иконок и их стилей при наведении.
Использование CSS-переходов для плавного изменения цветов.

Заключение

2:01:36

Создание адаптивного сайта за два часа.
Советы по использованию свойств CSS и созданию адаптивного дизайна.
Призыв к подписке на канал и поддержке автора.