A free making workshop that supports the Reflektif journeyDiscover Reflektif
İlkPortfolyo.
Back to briefs

Software / Beginner

Accessible event registration front end

Build a small registration interface for a fictional student club event. Focus on clear feedback, keyboard flow, and an accessible first step without building a backend.

Start with this briefExample submissions

First 30 minutes

Before you start

Basic HTML and CSS knowledge is honestly required. You do not need a backend, login, or personal data. If coding is not your starting point, choose the design or communication brief instead.

First 30 minutes

On paper, list the fields and states for a student-club event attendance form. Then sketch an HTML structure with an empty screen, an invalid-input screen, and a filled screen.

A sufficient small-scope submission

  • A Git repository or code file shows the front end.One HTML or CSS code file
  • Screenshots show the empty, invalid, and completed form states.Empty, invalid, and filled screen states
  • A note records keyboard and narrow-screen testing.A note about keyboard use and a narrow screen
  • A README explains decisions and limitations.A README with decisions and boundaries

Extend it if you want

Add one optional form state, such as a duplicate entry or a canceled event, and explain why you added it.

Example file layout

  • club-attendance.html
  • states.md
  • accessibility-notes.md
  • README.md

Example presentation

This hypothetical student example shows a small front end for recording attendance at a student-club event. The student sketches an empty state, an invalid date or name state, and a filled state before building one simple HTML/CSS screen. The README explains that there is no backend, login, or personal data, and notes the keyboard and narrow-screen decisions. The presentation pairs screenshots with a short decision log so a reader can see what was tried and limited. It is a format example, not a completed real project, client work, research finding, or performance claim.

Representative concept example; not real client work or your personal work. Learn the format and write your own decisions.

A starter template is not a completed submission. Produce your own evidence.

01Scenario

Imagine a student club preparing a sign-up page for a fictional campus event. The club needs a simple front end that works with synthetic names only, and no real personal data should be collected.

Goal

Create a responsive registration flow with empty, invalid, and completed form states. Explain the choices that help a person understand what to do and what happened after each action.

02Scope and limits

  • Build the front end only; do not create a backend or connect a real data service.
  • Use fictional names and sample details instead of real personal information.
  • Cover empty, invalid, and completed states plus a keyboard path on a narrow screen.

03Production steps

  1. 1

    Define the fictional event, fields, messages, and a short success state.

  2. 2

    Sketch the three form states and the keyboard path before coding.

  3. 3

    Build the responsive front end with visible focus, labels, and useful validation messages.

  4. 4

    Test the flow on a narrow viewport and document decisions, gaps, and next steps.

04Evidence to submit

  • A Git repository or code file shows the front end.
  • Screenshots show the empty, invalid, and completed form states.
  • A note records keyboard and narrow-screen testing.
  • A README explains decisions and limitations.

05Ask yourself

  • Can a keyboard user tell where they are and what to fix?
  • Which form message is clearest, and why?
  • What would require a backend or real data before launch?

06Sources and licensing

Use code, icons, and other materials that you created or that have a suitable open license. Record the license name and source URL for every outside item. Note any team or AI contribution, and never assume a random internet image is openly licensed.

Read the ethical presentation guide