Example

SMcNicol's avatar
SMcNicol
Community Member
3 days ago

Meet Max: My Style Guide Got a Superhero (and an AI Sidekick)

When I saw this week's challenge was style guides, my brain immediately did the thing it always does: "cool, but what if it also did something else?" So instead of just building a style guide, I...
AnnetteHall-051's avatar
AnnetteHall-051
Community Member
3 days ago

I love everything about this! I must know, how did you create the full navigation tabs at the top?

  • SMcNicol's avatar
    SMcNicol
    Community Member
    3 days ago

    Thank you! ❤️ I mocked up the visual direction in PowerPoint colors, layout, the overall look and gave it to Claude along with what I wanted the site to actually do (working navigation instead of a static course, a mascot, an AI Image Generator demo).

    Claude 🤖 wrote the working code from there: HTML, CSS, and JavaScript. I dropped that into a Rise 360 Project Code Block. The nav bar itself is plain JavaScript clicking a link shows that page's section and hides the others, so it feels like real navigation without ever reloading. 😃

    Max's images were generated with Articulate AI. Hope this helps.

Getting Started with the E-Learning Challenges

Find practical answers to common questions about the E-Learning Challenges, a weekly event that helps you build skills, create your portfolio, and grow as an e-learning professional.