General Forums on Product Hunt

Coding Diary: Setting Up an NFT Showcase Page in 7 Days

leshan wang · 2026-07-23T20:24:08.923-07:00

Coding Diary: Setting Up an NFT Showcase Page in 7 Days A few weeks ago, a digital artist friend of mine named Marcus came to me with a problem. He had just finished creating a stunning new set of 3D digital sculptures that he wanted to sell as NFTs. He had already written his smart contracts and set up his digital wallets, but he had zero web design skills. He needed a clean, professional-looking website to show off his collection to collectors. Because Marcus only had fifteen pieces in his collection, he did not need a heavy, database-driven backend framework like React or WordPress. A simple static website built with standard HTML and CSS was the perfect fit. It would be cheap to host, load incredibly fast, and require almost no maintenance. To save us both time and keep the project on a tight budget, I decided to look for a pre-made design we could customize. I wanted something with a dark, futuristic look that would make his colorful 3D art stand out. I ended up choosing the Unitok – NFT Marketplace HTML Template. It had the exact dark aesthetic we were looking for. Here is my honest, day-by-day diary of how I set up the website, the mobile layout bug I ran into, and the exact code I wrote to fix it. --- Day 1: Unpacking the Code and Cleaning the Bloat On my first day, I downloaded the source folder and unzipped it on my computer. The template is built with Bootstrap 5, standard CSS, and vanilla JavaScript. This is great because it means there are no complex build tools or dependencies to worry about. The folder structure was simple, with separate directories for styles, scripts, fonts, and images. To make my work easier, I set up a quick local development server on my machine using Python. I opened my terminal, navigated to the project folder, and ran this command: python3 -m http.server 8080 This allowed me to view the website in my web browser at http://localhost:8080 and see my changes live. The homepage loaded quickly and looked beautiful, but it was packed with layout files we did not need. The template came with over twenty different pages, including mock checkout screens, author profiles, dummy auction pages, and setting menus. Since Marcus only needed a simple landing page to show his fifteen artworks and an about section, I spent the afternoon deleting the extra files. I removed the unused HTML pages, cleared out dummy image placeholders, and stripped out third-party JS scripts that we did not plan to use. This clean-up made the final directory light, organized, and much easier to manage. --- Day 3: The Overlapping Mobile Layout Bug and the CSS Fix On Day 3, I ran into my first major technical issue. I opened the website on my iPhone and an older Android test phone to make sure everything looked correct on mobile screens. On desktop, the hero banner looked fantastic. It had a bold headline on the left and a large, floating 3D card image on the right. However, on smaller mobile screens (especially those around 375 pixels wide), the text and the image collided. The headline text was overlapping with the card image, making the main title completely unreadable. This happened because the template used a hardcoded negative margin in its CSS grid to create a layered look on desktop, but did not reset that margin for smaller viewports. To solve this, I decided to rewrite the typography and spacing rules using fluid CSS properties. Instead of static margins and font sizes, I used the CSS clamp() function. This function lets you define a minimum, preferred, and maximum value, allowing elements to scale smoothly depending on the screen size. Here is the CSS code I added to our custom stylesheet to fix the layout: /* Mobile layout fix for hero section and text overlap */ .hero-section-title { font-size: clamp(2rem, 4vw + 1rem, 4.2rem); line-height: 1.15; margin-bottom: clamp(1rem, 2vw, 2.5rem); } .hero-main-image { margin-top: 0; max-width: 100%; height: auto; } /* Only apply the overlapping negative margin on larger desktops */ @media (min-width: 992px) { .hero-main-image { margin-top: -60px; margin-left: -20px; } } By using clamp(), the headline text automatically shrinks on mobile phones while remaining big and bold on desktop screens. Restricting the negative margin to screens wider than 992 pixels completely resolved the overlapping bug on mobile devices. The hero section now looked clean and balanced on every screen size I tested. --- Day 5: Adding a Smooth Theme Toggle with Local Storage By Day 5, I wanted to improve the user experience. The template had a built-in switch that let users swap between dark and light modes. However, the transition was incredibly sudden. When you clicked the button, the screen instantly flashed from bright white to dark gray. It was harsh on the eyes. I wanted to make this transition feel premium and smooth. I wrote a small CSS snippet to transition the background colors and text colors over a short duration when the theme changed. I also realized the template did not remember the user's choice. If a visitor preferred light mode, switched it on, and then refreshed the page or clicked to a different section, the site would reset back to dark mode. I wrote a simple vanilla JavaScript script to save the user's theme choice in their browser's local storage. Here is the transition styling and the JavaScript I implemented: /* Smooth color transitions for theme switching */ body, .nft-card, .btn, h1, h2, h3, p, span { transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease; } // Theme toggle script with persistent local storage document.addEventListener('DOMContentLoaded', () => { const themeBtn = document.querySelector('#theme-switch-btn'); const savedTheme = localStorage.getItem('user-theme'); // Apply the saved theme if it exists if (savedTheme) { document.body.className = savedTheme; } if (themeBtn) { themeBtn.addEventListener('click', () => { if (document.body.classList.contains('light-theme')) { document.body.classList.replace('light-theme', 'dark-theme'); localStorage.setItem('user-theme', 'dark-theme'); } else { document.body.classList.add('light-theme'); localStorage.setItem('user-theme', 'light-theme'); } }); } }); Now, when a user changes the theme, the colors fade smoothly over a fraction of a second. Even better, their preference is saved, so the site loads in their preferred mode on their next visit. --- Day 7: Performance Polish and Going Live On the final day, I prepared the files for deployment. Because we were building a static website, speed was our main goal. I wanted the page to load almost instantly, even for players browsing on mobile connections while commuting. I compressed Marcus's high-resolution 3D artwork images, converting them into the modern WebP format. This reduced the average image file size from 2.4 megabytes to under 200 kilobytes without losing any visible image quality. Since the client wanted to host the site on their static server, I wrote a custom configuration file for their web server to handle browser caching and compression correctly. This ensures that static resources like web fonts, styles, and scripts are stored on the user's device, making subsequent page views instant. Here is the server configuration block I created: # Static asset optimization and browser caching rules <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/webp "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType font/woff2 "access plus 1 year" </IfModule> When I ran the final site through speed testing tools, the performance score was 96 on mobile devices and 99 on desktop computers. The entire landing page loaded in less than one second, and the transitions felt incredibly smooth. --- Objective Pros and Cons After working with this setup for a full week, here is my balanced view of the design template. The Positives: Excellent Aesthetics: The dark-mode interface looks modern and high-end, which matches the digital art space perfectly.Clean Code Structure: It is built with standard HTML5 and Bootstrap 5, making it very easy to read, edit, and strip down.No Heavy Frameworks: It does not require complex build steps or continuous updates, which keeps hosting costs near zero. The Negatives: Mobile Spacing Bugs: The default desktop overlapping layouts broke on small phone screens, requiring custom CSS overrides.Harsh Theme Switching: The default dark-to-light theme toggle was too fast and did not save user preferences out of the box. --- The Result Using a solid pre-made HTML layout saved us days of wireframing, designing, and coding grid systems. Instead of spending my time writing basic CSS reset rules, I was able to focus on resolving mobile rendering issues, adding user-friendly details like theme memory, and optimizing the server for speed. The final website was delivered ahead of schedule. Marcus's 3D artwork looks fantastic, the site is responsive across all devices, and the page loading speed is exceptionally fast. Taking a practical shortcut with a well-designed template was the perfect choice for this project.

