#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 dependenciesnpm start
- start the BrowserSync servernpm run lint:css
- lint CSSnpm 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 asstyle.scss
- Create a
- Compile the files in the
scss
folder by runningscss 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
- Adobe kuler - to see popular color schemes and figure out what colors go well with each other
##Bonus
Make more pages and experiment more! Take inspiration from Jennifer Dewalt, an engineer who made 180 different sites in 180 days.
- All content is licensed under a CC-BY-NC-SA 4.0 license.
- All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact legal@ga.co.