Building a Marvel Cinematic Universe Quiz Website with Cursor AI

All right, so this is the web page I created using cursor, as you can see it's uh basically a quiz about the Marvel Cinematic Universe, but before I get more into the website, I'll show you my cursor workflow. So this is the initial prompt I put in, just asking a cursor to make a website with 4 pages based on the details I provided and the tech stack I decided to use, as you can see I chose HTML, CSS, and JavaScript. And this is just some of Cursor's uh. Cursors thought process right down here. And um this is one of the debugs I wanted to make because when I tried making comments initially, it wasn't really doing it, so I put in a screenshot of the error message and I asked the cursor to help me figure out how to fix it and fortunately it was, it was super helpful, so yeah, I was able to make these commits that you can see down here basically. Whenever I made a change to my website, I, um, I made a commit history, just these little checkpoints and also like documenting the changes I made, so. As soon as I made the website, I made a commit, refactored the CSS, and when I added in more details and when I changed the font to Renade. And um yeah, so here's the apps I included, so the style CSS. As well as the, the browser when I asked the cursor to search up a little more details to include on the the website because that initially it didn't really include a lot of information for the information in quiz tab, so I wanted to include some more details. And And when I did that, I did it in the style of a plan before I actually had a Uh, cursor actually build it, so this page right here is actually the plan cursor wrote out and I approved it, so I, I just clicked on build. And Finally I added in an app for the cursor rules, so I only added in a couple of rules, which was to have a cursor only use or this project I should say only use HTML, CSS and vanilla, and I also wanted to use the font Renade. And um and I just asked the cursor to change the font, the text from the cursor rules, and it did a really great job of that, as you can see right here, and if we go back to the website, the, the font is Renade. And so So basically for the website, it takes you to the welcome page and it has a couple buttons right here that takes you to the other pages, so This is just some information the viewers can use to study up on some of the details of the MCU. They added a quiz page. So one thing I really like is that adds an immediate feedback, so it shows you green if you got the answer right, but red if you got the answer wrong, but it'll still show you what the correct answer is. You can see And And it'll, it'll show you the score at the end here. And I also added a profile tab where um users can uh create a username, add in their email if they want, and um. It'll also help them select their favorite MCU hero is, and there's just a lot of uh customization options, and so this is one I made earlier, but I'll make another one just to show you what it's like. So just make another one and we'll call it a Mando for Mandalorian. And um to Spider-Man and as I'm making the changes here, you'll see it showing up over there. And um you say I love you. And we save the profile, it shows up with a little message right here. And um This color palette is what Cursor came up with initially, and I actually really like it because it closely aligns with the color of the MCU, just the white and the red and the black in the background. And um initially I was thinking about including some MCU images, but I um I didn't really want to get any like the copyright trouble, so I decided against it, but um but yeah, this is just what my website looks like and um I really like it personally, so I hope you enjoyed this.