Meet the hardware
Identify the components inside a computer.
FIRST DAY / MISSION 01
Take control of the page.
Make your first webpage modification. Discover what changes, and what stays the same.
Use a desktop or laptop for this mission. Browser developer tools are required; you can read the instructions here on your phone.
YOUR MISSION
A small edit. A real first win.
This is your authorized practice page. You will edit the copy loaded in your own browser.
For your first attempt, use Google Chrome on a computer. The screenshots below show Chrome. Edge has similar tools, but the layout may differ.
STEP 1 OF 4
Find your headline
In our practice page, right-click the large words Welcome, future ninja. Select Inspect from the menu.
A code panel opens. Choose the Elements tab if it is not already selected. Look for the line with id="editable-headline".
I’m stuck: Inspect is missing, or the wrong line is selected
Windows: press Ctrl + Shift + C. Mac: press Command + Option + C. Move your pointer over our large headline and click it. This selects that headline in the code panel.
If you see a little triangle next to the selected h2, click it to reveal the words inside. You can close the panel with its × and try again.
STEP 2 OF 4
Change the words
In the code panel, double-click just Welcome, future ninja. inside the h2. Replace those words with the phrase below, then press Enter.
I'm a Cyber Ninja in training.Leave the surrounding code alone. Both straight and curly apostrophes work.
YOUR PAGE SHOULD NOW SAYI'm a Cyber Ninja in training.
I’m stuck: the code changes, but the headline doesn’t
Make sure you edited the words inside the line with id="editable-headline", then press Enter. If that element is collapsed, click the triangle beside it first.
If you accidentally delete the headline, refresh this browser tab to restore the lab and try again. Mistakes here are recoverable.
STEP 3 OF 4
Make it cyan
Keep the headline selected. Find the Styles panel, usually beside or below the code. At the top, look for element.style and its color line.
Double-click the current color value, replace it with #22d3ee, and press Enter. This code means cyan: a bright blue-green.
background-color; our mission changes the existing color value. Click the image to enlarge.EXPECTED APPEARANCEI'm a Cyber Ninja in training.
I’m stuck: I can’t find color
Right-click your modified headline and select Inspect again. In Styles, clear any text in the Filter box. Look near the top for element.style { color: #e9eef5; }.
If the layout is cramped, close the bottom Console panel if one is open, or make your browser window wider.
STEP 4 OF 4
Celebrate your edit, then experiment
Close the developer tools using the × in that panel. Click Check my changes below our practice page. The lab checks your words and color separately and tells you what still needs attention.
Once both pass, take a screenshot:
- Windows: press Windows + Shift + S and drag around the practice page.
- Mac: press Command + Shift + 4 and drag around the practice page.
Then use Reload the practice page inside the lab. Watch the original return, answer the question, and collect your mission card.
I’m stuck: Check my changes says I’m not done
The headline must say I'm a Cyber Ninja in training. A final period is optional. The headline’s text color must also be different from its original color; changing the page background alone doesn’t count.
If you need help, post which step you reached in Cyber Ninja Dojo with a screenshot. You can pause and return to this mission.
Step 1 of 4
Reference screenshots: Chrome for Developers: DOM tutorial and CSS tutorial, by Kayce Basques and Sofia Emelianova, CC BY 4.0. Images are unchanged. They show Google’s examples, not this lab. Chrome versions may look slightly different.
You don’t need to understand every line of code yet. Follow one step at a time. The guide buttons don’t mark your mission complete; the lab checks your actual edits.
CYBER NINJA / TRAINING TERMINAL
Welcome, future ninja.
Every expert starts with a first experiment.
This one starts with you.
HTML defines contentCSS defines appearanceBrowser displays your copy
MISSION_01 awaiting your edit
Edit the headline and its color, then check your work.
Your changes worked. Will they last?
Save a screenshot first. Then reload the practice page below. This restores the original headline and color, just as a browser refresh would.
The original is back. Why?
Your edits changed this browser’s copy. The original page on the server was never changed.
MISSION 01 / COMPLETE
You made your first webpage modification.
You changed content with HTML, appearance with CSS, and learned the difference between a browser’s local copy and a server’s original page.
Post your screenshot or mission card in the First Mission Completed thread in Cyber Ninja Dojo. Then return to Skool and continue IT Fundamentals.
This is a practice achievement, not a professional certification. No completion is sent to Skool automatically.YOUR NEXT MISSIONS
Build your skills, one win at a time.
Follow the files
Organize files and explore extensions.
Trace a packet
Follow data through a simulated network.
Spot the phish
Find warning signs in a fictional email.