Vanilla JS + HTML/CSS

The pick for beginners building a portfolio or content site - no framework needed.

This is the one recommendation that tells you to add nothing. If you're building a portfolio, a personal site, a blog or another content-first site, and you're just starting out with JavaScript, the right "framework" is the web platform itself: HTML for structure, CSS for presentation, and a small amount of JavaScript where a page genuinely needs to react to the user.


Who gets this pick

You'll see this result when you answer that you're building a portfolio, personal site, blog or content site and that you're just starting out or know the basics of JavaScript. Your goal and team size don't change it: even if you want a developer job, a total beginner building a simple site is pointed at fundamentals first, because those are what every framework - and every technical interview - builds on.


Why skipping the framework is the right call here

Frameworks like React and Vue exist to solve one problem well: keeping a complicated, constantly changing interface in sync with its data. A portfolio or blog doesn't have that problem. Most of its pages are the same for every visitor and change only when you edit them.

Adding a framework anyway costs you a build tool, a package manager, a component model and a layer of abstraction between you and the browser - all before you've written your first paragraph. Worse, it hides the things a beginner most needs to understand: how the DOM works, how events bubble, how CSS layout actually behaves.

Plain HTML pages are also as fast as the web gets. There's no JavaScript bundle to download before anything appears, and search engines read the content directly.


A first project: a three-page portfolio

  1. Structure first. Build Home, Projects and Contact pages using semantic elements - <header>, <nav>, <main>, <article>, <footer>. Check that each page makes sense with CSS turned off.
  2. Layout with modern CSS. Put your colours and spacing in custom properties (--accent, --space), lay out the project cards with CSS Grid, and add one media query so the grid collapses to a single column on phones.
  3. One piece of real interactivity. Add filter buttons that show only projects with a given tag, or a dark-mode toggle that remembers the choice in localStorage. Either teaches events, DOM queries and state in about 30 lines.
  4. A working contact form. Static hosts can't process forms themselves, so use a form service your host provides (Netlify Forms, for example) or a simple mailto: link to start.
  5. Publish it. Push it to a Git repository and deploy - see hosting below. A live URL on your CV matters more than another week of polishing.

Hosting and cost

A site made of HTML, CSS and JavaScript files can be hosted almost anywhere, usually for free. GitHub Pages, Netlify and Cloudflare Pages all deploy straight from a Git repository and include HTTPS. Any shared hosting plan works too - you just upload the files.

In practice the only cost is a domain name, and even that is optional while you're learning.


Mistakes to avoid

  • "Div soup". Using <div> for everything throws away free accessibility and SEO. Use buttons for actions, links for navigation, and headings in order.
  • Starting from a template you don't understand. Copying a 2,000-line theme teaches you how to edit someone else's code, not how to build. Start smaller and write it yourself.
  • Pulling in a library for one effect. Modern browsers handle smooth scrolling, dialogs (<dialog>), and animations natively.
  • Huge images. A phone photo can be 5MB. Resize and compress images, set width and height attributes, and add loading="lazy" below the fold.
  • Never testing on a real phone. Browser dev tools help, but check the live site on an actual device before you share it.

When it's time for a framework

You'll know. Typical signs: you're copying the same chunk of markup into many places and keeping the copies in sync by hand; your JavaScript is full of code that finds elements and updates their text whenever something changes; or several parts of the page need to share the same data. That's exactly the problem frameworks solve - at that point, Vue or React will feel like relief rather than overhead.

If your blog simply grows to dozens of posts, a static site generator such as Eleventy or Astro is often a better next step than a client-side framework: you keep plain HTML output but stop hand-copying headers and footers.


Take the quiz All picks