Build Your First Site: A Portfolio

The project

You are building a one page portfolio: a big banner at the top, work samples, about, contact. The imagined client is a photographer or designer whose whole business depends on people seeing the work and then being able to email them. Two jobs, in that order.

🤝Heads up: this lesson links to Lovable through an affiliate link, so LearnAI earns a commission if you subscribe. It costs you nothing extra, and it is what keeps these courses free. We tell you where these tools fall short too, including who should not use them.

A portfolio is the right first build because the hard part is design judgement rather than machinery. Nothing here needs to store information, log anyone in, or take a payment. It is just layout, order and restraint, which is exactly where you want to be practising while you learn how the tool responds.

Open a new project and follow along.

Step 1: the first message

Do not type "portfolio site." Give it the full brief in one go, because the first build sets the structure everything else gets refined from.

Build a one page portfolio site for Ama, a Lagos based wedding photographer.
Sections in this order:

Top banner: fills the whole screen when the page first loads, one large background photo, her name in a large serif font, one line saying what she does, and a single button reading View work.
Work: a grid of six image cards, each with a short caption underneath.
About: one short paragraph, written as I rather than she, next to a portrait photo.
Contact: a form with name, email, event date and message, plus her email address in plain text underneath.
Tone: warm, editorial, unhurried. Not corporate.
Look: cream background, deep charcoal text, one serif font for headings and a clean plain font for body text. Generous empty space.
Design it for phones first. Use neutral placeholder images for now.

Step 2: look before you touch anything

The instinct after the first build is to immediately start fixing things. Resist for sixty seconds and read the result properly.

Ask four questions. Are the sections in the right order? Does the top banner say what this person does within two seconds? Is the work grid the most eye catching thing after the banner, as it should be for a portfolio? Does it hold together at phone width?

Write your answers down before you type again. This is the planning habit from lesson 3 that keeps your credit spend sane.

Step 3: refine one area at a time

Now go one area at a time, naming the area in every message.

Only change the banner at the top. Move the headline and button to the lower left with generous space around them, add a soft dark fade over the bottom third of the photo so the text stays readable, and cut the line under her name to one short sentence.

Only change the work section. Use three columns on a laptop, two on a tablet and one on a phone, with equal gaps. Crop every image to the same tall rectangle shape, 4 wide by 5 tall. Captions should be small, uppercase and quiet, not competing with the images.

In the about section, rewrite it as two sentences written as I rather than she, with no marketing language, and put the portrait to the left of the text on a laptop and above it on a phone.
In the contact section, make the form fields full width with a visible label above each one, and make the send button match the style of the button in the top banner.

Notice how each message names its area first. That is what stops the tool from helpfully redesigning your top banner while it fixes your footer.

Step 4: the styling decisions that actually matter

Most portfolios that look amateur fail on the same four things, and all four are fixable in a couple of messages.

Text sizes. If the headline, the section headings and the body text are not clearly different sizes, the page reads as flat. Ask for a bigger difference between the largest and smallest text.

Empty space. Beginners add too little. Ask for more vertical space between sections than feels comfortable, then pull back if it goes too airy.

Colour restraint. A background, a text colour and one accent. That is it. Every extra colour is a decision the visitor has to process.

Consistent image shapes. Photos of mixed shapes in one grid look accidental. Pick one shape and enforce it.

Across the whole site: increase the size difference between section headings and body text, add more vertical space between sections, and limit the colours to cream, charcoal and one warm accent used only on buttons and links.

This is a fair use of a wide instruction, because it is one concern applied everywhere rather than four unrelated jobs in one message.

Step 5: publish

Publishing puts the site online immediately, at a free web address ending in lovable.app. Open that link on your actual phone, not a pretend phone view on your laptop, and scroll it like a visitor would. You will find something. Everyone does.

Your own web address needs a paid plan, but the free one is perfectly good for showing a client a draft, and it is the fastest way to get real feedback before you spend anything.