DEV Community

Cover image for Build a Personal Portfolio Website (2-Minute Tutorial)
CodeWithDhanian
CodeWithDhanian

Posted on

Build a Personal Portfolio Website (2-Minute Tutorial)

#webdev #javascript #portfolio #beginners

1. Set Up Your Project Folder

Create a folder named portfolio-site with 3 files inside:

  • index.html
  • styles.css
  • script.js

2. HTML: Create the Structure (index.html) 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Your Name | Portfolio</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <header>
    <h1>Your Name</h1>
    <nav>
      <a href="#about">About</a>
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <main>
    <section id="about">
      <h2>About Me</h2>
      <p>Short intro about who you are.</p>
    </section>
    <section id="projects">
      <h2>Projects</h2>
      <div class="project-grid"></div>
    </section>
    <section id="contact">
      <h2>Contact</h2>
      <form>
        <input type="text" placeholder="Your Name" />
        <input type="email" placeholder="Your Email" />
        <textarea placeholder="Message"></textarea>
        <button type="submit">Send</button>
      </form>
    </section>
  </main>
  <footer>&copy; 2025 Your Name</footer>
  <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. CSS: Style It Up (styles.css) 

body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background: #2c3e50;
  color: white;
  padding: 1rem;
  text-align: center;
}

nav a {
  margin: 0 10px;
  color: white;
  text-decoration: none;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

form {
  display: flex;
  flex-direction: column;
  max-width: 400px;
  margin: auto;
}
input, textarea, button {
  margin: 0.5rem 0;
  padding: 0.7rem;
}
button {
  background: #2c3e50;
  color: white;
  border: none;
}
Enter fullscreen mode Exit fullscreen mode

4. JavaScript: Add Interaction (script.js) 

document.querySelectorAll('nav a').forEach(link => {
  link.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(link.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault();
  alert('Message sent!');
});
Enter fullscreen mode Exit fullscreen mode

5. Go Live

Upload your folder to Netlify, GitHub Pages, or Vercel — and boom, your portfolio is online!

Bonus Tip: Want a full guide? Get this 200+ projects with source code ebook with real projects included.

Top comments (0)