Branched Digital Security

Students:

1. Egecan Akincioglu

Mentor:

• Ermira Idrizi

Tetovo, 2025

---

Table of Contents

1. Introduction
2. Problem Statement and Proposed Solution
3. Project Objectives
4. Target Audience
5. Website Content Strategy
6. Template and Design
7. Tools and Technologies
8. Implementation Plan
9. Innovation and Community Impact
10. Website Accessibility and SEO Considerations
11. Testing and Validation
12. Conclusions and Future Recommendations
13. References

---

1. Introduction

The aim of this project is to promote safe behavior online and encourage individuals to use the internet consciously and securely.

In this project:

• HTML was used to create the skeleton and layout structure.
• CSS was used to add design and visual styling.
• JavaScript added dynamic features such as getting the current date, theme switching, hamburger menu for mobile devices, and loading components in a modular way.

---

2. Problem Statement and Proposed Solution

The main security issue addressed in this project is password safety. Many users still rely on weak passwords, exposing themselves to cyber threats.

Our website presents informative content to raise awareness and provide guidance. It represents a corporate-style digital security company that educates users about safe password creation, showcases the company’s identity and success, and features a simulated security quiz along with sections on device safety, phishing protection, and password exercises.

---

3. Project Objectives

• Create a user-friendly and informative digital security awareness website
• Provide security tips and an interactive quiz for users
• Ensure a fully responsive design for all devices
• Build a professional and trustworthy visual theme

---

4. Target Audience

This site is intended for everyone—young or old, male or female. It aims to make the general public more conscious and secure internet users.

---

5. Website Content Strategy

The website includes:

• Informative articles
• Security tips
• Password exercises
• Phishing protection guides
• An interactive quiz called "Test Yourself"
• Corporate pages: About, Privacy Policy, Terms of Use, Contact

Content is structured to engage users and is built with future updates and management in mind.

---

6. Template and Design

• Logo and color palette were designed using Adobe Photoshop.
• Footer and navbar were hand-drawn during the planning phase.
• Templates and overall layout follow a corporate and professional theme.

---

7. Tools and Technologies

• Code Editor: Visual Studio Code
• Testing Environment: Live Server
• Version Control: GitHub
• Graphic Tools: Adobe Photoshop, Canva
• Languages Used: HTML5, CSS3, JavaScript

---

8. Implementation Plan

• The site was developed using HTML, CSS, and JavaScript.
• Responsive design achieved with @media queries.
• Cross-browser compatibility was tested (Chrome, Brave, Opera, Safari).
• Interactive features include a mobile-friendly hamburger menu and theme toggle.
• Modular component structure implemented.

---

9. Innovation and Community Impact

This website aims to make online safety a daily habit. As a result, users can behave more cautiously across platforms, reducing the risk of scams and fraud.

---

10. Website Accessibility and SEO Considerations

Accessibility and discoverability were improved using:

• WCAG-compliant HTML tags
• Semantic structure
• Meta tags such as keywords, description, author, and robots
• Alt attributes for images

---

11. Testing and Validation

Every element of the site was tested locally via Live Server during development. Layout, responsiveness, and interactions were continuously monitored.

---

12. Conclusions and Future Recommendations

Most improvement occurred in CSS skills during this project. If further developed:

• A backend using TypeScript or Java could be added
• An admin panel for content management could be implemented
• A user registration/login system with database integration could be introduced

---

13. References

Below is the complete list of sources used:

• DeepSeek - JavaScript Module importing and Use in HTML
• ChatGPT - linear-gradient
• W3Schools - CSS Transitions
• FontAwesome - Icons
• W3Schools, MDN Web Docs - CSS Transform
• JavaScript.info - Export and Import with JavaScript ES6
• W3Schools, ChatGPT, DeepSeek, Claude Sonnet 3.5, GeeksforGeeks - JavaScript Fetch API
• W3Schools, ChatGPT, DeepSeek, Claude Sonnet 3.5, GeeksforGeeks - JavaScript module script importing
• W3Schools, EloquentJavaScript - JavaScript HTML DOM Document
• W3Schools - JavaScript Get Date Methods
• MDN Web Docs - JavaScript import
• MDN Web Docs - Element: innerHTML property
• GeeksforGeeks, CSS Tricks - CSS justify-content
• ChatGPT, CSS Scan - CSS box-shadow
• ChatGPT, MDN Web Docs, W3Schools - CSS z-index
• CSS Tricks, W3Schools, Claude Sonnet 3.5 - CSS Flex Container & Flex Direction
• GeeksforGeeks, CSS Tricks - CSS Flex Wrap
• W3Schools - CSS Max Min Width
• W3Schools - CSS Class Selector
• MDN Web Docs, W3Schools, GeeksforGeeks, ChatGPT - TranslateY() Function
• MDN Web Docs, ChatGPT - CSS Gap method
• GeeksforGeeks, W3Schools - CSS Position and Sticky
• W3Schools, MDN Web Docs - CSS Text decoreation
• W3Schools - HTML Section Elements
• W3Schools - HTML Main Element
• Stack Overflow, W3Schools, GitHub - CSS @import Rule
• MDN Web Docs, Stack Overflow, GitHub - @keyframes Rule
• W3Schools - CSS Opacity
• MDN Web Docs - CSS Box Sizing
• W3Schools, MDN Web Docs - CSS scroll behavior properity
• MDN Web Docs - CSS inherit
• MDN Web Docs, W3.org - Intersection Observer API
• SmartBear, W3Schools, GeeksforGeeks - QuerySelector Method (Page Objects)
• W3Schools, DeepSeek, ChatGPT, GitHub, Stack Overflow - Arrays & forEach()
• MDN Web Docs - IntersectionObserver: unobserve() method
• MDN Web Docs - IntersectionObserver: observe() method
• MDN Web Docs - IntersectionObserver: thresholds property
• Conductor, ChatGPT, W3Schools - HTML SEO and Meta Elements
• MDN Web Docs, W3Schools, ChatGPT - HTML viewport
• ChatGPT - HTML Favicon adding
• SmartBear, W3Schools, GeeksforGeeks - JavaScript .querySelectorAll()
• Stack Overflow, Overleaf, ChatGPT - CSS * {} Styling
• MDN Web Docs, W3Schools, Stack Overflow - CSS Variables
• MDN Web Docs, W3Schools - CSS :root {}
• MDN Web Docs, W3Schools - CSS ::after & ::before
• MDN Web Docs, W3Schools - CSS Content Element
• MDN Web Docs, W3Schools, CSS Tricks - CSS @media queries
• W3Schools - CSS line-height
• W3Schools - CSS rgba() function
• CSS Scan, W3Schools, MDN Web Docs - CSS box-shadow
• Stack Overflow, Github - CSS input[type='radio']
• W3Schools, MDN Web Docs - CSS relative position
• Stack Overflow, Github - CSS button[type='submit']
• MDN Web Docs - CSS :focus using

Note: The texts on the site were written using translation and ChatGPT support to appear professional.