User Centric Frontend Development Project - Code Institute

This is a static website intended to give users a guide to the top current films and some top selected films. It is divided into four sections. The Oscars section lists some of the winners of the lastest Oscars. The Genre section allows the user to see some of the creators selected movies of certain genres. The Top Picks section shows the IMBd top ten films of all time. The Subscribe section allow the user to sign up to a newsletter although this feature does not work.

A live version can be found Here.

The website is directed towards people who are looking to find guidance on some movies to watch. The webiste is dark in colour to try and replicate a movie theatre. The video on the homepage makes the movie theatre theme more realistic with it continuing down the edges on large and medium screens to keep the user in the theme all through the website.

User requirements are met in the following ways:

• The navbar is fully functional and links to the different segments on the page.
• The links to buy the movies are fully functional.

Wireframes were made on pen and paper.

• linkable sections on the site from the navbar
• links to other websites

• enable the email form to send mails to my account
• include a button that pops a trailer for the movie in a modal

• HTML
• CSS
• Bootstrap

The sites responsiveness was tested using Google developer tools. All devices provided were tested.

User testing was done to ensure:

• All links work correctly.
• Links to other sites make use of target="_blank", so as to open the linked site in a new tab.
• The email form gives an error if a required field is not filled in.
• The email input gives an error if an email is entered in an incorrect format.
• The navbar links link to the correct section of the site for the link clicked on.
• All hover and visited effects work correctly and as intended.
• The video plays on loop as intended.

The site is hosted on github pages. It is deployed from the master branch.

To run this site locally, in your terminal enter: git clone https://github.com/dmongey101/Movie-Madness

• All movie descriptions were taken from IMBd

• The video was taken from Paul Boudreau's youtube channel.
• All images are from google images.
• Fonts used were obtained from Google Fonts.
• The bouncing arrow was obtained from freefrontend.com
• Loading wheel obtained from W3Schools