Введение в Frontend: с чего начать создание своего первого сайта?

Как насчёт того, чтобы освоить основы веб-разработки и создать собственный сайт? В статье разобрали, с чего начать, и предоставили пошаговое руководство по основам HTML, CSS и JavaScript.

Время чтения: 3 минуты

Шаг 1: Основы HTML — Структурирование сайта

Хочешь кодить как босс?

Заполняй форму и начни свой путь в IT прямо сейчас!

HTML (HyperText Markup Language) — это язык разметки, который используется для создания структуры веб-страниц. HTML описывает содержимое и структуру сайта с помощью различных тегов и элементов.

Пройди курс по frontend-разработке с гарантией трудоустройства и поддержкой личного ментора. Основную оплату можно внести после выхода на работу. Зарплата сразу после курса от 100 000 рублей по гарантии!

Стартануть в IT

1.1 Создание файла HTML

Для начала понадобится текстовый редактор. Это может быть любой редактор, который тебе удобен, например, Notepad++, Visual Studio Code или Sublime Text. Создай новый файл и сохраните его как index.html.

1.2 Основная структура HTML

Вот пример базовой структуры HTML-документа:

<!DOCTYPE html>: обозначает начало HTML-документа.
<html>: корневой элемент HTML-документа.
<head>: содержит метаданные, такие как название страницы и подключенные стили.
<body>: основное содержимое страницы, включая заголовок, меню, основное содержимое и подвал.

Кстати, спрос на frontend-разработчиков в последнее время всё увеличивается, как и их зарплата. В перерыве между изучением кода предлагаем посмотреть интервью нашего выпускника, который изменил свою жизни и стал frontend-разработчиком после работы в доставке.

Шаг 2: Основы CSS — Оформление сайта

CSS используется для стилизации элементов HTML. С помощью CSS ты можешь изменить внешний вид сайта, включая цвета, шрифты, отступы и расположение элементов.

2.1 Создание файла CSS

Создай новый файл в текстовом редакторе и сохрани его как styles.css.

2.2 Основные стили CSS

Пример базового CSS-кода:

body: определяет основные стили для всего документа.
header: стили для шапки сайта.
nav: стили для навигационного меню.
main: основное содержимое страницы.
footer: стили для подвала сайта. Там обычно находится контактная информация, ссылки на социальные сети и прочее.

Шаг 3: Основы JavaScript — Добавление интерактивности

JavaScript — это язык программирования, который позволяет добавлять интерактивные элементы на сайт, такие как кнопки, формы и динамическое изменение контента.

3.1 Создание файла JavaScript

Создай новый файл и сохрани его как script.js.

3.2 Основной JavaScript код

Пример базового JavaScript кода:

Шаг 4: Проверка и отладка

После того как ты написал код, открой файл index.html в браузере, чтобы увидеть результаты. Нажми F12 (в большинстве браузеров) для открытия и проверки того, как сайт выглядит и работает.

Шаг 5: Размещение сайта в интернете

Когда сайт готов, ты можешь разместить его в интернете. Для этого можно использовать бесплатные хостинг-платформы, такие как GitHub Pages, Netlify или Vercel. Вот как можно разместить сайт на GitHub Pages:

Создай репозиторий на GitHub.
Загрузи файлы в репозиторий.
Перейди в настройки репозитория и включи GitHub Pages.

Заключение

Создание своего первого сайта — это мощный шаг на пути Frontend-разработки. С помощью наших рекомендаций ты легко сможешь создать простую веб-страницу. А для более подробного изучения ждём тебя на обучении в Kata.
К слову, средняя зарплата наших выпускников через год — 209 000 рублей. Так что решать тебе!