I recently got curious about whether I could build an effective phishing awareness training platform using just HTML, CSS, and JavaScript. As cybersecurity threats continue to evolve, I wanted to explore how to create educational tools that help people recognize and avoid phishing attempts without requiring complex backend infrastructure.
Looking for the examples and demo?
Sure, you can find the website I’m talking about on this URL https://phish-learn.a6n.co.uk
Let’s take a visual look at this with some images, first the advice:
This will report as a phishing email as below:
Finally you can do a little quiz to test your knowledge, this is about learning not "catching people out"
Mapping out the workflow/concept
The goal was straightforward: create a web-based training platform that could simulate realistic phishing scenarios while being completely safe to use. The platform needed to be educational rather than deceptive, helping users develop the skills to spot malicious emails in their job.
Core Components
1. Educational Foundation
I started with a comprehensive learning section that covers the fundamental warning signs of phishing emails:
- Suspicious sender addresses and domains
- Urgent language designed to create pressure
- Unexpected attachments and suspicious links
- Generic greetings and poor grammar
The educational content uses a clean, professional design to maintain credibility and focus attention on the learning objectives.
2. Personalized Email Simulations
The most interesting component was the email simulation engine. I built a system that allows users to enter their name and email address, this was a concept I’ve seen on other fishing simulators that I wanted to replicate because it makes it more realistic this would then dynamically personalize all training emails with their information:
function updatePersonalization() {
const nameInput = document.getElementById('userName').value;
const emailInput = document.getElementById('userEmail').value;
if (nameInput) userName = nameInput;
if (emailInput) userEmail = emailInput;
// Update all email simulations
emailSimulations.forEach(email => {
email.body = email.body.replace(/Dear [^,]+,/g, `Dear ${userName},`);
email.body = email.body.replace(/Hi [^,]+,/g, `Hi ${userName},`);
email.body = email.body.replace(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g, userEmail);
});
displayCurrentEmail();
}
This personalization makes the training feel more realistic. When users see their actual name and email address in a phishing simulation, it demonstrates how attackers might use publicly available information to make their attempts more convincing.
3. Real World Email Examples
I created six different email scenarios that represent common phishing patterns - this is more about spotting the signs then catching people out.
Each example includes detailed analysis explaining why it should be trusted or flagged as suspicious.
4. Email Navigation System
The simulation includes a navigation system that lets users move through the examples casually:
function displayCurrentEmail() {
const email = emailSimulations[currentEmailIndex];
const container = document.getElementById('email-container');
container.innerHTML = `
<div class="email-simulation">
<div class="email-header">
<strong>From:</strong> ${email.from}<br>
<strong>To:</strong> ${userEmail}<br>
<strong>Subject:</strong> ${email.subject}
</div>
<div class="email-body">
${email.body}
</div>
</div>
`;
}
The interface shows "Email 1 of 6" and provides Previous/Next buttons, making it easy to compare different examples and review specific scenarios.
5. Interactive Analysis
Each email includes an "Analyze This Email" button that reveals detailed breakdowns of suspicious elements. For phishing emails, the analysis highlights red flags like:
- Domain misspellings (paypaI vs paypal)
- Urgent language and threats
- Requests for sensitive information
- Generic signatures
For legitimate emails, the analysis explains positive indicators like proper domains, professional tone, and lack of pressure tactics.
I did not see the point of turning this into her correct or incorrect quiz more the understanding needs to be there.
6. Knowledge Assessment
The platform includes a quiz component with progress tracking:
function selectAnswer(questionNum, answer, isCorrect) {
const questionDiv = document.querySelectorAll('.quiz-question')[questionNum - 1];
const options = questionDiv.querySelectorAll('.quiz-option');
options.forEach(option => {
if (option.textContent.startsWith(answer)) {
option.classList.add(isCorrect ? 'correct' : 'incorrect');
}
});
if (isCorrect && !questionDiv.classList.contains('answered')) {
currentScore++;
answeredQuestions++;
updateScore();
}
}
The quiz provides immediate feedback and tracks the user responses based on a red or green box, no pass scores no certificates no achievements that is not what this is about!
Conclusion
This experiment proved that effective phishing awareness training doesn't require complex infrastructure. With careful attention to educational design and realistic scenarios, a simple web application can provide valuable cybersecurity training that helps people protect themselves and their organizations.
The key insight is that good security training focuses on building understanding rather than just testing knowledge. By showing users how to analyze emails critically and explaining the reasoning behind security decisions, we can create more resilient human defenses against social engineering attacks.