Front-end development · Lesson

Terms & Privacy, Decoded

Welcome! Today we open the two documents every website has and almost nobody reads. We'll see what goes inside them, what the EU, USA and Georgia require, and how front-end developers build them into the interface.

← → or Space to move · N for teacher notes

rionibooks.ge/signup

Try it: tick the box. Educational overview, not legal advice.

Part A · Slides 2–6

Terms & Conditions

The rulebook. A contract between your website and every person who uses it.

Terms of ServiceTerms of UseUser AgreementEULA

§ A.1 · Overview

Four questions every set of terms answers

Who may use it?Minimum age, countries, account rules.
What is allowed?Acceptable use, user content, copyright.
What do we promise?The service, prices, refunds, and what we don't guarantee.
What if it goes wrong?Liability limits, account bans, disputes and courts.

How do users agree?

§ A.2 · Inside the terms

What's inside the terms

Twelve standard clauses. Click a card to read it in plain words, the way a real shop would write it.

Examples use Rioni Books, a fictional bookshop in Tbilisi. “Core” clauses belong on every website; the others depend on what the site does.

§ A.3 · Standards

Rules for terms in the EU, USA and Georgia

There's no single world standard. Each region adds its own rules on top of basic contract law.

Summarised for teaching, October 2026

Rule of thumbDesign for the EU standard first; Georgia's laws follow the EU direction. Then add local extras for the USA.

§ A.4 · Front end

Building agreement into the interface

Lawyers write the terms. Front-end developers make the agreement real, provable and fair.

rionibooks.ge/signup

Consent record the server stores (example)

{
  "email": "nino@example.ge",
  "termsVersion": "2026-09-01",
  "acceptedAt": "2026-10-06T09:41:00Z",
  "method": "checkbox"
}

Front-end rules

Unchecked by default. A pre-ticked box is not agreement.
Links that look like links. Underlined, high contrast, right beside the button.
Readable without leaving. Open the terms in a new tab or a modal and keep what the user typed.
Save proof. Send the terms version and a timestamp with the request.
Version everything. “Last updated” at the top; old versions at stable URLs like /terms/2025-11-10.
Explain, don't block. A real <label>, keyboard support and an inline error instead of a silent grey button.
Ask again on big changes. Show the new terms at next login and record a fresh acceptance.

// signup.js: an agreement that holds up in a dispute
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  if (!agree.checked) {
    error.hidden = false;   // explain, don't just disable
    agree.focus();
    return;
  }
  await fetch('/api/signup', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      email: email.value,
      termsVersion: '2026-09-01',
      acceptedAt: new Date().toISOString(),
    }),
  });
});

§ A.5 · Risks

When terms are missing, vague or deleted

Pick a scenario to see what happens legally, for the business, and in front of users.

Part B · Slides 7–11

Privacy Policy

Your promises about data. A public notice that says what you collect, why, who gets it, and what rights people have.

Privacy NoticePrivacy StatementData Policy

§ B.1 · Overview

Two documents, two jobs

Question	Terms & Conditions	Privacy Policy
Job	Rules users must follow	Promises about personal data
Mainly protects	The business	The user
Required by law?	Expected for shops and platforms	Yes, once you collect any personal data
The user…	Agrees to it (a contract)	Reads it (a notice). Consent is asked separately.

Is it personal data? Vote, then click.

§ B.2 · Inside the policy

What's inside a privacy policy

Twelve sections answer every question a user or regulator will ask. Tick what a site includes to see what's missing.

§ B.3 · Standards

Privacy rules in the EU, USA and Georgia

Personal-data rules are stricter than contract rules, and the fines are bigger.

Summarised for teaching, October 2026 · Not legal advice

§ B.4 · Front end

Privacy in the browser

Every script you load is a promise in your privacy policy. Try the banner and watch what loads.

Consent banner lab

rionibooks.ge

Network · what actually loads

Live check

Front-end rules

Nothing before consent. Analytics and ad scripts wait for a clear “yes”.
Equal buttons. “Reject all” as easy to find and click as “Accept all”.
No pre-ticked boxes. One switch per purpose, all off by default.
Ask for less. Every form field needs a reason you could write in the policy.
Keep data out of URLs. No emails or IDs in query strings, logs or analytics events.
Honor signals and rights. Read Global Privacy Control; offer “Download my data” and “Delete account”.

// consent.js: trackers wait for a clear yes
const consent = readConsent(); // { analytics: false, ads: false }
if (navigator.globalPrivacyControl) {
  consent.ads = false; // treat as "Do Not Sell or Share"
}
if (consent.analytics) loadScript('/js/analytics.js');
if (consent.ads) loadScript('/js/ads-pixel.js');

§ B.5 · Spot the fake

Real site or fake site?

Fake and careless sites give themselves away in their legal pages. Judge each exhibit, then use the toolkit on real sites.

Exhibit 1 of 8Score 0

All exhibits are fictional examples.

§ C · Wrap-up

Thank you for your attention.

Questions? Let's talk.

TermsRules, written as a contract. Get a clear “I agree” and keep every version.
PrivacyPromises about data. Say what, why, who, how long, and which rights.
Front endThe proof. Honest consent UI, nothing loads before “yes”, links people can see.

One last agreement

I have read and understood today's lesson on Terms & Privacy.

Signature · the whole class

§ D · Bonus · Prompt kit

Generate your own policy with AI

Fill the highlighted placeholders with your brand's details, copy the prompt, and paste it into any AI assistant. It already asks for every section from this lesson.

Fill the highlightsBrand, business and data
Copy the promptOne click, plain text
Paste it into an AIAny AI chat assistant
Review before you publishSlide 8 checklist, then a lawyer

Your details

0 of 0 filled

privacy-policy-prompt.txt

[ PLACEHOLDER ] still to fill Your text filled by you Click a highlight to edit it.

Empty placeholders stay in [BRACKETS] and the AI is told to ask for them. An AI draft is a starting point, not legal advice.