Html Process

I want my storyboard to be simple and easy to naviguate. For my Html, I did my best to keep it simple. I have a header, a main, and a section that contains all of my pictures. The header contains my nav which are my web2 link and the link to this process. Also I added some id's to be more precise on my coding. section id="storyboard", nav id="controller" and article id="board". In section, that is where all the storyboards is. In nav, they are my arrow keys, they have a previous id and a forward id. For the article,it is my board where all my pictures are placed. And lastly i added some description for each frame to guide you through the story.

Css process

For my css, my header has a blue background and my overall background is lightblue. My colored fonts are also red. I made sure to make my board centered including my nav arrows. I use flex box to make it centered.

Js process

For Js, I had a hard time coding it. But I manage to study Bruce's code and did my best to understand. To summarise, this code creates a slide show in which I can browse between slides by pressing the "Next" and "Previous" buttons. Figure elements within a container represent the slides, and the slideIndex keeps track of the current slide. The logic for navigating between slides and refreshing the display is handled by the functions slideNext and slidePrevious.

Feedback

One of the students said I need more frames at the end. Another student mentioned about my nav looks a bit small. And the last student mention how it should be mobile first.

Bruce notes

Must have wireframe sketch Fix Java process