Library Of Web Development Resources

Code Challenges:

• Challenges Info
• Challenges in Interviews

Explore:

• Blocks
• Smashing Magazine
• Hackernoon
• jQuery By Example
• tutorialzine
• r/InternetIsBeautiful
• WebPageFX
• SpeckyBoy
• DWB
• One Extra Pixel
• Scoth.io
• StackOverflow
• Wes Bos Courses

Interesting Projects:

• Chrome Experiments (particles Projects)
• Fluid Particles
• Particle Love by Edan Kwan
• I Remember
• Images of Change (They used TwentyTwenty js library)
• Windy (Check wind and weather patterns)
• Street Change
• KeyBright
• QuickDrawWithGoogle
• Touch Pianist
• Stars (Click on launch experiment)
• Map In Seconds
• Resurrecting a Dragon
• Firewatch
• Activation Nodeplus
• Jam3
• Processing.org (They have more examples)
• ThreeJS Scene
• Christopher Portfolio (from Chris Courses Channel)
• Eye
• Yoichi Kobayashi
• ShaderToy Galaxy

Project Management:

• dapulse
• trello
• coggle
• GoConqr

Misc:

• whatruns (Chrome extension to check browser compatibility of your webapps)
• JSONView (Chrome extension that makes JSON files readable)

CSS:

CSS Snippets:

• CSS-Tricks Snipets
• CodePen
• LittleSnippets
• snipplr (CSS, HTML and JS snippets)
• CSS Flow
• Parallax Scrolling Snippets

Design Inspiration:

• WebDesign Inspiration
• Awwwards
• CodeMyUI
• Dribbble
• Site Inspire
• The FWA
• Style Boost
• One Page Love
• Web Creme
• Kuler (Browse professionally created color palettes)

Free Assets:

Free Vectors:

• stockio
• Free Vector
• Free Vectors
• Vector Portal
• Vecteezy
• dryicons
• VEXELS
• FlatIcon
• freepik
• VectorStock

Free Images:

• StockSnapio
• Unsplash
• BURST
• Foodiesfeed
• GRATISOGRAPHY
• Negative Space
• freestocks
• picography
• MMT
• Skitterphoto
• LifeOfPix
• Little Visuals
• Death To Stock
• picjumbo
• IM FREE (Templates and icons too)
• New Old Stock
• pixabay
• jay mantri
• kaboompics
• epicantus
• Shot Stash
• Styled Stock

Other Free Assets:

• itch.io
• Kenney
• Glitch The Game
• Reiner's Tilesets
• Subtle Patterns
• openclipart

CSS Design Resources:

• Article: High Performance Animations
• Flat Ui Colors (Choose main colors)
• Paletton (Create color schemes based on color theory)
• MaterialUI (Color and Material ideas)
• Colorrrs (Random Color Generator)
• SectionSeparators (Inspiration for CSS section dividers)
• Ken Burns Effect (Pan and zoom into static image)
• Gradient World (CSS gradients from photographs)
• Convert px Values to % Values
• Whats my browser size

Libraries/Frameworks:

• Animate.css (Add animations with ease)
• Material Design lite (Library of material design elements and templates)
• Topcoat (Framework for clean and fast apps)
• DynCSS (Add functions to CSS and make it dynamic)
• Magic Animations (Library of animations)
• CSSpin (CSS Spinners and loaders)
• Feather (Open source icons)
• ionicons (More open source icons!)
• Font Awesome (Even more open source icons!!)
• Font generator (Combine fonts)
• On/Off Flip Switch (Self explanatory)
• UIkit (Framework)
• Bootsrap (Framework)
• Zurb Foundation (Framework)

Javascript

Libraries:

• ParticlesJS (Particles for Javascript)
• Three.js (3D objects in Javascript)
• fullPage.js (Snap scrolling ferature/Horizontal sliders, great for mobile web)
• Typed.js (Type animation)
• Waypoints.js (Trigger functions when scrolling to an element)
• Chart.js (Create beautiful charts with javascript and animate them)
• InstaClick (Increases website performance by pre-loading resources on mouse hover)
• Chartist (Like Chart.js but different!)
• MOTIO (A library for sprite animations and planning)
• ANIMSITION (Animate CSS Page Transitions)
• Barba.js (Fluid page transitions)
• TwentyTwenty (Highlight the visual differente between two elements with a slider)
• Vivus.js (Animate SVG images)
• WOW.js (Scrolling animation reveals)
• Scrolline.js (Progress bar for page scrolling)
• Velocity.js (High Performance Animation Engine)
• AOS (Similar to WOW.js a library of scroll animations)
• HandleBars.js (Build semantic templates effectively with no frustration)
• jInvertScroll (Horizontal scroll/ parallax)
• One page scroll (Similar to fullPage.js, a snapping scroll effect)
• Parallax (Beautiful parallax effect)
• typehead.js (Search completion)
• Dragdealer.js (Create draggable inputs with many applications)
• Bounce.js (Create incredible and interactive CSS animations, some mimics physics)
• pagePiling.js (Similar to fullPage.js but with a layered approach)
• multiScroll.js (Divided multi scrolling effect)
• favico.js (Dynamic favicons)
• Midnight.js (Switch fixed header on the go)
• ANIME (Amazing animations library)
• Sortable (Drag and drop elements)
• flexdatalist (Autocomplete)
• slideout.js (Touch slide out for mobile navigation)
• jquerymy.js (Real time two-way data binding)
• Cleave.js (Format input content for user convenience)
• selectize.js (Tag and select data)
• jQuery Nice Select (Replace native select element with a customizable dropdown)
• Tether (Anchor absolute positioned elements to other elements)
• Shepherd (Guide users through your app with tooltips)
• Tooltip (Another tooltip library)
• Select2 (Another customizable select box library)
• iziToast (Create elegant notifications)
• iziModal (Create elegant popups)
• p5.js (Drawing library)
• plotly (Plot charts, used by Google)
• D3js (Manipulate documents based on data)
• Moment.js (Easily format date and time data)
• GSAP (Animation library cross browser compatible and high performance)
• date-fns (Easily manipulate time and dates with a modular api)
• math.js (A library for all your matheMAGICAL needs)
• Handsontable (Javascript spreadsheet to format and manipulate your data)
• WebGL Earth (3D earth object)
• accessibilityJS (Discover client-side accessibility errors and fix them)

Performance Tricks:

• Refreshless Slider
• JS Performance Tips

Stay Updated:

• ES2015+ Cheatsheet

APIs:

API Management:

• APIGee

Cool APIs:

• BigML (Accessible machine learning API)
• LaunchLibrary (Find and explore future space missions)

Discover New APIs:

• ToddMotto Public APIs List
• abhishekbanthia Public APIs List
• Any API
• Programmable Web
• Google API Explorer

Youtube Channels:

• DevTips
• LevelUpTuts
• Traversy Media
• The Net Ninja
• Tech Talks

Podcasts:

• Front End Happy Hour
• JavaScript Jabber

Repos:

FYI Repos

• tech-interview-handbook
• Front-End-Checklist
• modern-js-cheatsheet
• every-programmer-should-know
• cosmos: every data structure and algorithm a programmer should know

Backend:

Libraries:

• Socket IO (live update changes, good for instant refreshless responses)