1
0
mirror of https://github.com/mojpm/frontend-development.git synced 2025-08-08 13:36:27 +02:00

Update README

This commit is contained in:
mojpm
2020-10-31 21:21:05 +03:00
parent eb7fb34e35
commit 073fab0f5d

322
README.md
View File

@@ -12,53 +12,39 @@ 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 will be sure to indicate the resources that are paid.
Resources with 💵💵💵 indicate that the resource is a paid resource.
We Invite as many contributions as possible.
Be sure to read [How To Contribute](CONTRIBUTING.MD)
# Table of Contents
- [Summary](#summary)
- [Table of Contents](#table-of-contents)
- [Credits](#credits)
- [Roadmap](#roadmap)
- [How The Internet Works](#how-the-internet-works)
- [HTML](#html)
- [CSS](#css)
- [CSS Frameworks]()
- [JavaScript]()
- [GIT]()
- [React Js]()
- [Vue Js]()
- [Angular]()
- [NPM]()
- [TypeScript]()
- [Server Side Rendering]()
- [Static Site Generators]()
- [Fonts]()
- [Icons]()
- [Color Inspirations]()
- [Images and Videos]()
- [Hosting]()
- [Design Inspiration]()
- [Podcasts]()
- [Youtube Channels]()
- [Portfolio]()
- [Job Search]()
- [Playgrounds]()
- [Newsletters]()
- [Blog Sites]()
- [Inteteresting Articles]()
- [Community]()
- [How the Internet Works](#how-the-internet-works)
- [HTML](#html)
- [CSS](#css)
- [Icons](#icons)
- [Fonts and Typography](#fonts-and-typography)
- [Color Inspirations](#color-inspirations)
- [Images and Videos](#images-and-videos)
- [Hosting Sites](#hosting-sites)
- [Design Inspirations](#design-inspirations)
- [Portfolio Inspiration](#portfolio-inspiration)
- [Youtube Channels](#youtube-channels)
- [Podcasts](#podcasts)
- [Blogs](#blogs)
- [Newsletters](#newsletters)
- [Contributing](#contributing)
- [Authors](#authors)
# Credits
Some of the resources listed in here were first listed in these amazing repositories:
- [Frontend Roadmap](https://github.com/kamranahmedse/developer-roadmap)
- [Frontend Checklist]()
- [Beginner Frontend Resources]()
- [Frontend Development Bookmarks]()
- [Zero to Mastery]()
- [That Twitter Guy]()
- [Dveloper Portfolios]()
# Roadmap
@@ -69,54 +55,256 @@ This is complete roadmap of technologies you need to learn to go from beginner t
# How the Internet Works
- Documentation and Articles
- MDN - [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
- Stanford - [How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)
- MDN - [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
- Stanford - [How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)
- Medium - [How the Internet Works](https://medium.com/@User3141592/how-does-the-internet-work-edc2e22e7eb8#:~:text=It%20is%20a%20network%20that,their%20source%20to%20their%20destination.)
- HowStuffWorks - [How does the Internet Work?](https://computer.howstuffworks.com/internet/basics/internet.htm)
- Medium - [How the Internet Works](https://medium.com/@User3141592/how-does-the-internet-work-edc2e22e7eb8#:~:text=It%20is%20a%20network%20that,their%20source%20to%20their%20destination.)
- HowStuffWorks - [How does the Internet Work?](https://computer.howstuffworks.com/internet/basics/internet.htm)
- Videos
- KhanAcademy - [What is the Internet](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:introducing-the-internet/v/what-is-the-internet)
- Youtube - [The Internet: Crash Course Computer Science](https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30&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)
- KhanAcademy - [What is the Internet](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:introducing-the-internet/v/what-is-the-internet)
- Youtube - [The Internet: Crash Course Computer Science](https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30&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)
# HTML
- Documentation
- Reference - [HTML Reference](https://htmlreference.io/)
- W3Schools - [Introduction to HTML](https://www.w3schools.com/html/html_intro.asp)
- MDN - [HTML5 Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
- CSS-Tricks - [HTML Entity Refernce](https://css-tricks.com/snippets/html/glyphs/)
- Cheat Sheet - [HTML Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/)
- MDN - [HTML5 Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
- Reference - [HTML Reference](https://htmlreference.io/)
- CSS-Tricks - [HTML Entity Refernce](https://css-tricks.com/snippets/html/glyphs/)
- W3Schools - [Introduction to HTML](https://www.w3schools.com/html/html_intro.asp)
- Cheat Sheet - [HTML Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/)
- Courses
- Udacity - [Intro to HTML and CSS](https://www.udacity.com/course/intro-to-html-and-css--ud001)
- W3Schools - [HTML Tutorial](https://www.w3schools.com/html/)
- CodeCademy - [Learn HTML](https://www.codecademy.com/learn/learn-html)
- FreeCodeCamp - [Introduction to Basic HTML & HTML5](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
- Youtube - [HTML Full Course](https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org)
- Udemy (PAID) - [HTML and CSS3 Course](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
- FreeCodeCamp - [Introduction to Basic HTML & HTML5](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
- W3Schools - [HTML Tutorial](https://www.w3schools.com/html/)
- Udacity - [Intro to HTML and CSS](https://www.udacity.com/course/intro-to-html-and-css--ud001)
- Scrimba - [Introduction to HTML](https://scrimba.com/learn/html)
- 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)
- 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)
- 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)
- Books
- [HTML Notes for Pros](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf)
- [Head First HTML with CSS (PAID)](https://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X)
- [HTML5 Pocket Reference (PAID)](https://www.amazon.com/HTML5-Pocket-Reference-Comprehensive-Indispensable/dp/1449363350)
- [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)
- [Design and Build Websites 💵💵](https://www.amazon.com/HTML-CSS-Design-Build-Websites/dp/1118008189)
# CSS
- Documentation
- Documentation
- Reference - [CSS Reference](https://cssreference.io/)
- MDN - [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
- [Extensive CSS Reference](https://tympanus.net/codrops/css_reference/)
- [Extensive CSS Reference](https://tympanus.net/codrops/css_reference/)
- [Getting to Know CSS](https://learn.shayhowe.com/html-css/getting-to-know-css/)
- Courses
- CodeCademy - [Learn CSS](https://www.codecademy.com/learn/learn-css)
- W3School - [CSS Tutorial](https://www.w3schools.com/css/)
- Team Treehouse - [CSS Basics](https://teamtreehouse.com/library/css-basics)
- 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/)
- Scrimba - [Introduction to CSS](https://scrimba.com/learn/introtocss)
- CodeCademy - [Learn CSS 💵💵](https://www.codecademy.com/learn/learn-css)
- Team Treehouse - [CSS Basics 💵💵](https://teamtreehouse.com/library/css-basics)
- Style Guides
- [CSS Guidelines](https://cssguidelin.es/)
- [Trello CSS Guide](https://gist.github.com/bobbygrace/9e961e8982f42eb91b80)
- [AirBnb Style Guide](https://github.com/airbnb/css)
- [Google Style Guide](https://google.github.io/styleguide/htmlcssguide.html)
- Books
- [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)
- [CSS: The Definitive Guide: Third Edition 💵💵](https://www.amazon.com/CSS-Definitive-Guide-Eric-Meyer/dp/0596527330)
- Websites
- [Clippy](https://bennettfeely.com/clippy/) - A small tool to help you using the new and powerful clip-path property.
- [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
- [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.
- [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.
- [Responsive Grid System](http://www.responsivegridsystem.com/) - A quick, flexible and easy fluid grid for easy responsive web design.
- [CSS reference by Codrops](http://tympanus.net/codrops/css_reference/)
- [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.
# Icons
- [Flaticon](https://www.flaticon.com/home)
- [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/)
- [BoxIcons](https://boxicons.com/)
- [Heroicons](https://heroicons.com/)
- [CSS.gg](https://css.gg/)
- [Freepik](https://www.freepik.com/)
- [Pngtree](https://pngtree.com/free-icon)
- [Icontre](https://iconstore.co/)
- [UXWing](https://uxwing.com/)
- [IconFinder](https://www.iconfinder.com/free_icons)
- [Iconshock](https://www.iconshock.com/free-icons/)
- [Iconmonstr](https://iconmonstr.com/)
- [Iconfactory](https://freeware.iconfactory.com/icons)
- [Material Icons](https://material.io/resources/icons/)
- [Font Awesome](https://fontawesome.com/?from=io)
# 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/)
- [Befonts](https://befonts.com/)
- [DaFont](https://www.dafont.com/)
- [Unblast](https://unblast.com/fonts/)
- [TypeTester](https://www.typetester.org/)
- [FonstSpace](https://www.fontspace.com/)
- [FontsArena](https://fontsarena.com/)
- [Typo Guide](http://www.typogui.de/)
- [PinSpiry Fonts](https://pinspiry.com/category/free-resources/fonts/)
- [Abstract Fonts](http://www.abstractfonts.com/)
- [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)
# Color Inspirations
- [0to255](https://www.0to255.com/)
- [Paletton](http://paletton.com/)
- [Coolors](https://coolors.co/)
- [Color Hex](https://www.color-hex.com/)
- [Color Hunt](https://colorhunt.co/)
- [UIGradients](https://uigradients.com/#Kyoto)
- [Flat UI Colors](https://flatuicolors.com/)
- [myColor Space](https://mycolor.space/)
- [Material Palette](https://www.materialpalette.com/)
- [LOL Color Palettes](https://www.webdesignrankings.com/resources/lolcolors/)
# Images and Videos
- [Coverr](http://www.coverr.co/)
- [Pexels](https://www.pexels.com/)
- [Burst](https://burst.shopify.com/)
- [Canva](https://www.canva.com/photos/free/)
- [Flickr](https://www.flickr.com/)
- [Reshot](https://reshot.com/)
- [Pixabay](https://pixabay.com/en/)
- [Unsplash](https://unsplash.com/)
- [Life of Pix](https://www.lifeofpix.com/)
- [The Stocks](http://thestocks.im/)
- [Free Images](https://www.freeimages.com/)
- [ISO Republic](http://isorepublic.com/)
- [Gratisography](https://gratisography.com/)
- [Subtle Patterns](http://subtlepatterns.com/)
- [Startup Stock Photos](http://startupstockphotos.com/)
# Hosting Sites
- [Vercel](https://vercel.com/)
- [Github](https://pages.github.com/)
- [Netlify](https://netlify.com/)
- [Render](https://render.com/)
- [Heroku](https://heroku.com/)
- [Firebase](https://firebase.google.com/)
- [Digital Ocean](https://www.digitalocean.com/)
- [Amazon Web Services](https://aws.amazon.com/)
# Design Inspirations
- [Dribble](https://dribbble.com/)
- [Site Inspire](http://www.siteinspire.com/)
- [Media Queries](http://mediaqueri.es/)
- [Call To idea](http://www.calltoidea.com/)
- [Site Inspire](http://www.siteinspire.com/)
- [One Page Love](https://onepagelove.com/)
- [Land Book](http://land-book.com/)
- [Awwwards](https://www.awwwards.com/)
- [Site Inspire](https://www.siteinspire.com/)
- [Pinterest](http://pinterest.com/)
- [Behance](https://www.behance.net/)
- [From Up North](http://www.fromupnorth.com/)
- [Template Monster](https://www.templatemonster.com/)
- [Design Inspiration](https://www.designspiration.net/)
- [Webdesign Inspiration](http://webdesign-inspiration.com/)
- [UI Movement](https://uimovement.com/)
# Portfolio Inspiration
- [Brittany Chiang](https://brittanychiang.com/)
- [Fidalgo Pedro](https://fidalgo.dev/)
- [Julia Johnson](https://www.juliacodes.com/)
- [Jack Jeznach](http://jacekjeznach.com/)
- [Matt Farley](http://mattfarley.ca/)
- [Aral Tasher](https://araltasher.com/)
- [Developer Portfolios](https://github.com/emmabostian/developer-portfolios)
# Youtube Channels
- [freeCodeCamp](https://www.youtube.com/c/FreeCodeCamp)
- [The Net Ninja](https://youtube.com/c/TheNetNinja)
- [Clever Programmer](https://www.youtube.com/c/CleverProgrammer)
- [Academind](https://www.youtube.com/c/Academind)
- [Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified/)
- [Coding Phase](https://www.youtube.com/channel/UC46wWUso9H5KPQcoL9iE3Ug)
- [Dev Ed](https://www.youtube.com/channel/UClb90NQQcskPUGDIXsQEz5Q)
- [Ben Awad](https://www.youtube.com/user/99baddawg)
- [Keep On Coding](https://www.youtube.com/channel/UCsLo154Krjwhoz8W00N8ItA)
- [Andy Sterkowitz](https://www.youtube.com/channel/UCZ9qFEC82qM6Pk-54Q4TVWA)
- [Traversy Media](https://www.youtube.com/c/TraversyMedia)
- [Programming With Mosh](https://www.youtube.com/channel/UCWv7vMbMWH4-V0ZXdmDpPBA)
- [Clement Mihailescu](https://www.youtube.com/channel/UCaO6VoaYJv4kS-TQO_M-N_g)
# Podcasts
- [Syntax](https://syntax.fm/)
- [codeNewbies](https://www.codenewbie.org/podcast)
- [freeCodeCamp](https://freecodecamp.libsyn.com/)
- [Modern Web](https://www.thisdot.co/modern-web)
- [Codepen Radio](https://blog.codepen.io/radio/)
- [Ladybug Podcast](https://www.ladybug.dev/)
- [Commit Your Code](https://anchor.fm/commityourcode)
- [DevDiscuss](https://dev.to/devdiscuss)
- [Fullstack Radio](https://fullstackradio.com/)
- [The Changelog](https://changelog.com/)
- [Frontend Happy Hour](https://frontendhappyhour.com/)
- [JavaScript Jabber](https://devchat.tv/podcasts/js-jabber/)
# Blogs
- [freeCodeCamp](https://freecodecamp.org/news)
- [Medium](https://medium.com/)
- [Dev.to](https://dev.to/)
- [Hashnode](https://hashnode.com/)
- [Stackoverflow](http://stackoverflow.com/)
- [SitePoint](http://www.sitepoint.com/)
- [Front End Front](https://frontendfront.com/)
- [Web Designer Depot](http://www.webdesignerdepot.com/)
- [Smashing Magazine](https://www.smashingmagazine.com/)
- [CSS-Tricks](https://www.css-tricks.com/)
- [Hackernoon](http://hackernoon.com/)
- [Hacker News](https://news.ycombinator.com/)
- [Echo.Js](https://www.echojs.com/)
- [Scotch](https://scotch.io/)
- [Codrops](https://tympanus.net/codrops/)
# Newsletters
- [CSS-Tricks](https://css-tricks.com/newsletters/)
- [FrontEnd Focus](https://frontendfoc.us/)
- [JavaScript Weekly](https://javascriptweekly.com/)
- [Responsive Design Weekly](https://responsivedesign.is/newsletter/)
- [Smashing News Letter](https://www.smashingmagazine.com/the-smashing-newsletter/)
# Contributing
You're very welcome to contribute to this list.
Be sure to read [How to Contribute]()
# Authors
[Joel P. Mugalu](https://twitter.com/joelpmugalu)