Many thanks to this all-around web tutorial that helped us reinforce our skills in HTML, CSS, and javascript. We also learned and pulled resources to create CSS cards, progress bars, and many more.
The interactive web game wouldn't be possible without Skrollr. An amazing, powerful javascript plugin. It enabled the lessons to scroll horizontally like a side-scrolling game. Additional thanks to Dev Opera, a tutorial that taught us how to use Skrollr in a game-style parallax.
The floating clickable orbs inside the web game is heavily inspired and modified from this codepen resource. This was exactly the perfect popup we were thinking of when we designed the web game.
It was very important to introduce the lessons without modifying the game itself. This allowed us to show an attractive popup that appeared on document load and completion of the lesson.
Horizontal scrolling is not the norm, so having a progress bar that showed how the current progress of the user is with respect to the page's height was definitely useful. This way, the user knows when to expect the game to end.
Inspired by the FBI's very own cybersecurity curriculum for students grades 8 to 12, we based our lessons on simple and easy-to-digest tidbits of lessons. We spent quite a bit of time enjoying ourselves in their interactive website, as well!
Our quiz pages rely heavily on javascript to function. We found an incredible resource in sitepoint to develop our own quiz pages.
Google Fonts is an incredible resource for fonts. Their website is helpful and beautiful. Everything you could need to build a website with appropriate websites - Google Fonts is the way to go.
Common Sense K-12 Digital Citizenship Curriculum is another web resource or students k-12 that will help kids learn how to behave and think critically on the web. It is a highly recommended website with curriculum that are used by teachers and professionals.