The 100-Point Scorecard: Grade Your Own Site Before Anyone Else Does

“It looks fine” is not a judgement. It is the absence of one.

Here is the rubric I actually grade with, the numbers 27 real sites scored against it, and a printable version you can mark up before you send your link to anyone whose opinion matters.

What 27 real sites scored

These are not hypothetical numbers. Twenty-seven sites, built in one course, same tools, same deadline — scored from their source code rather than from screenshots.

Category	Average achieved
Content & storytelling	56%
Visual design & UX	53%
Technical functionality	45%
Responsive & accessibility	44% — lowest
Overall average	50.5 / 100 (highest 81.4, lowest 17.3)

Look at the order. The two categories that a model will write for you unprompted — the words and the look — scored highest. The two that require you to go and check something scored lowest. That pattern is the entire argument of this series in one table.

The four parts, and what each is really asking

1. Visual design & UX — 30 points

• Consistency. One palette, one type scale, applied the same way everywhere. Most amateur sites fail here by having three of each.
• Visual hierarchy. The most important thing on each screen is what the eye reaches first. If everything is emphasised, nothing is.
• Micro-interaction. Buttons respond to hover. Transitions feel deliberate. This is what separates “a page” from “a product.”

2. Technical functionality — 20 points

• Dynamic features. If it stores or submits anything, that works reliably — not once, on your machine.
• Loading speed. Images sized for the web. Nothing that blocks the page for seconds.
• Navigation. Every link goes where it claims. Nobody gets stranded.

3. Content & storytelling — 30 points

• Fitness for purpose. A stranger understands what this is and who it is for, within ten seconds.
• Portfolio quality. Each project says what it was, what you did, and how it turned out. Not just a picture.
• Readability. Type size and line spacing make a long paragraph comfortable rather than a chore.

4. Responsive & accessibility — 20 points

• Mobile. Nothing overflows, nothing overlaps, every control is thumb-sized.
• Browser compatibility. Checked in more than the one browser you built it in.
• Accessibility. Images have alt text. The whole site works with a keyboard alone.

How to use it without fooling yourself

1. Score it on a phone first. Not your laptop. Most of the points you are about to lose live there.
2. Do the accessibility line with your hands off the mouse. Tab through the whole site. If you cannot reach something, it scores zero, however pretty it is.
3. Give the content section to someone else. You cannot judge whether a stranger understands your page in ten seconds. A stranger can.
4. Fix your lowest section, not your best one. Going from 44% to 70% in accessibility moves the total more than polishing a 53% design to 60%.

What the total means

80 and above	Send it. Stronger than most first portfolios.
60–79	Good. One weak section is holding it back — the rubric just told you which.
40–59	It looks finished and is not. Usually functionality or accessibility.
Under 40	Go back to the brief. The problem is upstream of the code.

For calibration: the 27-site average was 50.5. That is a room full of people who all thought their site looked fine.

Frequently asked questions

Is this rubric objective?

Partly. Functionality and accessibility can be measured almost mechanically — does the form validate, does tab reach everything, are there media queries. Design and content need a human. That is why the scorecard asks you to hand one section to someone else.

Can I use it for client work?

Yes, and it is more useful there than for a portfolio, because it converts “I don’t love it” into a line item somebody can act on.

Why is accessibility only 20 points?

Because this rubric was written to grade a first web project, not to certify compliance. If your site is a public service or a business, accessibility deserves far more weight — and a proper audit, not a checklist.

What should be on a checklist before launch?

The four sections above, in this order of likely damage: does every link go where it claims, does it survive a phone, can it be operated with a keyboard alone, and does a stranger understand what the site is for within ten seconds. Across 27 real sites the last one was the easiest to pass and the first three were where the points went.

How do I evaluate someone else’s website with this?

Score it from the outside in, the way a visitor actually meets it: open it on a phone first, then a laptop; click before you read; look at the source only at the end. Scoring from screenshots inflates design and hides functionality — and functionality is the category that separated the strongest group from the weakest by 3.6×.

Next

The lowest-scoring category was functionality, and the single biggest reason is that a static page cannot remember anything. That is the next article — what changes when your site needs to store something, and what it costs you.