Rolling Thunder Security/ Tools/ Getting Started Guide
Beginner Walkthrough

Building Your First Password Checker

New to programming? This guide walks you through the languages, tools, and thought process behind building a password strength meter from scratch. No prior coding experience assumed.

1. The Three Languages You'll Use

Every web page you visit is built with three technologies working together. Your password checker will use all three in a single file:

HTML (HyperText Markup Language)

HTML is the structure of your page. It defines what things are: headings, paragraphs, text input boxes, buttons, and areas where results will appear. Think of it as the skeleton of a building—it establishes what exists and where.

CSS (Cascading Style Sheets)

CSS is the appearance. It controls colors, fonts, spacing, and layout. If HTML is the skeleton, CSS is the paint, wallpaper, and furniture. Your password checker needs to look clear and readable, but it doesn't need to be a design masterpiece.

JavaScript (JS)

JavaScript is the behavior—the part that makes things happen. When a user types a password and your page evaluates it, that's JavaScript doing the work. This is where your scoring logic lives: counting characters, checking for patterns, and deciding whether a password is weak or strong.

Key Insight

All three languages go in one single .html file. You don't need to set up a server, install software, or configure anything. Just a text editor and a web browser.

2. What You Need Before Starting

A Text Editor

You need something that saves plain text files (not Microsoft Word). Any of the following work:

A Web Browser

Chrome, Firefox, or Edge. You'll open your .html file directly in the browser to test it. No server setup needed for development.

Your Lab VM

For final submission, your file needs to be hosted on your lab VM so the grader can visit it via URL. You'll place your file in the web server's directory (typically /var/www/html/ on Apache).

3. Learning Resources

You don't need to master these languages—you need enough to build one page. Here are the best starting points:

For HTML Basics

MDN: Introduction to HTML
Mozilla's official guide. Start here for understanding tags, elements, and page structure.
W3Schools: HTML Tutorial
Short, interactive examples. Good for quick reference on specific tags like <input> and <button>.

For CSS Basics

MDN: CSS First Steps
Learn how to change colors, fonts, and spacing. Focus on the "Getting started" and "How CSS is structured" pages.
W3Schools: CSS Tutorial
Concise examples of colors, backgrounds, and borders. Skip the advanced layout sections for now.

For JavaScript Basics

MDN: JavaScript First Steps
Focus on "What is JavaScript?", "Variables", and "Strings". These are the core concepts you'll use.
JavaScript.info: Fundamentals
Clean, modern explanations. The "Variables", "Strings", and "Comparisons" sections are most relevant.
W3Schools: String Methods
You'll be checking what characters are in a password. This page shows you how to examine strings in JavaScript.

For Password-Specific Concepts

NIST SP 800-63B
The actual authentication standard your checker should align with. Section 3 covers password requirements.
MDN: Regular Expressions
Regex lets you search for patterns in text (like "does this contain a number?"). Useful for Tier 2+.

4. Thinking Through the Problem

Before writing any code, think about what your program needs to do. A password checker is actually a simple concept:

  1. Accept a password from the user (input)
  2. Analyze the password against some criteria (processing)
  3. Display a score or rating (output)

That's it. The complexity comes from deciding what criteria to check and how to score them. For the Basic tier, you only need two things: how long is it, and what kinds of characters does it use?

5. Pseudocode: Planning Your Checker (Basic Tier)

Pseudocode is a way of writing your logic in plain English before translating it to a programming language. Here's how to think about the Basic tier password checker:

1

Set Up the Page Structure

// Think about what the user sees on the page: PAGE contains: A heading that says what this page is A text input box where the user types a password A button to trigger the check (OR check as they type) An area to display the result (score, label, maybe a color bar)
2

Listen for the User's Action

// When should the checking happen? WHEN the user types in the input box (or clicks a button): Get the text they typed Send that text to your scoring function Display the result in the output area
3

Measure the Password Length

// Length is the single most important factor in password strength. // Decide: how many points is length worth? How do you scale it? FUNCTION calculateLengthScore(password): length = number of characters in password IF length is very short (less than some minimum): length score is low (or zero) ELSE IF length is moderate: length score is medium ELSE IF length is long: length score is high // Think: what thresholds make sense? // NIST says 8 is the minimum. Longer is always better. RETURN length score
4

