День 0: Подготовка и фрейминг. Антон начал не с поиска курса, а с четкого определения результата: «К 31 дню у меня должен быть опубликованный в сети одностраничный сайт (лендинг) для фотографа. На сайте: галерея работ, форма обратной связи, контакты, адаптивный дизайн, работающий на смартфонах». Такой конкретный фрейм сразу отсек всё лишнее. Он выделил по 3 часа вечером в будни и 6 часов в выходные, всего около 100 часов чистого времени.
Неделя 1: Погружение в HTML и CSS. Выбор пал на бесплатные, но структурированные ресурсы: интерактивные курсы на freeCodeCamp и документацию MDN Web Docs. Первая ошибка: попытка «прочитать» всё подряд. К концу второго дня в голове была каша из тегов. Осознание пришло быстро: нужно учиться на практике. Антон сразу начал параллельно с теорией верстать макет в редакторе кода (VS Code). Каждый новый тег (, , ) и свойство CSS (margin, padding, flexbox) он применял сразу же, меняя параметры и наблюдая за результатом в реальном времени. Итог недели: статичная, некрасивая, но структурно верная страница с текстом и изображениями.
Неделя 2: Магия CSS и первые кризисы. Фокус сместился на оформление: шрифты, цвета, позиционирование, Grid и Flexbox для сеток. Здесь случился первый кризис мотивации. Казалось, что деталей бесконечно много, а сайт выглядел убого. Помогло правило «украсть как художник». Антон нашел простой понравившийся лендинг на Awwwards и начал вручную, строчка за строчкой, пытаться воспроизвести его фрагменты (шапку, карточку услуги). Это дало понимание, как теория применяется в реальности. К концу недели сайт обрел визуальную целостность, но был «мертвым» — без интерактива.
Неделя 3: JavaScript для жизни сайта. Самая сложная часть. Цель была минималистичной: сделать плавную прокрутку по меню, «оживить» кнопку формы и создать простое раскрывающееся меню для мобильной версии. Антон не стал углубляться в фундаментальный JS, а пошел по пути изучения ровно тех концепций, которые нужны для задач: DOM-модель, обработчики событий (click, scroll), функции. Он активно использовал форумы (Stack Overflow) и ChatGPT не для копирования кода, а для объяснения непонятных моментов в уже написанных им строчках. Ключевой инсайт: «Не нужно понимать ВЕСЬ язык, чтобы заставить работать три скрипта». К 22-му дню сайт реагировал на действия пользователя.
Неделя 4: Адаптивность, публикация и подведение итогов. Финальный спринт был посвящен тому, чтобы сайт хорошо смотрелся на всех устройствах (медиазапросы в CSS) и вышел в мир. Антон купил дешевый домен и хостинг, загрузил файлы через FTP-клиент. Момент, когда сайт открылся с мобильного телефона, стал моментом истины. Затем последовала неделя «технической поддержки»: правка багов, добавление мета-тегов для SEO, подключение Google Analytics.
Что получилось в итоге? Через 30 дней лендинг фотографа был онлайн. Он был далек от идеала: где-то «плыла» верстка на определенных разрешениях, код JavaScript был неоптимальным, а некоторые современные технологии (например, CSS Grid) использовались коряво. Но он РАБОТАЛ и выполнял свою функцию.
Главные выводы из кейса:
- Цель-проект — лучший мотиватор. Обучение ради обучения провалилось бы на второй неделе.
- Практика должна опережать теорию. Изучать нужно ровно то, что требуется для следующего шага в проекте.
- Кризисы неизбежны. Помогает смена деятельности (с просмотра видео на воркшоп), обращение к сообществу и напоминание о конечной цели.
- Качество кода вторично в первом проекте. Первична — работающий результат. Оптимизацию и чистоту кода можно наверстать позже.
- 30 дней — это срок для создания МИНИМАЛЬНО ЖИЗНЕСПОСОБНОГО ПРОДУКТА (MVP), а не для освоения профессии. Антон не стал разработчиком. Он стал человеком, который понимает логику создания веб-страницы и может диалогировать с профессионалами.
Комментарии (8)