[SOLVED] Web322 assignment 3 build upon assignment 2 by adding a custom landing page with links to sites, as well as an “about” page and custom 404 error page.

Build upon Assignment 2 by adding a custom landing page with links to sites, as well as an “about” page and custom 404 error page.  Additionally, we will be updating our server.js file to support more dynamic routes, status codes and static content (css).  Finally, we will publish the solution using Vercel.

If you require a clean version of Assignment 2 to begin this assignment, please email your professor.

 

NOTE: Please reference the sample: https://as3-322-sample.vercel.app/ when creating your solution.  The UI does not have to match exactly (e.g., the font, size, theme, the sites shown in the home page cards, etc.), but the basic functionalities and UI components must be implemented as shown in the sample app using the code or approaches discussed in class, e.g., navigation bar with region dropdown, card, layouts of the page and the content in the card, etc…

 

 

For this assignment, we will be adding multiple pages, including a landing page with links to some of your sites.  To make these appealing to the end user, we will be leveraging our knowledge of Tailwind CSS.  With your Assignment 2 folder open in Visual Studio Code, follow the follow the steps identified in Tailwind CSS & daisyUI to set up Tailwind CSS, ie:

 

 

 

 

Now that we have our primary “main” css file in place, we can focus on creating the “views” for our application.  At the moment, this is home.html (“/”), about.html (“/about”) and 404.html (no matching route).  These must be created according to the following specifications:

 

NOTE:  Before you begin, do not forget to mark the “public” folder as “static”, ie: app.use(express.static(__dirname + ‘/public’)) in your server.js file

 

File: views/home.html

 

 

File: views/about.html

 

This file should follow the same layout as views/home.html, ie: reference main.css,  have a <title> property and identical navbar.  However, the navbar must have the text “About” highlighted by using the “active” class, ie:

 

<a class=”active” href=”/about”>About</a>

 

Additionally, this view should feature:

 

 

 

File: views/404.html

 

Once again, this file should follow the same layout as views/home.html, ie: reference main.css,  have a <title> property and identical navbar.

 

Additionally, this view should feature some kind of 404 message / image for the user.  The sample uses a “hero” daisyUI component

 

 

To support dynamic routes, status codes and our custom 404 page, we must make the following changes to our server.js code from Assignment 2:

 

 

 

 

Finally, once you have tested your site locally and are happy with it, it’s time to publish it online.

 

Check the “Vercel Guide” for more information about the deployment process.

 

/********************************************************************************

*  WEB322 – Assignment 03

*

*  I declare that this assignment is my own work in accordance with Seneca’s

*  Academic Integrity Policy:

*

*  https://www.senecacollege.ca/about/policies/academic-integrity-policy.html

*

*  Name: ______________________ Student ID: ______________ Date: ______________

*

*  Published (web app) URL:

*

********************************************************************************/