> From building to selling - EP.10

Welcome to day ten of the Crossroad build journey! This series follows my journey of indie hacking a product from building to selling. If you missed day nine, you could check it out here. I also uploaded today's Twitch stream to YouTube if you want to watch the replay.

Landing page work. 🛠

Today I continued building the landing page. I only had about two hours today, so I wanted to make them count by setting up the entire landing page, but without the bells and whistles.

I coded everything that could be implemented relatively quickly and left things like the mobile navigation, the images, and some animations for next time. This approach is always very satisfying because you can make significant progress (visually) in such a short amount of time.

During the build session today, I was amazed by the power of CSS grid. So much that I wanted to let you know about a cool feature CSS grid ships with!

CSS grid is awesome! 😎

I think CSS grid is the most awesome thing introduced in CSS since I started working as a front-end developer. I relied on libraries like Foundation and Bootstrap for grids early in my career, but with CSS grid, I can roll my own grids with more flexibility and without pulling in a library.

Note; there is absolutely nothing wrong with using a library, especially when working on a bigger project where you collaborate with multiple front-end devs. However, I think CSS grid is more flexible, especially combined with flexbox for complex(er) layouts.

To highlight why I love CSS grid, let’s look at the pricing block. Usually, with something like Bootstrap, you would need two rows and struggle with breaking out the “Pro” block from the rest of the columns. Let alone make this responsive, with different orders depending on the screen width.

With CSS grid, you can utilize grid-template-areas which might look a little odd if you’ve never used it:

1.pricing__grid {
2  display: grid;
3  grid-template-areas:
4    '. b .'
5    'a b c'
6    'd d d';
7  grid-gap: var(--spacing-md);
8  grid-template-rows: var(--spacing-xl) 1fr 0.5fr;
9}

Have a look at the code above. You can probably make an educated guess at how the grid will look, even if you haven’t seen the design.

But what about making the grid work on mobile? You can’t even fit two columns next to each other on mobile, let alone three. Well, prepare to have your mind blown (mine was)!

1@media (max-width: 768px) {
2  .pricing__grid {
3    grid-template-rows: 1fr;
4    grid-template-areas:
5      '. b'
6      'a b'
7      'c c'
8      'd d';
9  }
10}
11
12@media (max-width: 640px) {
13  .pricing__grid {
14    grid-template-areas:
15      'b'
16      'a'
17      'c'
18      'd';
19  }
20}

With some good old media queries, you can modify your grids however you want. On mobile, I wanted to show the PRO version on top, as you can see. I might want to change that later, but it was as easy as switching two characters inside the grid-template-areas.

Sorry, I am geeking out as a front-ender, but I wanted to share my thoughts on CSS grid for some time now as I have been using it extensively across my projects. If you are currently working on the front-end of your project, I encourage you to check it out!

Marketing ideas. 📢

Now that the launch is around the corner (1, maybe 2 weeks) I am actively thinking about how and where to reach my audience. Since this template/component library is tailored towards developers and (technical) creators, I can find my audience on dev.to, Hackernoon, Twitter, Indie Hackers, and other similar forums and blogs.

Once I have the tool ship ready, I will start writing tutorials on how to, for example, pull your latest post from the WordPress API to show on your link in bio page. This way, I am providing value by teaching people how to pull the newest post from the WordPress API, while I can also promote my product by letting them know in the post that they can follow along with my front-end.

To reach more developers, I’ll probably write the tutorials in NextJS, RemixJS, and maybe some other frameworks.

Until next week! 👋

All by all, I didn’t have much time to work on the project this week, but I did have fun! I played around with a lot of cool stuff, and even off-stream, I am doing a big refactor of the product’s codebase.

The refactor isn’t that interesting since it’s mostly me sitting in front of my computer thinking about how to name something and then updating the file and class names. But don’t worry; before launch, I will write a more detailed post on what changes I made to the product and why.

Thanks again for reading this build log. Have a great day, and I’ll see you next Tuesday!

If you want to stay updated in the meantime, give me a follow on Twitter.

With love,

Twankrui