This is INDIVIDUAL work

Start: 3rd Week of Class

Due: Feb. 27 @11pm (originally Feb. 22)

Points 105 (see rubric on Canvas for Evaluation GUIDELINES)

 

 

 

 

 

 

 

 

 

Create a web-site for a ficticious company that sells some kind of products. Your web-site should have the following important information and features. YOU MUST USE CSS styles for your navigation bar that appears on EVERY page. Make sure you use Bootstrap to create a mobile ready website (that like our website changes look to a mobile forward one for lower resolution devices, so navigation and other important features become vertically stacked for lower resolutions). Bootstrap is a popular CSS Framework for developing responsive and mobile-first websites. Part of this assignment's work is for you to learn Bootstrap on your own.

• Homepage(home.html) = Attractive entrance to site that contains some images and some information about the website
  
• Shop (shop.html)= page that contains a table or some organizaiton of 25 links (linked on the product name) to the individual product pages.
• Individual Product Pages (ProductX.html)= You need a minimum of 25 product pages that will give an image of the product and details about the product in addition to a "add to cart" button (this will mean a minimum of 25 individual product pages). Use a design template so that all of your project pages look the same, only the content is different.
• 
• Account (account.html)- this contains the ability to login or to create a new account (links to createAccount.html) . Create all the HTML forms for each of these operations.
• createAccount.html - this contains a html form to create a user account. Collect login and password and email. Have optional fields for street, city, state, zip, email, phone. Perform JavaScript validation on the form requireing the login, passord and email fields and when others provided validate they are complete and the form of each.
• Navigation (on ALL pages) should include links to Shop and Account. In later projects you will add more to your navigation bar/optoins. There should also be some identity (name + logo) that links to the Homepage. Navigation consistently present on all pages
• Design using CSS+ = Create directory containing all your CSS files, and also a JavaScript directory, iincluding any Bootstrap files. Organize your work into appropriate directories (maybe you need a products directory, etc). Regarding Design- use design principles including consistency, redundancy, allignment and proximity. Use good/safe colors that will work for your audience, consider readibility, clarity, and the mood of your choices. If you use a Design Template you need to discuss where you go this from in youir submission and explain it.
• javascript = directory containing all your JavaScript files
• mobile ready = when website running on larger and smaller (to mimic mobile device) resolutions (you can zoom in and out) the website uses Bootstrap to create a web design including navigation changes like horizontal to vertical layout when going from higher to low resolution. The exact design is something you should decide upon but, minimally include navigation layout changes. Part of this project is self-learning of Bootstrap. If templates are choosen, you will need to explain in detail the Bootstrap Javascript+CSS code and how it works in the demo.(see discussion of mobile ready demo below)
  

 

IMPORTANT Regarding the use of Design Templates and Other existing code: It is okay to use other resources like design templates to create your site. However, you can not use some kind of automated website creation tool where you enter in information into a form and it generates your code. I want you through this project to learn what HTML, CSS and client side JavaScript is as well as BootStrap.

 

 

 

Upload all of the content to your csweb01 web server account as indicated in the following diretory structure.

 

 

Then:

 

1. Validate your HTML and CSS using the W3Schools Validator and fix any error. Finally save the results of validation (you can do screenshots).
2. Create a Github repository and create a "code" directory and also upload ALL of the directory structure content to this github directory
3. Create a wiki for your Github repository that contains:

• home page = link to the website, disccussion of what CSS , JavaScript you created
• validation = contians screenshot of your validation and discuss any thing listed in the validation
• mobile ready demo = show screenshots of the website running on larger and smaller (to mimic mobile device) resolutions (you can zoom in and out) and in the low resolution (like mobile phone) it should display navigation and other important features in a vertical format or similar to be more accessible on a lower resolution device. The design is something you should decide upon and there a numerous examples online you can lean on for use. HOWEVER you need to add some CSS and Javascript and explain in detail the code and how it works in the demo. Recall this involves the use of Bootstrap.
• createAccount demo = link to a YouTube video demonstration of the createAccount form and the JavaScript validation working -- try to hit submit when you have nothing typed in and then when partial information and fianlly with everything completed.(record and upload mpg to github or upload to youtube and provide the link).
• Templates and other code = Discuss any templates, framework code or other code you have used AND GIVE references with links (use IEEE standard citation format) to any templates (CSS, Java, HTML). Discuss how this code works.

 

 

 

 

 

• Feb. 22, @ 11pm

   

  • Turn in BOTH URL to the Github repository AND the URL to the csweb01 website to Post to Canvas->Assignments->Project 1 AND in the text post reference to links of where you got any templates for CSS, BootStrap, etc. that you used and how they work.