1. CSS-Tricks
  2. CSS Wizardry
    Front-end architecture and performance engineering.
  3. A List Apart: Code
  4. DajlyJS
    A JavaScript Blog.
  5. Blog TeamTreehouse
  6. Echo JS
    Echo JS is a community-driven news site entirely focused on JavaScript development, HTML5, and front-end news.
  7. HTML5 Rocks
  8. JS GooDies
  9. JS Central
    JavaScript news and resources.

    JavaScript Libraries

  1. jQuery
    jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  2. YUI
    YUI is a free, open source JavaScript and CSS library for building richly interactive web applications.
  3. Zepto
    Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.
  4. Dojo
    A javascript toolkit.
  5. MooTools
    MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
  6. Minified.js
    Minified.js is a client-side JavaScript library that's both powerful and small. It offers jQuery-like features (DOM manipulation, animation, events, HTTP requests) and utility functions (collections, date&number formatting, date arithmetic, templates) with a single, consistent API.
  7. Prototype
    Prototype takes the complexity out of client-side web programming. Built to solve real-world problems, it adds useful extensions to the browser scripting environment and provides elegant APIs around the clumsy interfaces of Ajax and the Document Object Model.
  8. Snap.svg
  9. MV*

  10. AngularJS
    HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application.
  11. Backbone.js
    Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.
  12. Vue.js
    Vue.js is a library for building interactive web interfaces. It provides data-driven components with a simple and flexible API.
  13. Ext JS
  14. Ember.js
    A framework for creating ambitious web applications.
  15. Knockout
    Simplify dynamic JavaScript UIs with the Model-View-View-Model (MVVM) pattern.
  16. Durandal
    MVC? MVP? MVVM? Yes. Messaging, navigation, modals? Check. Durandal has the features you need to build whatever apps you can imagine.
  17. React
    A javascript library for building user interfaces.
  18. Ractive.js
    Ractive.js is a template-driven UI library, but unlike other tools that generate inert HTML, it transforms your templates into blueprints for apps that are interactive by default.
  19. Mithril
    Mithril is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.
  20. Utilities

  21. Underscore.js
    Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders.
  22. Lo-Dash
    A utility library delivering consistency, customization, performance, & extras.
  23. Moutnew
    MOUT is a collection of modular JavaScript utilities that can be used in the browser as AMD modules or on node.js. It provides many helper methods similar to those found on other languages standard libraries (ie. Python, Ruby, PHP).
  24. Mobile

  25. jQuery Mobile
    jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.
  26. thumb.js
    Add touch support to your browser. TouchEvent polyfill. Support touch-less devices. Handy for desktop debugging. PhoneGap and mobile web friendly.


  1. Grunt
    The JavaScript Task Runner.
  2. Gulp
    The streaming build system.
  3. Bower
    Web sites are made of lots of things — frameworks, libraries, assets, utilities, and rainbows. Bower manages all these things for you.
  4. Component
  5. Duo
    A next-generation package manager for the front-end.
  6. Version Control

  7. GitHub
  8. BitBucket
  9. Git
    Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.
  10. Mercurial
    Mercurial is a free, distributed source control management tool. It efficiently handles projects of any size and offers an easy and intuitive interface.
  11. New Project

  12. Yeoman
    Project generator. It's designed to help you start a project quicker. You tell it which base to start from and then it figures out the rest. You can create your own templates.
  13. HTML5 Boilerplate
    Boilerplate meant to help you with starting new project and save on time without repetitive tasks when creating new website.
  14. Initializr
    HTML5 templates generator to help you getting started with a new project based on HTML5 Boilerplate.
  15. Blank WordPress Theme
  16. Responsive Boilerplate
    A lightweight (3kb) cross browser grid system, elegant & minimalist, made with only three main classes and 12 columns. Build with mobile first in mind, fits any screen size, pre-packed with some extra css helpers for mobile devices.

    Linting & Processing

  1. Dirty Markup
    Clean your HTML, CSS and JavaScript code.
  2. The Prettifier
    The Prettifier provides code formatting and syntax highlighting for common programming languages and file formats including JSON, CSS, HTML, XML, SQL, PHP, Perl, Apache Config, and JavaScript, where editing often takes place outside of an IDE.
  3. HTML

  4. The W3C Markup Validator
    This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
  5. HTML Tidy
    HTML Tidy is a tool for checking and cleaning up HTML source files. It is especially useful for finding and correcting errors in deeply nested HTML, or for making grotesque code legible once more.
  6. Another HTML Lint
    Another HTML-lint 5 is a free checker for HTML syntax.
  7. CSS

  8. CSS Lint
    A lint tool performs static analysis of source code and flags patterns that might be errors or otherwise cause problems for the developer.
  9. ProCSSor
    Procssor cleans and organizes your css the way you want it.
  10. CSSComb
    Makes your code beautiful.
  11. JavaScript

  12. JSHint
    Tool that helps to detect errors and potential problems in your JavaScript code.
  13. The Online Lint



  1. HAML
    Beautiful, DRY, well-indented, clear markup: templating haiku.
  2. Slim
    Ruby Template Engine.
  3. Jade
    Node Template Engine.
  4. Markdown
    Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
  5. CSS

  6. SASS
  7. LESS
  8. Stylus
  9. Myth
  10. JavaScript

  11. CoffeScript
    CoffeeScript is a little language that compiles into JavaScript. Underneath that awkward Java-esque patina, JavaScript has always had a gorgeous heart. CoffeeScript is an attempt to expose the good parts of JavaScript in a simple way.
  12. LiveScript
  13. Typescript


  1. Foundation
  2. Bootstrap
  3. Jeet
  4. Pure
  5. Skeleton
  6. Bourbon Neat
  7. Semantic UI
  8. Unsemantic
  9. MaterializeCSS
  10. UIkit
  11. Gumby
  12. Ink Interface Kit
  13. Susy
  14. Kube
  15. Blueprint
  16. GroundworkCSS
  17. YAML
  18. Responsive Grid Sys. #1
  19. Responsive Grid Sys. #2
  20. Base
  21. Ingrid
  22. Toast
  23. Less Framework
  24. Mueller Grid System
  25. Golden Grid System
  26. 960 Grid System
  27. Tuktuk
  28. Responsive Aeon


  1. Can I use...
    Really useful tool which shows browser compatiblity for HTML, CSS & SVG elements/attributes.
  2. Autoprefixer
    Tool for autoprefixing your css code with data from
  3. -prefix-free
    -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
  4. Modernizr
    JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
  5. HTML5 Please
    Look up HTML5, CSS3, etc features, know if they are ready for use, and if so find out how you should use them – with polyfills, fallbacks or as they are.
  6. CSS Resets

  7. Eric Meyer's Reset CSS
    The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
  8. Normalize.css
    Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. Alternative to CSS resets.
  9. HTML5 Doctor Reset CSS
    Eric Meyer's Reset CSS modified for HTML5.
  10. YUI CSS Reset
    CSS Reset from Yahoo YUI library.
  11. Testing

  12. Browser Stack
    Paid live, web-based browser testing. It has free feature where you can test online websites and generate screenshots in various environments.
  13. Browser Shots
    Take screenshots of online website in various environments.
  14. Responsiveness

  15. Am I Responsive?
    Check if your site is responsive.
  16. Responsinator
    Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.
  17. Screenfly
    Screenfly offers many features to test responsiveness of websites.


  1. FileZilla
    Best free open source FTP client/server.
  2. Prepros
    Preprocessing, Live Browser Refreshing, Multi Device Testing and Much More.
  3. Mixture
    Mixture. A rapid front-end development toolset for Mac & Windows.
  4. LiveReload
    CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work.
  5. IDEs

  6. WebStorm
  7. Aptana Studio 3
  8. Text Editors

  9. Sublime Text
    This site was written in this! Best to use with Package Control -
  10. Brackets
    Really cool free and open source code editor with nice features.
  11. Light Table
    The next generation code editor.
  12. Atom
    Atom is modern, approachable, and hackable to the core text editor.
  13. Browsers

  14. Google Chrome
  15. Mozilla Firefox
  16. Opera
  17. Internet Explorer
  18. Safari

    Browser Extensions

  1. LiveReload
    [All] CSS edits and image changes apply live. CoffeeScript, SASS, LESS and others just work.
  2. Google Chrome

  3. Dimensions
    [Chrome] Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser. Even on image files.
  4. WhatFont
    [Chrome] The easiest way to identify fonts on web pages.
  5. Ghostery
    [Chrome] Protect your privacy. See who's tracking your web browsing with Ghostery.
  6. MeasureIt
    [Chrome] Draw out a ruler to get the pixel width and height of any elements on a webpage.
  7. Firefox

  8. Firebug
    [Firefox] The most popular and powerful web development inspector tool.
  9. Empty Cache Button
    [Firefox] Cache clearing made easy. One click.

    Web Fonts


  1. Google Fonts
    All fonts are open source and free for commercial use.
  2. Adobe Edge Web Fonts
  3. Font Squirrel
    All fonts are free for commercial use.
  4. Paid

  5. Typekit
    Font subscription service.

    Icons Fonts

    Finders & Generators

  1. GlyphSearch
    Search for glyphs in Font Awesome, Glyphicons, IcoMoon, Ionicons, Octicons & Foundation.
  2. IcoMoon
    Custom Built and Crisp Icon Fonts, Done Right.
  3. FlatIcon
  4. Fontello
    Icons font generator.
  5. Packs

  6. Font Awesome
    The iconic font and CSS toolkit.
  7. Typicons
    Pixel perfect all purpose vector icons.
  8. LivIcons
    Animated icons font.
  9. IconMelon
  10. Iconic
  11. Octicons
    Offical GitHub icons font.
  12. DevIcons
    Iconic font made for developers, code jedis, ninjas, HTTPsters, evangelists and nerds.
  13. NounProject


    Image Optimization

  1. Tiny PNG
    Shrink PNG files while preserving quality and transparency. They even have transparency in IE6!
    4 file formats supported: JPEG, PNG, GIF, SVG. 2 types of compression: lossless and lossy.
  3. Favicon

  4. Real Favicon Generator
  5. Generators

  6. Trianglify
    Generate colorful triangle meshes that can be used as SVG images and CSS backgrounds.
  7. Placeholdersnew

  8. Unsplash It
    Beautiful placeholders using images from unsplash.
  9. Placehold It
    A quick and simple image placeholder service.
  10. UI Faces
    Take some user avatars. API included.


  1. JSFiddle
  2. CodePen
  3. JS Bin
  4. Dabblet
  5. GitHub Gists
  6. Mozilla Thimble


  1. CSS-Tricks Code Snippets
  2. Snipplr
  3. Snipplicious
    Gallery of free snippets for Bootstrap. These snippets could be easily copied and pasted into your existing Bootstrap based templates and will work without any special tweaks!
  4. Responsive Patterns
    A collection of patterns and modules for responsive designs.
  5. CSSMatic
    CSS generators containing: Gradient Generator, Border Radius, Noise Texture, Box Shadow.
  6. Animate.css
  7. CSS3 Animation Cheat Sheet

    Analytics & Marketing

  1. Best Marketing Tools
    Saijo George took code and created his own list about best marketing tools. And it's very useful.
  2. Google Analytics
  3. Piwik
    Free analytics service.
  4. Google Trends
  5. Shared Count
    Track URL shares, likes, tweets, and etc.
  6. Mention
    Paid real time media monitoring application.
  7. Alexa
    Analytics and website rankings.
  8. Quantcast
    Websites statistics and advertising.
  9. Niche Keyword Finder
  10. Google Alerts
  11. SEO

  12. Google Webmasters
    Get data, tools and diagnostics for a healthy, Google-friendly site.
  13. Woo Rank
    SEO tools.
  14. SEO Site Checkup
  15. Net Marketing Ninjas Tools
  16. Ads

  17. Google AdSense
  18. Google AdWords
  19. BuySellAds
    Most leading design blogs use this service. You can buy or publish display ads, tweets and also email or RSS ads.
  20. The DECK
  21. Yoggrt
  22. Carbon Ads
    Invite only.
  23. Ad Packs
    Invite only.
  24. InfluAds
    Invite only.

    Content Management Systems

  1. WordPress
  2. Drupal
  3. Joomla!
  4. SilverStripe
  5. Anchor
  6. Frog
  7. Cushy
  8. Concrete5
  9. Statamic
  10. Craft
  11. The Secretary
  12. MODX
  13. Dotcms
  14. Contao
  15. Expression Engine
  16. Radiant


  1. Amazon Web Services
  2. GitHub Pages
    It's free, reliable and practically with unlimited bandwith but you can't do any backend stuff like PHP/Python/etc. It rocks for simple sites!
  3. DreamHost
  4. Bluehost
  5. HostGator
  6. OVH
  7. Nearly Free Speech
    Pay incrementally with usage.
  8. A Small Orange
  9. Media Temple
  10. Digital Ocean
  11. Rackspace
  12. Linode
  13. iPage
  14. 000webhost
    If you can't afford hosting (like me) then this might help.


  1. Bento
    Learn frontend, backend, database, api, mobile and etc. categorized with cool boxes which tell you what to learn next.
  2. Stack Overflow
    If you have any problem with your code then people on this site know the solution.
  3. Codecademy
    Good for learning code basics.
  4. Team Treehouse
  5. Google Web Design Fundamentals
    Best practices for modern web development.
  6. Dash
  7. SitePoint
    Learn HTML, CSS, JavaScript, PHP, Ruby & Responsive Design.
  8. HTML5 Doctor
    Resource for people who want to learn more about the hows and whys of implementing HTML5.
  9. Code Avengers
  10. Khan Academy
  11. Lynda
    Online video tutorials to help you learn software, creative, and business skills.
  12. Code School
  13. Learn Street
  14. Tuts+ Code
  15. Tutorial Zine
  16. Build Something Random
    Practice your front-end coding skills with random challenges.
  17. The 3-Minute Guide to SEO
  18. CSS

  19. Learn CSS Layout
    This site teaches the CSS fundamentals that are used in any website's layout.
  20. CSS Guidelines
    High-level advice and guidelines for writing sane, manageable, scalable CSS.
  21. CSS Diner
    Practice your CSS selectors skills.
  22. The Expressive Web
    HTML5 and CSS3 bring loads of new features and functionality to the modern web. This site is a resource and showcase of some of the newest, and most expressive features being added to the web today.
  23. JavaScript

  24. Untrusted
    A user javascript adventure.


  1. Coworks
    Get carefully selected handpicked digital creatives working remotely.
  2. UXswitch
    Sign up and get contacted by UX recruiters.
  3. StackOverflow Careers 2.0
  4. Smashing Magazine Jobs
  5. oDesk
    World's largest online workplace, where 1+ million companies hire freelancers to get the job done.
  6. We Work Remotely
    We Work Remotely is the best place to find and list jobs that aren’t restricted by commutes or a particular geographic area.
  7. Authentic Jobs
  8. GitHub Jobs


  1. Web_Design
  2. WebDev
  3. FrontEnd
  4. WebHosting
  5. CSS
  6. JavaScript
  7. jQuery
  8. PHP
  9. WordPress

    Other Resources

  1. Pineapple
    It's like reddit but for web designers & developers.
  2. Unheap
    A tidy repository of jQuery plugins.
  3. JavaScriptOO
    Every javascript project you should be looking into.
  4. DevDocs
    DevDocs combines multiple API documentations in a fast, organized, and searchable interface.
  5. Web Platform
    The latest information on how to use the technology that runs the web — HTML, CSS, JavaScript and more.
  6. jQuery Plugins CDN
    Handpicked jQuery Plugins CDN (Content Delivery Network).
  7. Cheetyr
    A handy collection of cheatsheets and shortcuts to speed up the work of designers and developers.
  8. Web Components is where pioneers and community-members of the Web Components ecosystem (like Polymer, X-tags, and other interested parties) document web components best practices so that others can follow the same path instead of needlessly striking out on their own.
  9. Lightbox Clones Matrix
    Comparison of various scripts that display images and other objects in somehow cool CSS popups.
  10. Frontend Job Interview Questions
    This repo contains a number of front-end interview questions that can be used when vetting potential candidates.
  11. Link Repositories

  12. Awesome Awesomeness
    A curated list about lists about everything.
  13. Awesome
    A curated list of awesome lists
  14. Frontend Bookmarks
    "A huge list of frontend development resources I collected over time. Sorted from general knowledge at the top to concrete problems at the bottom."
  15. WebdesignRepo
    It's another website which lists links & articles about webdesign. It's really comprehensive!
  16. Web Design Field Manual
    Good looking web design resources repository.
  17. Oozled
    Curated resources for everything creative.
  18. DevLinks
    Collection of Web Development Links, Services, Tools & Resources.
  19. Designers List
    Really similar site to this repo (I found it after creating this repository). Worth checking.