Создание сайта с нуля · чистый HTML/CSS/JS · 2026

Строительной компании в Приморье сделали сайт с нуля — его можно показывать на тендерах и в переписке

У компании не было сайта: о ней знали только по сарафану. Собрали сайт-представительство с нуля — строгая тёмная подача «строг, тёмен, инженер», 19 смысловых секций и вся информация о компании на одной странице. Готовый сайт можно показывать на тендерах, вставлять в переписку и указывать в карточке предприятия.

Обсудить похожий проект →

Дизайн Вёрстка Чистый HTML/CSS JavaScript Сайт с нуля Один файл данных
Сайт: 99999999.ru Клиент: ООО «АВАНГАРД» Ниша: строительно-монтажные и отделочные работы, Приморский край CMS: нет — статичный HTML Период: 2026
Первый экран сайта на большом экране
Первый экран сайта — так его видит посетитель (большой экран)
1
страница-представительство вместо сайта, которого не было
услуги, преимущества, проекты и контакты вместе
без CMS
Сайт собран с нуля, лишних зависимостей нет
меньше того, что может сломаться
1 файл данных
Контент меняется без правки кода
правки дешёвые и быстрые
154 мс
Отклик сервера — страница отвечает быстро
остальные замеры — в таблице «Стало»

Что вы получите

Готовый сайт-представительство

Можно показать на тендере, вставить в переписку, указать в карточке предприятия.

Всё о компании в одном месте

Услуги, преимущества, проекты и контакты — на одной странице, без лишних переходов.

Дешёвые и быстрые правки

Контент меняется в одном файле данных, без переписывания кода — правки не превращаются в проект.

Задача

Строительная компания из Приморья работала без сайта: о ней было известно только по сарафану. Нужно было не дорабатывать старое, а сделать сайт с нуля — презентабельный и проверяемый, как карточка предприятия, а не шаблонная визитка.

Чего хотел заказчик

Что сделано

Сайт собран с нуля и поэтапно прошёл четыре работы: дизайн, вёрстку, код и скорость.

1.1 · Дизайн
Выполнено

Тёмная инженерная стилистика с золотыми акцентами

Замысел

Клиент — строительная компания: сайт должен быть сдержанным и «тяжёлым» по духу, как типовый проект, а не ярким как промо-игрушка. Палитра — тёмная, тёплая, с золотыми кнопками и надписью «Строительная компания» мелким золотым капслоком сверху.

Результат

Шапка «АВАНГАРД» с меню из 5 пунктов (О компании, Услуги, Преимущества, Проекты, Контакты). Большой белый serif-заголовок: «Строим будущее с инженерной точностью и уважением к срокам.». Hero — кран на фоне закатного неба в тёплых тонах. Под заголовком — краткое описание ООО и две кнопки: золотая «Связаться с нами» и вторичная «Карточка предприятия».

1.2 · Вёрстка
Выполнено

19 смысловых секций и 17 изображений

Задача

Нужно рассказать о компании, услугах, преимуществах и проектах так, чтобы страницу можно было пролистать сверху донизу без «пустых» участков.

Результат

Главная — 19 секций и 17 картинок, в том числе портфолио проектов: подряд идущие секции, каждая — свой объект. Секции продуманы так, что сайт читается по частям и не «разваливается» при прокрутке. Тексты размечены вёрсткой, а не зашиты в графику — поисковики и скринболиты видят смысл, а не картинку.

1.3 · Код
Выполнено

Чистый HTML + CSS + JS, три файла

Замысел

Без конструкторов, фреймворков и лишних зависимостей: только то, что нужно для этой страницы.

Результат

Структура: HTML-страница + main.css (стили) + два JS-файла — main.js (поведение) и site-data.js (файл данных). Смысл приёма с site-data.js: содержимое сайта можно обновлять, правя только файл данных — сама разметка не трогается. Это видно по загрузкам (file site-data.js реально отдаётся браузеру) и по работе страницы: данные подтягиваются. Итог — «передовая свежая сборка»: минимум кода, вся логика предсказуема, 289 узлов DOM (дерево элементов на странице).

1.4 · Скорость
Выполнено с оговоркой

Код быстрый — тянет тяжёлая графика

Проверка

