Приветствую тебя, читатель. Я являюсь студентом педагогического колледжа на факультете информационных технологий в образовании. И вот, закончив второй курс, я решил написать свой pet-project: форум для программистов. В этой серии статей буду документировать свой прогресс. Что ж, начинаем!
Что будет использовано?
Определимся со стеком технологий. Для своего проекта я выбрал следующее:
- Bootstrap 5 для быстрой и адаптивной разработки интерфейса;
- PHP & MySQLI для разработки серверной части;
- PHPMYADMIN для работы с базой данных.
Для удобства разработки я буду пользоваться следующими программами:
- OpenServer 5.3.5 для поднятия локального сервера со следующими модулями:
- VS code и плагин Live server;
- Figma для работы с графикой.
Работа с цветами и типографикой
Ни для кого не секрет, что цвета, используемые в интерфейсе, оказывают значительное влияние на восприятие продукта пользователем. Для упрощения подбора цветовой палитры воспользуемся сервисом coolors.co. Спустя 10 минут был найден подходящий вариант
Эти цвета прекрасно подойдут для создания темной темы.
Теперь разберёмся со шрифтами. В этом мне поможет fontjoy.com. Благодаря ему, можно найти сочетания шрифтов, которые поддерживают, как кириллицу, так и латиницу, а что самое главное, все их можно найти на Google fonts. Я остановился на этом сочетании
Структура сайта
Перед началом разработки стоит продумать и структуру нашего сайта. Для прототипа нам будет достаточно следующего:
- Главная;
- Страницы регистрации и авторизации;
- Вывод статей по категориям;
- Страница для создания постов;
Разработка меню
Итак, открываем официальную документацию bootstrap и начинаем верстку.
Создадим index.html и подключим к нему наш фреймворк
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>
Добавим main.css, подключим шрифты с Google fonts и добавляем его в наш index.
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Jacques+Francois&family=Podkova:wght@400..800&display=swap');
Проверим подключение. Для этого зададим background нашему сайту
Все прекрасно работает. Снова заглянем в документацию и возьмем шаблон меню для нашего сайта
Выглядит это, мягко говоря, ужасно. Уберем фон, отредактируем содержимое. Для этого удалим у нашего тега nav класс bg и заменим его на navbar-dark
Стало явно лучше. Осталось проработать форму, которая находится в правой части экрана. Начнем с поля поиска. Обернем содержимое нашей формы в блок с классом input-group.
<div class="input-group">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</div>
Для того, чтобы убрать расстояние между полем и кнопкой удалим класс me-2 и заменим класс btn-outline-success на btn-light
Неплохо было бы заменить надпись на кнопке на иконку. Открываем сервис Bootstrap icons и находим необходимую иконку. Скачиваем её и закидываем в наш проект
Симпатично. Теперь добавим кнопки для перехода на страницы авторизации и регистрации
<form class="d-flex my-2" role="search">
<a href="#" class="btn btn-success">Зарегистрироваться</a>
<a href="#" class="btn btn-outline-success mx-2">Войти</a>
</form>
Поработаем над стилем наших кнопок. Bootstrap использует препроцессор SCSS/SAAS, поэтому создаем в css файле пользовательские классы и меняем значение необходимых переменных
.btn-emerald{
--bs-btn-font-weight: 500 !important;
--bs-btn-color: #EAF6FF !important;
--bs-btn-bg: #049A8F !important;
--bs-btn-border-color: #049A8F !important;
--bs-btn-hover-color: #EAF6FF !important;
--bs-btn-hover-bg: #037d75 !important;
--bs-btn-hover-border-color: #049A8F !important;
--bs-btn-active-color: #EAF6FF !important;
--bs-btn-active-bg: #01615a !important;
--bs-btn-active-border-color: #01615a !important;
}
.btn-outline-emerald{
--bs-btn-font-weight: 500 !important;
--bs-btn-color: #049A8F !important;
--bs-btn-border-color: #049A8F !important;
--bs-btn-hover-color: #EAF6FF !important;
--bs-btn-hover-bg: #049A8F !important;
--bs-btn-hover-border-color: #049A8F !important;
--bs-btn-active-color: #EAF6FF !important;
--bs-btn-active-bg: #01615a !important;
--bs-btn-active-border-color: #01615a !important;
}
Осталось только подключить шрифты и меню готово
Разработка страниц регистрации и авторизации
Создадим файлы signin.html и login.html, подключим к ним всё необходимое.
Поместим наш контент по центру экрана. Для этого создадим небольшую структуру
<main class="min-vh-100 d-flex flex-column justify-content-center">
<div class="d-flex justify-content-center">
<h3 class="h3 text-center">Вход</h3>
</div>
</main>
Далее все по документации, ничего интересного
Заключение
Начало положено, в следующих статьях мы проработаем имеющиеся страницы, создадим страницу создания/вывода статей, реализуем их отправку на сервер и вывод с него.
Благодарю за уделенное время, попрошу оценить статью, оставить обратную связь в комментариях. Также можете прочесть остальные статьи в канале. Спасибо за подписку, удачи)