wdi-sea / front-end-hackathon

[css, javascript, jquery, hackathon, weekend]

#Weekend Front-end Hackathon

###Learn something new and build something cool in a weekend.

Your assignment for this weekend is to learn a new front-end library and build something cool. A big part of being a developer is being able to adapt and learn new technologies on your own. Below is a list of libraries that we think are interesting, but feel free to find something completely different (just nothing we've already learned).

##Getting Started

• Fork and clone this repository
• Run npm install to install dependencies
  • npm start - start the BrowserSync server
  • npm run lint:css - lint CSS
  • npm run lint:js - lint JS

####Optional: Using SASS

• gem install sass - install the SASS gem
• Create a folder called scss in the root of the project
  • Create a scss file within this folder, such as style.scss
• Compile the files in the scss folder by running scss scss:css
  • scss defines the input folder, css defines the output folder
  • Use the --watch flag to watch for changes. Example: scss --watch scss:css

##Requirements

• Fork and clone this repository
• Use an external JavaScript library to create a website of your choice
• Focus on front-end
  • Make something visually interesting
  • Make something you'd be proud to show to others
• Commit and push to Github frequently

Don't worry about a back-end for this project. Your project will probably just be an HTML file, some CSS, and some JavaScript (no Rails or Node needed).

##Front end (JavaScript) Libraries

Purpose	Home page	Demos
Drawing / visual	http://svgjs.com/	obvious on homepage
Drawing / visual	http://paperjs.org/	nyan, Other demos
Visual	http://oridomi.com/	obvious on homepage
Data Visualization	http://www.chartjs.org/	obvious on homepage
Data Visualization	http://d3js.org/	obvious on homepage
Web Components	https://vuejs.org/	5 Practical Examples of Vue
Physics	http://wellcaffeinated.net/PhysicsJS/	on homepage
3D	http://threejs.org/	rubicks cube / more demos
2D Game engine	http://www.html5quintus.com/	obvious on site
Voice recognition	https://www.talater.com/annyang/	homepage is demo
Typography	http://letteringjs.com/	links on homepage

Need more? http://www.javascripting.com/

##Tips

• Always remember, "good artists copy, great artists steal." Look at other websites and apps that you think are designed well and learn from them. Obviously don't make a direct copy, but derive inspiration from those who design well.
• Check out site websites like:
  • Adobe kuler - to see popular color schemes and figure out what colors go well with each other
    • while you are there, learn about the basics of color theory - it is an essential skill if you want to do front-end design/development
  • subtlepatters, to find cool patterns for your backgrounds
  • iconfinder - for some good looking icons for your project
  • behance - to see what people are designing and what the community thinks
  • Codepen

##Bonus

Make more pages and experiment more! Take inspiration from Jennifer Dewalt, an engineer who made 180 different sites in 180 days.

---

Licensing

1. All content is licensed under a CC-BY-NC-SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].