Description

Course : Web
Programming Principles
-WEB222 Assignment 2 of 3 Contribution:10% of course

Notes for the Student: Notes for the Student: This Assignment is designed to give you practical experience in building a modern looking website using native HTML5 and CSS3 code.

A video walk through of the assignment. PLEASE WATCH THIS : Lin k

Assignment Submission Requirements
● The link to the movie website that you would be emulating. (Note: you MUST select an existing movie website and emulate its design based on the requirements that I specified below)
● A link to a recorded video of you detailing the demonstration of your website. In the video, you must state your name, give an overview of the movie website that you would be emulating and then demo your website by comparing all sections of your website with the existing movie website.
● This Assignment will not be accepted via email
Late Penalties
● Up to 1 day late (The highest mark you can achieve is 75%)
● Up to 2 days late (The highest mark you can achieve is 60%)
● Up to 3 days late (The highest mark you achieve is 50%)
● > 3 days late = 0 MARKS

Detailed Specification
This assessment must be completed individually.

You have been contracted as a Front-End Web Developer by The Canadian Movie
Entertainment Association Ltd to create a three (3) page movie website.
Below are some sample movie websites that you can use for design inspiration. Please note that you must select an existing movie website as inspiration to guide the design of your 3 page website.
Please see below some existing movie websites that you can choose from. Note, you are not limited to below and thus you are free to explore ANY existing movie website, both domestically and internationally to help guide your design :
● https://www.cineplex.com/
● https://www.themoviedb.org/
● https://www.amctheatres.com/movie-theatres/new-york-city/amc-empire-25

Note: you CANNOT use Bulma, Materialize, Bootstrap or any frameworks to develop your website. You can only use native CSS3 modules (grids and/or flexbox) to layout the website. Also, you are not allowed to use any free or paid template.
Your website must be well designed and exude a very modern sleek look . It must consist of the following webpages :

● A home page
● A Now Playing movie page
● A Details Movie page

Regarding the website structure, all the pages must have the below sections:

● Header – The header MUST contain a logo and could contain the navigation bar and any other other content you deem necessary.

● A Navigation bar – The navigation bar can be within the header or defined as an entirely new area. The navigation bar must contain links, both external and internal links.

Example :

● Footer – This section must include footer menu items, social media links, and any other information you deem necessary.

Example “

Home Page
The home page should have the below additional sections :

● Hero Section – This section should present a banner and/or content depicting a promotion for your website .

Example :

● Informational Section(s)- For this section you must provide content,images, or a pertinent video to the visitors of the website. Note, you can have multiple informational sections.

Example :

Now Playing Movie Page :

The Now Playing Movies page must have the below section:

● Ensure that at least two movie posters, from the now playing page, are clickable and when the user clicks on the respective poster the user is navigated to another webpage (Movie Details page),
Movie Details Page
● Ensure this page has the movie title, ratings, overview, featured crew and has a bigger poster than the poster in the latest movie page .
● You are also required to display a link to the trailer of the movie.
● Lastly, if the user clicked on the Joker poster then the user should be navigated to the Movie Details page, detailing the respective information for said movie. Example :

Criteria Not
Implemented
0 Partially
Implemented
1 Fully
Implemented
2

Home Page

● Used all images and imagery from template

● Accurate colors were used

● Accurate typography

● Hero Section

● Information Section
Now Playing Movie Page

● Used all images and imagery from template

● Accurate colors were used

● Accurate typography(font type,font size, line spacing) was used

● Appropriate use of grids

● List at least 6 movies

Display Movie Page

● Ensure this page has the movie
title, ratings, overview, featured crew and has a bigger poster than the poster in the latest movie page of the clicked poster from the Now Playing Movie page.

Overall look and feel

● Overall site is polished and is structured like your selected
template

Poor
1 Average
4 Exceeds
9

Total : 35 MARKS

THE END