Building the Portfolio with HTML and CSSLesson 2.5

How to style a skills section and contact section for a portfolio

skill tags with flexbox wrap, contact section layout, mailto links, external link icons, section spacing, CSS custom properties, consistent color system

Skills and Contact: Keep It Simple

Skills and contact sections are supporting actors, not the lead. Make them clean, scannable, and never the reason someone leaves your portfolio.

Skills Section With Tag Layout

<section id="skills">
  <h2>Skills</h2>
  <div class="skills-grid">
    <span class="skill-tag">JavaScript</span>
    <span class="skill-tag">React</span>
    <span class="skill-tag">Node.js</span>
    <span class="skill-tag">CSS</span>
  </div>
</section>

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.skill-tag {
  padding: 0.4rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 999px;
  font-size: 0.9rem;
  background: #f9fafb;
}

Contact Section

<section id="contact">
  <h2>Get in Touch</h2>
  <p>Open to frontend roles and freelance projects.</p>
  <div class="contact-links">
    <a href="mailto:jane@example.com">Email</a>
    <a href="https://github.com/janedoe" target="_blank">GitHub</a>
    <a href="https://linkedin.com/in/janedoe" target="_blank">LinkedIn</a>
  </div>
</section>

Use CSS custom properties for your color system so you never hardcode the same hex value twice. Define --color-primary, --color-border, and --color-background on :root and reference them everywhere. Changing your palette later becomes a one-line edit.

Ready to practice?

MCQs · Coding challenges · Mini project