Каталог скинов SkinCraft
Артём сделал каталог своих скинов для Minecraft с поиском, категориями и возможностью скачать понравившийся вариант.
Сделать сайт, куда Артём сможет добавлять созданные в Blockbench скины, а посетитель — быстро найти понравившийся вариант и скачать его.
Артём увлекается Minecraft и однажды показал мне Blockbench. В этой программе он уже пробовал делать собственные скины и хотел продолжать.
Так появилась идея SkinCraft: собрать сайт, где эти работы можно хранить и показывать другим. Посетитель открывает каталог, выбирает понравившийся скин и скачивает его.
Получился проект, в котором соединились два интереса Артёма. В Blockbench он работал над персонажами, а на занятиях по веб-разработке постепенно собирал для них полноценный каталог.
Продумали страницу
Начали со скетча. На нём определили, где будет навигация, поиск, фильтры и сами скины.
Этот простой макет стал основой для дальнейшей работы. Когда начали верстать сайт, уже не приходилось каждый раз решать, куда поставить очередной элемент.
Собрали первый экран
По скетчу собрали шапку сайта, заголовок, поиск и фильтры. Ниже появилась первая сетка со скинами.
Карточки сделали простыми: крупный персонаж, название, категория и кнопка скачивания. В каталоге сразу видно самое важное, поэтому не пришлось перегружать его описаниями и дополнительными элементами.
Заполнили каталог скинами
Когда внешний вид карточки был готов, начали наполнять каталог. Для скинов придумали названия и распределили их по категориям.
Все карточки работают по одной структуре. Поэтому новый скин можно добавить без новой верстки всей страницы.
Сделали свои скины в Blockbench
Часть персонажей для сайта Артём сделал сам в Blockbench. Он подбирал цвета, рисовал одежду и детали, а результат сразу проверял на объёмной модели.
Это особенно хорошо связало две части проекта. Скин перестал быть случайной картинкой из интернета: сначала Артём создавал персонажа, а затем сам добавлял его на свой сайт.
Добавили поиск и категории
Когда скинов стало больше, понадобился удобный способ их находить. Добавили поиск и несколько категорий.
Артём написал логику на JavaScript: сайт проверяет название и категорию каждой карточки и оставляет на экране только подходящие варианты.
Закончили страницу
Внизу добавили подборку категорий, короткую инструкцию по скачиванию скина и футер.
После этого ещё раз посмотрели страницу целиком и убрали всё, что повторяло уже понятную информацию. Сайт остался достаточно простым, хотя внутри уже есть каталог, фильтрация и собственный контент.
Готовый SkinCraft
В итоге Артём собрал сайт, на котором может размещать собственные скины из Blockbench. Пользователь может просматривать каталог, искать персонажей, выбирать категории и скачивать понравившийся вариант.
Что стало получаться самостоятельно
- Продумывать страницу до начала верстки
- Собирать каталог из повторяющихся карточек
- Работать с HTML и CSS на большой странице
- Делать поиск и фильтрацию на JavaScript
- Добавлять новые данные без переделки интерфейса
- Создавать собственные скины в Blockbench
- Доводить один проект от идеи до готовой страницы