Summary
Developer Resources is a collection of all the resources for developers.
It also includes a Credit section to all the Github repositories from which we got some of resources listed in here.
Resources with
We Invite as many contributions as possible. Be sure to read How To Contribute
Table of Contents
- Credits
- Roadmap
- How the Internet Works
- HTML
- CSS
- JavaScript
- Git
- React
- Icons
- Fonts and Typography
- Illustrations
- Optimization
- Color Inspiration
- Images and Videos
- Hosting Sites
- Design Inspiration
- Portfolio Inspiration
- Youtube Channels
- Podcasts
- Blogs
- Newsletters
- Contributing
- Authors
Credits
Some of the resources listed in here were first listed in these amazing repositories:
How the Internet Works
-
Documentation and Articles
- MDN - How does the Internet work?
- Stanford - How Does the Internet Work?
- Medium - How the Internet Works
- HowStuffWorks - How does the Internet Work?
-
Videos
- KhanAcademy - What is the Internet
- Youtube - The Internet: Crash Course Computer Science
- Youtube - Computer Networks: Crash Course Computer Science
- Youtube - The World Wide Web: Crash Course Computer Science
HTML
-
Documentation
- MDN - HTML5 Reference
- Reference - HTML Reference
- CSS-Tricks - HTML Entity Refernce
- W3Schools - Introduction to HTML
- Cheat Sheet - HTML Cheat Sheet
-
Courses
- FreeCodeCamp - Introduction to Basic HTML & HTML5
- W3Schools - HTML Tutorial
- Udacity - Intro to HTML and CSS
- Scrimba - Introduction to HTML
- EDX - HTML5 and CSSS Fundemantals
- Youtube - HTML Full Course
- Udemy - HTML and CSS3 Course
π΅ - CodeCademy - Learn HTML
π΅ - Pluralsight - HTML Fundamentals
π΅ - Team Treehouse - Introduction to HTML and CSS
π΅
-
Books
-
Websites
- HTML5 Up - Responsive HTML5 and CSS3 site templates.
- Templated - A collection of 845 free CSS & HTML5 site templates.
- HTML5 Doctor - A great reference for HTML Elements
- HTML-5-TUTORIAL - Another Great Website for everything HTML
- HTML Validator - Check if your HTML markup is valid and contains no errors.
CSS
-
Documentation
- Reference - CSS Reference
- MDN - CSS
- Extensive CSS Reference
- Getting to Know CSS
-
Courses
- FreeCodeCamp - Introduction to Basic CSS
- W3School - CSS Tutorial
- Scrimba - Introduction to CSS
- CodeCademy - Learn CSS
π΅ - Team Treehouse - CSS Basics
π΅
-
Style Guides
-
Books
-
Websites
- Clippy - A small tool to help you using the new and powerful clip-path property.
- CSS Diner - Learn CSS Selectors through a game
- Flexbox Froggy - Learn CSS Flexbox through a game
- CSS Grid Garden - Learn CSS Grid through a game
- Can I use - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
- CSS-tricks - A wonderful blog site for everything CSS
- Responsinator - A quick tool to check the responsiveness of a site across different devices.
- 7 Days, 7 Websites - A challenge site to build 7 websites in 7 days
- CSS Easing functions - An amazing collection of easing functions bo be used in CSS transitions and animations.
- Responsive Grid System - A quick, flexible and easy fluid grid for easy responsive web design.
- CSS reference by Codrops
- CSS for People Who Hate CSS -Excellent guide on how to write better, cleaner and more reusable CSS code.
- Cubic Berzier Function Generator - Free insights about traffic, visitors and conversions.
-
Practice your CSS Skills
-
Frameworks and Libraries
JavaScript
-
Documentation
- MDN - JavaScript Reference
- MDN - Operator Precedence Table
- MDN - JavaScript Event Refernce
-
Courses
- freeCodeCamp - JavaScript Algorithms and Data Structures
- Wes Bos - JavaScript30
- W3Schools - JavaScript Tutorial
- CodeCademy - Learn JavaScript
- EDX - Programming the Web with JavaScript
- GeekforGeeks
- Udemy The Complete JavaScript Course
π΅
-
Books
-
Challenge Websites
-
Style Guides
-
Visual Studio Code Extensions
- Snippets - Snippets for JavaScript ES6 syntax and TypeScript.
- ESLint - Code Linter that can find out any problematic patterns. You can even make your own set of rules to check and reuse logic.
- Intellisense - Can show code completion and information on a certain function, variables, and properties by hover.
- Path Intellisense -Aauto-complete the path of the file you are trying to import
- Prettier - Responsible for code formatting.
- Bracket Pair Colorizer 2 - Matches brackets with same color.
- Babel JavaScript - Syntax highlighting for today's JavaScript
- npm - npm support for Visual Studio Code
- Paste JSON as Code - Copy JSON paste as JavaScript or Typescript
- Quokka.js - Prototyping playground that displays the results of an operation inside your IDE
- Live Server - Automatically reload the web page whenever there are changes in your code.
- Settings Sync - Synchronise your editor settings using Github.
- REST Client - REST Client for Visual Studio Code
- Debugger for Chrome - Debugging tool.
Git
- Courses
- Tools
React
-
Roadmap
-
Documentation
-
Courses
- Egghead - The Beginner's Guide to React
- Scrimba - Learn React
- freeCodeCamp - Introduction to React
- FullStackOpen - Introduction to React
- Wes Bos - React for Beginners
- LevelUpTutorials - React for Everyone
- EpicReact - Epic React
π΅
-
Books
-
Podcasts
-
Youtube Channels
-
Articles
-
React Libraries
-
Server Side Rendering
-
Experts on Twitter
Icons
- Icons8
- Iconjar
- CSS.gg
- Freepik
- Icontre
- Flaticon
- Pngtree
- Ionicons
- UXWing
- Icomoon
- Fontastic
- BoxIcons
- Heroicons
- Iconshock
- IconFinder
- Swift Icons
- Iconfactory
- Iconmonstr
- Material Icons
- Font Awesome
Fonts and Typography
- FFonts
- Befonts
- DaFont
- Unblast
- MyFonts
- 1001Fonts
- FontSpace
- TypeTester
- FonstSpace
- FontsArena
- Typo Guide
- Fontsquirrel
- Google Fonts
- PinSpiry Fonts
- Abstract Fonts
- Free Script Fonts
- The 100 best fonts by Creative Bloq
Illustrations
Optimization
- Sizzy - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.
- Who Is - Quick tool to check the availability of a domain name.
- Nibbler - Website testing tool for 10 key areas including accessibility, SEO, social media and technology.
- Woorank - Get a review of your website to address issues and identify opportunities to get ahead of competition.
- Optimizilla - Compress up to 20 JPEG and PNG images while keeping a good level of quality.
- Namecheap - Premium and cost-effective domain names and web hosting.
- CSS Validator - Check if your CSS code is valid and contains no errors.
- Google Analytics - Free insights about traffic, visitors and conversions.
- Usability Checklist - Catch common usability problems of your website before deployment.
- PageSpeed Insights - Quick tool to test your webpage for performance on all devices.
Color Inspiration
- 0to255
- Paletton
- Coolors
- Color Hex
- Color Hunt
- UIGradients
- Flat UI Colors
- myColor Space
- Material Palette
- LOL Color Palettes
Images and Videos
- Coverr
- Pexels
- Burst
- Canva
- Flickr
- Reshot
- Pixabay
- Unsplash
- Life of Pix
- The Stocks
- Free Images
- ISO Republic
- Gratisography
- Subtle Patterns
- Startup Stock Photos
Hosting Sites
Design Inspiration
- Dribble
- Site Inspire
- Media Queries
- Call To idea
- Site Inspire
- One Page Love
- Land Book
- Awwwards
- Site Inspire
- Behance
- UI Movement
- From Up North
- Template Monster
- Design Inspiration
- Webdesign Inspiration
Portfolio Inspiration
- Aral Tasher
- Matt Farley
- Jack Jeznach
- Julia Johnson
- Fidalgo Pedro
- Brittany Chiang
- Developer Portfolios
Youtube Channels
- freeCodeCamp
- The Net Ninja
- Clever Programmer
- Academind
- Web Dev Simplified
- Coding Phase
- Dev Ed
- Ben Awad
- Keep On Coding
- Andy Sterkowitz
- Traversy Media
- Programming With Mosh
- Clement Mihailescu
Podcasts
- Syntax
- codeNewbies
- freeCodeCamp
- Modern Web
- Codepen Radio
- Ladybug Podcast
- Commit Your Code
- DevDiscuss
- Fullstack Radio
- The Changelog
- Frontend Happy Hour
- JavaScript Jabber
Blogs
- freeCodeCamp
- Medium
- Dev.to
- Hashnode
- Stackoverflow
- SitePoint
- Front End Front
- Web Designer Depot
- Smashing Magazine
- CSS-Tricks
- Hackernoon
- Hacker News
- Echo.Js
- Scotch
- Codrops
Newsletters
Contributing
You're very welcome to contribute to this list.
Be sure to read How to Contribute before making your contribution.