Description

Course: (WEB322) -Web Programming Tools and
Frameworks Assignment 2 of 6 Contribution:9% of course

Notes for the Student: This Assignment is one of six that is designed to give you practical experience in building Dynamic websites and Server-Side Web applications using Node.js and Express.

Background: You will need to have access to a code editor. You will also need a thorough understanding of HTML 5, CSS3, JavaScript, “Node.JS”, Express.

Assignment Submission Requirements
● This Assignment WILL NOT BE ACCEPTED VIA EMAIL.
Assignment Regulations
● This assignment must be done individually.
Technical Requirements
● All back-end functionality MUST be done using Node JS and Express.
● Your website pages MUST be created using HTML and CSS
● Your website must be designed by using s Bootstrap as a CSS framework to make your website responsive and aesthetically pleasing
● You are not allowed to use any other Front-End CSS or JavaScript Frameworks like React.

Detailed App Specification

Web Hosting Canada (WHC) (https://whc.ca/) has consistently been ranked the #1 Canadian domain name provider by the .CA registry. You have been contracted as a Full Stack developer to develop your version of the Web Hosting Canada website.

Your website does not have to look the same as theirs but you should rather use their website (or similar websites) to inspire the look and feel for your implementation.

The implementation of the entire functionality for the website will be spanned over 5 Assignments.

In this assignment, you will ONLY focus on building views for your website/web application. No database connectivity is required for Assignment 2.

REMINDER:
All back-end functionality MUST be done using Node JS and Express.
Your views MUST be created with HTML
Your project must be uploaded to Heroku and provide the like.

Specifically, you are ONLY required to implement the following:

Features

Express web server set up

Create an Express web server that listens to incoming HTTP requests.

Route Handlers Implementation

Ensure that you create route handlers that will direct users to specific views (Static Content) when they navigate to the following routes:
● Blog Page (blog.html)
● Article Page (read_more.html)
● Create an Account Page (registration.html)
● Sign in to WHC Page (login.html)

Blog Page (https://whc.ca/blog/en)

You are required to build a well designed Blog page that can be access through this “/Blog” route. This page consists of the following sections:

1. Header – The header MUST contain the logo of your website and could contain the navigation bar and any other content you deem necessary.
2. A Navigation bar – The navigation bar can be within the header or defined as an entirely new area. It MUST have links that navigate visitors to a sign-up page and the login page.

3. A Search section – placed below the below the header and navigation section.

4. Content Section(s) – The sections MUST use a combination of grids, words, headings and images with the sole purpose of listing set of articles.

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

Article page (https://whc.ca/blog/almalinux-8-is-now-available/)

You are required to build a well designed page that view the entire article, which can be access through this “/article/:id” route. This page must have at least three (3) parts (the article image, the title, the content, and the comment form, as shown in figure below.

Please note, for this Assignment, Assignment 2, the data for this section must be static, i.e, it will not be pulled from a database.

Note: This view must also have a header, navigation, hero section, and footer like the Blog page.

Registration Page
You are required to build a well designed user registration form as shown in figure below in a html page that can be access through this “/registration” route.

Login Page
You are required to build a well designed login form as shown in figure below in a html page that can be access through this “/login” route.

Rubric

Criteria Not 0 Partially 1.5 Fully 2.5
Blog page
● Header
● Navigation
● Search section
● Hero Section
● Content Section
● Footer Section
Article page
● Header
● Navigation
● Hero Section
● Article details
● Footer Section
Registration /Login pages
● Registration form
● Login form
Overall look and feel
● Overall site is polished
● Used pleasing typography, colour palettes, and imagery
● Colour and layout are cohesive throughout the site
● Appropriate use of grids Poor (0) Average (0.5) Exceeds (1.5)