p/generalShare and discuss tech, products, business, startups, or product recommendations

Start new thread

trending

•

5mo ago

How do you decide which features to add to your product? [building & improvements]

Early-stage founders often try to improve their product as much as possible and tend to take almost any feedback into account.

Sometimes they end up adding every feature users (even non-paying ones) ask for, even when those features are unnecessary. The product then becomes more complicated and harder to use.

And I m not even talking about the stage when the product is already established. At that point, there are more users, and their expectations start to differ.

•

5yr ago

Featured

where are you networking these days?

twitter, linkedin, facebook groups, github, devto, behance, producthunt, indiehackers, medium, komunity, clubhouse, IG, twitch, contra, bumblebizz, zoom, xing, meetups, reddit, in person with a mask . . . what did I miss?

•

15d ago

Fable called my idea trash. A year ago it would've called me a visionary.

I had (what I thought was) a great product idea, so I described it to Fable 5 and asked for its thoughts. It basically called the idea trash and explained why, then gave me a tweaked version that it said was better.

I thought through the tweaked version and it was actually way better than my original idea.

•

2mo ago

What are the best social media platforms for a SaaS?

Hey everyone :) !

I m trying to figure out the best ways to gain visibility and drive potential buyers to my website. It feels like certain social platforms are much better suited for this type of business than others.

•

3yr ago

Featured

What's the best landing page you have seen?

If it's yours, don't hide it

•

4yr ago

Featured

Web Scraping 🔍🔥

Scraping public data from the web, transforming it, and using it for a new product can become a very successful business. What kind of web scraping projects have you worked on and which tools did you use?

•

3mo ago

Do you attend any workshops or pay for courses that are related to your business?

Every now and then, I treat myself to a workshop to learn something. (Officially, I do it because I work from home and sometimes the lack of socialising makes me sick.) :D

Today I'm going to an art-related workshop. It's a bit outside my field, but on the other hand, marketing also uses creative (I wonder if it will give me something relevant).

•

3yr ago

Featured

If you could invent a groundbreaking piece of technology, what problem would you solve?

•

3yr ago

Featured

What are your main objectives for the upcoming week?

•

2mo ago

Is it safer to work in AI companies than in traditional corporations? [A paradox of this era.]

I ve been thinking about this over the past few weeks, especially as larger tech corporations that weren t originally built around AI (Oracle, Meta, ClickUp, etc.) have started mass layoffs in favour of more efficient AI-driven solutions.

From that, it seems like AI companies must be doing extremely well and are actively trying to protect their positions. This also suggests that to strengthen their position (besides AI itself), they still need human capital to help them grow.

•••

50 51 52

•••