Assignment 3 Business Website

CS 2033
Multimedia and Communications II
Assignment 3
Business Website
Overview
You are creating a new small business and need to create the website as its online
identity. You must first consider what the company is selling (it should be some
kind of physical product, not a service) and come up with a name for it. Then
create an attractive website that catches the eyes of viewers and provides them with
the important information about this business and its products. There are several
requirements that your co-entrepreneurs require for the website so be careful to
follow these as you develop the website. You are given a lot of freedom in the
overall design so that part is up to you to make it as appealing as possible.
Overall Requirements
 You can choose to make a long, scrolling page OR a multi-page site.
o For a single page site, include "Back to top" links after each section
o For a multi-page site, include the same navbar at the top of each page
(see Top – Requirements for details)
 You must write your own HTML, CSS, and JavaScript code (No Kompozer
or Dreamweaver, etc.)
 You must use Bootstrap version 4.3.1 (the one shown to you in class and
lab) for the basis of the site
 Use the Bootstrap grid blocks for building the layout
 Include the following sections or pages:
o About Us / About the Company
o Products
o Registration
o References
 Add comments in your code between sections/modules
 Include a carousel image slider somewhere in the site
 Include a modal window (see Products – Requirements)
 Include parallax on a background image (BONUS: use JS or jQuery to
perform the "enhanced" type of parallax)
 Include ScrollFire to make an image grow when you scroll past a certain
threshold (refer to the soup bowl exercise in Lab 8)
 Include at least one CSS transition or animation (i.e. rollover with transition
counts).
 Remember that links within your site open in the same tab and links to
external sites open in a new tab
 Make the website look appealing, clean, and professional!
Folder Structure
 Name the project's root folder "business"
 Home page must be named "index.html"
 IF you choose to make a multi-page site, ensure all HTML files are named
properly (all lowercase, no spaces, relevant name, .html extension)
 Within root folder, add subfolders:
o "css" to contain CSS file(s)
o "images" to contain all images
o "js" to contain JavaScript file(s)
Meta Requirements
 Set the page title(s) to: CompanyName – PageName
 Use www.favicon.cc to create a simple logo that relates to the business and
insert it so it displays in the tab.
 Add links to external CSS and JavaScript files within the head. Do not use
internal CSS or JavaScript.
Top – Requirements
 At the top, display a horizontal image that relates to the company and use
absolute positioning to overlay the name of the company onto the image.
Add a tint layer between the text overlay and the background image.
o These must be 3 individual HTML elements positioned with CSS, not
a rendered banner image made in Photoshop!
 Create a Bootstrap navbar with links to each of the sections/pages
 After your main links in the navbar, add a dropdown menu labelled "Other
Sites" and include 3 links within that menu which point to real websites that
relate to this business (i.e. similar companies OR those who could be
potential partners OR companies who manufacture parts that your business
needs, etc.)
About Us – Requirements
 Write a summary of the business structure and what you sell (5-6 sentences)
 Include a picture that is relevant to the business
 Include a section about the "team"
o Come up with at least 3 members (could include yourself and 2 fake
people, or 3 fake people)
o For each team member, include a headshot or profile picture, name,
position in the company, and a short biography (3-4 sentences)
Products – Requirements
 Come up with at least 6 different products that your business is selling
 For each one, add a div that includes the following product information:
o Product name
o Product code (make up a code of numbers and/or letters for each
product of the same format)
o Image of product
o Description (2-3 sentences)
o Add to Cart button
 Clicking these buttons must open a modal window (Bootstrap
component) with a message to indicate that the item was added
to the cart. Note: this is not an actual working e-commerce site
so you don't have to create a cart that tracks all the added items.
 Include a message that says "Register for free to begin shopping online" and
link it to the Registration section/page
 All the product boxes should have the same design and they should all be
displayed neatly in a grid formation
Registration – Requirements
 Create a user registration web form with the following input fields:
o Email address – to enter their email address
o Password – to create their password
o Confirm Password – to confirm their created password
o Submit button – to register
 Include labels for the input fields (except the submit button)
 When the submit button is clicked, perform a validation function:
o Check if the email address contains an @ (at) sign. – set Email box
border to red if @ is not found, and green if it is found
o Check if the password is at least 8 characters in length – set Password
box border to red if it's not long enough, and green if it is long enough
o Check if the confirmed password is the same as the first typed
password – set Confirm Password box border to red if they're not the
same, and green if they are the same
References – Requirements
 This section will contain references to the images you used in your website.
For each one, provide a short description along with the URL (for the ones
obtained online). Convert the description and URL to a link that points to the
reference URL and opens in a new tab.
 These references are for pictures you found online, the favicon you created
(reference the website used to create it), and pictures you took.
 For pictures you took, just provide a description followed by "taken by me"
 Remember to use copyright-free images (Pexels, Unsplash, etc.)
Extra Information on Links
 Creating links to bookmarks on the same page involves 2 steps:
o Create the anchor at the spot where the link will be jumping to. To do
this, put your cursor in the spot where you want it and add the HTML:
<a name="AnchorName"</a (where AnchorName is a unique
name you want to give it, which should relate to its location)
o Now add the link using the standard <a href="" tag and for the href
value you will use #AnchorName, where AnchorName is the name of
the anchor you want to jump to. This must be the same name you gave
the anchor when creating it in the last step.
 Links that point to external sites must open in a new tab. To do this, add
target="_blank" within your link <a tag.
 Links that point within the same website are internal and should open in the
same tab. The normal link tag will default to this behaviour so nothing extra
is needed for these links.
 Email links will try to open Outlook or another email program when clicked.
To create such an email link, set the href attribute to the email address and
prefix it with mailto: (i.e. <a href="mailto:email@email.com"Email</a).
 Use relative paths for your internal links and image sources so that they
work both locally and on the server when you upload them.
Submission
1. Go through this document again and verify that you completed the
assignment exactly as instructed.
2. You must upload all your webpage files to GAUL (not Panther) via FTP.
a. Use WinSCP, FileZilla, or another FTP program.
b. Login to GAUL using your Western username and password and port
2033. The host name should be sftp://cs2033.gaul.csd.uwo.ca (OR
select SFTP in the protocol box and omit this prefix from the host
name).
c. Transfer your business website into the root area of this web server
space, maintaining the correct folder structure.
3. Verify that all the files uploaded properly.
a. Open the following link (replacing username with your Western
username): http://cs2033.gaul.csd.uwo.ca/~username/business/
b. You should see your main webpage load there. If you don't, verify the
filename is index.html and retry the previous step to upload the files.
4. Submit the working link on OWL.
a. Navigate into the CS2033 Assignment 3 page in OWL.
b. Copy the link of your GAUL business folder into the submission text
box (replacing username with your Western username):
http://cs2033.gaul.csd.uwo.ca/~username/business/
c. Submit the assignment on OWL. Do not just save it and leave. Ensure
that it is submitted! Check your email right away and look for the
automatic OWL email verifying your submission. Keep this email in
case of any discrepancy.