Ты открыл DevTools, написал <h1>Привет мир</h1>, и почувствовал себя хакером из фильма. Знакомо? А потом посмотрел на результат — и он больше похож на страничку из эпохи ICQ, чем на современный лендинг.
1. Times New Roman — шрифт боли
Ничто не кричит «я собрал это на уроке информатики» громче, чем дефолтный шрифт браузера. Times New Roman на веб-странице — это как надеть костюм на пляж. Технически можно, но зачем?
Что делать?
Подключи Google Fonts. Inter, Manrope, JetBrains Mono для кода — буквально одна строчка в <head>, и сайт уже выглядит на 40% профессиональнее. Серьёзно, шрифт решает.
2. Всё по центру, но ничего не на месте
Классический приём новичка: text-align: center на всё подряд. Заголовок по центру. Текст по центру. Футер по центру. Картинка... тоже по центру. В итоге страница выглядит как поздравительная открытка из PowerPoint.
Что делать?
Научись работать с flexbox и grid. Это два инструмента, которые превратят хаос в структуру. И да — выравнивание по левому краю для текста — это не скучно, это читаемо.
3. Отступы? Не слышал
Элементы прижаты друг к другу, как пассажиры в метро в час пик. Между заголовком и текстом — 0 пикселей. Между кнопкой и краем экрана — тоже 0. Глаза пользователя буквально не знают, куда смотреть.
Что делать?
Запомни: padding — воздух внутри элемента, margin — пространство снаружи. Начни с padding: 16px 24px для контейнеров и gap для flex/grid-раскладок. Белое пространство — твой лучший друг в дизайне.
4. Цвета из палитры MS Paint
Ярко-синий фон, красный текст, зелёная кнопка, жёлтая рамка. Поздравляю, ты создал сайт, от которого болят глаза. Когда каждый элемент «кричит», ни один не привлекает внимание.
Что делать?
Используй готовые палитры — зайди на coolors.co или открой цвета из любого UI-кита. Правило трёх: один основной цвет, один акцентный, остальное — нейтральные оттенки серого и белого.
5. Адаптивность? Это что?
Ты проверил сайт в браузере на мониторе 1920×1080 — всё идеально. А потом кто-то открыл его на iPhone, и кнопка уехала за пределы экрана, а текст стал таким мелким, что читать его можно только с лупой.
Что делать?
Добавь <meta name="viewport"> — без этого мобильные браузеры даже не пытаются адаптировать страницу. Дальше — медиа-запросы (@media) и относительные единицы: rem, %, vw.
6. Фоновые картинки из 2005 года
Звёзды, мрамор, градиенты из трёх цветов, повторяющийся паттерн из маленьких иконок. Если фон сайта отвлекает от содержимого — что-то пошло не так.
Что делать?
Минимализм. Белый или очень светлый фон для контента — это база. Если хочешь визуальный акцент — используй subtle-градиенты или один Hero-блок с качественным изображением.
7. Одна страница, 47 технологий
jQuery, Bootstrap, Animate.css, три шрифта, Font Awesome, какой-то слайдер из 2013 года — и всё это ради лендинга с двумя абзацами текста. Страница грузится 12 секунд, а пользователь уже ушёл.
Что делать?
Для первых проектов — чистый HTML + CSS. Без фреймворков, без библиотек. Научись делать красиво на ванильных технологиях, а потом уже подключай инструменты осознанно, а не потому что «так в туториале было».
8. Кнопки, которые не похожи на кнопки
Текстовая ссылка синего цвета с подчёркиванием — это не CTA-кнопка. И наоборот: огромный яркий блок без hover-эффекта заставляет пользователя гадать — «это вообще кликабельно?»
Что делать?
У кнопки должен быть padding, border-radius, заметный контраст с фоном и обязательно — hover/active состояния. Добавь cursor: pointer и transition — мелочь, а сразу чувствуется, что сайт живой.
Окей, а как всё это выучить нормально? 🤔
Вот в чём штука: прочитать статью — не значит научиться. Можно посмотреть сотню туториалов на YouTube и всё равно не уметь собрать нормальный лендинг. Потому что навык формируется только через практику.
Именно для этого существует Кодик — приложение, где ты изучаешь программирование через реальные задачи. Не просто читаешь теорию, а сразу пишешь код, получаешь обратную связь и закрепляешь знания. HTML, CSS, JavaScript, Python — всё структурировано от простого к сложному.
А если хочешь держать руку на пульсе — заходи в наше сообщество в Телеграм. Там регулярно выходят полезные посты: разборы технологий, мини-задачи, советы по развитию в IT. Больше 2,2 К разработчиков уже подписаны — отличный способ повторять программирование прямо в удобном месте, между делами.
Итого 🏁
Твой первый сайт выглядит как 2007 год — и это абсолютно нормально. Все через это проходили. Разница между новичком и профессионалом не в таланте, а в количестве написанного и переписанного кода.
Начни с малого: поправь шрифт, добавь отступы, выбери нормальные цвета. А потом открой свой сайт через месяц и удивись, как далеко ты продвинулся.
Даже у Google когда-то был ужасный дизайн. Но они продолжили — и ты тоже сможешь. 🚀