Description
Build upon the foundation established in Assignment 3 by providing new routes / views to support modern CSS techniques, html and publishing to a Cloud.
Specification:
Part 1: Creating a “theme.css” file within a “public” folder (public folder is located in the same level as server.js file).
Step 1: Creating a “theme.css” file and linking to it from our HTML files.
• Within the root of your application, create a new folder called “public”
• Within the “public” folder, create a “css” folder (this is where we will place our CSS file(s)
• Finally, within the “css” folder, create a “theme.css” file.
• Now that we actually have a “theme.css” file (albeit an empty one), we must include it in all of our “views” (.html files):
This will involve using the appropriate <link> element in the <head> of your files .
• With this complete, we must use the built in express “static” middleware within our server.js file to identify our newly created “public” folder as a source for static files.
Step 2: Updating “theme.css” to provide a unique look / feel for your application
Now that we have a “theme.css” file and its correctly linked in our html files, we can start to think about personalizing our web app by adding some CSS. There are plenty of resources online to help you pick colours and find (as well as generate) interesting styles to apply to selected elements. Some quality resources to get you started include:
• This “Colour Wheel”, used to pick complimentary colours and get their “hex” values:
https://www.canva.com/colors/color-wheel/
• A “Box Shadow” Generator, used to provide the complete CSS for adding a “box shadow” to an element: https://www.cssmatic.com/box-shadow
• Sample CSS for generating a “full page gradient” (Note: for this example to work for us, we must change the selector from “html” to “body, html” and instead of “#red” and “#blue”, simply use “red” and “blue” – or whatever other colours you like): https://coderwall.com/p/ape0jg/full-page-gradient-background
Additionally, to ensure that your gradient covers the entire page, regardless of how far you scroll, you must add “overflow: auto;” as well.
• Google Fonts, used to generate an @import statement to add to our “theme.css” file that will enable us to use 3rd party “web fonts” (Note: Add the @import statement at the top of your theme.css file and add the “fontfamily” style to whatever element you wish to style the font): https://fonts.google.com/
Regarding our own app, we must style to have an impact on the layout display (see the table in Step 3: Elements and Styles as examples). Note: Both step 2 and step 3 are for reference only – Please feel free to create/add styles and html if you have a specific vision for your app that goes beyond the requirements.
Step 3: Elements and Styles
The below table can be used as a guide to help you style your application. To get a sense of what your application could look like after applying you own styles to the following elements, please see the following “before” and “after” images (NOTE: Consider adding class=”table” to your <table> tags – this was done in the sample):
Before After
Element Style Suggestions
Navigation Bar
– Element with class “bg-light”
–
–
Background colour or gradient
Box shadow (outline or inset)
Navigation “Link”, ie “Home”, “About”, etc. etc.
– Anchor element with class “nav-link”
– Anchor element with class “nav-link” when “hovered” –
–
Cool font from “Google Fonts” (do not forget the
@import statement)
New Text Colour / hover colour, etc.
App Background
– Both body and html elements –
–
Full page gradient
Solid background colour
– Image (consider using “cover” –
https://www.w3schools.com/cssref/css3_pr_backgroundsize.asp)
Buttons
– Element with class “btn-primary”
– Element with class “btn-primary” when
“hovered”
–
–
–
–
Solid Background Colour
Gradient Background
Box shadow (outline or inset)
Different colour for hover
Table cells inside “odd” numbered table rows
– “td” elements, inside all (odd) “tr” elements (see :nth-child(odd) pseudoclass), inside a “table” element
–
–
Solid Background Colour
Gradient Background
All “Heading” elements
– All elements from “h1” to “h6” –
– Cool font from “Google Fonts” (do not forget the
@import statement)
New Text Colour
– Text shadow
All “Anchor” elements (HTML Links)
– “a” elements
– “a” elements when hovered – New Text Colour
If you’re enjoying tinkering with the look and feel, please feel free to style additional elements or update the existing html structure of the layouts. Again, the above steps are reference only.
Part 2 : Adding new View, Routes to server.js
This storefront.html page must have 2 applications – (1) use of Bootstrap and (2) the page has to be mobile responsive. You are allowed to include/embed css in the html page. The theme.css should have some common applications on this storefronmt.html.
Adding “Get” routes in server.js • Adding body-parser: Add the express.urlencoded({ extended: true }) middleware (using app.use())
• Inside your server.js file, add routes for any html file(s) created such as the route “/storefront”, which will simply send the newly created “storefront.html” etc.
• You must have a GET/ route defined for the home.html or to start the web application. All pages must have consistent navigation option to all other pages/routes.
Part 3: Pushing to Cyclic
Once you are satisfied with your application, deploy it to Cyclic:
• Ensure that you have checked in your latest code using git (from within Visual Studio Code)
• Open the integrated terminal in Visual Studio Code
• NOTE: If you have decided to create a new Cyclic application for this assignment, you can follow the “Cyclic Guide” on the course website.
Assignment Submission
• Add the following declaration at the top of your server.js file:
/********************************************************************************* * WEB322 – Assignment 06
* assignment has been copied manually or electronically from any other source (including web sites) or
* distributed to other students.
*
*
* Online (Cyclic) Link: ________________________________________________________
*
********************************************************************************/
• Type your working Cyclic link in the comment box when you upload in blackboard. Failure to do so will result in zero mark for this assignment.
Important Note:
• Submitted assignments must run locally, ie: start up errors causing the assignment/app to fail on startup will result in a grade of zero (0) for the assignment.
