Day 18/180 of Frontend Dev: Build a Professional Resume Page with Semantic HTML.

#frontend #frontendchallenge #webdev

Welcome to Day 18 of the 180 Days of Frontend Development Challenge. Today you'll create a clean, accessible resume using semantic HTML structure. This exercise focuses on content organization without styling. For complete resume-building techniques, see the Learn Frontend Development in 180 Days ebook.

Complete Resume HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Taylor Rivera - Senior Frontend Developer Resume</title>
  <meta name="description" content="Professional resume for Taylor Rivera - React specialist with 5+ years experience">
</head>
<body>
  <!-- Header with contact info -->
  <header>
    <h1>Taylor Rivera</h1>
    <p>Senior Frontend Developer</p>

    <address>
      <ul>
        <li><a href="mailto:taylor@example.com">taylor@example.com</a></li>
        <li><a href="tel:+15551234567">(555) 123-4567</a></li>
        <li><a href="https://linkedin.com/in/taylorrivera">LinkedIn</a></li>
        <li><a href="https://github.com/taylorrivera">GitHub</a></li>
        <li>San Francisco, CA</li>
      </ul>
    </address>
  </header>

  <main>
    <!-- Professional Summary -->
    <section aria-labelledby="summary-heading">
      <h2 id="summary-heading">Professional Summary</h2>
      <p>Frontend developer with 5+ years of experience building responsive web applications using React, TypeScript, and modern CSS. Specializing in creating accessible, performant user interfaces with clean code architecture.</p>
    </section>

    <!-- Work Experience -->
    <section aria-labelledby="experience-heading">
      <h2 id="experience-heading">Work Experience</h2>

      <article>
        <h3>Senior Frontend Developer</h3>
        <p><strong>TechSolutions Inc.</strong> | Jan 2020 - Present</p>
        <ul>
          <li>Lead development of customer dashboard using React and Redux</li>
          <li>Improved page load performance by 40% through code splitting</li>
          <li>Mentored 3 junior developers in React best practices</li>
        </ul>
      </article>

      <article>
        <h3>Frontend Developer</h3>
        <p><strong>Digital Creative Agency</strong> | Mar 2018 - Dec 2019</p>
        <ul>
          <li>Built 15+ responsive client websites using Vue.js</li>
          <li>Implemented WCAG 2.1 AA accessibility standards</li>
          <li>Reduced bundle size by 30% through asset optimization</li>
        </ul>
      </article>
    </section>

    <!-- Education -->
    <section aria-labelledby="education-heading">
      <h2 id="education-heading">Education</h2>
      <article>
        <h3>B.S. Computer Science</h3>
        <p><strong>University of California</strong> | 2014 - 2018</p>
        <p>Specialization in Human-Computer Interaction</p>
      </article>
    </section>

    <!-- Skills -->
    <section aria-labelledby="skills-heading">
      <h2 id="skills-heading">Technical Skills</h2>
      <dl>
        <dt>Languages</dt>
        <dd>JavaScript (ES6+), TypeScript, HTML5, CSS3/Sass</dd>

        <dt>Frameworks</dt>
        <dd>React, Vue.js, Next.js</dd>

        <dt>Tools</dt>
        <dd>Git, Webpack, Jest, Figma</dd>
      </dl>
    </section>

    <!-- Projects -->
    <section aria-labelledby="projects-heading">
      <h2 id="projects-heading">Key Projects</h2>
      <article>
        <h3>E-Commerce Analytics Dashboard</h3>
        <p>React application visualizing real-time sales data</p>
        <ul>
          <li>Integrated with REST API using Axios</li>
          <li>Implemented D3.js for data visualization</li>
        </ul>
      </article>
    </section>
  </main>

  <!-- Footer -->
  <footer>
    <p>References available upon request</p>
    <p>Last updated: <time datetime="2023-05-20">May 2023</time></p>
  </footer>
</body>
</html>

Key Semantic Features

Structural Elements
- <header> for personal info
- <main> for primary content
- <article> for each position/education
- <section> with aria-labelledby
Content Organization
- <address> for contact information
- <dl> for skills definition list
- <time> for dates
- <ul> for bullet points
Accessibility
- Clear heading hierarchy (h1 > h2 > h3)
- ARIA landmarks for screen readers
- Semantic tags for all content

Professional Resume Sections

Header Section
- Full name and title
- Complete contact info
- Professional links
Work Experience
- Reverse chronological order
- Company name and dates
- 3-5 bullet points per role
- Quantifiable achievements
Education
- Degree and major
- Institution name
- Graduation year
- Relevant coursework
Skills Section
- Categorized by type
- Relevant technologies
- Tools/methodologies
Projects (Optional)
- Notable work samples
- Technologies used
- Key contributions

Exercises

Personalize This Template
- Replace with your work history
- Add/remove relevant sections
- Include your education details
Accessibility Check
- Verify heading hierarchy
- Check ARIA attributes
- Test keyboard navigation
Enhance the Content
- Add certifications section
- Include languages spoken
- Add volunteer experience

What's Next?

Tomorrow (Day 19) will introduce CSS Styling to transform this semantic resume into a visually appealing document. For advanced resume techniques including print styles and interactive elements, see Chapter 14 in the Learn Frontend Development in 180 Days ebook.

Pro Tip: Use microdata or JSON-LD to add structured data for better SEO:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Taylor Rivera",
  "jobTitle": "Senior Frontend Developer",
  "url": "https://example.com",
  "sameAs": [
    "https://linkedin.com/in/taylorrivera",
    "https://github.com/taylorrivera"
  ]
}
</script>