Работа с макетами

Введение

В предыдущей статье мы разобрались, как устроено обучение на платформе и какие материалы доступны для изучения. Теперь пришло время познакомиться с макетами — самым приближенным к реальной работе способом практики.

В отличие от заданий, где обычно проверяется один или несколько конкретных навыков, макеты позволяют почувствовать себя настоящим frontend-разработчиком. Перед вами будет готовый дизайн, который необходимо самостоятельно превратить в полноценный работающий сайт.

Что такое макет?

Макет — это дизайн сайта или приложения, подготовленный в Figma. Ваша задача — внимательно изучить его и самостоятельно реализовать с помощью HTML, CSS и JavaScript.

Во время работы никто не будет подсказывать, какие технологии использовать или в каком порядке выполнять задачу. Именно поэтому макеты отлично развивают навыки анализа, планирования и самостоятельного принятия решений.

Выберите подходящий уровень сложности

Все макеты разделены на три уровня сложности.

Легкий

Подойдет тем, кто только начинает изучать верстку. Обычно такие проекты состоят из небольшого количества секций и помогают закрепить базовые навыки работы с HTML и CSS.

Средний

Здесь появляются более сложные интерфейсы, адаптивная верстка, большое количество компонентов и различные состояния элементов.

Сложный

Это наиболее объемные проекты, максимально приближенные к коммерческой разработке. Они требуют хорошего знания HTML, CSS, JavaScript и умения самостоятельно искать решения. Не стоит переживать, если сложные макеты кажутся недоступными. Большинство разработчиков приходит к ним постепенно.

Как найти нужный макет

По мере развития платформы количество макетов будет постоянно увеличиваться. Чтобы быстро найти подходящий проект, используйте поиск и систему фильтров. Вы можете отбирать макеты по различным параметрам, например:

• сложности;
• количеству страниц;
• наличию адаптивной версии;
• используемому языку;
• наличию Live Preview.

Это поможет подобрать проект, который соответствует вашему текущему уровню и целям обучения.

Что находится на странице макета?

Каждый макет содержит всю информацию, необходимую для выполнения работы.

На странице вы найдете:

• название проекта;
• описание;
• уровень сложности;
• ссылку на макет в Figma;
• дополнительные материалы (если они есть);
• статус выполнения;
• ссылку на видеоразбор (если он доступен).

Перед тем как приступать к работе, рекомендуем внимательно изучить описание проекта.

Используйте Live-превью

Некоторые макеты содержат Live-превью — готовую версию проекта, которую можно открыть прямо в браузере.

Это позволяет посмотреть, как должен выглядеть готовый результат, увидеть поведение интерактивных элементов и оценить работу сайта целиком.

При этом исходный код проекта остается недоступным, поэтому всю реализацию вам предстоит выполнить самостоятельно.

Если у макета пока нет Live-превью, вы можете помочь развитию платформы. Опубликуйте готовый проект и отправьте его в качестве Live-превью. После проверки он станет доступен другим пользователям.

Подробнее об этом можно узнать в статье «Как добавить Live-превью».

Используйте статусы

Во время работы над макетами вы можете отмечать свой прогресс с помощью статусов. Это помогает быстро находить проекты, над которыми вы сейчас работаете, и отслеживать уже завершенные работы.

Для каждого макета доступны три статуса.

Не выбран

Статус по умолчанию. Используйте его, если пока не планируете работать над этим макетом.

В работе

Установите этот статус, когда приступите к выполнению макета.

Так вы сможете быстро найти его позже и продолжить работу в любой удобный момент.

Завершено

Когда работа над макетом будет полностью завершена, вы сможете отметить его как выполненный.

Для этого необходимо указать ссылку на репозиторий GitHub с вашим проектом. Если вы еще не знакомы с Git и GitHub — не переживайте. В следующей статье мы подробно разберем, как установить Git, создать репозиторий и загрузить в него свою работу.

Получайте опыт и достижения

Каждый завершенный макет приносит опыт (XP), который начисляется после успешной отправки решения.

Количество опыта зависит от уровня сложности проекта:

• Легкий — 15 XP;
• Средний — 20 XP;
• Сложный — 25 XP.

Полученный опыт увеличивает ваш уровень на платформе и помогает открывать новые достижения. Например, вы сможете получить достижение за первый завершенный макет или за выполнение определенного количества проектов.

Важно понимать, что опыт, уровень и достижения не дают дополнительных возможностей на платформе. Они существуют для того, чтобы вы могли видеть собственный прогресс и сохранять мотивацию во время обучения.

Обучайтесь в удобном для себя темпе

Verstaem.online не сравнивает пользователей между собой и не проверяет качество вашего кода.

Главная цель платформы — помочь вам регулярно практиковаться и постепенно становиться сильнее как разработчику. Поэтому именно вы решаете, когда работа действительно завершена и готова получить статус «Завершено».

Мы рекомендуем прикреплять ссылку именно на тот репозиторий GitHub, в котором находится выполненный проект. Со временем вы сможете вернуться к своим старым работам, сравнить их с новыми и наглядно увидеть собственный прогресс.

Где смотреть видеоразбор?

Для многих макетов доступны подробные видеоразборы.

Чтобы каждый пользователь мог выбрать наиболее удобную площадку, видео опубликованы сразу на двух сервисах:

• YouTube;
• VK Видео.

Выберите тот вариант, который удобнее именно вам.

Мы рекомендуем придерживаться следующего порядка:

1. Самостоятельно выполнить макет.
2. Сравнить результат с дизайном.
3. И только после этого посмотреть видеоразбор.

Так вы сможете объективно оценить собственное решение, увидеть альтернативные подходы и обратить внимание на моменты, которые могли остаться незамеченными во время работы.

Помните, что видеоразбор — это не инструкция по выполнению проекта, а возможность узнать новые приемы, сравнить разные варианты реализации и разобраться в сложных моментах.

Что дальше?

Теперь вы знаете, как устроены макеты и как использовать их для регулярной практики. В следующей статье мы познакомимся с Git и GitHub, установим необходимые инструменты, научимся создавать репозитории и загружать в них свои проекты.

После этого у вас будет все необходимое, чтобы начать выполнять задания и отмечать завершенные макеты на платформе.