Project: Secure form page
Overview of the 5-lesson project: a security-focused form page.
Project: Secure Bank sign-in page
In this 5-lesson project you'll build the Secure Bank customer sign-in page from scratch. Each lesson adds one security piece, and the final lesson completes an accessible sign-in form.
You'll use these techniques:
- HTML5 document skeleton and core
headtags - External link with
target="_blank"andrel="noopener noreferrer" - CSP via
meta http-equiv="Content-Security-Policy" - Referrer control with
meta name="referrer" - Accessible form:
label+input+button
Ready? Let's start.
Project roadmap
Each lesson adds one piece, and the next lesson's starting code contains the previous lesson's solution. The page grows step by step.
- Lesson 1: Empty skeleton and title
- Lesson 2: External help link and
rel - Lesson 3: CSP meta tag
- Lesson 4: Referrer policy meta tag
- Lesson 5: Sign-in form and final check
You can't skip a lesson; the starting code chain is cumulative.
What will the target page contain?
The target page is a bank sign-in screen. At the top the bank name and a short instruction; below an external help link and the sign-in form.
Three security layers work in the background: rel="noopener noreferrer" isolates the external link, CSP blocks scripts from untrusted sources, and referrer policy limits origin leakage on cross-origin requests. These are invisible but critical layers; the browser checks them even if the user doesn't see them.
In the final lesson we'll combine everything and add the form.
Exercise Start with the empty skeleton and title
To start the project, write the HTML5 skeleton. It should contain:
<!DOCTYPE html><html lang="en">- Inside
<head>: meta charset=utf-8, viewport (width=device-width, initial-scale=1), and title with content Secure Bank - Sign in - Inside
<body>: h1 with content Secure Bank and a p instruction paragraph (e.g. "Please sign in with your user code.")
Show example solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Secure Bank - Sign in</title>
</head>
<body>
<h1>Secure Bank</h1>
<p>Please sign in with your user code.</p>
</body>
</html>Test yourself
-
In this project, what does lesson 2's starting code usually contain?
- Lesson 1's solution and a short comment for lesson 2's new piece
- A completely empty page
- Only the DOCTYPE line
- Only the new piece added in lesson 2
Show answer
Lesson 1's solution and a short comment for lesson 2's new piece — Correct. The starting code carries the previous solution, so the page grows step by step.
-
Match each lesson to the piece it adds
- Lesson 1
- Empty skeleton and title
- Lesson 2
- External help link
- Lesson 3
- CSP meta tag
- Lesson 4
- Referrer policy meta
- Lesson 5
- Sign-in form