Git Product home page Git Product logo

final-project-103's Introduction

Assignment G

This is your remote assignment G repository readme file. You are seeing this file because you have successfully accepted the assignment link and GitHub automatically created a remote repository for you.

Objectives

Take the website that you analyzed for assignment E, redesign it and build it. The new website you build should be an improved redesign of the existing site. You don’t need to build the whole website, your assignment website only needs to include four finished pages (see further for details).

First you will plan what you will build, then you will build four pages and finally you will present your assignment to the class.

If you would like to use a business other than the one you used for assignment E then you will need to get permission from the instructor first.

Value

This assignment is worth 15% of your final course grade.

Deadlines

  • CVS1: Present in class on Monday November 28. Submit by midnight on Friday December 2.
  • CVS2: Present in class on Thursday December 1. Submit by midnight on Friday December 2.
  • CRS1: Present in class on Friday December 2. Submit by midnight on Friday December 2.
  • DLU: Submit by midnight on Friday December 2.

In-class presentations are firm dates. Missing your presentation will result in a 0 for that line of the rubric. Absolutely no extensions will be provided beyond Friday December 2 which is the last day of classes for the Fall 2022 term. Plan accordingly and push your work to GitHub often!

Items to Submit

1. Project Documentation

Your project documentation must be submitted as a PDF in brightspace. It must include:

  1. Website Purpose

    • Client: Describe the “client” (the business or organization you chose) with a link to their current website.
    • Competitors: Describe who their competitors are with links to the websites of competitors or similar organizations
    • Need: Explain why the "client" needs a new website (why their current site isn’t appropriate and how your proposed website will align with the client's business goals better than their existing website).
  2. Sitemap

    • Draw a visual sitemap that shows all the pages in the redesigned website (not just the ones that you will build) and that includes a list of what content will be on each page and what the visitor can they do on each page.
  3. Wireframes

    • For every page that you will build, hand-draw a wireframe of the layout of the page’s content. You don't need to draw wireframes for pages that you are not building for this assignment.
    • Tips:
      • Using dotted paper can be helpful https://sneakpeekit.com/.
      • Explore many potential layouts.
      • Your wireframes should include all the elements that will be in your website’s final design including headlines, placeholders for images, button text, etc, but none of it should be styled. The purpose of these wireframes is to establish the structure of the layout and how the user will interact with the content. Use a highlighter to show what can be clicked on in each page.
      • As you draw your wireframes, think ahead to the HTML structure of the page and what CSS selectors you will use for each area of content on the page.

2. Website Repository

Your website must be submitted as a GitHub remote repository link in Brightspace.

Website content must include:

  • Website must include 4 pages minimum. You don’t need to include all the content from the existing website. Your website must include 4 fully finished pages (for example: homepage, about, services, contact). Don't attempt to build e-commerce or anything that we haven't learned in class. If the complete website would normally include more pages than 4 then you can create the HTML file for each extra page and link to it in the navigation/content, but leave the pages's content blank.
  • Website must also include either multimedia or a web table.
  • Website must include a web form that includes at least 3 types of form controls (inputs).
  • You can reuse content and images from the original website. If you need to use new images, you can source them from royalty free stock image sites such as:
  • Add the following disclaimer in the footer of your website on every page: “This is a fictional website that was designed and coded as an educational exercise. It is not intended to be seen outside of the class environment. None of the content and images were approved by the business owner.”

Website code must include:

  • All styles must be coded in external stylesheet(s).
  • Comments must be included in the code to point out features and explain the code.
  • At least 2 Google fonts must be used (you can use as many font variants as you like).
  • Page layouts throughout the site must demonstrate a good understanding of flexbox.
  • All pages should respond to different display sizes with a layout that adjusts accordingly (not just fluid, media queries must be used) and responsive navigation. The pages should look perform well on small, medium and large screen sizes and not be broken in between sizes.
  • Some hover effects using transition and transform properties (hover effects should not be distracting to the visitor).
  • All coding best practices must be implemented. Keep your HTML clean and structural, plan your CSS naming conventions with respect to the different pages and their content blocks before you start coding, organize your CSS.

3. Self-evaluation

Complete the provided rubric and submit in as a PDF in Brightspace.

In-class Presentations

CVS and CRS students will have 8 to 10 minutes to present their website to the class in person. Bring your project documentation to class on a USB stick, make sure that your work is pushed to GitHub before class. Present your assignment to the class as though you are presenting your solution to a client, using the overhead projector. Presentations will take place in groups and a schedule will be provided closer to the date.

final-project-103's People

Contributors

dhuds1 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.