Complete Portfolio Assembly

Assemble the complete portfolio — connect all sections, add structured data, optimize for search engines, and prepare for deployment.

45 min•By Priygop Team•Last updated: Feb 2026

Final Assembly & Deployment

Complete HTML Template: Combine header/nav, hero, about, skills, projects grid, testimonials, contact form, and footer into a single page. Each section links via anchor navigation (#about, #projects, etc.)
Open Graph Tags: <meta property='og:title' content='Your Name — Frontend Developer'> <meta property='og:description'> <meta property='og:image' content='https://yoursite.com/og-image.jpg'> — controls social media preview cards
Twitter Cards: <meta name='twitter:card' content='summary_large_image'> <meta name='twitter:title'> <meta name='twitter:image'> — distinct from Open Graph, optimized for Twitter/X display format
Robots & Indexing: <meta name='robots' content='index, follow'> — allow search engines to index and follow links. Add <link rel='canonical'> to prevent duplicate content issues across URLs
Performance Checklist: All images have width/height (prevents CLS). Hero image preloaded (improves LCP). Scripts deferred (doesn't block rendering). Fonts preloaded with swap (avoids FOIT). Critical CSS inlined if possible
Deployment Preparation: Validate HTML (W3C), check accessibility (axe DevTools, Lighthouse), test keyboard navigation, verify Open Graph (opengraph.xyz), test responsive design at 320px/768px/1024px/1440px

Try It Yourself: Portfolio Hero Section

Try It Yourself: Portfolio Hero SectionHTML

HTML Editor

✓ ValidTab = 2 spaces

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; margin: 0; background: #0f172a; color: #e2e8f0; }
  .hero { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #1e293b, #0f172a); }
  h1 { font-size: 2.2em; margin: 0; color: #38bdf8; }
  .subtitle { color: #94a3b8; font-size: 1.1em; margin: 12px 0; }
  .btn { display: inline-block; padding: 12px 28px; background: #2563eb; color: white; text-decoration: none; border-radius: 8px; margin: 8px; font-weight: bold; }
  .btn:hover { background: #1d4ed8; }
  .btn.outline { background: transparent; border: 2px solid #2563eb; }
  nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #1e293b; }
  nav a { color: #94a3b8; text-decoration: none; margin: 0 12px; }
  nav a:hover { color: #38bdf8; }
  .skills { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
  .skill { background: #1e293b; padding: 8px 16px; border-radius: 20px; font-size: 14px; border: 1px solid #334155; }
</style>
</head>
<body>
  <nav>
    <strong style="color:#38bdf8">MyPortfolio</strong>
    <div><a href="#about">About</a><a href="#projects">Projects</a><a href="#contact">Contact</a></div>
  </nav>
  <section class="hero">
    <h1>Hi, I'm Alex 👋</h1>
    <p class="subtitle">Frontend Developer | Building beautiful web experiences</p>
    <a class="btn" href="#projects">View My Work</a>
    <a class="btn outline" href="#contact">Contact Me</a>
    <div class="skills">
      <span class="skill">HTML5</span>
      <span class="skill">CSS3</span>
      <span class="skill">JavaScript</span>
      <span class="skill">React</span>
    </div>
  </section>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family: Arial, sans-serif; margin: 0; background: #0f172a; color: #e2e8f0; }
  .hero { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #1e293b, #0f172a); }
  h1 { font-size: 2.2em; margin: 0; color: #38bdf8; }
  .subtitle { color: #94a3b8; font-size: 1.1em; margin: 12px 0; }
  .btn { display: inline-block; padding: 12px 28px; background: #2563eb; color: white; text-decoration: none; border-radius: 8px; margin: 8px; font-weight: bold; }
  .btn:hover { background: #1d4ed8; }
  .btn.outline { background: transparent; border: 2px solid #2563eb; }
  nav { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; background: #1e293b; }
  nav a { color: #94a3b8; text-decoration: none; margin: 0 12px; }
  nav a:hover { color: #38bdf8; }
  .skills { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
  .skill { background: #1e293b; padding: 8px 16px; border-radius: 20px; font-size: 14px; border: 1px solid #334155; }
</style>
</head>
<body>
  <nav>
    <strong style="color:#38bdf8">MyPortfolio</strong>
    <div><a href="#about">About</a><a href="#projects">Projects</a><a href="#contact">Contact</a></div>
  </nav>
  <section class="hero">
    <h1>Hi, I'm Alex 👋</h1>
    <p class="subtitle">Frontend Developer | Building beautiful web experiences</p>
    <a class="btn" href="#projects">View My Work</a>
    <a class="btn outline" href="#contact">Contact Me</a>
    <div class="skills">
      <span class="skill">HTML5</span>
      <span class="skill">CSS3</span>
      <span class="skill">JavaScript</span>
      <span class="skill">React</span>
    </div>
  </section>
</body>
</html>

Result

Click ▶ Run to see the result

Edit the code on the left, then click Run

HTML|37 lines|1740 chars|✓ Valid syntax

UTF-8

Quick Quiz — HTML Portfolio Project

Next Module →