Security training pages often become harder to maintain than they need to be. A small internal learning site may not need a framework, a database, or a build pipeline. It needs clear content, a few interactive checks, and a local workflow that people can inspect before the site is hosted.
This tutorial uses Guardiões da Segurança Digital, a public static project by Fernando Paladini. The repository contains one HTML document, one JavaScript file, one stylesheet, and a license file. Its documented scope is security awareness: fundamentals, asset protection, threats, defensive habits, compliance topics, and an interactive quiz.
The goal is practical: clone the repository, serve it locally, verify the page and its assets, and understand what the code does before adapting it for a team. The result is a local training site that can be reviewed without installing a JavaScript package.
TL;DR
Clone the repository, run Python's built-in static server from the project root, and open http://127.0.0.1:8000. The page loads index.html, script.js, and style.css directly. The quiz state lives in the browser, so this project does not collect answers or provide a server-side training record.
Prerequisites
You need:
- Git
- Python 3, only for the local HTTP server
- A modern browser
- A terminal with permission to create a temporary local checkout
There is no package.json, dependency lockfile, bundler, or database in the current main branch. The repository does not publish a tagged release, so the commands below target the current documented branch rather than a versioned package.
1. Clone and serve the project
Use a temporary directory when reviewing the project. This keeps the experiment separate from any local source tree.
git clone https://github.com/paladini/guardioes-da-seguranca-digital.git
cd guardioes-da-seguranca-digital
python3 -m http.server 8000 --bind 127.0.0.1
Open http://127.0.0.1:8000 in your browser. The repository's actual root contains index.html, script.js, and style.css, so serve the root directory. The README currently shows an older ad1 path and a different clone name. The root layout is the reliable example for the current main tree.
Python's http.server module is convenient for local review, not a production deployment. Python's own documentation warns that it implements only basic security checks. Bind it to 127.0.0.1 when you only need local access.
Stop the server with Ctrl+C when the review is complete.
2. Check the static application boundary
The page is intentionally easy to inspect. The HTML document defines the learning sections and the quiz container. The stylesheet provides the responsive layout, visual states, focus styles, and a reduced-motion media query. The JavaScript file initializes navigation, smooth scrolling, information modals, the quiz, and accessibility-related behavior.
You can confirm the asset links without opening developer tools:
curl -I http://127.0.0.1:8000/
curl -I http://127.0.0.1:8000/script.js
curl -I http://127.0.0.1:8000/style.css
Each request should return an HTTP success response while the local server is running. This checks delivery of the three files, not the quality of every visual or keyboard interaction.
The project also links to external Font Awesome and Google Fonts assets from the HTML document. That means the page is source-local but not completely network-independent in its default presentation. If the browser cannot reach those hosts, the core HTML, CSS, and JavaScript still provide the application structure, but icons or typography can look different.
3. Walk through the learning flow
The current page exposes sections for an introduction, security fundamentals, assets, threats, defense, and a quiz. The README describes ten quiz questions with immediate feedback. The JavaScript implements a start action, question display, option selection, feedback, next-question navigation, results, and restart behavior.
Review the page in this order:
- Confirm that the main navigation reaches each section.
- Open an information modal and close it with the visible control.
- Start the quiz and select an option.
- Confirm that the selected option receives a visual state and feedback appears.
- Continue until the result screen, then use the restart action.
- Repeat the flow with keyboard navigation and with reduced motion enabled in the browser or operating system.
This is a useful review pattern for static training content because it separates content delivery from interaction behavior. A page can look complete while a keyboard user cannot reach the same controls. Test both paths before sharing the URL with a team.
4. Verify the result reproducibly
For a lightweight smoke check, verify the files and the local response from the same checkout:
test -f index.html && test -f script.js && test -f style.css && test -f LICENSE
curl -fsS http://127.0.0.1:8000/ | grep -q "Guardiões da Segurança Digital"
curl -fsS http://127.0.0.1:8000/script.js | grep -q "startQuiz"
curl -fsS http://127.0.0.1:8000/style.css | grep -q "prefers-reduced-motion"
printf 'static smoke check passed\n'
On Windows PowerShell, the equivalent checks are:
Get-Item index.html, script.js, style.css, LICENSE
$html = Invoke-WebRequest http://127.0.0.1:8000/ -UseBasicParsing
$html.StatusCode
$html.Content.Contains('Guardiões da Segurança Digital')
The expected result is a 200 response and True for the title check. These checks do not replace manual browser testing, but they make the minimum path repeatable after a clone or a content change.
Why this architecture works for a small training site
The useful property is not that the project uses a particular framework. It is that the learning path is visible in ordinary web files. Content editors can find the HTML sections, visual changes stay in CSS, and interaction logic stays in JavaScript. There is no build output to regenerate and no package installation step that can hide the source of a behavior.
That simplicity also keeps the local review cheap. A reviewer can run the site with a standard Python installation, inspect the network requests, and disconnect the server without leaving a background service or a database behind. For a short awareness exercise, that is often enough.
The tradeoff is that the project has no built-in account system, progress persistence, analytics, content management interface, automated accessibility report, or server-side assessment. Treat it as a static learning resource, not as a compliance evidence platform.
Failure modes and security boundaries
The page is blank or scripts do not run
Check that the server is running from the repository root. Do not serve the parent directory and assume the browser will find the assets. Then inspect the browser console and confirm that the relative script.js and style.css requests return success responses.
The page looks different offline
The HTML references external Font Awesome and Google Fonts URLs. Offline use can therefore change icons and fonts. If the environment must work without a network connection, replace those assets with locally reviewed equivalents and test the resulting page.
The local server is exposed beyond the workstation
Use --bind 127.0.0.1 for a local review. Do not treat python3 -m http.server as an authenticated or hardened production server. If the content needs public hosting, use a deployment service with an appropriate security and caching configuration.
The license information is inconsistent
The README displays an MIT badge, but the current repository LICENSE file contains the GNU General Public License, version 3 text. Resolve that discrepancy with the project owner before redistributing modified copies or presenting the project as MIT-licensed. The license file, not a badge, is the source that needs legal review here.
FAQ
Does this project need Node.js?
Not for the documented local path. The current tree is a static HTML, CSS, and JavaScript site, and the smoke test uses Python's standard HTTP server.
Does the quiz store participant results?
No server-side storage is documented or present in the reviewed files. The interaction is browser-local and should not be described as an attendance or compliance record.
Can I publish it as-is for employee training?
Review the wording, external assets, accessibility behavior, privacy requirements, and license discrepancy first. Educational content about security is not a substitute for an organization's policies or professional security guidance.
Takeaway
A useful security awareness prototype can be a small, inspectable static site. Start the current repository from its root, verify the three delivered assets, test the quiz with both mouse and keyboard, and keep the local server bound to localhost. Before redistribution, correct the README-versus-license mismatch and decide whether a static quiz is enough for your evidence and privacy needs.
What would you add first to this static training flow: a content review workflow, a formal accessibility test, or an opt-in progress record with a clear privacy policy?
AI assistance disclosure: AI helped organize and edit this tutorial. The repository files, commands, license discrepancy, and local smoke-test result were checked against the cited primary sources before publication.
Top comments (0)