1
0
mirror of https://github.com/mojpm/frontend-development.git synced 2025-09-02 16:12:31 +02:00

Update README.md

This commit is contained in:
mojpm
2020-11-01 14:56:44 +03:00
parent 93e75461ae
commit e9ace7b3b1
2 changed files with 240 additions and 31 deletions

271
README.md
View File

@@ -12,7 +12,7 @@ It will also include a Credit section to all the Github repositories from which
We have made an effort to include as many free resources as possible. However we also understand that there are quality resources out there that might cost you a penny but totally worth it. We have made an effort to include as many free resources as possible. However we also understand that there are quality resources out there that might cost you a penny but totally worth it.
We will be sure to indicate the resources that are paid. We will be sure to indicate the resources that are paid.
Resources with 💵💵 indicate that the resource is a paid resource. Resources with 💵 indicate that the resource is a paid resource.
We Invite as many contributions as possible. We Invite as many contributions as possible.
Be sure to read [How To Contribute](CONTRIBUTING.MD) Be sure to read [How To Contribute](CONTRIBUTING.MD)
@@ -26,8 +26,13 @@ Be sure to read [How To Contribute](CONTRIBUTING.MD)
- [How the Internet Works](#how-the-internet-works) - [How the Internet Works](#how-the-internet-works)
- [HTML](#html) - [HTML](#html)
- [CSS](#css) - [CSS](#css)
- [CSS Frameworks and Libraries](#css-frameworks-and-libraries)
- [JavaScript](#javascript)
- [Git](#git)
- [React](#react)
- [Icons](#icons) - [Icons](#icons)
- [Fonts and Typography](#fonts-and-typography) - [Fonts and Typography](#fonts-and-typography)
- [Illustrations](#illustrations)
- [Optimization](#optimization) - [Optimization](#optimization)
- [Color Inspiration](#color-inspiration) - [Color Inspiration](#color-inspiration)
- [Images and Videos](#images-and-videos) - [Images and Videos](#images-and-videos)
@@ -53,6 +58,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
![Roadmap](/img/frontend.png 'Roadmap') ![Roadmap](/img/frontend.png 'Roadmap')
[🔼 Back To Top](#table-of-contents)
# How the Internet Works # How the Internet Works
- Documentation and Articles - Documentation and Articles
@@ -69,6 +76,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- Youtube - [Computer Networks: Crash Course Computer Science](https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29&ab_channel=CrashCourse) - Youtube - [Computer Networks: Crash Course Computer Science](https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29&ab_channel=CrashCourse)
- Youtube - [The World Wide Web: Crash Course Computer Science](https://www.youtube.com/watch?v=guvsH5OFizE&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=31&ab_channel=CrashCourse) - Youtube - [The World Wide Web: Crash Course Computer Science](https://www.youtube.com/watch?v=guvsH5OFizE&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=31&ab_channel=CrashCourse)
[🔼 Back To Top](#table-of-contents)
# HTML # HTML
- Documentation - Documentation
@@ -87,16 +96,26 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- Scrimba - [Introduction to HTML](https://scrimba.com/learn/html) - Scrimba - [Introduction to HTML](https://scrimba.com/learn/html)
- EDX - [HTML5 and CSSS Fundemantals](https://www.edx.org/course/html5-and-css-fundamentals) - EDX - [HTML5 and CSSS Fundemantals](https://www.edx.org/course/html5-and-css-fundamentals)
- Youtube - [HTML Full Course](https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org) - Youtube - [HTML Full Course](https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org)
- Udemy - [HTML and CSS3 Course 💵💵](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/) - Udemy - [HTML and CSS3 Course 💵](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
- CodeCademy - [Learn HTML 💵💵](https://www.codecademy.com/learn/learn-html) - CodeCademy - [Learn HTML 💵](https://www.codecademy.com/learn/learn-html)
- Pluralsight - [HTML Fundamentals 💵💵](https://www.pluralsight.com/courses/html-fundamentals) - Pluralsight - [HTML Fundamentals 💵](https://www.pluralsight.com/courses/html-fundamentals)
- Team Treehouse - [Introduction to HTML and CSS 💵💵](https://teamtreehouse.com/library/introduction-to-html-and-css) - Team Treehouse - [Introduction to HTML and CSS 💵](https://teamtreehouse.com/library/introduction-to-html-and-css)
- Books - Books
- [HTML Notes for Pros](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf) - [HTML Notes for Pros](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf)
- [Head First HTML with CSS 💵💵](https://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X) - [Head First HTML with CSS 💵](https://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X)
- [HTML5 Pocket Reference 💵💵](https://www.amazon.com/HTML5-Pocket-Reference-Comprehensive-Indispensable/dp/1449363350) - [HTML5 Pocket Reference 💵](https://www.amazon.com/HTML5-Pocket-Reference-Comprehensive-Indispensable/dp/1449363350)
- [Design and Build Websites 💵💵](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189) - [Design and Build Websites 💵](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189)
- Websites
- [HTML5 Up](http://html5up.net/) - Responsive HTML5 and CSS3 site templates.
- [Templated](http://templated.co/) - A collection of 845 free CSS & HTML5 site templates.
- [HTML5 Doctor](http://html5doctor.com/) - A great reference for HTML Elements
- [HTML-5-TUTORIAL](https://www.html-5-tutorial.com/) - Another Great Website for everything HTML
- [HTML Validator](https://validator.w3.org/) - Check if your HTML markup is valid and contains no errors.
[🔼 Back To Top](#table-of-contents)
# CSS # CSS
@@ -112,8 +131,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- FreeCodeCamp - [Introduction to Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/) - FreeCodeCamp - [Introduction to Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/)
- W3School - [CSS Tutorial](https://www.w3schools.com/css/) - W3School - [CSS Tutorial](https://www.w3schools.com/css/)
- Scrimba - [Introduction to CSS](https://scrimba.com/learn/introtocss) - Scrimba - [Introduction to CSS](https://scrimba.com/learn/introtocss)
- CodeCademy - [Learn CSS 💵💵](https://www.codecademy.com/learn/learn-css) - CodeCademy - [Learn CSS 💵](https://www.codecademy.com/learn/learn-css)
- Team Treehouse - [CSS Basics 💵💵](https://teamtreehouse.com/library/css-basics) - Team Treehouse - [CSS Basics 💵](https://teamtreehouse.com/library/css-basics)
- Style Guides - Style Guides
@@ -124,15 +143,18 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- Books - Books
- [CSS Secrets 💵💵](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635) - [CSS Secrets 💵](https://www.amazon.com/CSS-Secrets-Solutions-Everyday-Problems/dp/1449372635)
- [The CSS Pocket Guide 💵💵](https://www.amazon.com/CSS-Pocket-Guide-Peachpit/dp/0321732278) - [The CSS Pocket Guide 💵](https://www.amazon.com/CSS-Pocket-Guide-Peachpit/dp/0321732278)
- [CSS: The Definitive Guide: Third Edition 💵💵](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330) - [CSS: The Definitive Guide: Third Edition 💵](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330)
- Websites - Websites
- [Clippy](https://bennettfeely.com/clippy/) - A small tool to help you using the new and powerful clip-path property. - [Clippy](https://bennettfeely.com/clippy/) - A small tool to help you using the new and powerful clip-path property.
- [CSS Diner](https://flukeout.github.io/) - Learn CSS Selectors through a game
- [Flexbox Froggy](https://flexboxfroggy.com/) - Learn CSS Flexbox through a game
- [CSS Grid Garden](https://cssgridgarden.com/) - Learn CSS Grid through a game
- [Can I use](https://caniuse.com/) - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers. - [Can I use](https://caniuse.com/) - Up-to-date browser support tables for front-end technologies on desktop and mobile browsers.
- [CSS-tricks](-tricks.com) - A wonderful blog site for everything CSS - [CSS-tricks](-tricks.com) - A wonderful blog site for everything CSS
- [Animate.css](https://animate.style/) - A simple CSS library that lates you add animations with ease.
- [Responsinator](https://www.responsinator.com/) - A quick tool to check the responsiveness of a site across different devices. - [Responsinator](https://www.responsinator.com/) - A quick tool to check the responsiveness of a site across different devices.
- [7 Days, 7 Websites](https://7days7websites.glitch.me/) - A challenge site to build 7 websites in 7 days - [7 Days, 7 Websites](https://7days7websites.glitch.me/) - A challenge site to build 7 websites in 7 days
- [CSS Easing functions](https://easings.net/) - An amazing collection of easing functions bo be used in CSS transitions and animations. - [CSS Easing functions](https://easings.net/) - An amazing collection of easing functions bo be used in CSS transitions and animations.
@@ -141,49 +163,215 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [CSS for People Who Hate CSS](https://paulcpederson.com/articles/css-for-people-who-hate-css/) -Excellent guide on how to write better, cleaner and more reusable CSS code. - [CSS for People Who Hate CSS](https://paulcpederson.com/articles/css-for-people-who-hate-css/) -Excellent guide on how to write better, cleaner and more reusable CSS code.
- [Cubic Berzier Function Generator](https://cubic-bezier.com/#.17,.67,.83,.67) - Free insights about traffic, visitors and conversions. - [Cubic Berzier Function Generator](https://cubic-bezier.com/#.17,.67,.83,.67) - Free insights about traffic, visitors and conversions.
- Practice your CSS Skills
- [Codepen](http://codepen.io/)
- [JSFiddle](https://jsfiddle.net/)
- [CSS Deck](http://cssdeck.com/)
- [Dablet](http://dabblet.com/)
- [Plunker](http://plnkr.co/)
- [Liveweave](http://liveweave.com/)
- [JS Bin](http://jsbin.com/)
[🔼 Back To Top](#table-of-contents)
# CSS Frameworks and Libraries
- [Bootstrap](https://getbootstrap.com/)
- [Foundation](https://foundation.zurb.com/)
- [Pure](https://purecss.io/)
- [Bulma](https://bulma.io/)
- [Semantic UI](https://semantic-ui.com/)
- [UI Kit](https://getuikit.com/)
- [Materialize CSS](https://materializecss.com/)
- [Milligram](https://milligram.io/)
- [Skeleton](http://getskeleton.com/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Spectre](https://picturepan2.github.io/spectre/)
- [Base](https://getbase.org/)
- [Picnic CSS](https://picnicss.com/)
- [Mustard UI](https://mustard-ui.com/)
- [Dead Simple Grid](https://github.com/mourner/dead-simple-grid)
- [Tent CSS](https://css.sitetent.com/)
- [Animate.css](https://daneden.github.io/animate.css/)
[🔼 Back To Top](#table-of-contents)
# JavaScript
- Documentation
- MDN - [JavaScript Reference]()
- MDN - [Operator Precedence Table]()
- MDN - [JavaScript Event Refernce]()
- Courses
- freeCodeCamp - [JavaScript Algorithms and Data Structures](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/)
- Wes Bos - [JavaScript30](https://javascript30.com/)
- W3Schools - [JavaScript Tutorial](https://www.w3schools.com/js/DEFAULT.asp)
- CodeCademy - [Learn JavaScript](https://www.codecademy.com/learn/introduction-to-javascript)
- EDX - [Programming the Web with JavaScript](https://www.edx.org/course/programming-for-the-web-with-javascript)
- [GeekforGeeks](https://www.geeksforgeeks.org/javascript-tutorial/)
- Udemy [The Complete JavaScript Course 💵](https://www.udemy.com/course/the-complete-javascript-course/)
- Books
- [Eloquent JavaScript](https://eloquentjavascript.net/)
- [You Don't Know JavaScript](https://github.com/getify/You-Dont-Know-JS)
- [JavaScript For Cats](http://jsforcats.com/)
- [Speaking JavaScript](http://speakingjs.com/es5/index.html)
- [JavaScript Notes for Pros](https://books.goalkicker.com/JavaScriptBook/)
- [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/)
- [JavaScripts The Good Parts 💵](https://www.amazon.com/gp/product/0596517742/ref=as_li_ss_tl?ie=UTF8&camp=1789&creative=390957&creativeASIN=0596517742&linkCode=as2&tag=eldoradohills-20)
- [JavaScrit and JQuery 💵](http://javascriptbook.com/)
- Challenge Websites
- [Codewars](https://www.codewars.com/)
- [Hackerrank](https://www.hackerrank.com/)
- [Coderbyte](https://coderbyte.com/)
- [Exercism](https://exercism.io/)
- [CodinGame](https://www.codingame.com/)
- [Project Euler](https://projecteuler.net/)
- [CodeForces](https://codeforces.com/)
- [HackerEarth](https://www.hackerearth.com/)
- [TopCoder](https://www.topcoder.com/)
- [Coderbyte](https://coderbyte.com/)
- [Pramp](https://www.pramp.com/#/)
- [JavaScript Gekk]()
- Visual Studio Code Extensions
- [Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets) - Snippets for JavaScript ES6 syntax and TypeScript.
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-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](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) - Can show code completion and information on a certain function, variables, and properties by hover.
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) -Aauto-complete the path of the file you are trying to import
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Responsible for code formatting.
- [Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) - Matches brackets with same color.
- [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel) - Syntax highlighting for today's JavaScript
- [npm](https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script) - npm support for Visual Studio Code
- [Paste JSON as Code](https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype) - Copy JSON paste as JavaScript or Typescript
- [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) - Prototyping playground that displays the results of an operation inside your IDE
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Automatically reload the web page whenever there are changes in your code.
- [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) - Synchronise your editor settings using Github.
- [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) - REST Client for Visual Studio Code
- [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - Debugging tool.
[🔼 Back To Top](#table-of-contents)
# Git
- Courses
- [Version Control with Git](https://www.coursera.org/learn/version-control-with-git/)
- [A Guide to Git & Version Control](https://www.educative.io/courses/guide-to-git-and-version-control/)
- [Getting Started with Git PAID](https://www.pluralsight.com/courses/getting-started-git/)
- [Learn Git](https://www.codecademy.com/learn/learn-git)
- [Version Control (Git)](https://missing.csail.mit.edu/2020/version-control/)
- [Git Cheat Sheet](http://www.ndpsoftware.com/git-cheatsheet.html)
- Tools
- [Github](http://github.com/)
# React
- Roadmap
![](img/react.png)
- Documentation
- [React Docs](https://reactjs.org/docs/getting-started.html)
- [React Cheatsheet](https://devhints.io/react)
- Courses
- Egghead - [The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)
- Scrimba - [Learn React](https://scrimba.com/course/glearnreact)
- freeCodeCamp - [Introduction to React](https://www.freecodecamp.org/learn/front-end-libraries/react/)
- FullStackOpen - [Introduction to React](https://fullstackopen.com/en/part1)
- Wes Bos - [React for Beginners](https://reactforbeginners.com/)
- LevelUpTutorials - [React for Everyone](https://www.leveluptutorials.com/tutorials/react-for-everyone)
- EpicReact - [Epic React PAID](https://epicreact.dev/)
- Books
- [Road to React PAID](https://www.roadtoreact.com/)
- [Build Your Own React](https://pomb.us/build-your-own-react/)
- [Pure React](https://daveceddia.com/pure-react/)
- [React Explained](https://www.ostraining.com/books/react/)
- [Under the hood ReactJS](https://bogdan-lyashenko.github.io/Under-the-hood-ReactJS/)
- [Fullstack React PAID](https://www.newline.co/fullstack-react/)
- [React from Zero PAID](https://www.newline.co/react-from-zero/)
- Podcasts
- [React Podcast](https://reactpodcast.com/)
- Youtube Channels
- [Codevolution](https://www.youtube.com/channel/UC80PWRj_ZU8Zu0HSMNVwKWw)
- [The Net Ninja](https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg)
- [freeCodeCamp](https://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ)
- [Traversy Media](https://www.youtube.com/user/TechGuyWeb)
- [Coding Addict](https://www.youtube.com/channel/UCMZFwxv5l-XtKi693qMJptA)
- Articles
- [How to React](https://kentcdodds.com/blog/how-to-react)
- [React Fundamentals - Props Vs State](https://kentcdodds.com/blog/props-vs-state)
- [Application State Management with React](https://kentcdodds.com/blog/application-state-management-with-react)
- [Authentication in React Applications](https://kentcdodds.com/blog/authentication-in-react-applications)
# Icons # Icons
- [Flaticon](https://www.flaticon.com/home)
- [Icons8](https://icons8.com/) - [Icons8](https://icons8.com/)
- [Swift Icons](https://www.swifticons.com/)
- [Ionicons](https://ionicons.com/)
- [Icomoon](https://icomoon.io/)
- [Fontastic](http://fontastic.me/)
- [Iconjar](https://geticonjar.com/) - [Iconjar](https://geticonjar.com/)
- [BoxIcons](https://boxicons.com/)
- [Heroicons](https://heroicons.com/)
- [CSS.gg](https://css.gg/) - [CSS.gg](https://css.gg/)
- [Freepik](https://www.freepik.com/) - [Freepik](https://www.freepik.com/)
- [Pngtree](https://pngtree.com/free-icon)
- [Icontre](https://iconstore.co/) - [Icontre](https://iconstore.co/)
- [Flaticon](https://www.flaticon.com/home)
- [Pngtree](https://pngtree.com/free-icon)
- [Ionicons](https://ionicons.com/)
- [UXWing](https://uxwing.com/) - [UXWing](https://uxwing.com/)
- [IconFinder](https://www.iconfinder.com/free_icons) - [Icomoon](https://icomoon.io/)
- [Fontastic](http://fontastic.me/)
- [BoxIcons](https://boxicons.com/)
- [Heroicons](https://heroicons.com/)
- [Iconshock](https://www.iconshock.com/free-icons/) - [Iconshock](https://www.iconshock.com/free-icons/)
- [Iconmonstr](https://iconmonstr.com/) - [IconFinder](https://www.iconfinder.com/free_icons)
- [Swift Icons](https://www.swifticons.com/)
- [Iconfactory](https://freeware.iconfactory.com/icons) - [Iconfactory](https://freeware.iconfactory.com/icons)
- [Iconmonstr](https://iconmonstr.com/)
- [Material Icons](https://material.io/resources/icons/) - [Material Icons](https://material.io/resources/icons/)
- [Font Awesome](https://fontawesome.com/?from=io) - [Font Awesome](https://fontawesome.com/?from=io)
[🔼 Back To Top](#table-of-contents)
# Fonts and Typography # Fonts and Typography
- [Google Fonts](https://fonts.google.com/)
- [Fontsquirrel](https://www.fontsquirrel.com/)
- [MyFonts](https://www.myfonts.com/)
- [FontSpace](https://www.fontspace.com/)
- [1001Fonts](https://www.1001fonts.com/)
- [FFonts](https://www.ffonts.net/) - [FFonts](https://www.ffonts.net/)
- [Befonts](https://befonts.com/) - [Befonts](https://befonts.com/)
- [DaFont](https://www.dafont.com/) - [DaFont](https://www.dafont.com/)
- [Unblast](https://unblast.com/fonts/) - [Unblast](https://unblast.com/fonts/)
- [MyFonts](https://www.myfonts.com/)
- [1001Fonts](https://www.1001fonts.com/)
- [FontSpace](https://www.fontspace.com/)
- [TypeTester](https://www.typetester.org/) - [TypeTester](https://www.typetester.org/)
- [FonstSpace](https://www.fontspace.com/) - [FonstSpace](https://www.fontspace.com/)
- [FontsArena](https://fontsarena.com/) - [FontsArena](https://fontsarena.com/)
- [Typo Guide](http://www.typogui.de/) - [Typo Guide](http://www.typogui.de/)
- [Fontsquirrel](https://www.fontsquirrel.com/)
- [Google Fonts](https://fonts.google.com/)
- [PinSpiry Fonts](https://pinspiry.com/category/free-resources/fonts/) - [PinSpiry Fonts](https://pinspiry.com/category/free-resources/fonts/)
- [Abstract Fonts](http://www.abstractfonts.com/) - [Abstract Fonts](http://www.abstractfonts.com/)
- [Free Script Fonts](https://www.freescriptfonts.net/) - [Free Script Fonts](https://www.freescriptfonts.net/)
- [The 100 best fonts by Creative Bloq](https://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380) - [The 100 best fonts by Creative Bloq](https://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380)
[🔼 Back To Top](#table-of-contents)
# Illustrations
- [Undraw](https://undraw.co/illustrations)
- [Draw Kit](https://drawkit.io/)
- [Blob maker](https://www.blobmaker.app/)
- [IRA Design](https://iradesign.io/gallery/illustrations)
- [Blush](https://blush.design/)
- [Interfacer](https://interfacer.xyz/)
- [Icons 8](https://icons8.com/ouch)
- [Manypixels](https://gallery.manypixels.co/)
[🔼 Back To Top](#table-of-contents)
# Optimization # Optimization
- [Sizzy](https://sizzy.co/) - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once. - [Sizzy](https://sizzy.co/) - A tool for developing responsive websites crazy-fast. See your page on multiple devices at once.
@@ -193,11 +381,12 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Optimizilla](http://optimizilla.com/) - Compress up to 20 JPEG and PNG images while keeping a good level of quality. - [Optimizilla](http://optimizilla.com/) - Compress up to 20 JPEG and PNG images while keeping a good level of quality.
- [Namecheap](https://www.namecheap.com/) - Premium and cost-effective domain names and web hosting. - [Namecheap](https://www.namecheap.com/) - Premium and cost-effective domain names and web hosting.
- [CSS Validator](https://jigsaw.w3.org/css-validator/) - Check if your CSS code is valid and contains no errors. - [CSS Validator](https://jigsaw.w3.org/css-validator/) - Check if your CSS code is valid and contains no errors.
- [HTML Validator](https://validator.w3.org/) - Check if your HTML markup is valid and contains no errors.
- [Google Analytics](https://marketingplatform.google.com/about/analytics/) - Free insights about traffic, visitors and conversions. - [Google Analytics](https://marketingplatform.google.com/about/analytics/) - Free insights about traffic, visitors and conversions.
- [Usability Checklist](https://stayintech.com/info/UX) - Catch common usability problems of your website before deployment. - [Usability Checklist](https://stayintech.com/info/UX) - Catch common usability problems of your website before deployment.
- [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - Quick tool to test your webpage for performance on all devices. - [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) - Quick tool to test your webpage for performance on all devices.
[🔼 Back To Top](#table-of-contents)
# Color Inspiration # Color Inspiration
- [0to255](https://www.0to255.com/) - [0to255](https://www.0to255.com/)
@@ -211,6 +400,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Material Palette](https://www.materialpalette.com/) - [Material Palette](https://www.materialpalette.com/)
- [LOL Color Palettes](https://www.webdesignrankings.com/resources/lolcolors/) - [LOL Color Palettes](https://www.webdesignrankings.com/resources/lolcolors/)
[🔼 Back To Top](#table-of-contents)
# Images and Videos # Images and Videos
- [Coverr](http://www.coverr.co/) - [Coverr](http://www.coverr.co/)
@@ -229,6 +420,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Subtle Patterns](http://subtlepatterns.com/) - [Subtle Patterns](http://subtlepatterns.com/)
- [Startup Stock Photos](http://startupstockphotos.com/) - [Startup Stock Photos](http://startupstockphotos.com/)
[🔼 Back To Top](#table-of-contents)
# Hosting Sites # Hosting Sites
- [Vercel](https://vercel.com/) - [Vercel](https://vercel.com/)
@@ -240,6 +433,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Digital Ocean](https://www.digitalocean.com/) - [Digital Ocean](https://www.digitalocean.com/)
- [Amazon Web Services](https://aws.amazon.com/) - [Amazon Web Services](https://aws.amazon.com/)
[🔼 Back To Top](#table-of-contents)
# Design Inspiration # Design Inspiration
- [Dribble](https://dribbble.com/) - [Dribble](https://dribbble.com/)
@@ -259,6 +454,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Webdesign Inspiration](http://webdesign-inspiration.com/) - [Webdesign Inspiration](http://webdesign-inspiration.com/)
- [UI Movement](https://uimovement.com/) - [UI Movement](https://uimovement.com/)
[🔼 Back To Top](#table-of-contents)
# Portfolio Inspiration # Portfolio Inspiration
- [Brittany Chiang](https://brittanychiang.com/) - [Brittany Chiang](https://brittanychiang.com/)
@@ -269,6 +466,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Aral Tasher](https://araltasher.com/) - [Aral Tasher](https://araltasher.com/)
- [Developer Portfolios](https://github.com/emmabostian/developer-portfolios) - [Developer Portfolios](https://github.com/emmabostian/developer-portfolios)
[🔼 Back To Top](#table-of-contents)
# Youtube Channels # Youtube Channels
- [freeCodeCamp](https://www.youtube.com/c/FreeCodeCamp) - [freeCodeCamp](https://www.youtube.com/c/FreeCodeCamp)
@@ -285,6 +484,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Programming With Mosh](https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA) - [Programming With Mosh](https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA)
- [Clement Mihailescu](https://www.youtube.com/channel/UCaO6VoaYJv4kS-TQO_M-N_g) - [Clement Mihailescu](https://www.youtube.com/channel/UCaO6VoaYJv4kS-TQO_M-N_g)
[🔼 Back To Top](#table-of-contents)
# Podcasts # Podcasts
- [Syntax](https://syntax.fm/) - [Syntax](https://syntax.fm/)
@@ -300,6 +501,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Frontend Happy Hour](https://frontendhappyhour.com/) - [Frontend Happy Hour](https://frontendhappyhour.com/)
- [JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/) - [JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/)
[🔼 Back To Top](#table-of-contents)
# Blogs # Blogs
- [freeCodeCamp](https://freecodecamp.org/news) - [freeCodeCamp](https://freecodecamp.org/news)
@@ -318,6 +521,8 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Scotch](https://scotch.io/) - [Scotch](https://scotch.io/)
- [Codrops](https://tympanus.net/codrops/) - [Codrops](https://tympanus.net/codrops/)
[🔼 Back To Top](#table-of-contents)
# Newsletters # Newsletters
- [CSS-Tricks](https://css-tricks.com/newsletters/) - [CSS-Tricks](https://css-tricks.com/newsletters/)
@@ -326,12 +531,16 @@ This is complete roadmap of technologies you need to learn to go from beginner t
- [Responsive Design Weekly](https://responsivedesign.is/newsletter/) - [Responsive Design Weekly](https://responsivedesign.is/newsletter/)
- [Smashing News Letter](https://www.smashingmagazine.com/the-smashing-newsletter/) - [Smashing News Letter](https://www.smashingmagazine.com/the-smashing-newsletter/)
[🔼 Back To Top](#table-of-contents)
# Contributing # Contributing
You're very welcome to contribute to this list. You're very welcome to contribute to this list.
Be sure to read [How to Contribute]() before making your contribution. Be sure to read [How to Contribute](#) before making your contribution.
# Authors # Authors
[Joel P. Mugalu](https://twitter.com/joelpmugalu) [Joel P. Mugalu](https://twitter.com/joelpmugalu)
[🔼 Back To Top](#table-of-contents)

BIN
img/react.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB