Inspiration
I was inspired to create this project because a lot of people, especially students and the elderly, aren’t fully aware of how to stay safe online. Weak passwords and online scams are some of the most common ways that personal information gets stolen.
I wanted to make something simple but meaningful—something that could educate users on creating strong passwords and raise awareness about online scams, helping them feel safer in their everyday digital lives.
What it does CyberShield is a beginner-friendly website that teaches users how to create strong passwords and avoid common online scams.
The site includes:
A Password Safety section that explains how to build secure passwords.
A Password Generator that helps users instantly create strong, random passwords.
A Scam Awareness section that shares real examples and practical tips to spot phishing attempts.
The goal is to combine learning with interactive tools to help people improve their digital security habits.
How we built it
CyberShield was built with a clean HTML + CSS front end and a Python (Flask) backend.
Flask powers the navigation and routing between the main menu, password generator, and scam awareness pages.
The password generator uses Python’s string and random modules to build strong passwords based on user-selected criteria.
The UI uses GSAP for floating icon animations and an animated gradient hero background inspired by Render.com’s modern landing pages.
ScrollReveal is used to animate cards and sections as the user scrolls, creating a polished, professional feel.
This mix of Flask and front-end animation tools allows for a lightweight but dynamic site that works across browsers without relying on heavy JavaScript frameworks.
Challenges we ran into
One of the main challenges was configuring the Render server which is the service that I am using to host my Flask app.
Another challenge was integrating the password generator with the HTML front end. Passing user-selected password lengths through forms with the POST method, and then displaying the generated password on the page, required careful handling of routes, form data, and template variables.
I also faced some HTML layout and navigation issues, like creating a functional “Back” button across multiple pages and keeping the site structure clean. These required trial and error since I was new to web development and HTML
Accomplishments that we're proud of Accomplishments that we're proud of
Successfully built a beginner-friendly interactive website using Python (Flask) and HTML that teaches users about password safety and scam awareness.
Implemented a working password generator that creates secure passwords of varying lengths.
Designed clear, user-friendly navigation, including a main menu, generator page, and scam awareness content.
Made the project accessible and simple to use, ensuring anyone can benefit without prior tech knowledge.
What we learned
Learned how to connect Python with HTML using Flask, including handling routes, forms, and session management.
Gained experience in passing data dynamically from the server to templates, like generating and showing passwords.
Improved understanding of basic web development concepts, including forms, hyperlinks, buttons, and page navigation.
Solved real-world problems like port conflicts, server errors, and template debugging, which gave valuable insight into deploying a web application.
What's next for CyberSheild Add interactive quizzes to test users on password safety and scam recognition.
Enhance the password generator with options to customize symbols, uppercase/lowercase letters, and memorability features.
Expand the scam awareness content with real-time examples or links to current scam alerts.
Possibly add an optional account system (secure, local storage) so users can save tips or favorite passwords without storing sensitive data directly.
Make the site mobile-friendly and improve the UI for a smoother user experience.
Built With
Log in or sign up for Devpost to join the conversation.