Adding the Weekly Minutes (Part 1)

When I was first drafting my wireframe, I was unaware of the fact that the council had wanted to add its weekly minutes. Hence when they confronted me with the request, I came up with several possible solution: Shortening the minutes and create a specialized section for it on the website, place the link to the weekly minutes, or just placing everything onto the website without any modifications.

(Email)

Soon after the request was made, we decided to follow the second idea and place a link to the weekly minutes. This was mainly due to the fact that it was rather complicated to jam all of the information on a limited area (so basically we chose to use the links as it was much more aesthetically pleasing).

(Website sidebar)

Once that was decided, I had to think on how I’d add the links to the website. After looking on W3Schools for some inspiration, I decided to go with a sidebar that would display the date of the weekly minute and use that as a hyperlink to redirect the user to the actual Google Document.

I first learnt the basics to making a sidebar and then went on to watch a tutorial on YouTube on how to make the same thing (but with different aesthetics).

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav

https://www.youtube.com/watch?v=zPh0RbYiYGg

I then combined both tutorials and made my own sidebar.

For this, the HTML code I used was rather simple.

Using a combination of ULs (Unordered Lists) and LIs (Ordered Lists), I managed to make a decent arrangement for the sidebar. I split the sidebar into 3 major sections: the title section, the content (hyperlinks) and the signup button which would allow the user to subscribe himself to any new additions to the weekly minutes.

Once I had that in place I copied a bit of CSS code and added some of my own to render the sidebar more aesthetically pleasing.

Most of the code was copied from the YouTube tutorial, but otherwise, apart from fixing a few bugs, I changed the color, padding, margin sizes for it to suit the website more.