Introduction
A personal portfolio should look clean on every screen size and be easy to update as your work grows. In this CSS Grid tutorial, you will build a simple HTML5 CSS3 portfolio layout using semantic markup and modern layout techniques. The goal is to create a solid foundation for responsive web design while keeping the code easy to maintain for real-world frontend development.
Project Structure
We will create a basic portfolio with these sections:
- Header with name and intro
- Navigation menu
- Project grid
- About section
- Contact footer
HTML5 semantic elements make the page more readable for both developers and search engines.
HTML Layout
<body> <header class="hero"> <h1>Jane Doe</h1> <p>Frontend Developer</p> </header> <nav> <a href="#projects">Projects</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav> <main class="container"> <section id="projects" class="projects"> <article class="card">Project One</article> <article class="card">Project Two</article> <article class="card">Project Three</article> </section> <section id="about">About me</section> </main> <footer id="contact">email@example.com</footer></body>Build the Grid Layout
The main benefit of CSS Grid is control over rows and columns without extra wrapper hacks. For a portfolio, Grid is perfect for arranging project cards in a flexible layout.
Core CSS
body { margin: 0; font-family: Arial, sans-serif; line-height: 1.6;}.container { width: min(1100px, 90%); margin: auto;}.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem;}.card { padding: 1.5rem; background: #f4f4f4; border-radius: 8px;}This setup automatically creates as many columns as fit the screen. Using auto-fit and minmax() is one of the easiest ways to support responsive web design without writing many media queries.
Improve Visual Hierarchy
A portfolio should guide visitors quickly to your best work. Add spacing, contrast, and a simple color palette.
Basic Styling Enhancements
.hero, nav, footer { text-align: center; padding: 2rem 1rem;}nav a { margin: 0 0.75rem; text-decoration: none; color: #333;}Keep typography readable and avoid overcrowding the layout. A clean interface often feels more professional than heavy decoration.
Make It Fully Responsive
Although Grid handles much of the layout automatically, small screens may still benefit from targeted adjustments. You can reduce large spacing or font sizes with a simple media query.
Optional Media Query
@media (max-width: 600px) { .hero h1 { font-size: 1.8rem; }}This keeps the page balanced on phones while preserving the same overall structure. That is a key principle in frontend development: adapt the interface without rebuilding it for every device.
Best Practices for a Portfolio
- Use real project titles instead of placeholder text
- Add links to live demos and GitHub repositories
- Optimize images for fast loading
- Keep sections short and scannable
- Test on mobile, tablet, and desktop screens
As your HTML5 CSS3 portfolio grows, you can expand the grid with thumbnails, tech tags, and call-to-action buttons.
Conclusion
Building a portfolio with Grid is a practical way to learn modern CSS. In this CSS Grid tutorial, you created a semantic structure with HTML5, used Grid for flexible project cards, and applied simple responsive techniques. This approach gives you a strong base for responsive web design and future frontend development projects.