WebSecurityLearningLabs

#17 Devlog
Today i worked on adding data and making everything responsive at modules paths and badges

adding new features generated new bugs…
but i didn t give up and went thru and finished this part
i think making backend for this app will be really frustrating…
i have to be faster cuz i don t have that much time to spend

#16
Hello Today I noticed that my dashboard looks bad so i change it a bit …
Check Video

I hate buttons that why i changed them too

added 2 main components SkillChart.tsx insted of ripped from HTB skills…
and SuggestedModules.tsx
and AltFooter.

Check Out the website now i think /learn looks cool and responsive

#15 Devlog

I spend some time to make Ui better rewrote some components of landing Page
from flex flex-col to grid grid-col for better responsivness.
and added some components modules and paths ,badges must make data and better boxes for them .

I getting myself to start backend …

Today i spend more time with my friends than coded it was really fun.
Have a nice day

#14 devlog – Web Security Learning Labs

Progress Update:
Major UI improvements today! Added a dedicated learning dashboard at /learn and upgraded the main dashboard with better visual hierarchy and interactive elements. The interface now provides a more cohesive experience that guides users through their cybersecurity learning journey.

What’s New:

✅ New /learn dashboard with structured learning paths
✅ Redesigned main dashboard with improved UX
✅ Color-coded difficulty indicators for better navigation
✅ Progress tracking visualization with custom color scheme
✅ Mobile-responsive layout adjustments

Next Steps:

🔜 Complete authentication system for user tracking
🔜 Develop first set of guided security labs
🔜 Implement user progress tracking across exercises
🔜 Create achievement system for completed challenges
🔜 Build profile page for user statistics

Check out the live demo here: 🔗 https://web-security-learning-labs.vercel.app/

TL;DR:
Added dedicated /learn dashboard and enhanced main dashboard with better visual organization. UI improvements focus on intuitive navigation and progress tracking. Next: authentication and lab content implementation

#13 devlog – Web Security Learning Labs
Progress Update:
Just hit a major milestone with the interactive terminal implementation! The dashboard now features a fully functional command-line interface where users can practice basic cybersecurity commands. This creates an immersive learning environment that bridges theory with practical skills.

What’s New:

✅ DEMO Interactive terminal with custom cybersecurity commands
✅ Dashboard layout with Learning and Labs sections

Next Steps:

🔜 Complete authentication system for user tracking
🔜 Develop first set of guided security labs
🔜 Implement user progress tracking across exercises
🔜 Create achievement system for completed challenges
🔜 make profile page for user to see his statictics

Check out the live demo here: 🔗 https://web-security-learning-labs.vercel.app/

TL;DR:
Terminal interface is working with basic commands. Dashboard structure complete. Next up: auth system and actual lab content

#12 Devlog – Web Security Learning Labs

Progress Update:
Finished implementing basic responsiveness across the site. The only thing left is tweaking the navbar for different screen sizes, then we’ll be ready to dive into the real action – hacking simulations!

What’s New:

• Fully responsive layouts for all main pages
• Improved styling for a cleaner, more modern look
• Preparations done for interactive security labs

Next Steps:

• Finish responsive navbar
• Start building interactive hacking challenges
• Add tutorials and exercises for users to practice safely

Check out the live demo here: Web Security Learning Labs

TL;DR:
Site is mostly responsive, navbar is the last piece, then it’s all about launching hacking labs.

#11 Devlog
for 2 days i been working on background for my Main Page Section making this svg was hell…
used Inkscape for it but i think effect looks Cool! I am Proud of it here is a video and image

#10 Devlog
Ending work on Main Page made cool footer
boring things like design etc.

#9 Devlog

Come Back After Being Sick - still weak but we MUST CODE baby!!!!!!!!

Back at the keyboard after being sick. Still not at full power, still slightly running on low battery mode, but progress matters more than perfect timing.

Today I continued migrating the project to React. The labs section is no longer static markup. It’s now driven by a structured labsItems array and rendered dynamically with .map(), which already makes the codebase cleaner and easier to scale. The layout has been refactored into proper semantic structure using section, article, and header, and accessibility has been improved so the components behave properly with keyboard navigation.

The UI is starting to feel more modular instead of stitched together. Each lab card is becoming a reusable pattern rather than a one-off block of markup. The next step is to extract a dedicated LabCard component and continue separating logic from presentation while preparing proper routing for individual lab pages.

demo will be out soon…

#8 Devlog
I did migrate to react.
but so much work must be put so the whole website looks Cool.
i will also migrate to fedora on my main pc windows 11 has so many bugs ;sob:

#7 Devlog

finished working on the design of hackbox (i will still need to make it better),
changing to React + tailwindcss in next devlog cuz i need components.

was sick for a day that why yesterday there was no devlog.
Good Day !

#6 Devlog

Today in school i started working on better ui .
I think changing technologies to react for faster programing .
have fantastic day ~~

#5 Devlog

Today i did fix some styles and added xss hackbox it will not look like that in the future but you can try it out on demo page.
next step is to work on building design for the hackboxes and add more life into website to make it more fun and interactive .

have fun testing the project;3

#4 Devlog

i fixed some css bugs but still i struggle i really need to program more (school sucks) 😭
I think the main page will be complete after next 30 hours of programing and full project will take little more than 150+ hours + i have to migrate to some framework (maybe nodejs) .
consistency is the key…

#3 Devlog
I spend a lot of hours on making design and responsivness not using AI makes it a lot harder and slower…
but i learned a lot.
next step is to make Hack Boxes but i will start tommorow!
Btw you can test the ui yourself on demo page
https://websecuritylearninglabs.netlify.app/src/index.html
have a nice day ; 3

#2 Devlog

Frontend design is done for the landing page. I scrapped the previous idea and rebuilt it in a more minimalistic style.

It took longer than expected, mostly due to layout and spacing tweaks, but the result feels clean and usable.

Next step is designing the visual modules for the HackBoxes. I’m starting on that tomorrow.

Any advices for my project? Meow! : 3

#1 Devlog

Started this project with one main rule: no AI-generated code. Everything is written by me. Old-school, for learning and for fun.

Progress today was small but real. I set up the base frontend. Nothing fancy yet.

Next step is focusing fully on the frontend. I want the UI to look really good before touching the hacking content. The plan is to build hack boxes similar to TryHackMe rooms or Hack The Box modules.

Tomorrow I’m reworking the entire design into something more minimalistic. Feedback on the direction is welcome.

have a nice day : 3