My process

This is my wireframes

something



html

For the html, I just added the header, which contained the title, the nav, which contain the links for ny webpage, my homepage web 2 and other info. I also added the wireframe for my story board to see how it would look like on the phone or other devices. To finish up, I added the previous and next button to make it easier to view the story. In the main, my story has 16 scenes, and the buttons are between the images, so it can come out looking like there is one on each side. For the footer, I weanted to create some space and add a message.


css

For the css, I wanted to go with a greyish style and the fonts would be white with maybe a tint of yellow (don't know how to explain the color). I added the width to 80%, since if I did put it to 100, the title and buttons would not appear, because the image would be to big to fit the screen. I aslo added a figcaption to each image so that while viewing the scenes you can also read what's going on if you don't understand. The next button works, but unfortunatly the previous is not acting like how i want to. It can't seem to go back to the previous images.


javascript

For the javascript, I added a click event for each image to make the board slide. It is declare a few variables. I named the buttons 'previous' and 'next' to identify them.




Next, I added some variables that is linked to the click event of 'previous' and 'next'. When you click on the arrows, it should show another image.