????
Глубина вместо поверхности
Изучаю бизнес-задачу, а не просто техническое задание. Понимание контекста позволяет создавать решения, которые работают на результат.
Заголовок блока
Текст блока
???? Глубина вместо поверхности
Изучаю бизнес-задачу, а не просто техническое задание. Понимание контекста позволяет создавать решения, которые работают на результат.
01
Анализ и стратегия
Детальное описание этапа
Милош Беркович — Веб-разработчик | Сложные проекты на Tilda Процесс веб-разработки | Системный подход Милоша Берковича Технологический стек | Tilda, JavaScript, Vue.js, интеграции
:root {
/* Основные цвета */
--color-primary: #1A73E8; /* Акцентный синий (кнопки, ссылки) */
--color-primary-hover: #0B57D0; /* Акцентный синий (ховер) */
--color-primary-active: #0B3D91; /* Акцентный синий (активное состояние) */
/* Фоны */
--color-bg-primary: #FFFFFF; /* Основной фон */
--color-bg-secondary: #F8F9FA; /* Вторичный фон */
--color-bg-tertiary: #F1F3F4; /* Третичный фон */
/* Текст */
--color-text-primary: #1A1A1A; /* Основной текст */
--color-text-secondary: #5F6368; /* Вторичный текст */
--color-text-tertiary: #9AA0A6; /* Третичный текст */
/* Границы */
--color-border-light: #E8EAED; /* Светлые границы */
--color-border-medium: #DADCE0; /* Средние границы */
/* Системные цвета */
--color-success: #34A853; /* Успех */
--color-warning: #FBBC04; /* Предупреждение */
--color-error: #EA4335; /* Ошибка */
}
/* Подключение через Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
:root {
/* Шрифты */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Roboto Mono', monospace; /* Для кода */
/* Размеры шрифтов (модульная шкала 1.25) */
--text-xs: 12px; /* 0.75rem */
--text-sm: 14px; /* 0.875rem */
--text-base: 16px; /* 1rem */
--text-lg: 20px; /* 1.25rem */
--text-xl: 24px; /* 1.5rem */
--text-2xl: 30px; /* 1.875rem */
--text-3xl: 36px; /* 2.25rem */
--text-4xl: 48px; /* 3rem */
/* Межстрочные интервалы */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;
}
.btn-primary {
background: var(--color-primary);
color: white;
padding: 12px 32px;
border-radius: 8px;
font-weight: 500;
font-size: var(--text-base);
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary:hover {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(26, 115, 232, 0.2);
}
.btn-secondary {
background: transparent;
color: var(--color-primary);
border: 1.5px solid var(--color-primary);
padding: 10px 24px;
border-radius: 8px;
font-weight: 500;
font-size: var(--text-base);
cursor: pointer;
transition: all 0.2s ease;
}
.btn-secondary:hover {
background: rgba(26, 115, 232, 0.04);
border-color: var(--color-primary-hover);
color: var(--color-primary-hover);
}
/* Десктоп (≥1024px) - стили по умолчанию */
/* Планшет (768px - 1023px) */
@media (max-width: 1023px) {
.container {
padding: 0 32px;
}
.grid-3 {
grid-template-columns: repeat(2, 1fr);
}
}
/* Мобильный (≤767px) */
@media (max-width: 767px) {
.container {
padding: 0 20px;
}
.grid-3,
.grid-2 {
grid-template-columns: 1fr;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 30px;
}
}
.responsive-img {
max-width: 100%;
height: auto;
display: block;
}
/* Фоновые изображения с разными размерами */
.hero-bg {
background-image: url('image-large.jpg');
}
@media (max-width: 768px) {
.hero-bg {
background-image: url('image-medium.jpg');
}
}
@media (max-width: 480px) {
.hero-bg {
background-image: url('image-small.jpg');
}
}
:root {
--primary-color: #1A73E8;
--spacing-unit: 8px;
--border-radius: 8px;
}
/* Использование переменных */
.button {
background: var(--primary-color);
padding: calc(var(--spacing-unit) * 2);
border-radius: var(--border-radius);
}
/* Мобильные (портрет) */
@media (max-width: 479px) { /* Стили для очень маленьких экранов */ }
/* Мобильные (альбом) и маленькие планшеты */
@media (min-width: 480px) and (max-width: 767px) { /* Стили */ }
/* Планшеты */
@media (min-width: 768px) and (max-width: 1023px) { /* Стили */ }
/* Десктоп (маленький) */
@media (min-width: 1024px) and (max-width: 1279px) { /* Стили */ }
/* Десктоп (большой) */
@media (min-width: 1280px) { /* Стили */ }
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({
top: target.offsetTop - 80,
behavior: 'smooth'
});
}
});
});
// Мобильное меню
const burger = document.querySelector('.burger');
const mobileMenu = document.querySelector('.mobile-menu');
burger.addEventListener('click', () => {
burger.classList.toggle('active');
mobileMenu.classList.toggle('active');
document.body.classList.toggle('no-scroll');
});
// Создание платежа
fetch('https://api.yookassa.ru/v3/payments', {
method: 'POST',
headers: {
'Authorization': 'Basic ' + btoa('{shopId}:{secretKey}'),
'Idempotence-Key': uuidv4(),
'Content-Type': 'application/json'
},
body: JSON.stringify({
amount: {value: "1000.00", currency: "RUB"},
capture: true,
confirmation: {type: "redirect", return_url: "https://site.com/thanks"},
description: "Оплата услуги"
})
});
// Пример теста для формы
const form = document.querySelector('#contact-form');
const testData = {
name: 'Тестовое Имя',
email: 'test@example.com',
message: 'Тестовое сообщение длиной более 50 символов для проверки валидации минимальной длины текста.'
};
// Заполнение формы
Object.keys(testData).forEach(key => {
const input = form.querySelector(`[name="${key}"]`);
if (input) input.value = testData[key];
});
// Отправка формы
form.submit();
