Открой пустую папку, создай в ней файл с именем index.html, напиши внутри слово «Привет» и перетащи файл в браузер. Всё. Ты только что сделал сайт. На это ушло три минуты, ноль рублей и ноль курсов. Среда веб-разработчика — это бесплатный редактор кода и браузер, который у тебя уже стоит; ставится за пятнадцать минут. Порядок азов жёсткий: сначала HTML — каркас страницы, потом CSS — её внешний вид, потом JavaScript — поведение. И только потом всё остальное.
Но главный враг новичка — не сложность HTML. Сложность как раз смешная. Враг — пассивное смотрение видеокурсов вместо написания кода. Можно посмотреть сорок часов уроков по вёрстке и не сверстать ни одной страницы. Именно на этом тонет большинство.
Дальше — по порядку. Сначала как за пятнадцать минут собрать рабочую среду. Потом почему три кита веба учат именно в таком порядке и ни в каком другом. Потом про ловушку, в которой застревают месяцами. И сетка: что у тебя будет сегодня вечером, через неделю и через месяц.
Барьер входа в веб-разработку физически почти нулевой. Не нужен сервер, мощный компьютер, платная подписка. Нужны две вещи, и одна из них у тебя уже есть.
Первая — браузер. Он умеет открывать файлы с твоего диска и показывать их как страницы. Вторая — редактор кода. Бесплатный, де-факто стандарт у фронтендеров — VS Code. Скачал, установил, открыл папку. Файл с расширением .html, лежащий на твоём столе и открытый в браузере, — это уже сайт. Просто пока он живёт у тебя, а не в интернете.
Дальше делаешь так. Создаёшь папку, внутри файл index.html. Пишешь в нём несколько строк разметки, сохраняешь, открываешь в браузере. Меняешь строку, сохраняешь, обновляешь вкладку — страница изменилась. Этот цикл «написал — сохранил — обновил — увидел» и есть вся работа фронтендера в миниатюре. Освоил его за первый вечер — считай, профессия началась.
И вот тут ловушка. Старт настолько лёгкий, что его лёгкость путают с лёгкостью всего пути. Создать первую страницу — минуты. Дойти до уровня, за который платят, — шесть-двенадцать месяцев ежедневной работы по два-три часа. Вход бесплатный и мгновенный. Дистанция — длинная. Кто путает одно с другим, бросает на третьем месяце с обидой: обещали же легко.
Веб-страница — это дом. И строят её в том же порядке, что настоящий: сначала каркас, потом отделка, потом проводка. Перепутаешь — получишь проводку, висящую в воздухе.
HTML — это каркас. Одна-две недели. Не язык программирования, а разметка: из чего страница состоит. Заголовок, абзац, картинка, ссылка, список, кнопка. Каждый кусок обёрнут в тег, который говорит браузеру, что это. Учить теги списком из учебника бессмысленно и скучно. Учи их по нужде: понадобилась картинка — узнал тег картинки. Понадобилась ссылка — узнал ссылку. Через неделю ты собираешь скелет любой простой страницы, не подглядывая.
CSS — отделка. Две-три недели. Как этот скелет выглядит: цвета, шрифты, размеры, отступы, расположение блоков на экране. Спотыкаются здесь почти все, и ровно в двух местах. Блочная модель: почему элемент занимает на экране именно столько места и откуда берутся отступы, которые ты не задавал. И расположение блоков, чтобы страница не разваливалась на телефоне, — за это отвечает Flexbox. CSS кажется самой скучной частью, поэтому его проскакивают галопом. А потом всю карьеру верстают криво и не понимают почему. Потому что фундамента отделки нет.
JavaScript — поведение, и вот это уже настоящее программирование. На него уходит больше всего времени. Здесь страница оживает: реагирует на клик, прячет и показывает блоки, грузит данные без перезагрузки. Появляются переменные, условия, функции — то, чего в HTML и CSS не было вовсе.
Соблазн начать с JavaScript велик, ведь это «настоящий код», а не «какая-то разметка». Ещё больше соблазн прыгнуть сразу во фреймворк вроде React — его называют в каждой вакансии. Не делай ни того ни другого. Оживлять нечего, если нет каркаса и отделки. Фреймворки — это вообще не сейчас, это надстройка над JavaScript, до которой надо дорасти. Начинать веб с React — то же самое, что учиться водить, начав с управления самолётом.
Лена, двадцать четыре года, помощник бухгалтера из Воронежа. Три месяца учит вёрстку. Смотрит видеокурсы в метро по дороге на работу и дома перед сном. Сорок часов просмотра, конспект на шестьдесят страниц. Знает, что такое Flexbox. В теории.
Редактор кода она не открывала ни разу. «Сначала доучу основы, потом сяду писать». Каждый новый урок отодвигает этот момент: основ ведь всегда не хватает, можно посмотреть ещё один блок.
Это не лень. Лена усердна — сорок часов и шестьдесят страниц конспекта на дороге не валяются. Это туториал-ад: иллюзия прогресса, которая на ощупь неотличима от прогресса. Механизм такой. Смотришь, как человек на экране пишет код и всё работает, — мозг выдаёт дофамин понимания: «о, я понял, как это делается». Приятно. И обманчиво. «Понял, как делается» и «умею делать» — два разных навыка, и второй не вырастает из первого. Он вырастает только из пальцев, бьющих по клавишам.
В вебе знание живёт не в голове. Оно живёт в руках. Можно идеально пересказать, как работает функция, и зависнуть на пустом экране, когда нужно эту функцию написать самому. Просмотр даёт ощущение, что ты учишься. Создание — учит.
Перелом наступает в одном правиле: посмотрел блок урока — закрой плеер — повтори руками по памяти. Не идеально. Подглядывай, только когда застрял намертво. Получится криво, с ошибками, не так, как у автора. Отлично. Кривой код, написанный тобой, бьёт идеальный код, переписанный из урока, — потому что первый чему-то научил, а второй просто перепечатан.
«Но я же ещё не всё знаю, как я буду писать?» — главное возражение каждого новичка. В том и дело. Ты учишься писать, гугля по дороге, а не дочитав все инструкции до конца. Никто не знает всё. Senior с десятью годами опыта гуглит синтаксис по несколько раз в день и не считает это позором. Ожидание момента «когда буду готов» — это и есть туториал-ад. Готов ты ровно тогда, когда открыл редактор.
Из правила «повтори руками» растёт принцип, на котором держится весь старт: каждый кусок теории закрывается практикой в тот же день. Не «доучу раздел, потом попрактикуюсь». Выучил — сразу сделал.
Выглядит это так. Узнал пять тегов HTML — собери страницу о себе: имя, фото, три факта, ссылка на что угодно. Криво расположено, без единого стиля — неважно. Узнал в CSS про цвет и шрифт — раскрась эту же страницу. Получилось аляповато, как сайт из девяностых? Нормально, это первый CSS в жизни, он у всех такой. Понял, что такое функция и клик в JavaScript — повесь на кнопку хоть что-нибудь: пусть по нажатию меняется текст, или прячется картинка, или фон становится чёрным.
Критерий тут один, и он не «красиво». Критерий — «работает и написано мной». Право писать уродливый код — это и есть разрешение начать. Перфекционизм, который шепчет «сначала доучи как следует, потом сделаешь хорошо», — не осторожность. Это топливо туториал-ада под маской ответственности. Хороший код приходит из сотни плохих, а не из ожидания вдохновения.
Самый честный признак, что ты сдвинулся: у тебя есть файл, который ты написал сам и который что-то делает. Пусть меняет цвет фона по клику. Этого достаточно.
К второй-третьей неделе, когда уже есть что отлаживать и что терять, добавляются два инструмента. Не весь арсенал фронтендера — всему свой час, — а ровно двое, без которых работа превращается в слепое тыканье.
Первый — инструменты разработчика в браузере, DevTools, открываются клавишей F12. Это рентген страницы. Блок съехал вправо, а ты не понимаешь почему? Открыл DevTools, ткнул в блок, увидел, какие стили на него действуют и кто виноват. Вкладка Console показывает ошибки в JavaScript — те самые, из-за которых «ничего не работает, а почему — непонятно». Новичок без DevTools не отлаживает код. Он гадает и копирует чужие решения наугад, надеясь, что одно подойдёт. Базово освоить две вкладки — Elements и Console — дело первой недели работы с реальной страницей.
Второй — Git, хотя бы азы. Это машина времени для кода. Сохраняешь версии проекта, и когда «всё сломалось, а я не помню, что трогал», откатываешься на рабочую версию одной командой. На старте хватает пяти команд, остальное доучивается по мере надобности. Бонусом Git даёт первое публичное место, где твои страницы лежат в интернете, а не на твоём столе.
Вместе эти двое превращают слепое тыканье в осмысленную работу: один показывает, что сломалось, второй позволяет не бояться ломать. Вводить их в первый день не надо — перегрузишь себя и бросишь. Их время приходит, когда уже есть кривая страница, которую хочется чинить и сохранять.
Первый проект — не приложение, не клон соцсети, не интернет-магазин. Одна страница, доведённая до конца. Визитка о себе или мини-портфолио. Звучит скромно, и в этом весь смысл.
Завершённость учит большему, чем амбиции. Десять брошенных на середине «крутых проектов» дают меньше, чем одна страница, доделанная до точки. Вся настоящая работа — в последних двадцати процентах: основное готово, а на телефоне всё разъезжается, кнопка не нажимается, шрифт почему-то гигантский. Вот здесь и учатся. Не в туториалах, где у автора всё работает с первого раза.
Анатомия первого сайта проста. HTML-каркас: шапка, блок о себе, контакты. CSS: привести в приличный вид и сделать так, чтобы страница не разваливалась на телефоне. Капля JavaScript: одна живая деталь — кнопка «наверх» или переключатель тёмной темы. Когда страница готова, выложи её через Git в открытый доступ. Не ради работодателя — до резюме ещё далеко. Ради точки «я довёл до конца». Эта точка превращает тебя из смотрящего курсы в делающего сайты. Собственно, это и есть момент, когда ты вошёл в веб-разработку.
Формула простая, и она обратная той, по которой живёт туториал-ад: теория, сразу за ней практика по памяти, застрял — гуглишь точечно. Не «доучу всё, потом сяду».
Сегодня вечером: создай папку, в ней файл index.html, напиши «Привет», открой в браузере. Поставь редактор кода. Тридцать минут — и среда готова, первый сайт существует.
Первая неделя: только HTML, ничего больше. К воскресенью у тебя страница о себе, собранная из тегов, без единого стиля. Уродливая. Своя. Не переписанная из урока.
Первый месяц: на второй-третьей неделе добавляешь CSS и знакомишься с DevTools и азами Git. К концу месяца — капля JavaScript и первый законченный одностраничный сайт, выложенный в открытый доступ.
Дальше начинается развилка: фронтенд или бэкенд, какой темп держать, учиться очно или онлайн, какой бюджет. Азы у всех веток одинаковы — HTML, CSS, JavaScript в браузере, ты их уже трогаешь руками. А вот маршрут после азов у каждого свой, и собирать его из сотни противоречивых видео — снова прямая дорога в туториал-ад. Чтобы не гадать, какая системная программа подойдёт именно под твою цель, бэкграунд и темп, пройди Профтест на ru.education: за пять минут он подберёт направление и программу под тебя. Руками работаешь сам — маршрут пусть подберут под тебя.
Junior во frontend стартует с 50 000–80 000 ₽ (медиана предлагаемых зарплат на hh.ru за 2026 год), middle уже зарабатывает 140 000–250 000 ₽. Но это после года-полутора, а не после первой страницы. Цифры на горизонте, не на этой неделе.
Лена закрыла плеер на сорок первом часу. За один вечер сверстала страницу: фото кота, заголовок и кнопка, которая по клику меняет цвет фона. Уродливо. С ошибкой в отступах, которую она потом полчаса искала в DevTools. И — работает. Написано её руками. За этот вечер она узнала о вёрстке больше, чем за сорок часов видео.
Она не была не готова. Она просто ни разу не открыла редактор. Готовность измеряется не часами просмотренного видео, а первым сохранённым файлом.
