Why Build a Portfolio Website?
If you are learning coding, design, or any tech skill, you will constantly hear one piece of advice: build a portfolio website. A portfolio is simply a place on the internet where you show your work and the projects you have created.
Think of it like a digital resume — except instead of just telling people what you can do, you actually show them. When someone visits your portfolio, they can see your real projects, read about your skills, and get a sense of who you are as a developer.
The best part? You do not need complicated tools or expensive software. In this guide, we will build a portfolio from scratch using only three core technologies: HTML, CSS, and JavaScript. That is genuinely all you need.
Step 1: Create the Basic HTML Page
Every website starts with HTML. HTML is the skeleton — it tells the browser what content should exist on the page: headings, paragraphs, images, links, and so on. Without HTML, there is no page.
Start by creating a file called index.html — this will be the main entry point of your portfolio. Open it in any text editor (VS Code is a great free option) and paste in this foundation:
<!-- Every HTML page starts with this declaration --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Portfolio</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello! I'm Arnav</h1> <p>Welcome to my portfolio website.</p> </body> </html>
Open this file in any browser by double-clicking it. You will see your very first webpage — a heading and a paragraph. It is simple, but it works. Everything else we build is just adding on top of this.
Step 2: Add Portfolio Sections
A raw webpage with a single heading is a start, but a real portfolio needs organized sections that visitors can scan and navigate. Think about what someone who just landed on your site would want to know about you.
Most portfolios include these four core sections:
- About — who you are, where you go to school, what you are working on
- Projects — the things you have actually built, with descriptions and links
- Skills — languages, frameworks, and tools you know
- Contact — how people can reach you (email, GitHub, LinkedIn)
Use HTML <section> tags to group these areas clearly:
<section id="about"> <h2>About Me</h2> <p>I am a student developer who enjoys building websites and learning new technologies.</p> </section> <section id="projects"> <h2>Projects</h2> <p>Here are some things I have built.</p> </section> <section id="contact"> <h2>Contact</h2> <p>Email: hello@example.com</p> </section>
Now your page has structure. Visitors can scroll through and understand exactly what each area is for.
Step 3: Add Styling With CSS
Right now your page works, but it looks completely unstyled — plain black text on a white background. This is where CSS comes in. CSS controls everything visual: colors, fonts, spacing, layout, and how the page feels overall.
Create a new file called styles.css in the same folder as your HTML file. Here is a clean starting point:
/* Reset defaults and set a clean base */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', Arial, sans-serif; background: #f5f5f5; color: #111; line-height: 1.7; } section { background: white; padding: 2rem; margin: 2rem auto; max-width: 800px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
Refresh the browser after linking this file and your page will look dramatically cleaner right away.
<head> and your typography will instantly look more polished than the default system fonts.
Step 4: Show Your Projects
The projects section is the heart of any portfolio. This is the part recruiters and collaborators actually care about — it shows that you have built real things, not just watched tutorials.
Each project entry should answer three questions: what is it, what does it do, and where can I see it? Give every project a name, a short description, and a link to either a live demo or the GitHub repo.
<section id="projects"> <h2>Projects</h2> <div class="project-card"> <h3>AI Homework Helper</h3> <p>A Chrome extension that explains homework questions using AI.</p> <a href="https://github.com/jainArnav7">View on GitHub →</a> </div> <div class="project-card"> <h3>Personal Blog</h3> <p>A blog where I write about coding and technology.</p> <a href="blog.html">Read the Blog →</a> </div> </section>
Even two projects is enough to get started. The key is to have something real and linkable — not just placeholder text. You can always add more as you build them.
Step 5: Make It Responsive
A large portion of people who visit your portfolio will be on a phone or tablet, not a desktop. If your site only looks good on a wide screen, you are losing a big chunk of your audience right away.
Making a site look good across all screen sizes is called responsive design. In CSS, you do this with media queries — rules that only apply when the screen is a certain width.
/* Layout for tablets and desktops */ .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } /* Stack to single column on phones */ @media (max-width: 600px) { .project-grid { grid-template-columns: 1fr; } body { padding: 1rem; } }
Always test your portfolio by resizing your browser window — or use the built-in device simulator in your browser (press F12, then click the phone icon). Your site should look clean at every width.
Step 6: Add Small JavaScript Features
JavaScript is what makes a website feel alive and polished. You do not need to write complex code — even small interactive touches make your portfolio feel noticeably more professional.
Some great additions that are beginner-friendly:
- Dark / light mode toggle — saves the user's preference in localStorage
- Hamburger menu — shows and hides navigation on mobile screens
- Smooth scrolling — anchor links glide instead of jumping abruptly
- Fade-in animations — sections animate into view as you scroll down
// Toggle dark mode and remember the choice const toggle = document.getElementById('themeToggle'); toggle.addEventListener('click', () => { const current = document.body.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.body.setAttribute('data-theme', next); localStorage.setItem('theme', next); });
Step 7: Publish Your Portfolio Online
A portfolio that only lives on your laptop does not do you much good. Once your site looks solid, you need to put it on the internet so anyone with a link can see it.
The three best free hosting options for static portfolios are:
All three are completely free for personal projects. GitHub Pages is the easiest starting point — push your files to a repository, enable Pages in the settings, and your site is live at a username.github.io URL within minutes.
Tools Used in This Project
Here is the complete toolkit for everything in this guide. No paid software, no complex setup — just the core trio that every web developer starts with:
These are the foundational skills that every web developer builds on top of. Frameworks and libraries come later — but if you understand HTML, CSS, and JavaScript well, picking up React or any other tool becomes much easier.
Final Thoughts
Building a portfolio website is one of the best first projects you can take on as a developer. It is practical, it is personal, and it directly teaches you the three fundamental layers of the web — structure, style, and behavior — all in one project.
The best part is that a portfolio is never truly "done." Every new project you build, every new skill you learn, you can add it to your site. It grows with you.
Do not wait until you feel ready. Start with something simple, get it online, and improve it over time. A real, live portfolio — even a basic one — will always beat a perfect one that never gets published.
Building projects is how you learn. A portfolio simply shows the world what you built. — Arnav Jain