Skip to content

Project brief: building an agency portfolio

In this tutorial, we'll build a small design agency website from scratch using Silex. By the end, you'll have a live, professional site published on the web.

What we're building

A three-page portfolio website for a fictional design agency:

Homepage (index) — Landing page introducing the agency. Features a hero section with a headline, short description, and call-to-action button. Below that, a portfolio showcase: three featured projects displayed as cards (using flexbox).

About page — Tells the agency's story. Two columns: on the left, text about the team; on the right, an image. Uses CSS variables for consistent spacing and typography.

Contact page — Contact form with fields for name, email, message. Form submissions go to Formspree. Also includes contact details (address, phone, email).

All three pages share a header (logo + navigation) and footer (copyright, links) — implemented as Symbols so changes sync across all pages.

What we'll use along the way

Layout & Style: - Flexbox for all layout (rows, cards, columns) - CSS variables for colors (brand color, text color, backgrounds) and spacing (padding, gaps) - BEM class naming (e.g., agency-hero, agency-card, agency-header) - Responsive design with breakpoints (desktop, tablet, mobile)

Reusable elements: - Symbols for shared header and footer (one change, all pages update) - A card-based design system for consistency

Publishing: - GitLab as storage and hosting - Custom domain setup (optional, but we'll show it)

By the end of this tutorial, you will have learned

  • How to create and structure multiple pages with internal navigation
  • How to use Symbols for consistency across pages
  • How to design a system with CSS variables and consistent spacing
  • How to publish your site live and (optionally) add a custom domain
  • Best practices for semantic HTML, responsive design, and accessibility

A note on time and complexity

This is a complete, production-ready site. If you're new to Silex or web design, budget 2-4 hours. If you're experienced, 45 minutes to an hour.

Each section is self-contained: you can do the layout and styling first, or skip forms if you want to focus on layout.

Before you start

Make sure you have:

  • A Silex editor open (either the online instance at v3.silex.me or a self-hosted version)
  • A GitLab account (free at gitlab.com) for publishing
  • (Optional) A domain name if you want to use a custom domain in the final step

The pages we'll create

  1. Project brief (this page) — Overview of what we're building
  2. Structure — Create pages, layout, navigation, and Symbols
  3. Styling — Design system, typography, colors, responsive adjustments
  4. Publish — Publish to GitLab Pages and optionally set up a custom domain

Next steps

Ready to start? Head to Structure to create your pages and build the layout.

Or, if you want to understand the broader context first, check these related pages:

Edit this page on GitLab