PROJECTS 2 & 3: Web Design

HTML, CSS, and JavaScript

The assignment was to learn how to make basic interactive websites using HTML, CSS, and JavaScript.

Project 2: Quiz

For this project, I started with the HTML and JavaScript template provided in class. I decided to make a quiz about the mobile game Pokémon Go.

I first downloaded the code from the tutorial above and opened it using Phoenix Code, which is the updated version of Brackets. I named the file scripts.js instead of the popsolution.js, so I had to modify the HTML to display the correct file. I was surprised by how much of the tutorial code immediately turned red, even though everything worked. Lots of things have been deprecated.

I decided to create a quiz about Pokémon Go, so I added the variables and the extra questions and choices. I then changed the questions and choices for all ten questions. I also changed the compliments to phrases related to Pokémon Go. At one point, I encountered an error in one of my compliments, so I had to test all the compliments to see when I would get that one. I changed the background color of the page to blue and then added the Pokémon Go logo above the quiz. I also changed the font for the entire quiz, including the questions, to Arial. Finally, I decided that I did not like the original order of the buttons for the quiz, so I moved the << Back and Next >> buttons below the solution, so that 'Your response' and 'Solution' are the first two items after the question.

Quiz

Project 3: Drag-and-Drop

I chose to create my Drag and Drop activity around Starter Pokémon and their corresponding types.

I modified the HTML to list the 3 starter Pokémon from the first three generations. I then made sure they all had the correct box IDs. I added the image and centered the title and the instructions.

In the CSS, I changed the background color and the font. I also changed the colors of the options for when the list items are correct and incorrect. I chose to center the main content and made the main box shorter. I also changed the color of the headers for the various lists, which required me to add classes to each type of list. I wanted to make the boxes change color to match the type when they were correct, but I didn't figure out how to do it.

Quiz