](#hi-there-img-srchttpsrawgithubusercontentcomiampavangandhiiampavangandhimastergifshigif-width35px)
+- [Hi There ](#hi-there-img-srchttpsrawgithubusercontentcomiampavangandhiiampavangandhimastergifshigif-width35px)
- [A List of Useful Resources for Front End Developers](#a-list-of-useful-resources-for-front-end-developers)
- [Table of Contents](#table-of-contents)
- [Useful](#useful)
@@ -41,7 +40,7 @@ This is an open-source repository for all who want to learn front-end Developmen
- [Blogs](#blogs)
- [Podcasts](#podcasts)
- [Code Editors](#code-editors)
- - [Visual Studio Code Extensions](#visual-studio-code-extensions)
+ - [Visual Studio Code Extensions](#visual-studio-code-extensions)
- [Tools](#tools)
- [CSS Frameworks](#css-frameworks)
- [Icons](#icons)
@@ -163,39 +162,39 @@ This is an open-source repository for all who want to learn front-end Developmen
## Blogs
-- [100 Ways to be more creative](https://medium.com/the-mission/100-ways-to-be-more-creative-bbaa99643fe5) - 100 Ways to be More Creative from Shaunta Grimes. 
-- [2017 Design RoundUp](https://tympanus.net/codrops2017/) π 
-- [50 Things You [Probably] Forgot To Design β UX Power Tools β Medium](https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914) - 50 Things You Probably Forgot to Design from Jon Moore 
-- [ACM Month Of Code 2k17: Building Moodify](https://medium.com/@ajay.ns08/acm-month-of-code-2k17-building-moodify-d5d9e0c52ca7) - ACM Month Of Code 2k17: Building Moodify from Ajay NS. 
-- [An Illustrated Guide for Setting Up Your Website Using GitHub & Cloudflare](https://medium.freecodecamp.com/an-illustrated-guide-for-setting-up-your-website-using-github-cloudflare-5a7a11ca9465) - An illustrated guide to setting up your website using GitHub and Cloudflare from Karan Thakkar. 
+- [100 Ways to be more creative](https://medium.com/the-mission/100-ways-to-be-more-creative-bbaa99643fe5) - 100 Ways to be More Creative from Shaunta Grimes. 
+- [2017 Design RoundUp](https://tympanus.net/codrops2017/) π - Collection of all Codrops web development resources for 2017. 
+- [50 Things You [Probably] Forgot To Design β UX Power Tools β Medium](https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914) - 50 Things You Probably Forgot to Design from Jon Moore 
+- [ACM Month Of Code 2k17: Building Moodify](https://medium.com/@ajay.ns08/acm-month-of-code-2k17-building-moodify-d5d9e0c52ca7) - ACM Month Of Code 2k17: Building Moodify from Ajay NS. 
+- [An Illustrated Guide for Setting Up Your Website Using GitHub & Cloudflare](https://medium.freecodecamp.com/an-illustrated-guide-for-setting-up-your-website-using-github-cloudflare-5a7a11ca9465) - An illustrated guide to setting up your website using GitHub and Cloudflare from Karan Thakkar. 
- [Brad Frost Blog](https://bradfrost.com/) - Author of Atomic Design, building design systems in CSS & HTML. 
- [Best Free Fonts](https://www.websiteplanet.com/blog/best-free-fonts/) - 70+ Best Free Fonts for Designers β Free for Commercial Use in 2019 
- [CSS Animations vs the Web Animations API: A Case Study](https://bitsofco.de/css-animations-vs-the-web-animations-api/) 
- [CSS Tricks](https://css-tricks.com/) - Daily articles about CSS, HTML, JavaScript, and all things related to web design and development. 
- [Design and Creativity quotes](http://blog.invisionapp.com/design-and-creativity-quotes/) - 72 Quotes about Design and Creativity from Margaret Kelsey. 
-- [Design Resources](http://designresources.party/) 
-- [Design For Change](https://medium.muz.li/design-for-change-439fc7ec6bb9?source=grid_home---8-5969bf7021a3-----3-1-----------------10) 
+- [Design Resources](http://designresources.party/) - List of resources for working in and learning about design. 
+- [Design For Change](https://medium.muz.li/design-for-change-439fc7ec6bb9?source=grid_home---8-5969bf7021a3-----3-1-----------------10) - Article on regenerative and sustainable designing by Viba Mohan. 
- [Domain registrars DNS and hosting](https://medium.freecodecamp.com/domain-registrars-dns-and-hosting-353e4163a19) - Domain Registrars, DNS, and Hosting from Kirby Kohlmorge 
- [Beginners guide to Gatsby](https://medium.freecodecamp.org/setting-up-and-getting-used-to-gatsby-1fc27985ae8a) Gatsby.js: How to set up and use the React Static Site Generator from Aman Mittal 
- [Examples of everything in ECMAScript in 2016,2017, 2018](https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e) 
- [Flavio Copes Tutorials](https://flaviocopes.com/) - Daily tutorials about Javascript and Web development by Flavio Copes 
-- [How I Animated the bitsofcode Logo with CSS](https://bitsofco.de/how-i-animated-the-bitsofcode-logo/)  
-- [How the minmax() Function Works](https://bitsofco.de/how-the-minmax-function-works/)  
+- [How I Animated the bitsofcode Logo with CSS](https://bitsofco.de/how-i-animated-the-bitsofcode-logo/) - Process article on a custom CSS animation.  
+- [How the minmax() Function Works](https://bitsofco.de/how-the-minmax-function-works/) - Explanation of the CSS minmax() function, which can be used for CSS grid layouts.  
- [How to Build an Impressive Portfolio When You're New to Tech](https://skillcrush.com/2015/03/12/impressive-tech-portfolio/) - How to Build an Impressive Portfolio When Youβre New to Tech from Randle Browning 
- [How to build a random quote generator with JavaScript and HTML, for absolute beginners](https://medium.freecodecamp.com/creating-a-bare-bones-quote-generator-with-javascript-and-html-for-absolute-beginners-5264e1725f08#.jbxuk5hiw) - How to Build a Random Quote Generator with JavaScript and HTML, for Absolute Beginners from Sophanarith Sok. 
-- [How to build your first Vue Component](https://medium.freecodecamp.org/build-your-first-vue-js-component-2dc204bca514) π 
+- [How to build your first Vue Component](https://medium.freecodecamp.org/build-your-first-vue-js-component-2dc204bca514) π - Beginner project tutorial to build a Vue Component by Sarah Dayan. 
- [Letβs code a Neural Network from scratch β Part 1 β TypeMe β Medium](https://medium.com/typeme/lets-code-a-neural-network-from-scratch-part-1-24f0a30d7d62) - Letβs Code a Neural Network from Scratch from Charles Fried 
- [Music Player Inspirations](https://medium.muz.li/music-player-inspiration-2017-999403b2a85e) - Music Player Inspiration 2017 from Muzli. 
- [The Front End CheckList](https://codeburst.io/the-front-end-checklist-8b2292fdda44) - An Exhaustive List of all the Elements you need to have/test Before Launching your Website To Production. 
- [What itβs like to build and market a chatbot when youβre only 14 years old](https://medium.freecodecamp.com/the-ups-and-downs-of-building-and-marketing-a-chat-bot-when-youre-14-8a072830b43c#.eosguojxg) - What itβs Like to Build and Market a Chatbot When Youβre Only 14 Years Old from Alec Jones 
-- [What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/)  
-- [A well curated list for UX](https://blog.prototypr.io/my-ux-resource-list-96ab9e36ac24) π 
-- [Airbnb Open source](https://airbnb.io/) π 
-- [The Cost of JS](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) π 
-- [CSS Scroll-Snap](https://css-tricks.com/practical-css-scroll-snapping/) π₯π₯π₯ 
-- [Preload, Prefetch and priorities in chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) 
+- [What's the Deal with Collapsible Margins?](https://bitsofco.de/collapsible-margins/) - Explanation of CSS' Collapsing Margins feature.  
+- [A well curated list for UX](https://blog.prototypr.io/my-ux-resource-list-96ab9e36ac24) π - Curated resource list for UX by fernandocomet. 
+- [Airbnb Open source](https://airbnb.io/) π - Engineering and Data Science articles and open source projects. 
+- [The Cost of JS](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4) π - How to deliver JavaScript efficiently for valuable user experience by Addy Osmani. 
+- [CSS Scroll-Snap](https://css-tricks.com/practical-css-scroll-snapping/) π₯π₯π₯ - Tutorial on CSS scroll snapping, which allows you to lock the viewport after a user has finished scrolling. 
+- [Preload, Prefetch and priorities in chrome](https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf) - Article on how web loading primitives work on Chrome's neworking stack by Addy Osmani. 
- [Learning Git for yourself](https://gitbook.tw/) - Traditional Chinese  
-- [IDEs for web Developers](https://websitesetup.org/best-ide-software/) 
+- [IDEs for web Developers](https://websitesetup.org/best-ide-software/) - Factors to consider when choosing an IDE for web development and examples of good options. 
**[β¬ back to top](#table-of-contents)**
@@ -203,9 +202,9 @@ This is an open-source repository for all who want to learn front-end Developmen
## Podcasts
-- [Coding Blocks](https://www.codingblocks.net/) 
-- [Frontend Happy Hour](https://frontendhappyhour.com/) 
-- [JavaScript Jabber](https://devchat.tv/js-jabber) 
+- [Coding Blocks](https://www.codingblocks.net/) - Software development podcasts by a team of professional programmers. 
+- [Frontend Happy Hour](https://frontendhappyhour.com/) - Front end, software, and career development podcasts by industry panelists. 
+- [JavaScript Jabber](https://devchat.tv/js-jabber) - Podcasts for JavaScript developers. Website also offers many other programming-related podcasts. 
- [Syntax](https://syntax.fm/) - Front end development podcasts by Wes Bos and Scott Tolinski from Level Up Tuts. 
**[β¬ back to top](#table-of-contents)**
@@ -258,7 +257,7 @@ This is an open-source repository for all who want to learn front-end Developmen
- [BrowserStack](https://www.browserstack.com/) 
- [Can I use... Support tables for HTML5, CSS3, etc.](http://www.caniuse.com/) π 
-- [Checkbot - Browser extension that tests websites for SEO, speed and security issues](https://www.checkbot.io/) 
+- [Checkbot](https://www.checkbot.io/) - Browser extension that tests websites for SEO, speed and security issues 
- [Codepen](https://codepen.io/) 
@@ -306,27 +305,27 @@ This is an open-source repository for all who want to learn front-end Developmen
## CSS Frameworks
-- [Bootstrap](http://getbootstrap.com/) 
-- [Bulma CSS](http://bulma.io/) 
+- [Bootstrap](http://getbootstrap.com/) - Design and customize responsible mobile-first sites. 
+- [Bulma CSS](http://bulma.io/) - Modular open source framework based on Flexbox. 
- [Caramel](http://caramel.ga/) 
-- [Cardinal](http://cardinalcss.com/) 
-- [Element CSS](http://element.eleme.io/#/en-US) 
-- [Foundation CSS](http://foundation.zurb.com/) 
-- [Halfmoon](https://www.gethalfmoon.com/) 
-- [Jeet](http://jeet.gs/) 
-- [Less](http://lessframework.com/) 
-- [Material Design Lite](https://getmdl.io/) 
-- [Materialize CSS](http://materializecss.com/) 
-- [Neat](https://neat.bourbon.io/) 
-- [Petal CSS](https://shakrmedia.github.io/petal/) 
-- [Pure CSS](https://purecss.io/) 
-- [Semantic UI](https://semantic-ui.com/) 
-- [Skeleton CSS](http://getskeleton.com/) 
-- [Tacit](https://github.com/yegor256/tacit) 
-- [TailwindCSS](https://tailwindcss.com/) π₯π₯π₯ 
-- [UI Kit](https://getuikit.com/) 
-- [Unsemantic](https://unsemantic.com/) 
-- [Vital CSS](https://vitalcss.com/components/) 
+- [Cardinal](http://cardinalcss.com/) - Modular mobile-first framework for performance and scalability. 
+- [Element CSS](http://element.eleme.io/#/en-US) - Vue 2.0 based component library. 
+- [Foundation CSS](http://foundation.zurb.com/) - Family of responsive front-end frameworks. 
+- [Halfmoon](https://www.gethalfmoon.com/) - Fully customizable and responsive front-end framework for building dashboards and tools. 
+- [Jeet](http://jeet.gs/) - Fractional grid system for Sass and Stylus. 
+- [Less](http://lessframework.com/) - CSS grid system for designing adaptive websites. 
+- [Material Design Lite](https://getmdl.io/) - Implementation of Material Design components in vanilla CSS, JS, and HTML. 
+- [Materialize CSS](http://materializecss.com/) - CSS framework aimed to allow a unified user experience across all products on any platform. 
+- [Neat](https://neat.bourbon.io/) - A lightweight and flexible Sass grid. 
+- [Petal CSS](https://shakrmedia.github.io/petal/) - Light CSS UI framework based on LESS. 
+- [Pure CSS](https://purecss.io/) - A set of small, responsive CSS modules. 
+- [Semantic UI](https://semantic-ui.com/) - UI framework designed for theming and responsive design. 
+- [Skeleton CSS](http://getskeleton.com/) - Simple, responsive boilerplate to kickstart any responsive project. 
+- [Tacit](https://github.com/yegor256/tacit) - Primitive but attractive framework for beginners in graphic design. 
+- [TailwindCSS](https://tailwindcss.com/) π₯π₯π₯ - Highly customizable, low level CSS framework. 
+- [UI Kit](https://getuikit.com/) - Lightweight and modular front-end framework for web interfaces. 
+- [Unsemantic](https://unsemantic.com/) - Fluid grid system based on percentages, rather than a set number of columns. 
+- [Vital CSS](https://vitalcss.com/components/) - Minimally invasive CSS framework for web applications built with Sass and Slim. 
**[β¬ back to top](#table-of-contents)**
@@ -334,33 +333,33 @@ This is an open-source repository for all who want to learn front-end Developmen
## Icons
-- [Brandicons](http://fontello.github.io/brandico.font/demo.html) 
-- [Flat Icon](https://www.flaticon.com/) 
-- [Font Awesome](http://fontawesome.io/) π 
+- [Brandicons](http://fontello.github.io/brandico.font/demo.html) - Icon font generator and viewer. 
+- [Flat Icon](https://www.flaticon.com/) - Database of free icons in PNG, SVG, EPS, PSD, and Base64 formats. 
+- [Font Awesome](http://fontawesome.io/) π - Open source icon set and toolkit with consistent styles. 
-- [Glyphicon](http://www.webhostinghub.com/glyphs/) 
-- [Google Material Design Icons](http://google.github.io/material-design-icons/) π 
-- [IconSVG](https://iconsvg.xyz/) π₯ π₯ π₯ - Quick customizable icons for your projects  
-- [Icomoon](https://icomoon.io/) 
+- [Glyphicon](http://www.webhostinghub.com/glyphs/) - Icons for use with Bootstrap, other CSS frameworks, and any web projects. 
+- [Google Material Design Icons](http://google.github.io/material-design-icons/) π - An overview of material icons and how to integrate them into projects. 
+- [Icomoon](https://icomoon.io/) - Icon font generator and icon collection. 
-- [Icongram](https://icongr.am/) 
-- [Icons8](https://icons8.com/) 
-- [Ionicons](http://ionicons.com/) 
-- [Mapicons](http://map-icons.com/) 
-- [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/) 
-- [MfgLabs-Iconset](http://mfglabs.github.io/mfglabs-iconset/) 
-- [Micon](http://xtoolkit.github.io/Micon/) 
-- [Octicons](https://octicons.github.com/) 
-- [Open Iconic, a free and open icon set](https://useiconic.com/open/) 
+- [Icongram](https://icongr.am/) - Collection of icon packs from different sources. 
+- [IconSVG](https://iconsvg.xyz/) π₯ π₯ π₯ - Quick customizable icons for your projects  
+- [Icons8](https://icons8.com/) - Consistently styled and customizable icon packs. 
+- [Ionicons](http://ionicons.com/) - Open source icons in SVG and webfont. 
+- [Mapicons](http://map-icons.com/) - Icon font for use with Google Maps API and Google Places API using SVG markers and icon labels. 
+- [Material Design Iconic Font](http://zavoloklom.github.io/material-design-iconic-font/) - Full suite of material design icons for easy SVGs on website or desktop. 
+- [MfgLabs-Iconset](http://mfglabs.github.io/mfglabs-iconset/) - MFG Lab's icon set for use in webfonts and CSS. 
+- [Micon](http://xtoolkit.github.io/Micon/) - Windows font and CSS toolkit. 
+- [The Noun Project](https://thenounproject.com/) - Comprehensive icon collection. 
+- [Octicons](https://octicons.github.com/) - Collection of GitHub's icons for projects. 
+- [Open Iconic, a free and open icon set](https://useiconic.com/open/) - Open source icon set in SVG, webfont, and raster formats. 
-- [OpenWebIcons](http://pfefferle.github.io/openwebicons/) 
-- [Shape.so](https://shape.so/) 
+- [OpenWebIcons](http://pfefferle.github.io/openwebicons/) - Webfont for scalable vector icons and logos. 
+- [Shape.so](https://shape.so/) - Customizable collection of icons and animations. 
-- [Stackicons](http://stackicons.com/) 
-- [Typicons](http://typicons.com/) 
-- [The Noun Project](https://thenounproject.com/) 
-- [Weather Icons](https://erikflowers.github.io/weather-icons/) 
-- [Zocial | CSS3 Button Set](http://zocial.smcllns.com/) 
+- [Stackicons](http://stackicons.com/) - Customizable icons for social brands. 
+- [Typicons](https://www.s-ings.com/typicons/) - Free-to-use vector icons embedded in a webfont. 
+- [Weather Icons](https://erikflowers.github.io/weather-icons/) - Weather themed icon font and CSS. 
+- [Zocial | CSS3 Button Set](http://zocial.smcllns.com/) - Create social buttons using CSS and rendering social icons as a font. 
**[β¬ back to top](#table-of-contents)**
@@ -368,25 +367,26 @@ This is an open-source repository for all who want to learn front-end Developmen
## Colors
-- [BADA55 Color Codes](http://bada55.io/) 
+- [BADA55 Color Codes](http://bada55.io/) - Convert leet words into CSS hex colors. 
- [Color Hunt](http://colorhunt.co/) - Open collections of beautiful color palettes 
- [Color Theory by Natalya Shelburne](https://tallys.github.io/color-theory/) - Practical Color Theory for People who Code: Tutorial on the use of color with examples 
- [Color wheel | Color schemes - Adobe Color CC](https://color.adobe.com/create/color-wheel/?base=2&rule=Analogous&selected=4&name=My%20Color%20Theme&mode=rgb&rgbvalues=0.050000000000000044,1,0.6943295865110486,0.13153196324950517,0.04550000000000004,0.91,1,0,0,0.91,0.6632375135840386,0.04550000000000004,0.2526315789473136,0.48,0.216140350877193&swatchOrder=0,1,2,3,4) - Interactive color wheel with different color rules (adjustments possible) 
-- [Coolors](https://coolors.co)π - Super fast color scheme creator with a lot of functionalities 
- [Colordesigner Tools](https://colordesigner.io/) - The main purpose of this tool is to help with building a color palette and generate tints and shades based on it. Just pick a color, and the app does the rest. You can use the preselected colors or the color picker for more control. Check also the other tools [here](https://colordesigner.io/tools) 
- [Colormind - Bootstrap](http://colormind.io/bootstrap/) - Colormind is a color scheme generator that uses deep learning to automatically apply the color pallete to a live website mockup. 
-- [Data Color Picker](https://learnui.design/tools/data-color-picker.html) π 
+- [Coolors](https://coolors.co)π - Super fast color scheme creator with a lot of functionalities 
+- [CSS Gradient](https://cssgradient.io/gradient-backgrounds/) π - Curated list of sites to explore gradients and color palettes. 
+- [Data Color Picker](https://learnui.design/tools/data-color-picker.html) π - Generate color palettes with visually equidistant colors. Useful for data visualizations. 
- [Designing in Color](https://medium.freecodecamp.com/designing-in-color-abd358660a7b) - A complete guide to design in color (article on Medium) 
+- [Flat UI Colors](https://flatuicolors.com/) - Color picker for flat designs 
- [Image Color Picker](https://image-color.com) - Image color picker and palette generator 
- [LOL Colors](https://www.webdesignrankings.com/resources/lolcolors/) - Curated color palette inspirations 
- [Material Palette](https://www.materialpalette.com/) - Color palette generator for Material Design 
-- [Pigment Palette Generator](https://pigment.shapefactory.co/) 
- [Palettable](http://www.palettable.io/ED3E75-383838-D4D4D4) - Interactive color picker: creates a color scheme based on your preferences and palettes on the Internet 
-- [Paletton - The Color Scheme Designer](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) - Advanced tool for creating color schemes 
+- [Paletton - The Color Scheme Designer](http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF) - Advanced tool for creating color schemes  - Primary color generator using Google's image search. 
+- [Pigment - Palette Generator](https://pigment.shapefactory.co/) - Generate color palettes based on lighting and pigment. 
- [UI Gradients](https://uigradients.com/#Influenza) - Scroll through or pick from beautiful gradients, download JPG and copy CSS Code 
-- [All Gradient sites in one place](https://cssgradient.io/gradient-backgrounds/) π 
-- [Google, but for colors](https://picular.co/) 
-- [Flat UI Colors](https://flatuicolors.com/) - Color picker for flat designs 
+
**[β¬ back to top](#table-of-contents)**
@@ -428,8 +428,8 @@ This is an open-source repository for all who want to learn front-end Developmen
- [Animate CSS](https://daneden.github.io/animate.css/) - Choose, try out and get the CSS-Code for different animation types (over 70) 
- [Bounce JS](http://bouncejs.com/) - Tool and JS Library, creating CSS3 powered animations(adjustments possible) & export CSS code 
- [Magic Animations](https://www.minimamente.com/example/magic_animations/) - Showcase of different animations with link to GitHub repo 
-- [Particles JS](https://vincentgarreau.com/particles.js/) π 
-- [Typed JS](http://www.mattboldt.com/typed.js/) - A JavaScript typing animation library with a great documentation on GitHub 
+- [Particles JS](https://vincentgarreau.com/particles.js/) π - A lightweight JavaScript library for creating particles. 
+- [Typed JS](http://www.mattboldt.com/typed.js/) - A JavaScript typing animation library with a great documentation on GitHub 
- [Wow JS](http://mynameismatthieu.com/WOW/) - JavaScript library: Reveal CSS animation as you scroll down a page 
@@ -439,22 +439,22 @@ This is an open-source repository for all who want to learn front-end Developmen
## Stock Resources
+- [Canva](https://www.canva.com) π - 8,000+ free templates and thousands of free photos 
- [Free stock images and Videos](http://allthefreestock.com/) - A great collection of stock photos, videos and other resources. Most of them under the CC0-License, all of them free. 
- [Gratisography](https://www.gratisography.com) - Photographer Ryan McGuire provides this collection of high-resolution pictures for free. You can use them on your personal or commercial project free of copyright restrictions. 
- [Humaaans](https://www.humaaans.com/) - Library of editable people illustrations. Free for both commercial and personal use. 
- [Iβd Pin That!](http://idpinthat.com) - Created to help bloggers and non-designers create high quality images like those often seen on Pinterest. Iβd Pin That is more than just a source for free images β **it is an image editor!** Use the tools provided here to add your own text and edit the images right on the site. 
- [MakerBook - The best free resources for creatives](http://makerbook.net/) - A directory of sites to get free resources (Photography, Mockups, Graphics, Textures, Fonts, Colours, Video, Audio & Tools). 
- [Morguefile](https://morguefile.com/) - Founded in 1996 by college student Michael Connors.Photographers contribute images to Morguefile for visitors to use in their creative projects. Yes, theyβre all completely free. The website does ask that you credit the photographer when possible. 
+- [The Open Photo Project](https://openphoto.net/) - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing. 
- [Pexels](https://www.pexels.com/) - Exclusively stock photos of high quality, great feature: Filter photos by color. 
+- [Picalls](https://picalls.com/) - Free photos and wallpapers licensed under the Creative Commons CC0 license. 
- [Pixabay](https://pixabay.com/) - In addition to photos, Pixabay offers **video, vectors and illustrations.** 
- [Public Domain Archive](http://publicdomainarchive.com/) - βa public domain image repositoryβ created by Matt a graphic designer, web designer and photographer.Vintage and modern images. 
-- [Picalls](https://picalls.com/) - Free photos and wallpapers licensed under the Creative Commons CC0 license. 
- [StockSnap.io](https://stocksnap.io/) - High quality stock photos free to download and use. Licensed under the Creative Commons CC0 license. 
- [The Stocks](http://thestocks.im) - Another awesome directory sharing sites for resources, loading directly on the webpage 
-- [The Open Photo Project](https://openphoto.net/) - The Open Photo Project is a photo sharing platform created in 1998 by Michael Jastremski. Contributors have offered their images free of charge under terms of Creative Commons licensing. 
-- [UnSplash](https://unsplash.com) π - "Beautiful, Free Photos" & themed collections of photos 
- [UnDraw](https://undraw.co) π - "MIT licensed illustrations for every project you can imagine and create 
-- [Canva](https://www.canva.com) π - 8,000+ free templates and thousands of free photos 
+- [UnSplash](https://unsplash.com) π - "Beautiful, Free Photos" & themed collections of photos 
**[β¬ back to top](#table-of-contents)**
@@ -467,23 +467,24 @@ This is an open-source repository for all who want to learn front-end Developmen
- [Google maps API | Traversy](https://youtu.be/Zxf1mnP5zcw/) - Great YouTube tutorial on using the Google Maps APIs 
- [OpenCage Geocoder](https://opencagedata.com/) - Free to use forward (lat/long to text) and reverse (text to lat/long) geocoding API 
- [GeoJS](https://www.geojs.io/) - Free to use API for geolocation lookup by IP address 
+
**[β¬ back to top](#table-of-contents)**
---
## APIs
-- [Alexa API | Codecademy](https://www.codecademy.com/learn/learn-alexa) 
+- [Alexa API | Codecademy](https://www.codecademy.com/learn/learn-alexa) - Learn to develop a custom Amazon Alexa skill that respond to the user's voice with custom messages. 
- [Abstract APIs](https://www.abstractapi.com) - Free utility API's for compressing images, creating user avatars, validating emails, and more 
-- [Random famous quotes | Mashape APIs](https://market.mashape.com/andruxnet/random-famous-quotes) 
-- [Web APIs | MDN](https://developer.mozilla.org/en/docs/Web/API) 
-- [A list of public APIs](https://github.com/toddmotto/public-apis) 
- [jsonplaceholder](https://jsonplaceholder.typicode.com) - Fake Online REST API for Testing and Prototyping 
+- [A list of public APIs](https://github.com/toddmotto/public-apis) 
- [Lorem Picsum](https://picsum.photos/) - Easy to use and customize placeholder photos 
- [OpenWeatherMap](https://openweathermap.org/api) - Weather API with free and paid licenses 
+- [Random famous quotes | Rapid APIs](https://rapidapi.com/andruxnet/api/Random%20Famous%20Quotes) - Gets a random quote in JSON format. 
- [Unsplash Source](https://source.unsplash.com/) - API to retrieve random images from Unsplash.com 
+- [Web APIs | MDN](https://developer.mozilla.org/en/docs/Web/API) 
**[β¬ back to top](#table-of-contents)**
@@ -494,11 +495,11 @@ This is an open-source repository for all who want to learn front-end Developmen
- [Am I Responsive](http://ami.responsivedesign.is/) - This is a tool to check the responsiveness of a website and take a screenshot on multiple devices in a single frame. Go to the site and enter the URL to capture the screenshot. You should have separate screen capture tool to take the proper screenshot. 
- [Figma](https://www.figma.com/) π - Free app with a simple to use surface for designing, prototyping and sharing your website and app ideas 
- [Magic Mockups](http://magicmockups.com/) - Place your product in realistic environment! Free real-life product/app mockup generator. **Laptop, Phone, Tablet, Imac.** 
+- [The MockUp Club](https://themockup.club/) - Website that offers free downloads of design mockups (mostly Photoshop format). 
- [MockupsJar](https://mockupsjar.com/) π - Build mockups with screenshots of your application or web Design for free to share with customers and clients 
- [MockUPhone](https://mockuphone.com) - Free and simple screenshots device mockups generator. Wrap your design in mobile devices or Laptop/Desktop in a few clicks! 
-- [Wireframe.cc](https://wireframe.cc/) - Great tool for sketching out ideas and layouts, super minimalistic 
- [Multi Device Website Mockup Generator](http://techsini.com/multi-mockup/) - Multi device website mockup generator is free online tool to test your responsive website on apple devices including Apple iMac, MacBook, iPad and iPhone. This tool is very helpful for theme developers to mockup the web template on various apple devices with a single click. You should have a proper screen grabber tool to take the screenshot from the browser. 
-- [The MockUp Club](https://themockup.club/) 
+- [Wireframe.cc](https://wireframe.cc/) - Great tool for sketching out ideas and layouts, super minimalistic 
**[β¬ back to top](#table-of-contents)**
@@ -506,13 +507,13 @@ This is an open-source repository for all who want to learn front-end Developmen
## Books
+- [Ebook Foundation-free programing books: GitHub Repository](https://github.com/EbookFoundation/free-programming-books) - A directory of free learning resources, categorized by language 
- [HTML Basics](https://www.austincc.edu/hr/profdev/eworkshops/docs/HTML_Basics.pdf) - A workshop covering the basics of HTML (free pdf/18 pages) 
-- [HTML Tutorialspoint](http://www.tutorialspoint.com/html/html_tutorial.pdf) - A thorough tutorial on HTML (free pdf/486 pages) 
-- [HTML5 Pocket Reference (Pocket Reference (O'Reilly)](http://www.amazon.com/gp/product/1449363350/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1449363350&linkCode=as2&tag=pinnok-20&linkId=M6JD2MFAN24X3E7W) - A comprehensive compact reference for HTML 5 
- [HTML5 for Masterminds, 2nd Edition](https://www.amazon.com/gp/product/1500429120/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1500429120&linkCode=as2&tag=pinnok-20&linkId=IBCPBVE3TBPCOUWF) - A complete course from Beginner to Mastermind 
+- [HTML5 Pocket Reference (Pocket Reference (O'Reilly)](http://www.amazon.com/gp/product/1449363350/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1449363350&linkCode=as2&tag=pinnok-20&linkId=M6JD2MFAN24X3E7W) - A comprehensive compact reference for HTML 5 
+- [HTML Tutorialspoint](http://www.tutorialspoint.com/html/html_tutorial.pdf) - A thorough tutorial on HTML (free pdf/486 pages) 
- [Learn How To Code In HTML5 and CSS3](http://howtocodeinhtml.com/) - A free e-book about making websites in HTML5 and CSS for absolute beginners 
- [Responsive Web Design with HTML5 and CSS3](http://www.amazon.com/gp/product/1784398934/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=1784398934&linkCode=as2&tag=pinnok-20&linkId=6CN4JQGXTZU6DHRY) - A comprehensive book about making RWD 
-- [Ebook Foundation-free programing books: GitHub Repository](https://github.com/EbookFoundation/free-programming-books) - A directory of free learning resources, categorized by language 
- [You don't know JS](https://github.com/getify/You-Dont-Know-JS) - Book series diving deep into the core mechanisms of the JavaScript language. 
**[β¬ back to top](#table-of-contents)**
@@ -528,9 +529,9 @@ This is an open-source repository for all who want to learn front-end Developmen
- [Flexbox Defense](http://www.flexboxdefense.com) - It is a game that covers the flex properties align-items, justify-content, flex-direction, align-self and has 12 different levels. 
- [Flexbox Froggy](https://flexboxfroggy.com) - This game is also about Flexbox and it covers even more flex properties: align-items, justify-content, align-content, flex-direction, align-self, flex-wrap, flex-flow and has 24 different levels. 
- [Grid Garden](http://cssgridgarden.com/) - Interactive CSS code game. Practice your CSS skills by watering your garden! It has 28 different levels to learn CSS Grid Layout. 
+- [Hackerrank](https://www.hackerrank.com/) - Practice coding, prepare for interviews, and solve interview style coding challenges. 
- [JavaScript30](https://javascript30.com/) - A free challenge course, building 30 little projects with HTML, CSS and plain JavaScript. 
- [Leetcode](https://leetcode.com/) - Coding problems to solve in a range of categories and difficulties  
-- [Hackerrank](https://www.hackerrank.com/) - Practice coding, prepare for interviews, and solve interview style coding challenges. 
**[β¬ back to top](#table-of-contents)**
@@ -538,9 +539,8 @@ This is an open-source repository for all who want to learn front-end Developmen
## Free Tools For Students
-- [**Student Developer Pack**](https://education.github.com/pack): The best developer tools, free for students via @githubeducation 
-
- [**JetBrains Student License**](https://www.jetbrains.com/student/): Free individual licenses of the award-winning professional developer tools from JetBrains for students and faculty members. 
+- [**Student Developer Pack**](https://education.github.com/pack): The best developer tools, free for students via @githubeducation 
**[β¬ back to top](#table-of-contents)**
@@ -548,8 +548,8 @@ This is an open-source repository for all who want to learn front-end Developmen
## YouTube Videos
-- [**SVGs can do that**](https://www.youtube.com/watch?&v=4laPOtTRteI) π 
-- [**Flexbox in 20 minutes**](https://youtu.be/JJSoEo8JSnc) ο 
+- [**Flexbox in 20 minutes**](https://youtu.be/JJSoEo8JSnc) - Quick crash-course on the CSS Flexbox model. 
+- [**SVGs can do that**](https://www.youtube.com/watch?&v=4laPOtTRteI) π - Sarah Drasner's talk on nontypical pratical uses of SVGs. 
**[β¬ back to top](#table-of-contents)**
From 547aeded7467cccb15620385deba50336a892d75 Mon Sep 17 00:00:00 2001
From: Samantha Prestrelski <33042752+SamP923@users.noreply.github.com>
Date: Fri, 2 Oct 2020 13:52:17 -0700
Subject: [PATCH 2/2] Added description for Tools section
---
README.md | 76 +++++++++++++++++++++++++++----------------------------
1 file changed, 38 insertions(+), 38 deletions(-)
diff --git a/README.md b/README.md
index 9c9a5cb..9728dbb 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
[](https://twitter.com/intent/tweet?text=Check%20this%20Amazing%20Resource:&url=https%3A%2F%2Fgithub.com%2FRitikPatni%2FFront-End-Web-Development-Resources)
# Front-end development
-# **Hi** There
+# Hi There
This is an open-source repository for all who want to learn front-end Development.
@@ -23,6 +23,7 @@ This is an open-source repository for all who want to learn front-end Developmen **Make sure to show your support by star mark & sharing the repository** + # A List of Useful Resources for Front End Developers --- @@ -88,7 +89,7 @@ This is an open-source repository for all who want to learn front-end Developmen - [Pluralsight](https://www.pluralsight.com/) - Unlimited online developer training from industry experts.   - [Saylor](https://www.saylor.org/) - An open, online learning solution offering college credit opportunities for students.  -- [Scrimba](https://www.scrimba.com/)  +- [Scrimba](https://www.scrimba.com/) - Code-screencast-based learning in a variety of languages.   - [Scotch](https://scotch.io/) - Many Web development courses. Has both free and "Premium" (paid) memberships.   - [Search Courses](https://hackr.io/) - A selection of trending courses and tutorials.  @@ -166,7 +167,7 @@ This is an open-source repository for all who want to learn front-end Developmen - [2017 Design RoundUp](https://tympanus.net/codrops2017/) π - Collection of all Codrops web development resources for 2017.  - [50 Things You [Probably] Forgot To Design β UX Power Tools β Medium](https://medium.com/ux-power-tools/50-things-you-probably-forgot-to-design-7a288b0ef914) - 50 Things You Probably Forgot to Design from Jon Moore  - [ACM Month Of Code 2k17: Building Moodify](https://medium.com/@ajay.ns08/acm-month-of-code-2k17-building-moodify-d5d9e0c52ca7) - ACM Month Of Code 2k17: Building Moodify from Ajay NS.  -- [An Illustrated Guide for Setting Up Your Website Using GitHub & Cloudflare](https://medium.freecodecamp.com/an-illustrated-guide-for-setting-up-your-website-using-github-cloudflare-5a7a11ca9465) - An illustrated guide to setting up your website using GitHub and Cloudflare from Karan Thakkar.  +- [An Illustrated Guide for Setting Up Your Website Using GitHub & Cloudflare](https://medium.freecodecamp.com/an-illustrated-guide-for-setting-up-your-website-using-github-cloudflare-5a7a11ca9465) - An illustrated guide to setting up your website using GitHub and Cloudflare from Karan Thakkar.  - [Brad Frost Blog](https://bradfrost.com/) - Author of Atomic Design, building design systems in CSS & HTML.  - [Best Free Fonts](https://www.websiteplanet.com/blog/best-free-fonts/) - 70+ Best Free Fonts for Designers β Free for Commercial Use in 2019  - [CSS Animations vs the Web Animations API: A Case Study](https://bitsofco.de/css-animations-vs-the-web-animations-api/)  @@ -175,7 +176,7 @@ This is an open-source repository for all who want to learn front-end Developmen - [Design Resources](http://designresources.party/) - List of resources for working in and learning about design.  - [Design For Change](https://medium.muz.li/design-for-change-439fc7ec6bb9?source=grid_home---8-5969bf7021a3-----3-1-----------------10) - Article on regenerative and sustainable designing by Viba Mohan.  - [Domain registrars DNS and hosting](https://medium.freecodecamp.com/domain-registrars-dns-and-hosting-353e4163a19) - Domain Registrars, DNS, and Hosting from Kirby Kohlmorge  -- [Beginners guide to Gatsby](https://medium.freecodecamp.org/setting-up-and-getting-used-to-gatsby-1fc27985ae8a) Gatsby.js: How to set up and use the React Static Site Generator from Aman Mittal  +- [Beginners guide to Gatsby](https://medium.freecodecamp.org/setting-up-and-getting-used-to-gatsby-1fc27985ae8a) - Gatsby.js: How to set up and use the React Static Site Generator from Aman Mittal  - [Examples of everything in ECMAScript in 2016,2017, 2018](https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e)  - [Flavio Copes Tutorials](https://flaviocopes.com/) - Daily tutorials about Javascript and Web development by Flavio Copes  - [How I Animated the bitsofcode Logo with CSS](https://bitsofco.de/how-i-animated-the-bitsofcode-logo/) - Process article on a custom CSS animation.   @@ -251,53 +252,52 @@ This is an open-source repository for all who want to learn front-end Developmen - [API Directory | ProgrammableWeb](https://www.programmableweb.com/apis/directory)  - [Animista](http://animista.net/) - CSS animation presets/generator  -- [Better Code Hub](https://bettercodehub.com/repositories)  -- [Browserling - Live interactive cross-browser testing](https://www.browserling.com/)  +- [Better Code Hub](https://bettercodehub.com/repositories) - Checks GitHub codebase against software engineering guidelines and gives feedback.  +- [Browserling](https://www.browserling.com/) - Live interactive cross-browser testing on virtual machines.   -- [BrowserStack](https://www.browserstack.com/)  +- [BrowserStack](https://www.browserstack.com/) - Test websites and mobile apps on different browsers and mobile devices.   -- [Can I use... Support tables for HTML5, CSS3, etc.](http://www.caniuse.com/) π  +- [Can I use... ](http://www.caniuse.com/) π - Support tables for HTML5, CSS3, etc. on desktop and mobile browsers  - [Checkbot](https://www.checkbot.io/) - Browser extension that tests websites for SEO, speed and security issues   -- [Codepen](https://codepen.io/)  - -- [Codesandbox](https://codesandbox.io/)  +- [Codepen](https://codepen.io/) - Social development environment where you can write code in the browser and see results as you build.   +- [Codesandbox](https://codesandbox.io/) - Instant IDE and prototyping tool for web development.   -- [Create a new fiddle - JSFiddle](https://jsfiddle.net/)  -- [Critical Path CSS Generator - by Jonas Ohlsson](https://jonassebastianohlsson.com/criticalpathcssgenerator/)  -- [CrossBrowserTesting App](https://app.crossbrowsertesting.com/livetests/run)  +- [Create a new fiddle - JSFiddle](https://jsfiddle.net/) - Test JS, CSS, HTML, or CoffeeScript in an online code editor.  +- [Critical Path CSS Generator - by Jonas Ohlsson](https://jonassebastianohlsson.com/criticalpathcssgenerator/) - Reduces the amount of CSS the browser has to go through to render a webpage.  +- [CrossBrowserTesting App](https://app.crossbrowsertesting.com/livetests/run) - Web service for running functional web tests on mobile and desktop web browsers.  - [CSS Minifier](https://cssminifier.com/) - Minify your CSS files!  -- [CSS Triggers](https://csstriggers.com/) π  +- [CSS Triggers](https://csstriggers.com/) π - Tells you what gets triggered when mutating a given CSS property.  - [CSS Filters](https://www.cssfilters.co/) - Interactive CSS filter generator  - [ColorLisa](http://colorlisa.com/) - Color palette generator based on great artists  -- [DirtyMarkup Β· Tidy up your HTML, CSS, and JavaScript code](https://dirtymarkup.com/) π  -- [ExtendsClass](https://extendsclass.com/)  -- [Favicon Generator](http://www.favicon-generator.org/)  -- [Favicon Generator for iOS/Google Progressive Web App Manifest](https://realfavicongenerator.net/) π  -- [Generate favicon based on text](https://favicon.io/) π  +- [DirtyMarkup](https://dirtymarkup.com/) π - Tidy up your HTML, CSS, and JavaScript code.  +- [ExtendsClass](https://extendsclass.com/) - Provides tools to add features directly usable in the browser.  +- [Favicon Generator](http://www.favicon-generator.org/) - Upload an image and generate a favicon for your website.  +- [Favicon Generator for iOS/Google Progressive Web App Manifest](https://realfavicongenerator.net/) π - Online tool to test favicons on different platforms.  +- [Generate favicon based on text](https://favicon.io/) π - Generate a favicon from text, an image, or emojis.  - [Get Waves](https://getwaves.io/) - Generate many types of SVG waves for use in web design.  -- [Google Analytics](https://analytics.google.com/)  -- [Google APIs Explorer](https://developers.google.com/apis-explorer/#p/)  -- [Javascript Console in Sublime Text](https://pawelgrzybek.com/javascript-console-in-sublime-text/)  -- [jQuery mega cheat sheet](https://cdn.makeawebsitehub.com/wp-content/uploads/2015/09/jquery-mega-cheat-sheet-Printable.pdf)  -- [JS Bin](http://jsbin.com/?html,output)  +- [Google Analytics](https://analytics.google.com/) - Web service that tracks and reports website traffic.  +- [Google APIs Explorer](https://developers.google.com/apis-explorer/#p/) - Tool to interactively explore various Google APIs.  +- [Javascript Console in Sublime Text](https://pawelgrzybek.com/javascript-console-in-sublime-text/) - Tutorial to test JavaScript and execute it via build systems in Sublime Text 3.  +- [jQuery mega cheat sheet](https://cdn.makeawebsitehub.com/wp-content/uploads/2015/09/jquery-mega-cheat-sheet-Printable.pdf) - Cheat sheet of jQuery selectros, manipulation, events, and more in PDF format.  +- [JS Bin](http://jsbin.com/?html,output) - Live pastebin for HTML, CSS, and JS, as well as a range of processors.   -- [Lighthouse](https://developers.google.com/web/tools/lighthouse) π  -- [Node Package Manager(npm)](https://www.npmjs.com)  +- [Lighthouse](https://developers.google.com/web/tools/lighthouse) π - Open source, automated tool for improving the quality of webpages.  +- [Node Package Manager(npm)](https://www.npmjs.com) - Package manager for Javascript.   -- [Responsinator](http://www.responsinator.com/)  -- [Responsive Grid System](http://www.responsivegridsystem.com/)  -- [Sans Francisco - a tool for designers](http://www.sansfrancis.co/)  +- [Responsinator](http://www.responsinator.com/) - Replicate how responsive sites will look on popular devices.  +- [Responsive Grid System](http://www.responsivegridsystem.com/) - Generate flexible grids to create a responsive website.  +- [Sans Francisco - a tool for designers](http://www.sansfrancis.co/) - Collection of tools for designers  - [Screensizemap](https://www.screensizemap.com/) - A comparison of screen sizes in device-independent pixel.  -- [Sizzy:Browser Testing Tool](https://sizzy.co/)  -- [Stack Overflow](https://stackoverflow.com/)  -- [The W3C Markup Validation Service](http://validator.w3.org/#validate_by_input)  -- [The W3C CSS Validation Service](http://jigsaw.w3.org/css-validator/#validate_by_input)  +- [Sizzy:Browser Testing Tool](https://sizzy.co/) - Tool for developing and testing responsive design on multiple devices at once.  +- [Stack Overflow](https://stackoverflow.com/) - Online community for developers to ask questions and get answers.  +- [The W3C Markup Validation Service](http://validator.w3.org/#validate_by_input) - Checks the markup validity of Web documents in HTML, XHTML, SMIL, MATHML, etc.  +- [The W3C CSS Validation Service](http://jigsaw.w3.org/css-validator/#validate_by_input) - Checks the validity of CSS and XHTML documents with style sheets.  - [TinyPNG](https://tinypng.com/) - PNG and JPEG compression/optimizer  -- [Web Developer Checklist](http://webdevchecklist.com/) π  -- [Progressive Tooling to optimize your performance on Web](https://progressivetooling.com/)  -- [StackBlitz](https://stackblitz.com/angular/pxxjqeeegeba)  -- [Postman(Tool for testing APIs)](https://docs.api.getpostman.com/?version=latest)  +- [Web Developer Checklist](http://webdevchecklist.com/) π - Categorized checklist for things to cover during web development.  +- [Progressive Tooling to optimize your performance on Web](https://progressivetooling.com/) - List of tools that can be used to improve page performance.  +- [StackBlitz](https://stackblitz.com/angular/pxxjqeeegeba) - Online IDE for Angular and React projects that can be share via link.  +- [Postman(Tool for testing APIs)](https://docs.api.getpostman.com/?version=latest) - API client to create, share, test, and document APIs.  **[β¬ back to top](#table-of-contents)**