Day 17/180 of Frontend Dev: Build a Professional Portfolio Homepage with Pure HTML

#frontend #frontendchallenge #webdev

Welcome to Day 17 of the 180 Days of Frontend Development Challenge. Today you'll create a clean, semantic portfolio homepage using only HTML. This exercise focuses on proper document structure without CSS or JavaScript. For complete portfolio-building techniques, see the Learn Frontend Development in 180 Days ebook.

Complete Portfolio HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alex Chen | Frontend Developer Portfolio</title>
  <meta name="description" content="Professional frontend developer specializing in responsive web design and JavaScript frameworks">
</head>
<body>
  <!-- Navigation -->
  <header>
    <nav aria-label="Main navigation">
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#projects">Projects</a></li>
        <li><a href="#skills">Skills</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Hero Section -->
  <main id="home">
    <section aria-labelledby="hero-heading">
      <h1 id="hero-heading">Alex Chen</h1>
      <p>Frontend Developer | UI Specialist</p>
      <a href="#projects">View My Work</a>
    </section>

    <!-- Profile Image -->
    <figure>
      <img src="profile.jpg" alt="Alex Chen smiling in professional attire" width="300" height="300">
      <figcaption>Alex Chen - Frontend Developer</figcaption>
    </figure>
  </main>

  <!-- Projects Section -->
  <section id="projects" aria-labelledby="projects-heading">
    <h2 id="projects-heading">Featured Projects</h2>

    <article>
      <h3>E-Commerce Dashboard</h3>
      <p>React-based admin dashboard with data visualization</p>
      <a href="/projects/ecommerce-dashboard" aria-label="View E-Commerce Dashboard project">View Project</a>
    </article>

    <article>
      <h3>Health Tracking App</h3>
      <p>Vue.js application with Firebase integration</p>
      <a href="/projects/health-app" aria-label="View Health Tracking App project">View Project</a>
    </article>
  </section>

  <!-- Skills Section -->
  <section id="skills" aria-labelledby="skills-heading">
    <h2 id="skills-heading">Technical Skills</h2>

    <section aria-labelledby="frontend-skills">
      <h3 id="frontend-skills">Frontend</h3>
      <ul>
        <li>HTML5 & Semantic Markup</li>
        <li>CSS3/Sass</li>
        <li>JavaScript (ES6+)</li>
        <li>React & Vue.js</li>
      </ul>
    </section>

    <section aria-labelledby="tools-skills">
      <h3 id="tools-skills">Tools</h3>
      <ul>
        <li>Git & GitHub</li>
        <li>Webpack</li>
        <li>Figma</li>
      </ul>
    </section>
  </section>

  <!-- Contact Section -->
  <section id="contact" aria-labelledby="contact-heading">
    <h2 id="contact-heading">Get In Touch</h2>

    <address>
      <p>Email: <a href="mailto:[email protected]">[email protected]</a></p>
      <p>Phone: <a href="tel:+15551234567">(555) 123-4567</a></p>
    </address>

    <form action="/contact" method="POST">
      <fieldset>
        <legend>Send a Message</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>

        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>

        <label for="message">Message:</label>
        <textarea id="message" name="message" rows="5" required></textarea>

        <button type="submit">Send Message</button>
      </fieldset>
    </form>
  </section>

  <!-- Footer -->
  <footer>
    <p>&copy; 2023 Alex Chen. All rights reserved.</p>
    <nav aria-label="Social media links">
      <ul>
        <li><a href="https://github.com/alexchen" aria-label="GitHub profile">GitHub</a></li>
        <li><a href="https://linkedin.com/in/alexchen" aria-label="LinkedIn profile">LinkedIn</a></li>
        <li><a href="https://twitter.com/alexchen" aria-label="Twitter profile">Twitter</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

Key HTML Features Demonstrated

Semantic Structure
- <header>, <main>, <footer>
- <section> with aria-labelledby
- <article> for independent content
Accessibility
- ARIA labels for navigation
- Proper heading hierarchy (h1 > h2 > h3)
- Alt text for images
- Form labels and fieldsets
SEO Optimization
- Meta description
- Semantic markup
- Logical content flow
Contact Components
- Semantic <address>
- Accessible form
- Clickable email/phone links

Portfolio Content Guidelines

Hero Section
- Clear name/title
- Brief professional tagline
- Call-to-action
Projects
- 2-3 featured items
- Project title
- Short description
- Link to details
Skills
- Categorized lists
- Relevant technologies
- Tools/processes
Contact
- Multiple contact methods
- Functional form
- Social media links

Exercises

Personalize This Template
- Replace placeholder content with your information
- Add/remove project entries
- Customize skills list
Accessibility Audit
- Check heading hierarchy
- Verify all images have alt text
- Test keyboard navigation
Enhance the Structure
- Add education/work history section
- Include client testimonials
- Add a blog section link

What's Next?

Tomorrow (Day 18) will introduce CSS Fundamentals to style this portfolio. For advanced portfolio techniques including project case studies and interactive elements, see Chapter 13 in the Learn Frontend Development in 180 Days ebook.

Pro Tip: Validate your HTML using the W3C Validator before adding CSS.