Skip to main content

Product Landing Page

Product Landing Page Project Desktop UI Preview Figma Version Product Landing Page Project Desktop UI Preview Visual Studio Code Version
Product Landing Page Project Mobile UI Preview Figma VersionProduct Landing Page Project Mobile UI Preview Visual Studio Code Version

The Project​

Landing page for an intelligent maintenance platform, developed as a freeCodeCamp certification project. "A Ferrari with some scratches" - as defined by Claude for the massive use of advanced techniques with some errors intentionally left.

Strategic choice: I decided on this specific website subject precisely because it's exactly what I'm working on in the Google UX course - to unite the two different learning paths synergistically.

Source Code​

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title> My First Landing Page</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <main>
            <header id="header">
                <img src="" alt="" id="header-img">
                <nav id="nav-bar">
                    <img src="logo.png" class="logo-image">
                    <div class="central-link">
                    <a href="#Solution" class="nav-link">Solution</a>
                    <a href="#How-It-Works" class="nav-link">How It Works</a>
                    <a href="#Contact" class="nav-link">Contact</a>
                    </div>
                    <button id="nav-start-demo" type="submit" class="start-demo">START DEMO</button>
                </nav>

                <section class="title-subtitle-button">
                <h2 class="subtitle subtitle-top">Keep running, no maintenance worries.</h2>
                <h1 class="title">Smart maintenance,<br>Zero downtime</h1>
                <h2 class="subtitle subtitle-bottom">Stay on top of maintenance. Log issues, track fixes, keep production <br class="desktop-only">running— no interruptions.</span></h2>
                <button id="hero-start-demo" type="submit" class="start-demo first-start-demo">START DEMO</button>
                </section>

                <section id="Solution" class="solution">
                    <h3>Real‑time Tracking</h3>
                    <p>Follow each maintenance request as it<br>happens, with nothing slipping through.</p>
                    <h3>Automatic Shift Handover</h3>
                    <p>Smooth handover between teams, with no<br>details lost.</p>
                    <h3>Live Priority Dashboard</h3>
                    <p class="end-solution">See urgent interventions at a glance, all in<br>one view.</p>
                </section>
            
                <section id="How-It-Works" class="how-it-works">
                    <ol>
                        <li>Report an issue in just a few taps, attach photos for clarity</li>
                        <li>Maintenance team receives and manages requests instantly</li>
                        <li>Get automatic notifications when the problem is resolved</li>
                    </ol>
                </section>

                <section id="youtube-video" class="youtube-video">
                    <div class="iframe">
                        <iframe src="https://www.youtube.com/watch?v=pCtkD5AMbDo" id="video" width="650" height="400"></iframe>
                    </div>
                </section>
                
                <section id="Contact">
                    <form action="https://www.freecodecamp.com/email-submit" id="form">
                        <h4 class="form-start">Enter your email to start demo</h4>
                        <div class="email-address">
                            <input name="email" type="email" id="email" placeholder="Enter your email address" required>
                        </div>
                        <button id="form-start-demo" type="submit" class="start-demo">START DEMO</button>
                    </form>
                </section>

            </header>
        </main>
        <footer>
            <address>
                <img src="logo.png" alt="logo azienda 'SA'" class="logo-footer">
                <div class="social-link">
                    <img src="youtube.svg" alt="link a YouTube Channel di SA" class="social-youtube">
                    <img src="instagram.svg" alt="link ad Instagram di SA" class="social-instagram">
                    <img src="linkedin.svg" alt="link a Linkedin di SA" class="social-linkedin">
                </div>
            </address>
        </footer>
    </body>
</html>

The Decision for Technical Authenticity​

I decided on purpose not to have my code reviewed before publishing it, to say: "This is my exact level without AI."

The Love Affair with CSS Variables​

I had said I fell in love with variables and here I decided to integrate them massively. Despite completely changing the interface from web to mobile, as Refactoring UI suggests, I found great benefit when in media queries I mostly just had to modify the variables to apply correct spacing and dimensions.

