NMU Practice Lab

Binary: how computers count

Computers only know two states: off (0) and on (1). One of these is a bit. Eight bits together are a byte. Each position has a value: 128, 64, 32, 16, 8, 4, 2, 1. Press the buttons to turn bits on and see the number. This is exactly why each part of an IP address stops at 255 (all eight bits on: 128+64+32+16+8+4+2+1).

Decimal value0

Binary00000000

Or type a number 0 to 255

Try: 192, 168, 10, 25. These are the four numbers of the address 192.168.10.25.

Subnet calculator

Type an IP address and choose the slash number. The tool shows the network, the mask and the usable devices. Bits in cyan are the network part (the street). Bits in amber are the host part (the house).

IP addressSlash (prefix)Split into slash

Subnets after splitting

Packet journey: how a message gets wrapped

Type a short message. Press Next layer to see each layer add its own label, like putting a letter in an envelope. The numbers shown are examples.

Message

Make the cable: T568B

Tap the wire colours in the right order, from pin 1 to pin 8. A striped wire is white with a coloured stripe.

Clue: the order starts with a white and orange wire.

Hashing: why we never save real passwords

A hash turns any text into a fixed scrambled text. The same input always gives the same output, but you cannot turn it back. Change just one letter and the whole hash changes. This page uses SHA-256 so you can see the idea. Real websites use slower methods built for passwords (in PHP: password_hash).

Password APassword B

Add a random salt (extra random text)

Hash of A

Hash of B

SQL injection: break it, then fix it

This is a practice login. The table below is the database. Choose how the server builds its command: unsafe (it glues your text into the command) or safe (it uses a prepared statement). Then try the attack buttons.

email	password	role
admin@nmu.edu.ng	Str0ng!Pass	admin
amina@nmu.edu.ng	Lecture2026	staff
tunde@nmu.edu.ng	Student#44	student

EmailPasswordServer mode

Command the server built

This table also shows a mistake: it stores real passwords. Use the Hashing lab to see the fix.

XSS: when a comment becomes a program

A visitor leaves a comment. The left panel shows it the unsafe way (the browser treats it as HTML). The right panel shows it the safe way (it is only text). Press the example to see the difference.

Comment

Unsafe: innerHTML

Safe: textContent

The example uses an image that fails to load and then runs a small script on the page. On a real website that script could steal a visitor's login. The fix is to show text as text (escape it).

Web design: build a page and see it live

HTML is the structure, CSS is the look, JavaScript is the behaviour. Edit any box and the preview below updates as you type. Nothing leaves your laptop.

HTMLCSSJavaScript

Live preview

Try these 6 challenges, in order:
1. Change the heading text to your own name.
2. In CSS, change the colour value after background: to #0B1B33 and the text colour to white.
3. Add a second paragraph in HTML with <p>I am learning web design.</p>.
4. In CSS, change border-radius to 50px and see what happens to the card.
5. Click the button. Then in JavaScript, change the message it shows.
6. Make it mobile friendly: the CSS already has a max-width and margin:auto. Try changing max-width to 200px to see the effect.
When done, press Download my page to get a real .html file you can open or upload to a website.