Web Design

For this project I used the Star Wars theme. After a failed attempt with GoDaddy, I decided to use Neocities free hosting site for this project. I followed, step-by-step, the HTML and Javascript tutorial. I chose the color, added the brackets, and updated the .js file. However, when I viewed the html file on the web browser, I noticed that the solution box and your response had no space. Therefore, I had to look at the HTML text file to add two brackets in between. Then, I continued to work with the .js file. I have to admit that I struggled a little because after I added the extra five questions to the quiz, the text disappeared on the web browser preview. After a long time reviewing the file, it was a matter of an extra quotation mark on question five and a missing one on question eight. After that part was fixed, I decided to add an image to the quiz. Therefore, I used the www.w3schools.com editor page to learn and add the image. Since the image has red flowers, I used the color wheel to determine which background color will look best to contrast the red color, and hence the reason why I chose #81eb86 green for the background.

For this project, I decided to continue with the Star Wars theme. I started to work on the list of items, and I decided to have the randomized feature when the page gets refreshed and for the item to be locked when drag and drop into one of the containers. Then, I changed the title and updated the information in the instructions. Following, I edited and adjusted the list of items, including the size of the container, and adjusted the border line around the container. After that, I worked on the CSS file to change the font to Helvetica, the background color, and the main container width and height. Next, I edited all the text to the theme I chose and centered and aligned center the text. To style the quiz, I changed the background color of the container’s headers and the site. To finish the project, I added a picture related to the theme.