Html and Css & Jsآموزش: “👉 How to Build a Personal Portfolio Website This project shows your s…”

👉 How to Build a Personal Portfolio Website

This project shows your skills, boosts your resume, and helps you stand out. Follow these steps:

✅ Setup Your Environment
• Install VS Code
• Create a folder named portfolio
• Add index.html, style.css, and script.js

✅ Create the HTML Structure (index.html)

html
<!DOCTYPE html>
<html>
<head>
  <title>Your Name</title>
  <link rel="stylesheet" href="style.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>

  <section id="about">
    <h2>About Me</h2>
    <p>Short intro, skills, and goals</p>
  </section>

  <section id="projects">
    <h2>Projects</h2>
    <div class="project">Project 1</div>
    <div class="project">Project 2</div>
  </section>

  <section id="contact">
    <h2>Contact</h2>
    <p>Email: your@email.com</p>
  </section>

  <footer>© 2025 Your Name</footer>
</body>
</html>

✅ Add CSS Styling (style.css)

css
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
  color: #333;
}

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

nav a {
  margin: 0 1rem;
  color: white;
  text-decoration: none;
}

section {
  padding: 2rem;
}

.project {
  background: white;
  padding: 1rem;
  margin: 1rem 0;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

footer {
  text-align: center;
  padding: 1rem;
  background: #eee;
}

✅ Add Interactivity (Optional - script.js)
• Add smooth scroll, dark mode toggle, or animations if needed

✅ Host Your Site
• Push code to GitHub
• Deploy with Netlify or Vercel (connect repo, click deploy)

✅ Bonus Improvements
• Make it mobile responsive (media queries)
• Add a profile photo and social links
• Use icons (Font Awesome)

💎 @Htmlcss_channels | #css #JavaScript #HTML