Свёрстай свой первый сайт за 35 часов — от пустого файла до адаптивного лендинга-портфолио, который не стыдно показать заказчику.
Разовая оплата, без подписки. Школьнику курс покупает родитель из кабинета parents.omnex.study.
**Ты когда-нибудь смотрел на красивый сайт и думал: «А смог бы я такое сделать сам?»** Спойлер: смог бы. Любой сайт в интернете — от лендинга кофейни до интерфейса банка — под капотом собран из двух языков: HTML описывает содержимое, CSS отвечает за красоту. Это первое, что учит каждый фронтендер, и именно с этого начинается путь в профессию, где джуниору в 2025 году платят от 60 000 ₽.
Этот курс — не сухой справочник тегов, которые забудутся через неделю. Мы идём маленькими шагами и с первого же урока пишем настоящий код, который сразу видно в браузере. Ты не просто прочитаешь про Flexbox — ты соберёшь на нём шапку сайта. Не выучишь медиазапросы теоретически — заставишь свой лендинг красиво складываться на экране телефона. Каждая тема раздроблена мелко, чтобы ты не захлебнулся, а спокойно понял и закрепил на практике.
За 8 модулей ты пройдёшь путь от пустого файла `index.html` до адаптивного сайта-портфолио, опубликованного в интернете по настоящей ссылке. По дороге соберёшь 5 проектов: визитку, резюме, карточку товара, макет блога и финальный лендинг — всё это ляжет в твоё портфолио, которое покажешь заказчику или работодателю.
Тебе не нужен мощный компьютер, платные программы или математический склад ума. Нужен только браузер, бесплатный редактор кода и 35 часов честной работы. Если умеешь печатать текст — справишься. Погнали верстать.
Разбираемся, как браузер превращает код в сайт, ставим редактор, пишем первый HTML-документ и собираем страницу-визитку — первый проект в портфолио.
Наполняем страницы содержимым: ссылки и навигация, изображения, списки, таблицы, семантические теги и формы. В финале — HTML-резюме, второй проект портфолио.
Подключаем стили, учимся прицельно выбирать элементы селекторами, задаём цвета, фон, шрифты и единицы измерения. Стилизуем визитку и резюме.
Главный секрет CSS: каждый элемент — коробка. Разбираем padding, margin, рамки, тени, box-sizing и display, а затем собираем карточку товара.
Осваиваем главный инструмент современной раскладки: оси, выравнивание, гибкость элементов, перенос и промежутки. Собираем шапку сайта и адаптивную галерею.
Учимся вырывать элементы из потока (position, z-index) и строить двумерные макеты на CSS Grid: колонки, fr, repeat и именованные области. В финале — макет блога.
Учим сайт красиво жить на телефоне, планшете и мониторе: медиазапросы, mobile-first, адаптивные картинки и резиновая типографика. Собираем адаптивный лендинг.
Оживляем интерфейс переходами и анимациями, наводим порядок переменными и BEM, публикуем сайт в интернете и собираем финальное портфолио по настоящей ссылке.