How I Built a Responsive Website Without Any Frameworks
Emma George
TABLE OF CONTENTS
1 . Why I Chose No Frameworks
2 . Project Requirements and Goals
3 . Setting Up the HTML5 Structure
4 . Responsive Layouts with CSS Grid and Flexbox
5 . JavaScript for Interactivity
6 . Building a Responsive Navigation Menu
7 . Image Handling and Responsive Media
8 . Accessibility: Not Just a Checkbox
9 . SEO Best Practices
10 . Performance Optimization
11 . File Organization & Maintainability
12 . Deployment and Hosting
13 . Final Thoughts
Conclusion
In an era of React, Vue, Tailwind, and countless other JavaScript frameworks and CSS libraries, choosing to build a website using pure HTML, CSS, and JavaScript might seem unconventional, maybe even inefficient.
But sometimes, the simplest tools give you the most power.
In this blog, I want to walk you through the entire process of how I designed and developed a responsive, mobile-first, lightning-fast website from scratch, without a single framework. This journey helped me rediscover the foundational beauty of the web, improve my skills in browser behavior, and gave me full control over performance and responsiveness.
Let’s dive deep into the philosophy, architecture, and the practical code that powered the project.
1 . Why I Chose No Frameworks
Modern frameworks are fantastic, but they also come with:
- Learning curves
- Heavy bundles
- Build steps and dependencies
- Hidden abstractions
a personal portfolio, I wanted:
- Speed: Instant loading, minimal JS
- Simplicity: Easy to maintain
- Understanding: Full control over the code
- No build tools: Purely static files
This made it the perfect opportunity to build without React, Angular, Bootstrap, or Tailwind.
2 . Project Requirements and Goals
The goal was to create a responsive, modern website that:
- Works flawlessly on mobile, tablet, and desktop
- Loads fast, even on slow networks
- Has smooth animations and transitions
- Includes a contact form
- Is SEO and accessibility friendly
3 . Setting Up the HTML5 Structure
The HTML foundation used semantic elements for clarity and accessibility:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A responsive portfolio site built without frameworks." />
<link rel="stylesheet" href="styles.css" />
<title>My Portfolio</title>
</head>
<body>
<header>
<nav>
<ul id="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<button id="toggle-menu">☰</button>
</nav>
</header>
<main>
<section id="home"></section>
<section id="projects"></section>
<section id="contact"></section>
</main>
<footer>
<p>© 2025 My Portfolio</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Key Decisions:
- header, main, and footer improve semantic understanding.
- Viewport meta tag ensures proper scaling on all devices.
4 . Responsive Layouts with CSS Grid and Flexbox
The layout needed to be fluid. I used a mobile-first approach and media queries to scale up:
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
flex-direction: column;
list-style: none;
padding: 0;
}
@media (min-width: 768px) {
nav ul {
flex-direction: row;
justify-content: space-around;
}
}
For more complex layouts, I used CSS Grid:
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 1fr 1fr;
}
}
Why not Bootstrap?
- Grid and Flexbox are supported in all modern browsers.
- Frameworks often include unused code. I wanted total control.
5 . JavaScript for Interactivity
I kept JS minimal and unobtrusive. No jQuery, no Vue.
One feature was a mobile nav menu toggle:
const toggleBtn = document.getElementById('toggle-menu');
const navLinks = document.getElementById('nav-links');
toggleBtn.addEventListener('click', () => {
navLinks.classList.toggle('visible');
});
CSS handled the transition:
#nav-links {
display: none;
}
#nav-links.visible {
display: flex;
}
Another example: Smooth scroll behavior.
html {
scroll-behavior: smooth;
}
No need for JavaScript libraries to handle this!
6 . Building a Responsive Navigation Menu
Mobile navs often require JavaScript for toggling and transitions. I used a combination of media queries and simple class toggling.
- Hamburger button only shows on small screens
- Menu opens on click, collapses on selection
- On wider screens, the menu is always visible
- It worked perfectly and was only 10 lines of JS.
7 . Image Handling and Responsive Media
Images can tank performance. I optimized them by:
- Using modern formats like WebP
- Compressing files
- Using picture for responsive loading
Example:
<picture>
<source srcset="img/photo.webp" type="image/webp">
<img src="img/photo.jpg" alt="Project screenshot" loading="lazy">
</picture>
CSS ensured responsiveness:
img {
max-width: 100%;
height: auto;
}
8 . Accessibility: Not Just a Checkbox
I ensured:
- All images had alt tags
- Buttons had aria-labels
- Color contrast passed WCAG guidelines
- Semantic HTML was used properly
- Tab navigation was intuitive
Example:
<button aria-label="Toggle navigation menu">☰</button>
9 . SEO Best Practices
Since I wasn’t using a framework like Next.js for SSR, I focused on these:
- Meta tags for description and keywords
- Proper heading hierarchy (h1, h2)
- Canonical links
- Sitemap.xml and robots.txt
- Descriptive anchor text
Example:
<a href="#projects">View My Projects</a>
10 . Performance Optimization
Framework-free sites load faster, but I went further:
- Minified CSS and JS
- Used defer for JS loading
- Lazy loaded images
- Reduced DOM complexity
- Result: PageSpeed score 98/100
- Used system fonts (no web fonts)
- Implemented caching via .htaccess on the server
Result: PageSpeed score 98/100
11 . File Organization & Maintainability
Simple structure:
- /index.html
- /styles.css
- /script.js
- /img/
- /sections/
- /favicon.ico
All code was modular and clean. Each section had comments and consistent formatting.
This made updates easy and minimized cognitive overhead.
12 . Deployment and Hosting
I deployed the site on Netlify. Why?
- Free SSL
- Instant continuous deployment via GitHub
- Drag-and-drop or CLI deployment
- Super-fast CDN
Alternative options: GitHub Pages, Vercel, Cloudflare Pages
13 . Final Thoughts
Building a responsive website without any frameworks is:
- Not hard if you understand HTML/CSS/JS deeply
- Rewardingyou learn how the browser really works
- Lightweight and fast
- Ideal for personal projects, landing pages, and blogs
By going framework-free, I improved performance, accessibility, and my own confidence as a front-end developer.
You don’t always need a complex toolchain to make something beautiful.
My Advice: Start small. Build a simple site without frameworks. You’ll walk away a stronger, more capable web developer.
Conclusion
Building a responsive website without relying on any frameworks or libraries is not just possible, it’s empowering. By focusing on native web technologies like HTML5, CSS3, and vanilla JavaScript, I was able to create a fully functional, accessible, and high-performance site tailored to my specific needs. This process reminded me that you don’t always need complex tools or modern libraries to build something powerful and beautiful.
Frameworks can be great accelerators, but understanding the fundamentals allows you to make better decisions, debug faster, and create lighter, more maintainable codebases. In an age where over-engineering is common, this approach offered clarity, control, and performance.
This project wasn’t just about building a portfolio site, it was about proving that with the right knowledge, anyone can create professional, responsive websites with just the core web technologies.
So whether you're a beginner looking to strengthen your foundation or an experienced developer wanting a break from heavy frameworks, I highly recommend going back to basics. You’ll gain confidence, improve your skills, and produce something you truly understand, line by line.
Ready to build yours? Start small. Code clean. Stay responsive.
Emma George
Software Engineer
Senior Software Engineer
