I Built a Premium Business Consulting Landing Page Using Only HTML, CSS, and Vanilla JavaScript

Geraldo Christoper — Sun, 05 Jul 2026 12:13:32 +0000

Over the past few days, I challenged myself to build a premium business consulting landing page without using any frameworks, UI libraries, CSS frameworks, build tools, or npm packages.

The objective wasn't simply to recreate a beautiful design—it was to see how far modern HTML, CSS, and JavaScript can go on their own.

The result is Scale Architects, a landing page designed for a fictional business growth consulting firm that combines lead generation, portfolio showcase, and trust-building into one responsive page.

🚀 Live Demo

Live: https://gerealdochristopher.github.io/scale-architects-landing-page/

GitHub: https://github.com/GerealdoChristopher/scale-architects-landing-page

Why Vanilla?

Frameworks are amazing productivity tools, but sometimes they hide how browsers actually work.

For this project I wanted:

complete control over every line of code
zero runtime dependencies
instant page loading
browser-native ES Modules
maintainable architecture without a build step

Everything runs directly in the browser.

No React.

No Vue.

No Tailwind.

No Bootstrap.

No jQuery.

No GSAP.

No npm install.

Design System

One thing I focused on was making the project easy to maintain.

Instead of scattering colors and spacing values everywhere, I built a design system using more than 200 CSS Custom Properties.

That means changing the brand colors, spacing, typography, or shadows only requires editing a single file.

Typography is fully fluid using clamp(), so many elements scale naturally without relying on dozens of media queries.

CSS Architecture

Rather than putting thousands of lines into one stylesheet, I separated everything into independent modules using a SMACSS-inspired structure.

css/
├── base/
│ ├── reset.css
│ ├── variables.css
│ └── typography.css
├── layouts/
└── components/

Each UI section has its own stylesheet, making the project easier to navigate and maintain.

JavaScript Architecture

The JavaScript is also modular.

js/
├── modules/
│ ├── navigation.js
│ ├── smoothScroll.js
│ └── testimonialCarousel.js
└── script.js

Each module has one responsibility.

The main entry file simply initializes everything.

Features

Some of the interactions I implemented include:

3D tilt effects
Scroll reveal animations
Animated particle background
Glow effects
Floating badges
Animated testimonial cards
Progress indicator
Smooth scrolling
Counter animations
Swipe-enabled testimonial carousel
Mobile-friendly navigation

Everything is built using the browser APIs—no animation libraries.

The Bug That Cost Me Hours

Deployment worked perfectly locally...

...until GitHub Pages broke my entire CSS architecture.

The reason?

GitHub Pages enables Jekyll by default, and Jekyll ignores files or folders beginning with an underscore.

My component styles looked like this:

_header.css
_hero.css
_footer.css

None of them were being served.

The solution turned out to be surprisingly simple:

.nojekyll

Adding one empty .nojekyll file in the repository root disables Jekyll processing, and everything immediately worked.

Sometimes the smallest fixes take the longest to discover.

What I'd Improve Next

Although I'm happy with the current result, there are several things I'd like to improve:

Dark mode
Functional contact form
Better accessibility
AVIF/WebP image optimization
Lighthouse performance optimization
More keyboard navigation support
Final Thoughts

This project reminded me that modern browsers are incredibly capable.

Frameworks certainly make development faster, but it's refreshing to build something from scratch and understand exactly how every interaction works.

I'd love to hear your thoughts.

Are the animations too much?
How does the mobile experience feel?
Would you structure the CSS differently?
What would you improve first?

Feedback is always appreciated.

If you'd like to explore the project:

⭐ GitHub: https://github.com/GerealdoChristopher/scale-architects-landing-page

🌐 Live Demo: https://gerealdochristopher.github.io/scale-architects-landing-page

Thanks for reading!

DEV Community: Geraldo Christoper

webdev, javascript, css, showdev, html, tutorial

I Built a Premium Business Consulting Landing Page Using Only HTML, CSS, and Vanilla JavaScript

I Built a Premium Business Consulting Landing Page Using Only HTML, CSS, and Vanilla JavaScript