От строительства к продаже — EP.10

Добро пожаловать на десятый день путешествия по сборке Crossroad! Эта серия рассказывает о моем пути инди-хакинга продукта от создания до продажи. Если вы пропустили девятый день, вы можете посмотреть его здесь. Я также загрузил сегодняшний Twitch-стрим на YouTube, если вы хотите посмотреть повтор.

Работа над посадочной страницей. 🛠

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

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

Во время сегодняшней сессии сборки я был поражен мощью CSS-сетки. Настолько, что мне захотелось рассказать вам о классной функции, которой обладает CSS grid!

CSS grid — это круто! 😎

Я думаю, что CSS grid — это самая потрясающая вещь, появившаяся в CSS с тех пор, как я начал работать в качестве front-end разработчика. В начале своей карьеры я полагался на такие библиотеки, как Foundation и Bootstrap для создания сеток, но с CSS grid я могу создавать свои собственные сетки с большей гибкостью и без использования библиотек.

Примечание: нет абсолютно ничего плохого в использовании библиотеки, особенно при работе над большим проектом, где вы сотрудничаете с несколькими front-end разработчиками. Однако я считаю, что CSS grid более гибкая, особенно в сочетании с flexbox для сложных макетов.

Чтобы подчеркнуть, почему я люблю CSS-сетку, давайте рассмотрим блок цен. Обычно, используя что-то вроде Bootstrap, вам потребуется два ряда, и вы с трудом сможете выделить блок «Pro» из остальных колонок. Не говоря уже о том, чтобы сделать его отзывчивым, с разными заказами в зависимости от ширины экрана.

С помощью CSS grid вы можете использовать grid-template-areas, что может выглядеть немного странно, если вы никогда не использовали его:

.pricing__grid {
  display: grid;
  grid-template-areas:
    '. b .'
    'a b c'
    'd d d';
  grid-gap: var(--spacing-md);
  grid-template-rows: var(--spacing-xl) 1fr 0.5fr;
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Но как насчет того, чтобы заставить сетку работать на мобильных устройствах? На мобильных устройствах невозможно разместить даже две колонки рядом друг с другом, не говоря уже о трех. Что ж, приготовьтесь к тому, что ваш разум будет разрушен (мой был разрушен)!

@media (max-width: 768px) {
  .pricing__grid {
    grid-template-rows: 1fr;
    grid-template-areas:
      '. b'
      'a b'
      'c c'
      'd d';
  }
}

@media (max-width: 640px) {
  .pricing__grid {
    grid-template-areas:
      'b'
      'a'
      'c'
      'd';
  }
}
Войдите в полноэкранный режим Выход из полноэкранного режима

С помощью старых добрых медиа-запросов вы можете изменять сетки так, как вам захочется. На мобильных устройствах я хотел показать PRO-версию сверху, как вы можете видеть. Возможно, я захочу изменить это позже, но это было так просто, как переключить два символа внутри grid-template-areas.

Извините, я, как фронтендер, занудствую, но я хотел поделиться своими мыслями о CSS-сетке, так как уже давно широко использую ее в своих проектах. Если вы сейчас работаете над фронтендом своего проекта, я советую вам ознакомиться с ним!

Маркетинговые идеи. 📢

Сейчас, когда запуск не за горами (1, может быть 2 недели), я активно думаю о том, как и где привлечь аудиторию. Поскольку эта библиотека шаблонов/компонентов предназначена для разработчиков и (технических) творцов, я могу найти свою аудиторию на dev.to, Hackernoon, Twitter, Indie Hackers и других подобных форумах и блогах.

Как только у меня будет готовый инструмент, я начну писать учебники о том, как, например, извлечь ваше последнее сообщение из API WordPress, чтобы показать его на вашей странице «ссылка в био». Таким образом, я предоставляю ценность, обучая людей тому, как извлекать последние сообщения из WordPress API, а также продвигаю свой продукт, сообщая им в посте, что они могут следовать вместе с моим front-end.

Чтобы охватить больше разработчиков, я, вероятно, буду писать учебники на NextJS, RemixJS и, возможно, на некоторых других фреймворках.

До следующей недели! 👋

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

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

Еще раз спасибо, что прочитали этот журнал сборки. Хорошего дня, и до встречи в следующий вторник!

Если вы хотите быть в курсе последних новостей, следите за мной в Twitter.

С любовью,

Twankrui

Оцените статью
Procodings.ru
Добавить комментарий