Check Character Diversity

// What kinds of characters does the password contain? // More variety = harder to guess. FUNCTION calculateDiversityScore(password): has lowercase = does password contain any a-z? has uppercase = does password contain any A-Z? has digits = does password contain any 0-9? has symbols = does password contain anything else? (!@#$, etc.) // Award points for each category present diversity score = 0 IF has lowercase: add points IF has uppercase: add points IF has digits: add points IF has symbols: add points RETURN diversity score
How do you check if a password contains lowercase letters?

In JavaScript, you can loop through each character and check if it falls within a range, or you can use a regular expression (regex). A regex like /[a-z]/ tests whether any lowercase letter exists in the string. Search "JavaScript regex test method" to see how this works.

5

Combine the Scores

// Bring your sub-scores together into one final score. FUNCTION checkPassword(password): score = 0 score = score + calculateLengthScore(password) score = score + calculateDiversityScore(password) // Optional: cap the score at a maximum (like 100) // Optional: if password is too short, cap the total score low RETURN score
6

Display the Result

// Turn the numeric score into something meaningful for the user. FUNCTION displayResult(score): Show the numeric score on the page IF score is below some threshold: Label = "Weak", color = red ELSE IF score is in the middle range: Label = "Moderate", color = yellow ELSE: Label = "Strong", color = green Update the output area with the label and color
Important

The pseudocode above is a guide for your thinking, not copy-paste code. You need to decide the specific point values, thresholds, and how to translate this logic into actual JavaScript. The reference demos on this site show what the end result should look like—not how to build it.

6. JavaScript Concepts You'll Need

You don't need to learn all of JavaScript. For the Basic tier, here's what to look up:

Pro Tip

Open your browser's Developer Tools (F12 or right-click → Inspect → Console tab). You can type JavaScript directly in the Console to experiment. Try typing "hello".length and pressing Enter—you'll see 5. This is a great way to test ideas before putting them in your file.

7. How Your File Should Be Organized

Your entire password checker lives in one .html file. Here's the general layout (not code—just the structure):

<!-- The document declaration and opening tags --> TOP OF FILE: Document type declaration Opening html tag with language attribute Head section (title, character set, any CSS styles) Opening body tag VISIBLE PAGE CONTENT: A heading A text input for the password An area where results will appear (starts empty) JAVASCRIPT (at the bottom, before closing body tag): Your scoring functions Code that listens for user input Code that updates the result area BOTTOM OF FILE: Closing body and html tags
Why put JavaScript at the bottom?

The browser reads your file from top to bottom. If your JavaScript tries to find the input box before the browser has read that part of the HTML, it won't find it. Placing your script at the bottom ensures all HTML elements exist before your code runs. (There are other solutions, but bottom-placement is the simplest.)

8. Testing Your Work

As you build, test frequently:

  1. Save your .html file
  2. Open it in your browser (double-click the file, or drag it into a browser window)
  3. Type a password and see if anything happens
  4. Check for errors—press F12, click the Console tab, look for red error messages
  5. Fix one thing at a time—if it's broken, undo your last change and try again
The #1 Debugging Strategy

If nothing happens when you type, open the Console (F12). JavaScript errors appear there in red with a line number. Google the exact error message—someone has had the same problem before.

Test Passwords to Try

Use these to verify your checker is working correctly:

9. Hosting on Your Lab VM

Once your checker works locally, you need to put it on your lab VM so the grader can access it:

  1. Connect to your lab VM (SSH or remote desktop)
  2. Transfer your .html file to the web server directory (usually /var/www/html/)
  3. Verify you can access it by visiting http://your-vm-ip/yourfile.html in a browser
  4. Take your screenshots showing the URL bar with the VM address
File Transfer Options

SCP from your local machine: scp yourfile.html user@vm-ip:/var/www/html/

Copy/paste the file contents via SSH: open nano on the VM, paste your code, save.

VS Code Remote: connect VS Code directly to your VM and edit files there.

10. Want a Higher Score? (Beyond Basic)

The Basic tier checks length and character diversity. If you want to reach Intermediate or Advanced, here's what to explore next—but only after you have the Basic version working:

Look at the Basic, Intermediate, and Advanced demos on this site to see what each tier produces. Your job is to figure out how to make something that behaves similarly.