Uploading HW to Github

# Uploading HW to Github

Using the repository we created in class.

![Put the Homework Files in Folder](../slides/homework.jpg)
![Commit the Changes and Push](../slides/commit.jpg)
![Go to your repository on Gihub.com](../slides/gotogithub.jpg)
![Visit your uploaded document](../slides/githublink.jpg)

*If you make any additional changes please make sure to save and upload your assignment again*

# HTML/Resume Assignment

* Your name, at the top of the page as an h1 heading.
* Use header tags for all section heads
* A paragraph about yourself
* Add a photograph of yourself
* Add Work Experience
* A list of hobbies or interest displayed as an HTML ordered or unordered list.
* If you do not have a resume look at examples to format and have the right information.

## Must haves
* Proper html document setup (10 Points)
* Use meta author and description tags (10 Points)
* Using heading tags for your different sections (10 Points)
* Add a comment (5 Points)
* Address tag (You can use a fake or school address) (10 Points)
* Create a table (10 Points)
* Ordered or unordered list (10 Points)
* 2 links (a tags) (10 Points)
* 2 italics or bold tags (10 Points)
* At least one image (10 Points)
* Resume Styling (5 Points)

Create a resume folder. Place an index.html file in the folder. Then place your code in that file. Create an images folder in your resume folder. Please link your Resume folder on the index.html file in your hw folder.

Folder Structure

* Resume (folder)
  * index.html (file)
 * images (folder)


# HTML/CSS Assignment

Style your Resume using CSS styling elements
* Style 2 links
  * Set the color of the links and remove the underline. - 10 points
  * Style :hover effect. - 10 points
