Nexus Cloudworks

Your learning environment for web + cybersecurity labs
This anchors the brand and tells the user what the platform is.

HTML-LAB

HTML Lab — build your own page

Free · No install · Learn by editing

HTML Lab

Six short lessons. Type code on the left, see your webpage update live on the right. By the end you'll have built a real personal page — then you'll know enough to keep going anywhere.

your code
live preview

Keep learning — all free

Once you finish these six lessons, these are the best free places to go deeper.

MDN Web Docs
The official reference for every HTML/CSS tag and attribute. Best for looking things up as you build.
freeCodeCamp
Full free certification course with hands-on projects, right in the browser.
The Odin Project
Structured free curriculum that takes you from HTML/CSS through JavaScript, with real projects.
W3Schools
Simple explanations with a "Try it Yourself" editor for every tag — good for quick experiments.
Kevin Powell (YouTube)
Excellent free CSS-focused videos, especially once you're past the basics and want your pages to look good.
Traversy Media (YouTube)
Beginner-friendly project-based crash courses — great for "build a real thing" momentum.
Frontend Mentor
Free real-world design challenges to practice on once you know the basics.
Flexbox Froggy
A free game that teaches CSS layout (flexbox) — the thing that trips up most beginners.
Everything on this page runs locally in your browser — nothing you type is sent anywhere.
const lessons = [ { title: "1 · The skeleton of a page", body: "Every HTML page has the same bones: <!DOCTYPE html> tells the browser this is HTML5, <html> wraps everything, <head> holds page info (like the title), and <body> holds everything you actually see. Try changing the text inside <title> and <h1> below.", code: `My First Page

Hello, world!

` }, { title: "2 · Headings, paragraphs & lists", body: "Headings go from <h1> (biggest, most important) down to <h6>. Text lives in <p> tags. Lists use <ul> (bullets) or <ol> (numbers), with each item wrapped in <li>. Add another list item below.", code: `

About Me

I'm learning to build websites from scratch.

Things I want to learn

  • HTML basics
  • CSS styling
` }, { title: "3 · Links and images", body: "A link is <a href=\"...\">text</a> — the href is where it goes. An image is <img src=\"...\" alt=\"...\"> — the alt text describes the image for screen readers and shows up if the image fails to load. Try swapping the image URL for another one.", code: `

Check out Wikipedia to learn anything.

A random placeholder photo` }, { title: "4 · Divs, classes & structure", body: "A <div> is an invisible box used to group content into sections. A class is a label you give an element so CSS (next lesson) can target it. Real pages are built from nested divs like this.", code: `

Project One

A short description of the project goes here.

Project Two

Another project, same structure.

` }, { title: "5 · Styling with CSS", body: "CSS controls how things look. You can write it inside a <style> tag in the head. Rules look like selector { property: value; }. Try changing the background-color or font-size below.", code: `

Styled Page

This card has a border, rounded corners, and padding — all from CSS.

` }, { title: "6 · Put it together: your own page", body: "This is a full mini personal page combining everything so far: structure, a nav, styled cards, a link and an image. Edit the text, colors, and content below to make it yours — this is your real starting template.", code: `

Your Name

Aspiring web developer

About Me

Write a couple sentences about yourself here.

My Links

GitHub · LinkedIn

` } ]; let current = 0; let completed = new Array(lessons.length).fill(false); const stepsEl = document.getElementById('steps'); const editor = document.getElementById('editor'); const preview = document.getElementById('preview'); const charCount = document.getElementById('charCount'); function renderSteps(){ stepsEl.innerHTML = ''; lessons.forEach((l, i) => { const b = document.createElement('button'); b.className = 'step-btn' + (i===current?' active':'') + (completed[i]?' done':''); b.textContent = 'Lesson ' + (i+1); b.onclick = () => loadLesson(i); stepsEl.appendChild(b); }); } function updatePreview(){ preview.srcdoc = editor.value; charCount.textContent = editor.value.length + ' chars'; } function loadLesson(i){ current = i; const l = lessons[i]; document.getElementById('lessonTitle').textContent = l.title; document.getElementById('lessonBody').innerHTML = l.body; editor.value = l.code; document.getElementById('solutionBtn').textContent = 'Show solution'; updatePreview(); renderSteps(); document.getElementById('prevBtn').disabled = i===0; document.getElementById('nextBtn').disabled = i===lessons.length-1; } editor.addEventListener('input', updatePreview); document.getElementById('markDone').onclick = () => { completed[current] = true; renderSteps(); }; document.getElementById('solutionBtn').onclick = (e) => { editor.value = lessons[current].code; updatePreview(); e.target.textContent = 'Solution restored'; setTimeout(()=> e.target.textContent = 'Show solution', 1200); }; document.getElementById('resetBtn').onclick = () => { editor.value = lessons[current].code; updatePreview(); }; document.getElementById('prevBtn').onclick = () => { if(current>0) loadLesson(current-1); }; document.getElementById('nextBtn').onclick = () => { if(current

MODULE-4 LAB

#module4 { margin-top: 40px; /* adjust this number to move it down */ }

Module 4 — Wireless Advanced

Master real wireless security skills inside a safe, controlled lab.

  • ✔ Learn 802.11 frame types
  • ✔ Capture and analyze wireless traffic
  • ✔ Enable monitor mode + packet injection
  • ✔ Capture WPA2 handshakes
  • ✔ Crack passwords with Hashcat
  • ✔ Build an Evil Twin rogue AP
  • ✔ Detect wireless attacks with Kismet
(function(){ const intro = document.getElementById("module4-intro"); const startBtn = document.getElementById("start-module4"); startBtn.onclick = () => { intro.style.display = "none"; // Show first lesson (4.1) const firstLesson = document.querySelector('#module4 .lesson[data-id="4.1"]'); if(firstLesson) firstLesson.classList.add("active"); // Save progress localStorage.setItem("module4_progress", "4.1"); }; })();

🔥 4.1 — Wireless Foundations

Learn 802.11 frames, beacon frames, probe requests, association flow, monitor mode, and injection.

Lab Exercise

  • Run airodump-ng on your lab AP
  • Identify beacon frames
  • Identify probe requests
  • Identify association frames
  • Save the capture

🔥 4.2 — Building Your Wireless Lab

Create a host-only wireless lab using hostapd + USB WiFi adapter.

Lab Setup

  • SSID: NexusLab
  • WPA2-PSK
  • Password: labpassword

🔥 4.3 — Monitor Mode + Injection

Enable monitor mode, test injection, capture frames.

🔥 4.4 — WPA2 Handshake Capture

Capture a handshake using airodump-ng + aireplay-ng.

🔥 4.5 — Cracking the Handshake

Use hashcat + rockyou.txt to crack your lab password.

🔥 4.6 — Evil Twin + Rogue AP

Clone your SSID, create a rogue AP, capture probe requests.

🔥 4.7 — Wireless IDS / Defense

Detect rogue APs, deauth attacks, and unusual probe behavior.

(function(){ const finishBtn = document.querySelector('#module4 .finish'); const completeScreen = document.getElementById("module4-complete"); finishBtn.onclick = () => { document.querySelector('#module4 .lesson[data-id="4.7"]').style.display = "none"; completeScreen.style.display = "block"; launchConfetti(); }; function launchConfetti(){ const container = document.querySelector("#module4-complete .confetti"); for(let i=0; i<40; i++){ const piece = document.createElement("div"); piece.classList.add("confetti-piece"); piece.style.left = Math.random()*100 + "%"; piece.style.background = ["#0af","#ffd36b","#7cf5ff","#ff6b6b"][Math.floor(Math.random()*4)]; piece.style.animationDelay = (Math.random()*0.5)+"s"; container.appendChild(piece); setTimeout(()=>piece.remove(),2000); } } document.getElementById("module5-btn").onclick = () => { alert("Module 5 coming soon!"); }; document.getElementById("download-notes-btn").onclick = () => { let notes = ""; document.querySelectorAll("#module4 textarea.notes").forEach(area=>{ const id = area.closest(".lesson").dataset.id; notes += "Lesson " + id + ":\n" + area.value + "\n\n"; }); const blob = new Blob([notes], {type:"text/plain"}); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = "Module4_Notes.txt"; link.click(); }; document.getElementById("return-dashboard-btn").onclick = () => { alert("Returning to dashboard (link this to your main page)."); }; })();
(function(){ const KEY = "module4_progress"; let current = localStorage.getItem(KEY) || "4.1"; function showLesson(id){ document.querySelectorAll("#module4 .lesson").forEach(el=>{ el.classList.remove("active"); if(el.dataset.id === id) el.classList.add("active"); }); localStorage.setItem(KEY, id); } showLesson(current); document.querySelectorAll("#module4 .next").forEach(btn=>{ btn.onclick = () => { const parent = btn.closest(".lesson"); const next = (parseFloat(parent.dataset.id) + 0.1).toFixed(1); showLesson(next); }; }); document.querySelectorAll("#module4 .prev").forEach(btn=>{ btn.onclick = () => { const parent = btn.closest(".lesson"); const prev = (parseFloat(parent.dataset.id) - 0.1).toFixed(1); showLesson(prev); }; }); document.querySelectorAll("#module4 textarea.notes").forEach(area=>{ const id = area.closest(".lesson").dataset.id; const saved = localStorage.getItem(KEY + "_notes_" + id); if(saved) area.value = saved; area.oninput = () => { localStorage.setItem(KEY + "_notes_" + id, area.value); }; }); })();