SafeTrace

SafeTrace is a web-based digital footprint assessment tool that helps users understand online exposure. Users complete a checklist and receive a visual risk score with security recommendations.

Comment

Inspiration

We were inspired by the theme for HackHer and how common online scams and hacked accounts have become, especially for students and young people. A lot of people don’t get taught how to stay safe online, and when something goes wrong, they don’t know what to do. We wanted to create a project that spreads awareness and gives people easy tools and resources to protect themselves. Many teenagers who are applying for jobs get scam messages and fake interview calls.

What it does

TraceSafe has different sections that focus on online safety. The Dashboard encourages users to think before clicking suspicious links. The Education page gives tips about passwords, phishing, and privacy, and includes a small quiz to test what you learned. The Emergency page provides hotline numbers and step-by-step advice for what to do if you get hacked or scammed. Overall, it’s meant to be a helpful safety guide all in one place.

How we built it

We built TraceSafe using basic web development languages: HTML, CSS, and JavaScript. Since we are beginner coders, we focused on keeping everything organized and simple. We created separate HTML pages for each section (Home, Dashboard, Education, and Emergency) so the site would be easy to navigate. We used CSS to design the pink theme, style the cards, add hover effects, and make the site look more modern. We kept all the styling in one file (style.css) so it would apply consistently across every page. We also experimented with spacing, shadows, and rounded corners to make it look cleaner and more professional. For interactive parts like the quiz and buttons, we used JavaScript in a separate script.js file. The quiz checks if the user selected the correct answer and then displays feedback. Since we’re still learning, we kept the JavaScript simple and focused on making sure it worked correctly instead of adding overly complicated features. We tested everything in our browser as we built it to make sure links, icons, and pages loaded properly. After that, we uploaded the files to GitHub and used GitHub Pages to publish the site online. We ran into some small issues with file structure and images not loading, but we fixed them by organizing everything in the main folder (root) and double-checking our file paths. As beginner developers, this project helped us understand how websites are structured and how design, functionality, and deployment all work together.

Challenges we ran into

As beginner coders, we faced a lot of challenges while building TraceSafe. One of the hardest parts was understanding how all the files connect to each other. At first, our CSS and JavaScript weren’t working properly because the file paths were wrong or the files weren’t in the correct folder. We also struggled with GitHub Pages — sometimes the website wouldn’t update, images wouldn’t load, or pages would break because of small mistakes in the code. Another challenge was debugging. Even a tiny typo, like a missing bracket or quotation mark, could stop everything from working. It was frustrating at times, especially when the design suddenly looked different or icons disappeared. Since we are still learning, we had to go step-by-step, test frequently, and fix problems one at a time. However, these challenges helped us understand how websites actually function behind the scenes. We learned how important organization, patience, and careful testing are in coding. Even though it was difficult at times, solving those problems made us more confident and improved our skills as beginner developers.

Accomplishments that we're proud of

One of our biggest accomplishments was successfully finishing TraceSafe on time. As beginner coders, this project felt overwhelming at first, but we stayed consistent and worked through the problems step by step. We’re proud that we were able to build a fully working, multi-page website with design, and interactivity. Another accomplishment was learning how to use GitHub which made the project feel real and professional. We’re also grateful for the opportunity to create something meaningful that spreads awareness about online safety. Completing this project boosted our confidence and showed us that even as beginners, we can build something impactful with dedication and teamwork.

What we learned

Through building TraceSafe, we learned a lot about coding and how websites actually work behind the scenes. We learned how HTML structures a website, how CSS controls the design and layout, and how JavaScript adds interactivity like quizzes and buttons. We also learned the importance of organizing files properly, especially when using GitHub Pages, because even small file path mistakes can break the whole site. Beyond technical skills, we learned problem-solving and debugging techniques. We realized that coding requires patience, attention to detail, and testing frequently. Small errors like missing brackets or incorrect links taught us to slow down and carefully review our work. Overall, this project helped us grow from beginners into more confident coders, and it gave us real experience building and publishing a complete project from start to finish.

What's next for TraceSafe

In the future, we would like to expand TraceSafe by adding more advanced features and improving the user experience. One idea is to create a real URL scanner that actually analyzes links instead of just giving general advice. We would also like to add user accounts so people can track their quiz progress and learning over time. Another improvement would be making the website fully responsive for mobile devices, since many people access the internet from their phones. We also hope to add more educational content, including videos, real scam examples, and possibly interactive simulations to make learning more engaging. As we continue learning more coding skills, we want to improve the design, add stronger security features, and possibly turn TraceSafe into a larger digital safety platform that could help schools and communities stay informed about online risks.

Share this project:

Updates