* Use atleast one custom fonts - 10 points
* Make sure you use an external stylesheet using the <link> tag. - 10 Points
* Style 2 elements (ie p, b, address, etc) - 10 points
* Create and use 5 id - 25 points
* Create and use 2 classes, use the classes more than once - 20 points
* Explore a new CSS Property: Find a property from this [list (Mozilla CSS Reference)](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) and use it in at least one id or class
* Make sure you validate your work ([css validator](https://jigsaw.w3.org/css-validator/), [html validator](https://validator.w3.org/)) - 5 points

# Responsive Site

For this assignment, you will be asked to create a personal site.  For this assignment you will need to use css grid and media queries to create a dynamic one page responsive website. Choose a hobby, cause, or a topic you might be interested in. Your site will need to have a desktop and a mobile view.

Points

* Desktop and Mobile Layouts
  * External Style Sheets for each
  * Styling each layout - (80 points)
* Navigation - (40 points)
  * Mobile and Desktop Navigation Layout
* 4 different multi row/column grid content sections - (60 points)
  * Examples
    * Gallery
    * Multi column text
    * Text and Image
* HTML - (10 points)
 * Must Used header, main, footer tags
 * Properly written
 * Styles where appropriate
* Create a wireframe/design drawing (10 Points)



# jQuery Assignment Part A - How to Website (140 Points)

* Option 1 - How-to Website
  * Create a recipe page, or how to make something, i.e. craft. Include ingredients, directions, and Tips.
* Option 2 - Vacation website
  * Create a vaction website, based on a place you have visited before. Include images, locations, tips, and places to visit.

 Your page should have a minimum of 5 steps. Take images or video. Use organizational tags and css to organize and style your page.

 Use jQuery to show and hide steps or images. You can use tabs example to cycle through different steps. You can also use the .html() or .css() function to change or augment your html.


  Points (minimum of):
  * 3 .click() or .mouseover() or .mouseleave() events - 60 Points (20 Points per event)
    * 1 .show() or .hide() or .toggle() events - (10 Points)
    * 1 add .html() - (10 Points)
    * 1 add .css() - (10 Points)
  * 40 points – HTML/CSS and Creativity
    * Must Haves:
      * Minimum 5 Images (10 points)
      * 1 Header tag (5 Points)
      * Intro paragraph (5 points)
      * 5 item List (5 points)
      * Using CSS Creatively (25 Points)
        * Making your site presentable

# jQuery Assignment Part B - Plugins (60 Points)

 Choose and implement a jQuery plugin. You must apply the plugin on a minimum of 5 Elements or areas on your site.

 Points:
 * 10 points – Successfully installing/using jQuery Plugin
 * 50 points – 10 points per element used


<!-- # jQuery Assignment 2 - Plugins

 Choose and implement a jQuery plugin. Create a one page site. You must apply the plugin on a minimum of 5 Elements or areas on your site.

 Name your site vacation folder

 Points:
* 20 points – Successfully installing/using jQuery Plugin
* 50 points – 10 points per element used
* 30 points – HTML/CSS and Creativity
  * Must Haves:
  * Minimum 5 Images (10 points)
  * 5 item List (5 points)
  * 1 Header and Intro paragraph (5 points)
  * Using CSS Creatively (10 Points)
  * Making your site presentable -->




# FINAL PROJECT (300 POINTS)

## Final Deliverables
* Website (300 Points)
* Creative Brief (25 Points)
* Wireframes/Sketches (25 Points)
* Online Marketing and SEO Plan (25 Points)
* Google Analytics (25 Points)

  The final project will be either a website for a portfolio, a story, or on a subject you care deeply about.

  * Deploying/Presenting final website (50 Points)
    * Minimum 3 gridded sections
      * 4 Pages or
      * 1 Page with 6 information sections

  * Responsiveness Requirements (100 Points)
    * Use of Media Queries
    * Desktop and Mobile Layouts
      * Navigation
      * Main Layout
    * Using CSS grid  
  * jQuery and jQuery Plugins (50 Points)
    * Use jQuery functions and plugins to add thoughtful interaction to your website
  * Design/Creativity (100 Points)
    * Making sure your images and content express the intent of your site
    * Use HTML structure and semantic tags to provide information hierarchy
    * Use CSS tags such as, colors, fonts, grid, etc to create a theme and design for your website.
    * Use HTML and CSS tags to create professional design and layout for your project.
    * Make sure that images are properly scaled and fit in your layout
    * Content quality – Clear message (what are you trying to saying)

### Creative Brief, Wireframe, inspirations

In your final project folder, make sure you include the following information

* Wireframes (25 Points)
  * Create simple layouts for each distinct pages, scan or take pictures of your designs and place them in your project folder
* Creative brief (25 Points)
  * Look at the section below and answer all the appropriate questions (The more details the better!)
  * List 5 portfolios/websites that are inspirations

#### What’s a creative brief?

     In the best cases, a creative brief is a document created through initial meetings, interviews, readings and discussions between a client and designer before any work begins. Throughout the project, the creative brief continues to inform and guide the work. A good creative brief will answer these questions:
     * What is this project?
     * Who is it for?
     * Why are we doing it?
     * What needs to be done? By whom? By when?
     * Where and how will it be used?

     [The 10 most important things to include in a creative brief](https://www.mohawkconnects.com/feltandwire/2011/02/08/the-creative-brief-10-things-it-must-include/)
     1. Background Summary: Who is the client? What is the product or service? What are the strengths, weaknesses, opportunities and threats (or SWOTs) involved with this product or service? Are there existing research, reports and other documents that help you understand the situation?
     2. Overview: What is the project? What are we designing and why? Why do we need this project? What’s the opportunity?
     3. Drivers: What is our goal for this project? What are we trying to achieve? What is the purpose of our work? What are our top three objectives?
     4. Audience: Who are we talking to? What do they think of us? Why should they care?
     5. Competitors: Who is the competition? What are they telling the audience that we should be telling them? SWOT analysis on them? What differentiates us from them?
     6. Tone: How should we be communicating? What adjectives describe the feeling or approach?
     7. Message: What are we saying with this piece exactly? Are the words already developed or do we need to develop them? What do we want audiences to take away?
     8. Visuals: Are we developing new images or picking up existing ones? If we are creating them, who/what/where are we photographing or illustrating? And why?
     9. Details: Any mandatory information that must be included? List of deliverables? Preconceived ideas? Format parameters? Limitations and restrictions? Timeline, schedule, budget?
     10. People: Who are we reporting to? Who exactly is approving this work? Who needs to be informed of our progress? By what means?


### ONLINE MARKETING AND SEO PLAN (25 POINTS)

Come up with a marketing plan for your website. Your goal is to promote your website. Using a budget of $1000, explain your business rationale. Choose either [twitter](https://ads.twitter.com/), [google adwords](https://ads.google.com/home/), or [facebook](https://www.facebook.com/business/) to create your campaign.

##### Thank about the following questions:
* Create a pdf or word doc for your submission
* What areas/locations are you target and why?
* List what keywords are you going to use and buy?
* What is the duration of your campaign? Try to explain your reasoning on the duration. Is there an event, etc?.  
* Include screenshots of your campaign

![Google Ads](../images/googleads.png)

### Google analytics on your site (25 POINTS)

Add the Google Analytics script tag to your index.html