Этот курс посвящен созданию современного веб-сайта с использованием HTML, CSS и JavaScript. Мы пройдем путь от пустой страницы до готового сайта с анимацией, эффектами и красивым дизайном.
Необходимые технологии
Веб-сайт строится на основе трех основных технологий:
- HTML (HyperText Markup Language): Описывает структуру и содержимое страницы, определяя расположение элементов.
- CSS (Cascading Style Sheets): Добавляет стили к элементам HTML, определяя внешний вид сайта.
- JavaScript: Обеспечивает интерактивность, добавляя функции, срабатывающие при взаимодействии пользователя со страницей.
Более сложные сайты могут включать серверные языки, базы данных и облачные сервисы, но видимый пользователю дизайн формируется HTML, CSS и JavaScript. В этом курсе мы сосредоточимся на разработке дизайна с использованием HTML и CSS.
Структура веб-сайта и дизайн
Дизайн сайта состоит из двух частей: внешнего вида и функциональности.
- Внешний вид: Визуальное оформление, создается с помощью HTML и CSS.
- Функциональность: Интерактивность, создается с помощью JavaScript и его фреймворков/библиотек (React, Vue.js, Angular и др.).
Для новичков освоение JavaScript и его фреймворков может быть сложно. Рекомендуется сначала изучить HTML, CSS и JavaScript, а затем один из фреймворков, например, Vue.js. В этом курсе мы сосредоточимся на HTML и CSS, без препроцессоров или task-менеджеров.
Настройка проекта
Для работы понадобится текстовый редактор. Будет использоваться Visual Studio Code, но подойдет любой другой.
- Установка Visual Studio Code: Загрузите и установите Visual Studio Code с официального сайта.
- Создание проекта: Создайте папку (например, «3w»).
- Создание файлов: Создайте файл index.html и папку css с файлом main.css.
В index.html можно использовать сокращенные конструкции (восклицательный знак и Enter). Добавьте заголовок <title> (например, «Game website») и подключите main.css с помощью тега <link>.
Запуск проекта
Для удобства работы и автоматического обновления страницы рекомендуется использовать локальный сервер. В Visual Studio Code можно установить расширение «Live Server». После установки, правой кнопкой мыши нажмите на index.html и выберите «Open with Live Server». Страница откроется в браузере; на этом этапе она будет пуста.
Начало работы
В этом уроке мы настроили рабочую среду. В следующих уроках начнем разработку сайта.