Замер 09.10.2026 (Playwright, Chromium, desktop 1440): TTFB 154 мс, построение каркаса (DOMContentLoaded) 2,01 с, полная загрузка 3,31 с, 25 запросов. Для страниц на чистом HTML это хорошие цифры.

Оговорка

Общий вес загрузки — около 9,7 МБ, и это почти целиком графика: PNG — 7,4 МБ (одна большая картинка весит сама по себе 7,4 МБ), JPG — 1,4 МБ, WebP — 198 КБ. Код не медленный — медленный формат картинок. Это главная уязвимость сайта и самая «тяжёлая» загрузка в серии созданных сайтов; честно помечено в таблице замеров и не скрывается.

Этапы и сроки

  1. Разбор и структура — 1–2 дня: какие блоки нужны компании и в каком порядке.
  2. Дизайн и вёрстка — тёмная инженерная подача и 19 смысловых секций от услуг до контактов.
  3. Код и наполнение — чистый HTML/CSS/JS и один файл данных для правок без переписывания кода.
  4. Проверка и сдача — замеряю скорость и структуру, отдаю исходники; сжатие графики — точка роста.

Сроки беру из реального проекта; по вашему сайту назову после бесплатного разбора.

Стало — результат

Что получил клиент: готовый сайт-представительство, который не стыдно показать на тендере, со всей информацией на одной странице и правками без переписывания кода. Ниже — контрольный замер готового сайта от 09.10.2026: не обещания, а цифры из живой загрузки страницы.

ПоказательЗамер (09.10.2026)
Ответ сервера (TTFB)154 мс
DOMContentLoaded (каркас страницы)2,01 с
Полная загрузка (Load)3,31 с
Запросов до полной загрузки25
Вес полной загрузки~9,7 МБ (PNG 7,4 МБ, JPG 1,4 МБ, WebP 198 КБ)
Узлов DOM289
Секций на главной19
Тегов <img>17
Meta descriptionзадан
og:image (превью для соцсетей)не задан
langru
Политика конфиденциальностидоступна по ссылке с главной (politika-konfidentsialnosti/privacy-policy.html)

Честная пометка: сайт весит ~9,7 МБ — почти всё в крупных PNG. Это самая «тяжёлая» загрузка среди созданных с нуля сайтов в этой серии; код при этом лёгкий и быстрый. Точки роста, подтверждённые замером: сжать графику (PNG → WebP/AVIF) и добавить og:image — больше в замере отметить нечего.

Строгая тёмная подача с золотой кнопкой «Связаться с нами»
Верх главной страницы сайта: шапка АВАНГАРД, заголовок и кран на фоне закатного неба
Мобильная версия: меню и кнопки под экран телефона
Верх страницы сайта строительной компании на мобильном экране

Полная прокрутка главной (desktop, высота 5312 px) — ниже, в «Пруфах»: 19 секций видны подряд.

Пруфы

Все скриншоты — живые, снятые с готового сайта 09.10.2026. Кликните, чтобы открыть в полном размере.

Сколько стоит

Разбор и план

Бесплатно: смотрю задачу и структуру, показываю, что нужно компании, и даю план и срок.

Сайт под ключ

Дизайн, вёрстка, код и наполнение — стоимость считаю после разбора: она зависит от объёма и числа секций. Точную вилку называю до начала, без сюрпризов в процессе.

Цены не публикую: они зависят от задачи. Оставьте заявку — пришлю вилку под ваш случай в тот же день.

Частые вопросы

Сколько это стоит и сколько занимает?
Зависит от объёма. Точную вилку и срок называю после бесплатного разбора.

Сайт будет на конструкторе или на своём коде?
На своём коде: без конструктора и лишних зависимостей. Так сайт быстрее и не ломается от чужих обновлений.

Кто сможет менять сайт после сдачи?
Вы или ваш помощник: контент лежит в одном файле данных, для правки текста разработчик не нужен.

Нужен ли хостинг и домен?
Да, сайту нужны домен и место на сервере. Помогу подобрать и подключить.

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

Нужен сайт с нуля — без конструкторов и лишнего веса кода?

Соберу лендинг или корпоративный сайт на чистом HTML/CSS/JS: дизайн под нишу, честные замеры скорости и структура, которую видно на скриншотах — как в этом кейсе.

Сайт: https://99999999.ru

Обсудить проект →