My Journey Building a Product Page with AI Tools

This project was fun — discovering how to use AI generation tools to build my product gallery and even create a surprisingly realistic ad. I originally set out to build a simple landing page inspired by sites like Amazon or Daraz Nepal, but ran into a problem: most of the images I planned to use had logos or branding I couldn't legally include. That's when I turned to AI. What started as a workaround turned into a creative opportunity, and in this post, I'll walk you through how I used AI to generate images, create a video ad, and deploy the final page.

Why I Built a Product Landing Page

I built this project for two reasons: first, it was a requirement for the Responsive Web Design Certification. Second, after asking ChatGPT, it suggested that this would be a strong project to include in my portfolio. Since my goal is to land my first junior frontend web developer role or gain clients as a freelancer, I decided this was a valuable project to showcase.

Inspired by e-commerce sites like Amazon and Daraz, I thought this would be a great opportunity to explore layouts used in actual product pages.

That said, I know my gallery isn't on par with how interactive galleries on Amazon or Daraz are — but that comes in the future!

Learning While Building

To be honest, I'm sure I learned more than I can fully recall for this section. As mentioned earlier, this project was built a few weeks ago as part of the Responsive Web Design Certification from freeCodeCamp. Because of that, I didn't document everything I learned at the time — just the key problems I ran into, which I'll cover in the next section.

AI Image & Video Generators: I had heard of AI platforms that could generate images from text prompts or other inputs. However, I didn't know that AI could also generate videos from text. It was one of those things I thought should exist — along with other ideas — but I didn't realize it already did. When I got the idea to create an ad for my product, I discovered that some platforms could generate videos from simple prompts, which was a pleasant surprise.

I also picked up a few lessons from the challenges I faced during the build, which I'll go over next.

Mistakes I Made (And What They Taught Me)

The Navigation Bar Wouldn't Stick After Passing the Hero Banner

This is the same issue I encountered in my "My First Deployment" post. Since it was already explained there, I kept the fix the same here. If you'd like to read that post, you can find it here: My First Deployment .

Reason: In my original layout, both the .navbar and .hero-title were placed inside the <header> element. I had applied position: sticky; to the .navbar, but it didn't work as expected — the layout made it unclear which container the sticky behavior was relative to, and the extra content inside <header> interfered with it.

Fix: I restructured the layout by turning .navbar into a dedicated <nav> inside <header>, and moved the .hero-title into the <main> section. This separation allowed position: sticky; to work properly, as the interfering content was no longer in the same container.

One Image Appeared Larger Than the Others in the Gallery and Nested Three Images

Reason: This happened because the image lacked an explicit height or aspect ratio, and overflow: hidden affected how it was rendered.

Fix: I set .img-wrapper to have height: auto and added aspect-ratio: 1 / 1 to ensure all images maintained the same proportions. This fixed the inconsistent sizing across the gallery.

text-align: justify Was Being Inherited by section p Due to CSS Specificity

Reason: The section p selector applied text-align: justify globally, and since .pre-order p didn't have a more specific rule, it inherited that style. This was due to CSS specificity — the browser applied the more general section p rule because nothing overrode it.

Fix: I explicitly set text-align: center in .pre-order p to override the inherited style.

Now that I've listed the technical issues I encountered, I've also realized there are some non-technical challenges I keep facing and need to work on.

Rushing: I notice many bugs happen because I rush through things and forget simple details — like missing a ; at the end of a CSS rule or not properly closing an element.

Solution: I need to slow down and take my time. Using a linter would also help catch these mistakes before they cause problems.

Attention to Detail: This might be related to rushing, but I often forget punctuation in sentences. Also, I tend to push to GitHub a lot — not always because it's necessary, but because I don't step back to assess the whole project. I focus on one small change, then realize I need to fix markup or styling afterward, so I keep committing and pushing repeatedly.

Solution: I need to be more mindful of details and take a step back to assess the entire project before making changes. This will help me avoid unnecessary commits and make the process smoother. I also plan to jot down a checklist before starting a project to better organize what needs to be done.

If you're interested in seeing the full code or the changes I made, you can view the project here: GitHub Repo.

Why I Chose This Design

To create a clean and professional look, I chose a dark background using #2c3e50 for the body, paired with light text #f4f4f4. This improves readability and reduces eye strain, especially in low-light environments. The dark theme also helps vibrant accents stand out — for example, links use a soft teal #1abc9c, which shifts to #16a085 on hover. This subtle transition adds interactivity without being visually distracting. On the homepage, I reversed the color scheme for the .post-card elements, using a light background #fdfdfd and dark text black to visually separate the cards from the rest of the page. For call-to-action links like .read-more, I used #ff4500 to draw attention without relying on large buttons. Finally, the footer uses a darker shade #1a252f, which helps ground the page visually. Overall, this palette balances clarity, accessibility, and a bit of personality while staying suitable for a professional blog.

Responsiveness

To ensure the page looks clean and functional across different screen sizes, I used flexbox and CSS grid for layout structure. These allow elements to adjust naturally as the viewport changes. The body uses display: flex with a column direction to stack content vertically, while sections like the post grid rely on grid-template-columns: 1fr to create a single-column layout by default. For spacing and readability, I applied a consistent scale using custom properties like --space-sm, --space-md, and so on — which are easily adjustable across breakpoints.

Media queries were added at max-width: 396px and max-width: 333px to optimize for smaller devices. These breakpoints adjust font sizes, container padding, and line heights to maintain legibility and prevent layout overflow. For example, font sizes like 1.125rem are scaled down to 1rem or smaller on compact screens, and padding is reduced to make better use of limited space.

Together, these techniques help ensure the design remains accessible, readable, and user-friendly across desktops, tablets, and mobile devices.

In the "My First Deployment" post, I mentioned that I overlooked mobile-first design and intended to prioritize it in future projects. Unfortunately, I slipped up again on this one. This was built before the portfolio project, and at the time, I still had the habit of designing based on my monitor's size. I also neglected to use the Responsive Design Tool available in the browser's DevTools — something I'll be more conscious of moving forward.

Tools I Used

Here are the main tools and resources I used to build this landing page:

I intentionally kept the stack minimal and beginner-friendly to stay focused on learning good structure, layout, and styling practices without overwhelming myself with too many tools or frameworks.

What I Would Do Differently Next Time

If I were to do this project again, the biggest change I'd make is to take a mobile-first approach from the very beginning. I now realize how important it is to prioritize smaller screen experiences before scaling up — not just for responsiveness, but also to simplify layout decisions early on. I'd also spend more time planning the layout and content flow on paper or a wireframe tool before diving into code. This would help reduce back-and-forth restructuring later in the build.

Another improvement would be refining my Git workflow. Instead of committing and pushing changes as I go, I'd group related updates into meaningful commits and write clearer commit messages. This would make the project history easier to follow — both for me and for anyone reviewing my work. Lastly, I'd explore accessibility basics a bit more, like contrast ratios and semantic HTML elements, to ensure a more inclusive experience for users.

Final Thoughts

This project gave me the chance to combine everything I've learned so far — not just in terms of code, but also how to plan, adapt, and present my work. I explored new tools like AI image and video generators, practiced layout and styling fundamentals, and learned from both technical and non-technical mistakes.

Although there's still a lot to improve, I'm proud of what I was able to build with my current skill set. More importantly, this experience helped me see how much potential there is to grow. Each project like this brings me one step closer to becoming a confident and capable frontend web developer.