Coder Social home page Coder Social logo

xuke918 / infographic-effects-interactivity Goto Github PK

View Code? Open in Web Editor NEW

This project forked from ltw-webdev-javascript/responsive-infographic-paper-plan

0.0 2.0 0.0 107 KB

Finish off the infographic by adding CSS effects and Javascript interactivity.

CSS 7.89% HTML 90.94% JavaScript 1.18%

infographic-effects-interactivity's Introduction

Infographic effects & interactivity

  • Approx. completion time: 10 hours
  • Deliverables: 1 HTML file, 1 CSS file, 1 JS file, images

This is a cumulative website project, with the goal of proving to me that you can do everything learned this term—by yourself.

  • Fork this repository.
  • Copy the responsive website files that we did earlier into this folder.
  • Add transitions, animations and Javascript to complete the website.
  • Hand in all the milestones & deliverables listed below.
  • Run it through Markbot and make sure it passes all the checks.

Markbot will expect

  • Valid HTML following best practices.
  • Valid CSS following best practices.
  • Valid JS following best practices.
  • css/main.css, js/main.js & jquery is linked.
  • That jQuery is used in main.js.
  • animation, transition, @keyframes

Deliverables & milestones

1. Paper plan

Due end of class week 13

On paper, plan out the website’s interactivity & effects like we did in these activities:

Show the paper plan to Thomas by the end of class week 13. Late submissions or submissions not presented in person will not be accepted.

2. Code milestone

Due end of class week 14

In class, during week 14 you must show Thomas progress on the interactivity & effects code. At this point the code should be far along.

Show the working website to Thomas by the end of class week 14. Late submissions or submissions not presented in person will not be accepted.

3. Browser testing

Due end of class week 15

In class, during week 15, we’ll be testing everybody’s website in different browsers to make sure they look good.

You’ll be required to submit screenshots for your website for every browser listed.

When I’m grading the websites I’ll be using a random browser to view your site.

4. Request for grade

Due last day of the term, Friday at midnight

Since the goal of this project is to prove to me that you can do everything learned this term I want a written statement denoting your proof—and a grade you think you deserve.

The written explanation should be a list of things we learned this term that you applied to your website. Most importantly how and why your website proves you can do the things we learned this term. Explain to me why you deserve the grade you chose for yourself.

  • Give yourself a grade for the project: F, C, B, A, A+
  • Write an explanation as to why the website shows you’ve learned and can apply everything from the term.
  • Be honest with yourself and with me (I’ll notice if you’re not)

I will read your explanation while looking over your websites. If your feedback is honest and just, you will receive the mark you chose.

Submit the explanation to the Interactive effects & interactivity assignment on Canvas—there’s a text entry field.

5. Final website

Due last day of the term, Friday at midnight

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.

Markbot will give you 1/100—this is just a confirmation so you know that the URL was handed in properly—it is not your final mark.

infographic-effects-interactivity's People

Contributors

xuke918 avatar thomasjbradley avatar

Watchers

James Cloos avatar  avatar

infographic-effects-interactivity's Issues

iPhone 6, Safari 9.3.1

Awesome website, takes too long for the wiggle to happen on this part of the page. Otherwise it's great!
img_0818 2

Safari 9.0

Everything works perfect on this version of Safari.
Your design is awesome Ke! I'm really impressed
screen shot 2016-04-29 at 4 30 31 pm

Firefox

space issues. Other than that the animations are working great
screen shot 2016-04-29 at 5 30 29 pm

Opera

Add cursor: pointer; to hover so people know to click. :D

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.