CyberBridge education

Inspiration

CyberBridge was inspired by the idea that cybersecurity education should not only be available to people who can pay for courses, already know professionals, or understand technical language. Many people use technology every day, but they may not know how to protect themselves from phishing, weak passwords, scams, privacy risks, or unsafe online habits.

For the hackathon prompt "Bridge," we wanted to build something that bridges a real gap: the gap between cybersecurity professionals and people who need free, practical cyber education. Instead of making a normal learning website, we focused on creating a community-based platform where mentors, workshops, and learning paths all work together.

What it does

CyberBridge is a free cybersecurity education and mentorship web app. It connects learners with volunteer cyber mentors, beginner-friendly learning paths, free workshops, and a help request form.

The app includes:

A homepage explaining the mission of CyberBridge
Free learning paths for cyber hygiene, phishing protection, privacy, and cyber careers
A volunteer mentor directory
A mentor matching tool based on what the learner needs help with
A free workshop board
A cyber help request form
A final flag reveal for the hackathon challenge

The goal is to make cybersecurity education feel more accessible, personal, and useful.

How it connects to "Bridge"

We interpreted "Bridge" as an access bridge. CyberBridge connects:

Cybersecurity professionals to learners
Free education to people who may not have access
Basic cyber hygiene to real-world online safety
Mentorship to people trying to enter or understand cybersecurity
Confusing technical topics to simple explanations

The main idea is that CyberBridge helps people cross from not knowing how to stay safe online to having support, resources, and guidance.

How we built it

We built CyberBridge as a front-end web app using:

HTML for the structure
CSS for the design and layout
JavaScript for interactivity

The JavaScript powers the mentor directory, mentor matching system, learning path messages, help request form, and final flag reveal. We used an array of mentor objects with names, roles, skills, and bios. When a user selects what they need help with, the app searches through the mentors and suggests someone who matches that topic.

Challenges we faced

One challenge was making the project creative while still keeping it realistic enough to build during the event. Our first idea was more like a basic cybersecurity quiz, but we realized that was too simple and did not fully use the prompt. We changed the idea into a larger access-focused platform that connects learners and mentors.

Another challenge was deciding what features to include without making the project too big. A full version would need real accounts, databases, scheduling, and messaging, but for the hackathon we focused on creating a strong prototype that clearly shows the idea.

We also had to make sure the project was easy to explain in a short demo. Since judging depends on creativity, impact, execution, and presentation, we focused on building features that clearly support the mission of bridging the cyber education gap.

What we learned

We learned how important it is to connect a project clearly to the prompt. A good hackathon project does not have to be the most complicated one, but it should have a strong idea, a clear problem, and a working demo.

We also learned more about using JavaScript to make a website interactive. Instead of only making a static page, we added mentor matching, dynamic mentor cards, form responses, and interactive buttons.

Most importantly, we learned that cybersecurity education is not just about technical skills. It is also about access, communication, mentorship, and helping people stay safe in the real world.