The Figma → Code Process​

Not only did I complicate my life with massive use of variables, I did it even by first creating the design in Figma following all the Refactoring UI rules I've learned so far, then trying to replicate pixel-perfect everything designed in Figma.

Mobile-first approach: I first designed for mobile as Refactoring UI suggests, because by doing so you then realize there isn't much to change for the desktop version. Also, you shouldn't be afraid of white spaces - it's better to add than to remove later.

I can say today that I fully empathize with front end developers who are tasked with turning UX/UI designers' Figma designs into code. I understand their "hate" and indeed I realized how difficult it is.

The "How It Works" Section Failure​

I couldn't convert all of the Figma. I'm referring particularly to the "How It Works" section which after several attempts I decided to simplify into a numbered list (<ol>), always showing the difference between the Figma Version and the VS Code Version.

The Role Difference Insight​

Precisely because of this I understand the difference between Front End Developer and UX Engineer:

  • UX Designer: Thinks in terms of beauty and usability
  • Front End Developer: Thinks in terms of code efficiency
  • UX Engineer: When prototyping on Figma doesn't just see components, sees CSS rules, wonders whether to use flexbox rather than grid here...

The UX Engineer creates a product that balances all these aspects.

The Choice of 70% vs 100%​

I'm not 100% satisfied, because the content was designed to work with perfect dimensions on MacBook Air and iPhone 16 Pro, therefore it doesn't have perfect proportions in other formats. I understood how demanding the responsive side is.

You'll ask: why didn't you push until making it perfect?

I preferred to spend a total of 3 days between Figma and VS Code, rather than three weeks (if I'm lucky), and use those days to move forward. At the same time I'm also doing course 3/8 of Google UX - tomorrow I plan to finish the last wireframes to complete this third course.

The Philosophy of Progressive Imperfection​

I realized something fundamental: it's precisely this tendency toward perfection IMMEDIATELY that blocks the beginner who wants to become senior.

Gym analogy: I've been practicing gym for 6 years, I started with friends all "bigger" than me, but despite genetics playing against me, today I'm the "biggest" and by no small margin. Why? They almost all stopped or are inconsistent.

It's like saying: "I'm not leaving the gym until I do the best technically possible workout!" It's simply impossible. Much better to do many imperfect workouts - unconsciously you'll reach levels that as a beginner you didn't even imagine existed.

The Progressive Quality Index​

Much better to do many 70% projects and then reach 100% after some time, rather than getting trapped in the loop of trying to reach 100% with the first one.

By "70%" I mean: working project, aesthetically decent, basic responsive, but not perfect in every detail. The "100%" would be: pixel-perfect on every device, advanced optimizations, perfectly clean code, every edge case handled.

The paradox is that by doing 10 projects at 70%, you gain the experience to naturally make 90-95% projects without effort. Staying stuck on the first one to make it perfect, you always remain at the initial level.

The Position on AI​

I'm sure that massive use of AI will only bring me "rented" knowledge. Not only because those who get used to it are lost without it, but also because if I write the code myself, in case of problems I know exactly what I called that variable and where I put that flexbox instead of grid.

I'll use AI in this journey only to understand and get advice, I'll never copy and paste. Not only wouldn't I understand what I'm doing, I wouldn't even be straining myself - it's precisely this effort that makes you strong and independent.

What I Learned​

Notable Techniques:

  • Massive CSS Variables as true design system
  • Variable overrides in media queries (genius!)
  • Flexbox for precise alignments
  • Ultra-rounded buttons modern style
  • Responsive that changes everything on mobile
  • Subtle but effective hover transitions

Problems Left Intentionally:

  • Wrong heading hierarchy (h2 before h1)
  • Span tag closed without opening
  • Wrong YouTube URL for iframe
  • Everything inside header (strange semantic structure)

Next Project: Learn CSS Animation by Building a Ferris Wheel