Как создать мини-сайт с нуля на HTML и CSS

Создание мини-сайта — отличный способ понять основы веб-разработки. В этом мануале мы создадим минималистичный сайт компании по ремонту телефонов, используя только HTML и CSS. Он будет выглядеть профессионально, иметь шапку, основные блоки, футер и адаптивность для мобильных устройств.

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

Оглавление:

Создаем файлы

Создадим базовую HTML-разметку:

Стили style.css
Как запустить сайт без сервера
Финалочка

Создаем файлы

Создадим проект и внутри него файлы, для этого на компьютере создайте папку с названием mini-site и создайте в ней также файлы как на схеме ниже:

mini-site/
  ├── index.html
  ├── style.css
  ├── images/

Создадим базовую HTML-разметку:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ремонт телефонов</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Ремонт телефонов</h1>
            <nav>
                <ul>
                    <li><a href="#about">О нас</a></li>
                    <li><a href="#services">Услуги</a></li>
                    <li><a href="#contact">Контакты</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <section id="about" class="about">
        <div class="container">
            <h2>О нас</h2>
            <p>Мы профессионально ремонтируем телефоны любых брендов. Гарантия на все работы!</p>
        </div>
    </section>

    <section id="services" class="services">
        <div class="container">
            <h2>Наши услуги</h2>
            <ul>
                <li>Замена экрана</li>
                <li>Ремонт аккумулятора</li>
                <li>Ремонт разъемов</li>
                <li>Прошивка и восстановление ПО</li>
            </ul>
        </div>
    </section>

    <section id="contact" class="contact">
        <div class="container">
            <h2>Контакты</h2>
            <p>Email: [email protected]</p>
            <p>Телефон: +7 900 123-45-67</p>
        </div>
    </section>

    <footer>
        <div class="container">
            <p>&copy; 2024 Ремонт телефонов. Все права защищены.</p>
        </div>
    </footer>
</body>
</html>

Стили `style.css`

Теперь создадим style.css, чтобы сайт выглядел аккуратно и современно.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #f8f9fa;
    color: #333;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

header {
    background: #007bff;
    color: white;
    padding: 15px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

nav ul li {
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

section {
    padding: 50px 0;
    text-align: center;
}

.services ul {
    list-style: none;
    padding: 0;
}

.services li {
    background: #007bff;
    color: white;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

footer {
    background: #222;
    color: white;
    text-align: center;
    padding: 15px 0;
}

@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
    }
    nav ul li {
        margin: 10px 0;
    }
}

Как запустить сайт без сервера

Открыть папку проекта.
Дважды кликнуть index.html.
Сайт откроется в браузере.

Финалочка

Поздравляю, ты создал мини-сайт компании по ремонту телефонов! 🎉

Что мы сделали?

✔ Создали структуру HTML

✔ Добавили стили CSS

✔ Сделали сайт адаптивным

✔ Запустили сайт без хостинга

Этот проект можно доработать, добавив кнопки, изображения, анимации и форму обратной связи. Теперь ты знаешь, что создать мини сайт самому — это просто!

Создаем файлы

Создадим базовую HTML-разметку:

Стили style.css

Как запустить сайт без сервера

Финалочка

Стили `style.css`